@redvars/peacock 3.8.0 → 3.8.2

package/dist/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../node_modules/lit-html/directive-helpers.js","../node_modules/lit-html/directives/live.js","../../src/search/search.ts"],"sourcesContent":["import{_$LH as o}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{I:t}=o,i=o=>o,n=o=>null===o||\"object\"!=typeof o&&\"function\"!=typeof o,e={HTML:1,SVG:2,MATHML:3},l=(o,t)=>void 0===t?void 0!==o?._$litType$:o?._$litType$===t,d=o=>null!=o?._$litType$?.h,c=o=>void 0!==o?._$litDirective$,f=o=>o?._$litDirective$,r=o=>void 0===o.strings,s=()=>document.createComment(\"\"),v=(o,n,e)=>{const l=o._$AA.parentNode,d=void 0===n?o._$AB:n._$AA;if(void 0===e){const i=l.insertBefore(s(),d),n=l.insertBefore(s(),d);e=new t(i,n,o,o.options)}else{const t=e._$AB.nextSibling,n=e._$AM,c=n!==o;if(c){let t;e._$AQ?.(o),e._$AM=o,void 0!==e._$AP&&(t=o._$AU)!==n._$AU&&e._$AP(t)}if(t!==d||c){let o=e._$AA;for(;o!==t;){const t=i(o).nextSibling;i(l).insertBefore(o,d),o=t}}}return e},u=(o,t,i=o)=>(o._$AI(t,i),o),m={},p=(o,t=m)=>o._$AH=t,M=o=>o._$AH,h=o=>{o._$AR(),o._$AA.remove()},j=o=>{o._$AR()};export{e as TemplateResultType,j as clearPart,M as getCommittedValue,f as getDirectiveClass,v as insertPart,d as isCompiledTemplateResult,c as isDirectiveResult,n as isPrimitive,r as isSingleExpression,l as isTemplateResult,h as removePart,u as setChildPartValue,p as setCommittedValue};\n//# sourceMappingURL=directive-helpers.js.map\n","import{noChange as r,nothing as e}from\"../lit-html.js\";import{directive as i,Directive as t,PartType as n}from\"../directive.js\";import{isSingleExpression as o,setCommittedValue as s}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const l=i(class extends t{constructor(r){if(super(r),r.type!==n.PROPERTY&&r.type!==n.ATTRIBUTE&&r.type!==n.BOOLEAN_ATTRIBUTE)throw Error(\"The `live` directive is not allowed on child or event bindings\");if(!o(r))throw Error(\"`live` bindings can only contain a single expression\")}render(r){return r}update(i,[t]){if(t===r||t===e)return t;const o=i.element,l=i.name;if(i.type===n.PROPERTY){if(t===o[l])return r}else if(i.type===n.BOOLEAN_ATTRIBUTE){if(!!t===o.hasAttribute(l))return r}else if(i.type===n.ATTRIBUTE&&o.getAttribute(l)===t+\"\")return r;return s(i),t}});export{l as live};\n//# sourceMappingURL=live.js.map\n","import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './search.scss';\nimport colorStyles from './search-colors.scss';\nimport { observerSlotChangesWithCallback } from '@/__utils/observe-slot-change.js';\n\n/**\n * @label Search\n * @tag wc-search\n * @rawTag search\n *\n * @summary A Material 3 search bar for filtering and finding content.\n * @overview\n * <p>The search component provides a text input designed for search interactions.\n * It supports outlined and filled variants, an optional clear button, and leading/trailing icon slots.</p>\n *\n * @cssprop --search-container-shape - Border radius of the search bar. Defaults to full (pill shape).\n * @cssprop --search-container-color - Background color of the search container.\n * @cssprop --search-input-text-color - Color of the input text.\n * @cssprop --search-placeholder-color - Color of the placeholder text.\n * @cssprop --search-icon-color - Color of the leading and trailing icons.\n * @cssprop --search-outline-color - Border color for the outlined variant.\n * @cssprop --search-outline-width - Border width for the outlined variant.\n *\n * @fires {CustomEvent} input - Dispatched when the search value changes.\n * @fires {CustomEvent} change - Dispatched when the search input loses focus or Enter is pressed.\n * @fires {CustomEvent} clear - Dispatched when the clear button is activated.\n * @fires {CustomEvent} search - Dispatched when the user submits the search (presses Enter).\n *\n * @example\n * ```html\n * <wc-search placeholder=\"Search...\"></wc-search>\n * ```\n * @tags form\n */\n@IndividualComponent\nexport class Search extends LitElement {\n  static styles = [styles, colorStyles];\n\n  /**\n   * Visual style variant.\n   * Possible values: `\"outlined\"`, `\"filled\"`. Defaults to `\"filled\"`.\n   */\n  @property({ type: String, reflect: true })\n  variant: 'outlined' | 'filled' = 'filled';\n\n  /**\n   * Placeholder text shown when the input is empty.\n   */\n  @property({ type: String })\n  placeholder: string = 'Search';\n\n  /**\n   * Current search value.\n   */\n  @property({ type: String })\n  value: string = '';\n\n  /**\n   * Whether the search bar is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether a clear button is shown when the input has a value.\n   */\n  @property({ type: Boolean })\n  clearable: boolean = true;\n\n  /**\n   * Size of the search bar.\n   * Possible values: `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @state()\n  private focused: boolean = false;\n\n  @state()\n  private leadingSlotHasContent: boolean = false;\n\n  @query('.search-input')\n  private inputElement?: HTMLInputElement;\n\n  override firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"leading\"]'),\n      hasContent => {\n        this.leadingSlotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  override async focus() {\n    await Promise.all([\n      customElements.whenDefined('wc-input'),\n      customElements.whenDefined('wc-field'),\n    ]);\n    await this.updateComplete;\n    this.inputElement?.focus();\n  }\n\n  private __handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    // Prevent the native input event from escaping in addition to our API event.\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __handleChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    // Prevent the native change event from escaping in addition to our API event.\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      this.dispatchEvent(\n        new CustomEvent('search', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n    if (event.key === 'Escape') {\n      this.__clearValue();\n    }\n  }\n\n  private __handleFocusChange = (event: FocusEvent) => {\n    this.focused = event.type === 'focus';\n  };\n\n  private __clearValue() {\n    this.value = '';\n    this.inputElement?.focus();\n    this.dispatchEvent(\n      new CustomEvent('clear', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: { value: '' },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __renderClearButton() {\n    if (!this.clearable || !this.value) return nothing;\n\n    return html`\n      <button\n        class=\"clear-button\"\n        aria-label=\"Clear search\"\n        tabindex=\"-1\"\n        @click=${this.__clearValue}\n        ?disabled=${this.disabled}\n      >\n        <wc-icon name=\"close\"></wc-icon>\n      </button>\n    `;\n  }\n\n  private __renderLeadingIcon() {\n    return html`\n      <div class=\"leading-icon ${this.leadingSlotHasContent ? 'has-slot' : ''}\">\n        <slot name=\"leading\">\n          <wc-icon name=\"search\"></wc-icon>\n        </slot>\n      </div>\n    `;\n  }\n\n  override render() {\n    const cssClasses = {\n      search: true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      focused: this.focused,\n      disabled: this.disabled,\n      'has-value': !!this.value,\n    };\n\n    return html`\n      <div class=${classMap(cssClasses)} role=\"search\">\n        <div class=\"background\"></div>\n        <div class=\"outline\"></div>\n\n        ${this.__renderLeadingIcon()}\n\n        <input\n          class=\"search-input\"\n          type=\"search\"\n          role=\"searchbox\"\n          .value=${live(this.value)}\n          placeholder=${this.placeholder}\n          ?disabled=${this.disabled}\n          aria-label=${this.placeholder}\n          @input=${this.__handleInput}\n          @change=${this.__handleChange}\n          @keydown=${this.__handleKeydown}\n          @focus=${this.__handleFocusChange}\n          @blur=${this.__handleFocusChange}\n        />\n\n        <div class=\"trailing-actions\">\n          ${this.__renderClearButton()}\n          <slot name=\"trailing\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["i","t","r","n","o","e","s","LitElement","nothing","html","classMap","live","styles","colorStyles","property","state","query"],"mappings":"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","x_google_ignoreList":[0,1]}
+{"version":3,"file":"search.js","sources":["../node_modules/lit-html/directive-helpers.js","../node_modules/lit-html/directives/live.js","../../src/search/search.ts"],"sourcesContent":["import{_$LH as o}from\"./lit-html.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const{I:t}=o,i=o=>o,n=o=>null===o||\"object\"!=typeof o&&\"function\"!=typeof o,e={HTML:1,SVG:2,MATHML:3},l=(o,t)=>void 0===t?void 0!==o?._$litType$:o?._$litType$===t,d=o=>null!=o?._$litType$?.h,c=o=>void 0!==o?._$litDirective$,f=o=>o?._$litDirective$,r=o=>void 0===o.strings,s=()=>document.createComment(\"\"),v=(o,n,e)=>{const l=o._$AA.parentNode,d=void 0===n?o._$AB:n._$AA;if(void 0===e){const i=l.insertBefore(s(),d),n=l.insertBefore(s(),d);e=new t(i,n,o,o.options)}else{const t=e._$AB.nextSibling,n=e._$AM,c=n!==o;if(c){let t;e._$AQ?.(o),e._$AM=o,void 0!==e._$AP&&(t=o._$AU)!==n._$AU&&e._$AP(t)}if(t!==d||c){let o=e._$AA;for(;o!==t;){const t=i(o).nextSibling;i(l).insertBefore(o,d),o=t}}}return e},u=(o,t,i=o)=>(o._$AI(t,i),o),m={},p=(o,t=m)=>o._$AH=t,M=o=>o._$AH,h=o=>{o._$AR(),o._$AA.remove()},j=o=>{o._$AR()};export{e as TemplateResultType,j as clearPart,M as getCommittedValue,f as getDirectiveClass,v as insertPart,d as isCompiledTemplateResult,c as isDirectiveResult,n as isPrimitive,r as isSingleExpression,l as isTemplateResult,h as removePart,u as setChildPartValue,p as setCommittedValue};\n//# sourceMappingURL=directive-helpers.js.map\n","import{noChange as r,nothing as e}from\"../lit-html.js\";import{directive as i,Directive as t,PartType as n}from\"../directive.js\";import{isSingleExpression as o,setCommittedValue as s}from\"../directive-helpers.js\";\n/**\n * @license\n * Copyright 2020 Google LLC\n * SPDX-License-Identifier: BSD-3-Clause\n */const l=i(class extends t{constructor(r){if(super(r),r.type!==n.PROPERTY&&r.type!==n.ATTRIBUTE&&r.type!==n.BOOLEAN_ATTRIBUTE)throw Error(\"The `live` directive is not allowed on child or event bindings\");if(!o(r))throw Error(\"`live` bindings can only contain a single expression\")}render(r){return r}update(i,[t]){if(t===r||t===e)return t;const o=i.element,l=i.name;if(i.type===n.PROPERTY){if(t===o[l])return r}else if(i.type===n.BOOLEAN_ATTRIBUTE){if(!!t===o.hasAttribute(l))return r}else if(i.type===n.ATTRIBUTE&&o.getAttribute(l)===t+\"\")return r;return s(i),t}});export{l as live};\n//# sourceMappingURL=live.js.map\n","import { LitElement, html, nothing } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport IndividualComponent from '@/IndividualComponent.js';\nimport styles from './search.scss';\nimport colorStyles from './search-colors.scss';\nimport { observerSlotChangesWithCallback } from '@/__internal/utils/observe-slot-change.js';\n\n/**\n * @label Search\n * @tag wc-search\n * @rawTag search\n *\n * @summary A search bar for filtering and finding content.\n * @overview\n * <p>The search component provides a text input designed for search interactions.\n * It supports outlined and filled variants, an optional clear button, and leading/trailing icon slots.</p>\n *\n * @cssprop --search-container-shape - Border radius of the search bar. Defaults to full (pill shape).\n * @cssprop --search-container-color - Background color of the search container.\n * @cssprop --search-input-text-color - Color of the input text.\n * @cssprop --search-placeholder-color - Color of the placeholder text.\n * @cssprop --search-icon-color - Color of the leading and trailing icons.\n * @cssprop --search-outline-color - Border color for the outlined variant.\n * @cssprop --search-outline-width - Border width for the outlined variant.\n *\n * @fires {CustomEvent} input - Dispatched when the search value changes.\n * @fires {CustomEvent} change - Dispatched when the search input loses focus or Enter is pressed.\n * @fires {CustomEvent} clear - Dispatched when the clear button is activated.\n * @fires {CustomEvent} search - Dispatched when the user submits the search (presses Enter).\n *\n * @example\n * ```html\n * <wc-search placeholder=\"Search...\"></wc-search>\n * ```\n * @tags form\n */\n@IndividualComponent\nexport class Search extends LitElement {\n  static styles = [styles, colorStyles];\n\n  /**\n   * Visual style variant.\n   * Possible values: `\"outlined\"`, `\"filled\"`. Defaults to `\"filled\"`.\n   */\n  @property({ type: String, reflect: true })\n  variant: 'outlined' | 'filled' = 'filled';\n\n  /**\n   * Placeholder text shown when the input is empty.\n   */\n  @property({ type: String })\n  placeholder: string = 'Search';\n\n  /**\n   * Current search value.\n   */\n  @property({ type: String })\n  value: string = '';\n\n  /**\n   * Whether the search bar is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Whether a clear button is shown when the input has a value.\n   */\n  @property({ type: Boolean })\n  clearable: boolean = true;\n\n  /**\n   * Size of the search bar.\n   * Possible values: `\"sm\"`, `\"md\"`, `\"lg\"`. Defaults to `\"md\"`.\n   */\n  @property({ type: String, reflect: true })\n  size: 'sm' | 'md' | 'lg' = 'md';\n\n  @state()\n  private focused: boolean = false;\n\n  @state()\n  private leadingSlotHasContent: boolean = false;\n\n  @query('.search-input')\n  private inputElement?: HTMLInputElement;\n\n  override firstUpdated() {\n    observerSlotChangesWithCallback(\n      this.renderRoot.querySelector('slot[name=\"leading\"]'),\n      hasContent => {\n        this.leadingSlotHasContent = hasContent;\n        this.requestUpdate();\n      },\n    );\n  }\n\n  override async focus() {\n    await Promise.all([\n      customElements.whenDefined('wc-input'),\n      customElements.whenDefined('wc-field'),\n    ]);\n    await this.updateComplete;\n    this.inputElement?.focus();\n  }\n\n  private __handleInput(event: InputEvent) {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    // Prevent the native input event from escaping in addition to our API event.\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __handleChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    // Prevent the native change event from escaping in addition to our API event.\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __handleKeydown(event: KeyboardEvent) {\n    if (event.key === 'Enter') {\n      this.dispatchEvent(\n        new CustomEvent('search', {\n          detail: { value: this.value },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n    if (event.key === 'Escape') {\n      this.__clearValue();\n    }\n  }\n\n  private __handleFocusChange = (event: FocusEvent) => {\n    this.focused = event.type === 'focus';\n  };\n\n  private __clearValue() {\n    this.value = '';\n    this.inputElement?.focus();\n    this.dispatchEvent(\n      new CustomEvent('clear', {\n        bubbles: true,\n        composed: true,\n      }),\n    );\n    this.dispatchEvent(\n      new CustomEvent('input', {\n        detail: { value: '' },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private __renderClearButton() {\n    if (!this.clearable || !this.value) return nothing;\n\n    return html`\n      <button\n        class=\"clear-button\"\n        aria-label=\"Clear search\"\n        tabindex=\"-1\"\n        @click=${this.__clearValue}\n        ?disabled=${this.disabled}\n      >\n        <wc-icon name=\"close\"></wc-icon>\n      </button>\n    `;\n  }\n\n  private __renderLeadingIcon() {\n    return html`\n      <div class=\"leading-icon ${this.leadingSlotHasContent ? 'has-slot' : ''}\">\n        <slot name=\"leading\">\n          <wc-icon name=\"search\"></wc-icon>\n        </slot>\n      </div>\n    `;\n  }\n\n  override render() {\n    const cssClasses = {\n      search: true,\n      [`variant-${this.variant}`]: true,\n      [`size-${this.size}`]: true,\n      focused: this.focused,\n      disabled: this.disabled,\n      'has-value': !!this.value,\n    };\n\n    return html`\n      <div class=${classMap(cssClasses)} role=\"search\">\n        <div class=\"background\"></div>\n        <div class=\"outline\"></div>\n\n        ${this.__renderLeadingIcon()}\n\n        <input\n          class=\"search-input\"\n          type=\"search\"\n          role=\"searchbox\"\n          .value=${live(this.value)}\n          placeholder=${this.placeholder}\n          ?disabled=${this.disabled}\n          aria-label=${this.placeholder}\n          @input=${this.__handleInput}\n          @change=${this.__handleChange}\n          @keydown=${this.__handleKeydown}\n          @focus=${this.__handleFocusChange}\n          @blur=${this.__handleFocusChange}\n        />\n\n        <div class=\"trailing-actions\">\n          ${this.__renderClearButton()}\n          <slot name=\"trailing\"></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["i","t","r","n","o","e","s","LitElement","nothing","html","classMap","live","styles","colorStyles","property","state","query"],"mappings":"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","x_google_ignoreList":[0,1]}

package/dist/segmented-button-group.js

@@ -0,0 +1,137 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { SegmentedButton } from './segmented-button.js';
+import './state-DkTK9EGF.js';
+import './class-map-DG7CA1et.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: inline-flex;
+  --_segmented-button-group-shape: var(--shape-corner-full, 9999px);
+}
+
+.segmented-button-group {
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--segmented-button-group-shape, var(--_segmented-button-group-shape));
+  border: 1px solid var(--segmented-button-outline-color, var(--color-outline, #79747e));
+  overflow: hidden;
+  min-width: max-content;
+}
+.segmented-button-group ::slotted(wc-segmented-button) {
+  flex: 1;
+}`;
+
+/**
+ * @label Segmented Button Group
+ * @tag wc-segmented-button-group
+ * @rawTag segmented-button-group
+ * @summary A container for segmented buttons.
+ * @overview
+ * <p>Segmented buttons help people select options, switch views, or sort elements. They follow the specification.</p>
+ * <p>Use <code>multi-select</code> to allow more than one segment to be selected at a time. By default only one segment can be active (single-select).</p>
+ *
+ * @cssprop --segmented-button-group-shape: Border-radius of the group container.
+ *
+ * @fires {CustomEvent} change - Dispatched when the selection changes. Detail contains <code>{ value, values }</code>.
+ *
+ * @example
+ * ```html
+ * <wc-segmented-button-group>
+ *   <wc-segmented-button value="day">Day</wc-segmented-button>
+ *   <wc-segmented-button value="week" selected>Week</wc-segmented-button>
+ *   <wc-segmented-button value="month">Month</wc-segmented-button>
+ * </wc-segmented-button-group>
+ * ```
+ *
+ * @tags controls
+ */
+let SegmentedButtonGroup = class SegmentedButtonGroup extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * When true, multiple segments can be selected simultaneously.
+         * Defaults to single-select mode.
+         */
+        this.multiSelect = false;
+        /**
+         * When true, in single-select mode the currently selected segment can be
+         * deselected by clicking it again (allowing an empty selection).
+         * Defaults to `false`.
+         */
+        this.nullable = false;
+        this._onSegmentChange = (ev) => {
+            ev.stopPropagation();
+            const target = ev.composedPath()[0];
+            const segments = this._getSegments();
+            if (this.multiSelect) {
+                target.selected = !target.selected;
+            }
+            else {
+                if (target.selected && this.nullable) {
+                    target.selected = false;
+                }
+                else {
+                    segments.forEach(seg => {
+                        seg.selected = seg === target;
+                    });
+                }
+            }
+            const selectedValues = segments
+                .filter(s => s.selected)
+                .map(s => s.value || s.textContent?.trim() || '');
+            this.dispatchEvent(new CustomEvent('change', {
+                detail: {
+                    value: selectedValues[0] ?? null,
+                    values: selectedValues,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('segmented-button--change', this._onSegmentChange);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('segmented-button--change', this._onSegmentChange);
+    }
+    _getSegments() {
+        return Array.from(this.querySelectorAll('wc-segmented-button'));
+    }
+    render() {
+        return b `
+      <div class="segmented-button-group" role="group">
+        <slot></slot>
+      </div>
+    `;
+    }
+};
+SegmentedButtonGroup.styles = [css_248z];
+SegmentedButtonGroup.SegmentedButton = SegmentedButton;
+__decorate([
+    n({ type: Boolean, reflect: true, attribute: 'multi-select' })
+], SegmentedButtonGroup.prototype, "multiSelect", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SegmentedButtonGroup.prototype, "nullable", void 0);
+SegmentedButtonGroup = __decorate([
+    IndividualComponent
+], SegmentedButtonGroup);
+
+export { SegmentedButtonGroup };
+//# sourceMappingURL=segmented-button-group.js.map

package/dist/segmented-button-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button-group.js","sources":["../../src/segmented-button/segmented-button-group.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport styles from './segmented-button-group.scss';\nimport { SegmentedButton } from './segmented-button.js';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Segmented Button Group\n * @tag wc-segmented-button-group\n * @rawTag segmented-button-group\n * @summary A container for segmented buttons.\n * @overview\n * <p>Segmented buttons help people select options, switch views, or sort elements. They follow the specification.</p>\n * <p>Use <code>multi-select</code> to allow more than one segment to be selected at a time. By default only one segment can be active (single-select).</p>\n *\n * @cssprop --segmented-button-group-shape: Border-radius of the group container.\n *\n * @fires {CustomEvent} change - Dispatched when the selection changes. Detail contains <code>{ value, values }</code>.\n *\n * @example\n * ```html\n * <wc-segmented-button-group>\n *   <wc-segmented-button value=\"day\">Day</wc-segmented-button>\n *   <wc-segmented-button value=\"week\" selected>Week</wc-segmented-button>\n *   <wc-segmented-button value=\"month\">Month</wc-segmented-button>\n * </wc-segmented-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nexport class SegmentedButtonGroup extends LitElement {\n  static styles = [styles];\n\n  static SegmentedButton = SegmentedButton;\n\n  /**\n   * When true, multiple segments can be selected simultaneously.\n   * Defaults to single-select mode.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'multi-select' })\n  multiSelect: boolean = false;\n\n  /**\n   * When true, in single-select mode the currently selected segment can be\n   * deselected by clicking it again (allowing an empty selection).\n   * Defaults to `false`.\n   */\n  @property({ type: Boolean, reflect: true })\n  nullable: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener(\n      'segmented-button--change',\n      this._onSegmentChange as EventListener,\n    );\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener(\n      'segmented-button--change',\n      this._onSegmentChange as EventListener,\n    );\n  }\n\n  private _getSegments(): SegmentedButton[] {\n    return Array.from(\n      this.querySelectorAll<SegmentedButton>('wc-segmented-button'),\n    );\n  }\n\n  private _onSegmentChange = (ev: CustomEvent) => {\n    ev.stopPropagation();\n    const target = ev.composedPath()[0] as SegmentedButton;\n    const segments = this._getSegments();\n\n    if (this.multiSelect) {\n      target.selected = !target.selected;\n    } else {\n      if (target.selected && this.nullable) {\n        target.selected = false;\n      } else {\n        segments.forEach(seg => {\n          seg.selected = seg === target;\n        });\n      }\n    }\n\n    const selectedValues = segments\n      .filter(s => s.selected)\n      .map(s => s.value || s.textContent?.trim() || '');\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: {\n          value: selectedValues[0] ?? null,\n          values: selectedValues,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  };\n\n  render() {\n    return html`\n      <div class=\"segmented-button-group\" role=\"group\">\n        <slot></slot>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;;;;;;;AAuBG;AAEI,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQA,GAAU,CAAA;AAA7C,IAAA,WAAA,GAAA;;AAKL;;;AAGG;QAEH,IAAA,CAAA,WAAW,GAAY,KAAK;AAE5B;;;;AAIG;QAEH,IAAA,CAAA,QAAQ,GAAY,KAAK;AAwBjB,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,EAAe,KAAI;YAC7C,EAAE,CAAC,eAAe,EAAE;YACpB,MAAM,MAAM,GAAG,EAAE,CAAC,YAAY,EAAE,CAAC,CAAC,CAAoB;AACtD,YAAA,MAAM,QAAQ,GAAG,IAAI,CAAC,YAAY,EAAE;AAEpC,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AACpB,gBAAA,MAAM,CAAC,QAAQ,GAAG,CAAC,MAAM,CAAC,QAAQ;YACpC;iBAAO;gBACL,IAAI,MAAM,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;AACpC,oBAAA,MAAM,CAAC,QAAQ,GAAG,KAAK;gBACzB;qBAAO;AACL,oBAAA,QAAQ,CAAC,OAAO,CAAC,GAAG,IAAG;AACrB,wBAAA,GAAG,CAAC,QAAQ,GAAG,GAAG,KAAK,MAAM;AAC/B,oBAAA,CAAC,CAAC;gBACJ;YACF;YAEA,MAAM,cAAc,GAAG;iBACpB,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ;AACtB,iBAAA,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;AAEnD,YAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;AACxB,gBAAA,MAAM,EAAE;AACN,oBAAA,KAAK,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,IAAI;AAChC,oBAAA,MAAM,EAAE,cAAc;AACvB,iBAAA;AACD,gBAAA,OAAO,EAAE,IAAI;AACb,gBAAA,QAAQ,EAAE,IAAI;AACf,aAAA,CAAC,CACH;AACH,QAAA,CAAC;IASH;IA9DE,iBAAiB,GAAA;QACf,KAAK,CAAC,iBAAiB,EAAE;QACzB,IAAI,CAAC,gBAAgB,CACnB,0BAA0B,EAC1B,IAAI,CAAC,gBAAiC,CACvC;IACH;IAEA,oBAAoB,GAAA;QAClB,KAAK,CAAC,oBAAoB,EAAE;QAC5B,IAAI,CAAC,mBAAmB,CACtB,0BAA0B,EAC1B,IAAI,CAAC,gBAAiC,CACvC;IACH;IAEQ,YAAY,GAAA;QAClB,OAAO,KAAK,CAAC,IAAI,CACf,IAAI,CAAC,gBAAgB,CAAkB,qBAAqB,CAAC,CAC9D;IACH;IAmCA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;;;;KAIV;IACH;;AAhFO,oBAAA,CAAA,MAAM,GAAG,CAACC,QAAM,CAAC;AAEjB,oBAAA,CAAA,eAAe,GAAG,eAAH;AAOtB,UAAA,CAAA;AADC,IAAAC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,cAAc,EAAE;AACxC,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,aAAA,EAAA,MAAA,CAAA;AAQ7B,UAAA,CAAA;IADCA,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAChB,CAAA,EAAA,oBAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AAlBf,oBAAoB,GAAA,UAAA,CAAA;IADhC;AACY,CAAA,EAAA,oBAAoB,CAkFhC;;;;"}

package/dist/segmented-button.js

@@ -0,0 +1,289 @@
+import { i, _ as __decorate, I as IndividualComponent, a as i$1, A, b } from './IndividualComponent-Bdwyrvd6.js';
+import { n } from './property-B49QQ8pS.js';
+import { r } from './state-DkTK9EGF.js';
+import { e } from './class-map-DG7CA1et.js';
+import './directive-ZPhl09Yt.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+[hidden] {
+  display: none !important;
+}
+
+:host {
+  display: contents;
+  --_segmented-button-height: 2.5rem;
+  --_segmented-button-outline-color: var(--color-outline, #79747e);
+  --_segmented-button-selected-container-color: var(--color-secondary-container, #e8def8);
+  --_segmented-button-selected-label-text-color: var(--color-on-secondary-container, #1d192b);
+  --_segmented-button-unselected-label-text-color: var(--color-on-surface, #1c1b1f);
+  --_segmented-button-disabled-opacity: 0.38;
+  --_segmented-button-state-layer-color: var(--color-on-surface, #1c1b1f);
+  --_segmented-button-selected-state-layer-color: var(--color-on-secondary-container, #1d192b);
+}
+
+.segment {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--segmented-button-height, var(--_segmented-button-height));
+  padding: 0 1.5rem;
+  cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  outline: none;
+  user-select: none;
+  -webkit-user-select: none;
+  background: transparent;
+  overflow: hidden;
+  transition: background-color 200ms ease, color 200ms ease;
+}
+.segment .content {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--typography-label-large-font-family) !important;
+  font-size: var(--typography-label-large-font-size) !important;
+  font-weight: var(--typography-label-large-font-weight) !important;
+  line-height: var(--typography-label-large-line-height) !important;
+  letter-spacing: var(--typography-label-large-letter-spacing) !important;
+  color: var(--segmented-button-unselected-label-text-color, var(--_segmented-button-unselected-label-text-color));
+}
+.segment .content .check-icon,
+.segment .content .leading-icon {
+  --icon-size: 1.125rem;
+  --icon-color: currentColor;
+  flex-shrink: 0;
+}
+.segment .content .label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.segment .state-layer {
+  position: absolute;
+  inset: 0;
+  background: var(--_segmented-button-state-layer-color);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 200ms ease;
+}
+.segment {
+  /* right-side divider between segments */
+}
+.segment .segment-outline {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 1px;
+  height: 100%;
+  background: var(--segmented-button-outline-color, var(--_segmented-button-outline-color));
+  pointer-events: none;
+}
+.segment:hover:not(.disabled) .state-layer {
+  opacity: 0.08;
+}
+.segment.has-focus:not(.disabled) .state-layer {
+  opacity: 0.12;
+}
+.segment.active:not(.disabled) .state-layer {
+  opacity: 0.16;
+}
+.segment {
+  /* Selected state */
+}
+.segment.selected {
+  background-color: var(--segmented-button-selected-container-color, var(--_segmented-button-selected-container-color));
+}
+.segment.selected .content {
+  color: var(--segmented-button-selected-label-text-color, var(--_segmented-button-selected-label-text-color));
+}
+.segment.selected .state-layer {
+  background: var(--_segmented-button-selected-state-layer-color);
+}
+.segment {
+  /* Disabled state */
+}
+.segment.disabled {
+  cursor: not-allowed;
+  opacity: var(--segmented-button-disabled-opacity, var(--_segmented-button-disabled-opacity));
+  pointer-events: none;
+}
+
+:host(:last-child) .segment-outline {
+  display: none;
+}`;
+
+/**
+ * @label Segmented Button
+ * @tag wc-segmented-button
+ * @rawTag segmented-button
+ * @summary An individual segment within a segmented button group.
+ * @overview
+ * <p>Segmented buttons help people select options, switch views, or sort elements. They are used within a <code>wc-segmented-button-group</code>.</p>
+ *
+ * @cssprop --segmented-button-height: Height of the segmented button.
+ * @cssprop --segmented-button-selected-container-color: Background color when the segment is selected.
+ * @cssprop --segmented-button-selected-label-text-color: Text color when the segment is selected.
+ * @cssprop --segmented-button-unselected-label-text-color: Text color when the segment is unselected.
+ * @cssprop --segmented-button-outline-color: Outline / border color.
+ * @cssprop --segmented-button-disabled-opacity: Opacity when the segment is disabled.
+ *
+ * @fires {CustomEvent} segmented-button--change - Dispatched when the selected state changes.
+ *
+ * @example
+ * ```html
+ * <wc-segmented-button-group>
+ *   <wc-segmented-button value="day">Day</wc-segmented-button>
+ *   <wc-segmented-button value="week" selected>Week</wc-segmented-button>
+ *   <wc-segmented-button value="month">Month</wc-segmented-button>
+ * </wc-segmented-button-group>
+ * ```
+ *
+ * @tags controls
+ */
+let SegmentedButton = class SegmentedButton extends i$1 {
+    constructor() {
+        super(...arguments);
+        /**
+         * The value associated with this segment.
+         */
+        this.value = '';
+        /**
+         * Whether this segment is currently selected.
+         */
+        this.selected = false;
+        /**
+         * If true, the user cannot interact with this segment.
+         */
+        this.disabled = false;
+        /** True while the segment has keyboard focus. */
+        this.hasFocus = false;
+        /** True while the user is actively pressing the segment. */
+        this.isActive = false;
+        this._windowMouseUp = () => {
+            if (this.isActive) {
+                this.isActive = false;
+            }
+        };
+        this._mouseDownHandler = () => {
+            this.isActive = true;
+        };
+        this._keyDownHandler = (evt) => {
+            if (evt.key === ' ' || evt.key === 'Enter') {
+                evt.preventDefault();
+                this.isActive = true;
+                this._toggle(evt);
+            }
+        };
+        this._clickHandler = (ev) => {
+            this._toggle(ev);
+        };
+        this._blurHandler = (ev) => {
+            this.hasFocus = false;
+            this.dispatchEvent(new CustomEvent('blur', { detail: ev, bubbles: true, composed: true }));
+        };
+        this._focusHandler = (ev) => {
+            this.hasFocus = true;
+            this.dispatchEvent(new CustomEvent('focus', { detail: ev, bubbles: true, composed: true }));
+        };
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        window.addEventListener('mouseup', this._windowMouseUp);
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener('mouseup', this._windowMouseUp);
+    }
+    _toggle(ev) {
+        if (this.disabled)
+            return;
+        this.dispatchEvent(new CustomEvent('segmented-button--change', {
+            detail: {
+                value: this.value || this.textContent?.trim(),
+                selected: !this.selected,
+                originalEvent: ev,
+            },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    /** Sets focus on the segment. */
+    focus() {
+        this.renderRoot.querySelector('.segment')?.focus();
+    }
+    /** Removes focus from the segment. */
+    blur() {
+        this.renderRoot.querySelector('.segment')?.blur();
+    }
+    render() {
+        const cssClasses = {
+            segment: true,
+            selected: this.selected,
+            disabled: this.disabled,
+            'has-focus': this.hasFocus,
+            active: this.isActive,
+            'has-icon': !!this.icon,
+        };
+        return b `
+      <div
+        class=${e(cssClasses)}
+        role="button"
+        tabindex=${this.disabled ? -1 : 0}
+        aria-pressed=${this.selected}
+        aria-disabled=${this.disabled}
+        @click=${this._clickHandler}
+        @mousedown=${this._mouseDownHandler}
+        @keydown=${this._keyDownHandler}
+        @blur=${this._blurHandler}
+        @focus=${this._focusHandler}
+      >
+        <div class="state-layer"></div>
+        <div class="content">
+          ${this.selected
+            ? b `<wc-icon class="check-icon" name="check"></wc-icon>`
+            : this.icon
+                ? b `<wc-icon class="leading-icon" name=${this.icon}></wc-icon>`
+                : A}
+          <span class="label"><slot></slot></span>
+        </div>
+        <div class="segment-outline"></div>
+      </div>
+    `;
+    }
+};
+SegmentedButton.styles = [css_248z];
+__decorate([
+    n({ type: String, reflect: true })
+], SegmentedButton.prototype, "value", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SegmentedButton.prototype, "selected", void 0);
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SegmentedButton.prototype, "disabled", void 0);
+__decorate([
+    n({ type: String })
+], SegmentedButton.prototype, "icon", void 0);
+__decorate([
+    r()
+], SegmentedButton.prototype, "hasFocus", void 0);
+__decorate([
+    r()
+], SegmentedButton.prototype, "isActive", void 0);
+SegmentedButton = __decorate([
+    IndividualComponent
+], SegmentedButton);
+
+export { SegmentedButton };
+//# sourceMappingURL=segmented-button.js.map

package/dist/segmented-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"segmented-button.js","sources":["../../src/segmented-button/segmented-button.ts"],"sourcesContent":["import { html, LitElement, nothing } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport styles from './segmented-button.scss';\nimport IndividualComponent from '@/IndividualComponent.js';\n\n/**\n * @label Segmented Button\n * @tag wc-segmented-button\n * @rawTag segmented-button\n * @summary An individual segment within a segmented button group.\n * @overview\n * <p>Segmented buttons help people select options, switch views, or sort elements. They are used within a <code>wc-segmented-button-group</code>.</p>\n *\n * @cssprop --segmented-button-height: Height of the segmented button.\n * @cssprop --segmented-button-selected-container-color: Background color when the segment is selected.\n * @cssprop --segmented-button-selected-label-text-color: Text color when the segment is selected.\n * @cssprop --segmented-button-unselected-label-text-color: Text color when the segment is unselected.\n * @cssprop --segmented-button-outline-color: Outline / border color.\n * @cssprop --segmented-button-disabled-opacity: Opacity when the segment is disabled.\n *\n * @fires {CustomEvent} segmented-button--change - Dispatched when the selected state changes.\n *\n * @example\n * ```html\n * <wc-segmented-button-group>\n *   <wc-segmented-button value=\"day\">Day</wc-segmented-button>\n *   <wc-segmented-button value=\"week\" selected>Week</wc-segmented-button>\n *   <wc-segmented-button value=\"month\">Month</wc-segmented-button>\n * </wc-segmented-button-group>\n * ```\n *\n * @tags controls\n */\n@IndividualComponent\nexport class SegmentedButton extends LitElement {\n  static styles = [styles];\n\n  /**\n   * The value associated with this segment.\n   */\n  @property({ type: String, reflect: true })\n  value: string = '';\n\n  /**\n   * Whether this segment is currently selected.\n   */\n  @property({ type: Boolean, reflect: true })\n  selected: boolean = false;\n\n  /**\n   * If true, the user cannot interact with this segment.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled: boolean = false;\n\n  /**\n   * Optional icon name to display (uses wc-icon).\n   */\n  @property({ type: String })\n  icon?: string;\n\n  /** True while the segment has keyboard focus. */\n  @state()\n  private hasFocus = false;\n\n  /** True while the user is actively pressing the segment. */\n  @state()\n  private isActive = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('mouseup', this._windowMouseUp);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window.removeEventListener('mouseup', this._windowMouseUp);\n  }\n\n  private _windowMouseUp = () => {\n    if (this.isActive) {\n      this.isActive = false;\n    }\n  };\n\n  private _mouseDownHandler = () => {\n    this.isActive = true;\n  };\n\n  private _keyDownHandler = (evt: KeyboardEvent) => {\n    if (evt.key === ' ' || evt.key === 'Enter') {\n      evt.preventDefault();\n      this.isActive = true;\n      this._toggle(evt);\n    }\n  };\n\n  private _clickHandler = (ev: MouseEvent) => {\n    this._toggle(ev);\n  };\n\n  private _toggle(ev: MouseEvent | KeyboardEvent) {\n    if (this.disabled) return;\n    this.dispatchEvent(\n      new CustomEvent('segmented-button--change', {\n        detail: {\n          value: this.value || this.textContent?.trim(),\n          selected: !this.selected,\n          originalEvent: ev,\n        },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _blurHandler = (ev: FocusEvent) => {\n    this.hasFocus = false;\n    this.dispatchEvent(\n      new CustomEvent('blur', { detail: ev, bubbles: true, composed: true }),\n    );\n  };\n\n  private _focusHandler = (ev: FocusEvent) => {\n    this.hasFocus = true;\n    this.dispatchEvent(\n      new CustomEvent('focus', { detail: ev, bubbles: true, composed: true }),\n    );\n  };\n\n  /** Sets focus on the segment. */\n  focus() {\n    this.renderRoot.querySelector<HTMLElement>('.segment')?.focus();\n  }\n\n  /** Removes focus from the segment. */\n  blur() {\n    this.renderRoot.querySelector<HTMLElement>('.segment')?.blur();\n  }\n\n  render() {\n    const cssClasses = {\n      segment: true,\n      selected: this.selected,\n      disabled: this.disabled,\n      'has-focus': this.hasFocus,\n      active: this.isActive,\n      'has-icon': !!this.icon,\n    };\n\n    return html`\n      <div\n        class=${classMap(cssClasses)}\n        role=\"button\"\n        tabindex=${this.disabled ? -1 : 0}\n        aria-pressed=${this.selected}\n        aria-disabled=${this.disabled}\n        @click=${this._clickHandler}\n        @mousedown=${this._mouseDownHandler}\n        @keydown=${this._keyDownHandler}\n        @blur=${this._blurHandler}\n        @focus=${this._focusHandler}\n      >\n        <div class=\"state-layer\"></div>\n        <div class=\"content\">\n          ${this.selected\n            ? html`<wc-icon class=\"check-icon\" name=\"check\"></wc-icon>`\n            : this.icon\n              ? html`<wc-icon class=\"leading-icon\" name=${this.icon}></wc-icon>`\n              : nothing}\n          <span class=\"label\"><slot></slot></span>\n        </div>\n        <div class=\"segment-outline\"></div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property","state"],"mappings":"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"}