@redvars/peacock 3.8.1 → 3.8.2

package/dist/avatar.js

@@ -0,0 +1,114 @@
+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 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+  pointer-events: none;
+  --avatar-size: 2rem;
+  --avatar-container-color: var(--color-primary);
+  --avatar-text-color: var(--color-on-primary);
+  --avatar-container-shape: var(--global-avatar-container-shape);
+}
+
+.avatar-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-050);
+  line-height: 0;
+}
+
+.avatar {
+  border-radius: var(--avatar-container-shape);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: var(--avatar-text-color);
+  width: var(--avatar-size);
+  height: var(--avatar-size);
+  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;
+  background-color: var(--avatar-container-color);
+  font-size: calc(var(--avatar-size) * 0.5) !important;
+}
+.avatar .image {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  border-radius: inherit;
+}`;
+
+/**
+ * @label Avatar
+ * @tag wc-avatar
+ * @rawTag avatar
+ * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.
+ *
+ * @cssprop --avatar-border-radius - Controls the border radius of the avatar.
+ * @cssprop --avatar-container-color - Controls the color of the avatar container.
+ * @cssprop --avatar-size - Controls the size of the avatar.
+ * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.
+ *
+ *
+ * @example
+ * ```html
+ * <wc-avatar name="Shivaji Varma" src="https://peacock.redvars.com/assets/img/avatar.xs.webp" style='--avatar-size: 4rem'></wc-avatar>
+ * ```
+ *
+ * @tags display
+ */
+let Avatar = class Avatar extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Full name of the person. Used to derive initials when no `src` is provided. */
+        this.name = '';
+    }
+    render() {
+        return b `<div class="avatar-container">
+      <div
+        class=${e({
+            avatar: true,
+            initials: !this.src,
+            image: !!this.src,
+        })}
+      >
+        ${this.src
+            ? b `<img class="image" src=${this.src} alt=${this.name} />`
+            : b `<div class="initials">${this.__getInitials()}</div>`}
+      </div>
+    </div>`;
+    }
+    __getInitials() {
+        const [first = '', last = ''] = this.name.split(' ');
+        return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
+    }
+};
+Avatar.styles = [css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], Avatar.prototype, "name", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], Avatar.prototype, "src", void 0);
+Avatar = __decorate([
+    IndividualComponent
+], Avatar);
+
+export { Avatar };
+//# sourceMappingURL=avatar.js.map

package/dist/avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar.js","sources":["../../src/avatar/avatar.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './avatar.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Avatar\n * @tag wc-avatar\n * @rawTag avatar\n * @summary The Avatar component is used to represent user, and displays the profile picture, initials or fallback icon.\n *\n * @cssprop --avatar-border-radius - Controls the border radius of the avatar.\n * @cssprop --avatar-container-color - Controls the color of the avatar container.\n * @cssprop --avatar-size - Controls the size of the avatar.\n * @cssprop --avatar-text-color - Controls the color of the text inside the avatar.\n *\n *\n * @example\n * ```html\n * <wc-avatar name=\"Shivaji Varma\" src=\"https://peacock.redvars.com/assets/img/avatar.xs.webp\" style='--avatar-size: 4rem'></wc-avatar>\n * ```\n *\n * @tags display\n */\n@IndividualComponent\nexport class Avatar extends LitElement {\n  static styles = [styles];\n\n  /** Full name of the person. Used to derive initials when no `src` is provided. */\n  @property({ type: String, reflect: true }) name: string = '';\n\n  /** URL of the avatar image. When provided, the image is displayed instead of initials. */\n  @property({ type: String, reflect: true }) src?: string;\n\n  render() {\n    return html`<div class=\"avatar-container\">\n      <div\n        class=${classMap({\n          avatar: true,\n          initials: !this.src,\n          image: !!this.src,\n        })}\n      >\n        ${this.src\n          ? html`<img class=\"image\" src=${this.src} alt=${this.name} />`\n          : html`<div class=\"initials\">${this.__getInitials()}</div>`}\n      </div>\n    </div>`;\n  }\n\n  private __getInitials() {\n    const [first = '', last = ''] = this.name.split(' ');\n    return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;AAkBG;AAEI,IAAM,MAAM,GAAZ,MAAM,MAAO,SAAQA,GAAU,CAAA;AAA/B,IAAA,WAAA,GAAA;;;QAIsC,IAAA,CAAA,IAAI,GAAW,EAAE;IAyB9D;IApBE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,MAAM,EAAE,IAAI;AACZ,YAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,GAAG;AACnB,YAAA,KAAK,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG;SAClB,CAAC;;AAEA,QAAA,EAAA,IAAI,CAAC;cACHD,CAAI,CAAA,CAAA,uBAAA,EAA0B,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,IAAI,CAAC,IAAI,CAAA,GAAA;cACvDA,CAAI,CAAA,CAAA,sBAAA,EAAyB,IAAI,CAAC,aAAa,EAAE,CAAA,MAAA,CAAQ;;WAE1D;IACT;IAEQ,aAAa,GAAA;AACnB,QAAA,MAAM,CAAC,KAAK,GAAG,EAAE,EAAE,IAAI,GAAG,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC;AACpD,QAAA,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA,EAAG,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,EAAE;IAC5D;;AA3BO,MAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAGmB,UAAA,CAAA;IAA1CC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAGlB,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,MAAA,CAAA,SAAA,EAAA,KAAA,EAAA,MAAA,CAAA;AAP7C,MAAM,GAAA,UAAA,CAAA;IADlB;AACY,CAAA,EAAA,MAAM,CA6BlB;;;;"}

package/dist/badge.js

@@ -0,0 +1,91 @@
+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 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: inline-block;
+  --badge-color: var(--global-badge-color);
+  z-index: var(--z-index-badge);
+}
+
+.badge {
+  pointer-events: none;
+  color: var(--color-white);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--badge-color);
+  border-radius: var(--shape-corner-full);
+}
+.badge.has-value {
+  height: 1rem;
+  min-width: 1rem;
+  padding-inline: var(--spacing-050);
+  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;
+  color: var(--color-on-error);
+}
+.badge:not(.has-value) {
+  height: 0.375rem;
+  width: 0.375rem;
+}`;
+
+/**
+ * @label Badge
+ * @tag wc-badge
+ * @rawTag badge
+ * @summary The badge component is used to display a small amount of information to the user.
+ *
+ * @cssprop --badge-color - Controls the color of the badge.
+ *
+ * @example
+ * ```html
+ * <wc-badge value="1"></wc-badge>
+ * ```
+ * @tags display
+ */
+let Badge = class Badge extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The value to display in the badge.
+         */
+        this.value = '';
+    }
+    render() {
+        return b `<div
+      class=${e({
+            badge: true,
+            'has-value': !!this.value,
+        })}
+    >
+      ${this.value}
+    </div>`;
+    }
+};
+Badge.styles = [css_248z];
+__decorate([
+    n({ type: String })
+], Badge.prototype, "value", void 0);
+Badge = __decorate([
+    IndividualComponent
+], Badge);
+
+export { Badge };
+//# sourceMappingURL=badge.js.map

package/dist/badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"badge.js","sources":["../../src/badge/badge.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './badge.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Badge\n * @tag wc-badge\n * @rawTag badge\n * @summary The badge component is used to display a small amount of information to the user.\n *\n * @cssprop --badge-color - Controls the color of the badge.\n *\n * @example\n * ```html\n * <wc-badge value=\"1\"></wc-badge>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Badge extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The value to display in the badge.\n   */\n  @property({ type: String }) value: string = '';\n\n  render() {\n    return html`<div\n      class=${classMap({\n        badge: true,\n        'has-value': !!this.value,\n      })}\n    >\n      ${this.value}\n    </div>`;\n  }\n}\n"],"names":["LitElement","html","classMap","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;AAaG;AAEI,IAAM,KAAK,GAAX,MAAM,KAAM,SAAQA,GAAU,CAAA;AAA9B,IAAA,WAAA,GAAA;;AAGL;;AAEG;QACyB,IAAA,CAAA,KAAK,GAAW,EAAE;IAYhD;IAVE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;AACX,YAAA,WAAW,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK;SAC1B,CAAC;;AAEA,MAAA,EAAA,IAAI,CAAC,KAAK;WACP;IACT;;AAhBO,KAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAKI,UAAA,CAAA;AAA3B,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAqB,CAAA,EAAA,KAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AANpC,KAAK,GAAA,UAAA,CAAA;IADjB;AACY,CAAA,EAAA,KAAK,CAkBjB;;;;"}

package/dist/base-Cl6v8-BZ.js

@@ -0,0 +1,9 @@
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+const e=(e,t,c)=>(c.configurable=true,c.enumerable=true,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);
+
+export { e };
+//# sourceMappingURL=base-Cl6v8-BZ.js.map

package/dist/base-Cl6v8-BZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-Cl6v8-BZ.js","sources":["../node_modules/@lit/reactive-element/decorators/base.js"],"sourcesContent":["/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nconst e=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&\"object\"!=typeof t&&Object.defineProperty(e,t,c),c);export{e as desc};\n//# sourceMappingURL=base.js.map\n"],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACK,MAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,IAAE,CAAC,CAAC,CAAC,UAAU,CAAC,IAAE,CAAC,OAAO,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/bottom-sheet.js

@@ -1,7 +1,7 @@
-import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
-import { n } from './property-1psGvXOq.js';
-import { r } from './state-DwbEjqVk.js';
-import { e } from './class-map-YU7g0o3B.js';
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './class-map-DG7CA1et.js';
 import './directive-ZPhl09Yt.js';
 
 var css_248z = i`* {
@@ -12,6 +12,10 @@ var css_248z = i`* {
   display: none !important;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 :host {
   display: contents;
   --bottom-sheet-container-color: var(--color-surface-container-low, #f7f2fa);
@@ -98,7 +102,7 @@ var css_248z = i`* {
  * @label Bottom Sheet
  * @tag wc-bottom-sheet
  * @rawTag bottom-sheet
- * @summary Bottom sheets slide up from the bottom of the screen to reveal additional content. Supports standard and modal variants per Material Design 3.
+ * @summary Bottom sheets slide up from the bottom of the screen to reveal additional content. Supports standard and modal variants.
  *
  * @cssprop --bottom-sheet-container-color - Background color of the sheet container.
  * @cssprop --bottom-sheet-scrim-color - Color of the modal scrim overlay.
@@ -177,6 +181,10 @@ let BottomSheet = class BottomSheet extends i$1 {
             ? b `<div
             class=${e({ scrim: true, visible: this.open })}
             @click=${this._handleScrimClick}
+            @keydown=${(e) => {
+                if (e.key === 'Escape')
+                    this._close('esc');
+            }}
           ></div>`
             : A}
 
@@ -189,6 +197,7 @@ let BottomSheet = class BottomSheet extends i$1 {
         })}
         style=${translateY ? `transform: translateY(${translateY})` : ''}
         role="dialog"
+        aria-label="${this.ariaLabel ?? 'Bottom sheet'}"
         aria-modal=${this.variant === 'modal' ? 'true' : 'false'}
         aria-hidden=${!this.open ? 'true' : 'false'}
       >

package/dist/bottom-sheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"bottom-sheet.js","sources":["../../src/bottom-sheet/bottom-sheet.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './bottom-sheet.scss';\n\n/**\n * @label Bottom Sheet\n * @tag wc-bottom-sheet\n * @rawTag bottom-sheet\n * @summary Bottom sheets slide up from the bottom of the screen to reveal additional content. Supports standard and modal variants per Material Design 3.\n *\n * @cssprop --bottom-sheet-container-color - Background color of the sheet container.\n * @cssprop --bottom-sheet-scrim-color - Color of the modal scrim overlay.\n * @cssprop --bottom-sheet-shape - Corner radius of the top edge.\n * @cssprop --bottom-sheet-max-height - Maximum height of the sheet.\n *\n * @example\n * ```html\n * Bottom Sheet\n * ```\n * @tags navigation, overlay\n */\n@IndividualComponent\nexport class BottomSheet extends LitElement {\n  static styles = [styles];\n\n  /** Whether the sheet is visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Sheet variant.\n   * - `\"standard\"`: Coexists with page content; no scrim.\n   * - `\"modal\"`: Overlays page content with a scrim backdrop.\n   */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'modal' =\n    'modal';\n\n  /** Whether to show the drag handle. */\n  @property({ type: Boolean, attribute: 'show-handle' }) showHandle = true;\n\n  @state() private _dragging = false;\n  @state() private _dragStartY = 0;\n  @state() private _dragOffsetY = 0;\n\n  show() {\n    this.open = true;\n  }\n\n  hide() {\n    this._close('programmatic');\n  }\n\n  private _close(reason: string) {\n    if (!this.open) return;\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('bottom-sheet-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleScrimClick() {\n    if (this.variant === 'modal') {\n      this._close('scrim');\n    }\n  }\n\n  private _handleDragStart(e: PointerEvent) {\n    this._dragging = true;\n    this._dragStartY = e.clientY;\n    this._dragOffsetY = 0;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n  }\n\n  private _handleDragMove(e: PointerEvent) {\n    if (!this._dragging) return;\n    const delta = e.clientY - this._dragStartY;\n    this._dragOffsetY = Math.max(0, delta);\n  }\n\n  private _handleDragEnd() {\n    if (!this._dragging) return;\n    this._dragging = false;\n    if (this._dragOffsetY > 80) {\n      this._close('drag');\n    }\n    this._dragOffsetY = 0;\n  }\n\n  render() {\n    const translateY = this._dragging ? `${this._dragOffsetY}px` : undefined;\n\n    return html`\n      ${this.variant === 'modal'\n        ? html`<div\n            class=${classMap({ scrim: true, visible: this.open })}\n            @click=${this._handleScrimClick}\n          ></div>`\n        : nothing}\n\n      <div\n        class=${classMap({\n          sheet: true,\n          open: this.open,\n          dragging: this._dragging,\n          [`variant-${this.variant}`]: true,\n        })}\n        style=${translateY ? `transform: translateY(${translateY})` : ''}\n        role=\"dialog\"\n        aria-modal=${this.variant === 'modal' ? 'true' : 'false'}\n        aria-hidden=${!this.open ? 'true' : 'false'}\n      >\n        ${this.showHandle\n          ? html`<div\n              class=\"handle-area\"\n              @pointerdown=${this._handleDragStart}\n              @pointermove=${this._handleDragMove}\n              @pointerup=${this._handleDragEnd}\n              @pointercancel=${this._handleDragEnd}\n            >\n              <div class=\"handle\"></div>\n            </div>`\n          : nothing}\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","state"],"mappings":"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"}
+{"version":3,"file":"bottom-sheet.js","sources":["../../src/bottom-sheet/bottom-sheet.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './bottom-sheet.scss';\n\n/**\n * @label Bottom Sheet\n * @tag wc-bottom-sheet\n * @rawTag bottom-sheet\n * @summary Bottom sheets slide up from the bottom of the screen to reveal additional content. Supports standard and modal variants.\n *\n * @cssprop --bottom-sheet-container-color - Background color of the sheet container.\n * @cssprop --bottom-sheet-scrim-color - Color of the modal scrim overlay.\n * @cssprop --bottom-sheet-shape - Corner radius of the top edge.\n * @cssprop --bottom-sheet-max-height - Maximum height of the sheet.\n *\n * @example\n * ```html\n * Bottom Sheet\n * ```\n * @tags navigation, overlay\n */\n@IndividualComponent\nexport class BottomSheet extends LitElement {\n  static styles = [styles];\n\n  /** Whether the sheet is visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Sheet variant.\n   * - `\"standard\"`: Coexists with page content; no scrim.\n   * - `\"modal\"`: Overlays page content with a scrim backdrop.\n   */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'modal' =\n    'modal';\n\n  /** Whether to show the drag handle. */\n  @property({ type: Boolean, attribute: 'show-handle' }) showHandle = true;\n\n  @state() private _dragging = false;\n\n  @state() private _dragStartY = 0;\n\n  @state() private _dragOffsetY = 0;\n\n  show() {\n    this.open = true;\n  }\n\n  hide() {\n    this._close('programmatic');\n  }\n\n  private _close(reason: string) {\n    if (!this.open) return;\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('bottom-sheet-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleScrimClick() {\n    if (this.variant === 'modal') {\n      this._close('scrim');\n    }\n  }\n\n  private _handleDragStart(e: PointerEvent) {\n    this._dragging = true;\n    this._dragStartY = e.clientY;\n    this._dragOffsetY = 0;\n    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);\n  }\n\n  private _handleDragMove(e: PointerEvent) {\n    if (!this._dragging) return;\n    const delta = e.clientY - this._dragStartY;\n    this._dragOffsetY = Math.max(0, delta);\n  }\n\n  private _handleDragEnd() {\n    if (!this._dragging) return;\n    this._dragging = false;\n    if (this._dragOffsetY > 80) {\n      this._close('drag');\n    }\n    this._dragOffsetY = 0;\n  }\n\n  render() {\n    const translateY = this._dragging ? `${this._dragOffsetY}px` : undefined;\n\n    return html`\n      ${this.variant === 'modal'\n        ? html`<div\n            class=${classMap({ scrim: true, visible: this.open })}\n            @click=${this._handleScrimClick}\n            @keydown=${(e: KeyboardEvent) => {\n              if (e.key === 'Escape') this._close('esc');\n            }}\n          ></div>`\n        : nothing}\n\n      <div\n        class=${classMap({\n          sheet: true,\n          open: this.open,\n          dragging: this._dragging,\n          [`variant-${this.variant}`]: true,\n        })}\n        style=${translateY ? `transform: translateY(${translateY})` : ''}\n        role=\"dialog\"\n        aria-label=\"${this.ariaLabel ?? 'Bottom sheet'}\"\n        aria-modal=${this.variant === 'modal' ? 'true' : 'false'}\n        aria-hidden=${!this.open ? 'true' : 'false'}\n      >\n        ${this.showHandle\n          ? html`<div\n              class=\"handle-area\"\n              @pointerdown=${this._handleDragStart}\n              @pointermove=${this._handleDragMove}\n              @pointerup=${this._handleDragEnd}\n              @pointercancel=${this._handleDragEnd}\n            >\n              <div class=\"handle\"></div>\n            </div>`\n          : nothing}\n\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","state"],"mappings":"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"}

package/dist/breadcrumb-item.js

@@ -0,0 +1,163 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './class-map-DG7CA1et.js';
+import { o } from './if-defined-BXZpRQ4P.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: contents;
+}
+
+.breadcrumb-item {
+  display: inline-flex;
+  align-items: center;
+  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;
+}
+
+.breadcrumb-item.active {
+  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;
+  color: var(--color-on-surface);
+}
+
+.breadcrumb-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  border-radius: var(--border-radius-050);
+  transition: color 0.2s ease, text-decoration 0.2s ease;
+}
+.breadcrumb-link:hover {
+  color: var(--color-primary);
+  text-decoration: underline;
+}
+.breadcrumb-link:focus-visible {
+  outline: 2px solid var(--color-primary);
+  outline-offset: 2px;
+  text-decoration: underline;
+}
+.breadcrumb-link:active {
+  color: var(--color-primary);
+}
+
+.separator {
+  display: inline-block;
+  margin-left: var(--spacing-100);
+  color: var(--color-outline);
+  user-select: none;
+  pointer-events: none;
+}`;
+
+/**
+ * @label Breadcrumb Item
+ * @tag wc-breadcrumb-item
+ * @rawTag breadcrumb-item
+ * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.
+ * @tags navigation
+ *
+ * @example
+ * ```html
+ * <wc-breadcrumb-item href="#">Home</wc-breadcrumb-item>
+ * ```
+ */
+let BreadcrumbItem = class BreadcrumbItem extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates if this is the active (current) breadcrumb item.
+         */
+        this.active = false;
+        /** 1-based position among sibling breadcrumb items, used for schema.org `ListItem` metadata. */
+        this.position = 1;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.calculatePosition();
+    }
+    calculatePosition() {
+        // Calculate position by counting sibling breadcrumb items
+        if (this.parentElement) {
+            const items = Array.from(this.parentElement.querySelectorAll('p-breadcrumb-item'));
+            this.position = items.indexOf(this) + 1;
+        }
+    }
+    render() {
+        return b `
+      <li
+        class=${e({ 'breadcrumb-item': true, active: this.active })}
+        itemprop="itemListElement"
+        itemscope
+        itemtype="https://schema.org/ListItem"
+      >
+        ${this.active
+            ? b `
+              <span aria-current="page" itemprop="name">
+                <slot></slot>
+              </span>
+            `
+            : b `
+              <a
+                class="breadcrumb-link"
+                itemprop="item"
+                href=${o(this.href)}
+                target=${o(this.target)}
+                ${this.target === '_blank'
+                ? b `rel="noopener noreferrer"`
+                : A}
+              >
+                <span itemprop="name">
+                  <slot></slot>
+                </span>
+              </a>
+            `}
+        <meta itemprop="position" content=${String(this.position)} />
+        ${this.separator
+            ? b `<span class="separator" aria-hidden="true"
+              >${this.separator}</span
+            >`
+            : A}
+      </li>
+    `;
+    }
+};
+BreadcrumbItem.styles = [css_248z];
+__decorate([
+    n({ reflect: true })
+], BreadcrumbItem.prototype, "href", void 0);
+__decorate([
+    n()
+], BreadcrumbItem.prototype, "target", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], BreadcrumbItem.prototype, "active", void 0);
+__decorate([
+    n({ type: String })
+], BreadcrumbItem.prototype, "separator", void 0);
+__decorate([
+    r()
+], BreadcrumbItem.prototype, "position", void 0);
+BreadcrumbItem = __decorate([
+    IndividualComponent
+], BreadcrumbItem);
+
+export { BreadcrumbItem };
+//# sourceMappingURL=breadcrumb-item.js.map

package/dist/breadcrumb-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb-item.js","sources":["../../src/breadcrumb/breadcrumb-item/breadcrumb-item.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from './breadcrumb-item.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Breadcrumb Item\n * @tag wc-breadcrumb-item\n * @rawTag breadcrumb-item\n * @summary A breadcrumb item component that represents a single item in a breadcrumb navigation.\n * @tags navigation\n *\n * @example\n * ```html\n * <wc-breadcrumb-item href=\"#\">Home</wc-breadcrumb-item>\n * ```\n */\n@IndividualComponent\nexport class BreadcrumbItem extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Hyperlink to navigate to on click.\n   */\n  @property({ reflect: true }) href?: string;\n\n  /**\n   * Sets or retrieves the window or frame at which to target content.\n   */\n  @property() target?: string;\n\n  /**\n   * Indicates if this is the active (current) breadcrumb item.\n   */\n  @property({ type: Boolean, reflect: true }) active = false;\n\n  /**\n   * Custom separator character. If not provided, default \"/\" is used.\n   */\n  @property({ type: String }) separator?: string;\n\n  /** 1-based position among sibling breadcrumb items, used for schema.org `ListItem` metadata. */\n  @state()\n  private position = 1;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.calculatePosition();\n  }\n\n  private calculatePosition() {\n    // Calculate position by counting sibling breadcrumb items\n    if (this.parentElement) {\n      const items = Array.from(\n        this.parentElement.querySelectorAll('p-breadcrumb-item'),\n      );\n      this.position = items.indexOf(this) + 1;\n    }\n  }\n\n  render() {\n    return html`\n      <li\n        class=${classMap({ 'breadcrumb-item': true, active: this.active })}\n        itemprop=\"itemListElement\"\n        itemscope\n        itemtype=\"https://schema.org/ListItem\"\n      >\n        ${this.active\n          ? html`\n              <span aria-current=\"page\" itemprop=\"name\">\n                <slot></slot>\n              </span>\n            `\n          : html`\n              <a\n                class=\"breadcrumb-link\"\n                itemprop=\"item\"\n                href=${ifDefined(this.href)}\n                target=${ifDefined(this.target)}\n                ${this.target === '_blank'\n                  ? html`rel=\"noopener noreferrer\"`\n                  : nothing}\n              >\n                <span itemprop=\"name\">\n                  <slot></slot>\n                </span>\n              </a>\n            `}\n        <meta itemprop=\"position\" content=${String(this.position)} />\n        ${this.separator\n          ? html`<span class=\"separator\" aria-hidden=\"true\"\n              >${this.separator}</span\n            >`\n          : nothing}\n      </li>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","ifDefined","nothing","styles","property","state"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA;;;;;;;;;;;AAWG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQA,GAAU,CAAA;AAAvC,IAAA,WAAA,GAAA;;AAaL;;AAEG;QACyC,IAAA,CAAA,MAAM,GAAG,KAAK;;QASlD,IAAA,CAAA,QAAQ,GAAG,CAAC;IAuDtB;IArDE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,iBAAiB,EAAE;IAC1B;IAEQ,iBAAiB,GAAA;;AAEvB,QAAA,IAAI,IAAI,CAAC,aAAa,EAAE;AACtB,YAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,IAAI,CAAC,aAAa,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CACzD;YACD,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;QACzC;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;AAEC,cAAA,EAAAC,CAAQ,CAAC,EAAE,iBAAiB,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;;;;;AAKhE,QAAA,EAAA,IAAI,CAAC;cACHD,CAAI,CAAA;;;;AAIH,YAAA;cACDA,CAAI,CAAA;;;;AAIO,qBAAA,EAAAE,CAAS,CAAC,IAAI,CAAC,IAAI,CAAC;AAClB,uBAAA,EAAAA,CAAS,CAAC,IAAI,CAAC,MAAM,CAAC;kBAC7B,IAAI,CAAC,MAAM,KAAK;kBACdF,CAAI,CAAA,CAAA,yBAAA;AACN,kBAAEG,CAAO;;;;;;AAMd,YAAA,CAAA;AAC+B,0CAAA,EAAA,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;AACvD,QAAA,EAAA,IAAI,CAAC;cACHH,CAAI,CAAA,CAAA;AACC,eAAA,EAAA,IAAI,CAAC,SAAS,CAAA;AACjB,aAAA;AACJ,cAAEG,CAAO;;KAEd;IACH;;AA9EO,cAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAKK,UAAA,CAAA;AAA5B,IAAAC,CAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE;AAAgB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAK/B,UAAA,CAAA;AAAX,IAAAA,CAAQ;AAAmB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAKgB,UAAA,CAAA;IAA3CA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAiB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,QAAA,EAAA,MAAA,CAAA;AAK/B,UAAA,CAAA;AAA3B,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAqB,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAIvC,UAAA,CAAA;AADP,IAAAC,CAAK;AACe,CAAA,EAAA,cAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAzBV,cAAc,GAAA,UAAA,CAAA;IAD1B;AACY,CAAA,EAAA,cAAc,CAgF1B;;;;"}

package/dist/breadcrumb.js

@@ -0,0 +1,95 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { BreadcrumbItem } from './breadcrumb-item.js';
+import './state-DkTK9EGF.js';
+import './class-map-DG7CA1et.js';
+import './directive-ZPhl09Yt.js';
+import './if-defined-BXZpRQ4P.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+  margin-bottom: var(--spacing-050);
+}
+
+.breadcrumb {
+  width: 100%;
+}
+
+ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+::slotted(:not(:last-child))::after {
+  display: inline-block;
+  padding-right: var(--spacing-100);
+  padding-left: var(--spacing-100);
+  color: var(--color-outline);
+  content: "/";
+  user-select: none;
+  pointer-events: none;
+}`;
+
+/**
+ * @label Breadcrumb
+ * @tag wc-breadcrumb
+ * @rawTag breadcrumb
+ * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.
+ * @overview
+ *  - Breadcrumbs provide a trail for users to follow back to the starting or entry point.
+ *  - They help users understand their current location within the site hierarchy.
+ *  - Follows WCAG 2.1 guidelines for accessible navigation landmarks.
+ * @tags navigation
+ *
+ * @example
+ * ```html
+ * <wc-breadcrumb label="Breadcrumb">
+ *   <wc-breadcrumb-item href="#">Home</wc-breadcrumb-item>
+ *   <wc-breadcrumb-item href="#">Category</wc-breadcrumb-item>
+ *   <wc-breadcrumb-item active>Current Page</wc-breadcrumb-item>
+ * </wc-breadcrumb>
+ * ```
+ */
+let Breadcrumb = class Breadcrumb extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * Accessible label for the breadcrumb navigation landmark.
+         */
+        this.label = 'Breadcrumb';
+    }
+    render() {
+        return b `<nav aria-label=${this.label} class="breadcrumb">
+      <ol>
+        <slot></slot>
+      </ol>
+    </nav>`;
+    }
+};
+Breadcrumb.styles = [css_248z];
+Breadcrumb.Item = BreadcrumbItem;
+__decorate([
+    n({ type: String })
+], Breadcrumb.prototype, "label", void 0);
+Breadcrumb = __decorate([
+    IndividualComponent
+], Breadcrumb);
+
+export { Breadcrumb };
+//# sourceMappingURL=breadcrumb.js.map

package/dist/breadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.js","sources":["../../src/breadcrumb/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './breadcrumb.scss';\nimport { BreadcrumbItem } from '../breadcrumb-item/breadcrumb-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Breadcrumb\n * @tag wc-breadcrumb\n * @rawTag breadcrumb\n * @summary A breadcrumb is a secondary navigation scheme that reveals the user's location in a website or web application.\n * @overview\n *  - Breadcrumbs provide a trail for users to follow back to the starting or entry point.\n *  - They help users understand their current location within the site hierarchy.\n *  - Follows WCAG 2.1 guidelines for accessible navigation landmarks.\n * @tags navigation\n *\n * @example\n * ```html\n * <wc-breadcrumb label=\"Breadcrumb\">\n *   <wc-breadcrumb-item href=\"#\">Home</wc-breadcrumb-item>\n *   <wc-breadcrumb-item href=\"#\">Category</wc-breadcrumb-item>\n *   <wc-breadcrumb-item active>Current Page</wc-breadcrumb-item>\n * </wc-breadcrumb>\n * ```\n */\n@IndividualComponent\nexport class Breadcrumb extends LitElement {\n  static styles = [styles];\n\n  static Item = BreadcrumbItem;\n\n  /**\n   * Accessible label for the breadcrumb navigation landmark.\n   */\n  @property({ type: String }) label = 'Breadcrumb';\n\n  render() {\n    return html`<nav aria-label=${this.label} class=\"breadcrumb\">\n      <ol>\n        <slot></slot>\n      </ol>\n    </nav>`;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;;AAmBG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQA,GAAU,CAAA;AAAnC,IAAA,WAAA,GAAA;;AAKL;;AAEG;QACyB,IAAA,CAAA,KAAK,GAAG,YAAY;IASlD;IAPE,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA,gBAAA,EAAmB,IAAI,CAAC,KAAK,CAAA;;;;WAIjC;IACT;;AAfO,UAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEjB,UAAA,CAAA,IAAI,GAAG,cAAH;AAKiB,UAAA,CAAA;AAA3B,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE;AAAuB,CAAA,EAAA,UAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AARtC,UAAU,GAAA,UAAA,CAAA;IADtB;AACY,CAAA,EAAA,UAAU,CAiBtB;;;;"}