@redvars/peacock 3.8.0 → 3.8.2

package/dist/item.js

@@ -0,0 +1,212 @@
+import { i, a as i$1, b, _ as __decorate, I as IndividualComponent } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { e as e$1 } from './base-Cl6v8-BZ.js';
+import { m as mixinDelegatesAria, a as mixinElementInternals } from './element-internals-2CMts_0M.js';
+import { h as hasMeaningfulContent } from './observe-slot-change-DPxaZrZF.js';
+
+/**
+ * @license
+ * Copyright 2017 Google LLC
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+let e;function r(r){return (n,o)=>e$1(n,o,{get(){return (this.renderRoot??(e??=document.createDocumentFragment())).querySelectorAll(r)}})}
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  --item-container-color: transparent;
+  --item-height: 3rem;
+  --item-multiline-height: 4rem;
+}
+
+:host {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.item {
+  position: relative;
+  display: flex;
+  flex: 1;
+  gap: var(--item-spacing, 1rem);
+  padding-block: 0.625rem;
+  padding-inline: var(--item-padding-inline, 1rem);
+  overflow: hidden;
+  color: var(--item-label-text-color, var(--color-on-surface));
+  opacity: var(--item-label-text-opacity, 1);
+  font-family: var(--item-label-font-family, var(--typography-body-large-font-family)) !important;
+  font-size: var(--item-label-font-size, var(--typography-body-large-font-size)) !important;
+  font-weight: var(--item-label-font-weight, var(--typography-body-large-font-weight)) !important;
+  line-height: var(--item-label-line-height, var(--typography-body-large-line-height)) !important;
+  letter-spacing: var(--item-label-letter-spacing, var(--typography-body-large-letter-spacing)) !important;
+}
+.item [name=overline] {
+  color: var(--item-outline-text-color);
+  font-family: var(--item-outline-label-font-family, var(--typography-body-medium-font-family)) !important;
+  font-size: var(--item-outline-label-font-size, var(--typography-body-medium-font-size)) !important;
+  font-weight: var(--item-outline-label-font-weight, var(--typography-body-medium-font-weight)) !important;
+  line-height: var(--item-outline-label-line-height, var(--typography-body-medium-line-height)) !important;
+  letter-spacing: var(--item-outline-label-letter-spacing, var(--typography-body-medium-letter-spacing)) !important;
+}
+.item [name=supporting-text] {
+  color: var(--item-supporting-text-color, var(--color-on-surface-variant));
+  font-family: var(--item-supporting-text-font-family, var(--typography-body-medium-font-family)) !important;
+  font-size: var(--item-supporting-text-font-size, var(--typography-body-medium-font-size)) !important;
+  font-weight: var(--item-supporting-text-font-weight, var(--typography-body-medium-font-weight)) !important;
+  line-height: var(--item-supporting-text-line-height, var(--typography-body-medium-line-height)) !important;
+  letter-spacing: var(--item-supporting-text-letter-spacing, var(--typography-body-medium-letter-spacing)) !important;
+}
+.item [name=trailing-supporting-text] {
+  color: var(--item-trailing-supporting-text-color, var(--color-on-surface-variant));
+  font-family: var(--item-trailing-supporting-text-font-family) !important;
+  font-size: var(--item-trailing-supporting-text-font-size) !important;
+  font-weight: var(--item-trailing-supporting-text-font-weight) !important;
+  line-height: var(--item-trailing-supporting-text-line-height) !important;
+  letter-spacing: var(--item-trailing-supporting-text-letter-spacing) !important;
+}
+.item .default-slot {
+  display: inline;
+}
+.item .default-slot,
+.item .text ::slotted(*) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.item .text {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+  justify-content: center;
+}
+.item .non-text {
+  align-items: center;
+  display: flex;
+  height: fit-content;
+  --icon-size: 1.5rem;
+}
+.item .non-text,
+.item .text {
+  z-index: 0;
+  min-height: var(--item-height);
+}
+
+:host([multiline]) .non-text,
+:host([multiline]) .text {
+  min-height: var(--item-multiline-height);
+}
+
+[name=container]::slotted(*) {
+  inset: 0;
+  position: absolute;
+}`;
+
+/**
+ * @label Item
+ * @tag wc-item
+ * @rawTag item
+ *
+ * @summary A primitive element used to build higher-level item components such as menu-item, navigation-item, and list-item. Provides start, text, and end slots for flexible content composition.
+ *
+ * @example
+ * ```html
+ * <wc-item>
+ *   <wc-icon slot="start" name="notifications"></wc-icon>
+ *
+ *   <span slot="overline">Settings</span>
+ *   <span slot="headline">Notifications</span>
+ *   <span slot="supporting-text">Manage alerts and reminders</span>
+ *
+ *   <span slot="trailing-supporting-text">3</span>
+ *   <wc-icon slot="end" name="chevron_right"></wc-icon>
+ * </wc-item>
+ * ```
+ * @tags display
+ */
+let Item = class Item extends mixinDelegatesAria(mixinElementInternals(i$1)) {
+    constructor() {
+        super(...arguments);
+        /**
+         * Only needed for SSR.
+         *
+         * Add this attribute when an item has two lines to avoid a Flash Of Unstyled
+         * Content. This attribute is not needed for single line items or items with
+         * three or more lines.
+         */
+        this.multiline = false;
+    }
+    __hasNamedSlot(...names) {
+        return names.some(name => Array.from(this.children).some(child => child.getAttribute('slot') === name));
+    }
+    render() {
+        const hasStart = this.__hasNamedSlot('start');
+        const hasEnd = this.__hasNamedSlot('end');
+        const hasTrailingSupportingText = this.__hasNamedSlot('trailing-supporting-text');
+        return b `
+      <slot name="container"></slot>
+
+      <div class="item">
+        <slot class="non-text" name="start" ?hidden=${!hasStart}></slot>
+        <div class="text">
+          <slot name="overline" @slotchange=${this.handleTextSlotChange}></slot>
+          <slot
+            class="default-slot"
+            @slotchange=${this.handleTextSlotChange}
+          ></slot>
+          <slot name="headline" @slotchange=${this.handleTextSlotChange}></slot>
+          <slot
+            name="supporting-text"
+            @slotchange=${this.handleTextSlotChange}
+          ></slot>
+        </div>
+        <slot
+          class="non-text"
+          name="trailing-supporting-text"
+          ?hidden=${!hasTrailingSupportingText}
+        ></slot>
+        <slot class="non-text" name="end" ?hidden=${!hasEnd}></slot>
+      </div>
+    `;
+    }
+    handleTextSlotChange() {
+        // Check if there's more than one text slot with content. If so, the item is
+        // multiline, which has a different min-height than single line items.
+        let isMultiline = false;
+        let slotsWithContent = 0;
+        for (const slot of this.textSlots) {
+            if (hasMeaningfulContent(slot)) {
+                slotsWithContent += 1;
+            }
+            if (slotsWithContent > 1) {
+                isMultiline = true;
+                break;
+            }
+        }
+        this.multiline = isMultiline;
+    }
+};
+Item.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], Item.prototype, "multiline", void 0);
+__decorate([
+    r('.text slot')
+], Item.prototype, "textSlots", void 0);
+Item = __decorate([
+    IndividualComponent
+], Item);
+
+export { Item };
+//# sourceMappingURL=item.js.map

package/dist/item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":["../node_modules/@lit/reactive-element/decorators/query-all.js","../../src/item/item.ts"],"sourcesContent":["import{desc as t}from\"./base.js\";\n/**\n * @license\n * Copyright 2017 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */\nlet e;function r(r){return(n,o)=>t(n,o,{get(){return(this.renderRoot??(e??=document.createDocumentFragment())).querySelectorAll(r)}})}export{r as queryAll};\n//# sourceMappingURL=query-all.js.map\n","import { html, LitElement } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport styles from './item.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\n\nimport { hasMeaningfulContent } from '@/__internal/utils/observe-slot-change.js';\n\n/**\n * @label Item\n * @tag wc-item\n * @rawTag item\n *\n * @summary A primitive element used to build higher-level item components such as menu-item, navigation-item, and list-item. Provides start, text, and end slots for flexible content composition.\n *\n * @example\n * ```html\n * <wc-item>\n *   <wc-icon slot=\"start\" name=\"notifications\"></wc-icon>\n *\n *   <span slot=\"overline\">Settings</span>\n *   <span slot=\"headline\">Notifications</span>\n *   <span slot=\"supporting-text\">Manage alerts and reminders</span>\n *\n *   <span slot=\"trailing-supporting-text\">3</span>\n *   <wc-icon slot=\"end\" name=\"chevron_right\"></wc-icon>\n * </wc-item>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Item extends mixinDelegatesAria(\n  mixinElementInternals(LitElement),\n) {\n  static styles = [styles];\n\n  /**\n   * Only needed for SSR.\n   *\n   * Add this attribute when an item has two lines to avoid a Flash Of Unstyled\n   * Content. This attribute is not needed for single line items or items with\n   * three or more lines.\n   */\n  @property({ type: Boolean, reflect: true }) multiline = false;\n\n  @queryAll('.text slot') private readonly textSlots!: HTMLSlotElement[];\n\n  private __hasNamedSlot(...names: string[]) {\n    return names.some(name =>\n      Array.from(this.children).some(\n        child => child.getAttribute('slot') === name,\n      ),\n    );\n  }\n\n  override render() {\n    const hasStart = this.__hasNamedSlot('start');\n    const hasEnd = this.__hasNamedSlot('end');\n    const hasTrailingSupportingText = this.__hasNamedSlot(\n      'trailing-supporting-text',\n    );\n\n    return html`\n      <slot name=\"container\"></slot>\n\n      <div class=\"item\">\n        <slot class=\"non-text\" name=\"start\" ?hidden=${!hasStart}></slot>\n        <div class=\"text\">\n          <slot name=\"overline\" @slotchange=${this.handleTextSlotChange}></slot>\n          <slot\n            class=\"default-slot\"\n            @slotchange=${this.handleTextSlotChange}\n          ></slot>\n          <slot name=\"headline\" @slotchange=${this.handleTextSlotChange}></slot>\n          <slot\n            name=\"supporting-text\"\n            @slotchange=${this.handleTextSlotChange}\n          ></slot>\n        </div>\n        <slot\n          class=\"non-text\"\n          name=\"trailing-supporting-text\"\n          ?hidden=${!hasTrailingSupportingText}\n        ></slot>\n        <slot class=\"non-text\" name=\"end\" ?hidden=${!hasEnd}></slot>\n      </div>\n    `;\n  }\n\n  private handleTextSlotChange() {\n    // Check if there's more than one text slot with content. If so, the item is\n    // multiline, which has a different min-height than single line items.\n    let isMultiline = false;\n    let slotsWithContent = 0;\n    for (const slot of this.textSlots) {\n      if (hasMeaningfulContent(slot)) {\n        slotsWithContent += 1;\n      }\n\n      if (slotsWithContent > 1) {\n        isMultiline = true;\n        break;\n      }\n    }\n\n    this.multiline = isMultiline;\n  }\n}\n"],"names":["t","LitElement","html","styles","property","queryAll"],"mappings":";;;;;;AACA;AACA;AACA;AACA;AACA;AACA,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,OAAM,CAAC,CAAC,CAAC,CAAC,GAAGA,GAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,OAAM,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACGrI;;;;;;;;;;;;;;;;;;;;;AAqBG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,kBAAkB,CAC1C,qBAAqB,CAACC,GAAU,CAAC,CAClC,CAAA;AAFM,IAAA,WAAA,GAAA;;AAKL;;;;;;AAMG;QACyC,IAAA,CAAA,SAAS,GAAG,KAAK;IAgE/D;IA5DU,cAAc,CAAC,GAAG,KAAe,EAAA;AACvC,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,IACpB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,IAAI,CAC5B,KAAK,IAAI,KAAK,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,IAAI,CAC7C,CACF;IACH;IAES,MAAM,GAAA;QACb,MAAM,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC;QAC7C,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;QACzC,MAAM,yBAAyB,GAAG,IAAI,CAAC,cAAc,CACnD,0BAA0B,CAC3B;AAED,QAAA,OAAOC,CAAI,CAAA;;;;AAIuC,oDAAA,EAAA,CAAC,QAAQ,CAAA;;AAEjB,4CAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;;AAG7C,wBAAA,EAAA,IAAI,CAAC,oBAAoB;;AAEL,4CAAA,EAAA,IAAI,CAAC,oBAAoB,CAAA;;;AAG7C,wBAAA,EAAA,IAAI,CAAC,oBAAoB;;;;;;AAM/B,kBAAA,EAAA,CAAC,yBAAyB;;AAEM,kDAAA,EAAA,CAAC,MAAM,CAAA;;KAEtD;IACH;IAEQ,oBAAoB,GAAA;;;QAG1B,IAAI,WAAW,GAAG,KAAK;QACvB,IAAI,gBAAgB,GAAG,CAAC;AACxB,QAAA,KAAK,MAAM,IAAI,IAAI,IAAI,CAAC,SAAS,EAAE;AACjC,YAAA,IAAI,oBAAoB,CAAC,IAAI,CAAC,EAAE;gBAC9B,gBAAgB,IAAI,CAAC;YACvB;AAEA,YAAA,IAAI,gBAAgB,GAAG,CAAC,EAAE;gBACxB,WAAW,GAAG,IAAI;gBAClB;YACF;QACF;AAEA,QAAA,IAAI,CAAC,SAAS,GAAG,WAAW;IAC9B;;AAxEO,IAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AASoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAoB,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAErB,UAAA,CAAA;IAAxCC,CAAQ,CAAC,YAAY;AAAiD,CAAA,EAAA,IAAA,CAAA,SAAA,EAAA,WAAA,EAAA,MAAA,CAAA;AAd5D,IAAI,GAAA,UAAA,CAAA;IADhB;AACY,CAAA,EAAA,IAAI,CA4EhB;;;;","x_google_ignoreList":[0]}

package/dist/link.js

@@ -0,0 +1,75 @@
+import { i, b, _ as __decorate, I as IndividualComponent, a as i$1 } from './IndividualComponent-Bdwyrvd6.js';
+import { e } from './class-map-DG7CA1et.js';
+import { N as NativeHyperlinkMixin } from './NativeHyperlinkMixin-D9J4aBTy.js';
+import './directive-ZPhl09Yt.js';
+import './property-B49QQ8pS.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: inline;
+  color: var(--color-primary);
+}
+
+.link {
+  border-radius: inherit;
+  corner-shape: inherit;
+  color: inherit;
+  --icon-color: currentColor;
+  text-decoration: none;
+}
+.link:hover, .link:focus-visible {
+  text-decoration: underline;
+}
+
+:host(.inherit) .link {
+  color: inherit;
+  text-decoration: none !important;
+}`;
+
+/**
+ * @label Link
+ * @tag wc-link
+ * @rawTag link
+ * @summary The link component is used to navigate to a new page or section within the current page.
+ * @cssprop --link-color - Controls the color of the link.
+ * @tags navigation
+ *
+ * @example
+ * ```html
+ * <wc-link href="#">Link</wc-link>
+ * ```
+ */
+let Link = class Link extends NativeHyperlinkMixin(i$1) {
+    render() {
+        return b `<a
+      class=${e({
+            link: true,
+        })}
+      href=${this.href}
+      ?download=${this.download}
+      target=${this.target}
+      ?rel=${this.rel}
+      ?tabindex=${this.parentElement?.tabIndex}
+    >
+      <slot></slot>
+    </a>`;
+    }
+};
+Link.styles = [css_248z];
+Link = __decorate([
+    IndividualComponent
+], Link);
+
+export { Link };
+//# sourceMappingURL=link.js.map

package/dist/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sources":["../../src/link/link.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { classMap } from 'lit/directives/class-map.js';\nimport NativeHyperlinkMixin from '@/__internal/mixins/NativeHyperlinkMixin.js';\nimport styles from './link.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Link\n * @tag wc-link\n * @rawTag link\n * @summary The link component is used to navigate to a new page or section within the current page.\n * @cssprop --link-color - Controls the color of the link.\n * @tags navigation\n *\n * @example\n * ```html\n * <wc-link href=\"#\">Link</wc-link>\n * ```\n */\n@IndividualComponent\nexport class Link extends NativeHyperlinkMixin(LitElement) {\n  static styles = [styles];\n\n  render() {\n    return html`<a\n      class=${classMap({\n        link: true,\n      })}\n      href=${this.href}\n      ?download=${this.download}\n      target=${this.target}\n      ?rel=${this.rel}\n      ?tabindex=${this.parentElement?.tabIndex}\n    >\n      <slot></slot>\n    </a>`;\n  }\n}\n"],"names":["LitElement","html","classMap","styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;AAYG;AAEI,IAAM,IAAI,GAAV,MAAM,IAAK,SAAQ,oBAAoB,CAACA,GAAU,CAAC,CAAA;IAGxD,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA,CAAA;AACD,YAAA,EAAAC,CAAQ,CAAC;AACf,YAAA,IAAI,EAAE,IAAI;SACX,CAAC;AACK,WAAA,EAAA,IAAI,CAAC,IAAI;AACJ,gBAAA,EAAA,IAAI,CAAC,QAAQ;AAChB,aAAA,EAAA,IAAI,CAAC,MAAM;AACb,WAAA,EAAA,IAAI,CAAC,GAAG;kBACH,IAAI,CAAC,aAAa,EAAE,QAAQ;;;SAGrC;IACP;;AAfO,IAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AADb,IAAI,GAAA,UAAA,CAAA;IADhB;AACY,CAAA,EAAA,IAAI,CAiBhB;;;;"}

package/dist/list-D6JLh1uh.js

@@ -0,0 +1,352 @@
+import { i, a as i$1, A, b, _ as __decorate, I as IndividualComponent } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { e } from './class-map-DG7CA1et.js';
+import { e as e$1 } from './query-CHb9Ft_d.js';
+import { o } from './if-defined-BXZpRQ4P.js';
+import { i as isLink } from './is-link-Dk2OV3PM.js';
+import { i as isActivationClick, d as dispatchActivationClick } from './dispatch-event-utils-CuEqjlPT.js';
+import { m as mixinBaseButton, a as mixinHyperlink } from './hyperlink-DLvb6MXE.js';
+import { m as mixinDelegatesAria, a as mixinElementInternals } from './element-internals-2CMts_0M.js';
+
+var css_248z$1 = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: block;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+}`;
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: flex;
+}
+
+/*
+  * Reset native button/link styles
+  */
+.native-button {
+  background: transparent;
+  border: none;
+  appearance: none;
+  margin: 0;
+  outline: none;
+  padding: 0;
+}
+
+.native-link {
+  text-decoration: none;
+  color: inherit;
+  cursor: pointer;
+}
+.native-link:link, .native-link:visited, .native-link:hover, .native-link:active {
+  text-decoration: none;
+  color: inherit;
+}
+
+.list-item {
+  position: relative;
+  width: 100%;
+  cursor: pointer;
+  text-align: start;
+}
+.list-item .list-item-content {
+  --item-padding-inline: 1rem;
+  --item-height: 1.5rem;
+  --item-multiline-height: 3rem;
+  --item-label-text-color: var(--_label-text-color);
+  --item-label-text-opacity: var(--_label-text-opacity, 1);
+}
+.list-item .leading,
+.list-item .trailing {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5rem;
+  color: var(--_leading-trailing-color);
+}
+.list-item .trailing {
+  margin-inline-start: auto;
+}
+.list-item .content {
+  display: block;
+  flex: 1;
+  min-inline-size: 0;
+}
+.list-item .background {
+  background-color: var(--_container-color);
+  opacity: var(--_container-opacity, 1);
+  border-radius: var(--shape-corner-medium);
+}
+.list-item .focus-ring {
+  --focus-ring-container-shape-start-start: var(--shape-corner-medium);
+  --focus-ring-container-shape-start-end: var(--shape-corner-medium);
+  --focus-ring-container-shape-end-start: var(--shape-corner-medium);
+  --focus-ring-container-shape-end-end: var(--shape-corner-medium);
+  z-index: 2;
+  --focus-ring-inset: 0px;
+}
+.list-item .ripple {
+  --ripple-state-opacity: var(--_container-state-opacity, 0);
+  --ripple-pressed-color: var(--_container-state-color);
+  border-radius: var(--shape-corner-medium);
+}
+.list-item .skeleton {
+  z-index: 2;
+  --skeleton-container-shape-start-start: var(--shape-corner-medium);
+  --skeleton-container-shape-start-end: var(--shape-corner-medium);
+  --skeleton-container-shape-end-start: var(--shape-corner-medium);
+  --skeleton-container-shape-end-end: var(--shape-corner-medium);
+}
+
+:host(:not([skeleton])) .skeleton {
+  display: none;
+}
+
+:host-context([variant=standard]) {
+  --_container-color: transparent;
+  --_label-text-color: var(--color-on-surface);
+  --_leading-trailing-color: var(--color-on-surface-variant);
+  --_container-state-color: var(--color-on-surface);
+}
+:host-context([variant=standard]):host(:hover:not([disabled], [soft-disabled], [skeleton])) {
+  --_container-state-opacity: 0.08;
+}
+:host-context([variant=standard]):host(:active:not([disabled], [soft-disabled], [skeleton])) {
+  --_container-state-opacity: 0.12;
+}
+:host-context([variant=standard]):host([selected]) {
+  --_container-color: var(--color-secondary-container);
+  --_label-text-color: var(--color-on-secondary-container);
+  --_leading-trailing-color: var(--color-on-secondary-container);
+  --_container-state-color: var(--color-on-secondary-container);
+}
+:host-context([variant=standard]):host([disabled]), :host-context([variant=standard]):host([soft-disabled]) {
+  cursor: not-allowed;
+  --_label-text-color: var(--color-on-surface);
+  --_label-text-opacity: 0.38;
+  --_leading-trailing-color: var(--color-on-surface);
+  --_container-opacity: 0.12;
+}
+:host-context([variant=standard]):host([disabled]) .ripple, :host-context([variant=standard]):host([soft-disabled]) .ripple {
+  display: none;
+}`;
+
+/**
+ * @label List Item
+ * @tag wc-list-item
+ * @rawTag list-item
+ *
+ * @summary A list item with leading, trailing and content slots.
+ *
+ * @example
+ * ```html
+ * <wc-list-item selected>
+ *   <wc-icon slot="leading" name="person"></wc-icon>
+ *   Profile
+ *   <wc-icon slot="trailing" name="chevron_right"></wc-icon>
+ * </wc-list-item>
+ * ```
+ * @tags display
+ */
+class ListItem extends mixinBaseButton(mixinHyperlink(mixinDelegatesAria(mixinElementInternals(i$1)))) {
+    constructor() {
+        super();
+        this.selected = false;
+        /** When true, renders the list-item in a loading skeleton state. */
+        this.skeleton = false;
+        this.__dispatchClick = (event) => {
+            // If the button is soft-disabled or a disabled link, we need to explicitly
+            // prevent the click from propagating to other event listeners as well as
+            // prevent the default action.
+            if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {
+                event.stopImmediatePropagation();
+                event.preventDefault();
+                return;
+            }
+            if (!isActivationClick(event) || !this.itemElement) {
+                return;
+            }
+            this.focus();
+            dispatchActivationClick(this.itemElement);
+        };
+        this.addEventListener('click', this.__dispatchClickWithThrottle);
+    }
+    connectedCallback() {
+        // eslint-disable-next-line wc/guard-super-call
+        super.connectedCallback();
+        if (!this.hasAttribute('role')) {
+            this.setAttribute('role', 'listitem');
+        }
+    }
+    focus() {
+        this.itemElement?.focus();
+    }
+    blur() {
+        this.itemElement?.blur();
+    }
+    __hasNamedSlot(...names) {
+        return names.some(name => Array.from(this.children).some(child => child.getAttribute('slot') === name));
+    }
+    render() {
+        const isElementLink = isLink(this);
+        const cssClasses = {
+            'list-item': true,
+            'native-button': !isElementLink,
+            'native-link': isElementLink,
+        };
+        // Needed for closure conformance
+        const { ariaLabel } = this;
+        if (!isElementLink) {
+            return b `
+        <button
+          id="list-item"
+          class=${e(cssClasses)}
+          ?disabled=${this.disabled}
+          aria-label="${ariaLabel || A}"
+          ?aria-disabled=${this.softDisabled}
+          @click=${this.__dispatchClick}
+        >
+          ${this.renderContent()}
+        </button>
+      `;
+        }
+        return b `
+      <a
+        id="list-item"
+        class=${e(cssClasses)}
+        href=${this.href}
+        target=${this.target}
+        rel=${o(this.rel)}
+        download=${o(this.download)}
+        tabindex=${this.disabled ? '-1' : '0'}
+        aria-disabled=${String(this.disabled || this.softDisabled)}
+        @click=${this.__dispatchClick}
+      >
+        ${this.renderContent()}
+      </a>
+    `;
+    }
+    renderContent() {
+        const hasLeading = this.__hasNamedSlot('leading');
+        const hasTrailingSupportingText = this.__hasNamedSlot('trailing-supporting-text');
+        const hasTrailing = this.__hasNamedSlot('trailing');
+        return b `
+      <wc-item class="list-item-content">
+        <wc-focus-ring
+          class="focus-ring"
+          for="list-item"
+          slot="container"
+        ></wc-focus-ring>
+        <div class="background" slot="container"></div>
+        <wc-ripple class="ripple" for="list-item" slot="container"></wc-ripple>
+        <wc-skeleton class="skeleton" slot="container"></wc-skeleton>
+
+        <slot name="leading" slot="start" ?hidden=${!hasLeading}></slot>
+        <slot name="overline" slot="overline"></slot>
+        <slot name="headline" slot="headline"></slot>
+        <slot></slot>
+        <slot name="supporting-text" slot="supporting-text"></slot>
+
+        <slot
+          name="trailing-supporting-text"
+          slot="trailing-supporting-text"
+          ?hidden=${!hasTrailingSupportingText}
+        ></slot>
+        <slot name="trailing" slot="end" ?hidden=${!hasTrailing}></slot>
+      </wc-item>
+    `;
+    }
+}
+// ── Static ───────────────────────────────────────────────────────────────
+/** @nocollapse */ // eslint-disable-next-line
+ListItem.shadowRootOptions = {
+    mode: 'open',
+    delegatesFocus: true,
+};
+ListItem.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], ListItem.prototype, "selected", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], ListItem.prototype, "skeleton", void 0);
+__decorate([
+    e$1('#list-item')
+], ListItem.prototype, "itemElement", void 0);
+
+/**
+ * @label List
+ * @tag wc-list
+ * @rawTag list
+ *
+ * @summary A list container for one or more list items.
+ *
+ * @example
+ * ```html
+ * <wc-list>
+ *   <wc-list-item>
+ *     <wc-icon slot="leading" name="inbox"></wc-icon>
+ *     Inbox
+ *     <span slot="trailing">24</span>
+ *   </wc-list-item>
+ * </wc-list>
+ * ```
+ * @tags display
+ */
+let List = class List extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**  */
+        this.variant = 'standard';
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('role', 'list');
+    }
+    render() {
+        const cssClasses = {
+            list: true,
+            [`variant-${this.variant}`]: true,
+        };
+        return b `
+      <div class=${e(cssClasses)}>
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+List.styles = [css_248z$1];
+List.Item = ListItem;
+__decorate([
+    n({ type: String, reflect: true })
+], List.prototype, "variant", void 0);
+List = __decorate([
+    IndividualComponent
+], List);
+
+export { List as L, ListItem as a };
+//# sourceMappingURL=list-D6JLh1uh.js.map

package/dist/list-D6JLh1uh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-D6JLh1uh.js","sources":["../../src/list/list-item.ts","../../src/list/list.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport styles from './list-item.scss';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\nimport { mixinBaseButton } from '@/button/base-button/base-button.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\n\n/**\n * @label List Item\n * @tag wc-list-item\n * @rawTag list-item\n *\n * @summary A list item with leading, trailing and content slots.\n *\n * @example\n * ```html\n * <wc-list-item selected>\n *   <wc-icon slot=\"leading\" name=\"person\"></wc-icon>\n *   Profile\n *   <wc-icon slot=\"trailing\" name=\"chevron_right\"></wc-icon>\n * </wc-list-item>\n * ```\n * @tags display\n */\nexport class ListItem extends mixinBaseButton(\n  mixinHyperlink(mixinDelegatesAria(mixinElementInternals(LitElement))),\n) {\n  // ── Static ───────────────────────────────────────────────────────────────\n\n  /** @nocollapse */ // eslint-disable-next-line\n  static override shadowRootOptions: ShadowRootInit = {\n    mode: 'open',\n    delegatesFocus: true,\n  };\n\n  static styles = [styles];\n\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  /** When true, renders the list-item in a loading skeleton state. */\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  @query('#list-item') readonly itemElement!: HTMLElement | null;\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  connectedCallback() {\n    // eslint-disable-next-line wc/guard-super-call\n    super.connectedCallback();\n\n    if (!this.hasAttribute('role')) {\n      this.setAttribute('role', 'listitem');\n    }\n  }\n\n  override focus() {\n    this.itemElement?.focus();\n  }\n\n  override blur() {\n    this.itemElement?.blur();\n  }\n\n  __dispatchClick = (event: MouseEvent | KeyboardEvent) => {\n    // If the button is soft-disabled or a disabled link, we need to explicitly\n    // prevent the click from propagating to other event listeners as well as\n    // prevent the default action.\n    if (this.softDisabled || (this.disabled && this.href) || this.skeleton) {\n      event.stopImmediatePropagation();\n      event.preventDefault();\n      return;\n    }\n\n    if (!isActivationClick(event) || !this.itemElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.itemElement);\n  };\n\n  private __hasNamedSlot(...names: string[]) {\n    return names.some(name =>\n      Array.from(this.children).some(\n        child => child.getAttribute('slot') === name,\n      ),\n    );\n  }\n\n  render() {\n    const isElementLink = isLink(this);\n\n    const cssClasses = {\n      'list-item': true,\n      'native-button': !isElementLink,\n      'native-link': isElementLink,\n    };\n\n    // Needed for closure conformance\n    const { ariaLabel } = this as ARIAMixinStrict;\n\n    if (!isElementLink) {\n      return html`\n        <button\n          id=\"list-item\"\n          class=${classMap(cssClasses)}\n          ?disabled=${this.disabled}\n          aria-label=\"${ariaLabel || nothing}\"\n          ?aria-disabled=${this.softDisabled}\n          @click=${this.__dispatchClick}\n        >\n          ${this.renderContent()}\n        </button>\n      `;\n    }\n\n    return html`\n      <a\n        id=\"list-item\"\n        class=${classMap(cssClasses)}\n        href=${this.href}\n        target=${this.target}\n        rel=${ifDefined(this.rel)}\n        download=${ifDefined(this.download)}\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-disabled=${String(this.disabled || this.softDisabled)}\n        @click=${this.__dispatchClick}\n      >\n        ${this.renderContent()}\n      </a>\n    `;\n  }\n\n  renderContent() {\n    const hasLeading = this.__hasNamedSlot('leading');\n    const hasTrailingSupportingText = this.__hasNamedSlot(\n      'trailing-supporting-text',\n    );\n    const hasTrailing = this.__hasNamedSlot('trailing');\n\n    return html`\n      <wc-item class=\"list-item-content\">\n        <wc-focus-ring\n          class=\"focus-ring\"\n          for=\"list-item\"\n          slot=\"container\"\n        ></wc-focus-ring>\n        <div class=\"background\" slot=\"container\"></div>\n        <wc-ripple class=\"ripple\" for=\"list-item\" slot=\"container\"></wc-ripple>\n        <wc-skeleton class=\"skeleton\" slot=\"container\"></wc-skeleton>\n\n        <slot name=\"leading\" slot=\"start\" ?hidden=${!hasLeading}></slot>\n        <slot name=\"overline\" slot=\"overline\"></slot>\n        <slot name=\"headline\" slot=\"headline\"></slot>\n        <slot></slot>\n        <slot name=\"supporting-text\" slot=\"supporting-text\"></slot>\n\n        <slot\n          name=\"trailing-supporting-text\"\n          slot=\"trailing-supporting-text\"\n          ?hidden=${!hasTrailingSupportingText}\n        ></slot>\n        <slot name=\"trailing\" slot=\"end\" ?hidden=${!hasTrailing}></slot>\n      </wc-item>\n    `;\n  }\n}\n","import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './list.scss';\nimport { ListItem } from './list-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label List\n * @tag wc-list\n * @rawTag list\n *\n * @summary A list container for one or more list items.\n *\n * @example\n * ```html\n * <wc-list>\n *   <wc-list-item>\n *     <wc-icon slot=\"leading\" name=\"inbox\"></wc-icon>\n *     Inbox\n *     <span slot=\"trailing\">24</span>\n *   </wc-list-item>\n * </wc-list>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class List extends LitElement {\n  static styles = [styles];\n\n  static Item = ListItem;\n\n  /**  */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'segmented' =\n    'standard';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'list');\n  }\n\n  render() {\n    const cssClasses = {\n      list: true,\n      [`variant-${this.variant}`]: true,\n    };\n\n    return html`\n      <div class=${classMap(cssClasses)}>\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","ifDefined","styles","property","query"],"mappings":"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"}