From 99b12554c49663215a37ee15ceb35e5dc7269eb7 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Tue, 15 Oct 2024 12:20:16 +0300 Subject: [PATCH] chore: prepare decorators for standard decorators --- elements/rh-accordion/rh-accordion-header.ts | 9 +-- elements/rh-accordion/rh-accordion-panel.ts | 12 ++-- elements/rh-accordion/rh-accordion.ts | 27 +++++--- elements/rh-alert/rh-alert.ts | 8 ++- .../rh-audio-player/rh-audio-player-about.ts | 12 ++-- .../rh-audio-player-rate-stepper.ts | 9 ++- ...rh-audio-player-scrolling-text-overflow.ts | 3 +- .../rh-audio-player-subscribe.ts | 9 ++- elements/rh-audio-player/rh-audio-player.ts | 43 ++++++++----- elements/rh-audio-player/rh-cue.ts | 15 +++-- elements/rh-audio-player/rh-transcript.ts | 18 ++++-- elements/rh-avatar/rh-avatar.ts | 21 ++++--- elements/rh-back-to-top/rh-back-to-top.ts | 12 ++-- elements/rh-badge/rh-badge.ts | 14 +++-- elements/rh-blockquote/rh-blockquote.ts | 19 +++--- elements/rh-breadcrumb/rh-breadcrumb.ts | 9 ++- elements/rh-button/rh-button.ts | 35 +++++++---- elements/rh-card/rh-card.ts | 12 ++-- elements/rh-code-block/rh-code-block.ts | 52 +++++++++------- elements/rh-cta/rh-cta.ts | 52 ++++++++-------- elements/rh-dialog/rh-dialog.ts | 29 ++++++--- elements/rh-footer/rh-footer-links.ts | 7 +-- elements/rh-footer/rh-footer-social-link.ts | 3 +- elements/rh-footer/rh-footer-universal.ts | 3 +- elements/rh-footer/rh-footer.ts | 10 ++- elements/rh-health-index/rh-health-index.ts | 9 ++- elements/rh-icon/rh-icon.ts | 15 +++-- elements/rh-menu/rh-menu.ts | 4 +- .../rh-navigation-secondary-dropdown.ts | 16 ++--- .../rh-navigation-secondary-menu.ts | 13 ++-- .../rh-navigation-secondary-overlay.ts | 3 +- .../rh-navigation-secondary.ts | 38 ++++++------ elements/rh-pagination/rh-pagination.ts | 34 +++++++---- elements/rh-site-status/rh-site-status.ts | 3 +- elements/rh-skip-link/rh-skip-link.ts | 3 +- elements/rh-spinner/rh-spinner.ts | 6 +- elements/rh-stat/rh-stat.ts | 18 ++++-- elements/rh-subnav/rh-subnav.ts | 15 +++-- elements/rh-surface/rh-surface.ts | 3 +- elements/rh-switch/rh-switch.ts | 24 +++++--- elements/rh-table/rh-sort-button.ts | 16 ++--- elements/rh-table/rh-table.ts | 5 +- elements/rh-tabs/rh-tab-panel.ts | 3 +- elements/rh-tabs/rh-tab.ts | 18 ++++-- elements/rh-tabs/rh-tabs.ts | 42 ++++++++----- elements/rh-tag/rh-tag.ts | 24 +++++--- elements/rh-tile/rh-tile-group.ts | 12 ++-- elements/rh-tile/rh-tile.ts | 49 ++++++++++----- elements/rh-timestamp/rh-timestamp.ts | 28 +++++---- elements/rh-tooltip/rh-tooltip.ts | 9 ++- elements/rh-video-embed/rh-video-embed.ts | 20 ++++-- lib/context/color/consumer.ts | 20 +++--- lib/context/color/controller.ts | 61 +++++++++++++++++++ lib/context/color/provider.ts | 30 ++++----- .../rh-context-demo/rh-context-demo.ts | 8 ++- .../rh-context-picker/rh-context-picker.ts | 11 ++-- lib/ssr-controller.ts | 4 +- uxdot/uxdot-best-practice.ts | 2 +- uxdot/uxdot-copy-button.ts | 4 +- uxdot/uxdot-copy-permalink.ts | 4 +- uxdot/uxdot-example.ts | 16 ++--- uxdot/uxdot-header.ts | 6 +- uxdot/uxdot-pattern-ssr-controller-server.ts | 14 ++--- uxdot/uxdot-pattern.ts | 25 +++++--- uxdot/uxdot-repo-status-checklist.ts | 3 +- uxdot/uxdot-repo-status-list.ts | 2 +- uxdot/uxdot-repo-status-table.ts | 2 +- uxdot/uxdot-search.ts | 28 +++++---- uxdot/uxdot-sidenav.ts | 4 +- uxdot/uxdot-spacer-tokens-table.ts | 8 +-- uxdot/uxdot-toc.ts | 2 +- 71 files changed, 702 insertions(+), 425 deletions(-) diff --git a/elements/rh-accordion/rh-accordion-header.ts b/elements/rh-accordion/rh-accordion-header.ts index 5400ae0398..e820ef1ee2 100644 --- a/elements/rh-accordion/rh-accordion-header.ts +++ b/elements/rh-accordion/rh-accordion-header.ts @@ -49,14 +49,15 @@ const isAccordion = (x: EventTarget): x is RhAccordion => export class RhAccordionHeader extends LitElement { static readonly styles = [styles]; - @property({ type: Boolean, reflect: true }) expanded = false; + @property({ type: Boolean, reflect: true }) + accessor expanded = false; + // @ts-expect-error: lit's types are wrong @consume({ context, subscribe: true }) - @property({ attribute: false }) - private ctx?: RhAccordionContext; + private accessor ctx: RhAccordionContext | undefined; @colorContextConsumer() - private on?: ColorTheme; + private accessor on: ColorTheme | undefined; #dir = new DirController(this); diff --git a/elements/rh-accordion/rh-accordion-panel.ts b/elements/rh-accordion/rh-accordion-panel.ts index 62ed3ba47b..1faf54c8fc 100644 --- a/elements/rh-accordion/rh-accordion-panel.ts +++ b/elements/rh-accordion/rh-accordion-panel.ts @@ -26,16 +26,20 @@ export class RhAccordionPanel extends LitElement { static readonly styles = [styles]; - @property({ type: Boolean, reflect: true }) expanded = false; + @property({ type: Boolean, reflect: true }) + accessor expanded = false; @colorContextProvider() - @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette; + @property({ reflect: true, attribute: 'color-palette' }) + accessor colorPalette: ColorPalette | undefined; - @colorContextConsumer() private on?: ColorTheme; + @colorContextConsumer() + private accessor on: ColorTheme | undefined; + // @ts-expect-error: lit's types are wrong @consume({ context, subscribe: true }) @property({ attribute: false }) - private ctx?: RhAccordionContext; + private accessor ctx: RhAccordionContext | undefined; connectedCallback() { super.connectedCallback(); diff --git a/elements/rh-accordion/rh-accordion.ts b/elements/rh-accordion/rh-accordion.ts index cd9533f6ec..2ced25290f 100644 --- a/elements/rh-accordion/rh-accordion.ts +++ b/elements/rh-accordion/rh-accordion.ts @@ -68,26 +68,31 @@ export class RhAccordion extends LitElement { /** * Sets accordion header's accents position to inline or bottom */ - @property({ attribute: true, reflect: true }) accents?: 'inline' | 'bottom'; + @property({ attribute: true, reflect: true }) + accessor accents: 'inline' | 'bottom' | undefined; /** * If this accordion uses large styles */ - @property({ reflect: true, type: Boolean }) large = false; + @property({ reflect: true, type: Boolean }) + accessor large = false; /** * If this accordion has a border */ - @property({ reflect: true, type: Boolean }) bordered = true; + @property({ reflect: true, type: Boolean }) + accessor bordered = true; /** * Color Palette for this accordion. * @see https://ux.redhat.com/theming/color-palettes/ */ @colorContextProvider() - @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette; + @property({ reflect: true, attribute: 'color-palette' }) + accessor colorPalette: ColorPalette | undefined; - @colorContextConsumer() private on?: ColorTheme; + @colorContextConsumer() + private accessor on: ColorTheme | undefined; /** * Sets and reflects the currently expanded accordion 0-based indexes. @@ -105,10 +110,6 @@ export class RhAccordion extends LitElement { return JSON.stringify(old) !== JSON.stringify(value); }, }) - get expandedIndex() { - return this.#expandedIndex; - } - set expandedIndex(value) { this.#expandedIndex = value; this.#expanded = !!this.#expandedIndex.length; @@ -123,6 +124,10 @@ export class RhAccordion extends LitElement { }); } + get expandedIndex() { + return this.#expandedIndex; + } + /** All headers for this accordion */ get headers() { return this.#allHeaders(); @@ -143,7 +148,9 @@ export class RhAccordion extends LitElement { #mo = new MutationObserver(() => this.updateAccessibility()); - @provide({ context }) private ctx = this.#makeContext(); + // @ts-expect-error: lit's types are wrong + @provide({ context }) + private accessor ctx = this.#makeContext(); connectedCallback() { super.connectedCallback(); diff --git a/elements/rh-alert/rh-alert.ts b/elements/rh-alert/rh-alert.ts index 41c28e4ec4..cb4b96e96e 100644 --- a/elements/rh-alert/rh-alert.ts +++ b/elements/rh-alert/rh-alert.ts @@ -149,7 +149,7 @@ export class RhAlert extends LitElement { * - `success` - Indicates a success state, like if a process was completed without errors. */ @property({ reflect: true }) - state: + accessor state: | 'danger' | 'warning' | 'caution' @@ -169,7 +169,8 @@ export class RhAlert extends LitElement { * update, or confirmation, like the result of a user action that cannot * be presented within a specific layout or component. */ - @property({ reflect: true }) variant?: 'alternate' | 'toast' | 'inline'; + @property({ reflect: true }) + accessor variant: 'alternate' | 'toast' | 'inline' | undefined; /** * Alert variants have different rules regarding their ability to be dismissed by a user. @@ -177,7 +178,8 @@ export class RhAlert extends LitElement { * Warning and Danger Inline alerts can be dismissed by a user resolving the issues caused by the alert. * All Toast alerts can be dismissed by a user selecting the close button or waiting for them to time out. */ - @property({ reflect: true, type: Boolean }) dismissable = false; + @property({ reflect: true, type: Boolean }) + accessor dismissable = false; #slots = new SlotController(this, 'header', null, 'actions'); diff --git a/elements/rh-audio-player/rh-audio-player-about.ts b/elements/rh-audio-player/rh-audio-player-about.ts index 42306bbccf..b9123a89c8 100644 --- a/elements/rh-audio-player/rh-audio-player-about.ts +++ b/elements/rh-audio-player/rh-audio-player-about.ts @@ -25,15 +25,19 @@ export class RhAudioPlayerAbout extends LitElement { static readonly styles = [panelStyles, styles]; /** Default label content */ - @property() label?: string; + @property() + accessor label: string | undefined; /** Series this track belongs to, if applicable */ - @property({ attribute: 'series' }) mediaseries?: string; + @property({ attribute: 'series' }) + accessor mediaseries: string | undefined; /** Title of audio track */ - @property({ attribute: 'mediatitle' }) mediatitle?: string; + @property({ attribute: 'mediatitle' }) + accessor mediatitle: string | undefined; - @queryAssignedElements() private content?: HTMLElement[]; + @queryAssignedElements() + private accessor content: HTMLElement[] | undefined; #headings = new HeadingLevelContextConsumer(this); diff --git a/elements/rh-audio-player/rh-audio-player-rate-stepper.ts b/elements/rh-audio-player/rh-audio-player-rate-stepper.ts index c69f29a213..af306bdafd 100644 --- a/elements/rh-audio-player/rh-audio-player-rate-stepper.ts +++ b/elements/rh-audio-player/rh-audio-player-rate-stepper.ts @@ -25,13 +25,16 @@ export class RhAudioPlayerRateStepper extends LitElement { private static pbrFixed = 2; /** Playback rate */ - @property({ reflect: true, type: Number, attribute: 'playback-rate' }) playbackRate = 1; + @property({ reflect: true, type: Number, attribute: 'playback-rate' }) + accessor playbackRate = 1; /** Playback rate */ - @property({ reflect: true, type: Boolean }) disabled = false; + @property({ reflect: true, type: Boolean }) + accessor disabled = false; /** Playback rate */ - @property() label?: string; + @property() + accessor label: string | undefined; #dir = new DirController(this); diff --git a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts index 0821deb196..1d41da28bd 100644 --- a/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts +++ b/elements/rh-audio-player/rh-audio-player-scrolling-text-overflow.ts @@ -16,7 +16,8 @@ import styles from './rh-audio-player-scrolling-text-overflow.css'; export class RhAudioPlayerScrollingTextOverflow extends LitElement { static readonly styles = [styles]; - @colorContextConsumer() private on?: ColorTheme; + @colorContextConsumer() + private accessor on: ColorTheme | undefined; #scrolling = false; diff --git a/elements/rh-audio-player/rh-audio-player-subscribe.ts b/elements/rh-audio-player/rh-audio-player-subscribe.ts index 2f2cc0c984..a76c714563 100644 --- a/elements/rh-audio-player/rh-audio-player-subscribe.ts +++ b/elements/rh-audio-player/rh-audio-player-subscribe.ts @@ -24,11 +24,14 @@ import styles from './rh-audio-player-subscribe.css'; export class RhAudioPlayerSubscribe extends LitElement { static readonly styles = [panelStyles, styles]; - @property() heading?: string; + @property() + accessor heading: string | undefined; - @property() label?: string; + @property() + accessor label: string | undefined; - @queryAssignedElements({ slot: '' }) private body?: HTMLElement[]; + @queryAssignedElements({ slot: '' }) + private accessor body: HTMLElement[] | undefined; #headings = new HeadingLevelContextConsumer(this); diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts index 94400c495e..41ae774b1c 100644 --- a/elements/rh-audio-player/rh-audio-player.ts +++ b/elements/rh-audio-player/rh-audio-player.ts @@ -84,10 +84,12 @@ export class RhAudioPlayer extends LitElement { }; /** Audio's series name, e.g. Podcast series. */ - @property({ reflect: true }) mediaseries?: string; + @property({ reflect: true }) + accessor mediaseries: string | undefined; /** Audio's title, e.g. Podcast episode title. */ - @property({ reflect: true }) mediatitle?: string; + @property({ reflect: true }) + accessor mediatitle: string | undefined; /** * Layout: @@ -96,43 +98,52 @@ export class RhAudioPlayer extends LitElement { * - `compact-wide`: like compact but full width * - `full`: maximal controls and artwork */ - @property({ reflect: true }) layout: 'mini' | 'compact' | 'compact-wide' | 'full' = 'mini'; + @property({ reflect: true }) + accessor layout: 'mini' | 'compact' | 'compact-wide' | 'full' = 'mini'; /** URL to audio's artwork */ - @property({ reflect: true }) poster?: string; + @property({ reflect: true }) + accessor poster: string | undefined; /** Playback volume */ - @property({ reflect: true, type: Number }) volume = 0.5; + @property({ reflect: true, type: Number }) + accessor volume = 0.5; /** Playback rate */ - @property({ reflect: true, type: Number }) playbackRate = 1; + @property({ reflect: true, type: Number }) + accessor playbackRate = 1; - @property({ reflect: true, type: Boolean }) expanded = false; + @property({ reflect: true, type: Boolean }) + accessor expanded = false; - @property({ reflect: true }) lang!: string; + @property({ reflect: true }) + accessor lang!: string; - @property({ attribute: false }) microcopy = {}; + @property({ attribute: false }) + accessor microcopy = {}; /** Element's color palette */ @colorContextProvider() - @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette; + @property({ reflect: true, attribute: 'color-palette' }) + accessor colorPalette: ColorPalette | undefined; - @colorContextConsumer() private on?: ColorTheme; + @colorContextConsumer() + private accessor on: ColorTheme | undefined; @queryAssignedElements({ slot: 'series' }) - private _mediaseries?: HTMLElement[]; + private accessor _mediaseries: HTMLElement[] | undefined; @queryAssignedElements({ slot: 'title' }) - private _mediatitle?: HTMLElement[]; + private accessor _mediatitle: HTMLElement[] | undefined; @queryAssignedElements({ slot: 'transcript', selector: 'rh-transcript' }) - private _transcripts?: RhTranscript[]; + private accessor _transcripts: RhTranscript[] | undefined; @queryAssignedElements({ slot: 'about', selector: 'rh-audio-player-about' }) - private _abouts?: RhAudioPlayerAbout[]; + private accessor _abouts: RhAudioPlayerAbout[] | undefined; @queryAssignedElements({ slot: 'subscribe', selector: 'rh-audio-player-subscribe' }) - private _subscribe?: RhAudioPlayerSubscribe[]; + private accessor _subscribe: RhAudioPlayerSubscribe[] | undefined; get #duration() { return this.#mediaElement?.duration ?? 0; diff --git a/elements/rh-audio-player/rh-cue.ts b/elements/rh-audio-player/rh-cue.ts index 30cd0f0718..369832211e 100644 --- a/elements/rh-audio-player/rh-cue.ts +++ b/elements/rh-audio-player/rh-cue.ts @@ -65,19 +65,24 @@ export class RhCue extends LitElement { static readonly styles = [styles]; /** Start time, in mm:ss.ms */ - @property() start?: string; + @property() + accessor start: string | undefined; /** End time, in mm:ss.ms */ - @property() end?: string; + @property() + accessor end: string | undefined; /** Text of this cue. Overridden by `text` slot */ - @property() text?: string; + @property() + accessor text: string | undefined; /** Name of voice speaking this text. Overridden by `voice` slot */ - @property({ reflect: true }) voice?: string; + @property({ reflect: true }) + accessor voice: string | undefined; /** Whether this cue is active right now */ - @property({ type: Boolean, reflect: true }) active = false; + @property({ type: Boolean, reflect: true }) + accessor active = false; #headings = new HeadingLevelContextConsumer(this); diff --git a/elements/rh-audio-player/rh-transcript.ts b/elements/rh-audio-player/rh-transcript.ts index a68812623d..8a5b2d6ac5 100644 --- a/elements/rh-audio-player/rh-transcript.ts +++ b/elements/rh-audio-player/rh-transcript.ts @@ -29,17 +29,23 @@ import '@rhds/elements/rh-icon/rh-icon.js'; export class RhTranscript extends LitElement { static readonly styles = [buttonStyles, panelStyles, styles]; - @property() heading?: string; + @property() + accessor heading: string | undefined; - @property() label?: string; + @property() + accessor label: string | undefined; - @property({ reflect: true }) lang!: string; + @property({ reflect: true }) + accessor lang!: string; - @state() private _label!: string; + @state() + private accessor _label!: string; - @state() private _autoscroll!: string; + @state() + private accessor _autoscroll!: string; - @state() private _download!: string; + @state() + private accessor _download!: string; @queryAssignedElements({ selector: 'rh-cue' }) private _cues!: RhCue[]; diff --git a/elements/rh-avatar/rh-avatar.ts b/elements/rh-avatar/rh-avatar.ts index 7b333b211a..4abbd14269 100644 --- a/elements/rh-avatar/rh-avatar.ts +++ b/elements/rh-avatar/rh-avatar.ts @@ -39,28 +39,35 @@ export class RhAvatar extends LitElement { * * It will be displayed instead of a random pattern. */ - @property({ reflect: true }) src?: string; + @property({ reflect: true }) + accessor src: string | undefined; /** * The user's name, either given name and family name, or username. * * When displaying a pattern, the name will be used to seed the pattern generator. */ - @property({ reflect: true }) name?: string; + @property({ reflect: true }) + accessor name: string | undefined; /** The auxiliary information about the user, e.g. job title */ - @property({ reflect: true }) subtitle?: string; + @property({ reflect: true }) + accessor subtitle: string | undefined; /** The type of pattern to display. */ - @property({ reflect: true }) layout?: 'inline' | 'block'; + @property({ reflect: true }) + accessor layout: 'inline' | 'block' | undefined; /** The type of pattern to display. */ - @property({ reflect: true }) pattern?: 'squares' | 'triangles'; + @property({ reflect: true }) + accessor pattern: 'squares' | 'triangles' | undefined; /** When true, hides the title and subtitle */ - @property({ reflect: true, type: Boolean }) plain = false; + @property({ reflect: true, type: Boolean }) + accessor plain = false; - @colorContextConsumer() @property() private on?: ColorTheme; + @colorContextConsumer() + private accessor on: ColorTheme | undefined; #style?: CSSStyleDeclaration; diff --git a/elements/rh-back-to-top/rh-back-to-top.ts b/elements/rh-back-to-top/rh-back-to-top.ts index 09b2a99d1a..bad9d4fc7e 100644 --- a/elements/rh-back-to-top/rh-back-to-top.ts +++ b/elements/rh-back-to-top/rh-back-to-top.ts @@ -23,16 +23,20 @@ export class RhBackToTop extends LitElement { static readonly styles = [styles]; /** Flag to always show back to top button, defaults to false. */ - @property({ reflect: true, attribute: 'visible' }) visible?: 'always' | undefined; + @property({ reflect: true, attribute: 'visible' }) + accessor visible: 'always' | undefined | undefined; /** Element selector to spy on for scrolling. Not passing a selector defaults to spying on window scroll events */ - @property({ reflect: true, attribute: 'scrollable-selector' }) scrollableSelector?: string; + @property({ reflect: true, attribute: 'scrollable-selector' }) + accessor scrollableSelector: string | undefined; /** Distance from the top of the scrollable element to trigger the visibility of the back to top button */ - @property({ type: Number, attribute: 'scroll-distance' }) scrollDistance = 400; + @property({ type: Number, attribute: 'scroll-distance' }) + accessor scrollDistance = 400; /** Page fragment link to target element, must include hash ex: #top */ - @property({ reflect: true }) href?: string; + @property({ reflect: true }) + accessor href: string | undefined; #scrollSpy = false; diff --git a/elements/rh-badge/rh-badge.ts b/elements/rh-badge/rh-badge.ts index 2a784203ce..ea462b08a2 100644 --- a/elements/rh-badge/rh-badge.ts +++ b/elements/rh-badge/rh-badge.ts @@ -25,12 +25,11 @@ import styles from './rh-badge.css'; export class RhBadge extends LitElement { static readonly styles = [styles]; - @colorContextConsumer() private on?: string; - /** * Denotes the state-of-affairs this badge represents */ - @property({ reflect: true }) state: + @property({ reflect: true }) + accessor state: | 'danger' | 'warning' | 'caution' @@ -48,13 +47,18 @@ export class RhBadge extends LitElement { * You can pair it with `threshold` attribute to add a `+` sign * if the number exceeds the threshold value. */ - @property({ reflect: true, type: Number }) number?: number; + @property({ reflect: true, type: Number }) + accessor number: number | undefined; /** * Sets a threshold for the numeric value and adds `+` sign if * the numeric value exceeds the threshold value. */ - @property({ reflect: true, type: Number }) threshold?: number; + @property({ reflect: true, type: Number }) + accessor threshold: number | undefined; + + @colorContextConsumer() + private accessor on: string | undefined; /** Ensures that state is consistent, regardless of input */ @observes('state', { waitFor: 'updated' }) diff --git a/elements/rh-blockquote/rh-blockquote.ts b/elements/rh-blockquote/rh-blockquote.ts index 8ed08840e5..25754f914c 100644 --- a/elements/rh-blockquote/rh-blockquote.ts +++ b/elements/rh-blockquote/rh-blockquote.ts @@ -24,7 +24,8 @@ import styles from './rh-blockquote.css'; export class RhBlockquote extends LitElement { static readonly styles = styles; - @property({ type: String }) title = 'Blockquote'; + @property({ type: String }) + accessor title = 'Blockquote'; /** * Set the colorPalette of the blockquote. Possible values are: @@ -32,26 +33,30 @@ export class RhBlockquote extends LitElement { * - `darkest` */ @colorContextProvider() - @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: ColorPalette; - - @colorContextConsumer() private on?: ColorTheme; + @property({ reflect: true, attribute: 'color-palette' }) + accessor colorPalette: ColorPalette | undefined; /** * Set the alignment of the blockquote. Possible values are: * - `left` (default) * - `center` */ - @property({ reflect: true }) align: 'center' | 'inline-start' = 'inline-start'; + @property({ reflect: true }) + accessor align: 'center' | 'inline-start' = 'inline-start'; /** Optional highlight attribute that, when present, shows a highlight on side of blockquote. */ - @property({ reflect: true, type: Boolean }) highlight = false; + @property({ reflect: true, type: Boolean }) + accessor highlight = false; /** * Set the text size of the blockquote. Possible values are: * - `default` * - `large` */ - @property({ reflect: true }) size: 'default' | 'large' = 'default'; + @property({ reflect: true }) + accessor size: 'default' | 'large' = 'default'; + + @colorContextConsumer() private accessor on: ColorTheme | undefined; render() { const { highlight, on = 'light' } = this; diff --git a/elements/rh-breadcrumb/rh-breadcrumb.ts b/elements/rh-breadcrumb/rh-breadcrumb.ts index 3b1dcd742d..cc8fe4ab8a 100644 --- a/elements/rh-breadcrumb/rh-breadcrumb.ts +++ b/elements/rh-breadcrumb/rh-breadcrumb.ts @@ -42,17 +42,20 @@ export class RhBreadcrumb extends LitElement { * Customize the default `aria-label` on the `