@redvars/peacock 3.8.2 → 3.8.3

package/dist/index.js

@@ -17,7 +17,7 @@ export { Ripple } from './ripple.js';
 import './accordion-item.js';
 export { Accordion } from './accordion.js';
 export { Link } from './link.js';
-export { C as ChipSet, a as CircularProgress, D as DatePicker, I as Input, L as LinearProgress, N as NumberField, S as Select, b as SidebarMenu, c as SidebarMenuItem, d as SidebarSubMenu, e as Switch, T as Tag, f as Textarea, g as TimePicker, U as UrlField } from './select-Dwtk0RIU.js';
+export { C as ChipSet, a as CircularProgress, D as DatePicker, I as Input, L as LinearProgress, N as NumberField, S as Select, b as SidebarMenu, c as SidebarMenuItem, d as SidebarSubMenu, e as Switch, T as Tag, f as Textarea, g as TimePicker, U as UrlField } from './select-CspawZ18.js';
 export { Chip } from './chip.js';
 export { Skeleton } from './skeleton.js';
 export { Field } from './field.js';
@@ -34,7 +34,7 @@ export { BreadcrumbItem } from './breadcrumb-item.js';
 export { Menu } from './menu.js';
 export { MenuItem } from './menu-item.js';
 export { SubMenu } from './sub-menu.js';
-export { L as List, a as ListItem } from './list-D6JLh1uh.js';
+export { L as List, a as ListItem } from './list-H0itjRte.js';
 export { Item } from './item.js';
 export { CodeHighlighter } from './code-highlighter.js';
 export { default as CodeEditor } from './code-editor.js';
@@ -46,6 +46,7 @@ export { TabGroup } from './tab-group.js';
 export { TabPanel } from './tab-panel.js';
 export { Tabs } from './tabs.js';
 export { Slider } from './slider.js';
+export { ColorPicker } from './color-picker.js';
 export { ChartDoughnut } from './chart-doughnut.js';
 export { ChartPie } from './chart-pie.js';
 export { ChartBar } from './chart-bar.js';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/item.js

@@ -27,6 +27,7 @@ var css_248z = i`* {
   --item-container-color: transparent;
   --item-height: 3rem;
   --item-multiline-height: 4rem;
+  --item-label-text-color: var(--color-on-surface);
 }
 
 :host {
@@ -44,7 +45,8 @@ var css_248z = i`* {
   padding-block: 0.625rem;
   padding-inline: var(--item-padding-inline, 1rem);
   overflow: hidden;
-  color: var(--item-label-text-color, var(--color-on-surface));
+  color: var(--item-label-text-color);
+  --icon-color: var(--item-label-text-color);
   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;
@@ -125,7 +127,6 @@ var css_248z = i`* {
  * <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>
  *

package/dist/item.js.map

@@ -1 +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]}
+{"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=\"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;;;;;;;;;;;;;;;;;;;;AAoBG;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/{list-D6JLh1uh.js → list-H0itjRte.js}

@@ -1,8 +1,8 @@
 import { i, a as i$1, A, b, _ as __decorate, I as IndividualComponent } from './IndividualComponent-Bdwyrvd6.js';
 import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.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';
@@ -61,6 +61,7 @@ var css_248z = i`* {
   text-decoration: none;
   color: inherit;
   cursor: pointer;
+  outline: none;
 }
 .native-link:link, .native-link:visited, .native-link:hover, .native-link:active {
   text-decoration: none;
@@ -70,7 +71,6 @@ var css_248z = i`* {
 .list-item {
   position: relative;
   width: 100%;
-  cursor: pointer;
   text-align: start;
 }
 .list-item .list-item-content {
@@ -122,6 +122,11 @@ var css_248z = i`* {
   --skeleton-container-shape-end-end: var(--shape-corner-medium);
 }
 
+:host([actionable]:not([disabled]):not([soft-disabled])),
+:host([href]:not([disabled]):not([soft-disabled])) {
+  cursor: pointer;
+}
+
 :host(:not([skeleton])) .skeleton {
   display: none;
 }
@@ -178,6 +183,7 @@ class ListItem extends mixinBaseButton(mixinHyperlink(mixinDelegatesAria(mixinEl
         this.selected = false;
         /** When true, renders the list-item in a loading skeleton state. */
         this.skeleton = false;
+        this.actionable = 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
@@ -211,8 +217,12 @@ class ListItem extends mixinBaseButton(mixinHyperlink(mixinDelegatesAria(mixinEl
     __hasNamedSlot(...names) {
         return names.some(name => Array.from(this.children).some(child => child.getAttribute('slot') === name));
     }
+    isClickable() {
+        return this.actionable || isLink(this);
+    }
     render() {
         const isElementLink = isLink(this);
+        const clickable = this.isClickable();
         const cssClasses = {
             'list-item': true,
             'native-button': !isElementLink,
@@ -220,6 +230,17 @@ class ListItem extends mixinBaseButton(mixinHyperlink(mixinDelegatesAria(mixinEl
         };
         // Needed for closure conformance
         const { ariaLabel } = this;
+        if (!clickable) {
+            return b `
+        <div
+          id="list-item"
+          class=${e(cssClasses)}
+          aria-label="${ariaLabel || A}"
+        >
+          ${this.renderContent(clickable)}
+        </div>
+      `;
+        }
         if (!isElementLink) {
             return b `
         <button
@@ -230,7 +251,7 @@ class ListItem extends mixinBaseButton(mixinHyperlink(mixinDelegatesAria(mixinEl
           ?aria-disabled=${this.softDisabled}
           @click=${this.__dispatchClick}
         >
-          ${this.renderContent()}
+          ${this.renderContent(clickable)}
         </button>
       `;
         }
@@ -240,30 +261,36 @@ class ListItem extends mixinBaseButton(mixinHyperlink(mixinDelegatesAria(mixinEl
         class=${e(cssClasses)}
         href=${this.href}
         target=${this.target}
-        rel=${o(this.rel)}
-        download=${o(this.download)}
+        ?rel=${this.rel}
+        ?download=${this.download}
         tabindex=${this.disabled ? '-1' : '0'}
         aria-disabled=${String(this.disabled || this.softDisabled)}
         @click=${this.__dispatchClick}
       >
-        ${this.renderContent()}
+        ${this.renderContent(clickable)}
       </a>
     `;
     }
-    renderContent() {
+    renderContent(clickable) {
         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>
+      <wc-item class="list-item-content" ?inert=${clickable}>
+        ${clickable
+            ? b `<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> `
+            : null}
 
         <slot name="leading" slot="start" ?hidden=${!hasLeading}></slot>
         <slot name="overline" slot="overline"></slot>
@@ -294,10 +321,14 @@ __decorate([
 __decorate([
     n({ type: Boolean, reflect: true })
 ], ListItem.prototype, "skeleton", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], ListItem.prototype, "actionable", void 0);
 __decorate([
     e$1('#list-item')
 ], ListItem.prototype, "itemElement", void 0);
 
+var List_1;
 /**
  * @label List
  * @tag wc-list
@@ -313,19 +344,159 @@ __decorate([
  *     Inbox
  *     <span slot="trailing">24</span>
  *   </wc-list-item>
+ *    <wc-list-item>
+ *       <wc-avatar slot="leading" name="Shivaji Varma"></wc-avatar>
+ *        Shivaji Varma
+ *       <span slot="supporting-text">Software Engineer</span>
+ *       <span slot="trailing-supporting-text">7</span>
+ *       <wc-icon slot="trailing" name="chevron_right"></wc-icon>
+ *     </wc-list-item>
  * </wc-list>
  * ```
  * @tags display
  */
-let List = class List extends i$1 {
+let List = List_1 = class List extends i$1 {
     constructor() {
         super(...arguments);
         /**  */
         this.variant = 'standard';
+        /** Index of the currently active item within the clickable items list. */
+        this.activeIndex = -1;
+        // ── Handlers ──────────────────────────────────────────────────────────────
+        this._onKeyDown = (event) => {
+            if (!this._isEventFromThisList(event))
+                return;
+            const eventItem = this._clickableItemFromEvent(event);
+            if (eventItem) {
+                this._setActiveItem(eventItem);
+            }
+            switch (event.key) {
+                case 'ArrowDown':
+                    event.preventDefault();
+                    this._setActiveByOffset(1);
+                    break;
+                case 'ArrowUp':
+                    event.preventDefault();
+                    this._setActiveByOffset(-1);
+                    break;
+                case 'Home':
+                    event.preventDefault();
+                    this._setBoundaryActive(0);
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this._setBoundaryActive(Math.max(this._clickableItems().length - 1, 0));
+                    break;
+            }
+        };
+        this._onClick = (event) => {
+            const item = this._clickableItemFromEvent(event);
+            if (!item)
+                return;
+            this._setActiveItem(item);
+        };
+        this._onSlotChange = () => {
+            this._syncRovingTabIndex();
+        };
     }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'list');
+        this.addEventListener('keydown', this._onKeyDown);
+        this.addEventListener('click', this._onClick);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('keydown', this._onKeyDown);
+        this.removeEventListener('click', this._onClick);
+        super.disconnectedCallback();
+    }
+    focus() {
+        const target = this._getActiveItem() ?? this._getFirstClickableItem();
+        target?.focus();
+    }
+    // ── Items ─────────────────────────────────────────────────────────────────
+    get items() {
+        const slot = this.shadowRoot?.querySelector('slot');
+        const elements = slot?.assignedElements({ flatten: true }) ?? [];
+        return elements.filter(el => el instanceof ListItem);
+    }
+    _clickableItems() {
+        return this.items.filter(item => item.isClickable());
+    }
+    // ── Roving tabindex ───────────────────────────────────────────────────────
+    _syncRovingTabIndex() {
+        const allItems = this.items;
+        const clickable = this._clickableItems();
+        for (const item of allItems) {
+            item.tabIndex = -1;
+        }
+        if (!clickable.length) {
+            this.activeIndex = -1;
+            return;
+        }
+        if (this.activeIndex < 0 || this.activeIndex >= clickable.length) {
+            this.activeIndex = 0;
+        }
+        clickable[this.activeIndex].tabIndex = 0;
+    }
+    _setActiveByOffset(offset) {
+        const clickable = this._clickableItems();
+        if (!clickable.length)
+            return;
+        if (this.activeIndex < 0) {
+            this.activeIndex = 0;
+        }
+        else {
+            const count = clickable.length;
+            this.activeIndex = (this.activeIndex + offset + count) % count;
+        }
+        this._syncRovingTabIndex();
+        clickable[this.activeIndex]?.focus();
+    }
+    _setBoundaryActive(index) {
+        const clickable = this._clickableItems();
+        if (!clickable.length)
+            return;
+        this.activeIndex = index;
+        this._syncRovingTabIndex();
+        clickable[this.activeIndex]?.focus();
+    }
+    _getActiveItem() {
+        const clickable = this._clickableItems();
+        if (!clickable.length || this.activeIndex < 0)
+            return null;
+        return clickable[this.activeIndex] ?? null;
+    }
+    _getFirstClickableItem() {
+        return this._clickableItems()[0] ?? null;
+    }
+    // ── Event helpers ─────────────────────────────────────────────────────────
+    _isEventFromThisList(event) {
+        const path = event.composedPath();
+        const sourceList = path.find(target => target instanceof List_1);
+        return sourceList === this;
+    }
+    _clickableItemFromEvent(event) {
+        if (!this._isEventFromThisList(event))
+            return null;
+        const path = event.composedPath();
+        const clickable = this._clickableItems();
+        for (const target of path) {
+            if (target instanceof ListItem) {
+                const owned = clickable.find(item => item === target);
+                if (owned)
+                    return owned;
+            }
+        }
+        return null;
+    }
+    _setActiveItem(item) {
+        const clickable = this._clickableItems();
+        const nextIndex = clickable.indexOf(item);
+        if (nextIndex < 0)
+            return;
+        this.activeIndex = nextIndex;
+        this._syncRovingTabIndex();
     }
     render() {
         const cssClasses = {
@@ -334,7 +505,7 @@ let List = class List extends i$1 {
         };
         return b `
       <div class=${e(cssClasses)}>
-        <slot></slot>
+        <slot @slotchange=${this._onSlotChange}></slot>
       </div>
     `;
     }
@@ -344,9 +515,12 @@ List.Item = ListItem;
 __decorate([
     n({ type: String, reflect: true })
 ], List.prototype, "variant", void 0);
-List = __decorate([
+__decorate([
+    r()
+], List.prototype, "activeIndex", void 0);
+List = List_1 = __decorate([
     IndividualComponent
 ], List);
 
 export { List as L, ListItem as a };
-//# sourceMappingURL=list-D6JLh1uh.js.map
+//# sourceMappingURL=list-H0itjRte.js.map

package/dist/list-H0itjRte.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-H0itjRte.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  @property({ type: Boolean, reflect: true })\n  actionable: 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  isClickable() {\n    return this.actionable || isLink(this);\n  }\n\n  render() {\n    const isElementLink = isLink(this);\n    const clickable = this.isClickable();\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 (!clickable) {\n      return html`\n        <div\n          id=\"list-item\"\n          class=${classMap(cssClasses)}\n          aria-label=\"${ariaLabel || nothing}\"\n        >\n          ${this.renderContent(clickable)}\n        </div>\n      `;\n    }\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(clickable)}\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=${this.rel}\n        ?download=${this.download}\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-disabled=${String(this.disabled || this.softDisabled)}\n        @click=${this.__dispatchClick}\n      >\n        ${this.renderContent(clickable)}\n      </a>\n    `;\n  }\n\n  renderContent(clickable: boolean) {\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\" ?inert=${clickable}>\n        ${clickable\n          ? html`<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\n                class=\"ripple\"\n                for=\"list-item\"\n                slot=\"container\"\n              ></wc-ripple>\n              <wc-skeleton class=\"skeleton\" slot=\"container\"></wc-skeleton> `\n          : null}\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, state } 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-item>\n *       <wc-avatar slot=\"leading\" name=\"Shivaji Varma\"></wc-avatar>\n *        Shivaji Varma\n *       <span slot=\"supporting-text\">Software Engineer</span>\n *       <span slot=\"trailing-supporting-text\">7</span>\n *       <wc-icon slot=\"trailing\" name=\"chevron_right\"></wc-icon>\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  /** Index of the currently active item within the clickable items list. */\n  @state() private activeIndex = -1;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'list');\n    this.addEventListener('keydown', this._onKeyDown);\n    this.addEventListener('click', this._onClick);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('keydown', this._onKeyDown);\n    this.removeEventListener('click', this._onClick);\n    super.disconnectedCallback();\n  }\n\n  override focus() {\n    const target = this._getActiveItem() ?? this._getFirstClickableItem();\n    target?.focus();\n  }\n\n  // ── Items ─────────────────────────────────────────────────────────────────\n\n  get items(): ListItem[] {\n    const slot = this.shadowRoot?.querySelector('slot');\n    const elements = slot?.assignedElements({ flatten: true }) ?? [];\n    return elements.filter(el => el instanceof ListItem) as ListItem[];\n  }\n\n  private _clickableItems() {\n    return this.items.filter(item => item.isClickable());\n  }\n\n  // ── Roving tabindex ───────────────────────────────────────────────────────\n\n  private _syncRovingTabIndex() {\n    const allItems = this.items;\n    const clickable = this._clickableItems();\n\n    for (const item of allItems) {\n      item.tabIndex = -1;\n    }\n\n    if (!clickable.length) {\n      this.activeIndex = -1;\n      return;\n    }\n\n    if (this.activeIndex < 0 || this.activeIndex >= clickable.length) {\n      this.activeIndex = 0;\n    }\n\n    clickable[this.activeIndex].tabIndex = 0;\n  }\n\n  private _setActiveByOffset(offset: 1 | -1) {\n    const clickable = this._clickableItems();\n    if (!clickable.length) return;\n\n    if (this.activeIndex < 0) {\n      this.activeIndex = 0;\n    } else {\n      const count = clickable.length;\n      this.activeIndex = (this.activeIndex + offset + count) % count;\n    }\n\n    this._syncRovingTabIndex();\n    clickable[this.activeIndex]?.focus();\n  }\n\n  private _setBoundaryActive(index: number) {\n    const clickable = this._clickableItems();\n    if (!clickable.length) return;\n\n    this.activeIndex = index;\n    this._syncRovingTabIndex();\n    clickable[this.activeIndex]?.focus();\n  }\n\n  private _getActiveItem() {\n    const clickable = this._clickableItems();\n    if (!clickable.length || this.activeIndex < 0) return null;\n    return clickable[this.activeIndex] ?? null;\n  }\n\n  private _getFirstClickableItem() {\n    return this._clickableItems()[0] ?? null;\n  }\n\n  // ── Event helpers ─────────────────────────────────────────────────────────\n\n  private _isEventFromThisList(event: Event) {\n    const path = event.composedPath();\n    const sourceList = path.find(target => target instanceof List);\n    return sourceList === this;\n  }\n\n  private _clickableItemFromEvent(event: Event) {\n    if (!this._isEventFromThisList(event)) return null;\n    const path = event.composedPath();\n    const clickable = this._clickableItems();\n    for (const target of path) {\n      if (target instanceof ListItem) {\n        const owned = clickable.find(item => item === target);\n        if (owned) return owned;\n      }\n    }\n    return null;\n  }\n\n  private _setActiveItem(item: ListItem) {\n    const clickable = this._clickableItems();\n    const nextIndex = clickable.indexOf(item);\n    if (nextIndex < 0) return;\n    this.activeIndex = nextIndex;\n    this._syncRovingTabIndex();\n  }\n\n  // ── Handlers ──────────────────────────────────────────────────────────────\n\n  private _onKeyDown = (event: KeyboardEvent) => {\n    if (!this._isEventFromThisList(event)) return;\n\n    const eventItem = this._clickableItemFromEvent(event);\n    if (eventItem) {\n      this._setActiveItem(eventItem);\n    }\n\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        this._setActiveByOffset(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        this._setActiveByOffset(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        this._setBoundaryActive(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        this._setBoundaryActive(Math.max(this._clickableItems().length - 1, 0));\n        break;\n      default:\n        break;\n    }\n  };\n\n  private _onClick = (event: Event) => {\n    const item = this._clickableItemFromEvent(event);\n    if (!item) return;\n    this._setActiveItem(item);\n  };\n\n  private _onSlotChange = () => {\n    this._syncRovingTabIndex();\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 @slotchange=${this._onSlotChange}></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","query","state"],"mappings":"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"}

package/dist/list.js

@@ -1,11 +1,11 @@
 import './IndividualComponent-Bdwyrvd6.js';
 import './property-B49QQ8pS.js';
+import './state-DkTK9EGF.js';
 import './class-map-DG7CA1et.js';
-export { L as List } from './list-D6JLh1uh.js';
+export { L as List } from './list-H0itjRte.js';
 import './directive-ZPhl09Yt.js';
 import './query-CHb9Ft_d.js';
 import './base-Cl6v8-BZ.js';
-import './if-defined-BXZpRQ4P.js';
 import './is-link-Dk2OV3PM.js';
 import './dispatch-event-utils-CuEqjlPT.js';
 import './hyperlink-DLvb6MXE.js';

package/dist/loader.js

@@ -13,7 +13,7 @@ import { SegmentedButton } from './segmented-button.js';
 import { SegmentedButtonGroup } from './segmented-button-group.js';
 import { SplitButton } from './split-button.js';
 import { DropdownButton } from './dropdown-button.js';
-import { S as Select, d as SidebarSubMenu, c as SidebarMenuItem, b as SidebarMenu, e as Switch, g as TimePicker, D as DatePicker, f as Textarea, N as NumberField, U as UrlField, I as Input, a as CircularProgress, L as LinearProgress, T as Tag, C as ChipSet } from './select-Dwtk0RIU.js';
+import { S as Select, d as SidebarSubMenu, c as SidebarMenuItem, b as SidebarMenu, e as Switch, g as TimePicker, D as DatePicker, f as Textarea, N as NumberField, U as UrlField, I as Input, a as CircularProgress, L as LinearProgress, T as Tag, C as ChipSet } from './select-CspawZ18.js';
 import { Field } from './field.js';
 import { Checkbox } from './checkbox.js';
 import { Radio } from './radio.js';
@@ -21,7 +21,7 @@ import { Menu } from './menu.js';
 import { MenuItem } from './menu-item.js';
 import { SubMenu } from './sub-menu.js';
 import { Item } from './item.js';
-import { a as ListItem, L as List } from './list-D6JLh1uh.js';
+import { a as ListItem, L as List } from './list-H0itjRte.js';
 import { Accordion } from './accordion.js';
 import { Link } from './link.js';
 import { Chip } from './chip.js';
@@ -41,6 +41,7 @@ import { Tabs } from './tabs.js';
 import { Tab } from './tab.js';
 import { TabPanel } from './tab-panel.js';
 import { Slider } from './slider.js';
+import { ColorPicker } from './color-picker.js';
 import { Table } from './table.js';
 import { Pagination } from './pagination.js';
 import { Card } from './card.js';
@@ -415,6 +416,9 @@ const loaderConfig = {
         'wc-slider': {
             CustomElementClass: Slider,
         },
+        'wc-color-picker': {
+            CustomElementClass: ColorPicker,
+        },
         'wc-table': {
             CustomElementClass: Table,
         },