@redvars/peacock 3.3.3 → 3.5.0

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 style="width:100%" headline="No items found"></wc-empty-state>
  * ```
  */
 export declare class EmptyState extends LitElement {

package/dist/src/fab/fab.d.ts

@@ -0,0 +1,111 @@
+import { LitElement, nothing } from 'lit';
+import { IconProvider } from '../icon/icon.js';
+/**
+ * @label FAB
+ * @tag wc-fab
+ * @rawTag fab
+ *
+ * @summary The FAB (Floating Action Button) represents the primary action on a screen.
+ * @overview
+ * <p>A Floating Action Button (FAB) is a circular button that represents the primary action on a screen. It follows the Material Design 3 specification and supports four color roles and two variants.</p>
+ *
+ * @cssprop --fab-container-color: Background color of the FAB container.
+ * @cssprop --fab-label-text-color: Text and icon color of the FAB label.
+ * @cssprop --fab-container-shape: Corner radius of the FAB. Defaults to var(--shape-corner-large).
+ * @cssprop --fab-container-elevation-level: Elevation level of the FAB. Defaults to 3.
+ *
+ * @fires {MouseEvent} click - Dispatched when the FAB is clicked.
+ *
+ * @example
+ * ```html
+ * <wc-fab name="add"></wc-fab>
+ * ```
+ * @tags controls
+ */
+export declare class Fab extends LitElement {
+    #private;
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Name of the icon to display inside the FAB.
+     */
+    name?: string;
+    /**
+     * Source URL for a custom icon.
+     */
+    src?: string;
+    /**
+     * Icon provider. Defaults to `"material-symbols"`.
+     */
+    provider: IconProvider;
+    /**
+     * Optional label text for the extended FAB variant.
+     * When set, the FAB displays both the icon and a text label.
+     */
+    label?: string;
+    /**
+     * The color role of the FAB.
+     * `"surface"` uses the surface color role.
+     * `"primary"` uses the primary color role.
+     * `"secondary"` uses the secondary color role.
+     * `"tertiary"` uses the tertiary color role.
+     */
+    color: 'surface' | 'primary' | 'secondary' | 'tertiary';
+    /**
+     * The style variant of the FAB.
+     * `"tonal"` uses container colors.
+     * `"filled"` uses solid role colors.
+     */
+    variant: 'tonal' | 'filled';
+    /**
+     * The size of the FAB.
+     * `"sm"` renders a small FAB (40×40dp).
+     * `"md"` renders a standard FAB (56×56dp). This is the default.
+     * `"lg"` renders a large FAB (96×96dp).
+     */
+    size: 'sm' | 'md' | 'lg';
+    /**
+     * If `true`, the FAB is in a lowered (resting) state with reduced elevation.
+     */
+    lowered: boolean;
+    /**
+     * If `true`, the user cannot interact with the FAB.
+     */
+    disabled: boolean;
+    /**
+     * Hyperlink to navigate to on click.
+     */
+    href?: string;
+    /**
+     * Sets or retrieves the window or frame at which to target content.
+     */
+    target: string;
+    /**
+     * Additional ARIA attributes to pass to the inner button/anchor element.
+     */
+    configAria?: {
+        [key: string]: any;
+    };
+    /**
+     * Sets the delay for throttle in milliseconds. Defaults to 200 milliseconds.
+     */
+    throttleDelay: number;
+    /**
+     * Tooltip text shown on hover.
+     */
+    tooltip?: string;
+    isPressed: boolean;
+    readonly fabElement: HTMLElement | null;
+    focus(): void;
+    blur(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    __handlePress: (event: KeyboardEvent | MouseEvent) => void;
+    __isLink(): boolean;
+    __dispatchClickWithThrottle: (event: MouseEvent | KeyboardEvent) => void;
+    __dispatchClick: (event: MouseEvent | KeyboardEvent) => void;
+    __getDisabledReasonID(): string | typeof nothing;
+    render(): import("lit-html").TemplateResult<1>;
+    __renderFabContent(isExtended: boolean): import("lit-html").TemplateResult<1>;
+    __renderTooltip(): typeof nothing | import("lit-html").TemplateResult<1>;
+}

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

@@ -0,0 +1 @@
+export { Fab } from './fab.js';

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,8 @@ 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 { Fab } from './fab/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 +36,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';
@@ -42,5 +43,14 @@ export { Table } from './table/index.js';
 export { Pagination } from './pagination/index.js';
 export { TreeView, TreeNode } from './tree-view/index.js';
 export { Card } from './card/index.js';
+export { Banner } from './banner/index.js';
+export { Notification } from './notification/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';
+export { Search } from './search/index.js';
+export { Toolbar } from './toolbar/index.js';

package/dist/src/link/link.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+declare const Link_base: typeof LitElement & (new (...args: any[]) => import("../__base_element/BaseHyperlink.js").BaseHyperlinkInterface);
 /**
  * @label Link
  * @tag wc-link
@@ -12,16 +13,8 @@ import { LitElement } from 'lit';
  * <wc-link href="#">Link</wc-link>
  * ```
  */
-export declare class Link extends LitElement {
+export declare class Link extends Link_base {
     static styles: import("lit").CSSResultGroup[];
-    /**
-     * Hyperlink to navigate to on click.
-     */
-    href?: string;
-    /**
-     * Sets or retrieves the window or frame at which to target content.
-     */
-    target: '_self' | '_parent' | '_blank' | '_top' | string;
-    tabIndexValue?: number;
     render(): import("lit-html").TemplateResult<1>;
 }
+export {};

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

@@ -22,9 +22,9 @@ type CloseReason = {
  *
  * @example
  * ```html
- * <wc-menu>
+ * <wc-menu preview>
  *   <wc-menu-item>Item 1</wc-menu-item>
- *   <wc-menu-item>Item 2</wc-menu-item>
+ *   <wc-menu-item selected>Item 2</wc-menu-item>
  * </wc-menu>
  * ```
  */
@@ -34,6 +34,7 @@ export declare class Menu extends LitElement {
     open: boolean;
     variant: 'standard' | 'vibrant';
     anchor: string;
+    preview: boolean;
     stayOpenOnOutsideClick: boolean;
     stayOpenOnFocusout: boolean;
     isSubmenu: boolean;
@@ -59,6 +60,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/menu/sub-menu/sub-menu.d.ts

@@ -5,6 +5,7 @@ import { Menu } from '../menu/menu.js';
  * @label Sub Menu
  * @tag wc-sub-menu
  * @rawTag sub-menu
+ * @parentRawTag menu
  * @summary Connects a menu item to a nested menu.
  */
 export declare class SubMenu extends LitElement {

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

@@ -0,0 +1 @@
+export { Notification } from './notification.js';

package/dist/src/notification/notification.d.ts

@@ -0,0 +1,69 @@
+import { LitElement, nothing } from 'lit';
+type NotificationVariant = 'success' | 'error' | 'info' | 'warning';
+/**
+ * @label Notification
+ * @tag wc-notification
+ * @rawTag notification
+ * @summary Notifications communicate contextual status, errors, warnings, and success messages.
+ *
+ * @cssprop --notification-container-color - Surface color for the notification container.
+ * @cssprop --notification-text-color - Label and supporting text color.
+ * @cssprop --notification-leading-icon-color - Leading state icon color.
+ * @cssprop --notification-accent-color - Start border color for status emphasis.
+ * @cssprop --notification-border-radius - Border radius of the notification container.
+ *
+ * @fires {CustomEvent} notification-dismiss - Fired when the notification is dismissed.
+ * @fires {CustomEvent} notification-action-click - Fired when the action button is clicked.
+ *
+ * @example
+ * ```html
+ * <wc-notification variant="success" action="Undo" dismissible>
+ *   <span slot="title">Record saved</span>
+ * </wc-notification>
+ * ```
+ * @tags display, feedback
+ */
+export declare class Notification extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * If true, content and actions are laid out in a single row.
+     */
+    inline: boolean;
+    /**
+     * The visual variant of the notification.
+     */
+    variant: NotificationVariant;
+    /**
+     * Enables a high contrast appearance.
+     */
+    highContrast: boolean;
+    /**
+     * If true, renders a dismiss icon button.
+     */
+    dismissible: boolean;
+    /**
+     * Action label text. When provided, an action button is shown.
+     */
+    action: string;
+    /**
+     * If true, the host controls visibility when dismissed.
+     */
+    managed: boolean;
+    private isHidden;
+    private hasSubtitle;
+    /**
+     * Programmatically reveals the notification.
+     */
+    show(): void;
+    /**
+     * Programmatically dismisses the notification.
+     */
+    dismiss(): void;
+    private get variantIcon();
+    private get variantLabel();
+    private emitActionClick;
+    private hideAndEmitDismiss;
+    private handleSubtitleSlotChange;
+    render(): typeof nothing | import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist/src/pagination/pagination.d.ts

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+import type { PropertyValues } from 'lit';
 /**
  * @label Pagination
  * @tag wc-pagination
@@ -11,7 +12,7 @@ import { LitElement } from 'lit';
  *
  * @example
  * ```html
- * <wc-pagination page="1" page-size="10" total-items="100"></wc-pagination>
+ * <wc-pagination style="width: 100%;" page="1" page-size="10" total-items="100"></wc-pagination>
  * ```
  * @tags navigation, data
  */
@@ -33,6 +34,12 @@ export declare class Pagination extends LitElement {
      * Supported page size options.
      */
     pageSizes: number[];
+    protected willUpdate(changedProperties: PropertyValues<Pagination>): void;
+    private getTotalPages;
+    private setPage;
+    private handlePageSizeChange;
+    private handlePreviousPage;
+    private handleNextPage;
     private dispatchPageEvent;
     render(): 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/search/index.d.ts

@@ -0,0 +1 @@
+export { Search } from './search.js';

package/dist/src/search/search.d.ts

@@ -0,0 +1,76 @@
+import { LitElement } from 'lit';
+/**
+ * @label Search
+ * @tag wc-search
+ * @rawTag search
+ *
+ * @summary A Material 3 search bar for filtering and finding content.
+ * @overview
+ * <p>The search component provides a text input designed for search interactions.
+ * It supports outlined and filled variants, an optional clear button, and leading/trailing icon slots.</p>
+ *
+ * @cssprop --search-container-shape - Border radius of the search bar. Defaults to full (pill shape).
+ * @cssprop --search-container-color - Background color of the search container.
+ * @cssprop --search-input-text-color - Color of the input text.
+ * @cssprop --search-placeholder-color - Color of the placeholder text.
+ * @cssprop --search-icon-color - Color of the leading and trailing icons.
+ * @cssprop --search-outline-color - Border color for the outlined variant.
+ * @cssprop --search-outline-width - Border width for the outlined variant.
+ *
+ * @fires {CustomEvent} input - Dispatched when the search value changes.
+ * @fires {CustomEvent} change - Dispatched when the search input loses focus or Enter is pressed.
+ * @fires {CustomEvent} clear - Dispatched when the clear button is activated.
+ * @fires {CustomEvent} search - Dispatched when the user submits the search (presses Enter).
+ *
+ * @example
+ * ```html
+ * <wc-search placeholder="Search..."></wc-search>
+ * ```
+ * @tags form
+ */
+export declare class Search extends LitElement {
+    static styles: import("lit").CSSResultGroup[];
+    /**
+     * Visual style variant.
+     * Possible values: `"outlined"`, `"filled"`. Defaults to `"filled"`.
+     */
+    variant: 'outlined' | 'filled';
+    /**
+     * Placeholder text shown when the input is empty.
+     */
+    placeholder: string;
+    /**
+     * Current search value.
+     */
+    value: string;
+    /**
+     * Whether the search bar is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Whether a clear button is shown when the input has a value.
+     */
+    clearable: boolean;
+    /**
+     * Size of the search bar.
+     * Possible values: `"sm"`, `"md"`, `"lg"`. Defaults to `"md"`.
+     */
+    size: 'sm' | 'md' | 'lg';
+    private focused;
+    private leadingSlotHasContent;
+    private inputElement?;
+    firstUpdated(): void;
+    /** Focuses the internal input element. */
+    focus(): void;
+    /** Blurs the internal input element. */
+    blur(): void;
+    private __handleInput;
+    private __handleChange;
+    private __handleKeydown;
+    private __handleFocus;
+    private __handleBlur;
+    private __clearValue;
+    private __renderClearButton;
+    private __renderLeadingIcon;
+    render(): import("lit-html").TemplateResult<1>;
+}

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';