@redvars/peacock 3.8.1 → 3.8.3

package/dist/alert.js

@@ -0,0 +1,190 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { e } from './class-map-DG7CA1et.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.alert {
+  align-items: flex-start;
+  background: var(--alert-container-color);
+  border-radius: var(--alert-border-radius);
+  display: grid;
+  gap: var(--spacing-100);
+  grid-template-columns: auto 1fr;
+  padding: var(--spacing-200);
+}
+
+.alert-icon {
+  align-items: center;
+  color: var(--alert-icon-color);
+  display: inline-flex;
+  justify-content: center;
+  --icon-size: 1.5rem;
+}
+
+.alert-content .alert-label {
+  display: inline;
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
+  color: var(--alert-label-text-color);
+  margin-inline-end: var(--spacing-050);
+}
+.alert-content .alert-description {
+  display: inline;
+  font-family: var(--typography-body-medium-font-family) !important;
+  font-size: var(--typography-body-medium-font-size) !important;
+  font-weight: var(--typography-body-medium-font-weight) !important;
+  line-height: var(--typography-body-medium-line-height) !important;
+  letter-spacing: var(--typography-body-medium-letter-spacing) !important;
+  color: var(--alert-description-text-color);
+}
+
+:host {
+  --alert-container-color: var(--color-tertiary-container);
+  --alert-label-text-color: var(--color-on-tertiary-container);
+  --alert-description-text-color: var(--color-on-tertiary-container);
+  --alert-icon-color: var(--color-on-tertiary-container);
+  --alert-border-radius: var(--shape-corner-small);
+}
+
+.alert.info,
+.alert-content.info {
+  --alert-container-color: var(--color-primary-container);
+  --alert-label-text-color: var(--color-on-primary-container);
+  --alert-description-text-color: var(--color-on-primary-container);
+  --alert-icon-color: var(--color-on-primary-container);
+}
+
+.alert.success,
+.alert-content.success {
+  --alert-container-color: var(--color-success-container);
+  --alert-label-text-color: var(--color-on-success-container);
+  --alert-description-text-color: var(--color-on-success-container);
+  --alert-icon-color: var(--color-on-success-container);
+}
+
+.alert.warning,
+.alert-content.warning {
+  --alert-container-color: var(--color-warning-container);
+  --alert-label-text-color: var(--color-on-warning-container);
+  --alert-description-text-color: var(--color-on-warning-container);
+  --alert-icon-color: var(--color-on-warning-container);
+}
+
+.alert.error,
+.alert-content.error {
+  --alert-container-color: var(--color-error-container);
+  --alert-label-text-color: var(--color-on-error-container);
+  --alert-description-text-color: var(--color-on-error-container);
+  --alert-icon-color: var(--color-on-error-container);
+}`;
+
+const VARIANT_LABELS = {
+    note: 'Note',
+    info: 'Info',
+    success: 'Success',
+    warning: 'Warning',
+    error: 'Error',
+};
+const VARIANT_ICONS = {
+    note: 'star',
+    info: 'info',
+    success: 'check_circle',
+    warning: 'warning',
+    error: 'error',
+};
+/**
+ * @label Alert
+ * @tag wc-alert
+ * @rawTag alert
+ * @summary Alerts show short, prominent contextual messages with optional icon and description.
+ *
+ * @cssprop --alert-container-color - Background color of the alert container.
+ * @cssprop --alert-label-text-color - Label text color.
+ * @cssprop --alert-description-text-color - Description text color.
+ * @cssprop --alert-icon-color - Icon color.
+ * @cssprop --alert-border-radius - Border radius of the alert surface.
+ *
+ * @example
+ * ```html
+ * <wc-alert variant="note" description="Use semantic roles that preserve a 3:1 contrast ratio."></wc-alert>
+ * ```
+ * @tags display, feedback
+ */
+let Alert = class Alert extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Visual intent of the alert.
+         */
+        this.variant = 'note';
+        /**
+         * Optional description text when a default slot is not provided.
+         */
+        this.description = '';
+    }
+    get resolvedLabel() {
+        return this.label || VARIANT_LABELS[this.variant];
+    }
+    get resolvedIcon() {
+        return this.icon || VARIANT_ICONS[this.variant];
+    }
+    render() {
+        return b `
+      <div class=${e({ 'alert': true, [this.variant]: true })} role="status" aria-live="polite">
+        <div class="alert-icon" aria-hidden="true">
+          <slot name="icon">
+            <wc-icon name=${this.resolvedIcon}></wc-icon>
+          </slot>
+        </div>
+
+        <div class=${e({ 'alert-content': true, [this.variant]: true })}>
+          <div class="alert-label">
+            <slot name="label">${this.resolvedLabel}:</slot>
+          </div>
+
+          <div class="alert-description">
+            <slot>${this.description || A}</slot>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+};
+Alert.styles = [css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], Alert.prototype, "variant", void 0);
+__decorate([
+    n({ type: String })
+], Alert.prototype, "label", void 0);
+__decorate([
+    n({ type: String })
+], Alert.prototype, "icon", void 0);
+__decorate([
+    n({ type: String })
+], Alert.prototype, "description", void 0);
+Alert = __decorate([
+    IndividualComponent
+], Alert);
+
+export { Alert };
+//# sourceMappingURL=alert.js.map

package/dist/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sources":["../../src/alert/alert.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './alert.scss';\n\ntype AlertVariant = 'note' | 'info' | 'success' | 'warning' | 'error';\n\nconst VARIANT_LABELS: Record<AlertVariant, string> = {\n  note: 'Note',\n  info: 'Info',\n  success: 'Success',\n  warning: 'Warning',\n  error: 'Error',\n};\n\nconst VARIANT_ICONS: Record<AlertVariant, string> = {\n  note: 'star',\n  info: 'info',\n  success: 'check_circle',\n  warning: 'warning',\n  error: 'error',\n};\n\n/**\n * @label Alert\n * @tag wc-alert\n * @rawTag alert\n * @summary Alerts show short, prominent contextual messages with optional icon and description.\n *\n * @cssprop --alert-container-color - Background color of the alert container.\n * @cssprop --alert-label-text-color - Label text color.\n * @cssprop --alert-description-text-color - Description text color.\n * @cssprop --alert-icon-color - Icon color.\n * @cssprop --alert-border-radius - Border radius of the alert surface.\n *\n * @example\n * ```html\n * <wc-alert variant=\"note\" description=\"Use semantic roles that preserve a 3:1 contrast ratio.\"></wc-alert>\n * ```\n * @tags display, feedback\n */\n@IndividualComponent\nexport class Alert extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Visual intent of the alert.\n   */\n  @property({ type: String, reflect: true })\n  variant: AlertVariant = 'note';\n\n  /**\n   * Optional explicit label text. Falls back to a variant-based label.\n   */\n  @property({ type: String })\n  label?: string;\n\n  /**\n   * Optional explicit icon name. Falls back to a variant-based icon.\n   */\n  @property({ type: String })\n  icon?: string;\n\n  /**\n   * Optional description text when a default slot is not provided.\n   */\n  @property({ type: String })\n  description = '';\n\n  private get resolvedLabel() {\n    return this.label || VARIANT_LABELS[this.variant];\n  }\n\n  private get resolvedIcon() {\n    return this.icon || VARIANT_ICONS[this.variant];\n  }\n\n  render() {\n    return html`\n      <div class=${classMap({ 'alert': true, [this.variant]: true })} role=\"status\" aria-live=\"polite\">\n        <div class=\"alert-icon\" aria-hidden=\"true\">\n          <slot name=\"icon\">\n            <wc-icon name=${this.resolvedIcon}></wc-icon>\n          </slot>\n        </div>\n\n        <div class=${classMap({ 'alert-content': true, [this.variant]: true })}>\n          <div class=\"alert-label\">\n            <slot name=\"label\">${this.resolvedLabel}:</slot>\n          </div>\n\n          <div class=\"alert-description\">\n            <slot>${this.description || nothing}</slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASA,MAAM,cAAc,GAAiC;AACnD,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf;AAED,MAAM,aAAa,GAAiC;AAClD,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,OAAO,EAAE,cAAc;AACvB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,KAAK,EAAE,OAAO;CACf;AAED;;;;;;;;;;;;;;;;;AAiBG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQA,GAAU,CAAA;AAA9B,IAAA,WAAA,GAAA;;AAGL;;AAEG;QAEH,IAAA,CAAA,OAAO,GAAiB,MAAM;AAc9B;;AAEG;QAEH,IAAA,CAAA,WAAW,GAAG,EAAE;IA+BlB;AA7BE,IAAA,IAAY,aAAa,GAAA;QACvB,OAAO,IAAI,CAAC,KAAK,IAAI,cAAc,CAAC,IAAI,CAAC,OAAO,CAAC;IACnD;AAEA,IAAA,IAAY,YAAY,GAAA;QACtB,OAAO,IAAI,CAAC,IAAI,IAAI,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC;IACjD;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;AACI,iBAAA,EAAAC,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,CAAC,CAAA;;;AAGxC,0BAAA,EAAA,IAAI,CAAC,YAAY,CAAA;;;;AAIxB,mBAAA,EAAAA,CAAQ,CAAC,EAAE,eAAe,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,EAAE,CAAC,CAAA;;AAE7C,+BAAA,EAAA,IAAI,CAAC,aAAa,CAAA;;;;oBAI/B,IAAI,CAAC,WAAW,IAAIC,CAAO,CAAA;;;;KAI1C;IACH;;AAtDO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAMxB,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACV,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAM/B,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACX,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AAMf,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACZ,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAMd,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AACT,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAzBN,KAAK,GAAA,UAAA,CAAA;IADjB;AACY,CAAA,EAAA,KAAK,CAwDjB;;;;"}

package/dist/app-bar.js

@@ -0,0 +1,324 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { e } from './class-map-DG7CA1et.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z$1 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  width: 100%;
+  /* ---- Public custom properties ---- */
+  --app-bar-container-height: 4rem; /* 64dp */
+  --app-bar-padding-inline: 0.25rem;
+  --app-bar-shadow: none;
+}
+
+/* ---- Base ---- */
+.app-bar {
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+  box-shadow: var(--app-bar-shadow);
+  color: var(--_app-bar-headline-color);
+}
+
+.background {
+  position: absolute;
+  inset: 0;
+  background-color: var(--_app-bar-container-color);
+  pointer-events: none;
+  z-index: 0;
+  transition: background-color 200ms ease;
+}
+
+/* ---- Row layout ---- */
+.row {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  padding-inline: var(--app-bar-padding-inline);
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.row-top {
+  height: var(--app-bar-container-height);
+  gap: 0.25rem;
+}
+
+/* ---- Slots ---- */
+.leading,
+.trailing {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  gap: 0.25rem;
+}
+
+.leading {
+  --icon-color: var(--_app-bar-leading-icon-color);
+}
+
+.trailing {
+  --icon-color: var(--_app-bar-trailing-icon-color);
+}
+
+.headline {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--typescale-title-large-font);
+  font-size: var(--typescale-title-large-size);
+  font-weight: var(--typescale-title-large-weight);
+  line-height: var(--typescale-title-large-line-height);
+  letter-spacing: var(--typescale-title-large-tracking);
+  color: var(--_app-bar-headline-color);
+  padding-inline: 0.75rem;
+}
+
+/* ---- Small variant (default) ---- */
+:host([variant=small]) .headline,
+:host(:not([variant])) .headline {
+  text-align: start;
+}
+
+/* ---- Center-aligned variant ---- */
+:host([variant=center-aligned]) .headline {
+  text-align: center;
+}
+
+/* ---- Medium variant ---- */
+:host([variant=medium]) .row-top .headline {
+  display: none;
+}
+:host([variant=medium]) .row-bottom {
+  height: 3rem; /* 48dp */
+  padding-inline: calc(var(--app-bar-padding-inline) + 1rem);
+  padding-block-end: 0.5rem;
+  align-items: flex-end;
+}
+:host([variant=medium]) .row-bottom .headline {
+  font: var(--typescale-headline-small-font, inherit);
+  font-size: var(--typescale-headline-small-size, 1.5rem);
+  font-weight: var(--typescale-headline-small-weight, 400);
+  line-height: var(--typescale-headline-small-line-height, 2rem);
+  letter-spacing: var(--typescale-headline-small-tracking, 0);
+  padding-inline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+/* ---- Large variant ---- */
+:host([variant=large]) .row-top .headline {
+  display: none;
+}
+:host([variant=large]) .row-bottom {
+  height: 5.5rem; /* 88dp */
+  padding-inline: calc(var(--app-bar-padding-inline) + 1rem);
+  padding-block-end: 1.75rem;
+  align-items: flex-end;
+}
+:host([variant=large]) .row-bottom .headline {
+  font: var(--typescale-headline-medium-font, inherit);
+  font-size: var(--typescale-headline-medium-size, 1.75rem);
+  font-weight: var(--typescale-headline-medium-weight, 400);
+  line-height: var(--typescale-headline-medium-line-height, 2.25rem);
+  letter-spacing: var(--typescale-headline-medium-tracking, 0);
+  padding-inline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+}
+
+/* ---- Scrolled state ---- */
+:host([scrolled]) {
+  --app-bar-shadow: var(--elevation-shadow-level-2, 0 2px 4px rgba(0, 0, 0, 0.12));
+}`;
+
+var css_248z = i`:host {
+  --app-bar-container-color: var(--color-surface);
+  --app-bar-headline-color: var(--color-on-surface);
+  --app-bar-leading-icon-color: var(--color-on-surface);
+  --app-bar-trailing-icon-color: var(--color-on-surface-variant);
+  /* Internal aliases */
+  --_app-bar-container-color: var(--app-bar-container-color);
+  --_app-bar-headline-color: var(--app-bar-headline-color);
+  --_app-bar-leading-icon-color: var(--app-bar-leading-icon-color);
+  --_app-bar-trailing-icon-color: var(--app-bar-trailing-icon-color);
+}
+
+/* Scrolled state uses surface-container for slight tonal elevation */
+:host([scrolled]) {
+  --app-bar-container-color: var(--color-surface-container);
+}`;
+
+/**
+ * @label App Bar
+ * @tag wc-app-bar
+ * @rawTag app-bar
+ *
+ * @summary A top app bar for page-level navigation and actions.
+ * @overview
+ * <p>The app bar component implements the top app bar pattern. It provides a
+ * consistent header for screens, housing a navigation icon, a page title/headline, and
+ * optional trailing action icons.</p>
+ *
+ * <p>Four size variants are available: <strong>small</strong> (64dp, single-row),
+ * <strong>center-aligned</strong> (64dp, centred headline), <strong>medium</strong>
+ * (112dp, headline below the row), and <strong>large</strong> (152dp, large headline).</p>
+ *
+ * <p>Use the <code>leading</code> slot for a navigation icon (e.g. a hamburger or back
+ * button), the default slot for the headline text, and the <code>trailing</code> slot for
+ * action icon buttons.</p>
+ *
+ * @slot leading - Navigation icon placed at the start of the bar.
+ * @slot - Headline / title text.
+ * @slot trailing - Trailing action icon buttons placed at the end of the bar.
+ *
+ * @cssprop --app-bar-container-color - Background color of the app bar.
+ * @cssprop --app-bar-container-height - Height of the bar in small / center-aligned variants.
+ * @cssprop --app-bar-headline-color - Color of the headline text.
+ * @cssprop --app-bar-leading-icon-color - Color of the leading slot icons.
+ * @cssprop --app-bar-trailing-icon-color - Color of the trailing slot icons.
+ * @cssprop --app-bar-shadow - Box-shadow applied when the bar is scrolled / elevated.
+ *
+ * @example
+ * ```html
+ * <!-- Small app bar (default) -->
+ * <wc-app-bar>
+ *   <wc-icon-button slot="leading" variant="text"><wc-icon name="menu"></wc-icon></wc-icon-button>
+ *   Page Title
+ *   <wc-icon-button slot="trailing" variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ *   <wc-icon-button slot="trailing" variant="text"><wc-icon name="more_vert"></wc-icon></wc-icon-button>
+ * </wc-app-bar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Center-aligned app bar -->
+ * <wc-app-bar variant="center-aligned">
+ *   <wc-icon-button slot="leading" variant="text"><wc-icon name="arrow_back"></wc-icon></wc-icon-button>
+ *   Details
+ *   <wc-icon-button slot="trailing" variant="text"><wc-icon name="more_vert"></wc-icon></wc-icon-button>
+ * </wc-app-bar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Medium app bar -->
+ * <wc-app-bar variant="medium">
+ *   <wc-icon-button slot="leading" variant="text"><wc-icon name="menu"></wc-icon></wc-icon-button>
+ *   Medium Headline
+ *   <wc-icon-button slot="trailing" variant="text"><wc-icon name="search"></wc-icon></wc-icon-button>
+ * </wc-app-bar>
+ * ```
+ *
+ * @example
+ * ```html
+ * <!-- Large app bar -->
+ * <wc-app-bar variant="large">
+ *   <wc-icon-button slot="leading" variant="text"><wc-icon name="arrow_back"></wc-icon></wc-icon-button>
+ *   Large Headline
+ *   <wc-icon-button slot="trailing" variant="text"><wc-icon name="more_vert"></wc-icon></wc-icon-button>
+ * </wc-app-bar>
+ * ```
+ * @tags navigation display
+ */
+let AppBar = class AppBar extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Visual variant of the app bar.
+         * - `"small"`: 64dp single-row bar with leading, title, and trailing (default).
+         * - `"center-aligned"`: 64dp single-row bar with a centred headline.
+         * - `"medium"`: Two-row bar (64dp top row + 48dp headline row).
+         * - `"large"`: Two-row bar with a larger headline (64dp top row + 88dp headline row).
+         */
+        this.variant = 'small';
+        /**
+         * Whether the bar is in its scrolled state, which adds a shadow and optionally
+         * changes the container color to indicate elevation above page content.
+         */
+        this.scrolled = false;
+    }
+    render() {
+        const isTwoRow = this.variant === 'medium' || this.variant === 'large';
+        const cssClasses = {
+            'app-bar': true,
+            [`variant-${this.variant}`]: true,
+            scrolled: this.scrolled,
+        };
+        if (isTwoRow) {
+            return this.__renderTwoRow(cssClasses);
+        }
+        return this.__renderSingleRow(cssClasses);
+    }
+    __renderSingleRow(cssClasses) {
+        return b `
+      <header class=${e(cssClasses)} role="banner">
+        <div class="background"></div>
+        <div class="row row-top">
+          <div class="leading">
+            <slot name="leading"></slot>
+          </div>
+          <div class="headline">
+            <slot></slot>
+          </div>
+          <div class="trailing">
+            <slot name="trailing"></slot>
+          </div>
+        </div>
+      </header>
+    `;
+    }
+    __renderTwoRow(cssClasses) {
+        return b `
+      <header class=${e(cssClasses)} role="banner">
+        <div class="background"></div>
+        <div class="row row-top">
+          <div class="leading">
+            <slot name="leading"></slot>
+          </div>
+          <div class="trailing">
+            <slot name="trailing"></slot>
+          </div>
+        </div>
+        <div class="row row-bottom">
+          <div class="headline">
+            <slot></slot>
+          </div>
+        </div>
+      </header>
+    `;
+    }
+};
+AppBar.styles = [css_248z$1, css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], AppBar.prototype, "variant", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], AppBar.prototype, "scrolled", void 0);
+AppBar = __decorate([
+    IndividualComponent
+], AppBar);
+
+export { AppBar };
+//# sourceMappingURL=app-bar.js.map

package/dist/app-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-bar.js","sources":["../../src/app-bar/app-bar.ts"],"sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './app-bar.scss';\nimport colorStyles from './app-bar-colors.scss';\n\n/**\n * @label App Bar\n * @tag wc-app-bar\n * @rawTag app-bar\n *\n * @summary A top app bar for page-level navigation and actions.\n * @overview\n * <p>The app bar component implements the top app bar pattern. It provides a\n * consistent header for screens, housing a navigation icon, a page title/headline, and\n * optional trailing action icons.</p>\n *\n * <p>Four size variants are available: <strong>small</strong> (64dp, single-row),\n * <strong>center-aligned</strong> (64dp, centred headline), <strong>medium</strong>\n * (112dp, headline below the row), and <strong>large</strong> (152dp, large headline).</p>\n *\n * <p>Use the <code>leading</code> slot for a navigation icon (e.g. a hamburger or back\n * button), the default slot for the headline text, and the <code>trailing</code> slot for\n * action icon buttons.</p>\n *\n * @slot leading - Navigation icon placed at the start of the bar.\n * @slot - Headline / title text.\n * @slot trailing - Trailing action icon buttons placed at the end of the bar.\n *\n * @cssprop --app-bar-container-color - Background color of the app bar.\n * @cssprop --app-bar-container-height - Height of the bar in small / center-aligned variants.\n * @cssprop --app-bar-headline-color - Color of the headline text.\n * @cssprop --app-bar-leading-icon-color - Color of the leading slot icons.\n * @cssprop --app-bar-trailing-icon-color - Color of the trailing slot icons.\n * @cssprop --app-bar-shadow - Box-shadow applied when the bar is scrolled / elevated.\n *\n * @example\n * ```html\n * <!-- Small app bar (default) -->\n * <wc-app-bar>\n *   <wc-icon-button slot=\"leading\" variant=\"text\"><wc-icon name=\"menu\"></wc-icon></wc-icon-button>\n *   Page Title\n *   <wc-icon-button slot=\"trailing\" variant=\"text\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n *   <wc-icon-button slot=\"trailing\" variant=\"text\"><wc-icon name=\"more_vert\"></wc-icon></wc-icon-button>\n * </wc-app-bar>\n * ```\n *\n * @example\n * ```html\n * <!-- Center-aligned app bar -->\n * <wc-app-bar variant=\"center-aligned\">\n *   <wc-icon-button slot=\"leading\" variant=\"text\"><wc-icon name=\"arrow_back\"></wc-icon></wc-icon-button>\n *   Details\n *   <wc-icon-button slot=\"trailing\" variant=\"text\"><wc-icon name=\"more_vert\"></wc-icon></wc-icon-button>\n * </wc-app-bar>\n * ```\n *\n * @example\n * ```html\n * <!-- Medium app bar -->\n * <wc-app-bar variant=\"medium\">\n *   <wc-icon-button slot=\"leading\" variant=\"text\"><wc-icon name=\"menu\"></wc-icon></wc-icon-button>\n *   Medium Headline\n *   <wc-icon-button slot=\"trailing\" variant=\"text\"><wc-icon name=\"search\"></wc-icon></wc-icon-button>\n * </wc-app-bar>\n * ```\n *\n * @example\n * ```html\n * <!-- Large app bar -->\n * <wc-app-bar variant=\"large\">\n *   <wc-icon-button slot=\"leading\" variant=\"text\"><wc-icon name=\"arrow_back\"></wc-icon></wc-icon-button>\n *   Large Headline\n *   <wc-icon-button slot=\"trailing\" variant=\"text\"><wc-icon name=\"more_vert\"></wc-icon></wc-icon-button>\n * </wc-app-bar>\n * ```\n * @tags navigation display\n */\n@IndividualComponent\nexport class AppBar extends LitElement {\n  static styles = [styles, colorStyles];\n\n  /**\n   * Visual variant of the app bar.\n   * - `\"small\"`: 64dp single-row bar with leading, title, and trailing (default).\n   * - `\"center-aligned\"`: 64dp single-row bar with a centred headline.\n   * - `\"medium\"`: Two-row bar (64dp top row + 48dp headline row).\n   * - `\"large\"`: Two-row bar with a larger headline (64dp top row + 88dp headline row).\n   */\n  @property({ type: String, reflect: true })\n  variant: 'small' | 'center-aligned' | 'medium' | 'large' = 'small';\n\n  /**\n   * Whether the bar is in its scrolled state, which adds a shadow and optionally\n   * changes the container color to indicate elevation above page content.\n   */\n  @property({ type: Boolean, reflect: true })\n  scrolled: boolean = false;\n\n  override render() {\n    const isTwoRow = this.variant === 'medium' || this.variant === 'large';\n\n    const cssClasses = {\n      'app-bar': true,\n      [`variant-${this.variant}`]: true,\n      scrolled: this.scrolled,\n    };\n\n    if (isTwoRow) {\n      return this.__renderTwoRow(cssClasses);\n    }\n    return this.__renderSingleRow(cssClasses);\n  }\n\n  private __renderSingleRow(cssClasses: Record<string, boolean>) {\n    return html`\n      <header class=${classMap(cssClasses)} role=\"banner\">\n        <div class=\"background\"></div>\n        <div class=\"row row-top\">\n          <div class=\"leading\">\n            <slot name=\"leading\"></slot>\n          </div>\n          <div class=\"headline\">\n            <slot></slot>\n          </div>\n          <div class=\"trailing\">\n            <slot name=\"trailing\"></slot>\n          </div>\n        </div>\n      </header>\n    `;\n  }\n\n  private __renderTwoRow(cssClasses: Record<string, boolean>) {\n    return html`\n      <header class=${classMap(cssClasses)} role=\"banner\">\n        <div class=\"background\"></div>\n        <div class=\"row row-top\">\n          <div class=\"leading\">\n            <slot name=\"leading\"></slot>\n          </div>\n          <div class=\"trailing\">\n            <slot name=\"trailing\"></slot>\n          </div>\n        </div>\n        <div class=\"row row-bottom\">\n          <div class=\"headline\">\n            <slot></slot>\n          </div>\n        </div>\n      </header>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","colorStyles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuEG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQA,GAAU,CAAA;AAA/B,IAAA,WAAA,GAAA;;AAGL;;;;;;AAMG;QAEH,IAAA,CAAA,OAAO,GAAoD,OAAO;AAElE;;;AAGG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;IAwD3B;IAtDW,MAAM,GAAA;AACb,QAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO;AAEtE,QAAA,MAAM,UAAU,GAAG;AACjB,YAAA,SAAS,EAAE,IAAI;AACf,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;YACjC,QAAQ,EAAE,IAAI,CAAC,QAAQ;SACxB;QAED,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC;QACxC;AACA,QAAA,OAAO,IAAI,CAAC,iBAAiB,CAAC,UAAU,CAAC;IAC3C;AAEQ,IAAA,iBAAiB,CAAC,UAAmC,EAAA;AAC3D,QAAA,OAAOC,CAAI,CAAA;sBACOC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;;KAcrC;IACH;AAEQ,IAAA,cAAc,CAAC,UAAmC,EAAA;AACxD,QAAA,OAAOD,CAAI,CAAA;sBACOC,CAAQ,CAAC,UAAU,CAAC,CAAA;;;;;;;;;;;;;;;;KAgBrC;IACH;;AAxEO,MAAA,CAAA,MAAM,GAAG,CAACC,UAAM,EAAEC,QAAW,CAAC;AAUrC,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC0B,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAOnE,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAlBf,MAAM,GAAA,UAAA,CAAA;IADlB;AACY,CAAA,EAAA,MAAM,CA0ElB;;;;"}

package/dist/assets/components.css

@@ -1,2 +1,2 @@
-*{box-sizing:border-box}.screen-reader-only{display:none !important}.text-display{font-family:var(--typography-display-medium-font-family) !important;font-size:var(--typography-display-medium-font-size) !important;font-weight:var(--typography-display-medium-font-weight) !important;line-height:var(--typography-display-medium-line-height) !important;letter-spacing:var(--typography-display-medium-letter-spacing) !important}.text-display-emphasized{font-family:var(--typography-display-medium-emphasized-font-family) !important;font-size:var(--typography-display-medium-emphasized-font-size) !important;font-weight:var(--typography-display-medium-emphasized-font-weight) !important;line-height:var(--typography-display-medium-emphasized-line-height) !important;letter-spacing:var(--typography-display-medium-emphasized-letter-spacing) !important}.text-display-large{font-family:var(--typography-display-large-font-family) !important;font-size:var(--typography-display-large-font-size) !important;font-weight:var(--typography-display-large-font-weight) !important;line-height:var(--typography-display-large-line-height) !important;letter-spacing:var(--typography-display-large-letter-spacing) !important}.text-display-large-emphasized{font-family:var(--typography-display-large-emphasized-font-family) !important;font-size:var(--typography-display-large-emphasized-font-size) !important;font-weight:var(--typography-display-large-emphasized-font-weight) !important;line-height:var(--typography-display-large-emphasized-line-height) !important;letter-spacing:var(--typography-display-large-emphasized-letter-spacing) !important}.text-display-medium{font-family:var(--typography-display-medium-font-family) !important;font-size:var(--typography-display-medium-font-size) !important;font-weight:var(--typography-display-medium-font-weight) !important;line-height:var(--typography-display-medium-line-height) !important;letter-spacing:var(--typography-display-medium-letter-spacing) !important}.text-display-medium-emphasized{font-family:var(--typography-display-medium-emphasized-font-family) !important;font-size:var(--typography-display-medium-emphasized-font-size) !important;font-weight:var(--typography-display-medium-emphasized-font-weight) !important;line-height:var(--typography-display-medium-emphasized-line-height) !important;letter-spacing:var(--typography-display-medium-emphasized-letter-spacing) !important}.text-display-small{font-family:var(--typography-display-small-font-family) !important;font-size:var(--typography-display-small-font-size) !important;font-weight:var(--typography-display-small-font-weight) !important;line-height:var(--typography-display-small-line-height) !important;letter-spacing:var(--typography-display-small-letter-spacing) !important}.text-display-small-emphasized{font-family:var(--typography-display-small-emphasized-font-family) !important;font-size:var(--typography-display-small-emphasized-font-size) !important;font-weight:var(--typography-display-small-emphasized-font-weight) !important;line-height:var(--typography-display-small-emphasized-line-height) !important;letter-spacing:var(--typography-display-small-emphasized-letter-spacing) !important}.text-headline{font-family:var(--typography-headline-medium-font-family) !important;font-size:var(--typography-headline-medium-font-size) !important;font-weight:var(--typography-headline-medium-font-weight) !important;line-height:var(--typography-headline-medium-line-height) !important;letter-spacing:var(--typography-headline-medium-letter-spacing) !important}.text-headline-emphasized{font-family:var(--typography-headline-medium-emphasized-font-family) !important;font-size:var(--typography-headline-medium-emphasized-font-size) !important;font-weight:var(--typography-headline-medium-emphasized-font-weight) !important;line-height:var(--typography-headline-medium-emphasized-line-height) !important;letter-spacing:var(--typography-headline-medium-emphasized-letter-spacing) !important}.text-headline-large{font-family:var(--typography-headline-large-font-family) !important;font-size:var(--typography-headline-large-font-size) !important;font-weight:var(--typography-headline-large-font-weight) !important;line-height:var(--typography-headline-large-line-height) !important;letter-spacing:var(--typography-headline-large-letter-spacing) !important}.text-headline-large-emphasized{font-family:var(--typography-headline-large-emphasized-font-family) !important;font-size:var(--typography-headline-large-emphasized-font-size) !important;font-weight:var(--typography-headline-large-emphasized-font-weight) !important;line-height:var(--typography-headline-large-emphasized-line-height) !important;letter-spacing:var(--typography-headline-large-emphasized-letter-spacing) !important}.text-headline-medium{font-family:var(--typography-headline-medium-font-family) !important;font-size:var(--typography-headline-medium-font-size) !important;font-weight:var(--typography-headline-medium-font-weight) !important;line-height:var(--typography-headline-medium-line-height) !important;letter-spacing:var(--typography-headline-medium-letter-spacing) !important}.text-headline-medium-emphasized{font-family:var(--typography-headline-medium-emphasized-font-family) !important;font-size:var(--typography-headline-medium-emphasized-font-size) !important;font-weight:var(--typography-headline-medium-emphasized-font-weight) !important;line-height:var(--typography-headline-medium-emphasized-line-height) !important;letter-spacing:var(--typography-headline-medium-emphasized-letter-spacing) !important}.text-headline-small{font-family:var(--typography-headline-small-font-family) !important;font-size:var(--typography-headline-small-font-size) !important;font-weight:var(--typography-headline-small-font-weight) !important;line-height:var(--typography-headline-small-line-height) !important;letter-spacing:var(--typography-headline-small-letter-spacing) !important}.text-headline-small-emphasized{font-family:var(--typography-headline-small-emphasized-font-family) !important;font-size:var(--typography-headline-small-emphasized-font-size) !important;font-weight:var(--typography-headline-small-emphasized-font-weight) !important;line-height:var(--typography-headline-small-emphasized-line-height) !important;letter-spacing:var(--typography-headline-small-emphasized-letter-spacing) !important}.text-body{font-family:var(--typography-body-medium-font-family) !important;font-size:var(--typography-body-medium-font-size) !important;font-weight:var(--typography-body-medium-font-weight) !important;line-height:var(--typography-body-medium-line-height) !important;letter-spacing:var(--typography-body-medium-letter-spacing) !important}.text-body-emphasized{font-family:var(--typography-body-medium-emphasized-font-family) !important;font-size:var(--typography-body-medium-emphasized-font-size) !important;font-weight:var(--typography-body-medium-emphasized-font-weight) !important;line-height:var(--typography-body-medium-emphasized-line-height) !important;letter-spacing:var(--typography-body-medium-emphasized-letter-spacing) !important}.text-body-large{font-family:var(--typography-body-large-font-family) !important;font-size:var(--typography-body-large-font-size) !important;font-weight:var(--typography-body-large-font-weight) !important;line-height:var(--typography-body-large-line-height) !important;letter-spacing:var(--typography-body-large-letter-spacing) !important}.text-body-large-emphasized{font-family:var(--typography-body-large-emphasized-font-family) !important;font-size:var(--typography-body-large-emphasized-font-size) !important;font-weight:var(--typography-body-large-emphasized-font-weight) !important;line-height:var(--typography-body-large-emphasized-line-height) !important;letter-spacing:var(--typography-body-large-emphasized-letter-spacing) !important}.text-body-medium{font-family:var(--typography-body-medium-font-family) !important;font-size:var(--typography-body-medium-font-size) !important;font-weight:var(--typography-body-medium-font-weight) !important;line-height:var(--typography-body-medium-line-height) !important;letter-spacing:var(--typography-body-medium-letter-spacing) !important}.text-body-medium-emphasized{font-family:var(--typography-body-medium-emphasized-font-family) !important;font-size:var(--typography-body-medium-emphasized-font-size) !important;font-weight:var(--typography-body-medium-emphasized-font-weight) !important;line-height:var(--typography-body-medium-emphasized-line-height) !important;letter-spacing:var(--typography-body-medium-emphasized-letter-spacing) !important}.text-body-small{font-family:var(--typography-body-small-font-family) !important;font-size:var(--typography-body-small-font-size) !important;font-weight:var(--typography-body-small-font-weight) !important;line-height:var(--typography-body-small-line-height) !important;letter-spacing:var(--typography-body-small-letter-spacing) !important}.text-body-small-emphasized{font-family:var(--typography-body-small-emphasized-font-family) !important;font-size:var(--typography-body-small-emphasized-font-size) !important;font-weight:var(--typography-body-small-emphasized-font-weight) !important;line-height:var(--typography-body-small-emphasized-line-height) !important;letter-spacing:var(--typography-body-small-emphasized-letter-spacing) !important}.text-code{font-family:var(--typography-code-medium-font-family) !important;font-size:var(--typography-code-medium-font-size) !important;font-weight:var(--typography-code-medium-font-weight) !important;line-height:var(--typography-code-medium-line-height) !important;letter-spacing:var(--typography-code-medium-letter-spacing) !important}.text-code-emphasized{font-family:var(--typography-code-medium-emphasized-font-family) !important;font-size:var(--typography-code-medium-emphasized-font-size) !important;font-weight:var(--typography-code-medium-emphasized-font-weight) !important;line-height:var(--typography-code-medium-emphasized-line-height) !important;letter-spacing:var(--typography-code-medium-emphasized-letter-spacing) !important}.text-code-large{font-family:var(--typography-code-large-font-family) !important;font-size:var(--typography-code-large-font-size) !important;font-weight:var(--typography-code-large-font-weight) !important;line-height:var(--typography-code-large-line-height) !important;letter-spacing:var(--typography-code-large-letter-spacing) !important}.text-code-large-emphasized{font-family:var(--typography-code-large-emphasized-font-family) !important;font-size:var(--typography-code-large-emphasized-font-size) !important;font-weight:var(--typography-code-large-emphasized-font-weight) !important;line-height:var(--typography-code-large-emphasized-line-height) !important;letter-spacing:var(--typography-code-large-emphasized-letter-spacing) !important}.text-code-medium{font-family:var(--typography-code-medium-font-family) !important;font-size:var(--typography-code-medium-font-size) !important;font-weight:var(--typography-code-medium-font-weight) !important;line-height:var(--typography-code-medium-line-height) !important;letter-spacing:var(--typography-code-medium-letter-spacing) !important}.text-code-medium-emphasized{font-family:var(--typography-code-medium-emphasized-font-family) !important;font-size:var(--typography-code-medium-emphasized-font-size) !important;font-weight:var(--typography-code-medium-emphasized-font-weight) !important;line-height:var(--typography-code-medium-emphasized-line-height) !important;letter-spacing:var(--typography-code-medium-emphasized-letter-spacing) !important}.text-code-small{font-family:var(--typography-code-small-font-family) !important;font-size:var(--typography-code-small-font-size) !important;font-weight:var(--typography-code-small-font-weight) !important;line-height:var(--typography-code-small-line-height) !important;letter-spacing:var(--typography-code-small-letter-spacing) !important}.text-code-small-emphasized{font-family:var(--typography-code-small-emphasized-font-family) !important;font-size:var(--typography-code-small-emphasized-font-size) !important;font-weight:var(--typography-code-small-emphasized-font-weight) !important;line-height:var(--typography-code-small-emphasized-line-height) !important;letter-spacing:var(--typography-code-small-emphasized-letter-spacing) !important}.text-label{font-family:var(--typography-label-medium-font-family) !important;font-size:var(--typography-label-medium-font-size) !important;font-weight:var(--typography-label-medium-font-weight) !important;line-height:var(--typography-label-medium-line-height) !important;letter-spacing:var(--typography-label-medium-letter-spacing) !important}.text-label-emphasized{font-family:var(--typography-label-medium-emphasized-font-family) !important;font-size:var(--typography-label-medium-emphasized-font-size) !important;font-weight:var(--typography-label-medium-emphasized-font-weight) !important;line-height:var(--typography-label-medium-emphasized-line-height) !important;letter-spacing:var(--typography-label-medium-emphasized-letter-spacing) !important}.text-label-large{font-family:var(--typography-label-large-font-family) !important;font-size:var(--typography-label-large-font-size) !important;font-weight:var(--typography-label-large-font-weight) !important;line-height:var(--typography-label-large-line-height) !important;letter-spacing:var(--typography-label-large-letter-spacing) !important}.text-label-large-emphasized{font-family:var(--typography-label-large-emphasized-font-family) !important;font-size:var(--typography-label-large-emphasized-font-size) !important;font-weight:var(--typography-label-large-emphasized-font-weight) !important;line-height:var(--typography-label-large-emphasized-line-height) !important;letter-spacing:var(--typography-label-large-emphasized-letter-spacing) !important}.text-label-medium{font-family:var(--typography-label-medium-font-family) !important;font-size:var(--typography-label-medium-font-size) !important;font-weight:var(--typography-label-medium-font-weight) !important;line-height:var(--typography-label-medium-line-height) !important;letter-spacing:var(--typography-label-medium-letter-spacing) !important}.text-label-medium-emphasized{font-family:var(--typography-label-medium-emphasized-font-family) !important;font-size:var(--typography-label-medium-emphasized-font-size) !important;font-weight:var(--typography-label-medium-emphasized-font-weight) !important;line-height:var(--typography-label-medium-emphasized-line-height) !important;letter-spacing:var(--typography-label-medium-emphasized-letter-spacing) !important}.text-label-small{font-family:var(--typography-label-small-font-family) !important;font-size:var(--typography-label-small-font-size) !important;font-weight:var(--typography-label-small-font-weight) !important;line-height:var(--typography-label-small-line-height) !important;letter-spacing:var(--typography-label-small-letter-spacing) !important}.text-label-small-emphasized{font-family:var(--typography-label-small-emphasized-font-family) !important;font-size:var(--typography-label-small-emphasized-font-size) !important;font-weight:var(--typography-label-small-emphasized-font-weight) !important;line-height:var(--typography-label-small-emphasized-line-height) !important;letter-spacing:var(--typography-label-small-emphasized-letter-spacing) !important}.text-title{font-family:var(--typography-title-medium-font-family) !important;font-size:var(--typography-title-medium-font-size) !important;font-weight:var(--typography-title-medium-font-weight) !important;line-height:var(--typography-title-medium-line-height) !important;letter-spacing:var(--typography-title-medium-letter-spacing) !important}.text-title-emphasized{font-family:var(--typography-title-medium-emphasized-font-family) !important;font-size:var(--typography-title-medium-emphasized-font-size) !important;font-weight:var(--typography-title-medium-emphasized-font-weight) !important;line-height:var(--typography-title-medium-emphasized-line-height) !important;letter-spacing:var(--typography-title-medium-emphasized-letter-spacing) !important}.text-title-large{font-family:var(--typography-title-large-font-family) !important;font-size:var(--typography-title-large-font-size) !important;font-weight:var(--typography-title-large-font-weight) !important;line-height:var(--typography-title-large-line-height) !important;letter-spacing:var(--typography-title-large-letter-spacing) !important}.text-title-large-emphasized{font-family:var(--typography-title-large-emphasized-font-family) !important;font-size:var(--typography-title-large-emphasized-font-size) !important;font-weight:var(--typography-title-large-emphasized-font-weight) !important;line-height:var(--typography-title-large-emphasized-line-height) !important;letter-spacing:var(--typography-title-large-emphasized-letter-spacing) !important}.text-title-medium{font-family:var(--typography-title-medium-font-family) !important;font-size:var(--typography-title-medium-font-size) !important;font-weight:var(--typography-title-medium-font-weight) !important;line-height:var(--typography-title-medium-line-height) !important;letter-spacing:var(--typography-title-medium-letter-spacing) !important}.text-title-medium-emphasized{font-family:var(--typography-title-medium-emphasized-font-family) !important;font-size:var(--typography-title-medium-emphasized-font-size) !important;font-weight:var(--typography-title-medium-emphasized-font-weight) !important;line-height:var(--typography-title-medium-emphasized-line-height) !important;letter-spacing:var(--typography-title-medium-emphasized-letter-spacing) !important}.text-title-small{font-family:var(--typography-title-small-font-family) !important;font-size:var(--typography-title-small-font-size) !important;font-weight:var(--typography-title-small-font-weight) !important;line-height:var(--typography-title-small-line-height) !important;letter-spacing:var(--typography-title-small-letter-spacing) !important}.text-title-small-emphasized{font-family:var(--typography-title-small-emphasized-font-family) !important;font-size:var(--typography-title-small-emphasized-font-size) !important;font-weight:var(--typography-title-small-emphasized-font-weight) !important;line-height:var(--typography-title-small-emphasized-line-height) !important;letter-spacing:var(--typography-title-small-emphasized-letter-spacing) !important}.text-code-block{background-color:var(--color-surface-variant);text-shadow:0 1px 1px var(--color-surface-variant);color:var(--color-on-surface);border-radius:var(--shape-corner-extra-small);padding:var(--spacing-050);font-family:var(--font-family-monospace);display:inline-block;max-width:100%;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;vertical-align:middle}*{box-sizing:border-box}.screen-reader-only{display:none !important}.link{border-radius:inherit;corner-shape:inherit;color:var(--color-primary);--icon-color: currentColor;text-decoration:none}.link:hover,.link:focus-visible{text-decoration:underline}.link.inherit{color:inherit;text-decoration:none !important}.link.with-icon{display:inline-flex;align-items:center;gap:.5em}
+*{box-sizing:border-box}.screen-reader-only{display:none !important}[hidden]{display:none !important}.text-display{font-family:var(--typography-display-medium-font-family) !important;font-size:var(--typography-display-medium-font-size) !important;font-weight:var(--typography-display-medium-font-weight) !important;line-height:var(--typography-display-medium-line-height) !important;letter-spacing:var(--typography-display-medium-letter-spacing) !important}.text-display-emphasized{font-family:var(--typography-display-medium-emphasized-font-family) !important;font-size:var(--typography-display-medium-emphasized-font-size) !important;font-weight:var(--typography-display-medium-emphasized-font-weight) !important;line-height:var(--typography-display-medium-emphasized-line-height) !important;letter-spacing:var(--typography-display-medium-emphasized-letter-spacing) !important}.text-display-large{font-family:var(--typography-display-large-font-family) !important;font-size:var(--typography-display-large-font-size) !important;font-weight:var(--typography-display-large-font-weight) !important;line-height:var(--typography-display-large-line-height) !important;letter-spacing:var(--typography-display-large-letter-spacing) !important}.text-display-large-emphasized{font-family:var(--typography-display-large-emphasized-font-family) !important;font-size:var(--typography-display-large-emphasized-font-size) !important;font-weight:var(--typography-display-large-emphasized-font-weight) !important;line-height:var(--typography-display-large-emphasized-line-height) !important;letter-spacing:var(--typography-display-large-emphasized-letter-spacing) !important}.text-display-medium{font-family:var(--typography-display-medium-font-family) !important;font-size:var(--typography-display-medium-font-size) !important;font-weight:var(--typography-display-medium-font-weight) !important;line-height:var(--typography-display-medium-line-height) !important;letter-spacing:var(--typography-display-medium-letter-spacing) !important}.text-display-medium-emphasized{font-family:var(--typography-display-medium-emphasized-font-family) !important;font-size:var(--typography-display-medium-emphasized-font-size) !important;font-weight:var(--typography-display-medium-emphasized-font-weight) !important;line-height:var(--typography-display-medium-emphasized-line-height) !important;letter-spacing:var(--typography-display-medium-emphasized-letter-spacing) !important}.text-display-small{font-family:var(--typography-display-small-font-family) !important;font-size:var(--typography-display-small-font-size) !important;font-weight:var(--typography-display-small-font-weight) !important;line-height:var(--typography-display-small-line-height) !important;letter-spacing:var(--typography-display-small-letter-spacing) !important}.text-display-small-emphasized{font-family:var(--typography-display-small-emphasized-font-family) !important;font-size:var(--typography-display-small-emphasized-font-size) !important;font-weight:var(--typography-display-small-emphasized-font-weight) !important;line-height:var(--typography-display-small-emphasized-line-height) !important;letter-spacing:var(--typography-display-small-emphasized-letter-spacing) !important}.text-headline{font-family:var(--typography-headline-medium-font-family) !important;font-size:var(--typography-headline-medium-font-size) !important;font-weight:var(--typography-headline-medium-font-weight) !important;line-height:var(--typography-headline-medium-line-height) !important;letter-spacing:var(--typography-headline-medium-letter-spacing) !important}.text-headline-emphasized{font-family:var(--typography-headline-medium-emphasized-font-family) !important;font-size:var(--typography-headline-medium-emphasized-font-size) !important;font-weight:var(--typography-headline-medium-emphasized-font-weight) !important;line-height:var(--typography-headline-medium-emphasized-line-height) !important;letter-spacing:var(--typography-headline-medium-emphasized-letter-spacing) !important}.text-headline-large{font-family:var(--typography-headline-large-font-family) !important;font-size:var(--typography-headline-large-font-size) !important;font-weight:var(--typography-headline-large-font-weight) !important;line-height:var(--typography-headline-large-line-height) !important;letter-spacing:var(--typography-headline-large-letter-spacing) !important}.text-headline-large-emphasized{font-family:var(--typography-headline-large-emphasized-font-family) !important;font-size:var(--typography-headline-large-emphasized-font-size) !important;font-weight:var(--typography-headline-large-emphasized-font-weight) !important;line-height:var(--typography-headline-large-emphasized-line-height) !important;letter-spacing:var(--typography-headline-large-emphasized-letter-spacing) !important}.text-headline-medium{font-family:var(--typography-headline-medium-font-family) !important;font-size:var(--typography-headline-medium-font-size) !important;font-weight:var(--typography-headline-medium-font-weight) !important;line-height:var(--typography-headline-medium-line-height) !important;letter-spacing:var(--typography-headline-medium-letter-spacing) !important}.text-headline-medium-emphasized{font-family:var(--typography-headline-medium-emphasized-font-family) !important;font-size:var(--typography-headline-medium-emphasized-font-size) !important;font-weight:var(--typography-headline-medium-emphasized-font-weight) !important;line-height:var(--typography-headline-medium-emphasized-line-height) !important;letter-spacing:var(--typography-headline-medium-emphasized-letter-spacing) !important}.text-headline-small{font-family:var(--typography-headline-small-font-family) !important;font-size:var(--typography-headline-small-font-size) !important;font-weight:var(--typography-headline-small-font-weight) !important;line-height:var(--typography-headline-small-line-height) !important;letter-spacing:var(--typography-headline-small-letter-spacing) !important}.text-headline-small-emphasized{font-family:var(--typography-headline-small-emphasized-font-family) !important;font-size:var(--typography-headline-small-emphasized-font-size) !important;font-weight:var(--typography-headline-small-emphasized-font-weight) !important;line-height:var(--typography-headline-small-emphasized-line-height) !important;letter-spacing:var(--typography-headline-small-emphasized-letter-spacing) !important}.text-body{font-family:var(--typography-body-medium-font-family) !important;font-size:var(--typography-body-medium-font-size) !important;font-weight:var(--typography-body-medium-font-weight) !important;line-height:var(--typography-body-medium-line-height) !important;letter-spacing:var(--typography-body-medium-letter-spacing) !important}.text-body-emphasized{font-family:var(--typography-body-medium-emphasized-font-family) !important;font-size:var(--typography-body-medium-emphasized-font-size) !important;font-weight:var(--typography-body-medium-emphasized-font-weight) !important;line-height:var(--typography-body-medium-emphasized-line-height) !important;letter-spacing:var(--typography-body-medium-emphasized-letter-spacing) !important}.text-body-large{font-family:var(--typography-body-large-font-family) !important;font-size:var(--typography-body-large-font-size) !important;font-weight:var(--typography-body-large-font-weight) !important;line-height:var(--typography-body-large-line-height) !important;letter-spacing:var(--typography-body-large-letter-spacing) !important}.text-body-large-emphasized{font-family:var(--typography-body-large-emphasized-font-family) !important;font-size:var(--typography-body-large-emphasized-font-size) !important;font-weight:var(--typography-body-large-emphasized-font-weight) !important;line-height:var(--typography-body-large-emphasized-line-height) !important;letter-spacing:var(--typography-body-large-emphasized-letter-spacing) !important}.text-body-medium{font-family:var(--typography-body-medium-font-family) !important;font-size:var(--typography-body-medium-font-size) !important;font-weight:var(--typography-body-medium-font-weight) !important;line-height:var(--typography-body-medium-line-height) !important;letter-spacing:var(--typography-body-medium-letter-spacing) !important}.text-body-medium-emphasized{font-family:var(--typography-body-medium-emphasized-font-family) !important;font-size:var(--typography-body-medium-emphasized-font-size) !important;font-weight:var(--typography-body-medium-emphasized-font-weight) !important;line-height:var(--typography-body-medium-emphasized-line-height) !important;letter-spacing:var(--typography-body-medium-emphasized-letter-spacing) !important}.text-body-small{font-family:var(--typography-body-small-font-family) !important;font-size:var(--typography-body-small-font-size) !important;font-weight:var(--typography-body-small-font-weight) !important;line-height:var(--typography-body-small-line-height) !important;letter-spacing:var(--typography-body-small-letter-spacing) !important}.text-body-small-emphasized{font-family:var(--typography-body-small-emphasized-font-family) !important;font-size:var(--typography-body-small-emphasized-font-size) !important;font-weight:var(--typography-body-small-emphasized-font-weight) !important;line-height:var(--typography-body-small-emphasized-line-height) !important;letter-spacing:var(--typography-body-small-emphasized-letter-spacing) !important}.text-code{font-family:var(--typography-code-medium-font-family) !important;font-size:var(--typography-code-medium-font-size) !important;font-weight:var(--typography-code-medium-font-weight) !important;line-height:var(--typography-code-medium-line-height) !important;letter-spacing:var(--typography-code-medium-letter-spacing) !important}.text-code-emphasized{font-family:var(--typography-code-medium-emphasized-font-family) !important;font-size:var(--typography-code-medium-emphasized-font-size) !important;font-weight:var(--typography-code-medium-emphasized-font-weight) !important;line-height:var(--typography-code-medium-emphasized-line-height) !important;letter-spacing:var(--typography-code-medium-emphasized-letter-spacing) !important}.text-code-large{font-family:var(--typography-code-large-font-family) !important;font-size:var(--typography-code-large-font-size) !important;font-weight:var(--typography-code-large-font-weight) !important;line-height:var(--typography-code-large-line-height) !important;letter-spacing:var(--typography-code-large-letter-spacing) !important}.text-code-large-emphasized{font-family:var(--typography-code-large-emphasized-font-family) !important;font-size:var(--typography-code-large-emphasized-font-size) !important;font-weight:var(--typography-code-large-emphasized-font-weight) !important;line-height:var(--typography-code-large-emphasized-line-height) !important;letter-spacing:var(--typography-code-large-emphasized-letter-spacing) !important}.text-code-medium{font-family:var(--typography-code-medium-font-family) !important;font-size:var(--typography-code-medium-font-size) !important;font-weight:var(--typography-code-medium-font-weight) !important;line-height:var(--typography-code-medium-line-height) !important;letter-spacing:var(--typography-code-medium-letter-spacing) !important}.text-code-medium-emphasized{font-family:var(--typography-code-medium-emphasized-font-family) !important;font-size:var(--typography-code-medium-emphasized-font-size) !important;font-weight:var(--typography-code-medium-emphasized-font-weight) !important;line-height:var(--typography-code-medium-emphasized-line-height) !important;letter-spacing:var(--typography-code-medium-emphasized-letter-spacing) !important}.text-code-small{font-family:var(--typography-code-small-font-family) !important;font-size:var(--typography-code-small-font-size) !important;font-weight:var(--typography-code-small-font-weight) !important;line-height:var(--typography-code-small-line-height) !important;letter-spacing:var(--typography-code-small-letter-spacing) !important}.text-code-small-emphasized{font-family:var(--typography-code-small-emphasized-font-family) !important;font-size:var(--typography-code-small-emphasized-font-size) !important;font-weight:var(--typography-code-small-emphasized-font-weight) !important;line-height:var(--typography-code-small-emphasized-line-height) !important;letter-spacing:var(--typography-code-small-emphasized-letter-spacing) !important}.text-label{font-family:var(--typography-label-medium-font-family) !important;font-size:var(--typography-label-medium-font-size) !important;font-weight:var(--typography-label-medium-font-weight) !important;line-height:var(--typography-label-medium-line-height) !important;letter-spacing:var(--typography-label-medium-letter-spacing) !important}.text-label-emphasized{font-family:var(--typography-label-medium-emphasized-font-family) !important;font-size:var(--typography-label-medium-emphasized-font-size) !important;font-weight:var(--typography-label-medium-emphasized-font-weight) !important;line-height:var(--typography-label-medium-emphasized-line-height) !important;letter-spacing:var(--typography-label-medium-emphasized-letter-spacing) !important}.text-label-large{font-family:var(--typography-label-large-font-family) !important;font-size:var(--typography-label-large-font-size) !important;font-weight:var(--typography-label-large-font-weight) !important;line-height:var(--typography-label-large-line-height) !important;letter-spacing:var(--typography-label-large-letter-spacing) !important}.text-label-large-emphasized{font-family:var(--typography-label-large-emphasized-font-family) !important;font-size:var(--typography-label-large-emphasized-font-size) !important;font-weight:var(--typography-label-large-emphasized-font-weight) !important;line-height:var(--typography-label-large-emphasized-line-height) !important;letter-spacing:var(--typography-label-large-emphasized-letter-spacing) !important}.text-label-medium{font-family:var(--typography-label-medium-font-family) !important;font-size:var(--typography-label-medium-font-size) !important;font-weight:var(--typography-label-medium-font-weight) !important;line-height:var(--typography-label-medium-line-height) !important;letter-spacing:var(--typography-label-medium-letter-spacing) !important}.text-label-medium-emphasized{font-family:var(--typography-label-medium-emphasized-font-family) !important;font-size:var(--typography-label-medium-emphasized-font-size) !important;font-weight:var(--typography-label-medium-emphasized-font-weight) !important;line-height:var(--typography-label-medium-emphasized-line-height) !important;letter-spacing:var(--typography-label-medium-emphasized-letter-spacing) !important}.text-label-small{font-family:var(--typography-label-small-font-family) !important;font-size:var(--typography-label-small-font-size) !important;font-weight:var(--typography-label-small-font-weight) !important;line-height:var(--typography-label-small-line-height) !important;letter-spacing:var(--typography-label-small-letter-spacing) !important}.text-label-small-emphasized{font-family:var(--typography-label-small-emphasized-font-family) !important;font-size:var(--typography-label-small-emphasized-font-size) !important;font-weight:var(--typography-label-small-emphasized-font-weight) !important;line-height:var(--typography-label-small-emphasized-line-height) !important;letter-spacing:var(--typography-label-small-emphasized-letter-spacing) !important}.text-title{font-family:var(--typography-title-medium-font-family) !important;font-size:var(--typography-title-medium-font-size) !important;font-weight:var(--typography-title-medium-font-weight) !important;line-height:var(--typography-title-medium-line-height) !important;letter-spacing:var(--typography-title-medium-letter-spacing) !important}.text-title-emphasized{font-family:var(--typography-title-medium-emphasized-font-family) !important;font-size:var(--typography-title-medium-emphasized-font-size) !important;font-weight:var(--typography-title-medium-emphasized-font-weight) !important;line-height:var(--typography-title-medium-emphasized-line-height) !important;letter-spacing:var(--typography-title-medium-emphasized-letter-spacing) !important}.text-title-large{font-family:var(--typography-title-large-font-family) !important;font-size:var(--typography-title-large-font-size) !important;font-weight:var(--typography-title-large-font-weight) !important;line-height:var(--typography-title-large-line-height) !important;letter-spacing:var(--typography-title-large-letter-spacing) !important}.text-title-large-emphasized{font-family:var(--typography-title-large-emphasized-font-family) !important;font-size:var(--typography-title-large-emphasized-font-size) !important;font-weight:var(--typography-title-large-emphasized-font-weight) !important;line-height:var(--typography-title-large-emphasized-line-height) !important;letter-spacing:var(--typography-title-large-emphasized-letter-spacing) !important}.text-title-medium{font-family:var(--typography-title-medium-font-family) !important;font-size:var(--typography-title-medium-font-size) !important;font-weight:var(--typography-title-medium-font-weight) !important;line-height:var(--typography-title-medium-line-height) !important;letter-spacing:var(--typography-title-medium-letter-spacing) !important}.text-title-medium-emphasized{font-family:var(--typography-title-medium-emphasized-font-family) !important;font-size:var(--typography-title-medium-emphasized-font-size) !important;font-weight:var(--typography-title-medium-emphasized-font-weight) !important;line-height:var(--typography-title-medium-emphasized-line-height) !important;letter-spacing:var(--typography-title-medium-emphasized-letter-spacing) !important}.text-title-small{font-family:var(--typography-title-small-font-family) !important;font-size:var(--typography-title-small-font-size) !important;font-weight:var(--typography-title-small-font-weight) !important;line-height:var(--typography-title-small-line-height) !important;letter-spacing:var(--typography-title-small-letter-spacing) !important}.text-title-small-emphasized{font-family:var(--typography-title-small-emphasized-font-family) !important;font-size:var(--typography-title-small-emphasized-font-size) !important;font-weight:var(--typography-title-small-emphasized-font-weight) !important;line-height:var(--typography-title-small-emphasized-line-height) !important;letter-spacing:var(--typography-title-small-emphasized-letter-spacing) !important}.text-code-block{background-color:var(--color-surface-variant);text-shadow:0 1px 1px var(--color-surface-variant);color:var(--color-on-surface);border-radius:var(--shape-corner-extra-small);padding:var(--spacing-050);font-family:var(--font-family-monospace);display:inline-block;max-width:100%;white-space:pre-wrap;word-break:break-word;overflow-wrap:anywhere;vertical-align:middle}*{box-sizing:border-box}.screen-reader-only{display:none !important}[hidden]{display:none !important}.link{border-radius:inherit;corner-shape:inherit;color:var(--color-primary);--icon-color: currentColor;text-decoration:none}.link:hover,.link:focus-visible{text-decoration:underline}.link.inherit{color:inherit;text-decoration:none !important}.link.with-icon{display:inline-flex;align-items:center;gap:.5em}
 /*# sourceMappingURL=components.css.map */