@warp-ds/elements 2.10.0-next.14 → 2.10.0-next.17

package/dist/index.d.ts

@@ -37,6 +37,8 @@ import type {
 import type { WarpSelect } from "./packages/select/select.ts";
 import type { WarpSliderThumb } from "./packages/slider-thumb/slider-thumb.ts";
 import type { WarpSlider } from "./packages/slider/slider.ts";
+import type { WarpSnackbarItem } from "./packages/snackbar-item/snackbar-item.ts";
+import type { WarpSnackbar } from "./packages/snackbar/snackbar.ts";
 import type { WarpStep } from "./packages/step/step.ts";
 import type { WarpStepIndicator } from "./packages/step-indicator/step-indicator.ts";
 import type { WarpSwitch } from "./packages/switch/switch.ts";
@@ -2000,6 +2002,38 @@ Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the
   textContent?: string | number;
 };
 
+export type WarpSnackbarItemProps = {
+  /** The placement of the action and close buttons. */
+  "action-placement"?: WarpSnackbarItem["actionPlacement"];
+  /** The placement of the action and close buttons. */
+  actionPlacement?: WarpSnackbarItem["actionPlacement"];
+  /** How long the message should stay in the document before removing itself. */
+  duration?: WarpSnackbarItem["duration"];
+};
+
+export type WarpSnackbarItemSolidJsProps = {
+  /** The placement of the action and close buttons. */
+  "attr:action-placement"?: WarpSnackbarItem["actionPlacement"];
+  /** The placement of the action and close buttons. */
+  "prop:actionPlacement"?: WarpSnackbarItem["actionPlacement"];
+  /** How long the message should stay in the document before removing itself. */
+  "prop:duration"?: WarpSnackbarItem["duration"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
+export type WarpSnackbarProps = {};
+
+export type WarpSnackbarSolidJsProps = {
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type WarpStepProps = {
   /** Whether this step is active.
 
@@ -2637,7 +2671,18 @@ export type CustomElements = {
   >;
 
   /**
+   * Checkboxes allow users to select multiple options from a list of choices.
+   *
+   * Use with `w-checkbox`.
    *
+   * ## Architecture Note
+   * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
+   * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
+   * HTML best practices. This inconsistency exists for historical reasons and may be addressed
+   * in a future major version to align both on the more semantic approach.
+   *
+   * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
+   * backwards compatibility implications (CSS selectors, etc.).
    *
    * ## Attributes & Properties
    *
@@ -3004,7 +3049,7 @@ export type CustomElements = {
    * Areas where markup can be added to the component.
    *
    * - `label`: Alternative to the `label` attribute should you need custom HTML.
-   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
+   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).
    */
   "w-radio-group": Partial<
     WarpRadioGroupProps & BaseProps<WarpRadioGroup> & BaseEvents
@@ -3114,6 +3159,112 @@ export type CustomElements = {
    */
   "w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
 
+  /**
+   * An item to show in a `w-snackbar`.
+   *
+   * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `action-placement`/`actionPlacement`: The placement of the action and close buttons.
+   * - `duration`: How long the message should stay in the document before removing itself.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `default`: the snackbar message.
+   * - `icon`: icon preceeding the message.
+   * - `action`: action following the message.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `close() => void`: Remove the snackbar item from the document.
+   *
+   * Moves focus to the last focused element outside of the snackbar item, if available.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-snackbar-item-radius`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-max-width`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-min-width`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-padding`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-bg`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-bg-active`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-bg-hover`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-color`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-color-active`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-color-hover`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-box-shadow`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `item`: the container wrapping the message, icon and actions.
+   * - `icon`: the icon for the variant.
+   * - `message`: the default slot, body of the snackbar item.
+   * - `action`: close and action button.
+   */
+  "w-snackbar-item": Partial<
+    WarpSnackbarItemProps & BaseProps<WarpSnackbarItem> & BaseEvents
+  >;
+
+  /**
+   * A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
+   *
+   * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `default`: `w-snackbar-item` gets placed inside the default slot by the `create` function.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `create(message: string, options: CreateSnackbarOptions = {}) => void`: Creates a snackbar item and immediately adds it to the snackbar.
+   *
+   * By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
+   *
+   * If you include an `action` in the options the default `duration` is
+   * set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
+   *
+   * A `duration` of 10 seconds or longer forces the close button to be visible.
+   *
+   * The default `variant` is `neutral` which does not have an icon.
+   *
+   * Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-snackbar-container-gap`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-bottom`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-left`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-right`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-top`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-z-index`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `container`: the live region that positions messages on the screen.
+   */
+  "w-snackbar": Partial<
+    WarpSnackbarProps & BaseProps<WarpSnackbar> & BaseEvents
+  >;
+
   /**
    * Individual step component that shows a single step in a process
    *
@@ -3323,6 +3474,8 @@ type CustomElementInstances = {
   "w-select": WarpSelect;
   "w-slider-thumb": WarpSliderThumb;
   "w-slider": WarpSlider;
+  "w-snackbar-item": WarpSnackbarItem;
+  "w-snackbar": WarpSnackbar;
   "w-step": WarpStep;
   "w-step-indicator": WarpStepIndicator;
   "w-switch": WarpSwitch;
@@ -3360,6 +3513,8 @@ type CustomElementComponentProps = {
   "w-select": WarpSelectProps;
   "w-slider-thumb": WarpSliderThumbProps;
   "w-slider": WarpSliderProps;
+  "w-snackbar-item": WarpSnackbarItemProps;
+  "w-snackbar": WarpSnackbarProps;
   "w-step": WarpStepProps;
   "w-step-indicator": WarpStepIndicatorProps;
   "w-switch": WarpSwitchProps;
@@ -3796,7 +3951,18 @@ export type CustomElementsSolidJs = {
   >;
 
   /**
+   * Checkboxes allow users to select multiple options from a list of choices.
+   *
+   * Use with `w-checkbox`.
+   *
+   * ## Architecture Note
+   * This component uses a <div> wrapper instead of the more semantic <fieldset> element.
+   * Note that w-radio-group uses <fieldset>, which provides better accessibility and follows
+   * HTML best practices. This inconsistency exists for historical reasons and may be addressed
+   * in a future major version to align both on the more semantic approach.
    *
+   * TODO: Align w-checkbox-group to use <fieldset> in a future major version after assessing
+   * backwards compatibility implications (CSS selectors, etc.).
    *
    * ## Attributes & Properties
    *
@@ -4193,7 +4359,7 @@ export type CustomElementsSolidJs = {
    * Areas where markup can be added to the component.
    *
    * - `label`: Alternative to the `label` attribute should you need custom HTML.
-   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML.
+   * - `help-text`: Alternative to the `help-text` attribute should you need custom HTML. ## Architecture Note This component uses semantic <fieldset> element for grouping radio controls, which provides better accessibility and follows HTML best practices. Note that w-checkbox-group currently uses <div> instead - this inconsistency exists for historical reasons and may be addressed in a future major version to align both on the more semantic approach. TODO: Align w-checkbox-group to also use <fieldset> in a future major version after assessing backwards compatibility implications (CSS selectors, etc.).
    */
   "w-radio-group": Partial<
     WarpRadioGroupProps &
@@ -4319,6 +4485,118 @@ export type CustomElementsSolidJs = {
       BaseEvents
   >;
 
+  /**
+   * An item to show in a `w-snackbar`.
+   *
+   * See the `create` function on `w-snackbar` for a convenience API which helps you make snackbar items.
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `action-placement`/`actionPlacement`: The placement of the action and close buttons.
+   * - `duration`: How long the message should stay in the document before removing itself.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `default`: the snackbar message.
+   * - `icon`: icon preceeding the message.
+   * - `action`: action following the message.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `close() => void`: Remove the snackbar item from the document.
+   *
+   * Moves focus to the last focused element outside of the snackbar item, if available.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-snackbar-item-radius`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-max-width`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-min-width`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-padding`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-bg`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-bg-active`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-bg-hover`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-color`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-color-active`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-action-color-hover`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-item-box-shadow`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `item`: the container wrapping the message, icon and actions.
+   * - `icon`: the icon for the variant.
+   * - `message`: the default slot, body of the snackbar item.
+   * - `action`: close and action button.
+   */
+  "w-snackbar-item": Partial<
+    WarpSnackbarItemProps &
+      WarpSnackbarItemSolidJsProps &
+      BaseProps<WarpSnackbarItem> &
+      BaseEvents
+  >;
+
+  /**
+   * A Snackbar shows brief user feedback messages that overlay content, with an optional action such as Undo.
+   *
+   * Include one `<w-snackbar></w-snackbar>` in the document `<body>`. Use the `create` function to create messages.
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `default`: `w-snackbar-item` gets placed inside the default slot by the `create` function.
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `create(message: string, options: CreateSnackbarOptions = {}) => void`: Creates a snackbar item and immediately adds it to the snackbar.
+   *
+   * By default the snackbar item automatically closes after 4 seconds (`SnackbarDuration.Short`).
+   *
+   * If you include an `action` in the options the default `duration` is
+   * set to 10 seconds (`SnackbarDuration.Long`) and can not be made shorter.
+   *
+   * A `duration` of 10 seconds or longer forces the close button to be visible.
+   *
+   * The default `variant` is `neutral` which does not have an icon.
+   *
+   * Set `duration` to `SnackbarDuration.Infinite` if you want a persistent message.
+   *
+   * ## CSS Custom Properties
+   *
+   * CSS variables available for styling the component.
+   *
+   * - `--w-c-snackbar-container-gap`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-bottom`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-left`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-right`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-position-top`: undefined (default: `undefined`)
+   * - `--w-c-snackbar-z-index`: undefined (default: `undefined`)
+   *
+   * ## CSS Parts
+   *
+   * Custom selectors for styling elements within the component.
+   *
+   * - `container`: the live region that positions messages on the screen.
+   */
+  "w-snackbar": Partial<
+    WarpSnackbarProps &
+      WarpSnackbarSolidJsProps &
+      BaseProps<WarpSnackbar> &
+      BaseEvents
+  >;
+
   /**
    * Individual step component that shows a single step in a process
    *
@@ -4500,7 +4778,42 @@ export type CustomElementsSolidJs = {
   >;
 };
 
-export type CustomCssProperties = {};
+export type CustomCssProperties = {
+  /**  */
+  "--w-c-snackbar-item-radius"?: string;
+  /**  */
+  "--w-c-snackbar-item-max-width"?: string;
+  /**  */
+  "--w-c-snackbar-item-min-width"?: string;
+  /**  */
+  "--w-c-snackbar-item-padding"?: string;
+  /**  */
+  "--w-c-snackbar-item-bg"?: string;
+  /**  */
+  "--w-c-snackbar-item-action-bg-active"?: string;
+  /**  */
+  "--w-c-snackbar-item-action-bg-hover"?: string;
+  /**  */
+  "--w-c-snackbar-item-color"?: string;
+  /**  */
+  "--w-c-snackbar-item-action-color-active"?: string;
+  /**  */
+  "--w-c-snackbar-item-action-color-hover"?: string;
+  /**  */
+  "--w-c-snackbar-item-box-shadow"?: string;
+  /**  */
+  "--w-c-snackbar-container-gap"?: string;
+  /**  */
+  "--w-c-snackbar-position-bottom"?: string;
+  /**  */
+  "--w-c-snackbar-position-left"?: string;
+  /**  */
+  "--w-c-snackbar-position-right"?: string;
+  /**  */
+  "--w-c-snackbar-position-top"?: string;
+  /**  */
+  "--w-c-snackbar-z-index"?: string;
+};
 
 declare module "react" {
   namespace JSX {

package/dist/packages/affix/affix.d.ts

@@ -1,5 +1,5 @@
-import { LitElement } from 'lit';
-import '../icon/icon.js';
+import { LitElement } from "lit";
+import "../icon/icon.js";
 declare const WarpAffix_base: import("@open-wc/form-control").Constructor<import("@open-wc/form-control").FormControlInterface> & typeof LitElement;
 /**
  * This component is usually used in other components like form elements to show a prefix or suffix. See for example `w-textfield`.
@@ -19,14 +19,14 @@ declare class WarpAffix extends WarpAffix_base {
      *
      * @summary Renders a clear icon button.
      * @description Shows a clickable close icon meant for reset/clear actions, typically in a suffix slot.
-    */
+     */
     clear: boolean;
     /**
      * Add this property to render a clickable Warp search icon.
      *
      * @summary Renders a search icon button.
      * @description Shows a clickable search icon, typically in a prefix slot for search fields.
-    */
+     */
     search: boolean;
     /**
      * @summary Text label shown as prefix/suffix content.

package/dist/packages/affix/affix.hydration.test.d.ts

@@ -1 +1 @@
-import './affix.js';
+import "./affix.js";

package/dist/packages/affix/affix.hydration.test.js

@@ -1,32 +1,32 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './affix.js';
-describe('w-affix React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./affix.js";
+describe("w-affix React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {});
         expect(warnings).toEqual([]);
     });
-    test('with label hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {
-            label: 'kr',
+    test("with label hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {
+            label: "kr",
         });
         expect(warnings).toEqual([]);
     });
-    test('with search hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {
+    test("with search hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {
             search: true,
-            'aria-label': 'Search',
+            "aria-label": "Search",
         });
         expect(warnings).toEqual([]);
     });
-    test('with clear hydrates without warnings', async () => {
-        const warnings = await testHydration('w-affix', {
+    test("with clear hydrates without warnings", async () => {
+        const warnings = await testHydration("w-affix", {
             clear: true,
-            'aria-label': 'Clear',
+            "aria-label": "Clear",
         });
         expect(warnings).toEqual([]);
     });