@redvars/peacock 3.8.4 → 3.8.5

package/dist/accordion-item.js

@@ -33,6 +33,7 @@ var css_248z = i`* {
 .expansion-panel .header-button {
   position: relative;
   display: flex;
+  flex-direction: row-reverse;
   align-items: center;
   width: 100%;
   min-height: 3rem;
@@ -65,6 +66,10 @@ var css_248z = i`* {
 .expansion-panel .header-button:focus-visible::before {
   opacity: 0.12;
 }
+.expansion-panel .header-content {
+  display: flex;
+  flex: 1;
+}
 .expansion-panel .header-label {
   flex: 1;
   display: flex;
@@ -154,12 +159,9 @@ var css_248z = i`* {
   border-color: color-mix(in srgb, var(--color-outline-variant) 38%, transparent);
 }
 
-:host([toggle-position=before]) .header-button {
-  flex-direction: row-reverse;
+:host-context([leading-toggle]) .header-button {
+  flex-direction: row;
   justify-content: flex-end;
-}
-:host([toggle-position=before]) .header-label {
-  flex: 1;
 }`;
 
 var _AccordionItem_id;
@@ -208,12 +210,6 @@ let AccordionItem = AccordionItem_1 = class AccordionItem extends i$1 {
          * Whether to hide the expand/collapse toggle indicator icon.
          */
         this.hideToggle = false;
-        /**
-         * Position of the toggle icon relative to the panel title.
-         * `'after'` places it at the trailing end (default, matches M3).
-         * `'before'` places it at the leading start.
-         */
-        this.togglePosition = 'after';
         /** True when the `description` slot contains at least one non-empty node. */
         this._hasDescriptionSlot = false;
         /** True when the `heading` slot contains at least one non-empty node. */
@@ -271,35 +267,32 @@ let AccordionItem = AccordionItem_1 = class AccordionItem extends i$1 {
           ?disabled=${this.disabled}
           @click=${this._handleToggle}
         >
-          ${this.togglePosition === 'before'
-            ? this._renderToggleIcon()
-            : A}
-          <span class="header-label">
-            <span part="title" class="panel-title">
-              <slot
-                name="heading"
-                @slotchange=${(e) => AccordionItem_1._onSlotChange(e, v => {
+          ${this._renderToggleIcon()}
+          <div class="header-content">
+            <span class="header-label">
+              <span part="title" class="panel-title">
+                <slot
+                  name="heading"
+                  @slotchange=${(e) => AccordionItem_1._onSlotChange(e, v => {
             this._hasHeadingSlot = v;
         })}
-              ></slot>
-            </span>
-            <span
-              part="description"
-              class="panel-description"
-              ?hidden=${!this._hasDescriptionSlot}
-            >
-              <slot
-                name="description"
-                @slotchange=${(e) => AccordionItem_1._onSlotChange(e, v => {
+                ></slot>
+              </span>
+              <span
+                part="description"
+                class="panel-description"
+                ?hidden=${!this._hasDescriptionSlot}
+              >
+                <slot
+                  name="description"
+                  @slotchange=${(e) => AccordionItem_1._onSlotChange(e, v => {
             this._hasDescriptionSlot = v;
         })}
-              ></slot>
+                ></slot>
+              </span>
             </span>
-          </span>
-          <slot name="header-actions" class="header-actions"></slot>
-          ${this.togglePosition === 'after'
-            ? this._renderToggleIcon()
-            : A}
+            <slot name="header-actions" class="header-actions"></slot>
+          </div>
         </button>
         <div
           id=${`panel-content-${__classPrivateFieldGet(this, _AccordionItem_id, "f")}`}
@@ -327,9 +320,6 @@ __decorate([
 __decorate([
     n({ type: Boolean, reflect: true, attribute: 'hide-toggle' })
 ], AccordionItem.prototype, "hideToggle", void 0);
-__decorate([
-    n({ type: String, reflect: true, attribute: 'toggle-position' })
-], AccordionItem.prototype, "togglePosition", void 0);
 __decorate([
     r()
 ], AccordionItem.prototype, "_hasDescriptionSlot", void 0);

package/dist/accordion-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-item.js","sources":["../../src/accordion/accordion-item.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './accordion-item.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Accordion Item\n * @tag wc-accordion-item\n * @rawTag accordion-item\n * @summary An expansion panel with a header that reveals or hides associated content.\n *\n * @slot - The body content revealed when the panel is expanded.\n * @slot heading - The panel title. Renders as `body-large` text.\n * @slot description - Optional subtitle rendered below the title. Renders as `body-small` text.\n * @slot header-actions - Actions (e.g. icon buttons) placed at the trailing end of the header, before the toggle icon.\n *\n * @part header - The header `<button>` element.\n * @part title - The title text container.\n * @part description - The description text container.\n * @part content - The expandable content region wrapper.\n *\n * @fires {CustomEvent<{ open: boolean }>} accordion-item-toggle - Fired when the panel is expanded or collapsed.\n *\n * @example\n * ```html\n * <wc-accordion-item>\n *   <span slot=\"heading\">Personal information</span>\n *   <span slot=\"description\">Fill in your details</span>\n *   <p>Content goes here.</p>\n * </wc-accordion-item>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class AccordionItem extends LitElement {\n  static styles = [styles];\n\n  #id = crypto.randomUUID();\n\n  /**\n   * Whether the user cannot interact with the panel.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether the panel is expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  /**\n   * Whether to hide the expand/collapse toggle indicator icon.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-toggle' })\n  hideToggle: boolean = false;\n\n  /**\n   * Position of the toggle icon relative to the panel title.\n   * `'after'` places it at the trailing end (default, matches M3).\n   * `'before'` places it at the leading start.\n   */\n  @property({ type: String, reflect: true, attribute: 'toggle-position' })\n  togglePosition: 'before' | 'after' = 'after';\n\n  /** True when the `description` slot contains at least one non-empty node. */\n  @state()\n  private _hasDescriptionSlot = false;\n\n  /** True when the `heading` slot contains at least one non-empty node. */\n  @state()\n  private _hasHeadingSlot = false;\n\n  @query('.header-button')\n  private readonly buttonElement!: HTMLElement | null;\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  private _handleToggle() {\n    if (this.disabled) return;\n    this.open = !this.open;\n    this.dispatchEvent(\n      new CustomEvent('accordion-item-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this.open },\n      }),\n    );\n  }\n\n  private static _onSlotChange(e: Event, setter: (v: boolean) => void) {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    setter(\n      nodes.some(n =>\n        n.nodeType === Node.TEXT_NODE\n          ? (n.textContent?.trim() ?? '') !== ''\n          : true,\n      ),\n    );\n  }\n\n  private _renderToggleIcon() {\n    if (this.hideToggle) return nothing;\n    return html`<wc-icon\n      class=\"toggle-icon\"\n      name=\"keyboard_arrow_down\"\n      aria-hidden=\"true\"\n    ></wc-icon>`;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          'expansion-panel': true,\n          open: this.open,\n          disabled: this.disabled,\n        })}\n      >\n        <button\n          id=${`panel-header-${this.#id}`}\n          part=\"header\"\n          class=\"header-button\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-controls=${`panel-content-${this.#id}`}\n          aria-disabled=${this.disabled}\n          aria-expanded=${this.open}\n          ?disabled=${this.disabled}\n          @click=${this._handleToggle}\n        >\n          ${this.togglePosition === 'before'\n            ? this._renderToggleIcon()\n            : nothing}\n          <span class=\"header-label\">\n            <span part=\"title\" class=\"panel-title\">\n              <slot\n                name=\"heading\"\n                @slotchange=${(e: Event) =>\n                  AccordionItem._onSlotChange(e, v => {\n                    this._hasHeadingSlot = v;\n                  })}\n              ></slot>\n            </span>\n            <span\n              part=\"description\"\n              class=\"panel-description\"\n              ?hidden=${!this._hasDescriptionSlot}\n            >\n              <slot\n                name=\"description\"\n                @slotchange=${(e: Event) =>\n                  AccordionItem._onSlotChange(e, v => {\n                    this._hasDescriptionSlot = v;\n                  })}\n              ></slot>\n            </span>\n          </span>\n          <slot name=\"header-actions\" class=\"header-actions\"></slot>\n          ${this.togglePosition === 'after'\n            ? this._renderToggleIcon()\n            : nothing}\n        </button>\n        <div\n          id=${`panel-content-${this.#id}`}\n          part=\"content\"\n          class=\"panel-content\"\n          role=\"region\"\n          aria-labelledby=${`panel-header-${this.#id}`}\n        >\n          <div class=\"content-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state","query"],"mappings":"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"}
+{"version":3,"file":"accordion-item.js","sources":["../../src/accordion/accordion-item.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './accordion-item.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Accordion Item\n * @tag wc-accordion-item\n * @rawTag accordion-item\n * @summary An expansion panel with a header that reveals or hides associated content.\n *\n * @slot - The body content revealed when the panel is expanded.\n * @slot heading - The panel title. Renders as `body-large` text.\n * @slot description - Optional subtitle rendered below the title. Renders as `body-small` text.\n * @slot header-actions - Actions (e.g. icon buttons) placed at the trailing end of the header, before the toggle icon.\n *\n * @part header - The header `<button>` element.\n * @part title - The title text container.\n * @part description - The description text container.\n * @part content - The expandable content region wrapper.\n *\n * @fires {CustomEvent<{ open: boolean }>} accordion-item-toggle - Fired when the panel is expanded or collapsed.\n *\n * @example\n * ```html\n * <wc-accordion-item>\n *   <span slot=\"heading\">Personal information</span>\n *   <span slot=\"description\">Fill in your details</span>\n *   <p>Content goes here.</p>\n * </wc-accordion-item>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class AccordionItem extends LitElement {\n  static styles = [styles];\n\n  #id = crypto.randomUUID();\n\n  /**\n   * Whether the user cannot interact with the panel.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether the panel is expanded.\n   */\n  @property({ type: Boolean, reflect: true })\n  open: boolean = false;\n\n  /**\n   * Whether to hide the expand/collapse toggle indicator icon.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-toggle' })\n  hideToggle: boolean = false;\n\n  /** True when the `description` slot contains at least one non-empty node. */\n  @state()\n  private _hasDescriptionSlot = false;\n\n  /** True when the `heading` slot contains at least one non-empty node. */\n  @state()\n  private _hasHeadingSlot = false;\n\n  @query('.header-button')\n  private readonly buttonElement!: HTMLElement | null;\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  private _handleToggle() {\n    if (this.disabled) return;\n    this.open = !this.open;\n    this.dispatchEvent(\n      new CustomEvent('accordion-item-toggle', {\n        bubbles: true,\n        composed: true,\n        detail: { open: this.open },\n      }),\n    );\n  }\n\n  private static _onSlotChange(e: Event, setter: (v: boolean) => void) {\n    const slot = e.target as HTMLSlotElement;\n    const nodes = slot.assignedNodes({ flatten: true });\n    setter(\n      nodes.some(n =>\n        n.nodeType === Node.TEXT_NODE\n          ? (n.textContent?.trim() ?? '') !== ''\n          : true,\n      ),\n    );\n  }\n\n  private _renderToggleIcon() {\n    if (this.hideToggle) return nothing;\n    return html`<wc-icon\n      class=\"toggle-icon\"\n      name=\"keyboard_arrow_down\"\n      aria-hidden=\"true\"\n    ></wc-icon>`;\n  }\n\n  render() {\n    return html`\n      <div\n        class=${classMap({\n          'expansion-panel': true,\n          open: this.open,\n          disabled: this.disabled,\n        })}\n      >\n        <button\n          id=${`panel-header-${this.#id}`}\n          part=\"header\"\n          class=\"header-button\"\n          tabindex=${this.disabled ? '-1' : '0'}\n          aria-controls=${`panel-content-${this.#id}`}\n          aria-disabled=${this.disabled}\n          aria-expanded=${this.open}\n          ?disabled=${this.disabled}\n          @click=${this._handleToggle}\n        >\n          ${this._renderToggleIcon()}\n          <div class=\"header-content\">\n            <span class=\"header-label\">\n              <span part=\"title\" class=\"panel-title\">\n                <slot\n                  name=\"heading\"\n                  @slotchange=${(e: Event) =>\n                    AccordionItem._onSlotChange(e, v => {\n                      this._hasHeadingSlot = v;\n                    })}\n                ></slot>\n              </span>\n              <span\n                part=\"description\"\n                class=\"panel-description\"\n                ?hidden=${!this._hasDescriptionSlot}\n              >\n                <slot\n                  name=\"description\"\n                  @slotchange=${(e: Event) =>\n                    AccordionItem._onSlotChange(e, v => {\n                      this._hasDescriptionSlot = v;\n                    })}\n                ></slot>\n              </span>\n            </span>\n            <slot name=\"header-actions\" class=\"header-actions\"></slot>\n          </div>\n        </button>\n        <div\n          id=${`panel-content-${this.#id}`}\n          part=\"content\"\n          class=\"panel-content\"\n          role=\"region\"\n          aria-labelledby=${`panel-header-${this.#id}`}\n        >\n          <div class=\"content-inner\">\n            <slot></slot>\n          </div>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","nothing","html","classMap","styles","property","state","query"],"mappings":"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"}

package/dist/accordion.js

@@ -75,6 +75,11 @@ let Accordion = class Accordion extends i$1 {
          * `'flat'` renders panels without borders or background changes — suitable for use inside cards.
          */
         this.variant = 'default';
+        /**
+         * When `true`, the toggle icon is placed at the leading start of the header.
+         * When `false` (default), the icon is placed at the trailing end.
+         */
+        this.leadingToggle = false;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -149,6 +154,9 @@ __decorate([
 __decorate([
     n({ type: String, reflect: true })
 ], Accordion.prototype, "variant", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'leading-toggle' })
+], Accordion.prototype, "leadingToggle", void 0);
 __decorate([
     o({ selector: 'wc-accordion-item' })
 ], Accordion.prototype, "items", void 0);

package/dist/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","sources":["../../src/accordion/accordion.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport styles from './accordion.scss';\nimport { AccordionItem } from './accordion-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Accordion\n * @tag wc-accordion\n * @rawTag accordion\n * @summary A vertically stacked set of expansion panels.\n *\n * @example\n * ```html\n * <wc-accordion>\n *   <wc-accordion-item>\n *     <span slot=\"heading\">Panel 1</span>\n *     <span slot=\"description\">Summary text</span>\n *     Content\n *   </wc-accordion-item>\n *   <wc-accordion-item>\n *     <span slot=\"heading\">Panel 2</span>\n *     Content\n *   </wc-accordion-item>\n * </wc-accordion>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Accordion extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Whether multiple panels can be expanded simultaneously.\n   * When `false` (default), expanding one panel collapses all others.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * Variant for the accordion.\n   * `'default'` renders panels with a subtle background on expand and dividers between items.\n   * `'flat'` renders panels without borders or background changes — suitable for use inside cards.\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'flat' = 'default';\n\n  @queryAssignedElements({ selector: 'wc-accordion-item' })\n  items!: Array<AccordionItem>;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // @ts-ignore\n    // eslint-disable-next-line wc/require-listener-teardown\n    this.addEventListener('accordion-item-toggle', this._onItemToggle);\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // @ts-ignore\n    this.removeEventListener('accordion-item-toggle', this._onItemToggle);\n    this.removeEventListener('keydown', this._onKeyDown);\n  }\n\n  private _onItemToggle(e: CustomEvent) {\n    const targetItem = e.target as AccordionItem;\n\n    // Ignore events from nested accordions — only handle direct children\n    if (targetItem.parentElement !== this) return;\n\n    if (!this.multiple && targetItem.open) {\n      this.items.forEach(item => {\n        if (item !== targetItem && item.open) {\n          // eslint-disable-next-line no-param-reassign\n          item.open = false;\n        }\n      });\n    }\n  }\n\n  private _onKeyDown(e: KeyboardEvent) {\n    const focusedItemIndex = this.items.findIndex(item => {\n      const root = item.shadowRoot;\n      return root?.activeElement?.classList.contains('header-button');\n    });\n\n    if (focusedItemIndex === -1) return;\n\n    let nextIndex = -1;\n\n    // eslint-disable-next-line default-case\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        nextIndex = (focusedItemIndex + 1) % this.items.length;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        nextIndex =\n          (focusedItemIndex - 1 + this.items.length) % this.items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        nextIndex = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        nextIndex = this.items.length - 1;\n        break;\n    }\n\n    if (nextIndex !== -1) {\n      const itemToFocus = this.items[nextIndex];\n      const button = itemToFocus.shadowRoot?.querySelector(\n        '.header-button',\n      ) as HTMLElement;\n      button?.focus();\n    }\n  }\n\n  render() {\n    return html`<div class=\"accordion\"><slot></slot></div>`;\n  }\n\n  static Item = AccordionItem;\n}\n"],"names":["LitElement","html","styles","property","queryAssignedElements"],"mappings":"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"}
+{"version":3,"file":"accordion.js","sources":["../../src/accordion/accordion.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property, queryAssignedElements } from 'lit/decorators.js';\nimport styles from './accordion.scss';\nimport { AccordionItem } from './accordion-item.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Accordion\n * @tag wc-accordion\n * @rawTag accordion\n * @summary A vertically stacked set of expansion panels.\n *\n * @example\n * ```html\n * <wc-accordion>\n *   <wc-accordion-item>\n *     <span slot=\"heading\">Panel 1</span>\n *     <span slot=\"description\">Summary text</span>\n *     Content\n *   </wc-accordion-item>\n *   <wc-accordion-item>\n *     <span slot=\"heading\">Panel 2</span>\n *     Content\n *   </wc-accordion-item>\n * </wc-accordion>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Accordion extends LitElement {\n  static styles = [styles];\n\n  /**\n   * Whether multiple panels can be expanded simultaneously.\n   * When `false` (default), expanding one panel collapses all others.\n   */\n  @property({ type: Boolean, reflect: true })\n  multiple = false;\n\n  /**\n   * Variant for the accordion.\n   * `'default'` renders panels with a subtle background on expand and dividers between items.\n   * `'flat'` renders panels without borders or background changes — suitable for use inside cards.\n   */\n  @property({ type: String, reflect: true })\n  variant: 'default' | 'flat' = 'default';\n\n  /**\n   * When `true`, the toggle icon is placed at the leading start of the header.\n   * When `false` (default), the icon is placed at the trailing end.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'leading-toggle' })\n  leadingToggle = false;\n\n  @queryAssignedElements({ selector: 'wc-accordion-item' })\n  items!: Array<AccordionItem>;\n\n  connectedCallback() {\n    super.connectedCallback();\n    // @ts-ignore\n    // eslint-disable-next-line wc/require-listener-teardown\n    this.addEventListener('accordion-item-toggle', this._onItemToggle);\n    this.addEventListener('keydown', this._onKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    // @ts-ignore\n    this.removeEventListener('accordion-item-toggle', this._onItemToggle);\n    this.removeEventListener('keydown', this._onKeyDown);\n  }\n\n  private _onItemToggle(e: CustomEvent) {\n    const targetItem = e.target as AccordionItem;\n\n    // Ignore events from nested accordions — only handle direct children\n    if (targetItem.parentElement !== this) return;\n\n    if (!this.multiple && targetItem.open) {\n      this.items.forEach(item => {\n        if (item !== targetItem && item.open) {\n          // eslint-disable-next-line no-param-reassign\n          item.open = false;\n        }\n      });\n    }\n  }\n\n  private _onKeyDown(e: KeyboardEvent) {\n    const focusedItemIndex = this.items.findIndex(item => {\n      const root = item.shadowRoot;\n      return root?.activeElement?.classList.contains('header-button');\n    });\n\n    if (focusedItemIndex === -1) return;\n\n    let nextIndex = -1;\n\n    // eslint-disable-next-line default-case\n    switch (e.key) {\n      case 'ArrowDown':\n        e.preventDefault();\n        nextIndex = (focusedItemIndex + 1) % this.items.length;\n        break;\n      case 'ArrowUp':\n        e.preventDefault();\n        nextIndex =\n          (focusedItemIndex - 1 + this.items.length) % this.items.length;\n        break;\n      case 'Home':\n        e.preventDefault();\n        nextIndex = 0;\n        break;\n      case 'End':\n        e.preventDefault();\n        nextIndex = this.items.length - 1;\n        break;\n    }\n\n    if (nextIndex !== -1) {\n      const itemToFocus = this.items[nextIndex];\n      const button = itemToFocus.shadowRoot?.querySelector(\n        '.header-button',\n      ) as HTMLElement;\n      button?.focus();\n    }\n  }\n\n  render() {\n    return html`<div class=\"accordion\"><slot></slot></div>`;\n  }\n\n  static Item = AccordionItem;\n}\n"],"names":["LitElement","html","styles","property","queryAssignedElements"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;AAqBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;AAAlC,IAAA,WAAA,GAAA;;AAGL;;;AAGG;QAEH,IAAA,CAAA,QAAQ,GAAG,KAAK;AAEhB;;;;AAIG;QAEH,IAAA,CAAA,OAAO,GAAuB,SAAS;AAEvC;;;AAGG;QAEH,IAAA,CAAA,aAAa,GAAG,KAAK;IAiFvB;IA5EE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;;;QAGzB,IAAI,CAAC,gBAAgB,CAAC,uBAAuB,EAAE,IAAI,CAAC,aAAa,CAAC;QAClE,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC;IACnD;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;;QAE5B,IAAI,CAAC,mBAAmB,CAAC,uBAAuB,EAAE,IAAI,CAAC,aAAa,CAAC;QACrE,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,UAAU,CAAC;IACtD;AAEQ,IAAA,aAAa,CAAC,CAAc,EAAA;AAClC,QAAA,MAAM,UAAU,GAAG,CAAC,CAAC,MAAuB;;AAG5C,QAAA,IAAI,UAAU,CAAC,aAAa,KAAK,IAAI;YAAE;QAEvC,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,UAAU,CAAC,IAAI,EAAE;AACrC,YAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,IAAG;gBACxB,IAAI,IAAI,KAAK,UAAU,IAAI,IAAI,CAAC,IAAI,EAAE;;AAEpC,oBAAA,IAAI,CAAC,IAAI,GAAG,KAAK;gBACnB;AACF,YAAA,CAAC,CAAC;QACJ;IACF;AAEQ,IAAA,UAAU,CAAC,CAAgB,EAAA;QACjC,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,IAAG;AACnD,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU;YAC5B,OAAO,IAAI,EAAE,aAAa,EAAE,SAAS,CAAC,QAAQ,CAAC,eAAe,CAAC;AACjE,QAAA,CAAC,CAAC;QAEF,IAAI,gBAAgB,KAAK,EAAE;YAAE;AAE7B,QAAA,IAAI,SAAS,GAAG,EAAE;;AAGlB,QAAA,QAAQ,CAAC,CAAC,GAAG;AACX,YAAA,KAAK,WAAW;gBACd,CAAC,CAAC,cAAc,EAAE;AAClB,gBAAA,SAAS,GAAG,CAAC,gBAAgB,GAAG,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;gBACtD;AACF,YAAA,KAAK,SAAS;gBACZ,CAAC,CAAC,cAAc,EAAE;gBAClB,SAAS;AACP,oBAAA,CAAC,gBAAgB,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM;gBAChE;AACF,YAAA,KAAK,MAAM;gBACT,CAAC,CAAC,cAAc,EAAE;gBAClB,SAAS,GAAG,CAAC;gBACb;AACF,YAAA,KAAK,KAAK;gBACR,CAAC,CAAC,cAAc,EAAE;gBAClB,SAAS,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC;gBACjC;;AAGJ,QAAA,IAAI,SAAS,KAAK,EAAE,EAAE;YACpB,MAAM,WAAW,GAAG,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC;YACzC,MAAM,MAAM,GAAG,WAAW,CAAC,UAAU,EAAE,aAAa,CAClD,gBAAgB,CACF;YAChB,MAAM,EAAE,KAAK,EAAE;QACjB;IACF;IAEA,MAAM,GAAA;QACJ,OAAOC,CAAI,CAAA,CAAA,0CAAA,CAA4C;IACzD;;AApGO,SAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAsGjB,SAAA,CAAA,IAAI,GAAG,aAAH;AA/FX,UAAA,CAAA;IADCC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AACzB,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAQjB,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AACD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAOxC,UAAA,CAAA;AADC,IAAAA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,gBAAgB,EAAE;AACjD,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,eAAA,EAAA,MAAA,CAAA;AAGtB,UAAA,CAAA;AADC,IAAAC,CAAqB,CAAC,EAAE,QAAQ,EAAE,mBAAmB,EAAE;AAC3B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,OAAA,EAAA,MAAA,CAAA;AA1BlB,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CAwGrB;;;;"}

package/dist/button.js

@@ -844,30 +844,30 @@ var css_248z = i`.button {
  * @overview
  * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>
  *
- * @cssprop --button-container-shape: Defines the border radius of the button container shape.
+ * @cssprop --button-container-shape - Defines the border radius of the button container shape.
  *
- * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.
- * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.
- * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.
+ * @cssprop --button-container-shape-start-start - Defines the start position of the button container shape.
+ * @cssprop --button-container-shape-start-end - Defines the end position of the button container shape.
+ * @cssprop --button-container-shape-end-start - Defines the start position of the button container shape.
+ * @cssprop --button-container-shape-end-end - Defines the end position of the button container shape.
  *
  *
- * @cssprop --filled-button-container-color: Color of the filled button container.
- * @cssprop --filled-button-label-text-color: Text color of the filled button label.
+ * @cssprop --filled-button-container-color - Color of the filled button container.
+ * @cssprop --filled-button-label-text-color - Text color of the filled button label.
  *
- * @cssprop --outlined-button-container-color: Color of the outlined button container.
- * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.
+ * @cssprop --outlined-button-container-color - Color of the outlined button container.
+ * @cssprop --outlined-button-label-text-color - Text color of the outlined button label.
  *
- * @cssprop --text-button-label-text-color: Text color of the text button label.
+ * @cssprop --text-button-label-text-color - Text color of the text button label.
  *
- * @cssprop --tonal-button-container-color: Color of the tonal button container.
- * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.
+ * @cssprop --tonal-button-container-color - Color of the tonal button container.
+ * @cssprop --tonal-button-label-text-color - Text color of the tonal button label.
  *
- * @cssprop --elevated-button-container-color: Color of the elevated button container.
- * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.
+ * @cssprop --elevated-button-container-color - Color of the elevated button container.
+ * @cssprop --elevated-button-label-text-color - Text color of the elevated button label.
  *
- * @cssprop --neo-button-container-color: Color of the neo button container.
- * @cssprop --neo-button-label-text-color: Text color of the neo button label.
+ * @cssprop --neo-button-container-color - Color of the neo button container.
+ * @cssprop --neo-button-label-text-color - Text color of the neo button label.
  *
  * @fires {MouseEvent} click - Dispatched when the button is clicked.
  *
@@ -886,7 +886,7 @@ let Button = class Button extends mixinBaseButton(mixinHyperlink(mixinDelegatesA
          * When `true` (default), the icon is placed after the label (trailing).
          * When `false`, the icon is placed before the label (leading).
          */
-        this.trailingIcon = true;
+        this.trailingIcon = false;
         /**
          * Button size.
          * Possible values are `"xs"`, `"sm"`, `"md"`, `"lg"`, `"xl"`. Defaults to `"sm"`.

package/dist/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../src/button/button/button.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 { when } from 'lit/directives/when.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button.scss';\n\nimport type {\n  ButtonSize,\n  ButtonLevel,\n  ButtonShape,\n  ButtonVariant,\n  ButtonColor,\n} from '@/button/ButtonTypes.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nexport type {\n  ButtonSize,\n  ButtonLevel,\n  ButtonShape,\n  ButtonVariant,\n  ButtonColor,\n} from '@/button/ButtonTypes.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape: Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end: Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start: Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end: Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color: Color of the filled button container.\n * @cssprop --filled-button-label-text-color: Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color: Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color: Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color: Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color: Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color: Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color: Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color: Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color: Color of the neo button container.\n * @cssprop --neo-button-label-text-color: Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button extends mixinBaseButton(\n  mixinHyperlink(\n    mixinDelegatesAria(\n      mixinFormSubmitter(\n        mixinFormAssociated(mixinElementInternals(LitElement)),\n      ),\n    ),\n  ),\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 override styles = [styles];\n\n  // ── Properties ───────────────────────────────────────────────────────────\n\n  /**\n   * When `true` (default), the icon is placed after the label (trailing).\n   * When `false`, the icon is placed before the label (leading).\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })\n  trailingIcon = true;\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: ButtonSize = 'sm';\n\n  /**\n   * Level is preset of color and variant. If Level provided it overrides the default color and variant.\n   */\n  @property({ type: String }) level?: ButtonLevel;\n\n  /** Shape of the button container. */\n  @property({ type: String, reflect: true }) shape: ButtonShape = 'square';\n\n  /**\n   * The visual style of the button.\n   *\n   *  Possible variant values:\n   * `\"filled\"` is a filled button.\n   * `\"outlined\"` is an outlined button.\n   * `\"text\"` is a transparent button.\n   * `\"tonal\"` is a light color button.\n   * `\"elevated\"` is elevated button\n   */\n  @property({ reflect: true }) variant: ButtonVariant = 'filled';\n\n  /**\n   * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n   */\n  @property({ reflect: true }) color: ButtonColor = 'primary';\n\n  /** When true, renders the button in a loading skeleton state. */\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  /** When true, the button acts as a toggle. Use with `selected`. */\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  /** When true (and `toggle` is set), the button is in the selected/pressed state. */\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  /** Optional tooltip text displayed on hover. */\n  @property() tooltip?: string;\n\n  // ── Queries ───────────────────────────────────────────────────────────────\n\n  @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Cleanup returned by observerSlotChangesWithCallback for the icon slot. */\n  private __iconSlotCleanup: (() => void) | null = null;\n\n  /** Cleanup returned by observerSlotChangesWithCallback for the label slot. */\n  private __labelSlotCleanup: (() => void) | null = null;\n\n  // ── Constructor ───────────────────────────────────────────────────────────\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n  override disconnectedCallback() {\n    // disconnect slot observers first to avoid callbacks during teardown\n    try {\n      this.__iconSlotCleanup?.();\n    } catch (e) {\n      /* ignore */\n    }\n    try {\n      this.__labelSlotCleanup?.();\n    } catch (e) {\n      /* ignore */\n    }\n\n    super.disconnectedCallback();\n  }\n\n  override firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n    super.firstUpdated(changedProperties);\n    this.__convertTypeToVariantAndColor();\n    // Initialize slot presence tracking for smooth transitions when label/icon are added/removed\n    const iconSlot = this.renderRoot.querySelector(\n      'slot[name=\"icon\"]',\n    ) as HTMLSlotElement | null;\n    const labelSlot = this.renderRoot.querySelector(\n      'slot.label',\n    ) as HTMLSlotElement | null;\n\n    // Use MutationObserver-based helper so we react to content/character changes\n    if (iconSlot) {\n      this.__iconSlotCleanup = observerSlotChangesWithCallback(\n        iconSlot,\n        has => {\n          this.toggleAttribute('has-icon', has);\n        },\n      );\n    }\n\n    if (labelSlot) {\n      this.__labelSlotCleanup = observerSlotChangesWithCallback(\n        labelSlot,\n        has => {\n          this.toggleAttribute('has-label', has);\n        },\n      );\n    }\n  }\n\n  // ── Public methods ────────────────────────────────────────────────────────\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  // ── Private methods ───────────────────────────────────────────────────────\n\n  __convertTypeToVariantAndColor() {\n    if (this.level === 'primary') {\n      this.color = 'primary';\n      this.variant = 'filled';\n    } else if (this.level === 'secondary') {\n      this.color = 'surface';\n      this.variant = 'tonal';\n    } else if (this.level === 'tertiary') {\n      this.color = 'primary';\n      this.variant = 'text';\n    } else if (this.level === 'danger') {\n      this.color = 'danger';\n      this.variant = 'filled';\n    }\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.buttonElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  // ── Render helpers ────────────────────────────────────────────────────────\n\n  renderButtonElement() {\n    const isElementLink = isLink(this);\n\n    const cssClasses: any = {\n      button: true,\n      'native-button': !isElementLink,\n      'native-link': isElementLink,\n      'trailing-icon': this.trailingIcon,\n    };\n\n    // Needed for closure conformance\n    const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n    if (isElementLink) {\n      return html`<a\n        class=${classMap(cssClasses)}\n        id=\"link\"\n        href=${this.href}\n        target=${this.target}\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n      >\n        ${this.renderButtonContent()}\n      </a>`;\n    }\n    return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n      >\n        ${this.renderButtonContent()}\n      </button>\n      ${this.renderTooltip()}`;\n  }\n\n  renderButtonContent() {\n    return html` <slot class=\"icon-slot\" name=\"icon\"></slot>\n      <slot class=\"label\"></slot>\n      <div class=\"touch\"></div>\n\n      ${this.renderDisabledReason(this.softDisabled)}`;\n  }\n\n  renderDisabledReason(softDisabled: boolean) {\n    if (softDisabled)\n      return html`<div\n        id=${DISABLED_REASON_ID}\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  renderTooltip() {\n    if (this.tooltip) {\n      const buttonId = isLink(this) ? 'link' : 'button';\n      return html`<wc-tooltip class=\"tooltip\" for=${buttonId}\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────\n\n  override render() {\n    const buttonId = isLink(this) ? 'link' : 'button';\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=${buttonId}></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      ${when(\n        this.variant === 'neo',\n        () => html`<div class=\"neo-background\"></div>`,\n      )}\n      <div class=\"background\"></div>\n      ${when(\n        this.variant === 'outlined' || this.variant === 'neo',\n        () => html`<div class=\"outline\"></div>`,\n      )}\n      <wc-ripple class=\"ripple\" for=${buttonId}></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      ${this.renderButtonElement()} ${this.renderTooltip()}\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","ifDefined","when","styles","property","query"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../src/button/button/button.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 { when } from 'lit/directives/when.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './button.scss';\n\nimport type {\n  ButtonSize,\n  ButtonLevel,\n  ButtonShape,\n  ButtonVariant,\n  ButtonColor,\n} from '@/button/ButtonTypes.js';\nimport { isLink } from '@/__internal/utils/is-link.js';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\nimport {\n  dispatchActivationClick,\n  isActivationClick,\n} from '@/__internal/utils/dispatch-event-utils.js';\nimport { DISABLED_REASON_ID } from '@/button/ButtonConstants.js';\nimport { mixinDelegatesAria } from '@/__internal/aria/delegate.js';\nimport { ARIAMixinStrict } from '@/__internal/aria/aria.js';\nimport { mixinFormSubmitter } from '@/__internal/mixins/form-submitter.js';\nimport { mixinElementInternals } from '@/__internal/mixins/element-internals.js';\nimport { mixinBaseButton } from '../base-button/base-button.js';\nimport { mixinFormAssociated } from '@/__internal/mixins/form-associated.js';\nimport { mixinHyperlink } from '@/__internal/mixins/hyperlink.js';\nexport type {\n  ButtonSize,\n  ButtonLevel,\n  ButtonShape,\n  ButtonVariant,\n  ButtonColor,\n} from '@/button/ButtonTypes.js';\n\n/**\n * @label Button\n * @tag wc-button\n * @rawTag button\n *\n * @summary Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.\n * @overview\n * <p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>\n *\n * @cssprop --button-container-shape - Defines the border radius of the button container shape.\n *\n * @cssprop --button-container-shape-start-start - Defines the start position of the button container shape.\n * @cssprop --button-container-shape-start-end - Defines the end position of the button container shape.\n * @cssprop --button-container-shape-end-start - Defines the start position of the button container shape.\n * @cssprop --button-container-shape-end-end - Defines the end position of the button container shape.\n *\n *\n * @cssprop --filled-button-container-color - Color of the filled button container.\n * @cssprop --filled-button-label-text-color - Text color of the filled button label.\n *\n * @cssprop --outlined-button-container-color - Color of the outlined button container.\n * @cssprop --outlined-button-label-text-color - Text color of the outlined button label.\n *\n * @cssprop --text-button-label-text-color - Text color of the text button label.\n *\n * @cssprop --tonal-button-container-color - Color of the tonal button container.\n * @cssprop --tonal-button-label-text-color - Text color of the tonal button label.\n *\n * @cssprop --elevated-button-container-color - Color of the elevated button container.\n * @cssprop --elevated-button-label-text-color - Text color of the elevated button label.\n *\n * @cssprop --neo-button-container-color - Color of the neo button container.\n * @cssprop --neo-button-label-text-color - Text color of the neo button label.\n *\n * @fires {MouseEvent} click - Dispatched when the button is clicked.\n *\n * @example\n * ```html\n * <wc-button>Button</wc-button>\n * ```\n * @tags display\n */\n@IndividualComponent\nexport class Button extends mixinBaseButton(\n  mixinHyperlink(\n    mixinDelegatesAria(\n      mixinFormSubmitter(\n        mixinFormAssociated(mixinElementInternals(LitElement)),\n      ),\n    ),\n  ),\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 override styles = [styles];\n\n  // ── Properties ───────────────────────────────────────────────────────────\n\n  /**\n   * When `true` (default), the icon is placed after the label (trailing).\n   * When `false`, the icon is placed before the label (leading).\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'trailing-icon' })\n  trailingIcon = false;\n\n  /**\n   * Button size.\n   * Possible values are `\"xs\"`, `\"sm\"`, `\"md\"`, `\"lg\"`, `\"xl\"`. Defaults to `\"sm\"`.\n   */\n  @property({ reflect: true }) size: ButtonSize = 'sm';\n\n  /**\n   * Level is preset of color and variant. If Level provided it overrides the default color and variant.\n   */\n  @property({ type: String }) level?: ButtonLevel;\n\n  /** Shape of the button container. */\n  @property({ type: String, reflect: true }) shape: ButtonShape = 'square';\n\n  /**\n   * The visual style of the button.\n   *\n   *  Possible variant values:\n   * `\"filled\"` is a filled button.\n   * `\"outlined\"` is an outlined button.\n   * `\"text\"` is a transparent button.\n   * `\"tonal\"` is a light color button.\n   * `\"elevated\"` is elevated button\n   */\n  @property({ reflect: true }) variant: ButtonVariant = 'filled';\n\n  /**\n   * Defines the primary color of the button. This can be set to predefined color names to apply specific color themes.\n   */\n  @property({ reflect: true }) color: ButtonColor = 'primary';\n\n  /** When true, renders the button in a loading skeleton state. */\n  @property({ type: Boolean, reflect: true }) skeleton: boolean = false;\n\n  /** When true, the button acts as a toggle. Use with `selected`. */\n  @property({ type: Boolean, reflect: true }) toggle: boolean = false;\n\n  /** When true (and `toggle` is set), the button is in the selected/pressed state. */\n  @property({ type: Boolean, reflect: true }) selected: boolean = false;\n\n  /** Optional tooltip text displayed on hover. */\n  @property() tooltip?: string;\n\n  // ── Queries ───────────────────────────────────────────────────────────────\n\n  @query('.button') private readonly buttonElement!: HTMLElement | null;\n\n  // ── Private fields ────────────────────────────────────────────────────────\n\n  /** Cleanup returned by observerSlotChangesWithCallback for the icon slot. */\n  private __iconSlotCleanup: (() => void) | null = null;\n\n  /** Cleanup returned by observerSlotChangesWithCallback for the label slot. */\n  private __labelSlotCleanup: (() => void) | null = null;\n\n  // ── Constructor ───────────────────────────────────────────────────────────\n\n  constructor() {\n    super();\n    this.addEventListener('click', this.__dispatchClickWithThrottle);\n  }\n\n  // ── Lifecycle ─────────────────────────────────────────────────────────────\n\n  override disconnectedCallback() {\n    // disconnect slot observers first to avoid callbacks during teardown\n    try {\n      this.__iconSlotCleanup?.();\n    } catch (e) {\n      /* ignore */\n    }\n    try {\n      this.__labelSlotCleanup?.();\n    } catch (e) {\n      /* ignore */\n    }\n\n    super.disconnectedCallback();\n  }\n\n  override firstUpdated(changedProperties: Map<PropertyKey, unknown>) {\n    super.firstUpdated(changedProperties);\n    this.__convertTypeToVariantAndColor();\n    // Initialize slot presence tracking for smooth transitions when label/icon are added/removed\n    const iconSlot = this.renderRoot.querySelector(\n      'slot[name=\"icon\"]',\n    ) as HTMLSlotElement | null;\n    const labelSlot = this.renderRoot.querySelector(\n      'slot.label',\n    ) as HTMLSlotElement | null;\n\n    // Use MutationObserver-based helper so we react to content/character changes\n    if (iconSlot) {\n      this.__iconSlotCleanup = observerSlotChangesWithCallback(\n        iconSlot,\n        has => {\n          this.toggleAttribute('has-icon', has);\n        },\n      );\n    }\n\n    if (labelSlot) {\n      this.__labelSlotCleanup = observerSlotChangesWithCallback(\n        labelSlot,\n        has => {\n          this.toggleAttribute('has-label', has);\n        },\n      );\n    }\n  }\n\n  // ── Public methods ────────────────────────────────────────────────────────\n\n  override focus() {\n    this.buttonElement?.focus();\n  }\n\n  override blur() {\n    this.buttonElement?.blur();\n  }\n\n  // ── Private methods ───────────────────────────────────────────────────────\n\n  __convertTypeToVariantAndColor() {\n    if (this.level === 'primary') {\n      this.color = 'primary';\n      this.variant = 'filled';\n    } else if (this.level === 'secondary') {\n      this.color = 'surface';\n      this.variant = 'tonal';\n    } else if (this.level === 'tertiary') {\n      this.color = 'primary';\n      this.variant = 'text';\n    } else if (this.level === 'danger') {\n      this.color = 'danger';\n      this.variant = 'filled';\n    }\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.buttonElement) {\n      return;\n    }\n\n    this.focus();\n    dispatchActivationClick(this.buttonElement);\n  };\n\n  // ── Render helpers ────────────────────────────────────────────────────────\n\n  renderButtonElement() {\n    const isElementLink = isLink(this);\n\n    const cssClasses: any = {\n      button: true,\n      'native-button': !isElementLink,\n      'native-link': isElementLink,\n      'trailing-icon': this.trailingIcon,\n    };\n\n    // Needed for closure conformance\n    const { ariaLabel, ariaHasPopup, ariaExpanded } = this as ARIAMixinStrict;\n\n    if (isElementLink) {\n      return html`<a\n        class=${classMap(cssClasses)}\n        id=\"link\"\n        href=${this.href}\n        target=${this.target}\n        tabindex=${this.disabled ? '-1' : '0'}\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n      >\n        ${this.renderButtonContent()}\n      </a>`;\n    }\n    return html`<button\n        class=${classMap(cssClasses)}\n        id=\"button\"\n        aria-label=\"${ariaLabel || nothing}\"\n        aria-haspopup=\"${ariaHasPopup || nothing}\"\n        aria-expanded=\"${ariaExpanded || nothing}\"\n        aria-describedby=${ifDefined(\n          this.softDisabled ? DISABLED_REASON_ID : undefined,\n        )}\n        ?aria-disabled=${this.softDisabled}\n        ?disabled=${this.disabled}\n      >\n        ${this.renderButtonContent()}\n      </button>\n      ${this.renderTooltip()}`;\n  }\n\n  renderButtonContent() {\n    return html` <slot class=\"icon-slot\" name=\"icon\"></slot>\n      <slot class=\"label\"></slot>\n      <div class=\"touch\"></div>\n\n      ${this.renderDisabledReason(this.softDisabled)}`;\n  }\n\n  renderDisabledReason(softDisabled: boolean) {\n    if (softDisabled)\n      return html`<div\n        id=${DISABLED_REASON_ID}\n        role=\"tooltip\"\n        aria-label=${this.disabledReason}\n        class=\"screen-reader-only\"\n      >\n        ${this.disabledReason}\n      </div>`;\n    return nothing;\n  }\n\n  renderTooltip() {\n    if (this.tooltip) {\n      const buttonId = isLink(this) ? 'link' : 'button';\n      return html`<wc-tooltip class=\"tooltip\" for=${buttonId}\n        >${this.tooltip}</wc-tooltip\n      >`;\n    }\n    return nothing;\n  }\n\n  // ── Render ────────────────────────────────────────────────────────────────\n\n  override render() {\n    const buttonId = isLink(this) ? 'link' : 'button';\n\n    return html`\n      <wc-focus-ring class=\"focus-ring\" for=${buttonId}></wc-focus-ring>\n      <wc-elevation class=\"elevation\"></wc-elevation>\n      ${when(\n        this.variant === 'neo',\n        () => html`<div class=\"neo-background\"></div>`,\n      )}\n      <div class=\"background\"></div>\n      ${when(\n        this.variant === 'outlined' || this.variant === 'neo',\n        () => html`<div class=\"outline\"></div>`,\n      )}\n      <wc-ripple class=\"ripple\" for=${buttonId}></wc-ripple>\n      <wc-skeleton class=\"skeleton\"></wc-skeleton>\n\n      ${this.renderButtonElement()} ${this.renderTooltip()}\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","ifDefined","when","styles","property","query"],"mappings":"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"}

package/dist/custom-elements-jsdocs.json

@@ -27,6 +27,15 @@
           "default": "'default'",
           "description": "Variant for the accordion.\n`'default'` renders panels with a subtle background on expand and dividers between items.\n`'flat'` renders panels without borders or background changes — suitable for use inside cards.",
           "fieldName": "variant"
+        },
+        {
+          "name": "leading-toggle",
+          "type": {
+            "text": "boolean"
+          },
+          "default": "false",
+          "description": "When `true`, the toggle icon is placed at the leading start of the header.\nWhen `false` (default), the icon is placed at the trailing end.",
+          "fieldName": "leadingToggle"
         }
       ],
       "superclass": {
@@ -485,7 +494,7 @@
     "rawTag": "button",
     "summary": "Buttons help people initiate actions, from sending an email, to sharing a document, to liking a post.",
     "overview": "<p>Buttons are clickable elements that are used to trigger actions. They communicate calls to action to the user and allow users to interact with pages in a variety of ways. Button labels express what action will occur when the user interacts with it.</p>",
-    "cssprop": "--neo-button-label-text-color: Text color of the neo button label.",
+    "cssprop": "--neo-button-label-text-color - Text color of the neo button label.",
     "fires": "click - Dispatched when the button is clicked.",
     "example": "```html\n<wc-button>Button</wc-button>\n```",
     "tags": "display",
@@ -495,67 +504,67 @@
       "cssProperties": [
         {
           "description": "Defines the border radius of the button container shape.",
-          "name": "--button-container-shape:"
+          "name": "--button-container-shape"
         },
         {
           "description": "Defines the start position of the button container shape.",
-          "name": "--button-container-shape-start-start:"
+          "name": "--button-container-shape-start-start"
         },
         {
           "description": "Defines the end position of the button container shape.",
-          "name": "--button-container-shape-start-end:"
+          "name": "--button-container-shape-start-end"
         },
         {
           "description": "Defines the start position of the button container shape.",
-          "name": "--button-container-shape-end-start:"
+          "name": "--button-container-shape-end-start"
         },
         {
           "description": "Defines the end position of the button container shape.",
-          "name": "--button-container-shape-end-end:"
+          "name": "--button-container-shape-end-end"
         },
         {
           "description": "Color of the filled button container.",
-          "name": "--filled-button-container-color:"
+          "name": "--filled-button-container-color"
         },
         {
           "description": "Text color of the filled button label.",
-          "name": "--filled-button-label-text-color:"
+          "name": "--filled-button-label-text-color"
         },
         {
           "description": "Color of the outlined button container.",
-          "name": "--outlined-button-container-color:"
+          "name": "--outlined-button-container-color"
         },
         {
           "description": "Text color of the outlined button label.",
-          "name": "--outlined-button-label-text-color:"
+          "name": "--outlined-button-label-text-color"
         },
         {
           "description": "Text color of the text button label.",
-          "name": "--text-button-label-text-color:"
+          "name": "--text-button-label-text-color"
         },
         {
           "description": "Color of the tonal button container.",
-          "name": "--tonal-button-container-color:"
+          "name": "--tonal-button-container-color"
         },
         {
           "description": "Text color of the tonal button label.",
-          "name": "--tonal-button-label-text-color:"
+          "name": "--tonal-button-label-text-color"
         },
         {
           "description": "Color of the elevated button container.",
-          "name": "--elevated-button-container-color:"
+          "name": "--elevated-button-container-color"
         },
         {
           "description": "Text color of the elevated button label.",
-          "name": "--elevated-button-label-text-color:"
+          "name": "--elevated-button-label-text-color"
         },
         {
           "description": "Color of the neo button container.",
-          "name": "--neo-button-container-color:"
+          "name": "--neo-button-container-color"
         },
         {
           "description": "Text color of the neo button label.",
-          "name": "--neo-button-label-text-color:"
+          "name": "--neo-button-label-text-color"
         }
       ],
       "events": [
@@ -573,7 +582,7 @@
           "type": {
             "text": "boolean"
           },
-          "default": "true",
+          "default": "false",
           "description": "When `true` (default), the icon is placed after the label (trailing).\nWhen `false`, the icon is placed before the label (leading).",
           "fieldName": "trailingIcon"
         },