@redvars/peacock 3.3.3 → 3.4.0

package/dist/side-sheet.js

@@ -0,0 +1,186 @@
+import { a as i, _ as __decorate, I as IndividualComponent, i as i$1, A, b } from './IndividualComponent-DUINtMGK.js';
+import { n } from './property-1psGvXOq.js';
+import { e } from './class-map-3TAnCMAX.js';
+import './directive-Cuw6h7YA.js';
+
+var css_248z = i`* {
+  box-sizing: border-box;
+}
+
+.screen-reader-only {
+  display: none !important;
+}
+
+:host {
+  display: contents;
+  --side-sheet-container-color: var(--color-surface-container-low, #f7f2fa);
+  --side-sheet-scrim-color: rgba(0, 0, 0, 0.32);
+  --side-sheet-shape: var(--shape-corner-extra-large, 28px);
+  --side-sheet-width: 360px;
+  --side-sheet-transition-duration: var(--duration-medium2, 300ms);
+  --side-sheet-transition-easing: var(--easing-standard, cubic-bezier(0.2, 0, 0, 1));
+}
+
+.scrim {
+  inset: 0;
+  position: fixed;
+  background-color: var(--side-sheet-scrim-color);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity var(--side-sheet-transition-duration) var(--side-sheet-transition-easing);
+  z-index: 1000;
+}
+
+.scrim.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.sheet {
+  background-color: var(--side-sheet-container-color);
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  overflow: hidden;
+  position: fixed;
+  top: 0;
+  transition: transform var(--side-sheet-transition-duration) var(--side-sheet-transition-easing);
+  width: var(--side-sheet-width);
+  will-change: transform;
+  z-index: 1001;
+}
+
+.sheet.variant-standard {
+  position: relative;
+  z-index: 1;
+}
+
+/* Position: right */
+.sheet.position-right {
+  border-radius: var(--side-sheet-shape) 0 0 var(--side-sheet-shape);
+  right: 0;
+  transform: translateX(100%);
+}
+
+.sheet.position-right.open {
+  transform: translateX(0);
+}
+
+/* Position: left */
+.sheet.position-left {
+  border-radius: 0 var(--side-sheet-shape) var(--side-sheet-shape) 0;
+  left: 0;
+  transform: translateX(-100%);
+}
+
+.sheet.position-left.open {
+  transform: translateX(0);
+}
+
+.content {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: var(--spacing-300, 1.5rem);
+}`;
+
+/**
+ * @label Side Sheet
+ * @tag wc-side-sheet
+ * @rawTag side-sheet
+ * @summary Side sheets slide in from the edge of the screen to reveal supplemental content. Supports standard and modal variants per Material Design 3.
+ *
+ * @cssprop --side-sheet-container-color - Background color of the sheet container.
+ * @cssprop --side-sheet-scrim-color - Color of the modal scrim overlay.
+ * @cssprop --side-sheet-shape - Corner radius of the leading edge.
+ * @cssprop --side-sheet-width - Width of the side sheet.
+ *
+ * @example
+ * ```html
+ * Side Sheet
+
+ * ```
+ * @tags navigation, overlay
+ */
+let SideSheet = class SideSheet extends i$1 {
+    constructor() {
+        super(...arguments);
+        /** Whether the sheet is visible. */
+        this.open = false;
+        /**
+         * Sheet variant.
+         * - `"standard"`: Coexists with page content; no scrim.
+         * - `"modal"`: Overlays page content with a scrim backdrop.
+         */
+        this.variant = 'modal';
+        /**
+         * Side from which the sheet slides in.
+         * - `"left"`: Sheet opens from the left edge.
+         * - `"right"`: Sheet opens from the right edge.
+         */
+        this.position = 'right';
+    }
+    show() {
+        this.open = true;
+    }
+    hide() {
+        this._close('programmatic');
+    }
+    _close(reason) {
+        if (!this.open)
+            return;
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('side-sheet-close', {
+            detail: { reason },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    _handleScrimClick() {
+        if (this.variant === 'modal') {
+            this._close('scrim');
+        }
+    }
+    render() {
+        return b `
+      ${this.variant === 'modal'
+            ? b `<div
+            class=${e({ scrim: true, visible: this.open })}
+            @click=${this._handleScrimClick}
+          ></div>`
+            : A}
+
+      <div
+        class=${e({
+            sheet: true,
+            open: this.open,
+            [`variant-${this.variant}`]: true,
+            [`position-${this.position}`]: true,
+        })}
+        role="dialog"
+        aria-modal=${this.variant === 'modal' ? 'true' : 'false'}
+        aria-hidden=${!this.open ? 'true' : 'false'}
+      >
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+    }
+};
+SideSheet.styles = [css_248z];
+__decorate([
+    n({ type: Boolean, reflect: true })
+], SideSheet.prototype, "open", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], SideSheet.prototype, "variant", void 0);
+__decorate([
+    n({ type: String, reflect: true })
+], SideSheet.prototype, "position", void 0);
+SideSheet = __decorate([
+    IndividualComponent
+], SideSheet);
+
+export { SideSheet };
+//# sourceMappingURL=side-sheet.js.map

package/dist/side-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"side-sheet.js","sources":["../../src/side-sheet/side-sheet.ts"],"sourcesContent":["import { LitElement, html, nothing } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport IndividualComponent from '../IndividualComponent.js';\nimport styles from './side-sheet.scss';\n\n/**\n * @label Side Sheet\n * @tag wc-side-sheet\n * @rawTag side-sheet\n * @summary Side sheets slide in from the edge of the screen to reveal supplemental content. Supports standard and modal variants per Material Design 3.\n *\n * @cssprop --side-sheet-container-color - Background color of the sheet container.\n * @cssprop --side-sheet-scrim-color - Color of the modal scrim overlay.\n * @cssprop --side-sheet-shape - Corner radius of the leading edge.\n * @cssprop --side-sheet-width - Width of the side sheet.\n *\n * @example\n * ```html\n * Side Sheet\n\n * ```\n * @tags navigation, overlay\n */\n@IndividualComponent\nexport class SideSheet extends LitElement {\n  static styles = [styles];\n\n  /** Whether the sheet is visible. */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Sheet variant.\n   * - `\"standard\"`: Coexists with page content; no scrim.\n   * - `\"modal\"`: Overlays page content with a scrim backdrop.\n   */\n  @property({ type: String, reflect: true }) variant: 'standard' | 'modal' =\n    'modal';\n\n  /**\n   * Side from which the sheet slides in.\n   * - `\"left\"`: Sheet opens from the left edge.\n   * - `\"right\"`: Sheet opens from the right edge.\n   */\n  @property({ type: String, reflect: true }) position: 'left' | 'right' =\n    'right';\n\n  show() {\n    this.open = true;\n  }\n\n  hide() {\n    this._close('programmatic');\n  }\n\n  private _close(reason: string) {\n    if (!this.open) return;\n    this.open = false;\n    this.dispatchEvent(\n      new CustomEvent('side-sheet-close', {\n        detail: { reason },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  private _handleScrimClick() {\n    if (this.variant === 'modal') {\n      this._close('scrim');\n    }\n  }\n\n  render() {\n    return html`\n      ${this.variant === 'modal'\n        ? html`<div\n            class=${classMap({ scrim: true, visible: this.open })}\n            @click=${this._handleScrimClick}\n          ></div>`\n        : nothing}\n\n      <div\n        class=${classMap({\n          sheet: true,\n          open: this.open,\n          [`variant-${this.variant}`]: true,\n          [`position-${this.position}`]: true,\n        })}\n        role=\"dialog\"\n        aria-modal=${this.variant === 'modal' ? 'true' : 'false'}\n        aria-hidden=${!this.open ? 'true' : 'false'}\n      >\n        <div class=\"content\">\n          <slot></slot>\n        </div>\n      </div>\n    `;\n  }\n}\n"],"names":["LitElement","html","classMap","nothing","styles","property"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA;;;;;;;;;;;;;;;;;AAiBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQA,GAAU,CAAA;AAAlC,IAAA,WAAA,GAAA;;;QAIuC,IAAA,CAAA,IAAI,GAAG,KAAK;AAExD;;;;AAIG;QACwC,IAAA,CAAA,OAAO,GAChD,OAAO;AAET;;;;AAIG;QACwC,IAAA,CAAA,QAAQ,GACjD,OAAO;IAsDX;IApDE,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,IAAI,GAAG,IAAI;IAClB;IAEA,IAAI,GAAA;AACF,QAAA,IAAI,CAAC,MAAM,CAAC,cAAc,CAAC;IAC7B;AAEQ,IAAA,MAAM,CAAC,MAAc,EAAA;QAC3B,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE;AAChB,QAAA,IAAI,CAAC,IAAI,GAAG,KAAK;AACjB,QAAA,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,kBAAkB,EAAE;YAClC,MAAM,EAAE,EAAE,MAAM,EAAE;AAClB,YAAA,OAAO,EAAE,IAAI;AACb,YAAA,QAAQ,EAAE,IAAI;AACf,SAAA,CAAC,CACH;IACH;IAEQ,iBAAiB,GAAA;AACvB,QAAA,IAAI,IAAI,CAAC,OAAO,KAAK,OAAO,EAAE;AAC5B,YAAA,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC;QACtB;IACF;IAEA,MAAM,GAAA;AACJ,QAAA,OAAOC,CAAI,CAAA;QACP,IAAI,CAAC,OAAO,KAAK;cACfA,CAAI,CAAA,CAAA;AACM,kBAAA,EAAAC,CAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AAC5C,mBAAA,EAAA,IAAI,CAAC,iBAAiB;AACzB,iBAAA;AACV,cAAEC,CAAO;;;AAGD,cAAA,EAAAD,CAAQ,CAAC;AACf,YAAA,KAAK,EAAE,IAAI;YACX,IAAI,EAAE,IAAI,CAAC,IAAI;AACf,YAAA,CAAC,WAAW,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;AACjC,YAAA,CAAC,YAAY,IAAI,CAAC,QAAQ,CAAA,CAAE,GAAG,IAAI;SACpC,CAAC;;qBAEW,IAAI,CAAC,OAAO,KAAK,OAAO,GAAG,MAAM,GAAG,OAAO;sBAC1C,CAAC,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,OAAO;;;;;;KAM9C;IACH;;AAxEO,SAAA,CAAA,MAAM,GAAG,CAACE,QAAM,CAAC;AAGoB,UAAA,CAAA;IAA3CC,CAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE;AAAe,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,MAAA,EAAA,MAAA,CAAA;AAOd,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,SAAA,EAAA,MAAA,CAAA;AAOiC,UAAA,CAAA;IAA1CA,CAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;AAC/B,CAAA,EAAA,SAAA,CAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA;AApBC,SAAS,GAAA,UAAA,CAAA;IADrB;AACY,CAAA,EAAA,SAAS,CA0ErB;;;;"}

package/dist/src/bottom-sheet/bottom-sheet.d.ts

@@ -0,0 +1,42 @@
+import { LitElement } from 'lit';
+/**
+ * @label Bottom Sheet
+ * @tag wc-bottom-sheet
+ * @rawTag bottom-sheet
+ * @summary Bottom sheets slide up from the bottom of the screen to reveal additional content. Supports standard and modal variants per Material Design 3.
+ *
+ * @cssprop --bottom-sheet-container-color - Background color of the sheet container.
+ * @cssprop --bottom-sheet-scrim-color - Color of the modal scrim overlay.
+ * @cssprop --bottom-sheet-shape - Corner radius of the top edge.
+ * @cssprop --bottom-sheet-max-height - Maximum height of the sheet.
+ *
+ * @example
+ * ```html
+ * Bottom Sheet
+ * ```
+ * @tags navigation, overlay
+ */
+export declare class BottomSheet extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Whether the sheet is visible. */
+    open: boolean;
+    /**
+     * Sheet variant.
+     * - `"standard"`: Coexists with page content; no scrim.
+     * - `"modal"`: Overlays page content with a scrim backdrop.
+     */
+    variant: 'standard' | 'modal';
+    /** Whether to show the drag handle. */
+    showHandle: boolean;
+    private _dragging;
+    private _dragStartY;
+    private _dragOffsetY;
+    show(): void;
+    hide(): void;
+    private _close;
+    private _handleScrimClick;
+    private _handleDragStart;
+    private _handleDragMove;
+    private _handleDragEnd;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/bottom-sheet/index.d.ts

@@ -0,0 +1 @@
+export { BottomSheet } from './bottom-sheet.js';

package/dist/src/button/BaseButton.d.ts

@@ -44,13 +44,14 @@ export declare class BaseButton extends LitElement {
      * Hyperlink to navigate to on click.
      */
     href?: string;
-    configAria?: {
-        [key: string]: any;
-    };
     /**
      * Sets or retrieves the window or frame at which to target content.
      */
     target: string;
+    configAria?: {
+        [key: string]: any;
+    };
+    toggle: boolean;
     selected: boolean;
     /**
      * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.

package/dist/src/button/button/button.d.ts

@@ -50,6 +50,10 @@ export declare class Button extends BaseButton {
      */
     iconAlign: 'start' | 'end';
     private slotHasContent;
+    focus(): void;
+    blur(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
     renderButtonContent(): import("lit-html").TemplateResult<1>;

package/dist/src/button/button-group/button-group.d.ts

@@ -10,9 +10,9 @@ import { IconButton } from '../icon-button/icon-button.js';
 
  * @example
  * ```html
- * <wc-button-group>
- *  <wc-icon-button name="home"></wc-icon-button>
- *  <wc-icon-button name="alarm"></wc-icon-button>
+ * <wc-button-group variant="connected">
+ *  <wc-icon-button name="home" toggle selected></wc-icon-button>
+ *  <wc-icon-button name="alarm" toggle></wc-icon-button>
  * </wc-button-group>
  * ```
  *
@@ -27,5 +27,34 @@ export declare class ButtonGroup extends LitElement {
      * Possible values are `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
      */
     size: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * Layout variant of the button group.
+     * `"standard"` shows buttons with a small gap between them.
+     * `"connected"` places buttons with a 2px gap; in horizontal orientation outer buttons have fully
+     * rounded outer corners and middle buttons keep standard rounded corners. In vertical orientation
+     * all buttons keep their default corner shape.
+     * Defaults to `"standard"`.
+     */
+    variant: 'standard' | 'connected';
+    /**
+     * Orientation of the button group.
+     * `"horizontal"` lays buttons out in a row.
+     * `"vertical"` stacks buttons in a column.
+     * Defaults to `"horizontal"`.
+     */
+    orientation: 'horizontal' | 'vertical';
+    /**
+     * Color applied to all buttons in the group.
+     * Possible values are `"primary"`, `"success"`, `"danger"`, `"warning"`, `"light"`, `"dark"`.
+     */
+    color?: 'primary' | 'success' | 'danger' | 'warning' | 'light' | 'dark';
+    /**
+     * Visual style applied to all buttons in the group.
+     * Possible values are `"filled"`, `"tonal"`, `"outlined"`.
+     */
+    buttonVariant?: 'filled' | 'tonal' | 'outlined';
+    updated(): void;
+    private _getSlottedElements;
+    private _syncChildren;
     render(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/button/icon-button/icon-button.d.ts

@@ -49,6 +49,10 @@ export declare class IconButton extends BaseButton {
     name?: string;
     src?: string;
     provider: IconProvider;
+    focus(): void;
+    blur(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     firstUpdated(): void;
     render(): import("lit-html").TemplateResult<1>;
     renderButtonContent(): import("lit-html").TemplateResult<1>;

package/dist/src/card/card-content.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * @label Card Content
+ * @tag wc-card-content
+ * @rawTag card-content
+ * @parentRawTag
+ *
+ * @cssprop --card-content-padding - Inner padding for the card container. Defaults to 1rem.
+ *
+ * ```
+ */
+export declare class CardContent extends LitElement {
+    static styles: import("lit").CSSResult;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/card/card.d.ts

@@ -1,6 +1,5 @@
-import { LitElement } from 'lit';
+import { LitElement, nothing, PropertyValues } from 'lit';
 type CardVariant = 'elevated' | 'filled' | 'outlined';
-type CardElevation = 0 | 1 | 2 | 3 | 4 | 5;
 /**
  * @label Card
  * @tag wc-card
@@ -19,9 +18,44 @@ type CardElevation = 0 | 1 | 2 | 3 | 4 | 5;
  * ```
  */
 export declare class Card extends LitElement {
+    #private;
     static styles: import("lit").CSSResultGroup[];
     variant: CardVariant;
-    elevation: CardElevation;
+    disabled: boolean;
+    actionable: boolean;
+    /**
+    * If button is disabled, the reason why it is disabled.
+    */
+    disabledReason: string;
+    /**
+     * Hyperlink to navigate to on click.
+     */
+    href?: string;
+    /**
+     * Sets or retrieves the window or frame at which to target content.
+     */
+    target: string;
+    /**
+     * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+     */
+    throttleDelay: number;
+    /**
+     * States
+     */
+    isPressed: boolean;
+    private slotHasContent;
+    readonly cardElement: HTMLElement | null;
+    readonly contentSlot: HTMLSlotElement | null;
+    firstUpdated(): void;
+    updated(changedProperties: PropertyValues<this>): void;
+    __syncSlottedChildrenTabIndex(): void;
+    __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void;
+    __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
+    __isLink(): boolean;
+    __getDisabledReasonID(): string | typeof nothing;
+    __renderDisabledReason(): typeof nothing | import("lit-html").TemplateResult<1>;
+    __handlePress: (event: KeyboardEvent | MouseEvent) => void;
     render(): import("lit-html").TemplateResult<1>;
+    renderCardContent(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/dist/src/card/index.d.ts

@@ -1 +1,2 @@
 export { Card } from './card.js';
+export { CardContent } from './card-content.js';

package/dist/src/container/container.d.ts

@@ -11,7 +11,7 @@ type ContainerSize = 'max' | 'xl' | 'lg' | 'md' | 'sm' | 'full';
  *
  * @example
  * ```html
- * <wc-container size="lg">Content</wc-container>
+ * <wc-container style="width: 80%; border: 1px dotted black;" size="md">Content</wc-container>
  * ```
  */
 export declare class Container extends LitElement {

package/dist/src/empty-state/empty-state.d.ts

@@ -8,7 +8,7 @@ import { LitElement, nothing } from 'lit';
  *
  * @example
  * ```html
- * <wc-empty-state headline="No items found"></wc-empty-state>
+ * <wc-empty-state width="80%" headline="No items found"></wc-empty-state>
  * ```
  */
 export declare class EmptyState extends LitElement {

package/dist/src/focus-ring/focus-ring.d.ts

@@ -13,16 +13,19 @@ import { LitElement } from 'lit';
 export declare class FocusRing extends LitElement {
     static styles: import("lit").CSSResultGroup[];
     visible: boolean;
-    element: string;
+    for: string;
     render(): symbol;
     _control?: HTMLElement;
+    _focusTarget?: HTMLElement;
     get control(): HTMLElement | null;
     set control(control: HTMLElement | null);
+    set forElement(value: HTMLElement | null);
     connectedCallback(): void;
     disconnectedCallback(): void;
     __focusin(): void;
     __focusout(): void;
     __pointerdown(): void;
+    __getFocusTarget(): HTMLElement | undefined;
     attach(): void;
     detach(): void;
 }

package/dist/src/index.d.ts

@@ -5,6 +5,7 @@ export { Divider } from './divider/index.js';
 export { Clock } from './clock/index.js';
 export { Elevation } from './elevation/index.js';
 export { Button, ButtonGroup, IconButton } from './button/index.js';
+export { SegmentedButton, SegmentedButtonGroup } from './segmented-button/index.js';
 export { FocusRing } from './focus-ring/index.js';
 export { Ripple } from './ripple/index.js';
 export { Accordion } from './accordion/index.js';
@@ -34,7 +35,6 @@ export { CodeEditor } from './code-editor/index.js';
 export { Image } from './image/index.js';
 export { Tab, TabGroup, TabPanel, Tabs } from './tabs/index.js';
 export { Slider } from './slider/index.js';
-export { ChartDonut } from './chart-donut/index.js';
 export { ChartDoughnut } from './chart-doughnut/index.js';
 export { ChartPie } from './chart-pie/index.js';
 export { ChartBar, ChartStackedBar } from './chart-bar/index.js';
@@ -44,3 +44,8 @@ export { TreeView, TreeNode } from './tree-view/index.js';
 export { Card } from './card/index.js';
 export { Snackbar } from './snackbar/index.js';
 export { Radio } from './radio/index.js';
+export { BottomSheet } from './bottom-sheet/index.js';
+export { SideSheet } from './side-sheet/index.js';
+export { Select } from './select/index.js';
+export type { SelectOption } from './select/index.js';
+export { SelectOptionElement } from './select/index.js';

package/dist/src/menu/menu/menu.d.ts

@@ -59,6 +59,7 @@ export declare class Menu extends LitElement {
     private _setBoundaryActive;
     private _getActiveItem;
     private _getFirstEnabledItem;
+    private _ownsKeyboardEvent;
     private _onItemActivate;
     private _onItemRequestClose;
     private _onKeyDown;

package/dist/src/menu/menu-item/menu-item.d.ts

@@ -34,7 +34,6 @@ export declare class MenuItem extends LitElement {
     private _handleKeyDown;
     private _handleClick;
     __isLink(): boolean;
-    get focusTarget(): this;
     render(): import("lit-html").TemplateResult<1>;
     renderContent(): import("lit-html").TemplateResult<1>;
 }

package/dist/src/ripple/ripple.d.ts

@@ -10,10 +10,26 @@ import { LitElement, PropertyValues } from 'lit';
  *
  * @example
  * ```html
- * <button style="position: relative;">
+ * <style>
+ * .ripple-surface {
+ *   position: relative;
+ *   display: inline-flex;
+ *   align-items: center;
+ *   justify-content: center;
+ *   width: 220px;
+ *   height: 64px;
+ *   border-radius: 12px;
+ *   background: var(--color-surface-container-high);
+ *   color: var(--color-on-surface);
+ *   overflow: hidden;
+ *   cursor: pointer;
+ *   user-select: none;
+ * }
+ * </style>
+ * <div class="ripple-surface">
  *   <wc-ripple></wc-ripple>
- *   Click me
- * </button>
+ *   Ripple Effect
+ * </div>
  * ```
  * @tags display
  */

package/dist/src/segmented-button/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedButton } from './segmented-button.js';
+export { SegmentedButtonGroup } from './segmented-button-group.js';

package/dist/src/segmented-button/segmented-button-group.d.ts

@@ -0,0 +1,46 @@
+import { LitElement } from 'lit';
+import { SegmentedButton } from './segmented-button.js';
+/**
+ * @label Segmented Button Group
+ * @tag wc-segmented-button-group
+ * @rawTag segmented-button-group
+ * @summary A container for segmented buttons following Material Design 3.
+ * @overview
+ * <p>Segmented buttons help people select options, switch views, or sort elements. They follow the Material Design 3 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
+ */
+export declare class SegmentedButtonGroup extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    static SegmentedButton: typeof SegmentedButton;
+    /**
+     * When true, multiple segments can be selected simultaneously.
+     * Defaults to single-select mode.
+     */
+    multiSelect: boolean;
+    /**
+     * When true, in single-select mode the currently selected segment can be
+     * deselected by clicking it again (allowing an empty selection).
+     * Defaults to `false`.
+     */
+    nullable: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _getSegments;
+    private _onSegmentChange;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/segmented-button/segmented-button.d.ts

@@ -0,0 +1,65 @@
+import { LitElement } from 'lit';
+/**
+ * @label Segmented Button
+ * @tag wc-segmented-button
+ * @rawTag segmented-button
+ * @summary An individual segment within a segmented button group.
+ * @parentRawTag 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
+ */
+export declare class SegmentedButton extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * The value associated with this segment.
+     */
+    value: string;
+    /**
+     * Whether this segment is currently selected.
+     */
+    selected: boolean;
+    /**
+     * If true, the user cannot interact with this segment.
+     */
+    disabled: boolean;
+    /**
+     * Optional icon name to display (uses wc-icon).
+     */
+    icon?: string;
+    private hasFocus;
+    private isActive;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _windowMouseUp;
+    private _mouseDownHandler;
+    private _keyDownHandler;
+    private _clickHandler;
+    private _toggle;
+    private _blurHandler;
+    private _focusHandler;
+    /** Sets focus on the segment. */
+    focus(): void;
+    /** Removes focus from the segment. */
+    blur(): void;
+    render(): import("lit-html").TemplateResult<1>;
+}

package/dist/src/select/index.d.ts

@@ -0,0 +1,3 @@
+export { Select } from './select.js';
+export type { SelectOption } from './select.js';
+export { SelectOptionElement } from './option.js';