@warp-ds/elements 2.10.0-next.9 → 2.10.0

package/dist/packages/slider-thumb/slider-thumb.react.test.js

@@ -1,6 +1,10 @@
-import { describeReactSsrAttributeMapping } from '../../tests/react-ssr-attributes';
-import { SliderThumb } from './react.js';
-describeReactSsrAttributeMapping('SliderThumb', SliderThumb, [
-    { propName: 'ariaLabel', attrName: 'aria-label', value: 'Value' },
-    { propName: 'ariaDescription', attrName: 'aria-description', value: 'Description' },
+import { describeReactSsrAttributeMapping } from "../../tests/react-ssr-attributes";
+import { SliderThumb } from "./react.js";
+describeReactSsrAttributeMapping("SliderThumb", SliderThumb, [
+    { propName: "ariaLabel", attrName: "aria-label", value: "Value" },
+    {
+        propName: "ariaDescription",
+        attrName: "aria-description",
+        value: "Description",
+    },
 ]);

package/dist/packages/slider-thumb/styles/w-slider-thumb.styles.js

@@ -1,194 +1,195 @@
-import { css } from 'lit';
+import { css } from "lit";
 /* For some reason the pseudoselectors for webkit and moz must be separate blocks :shrug: */
 export const wSliderThumbStyles = css `
-  .w-slider-thumb {
-    position: relative;
-    display: grid;
-    pointer-events: none; /* For range inputs we position two of these on top of each other. Let clicks go through the top one. */
-    grid-template-areas:
-      "slider slider slider"
-      "frommarker . tomarker"
-      "fromtextfield . totextfield";
-    grid-template-columns: 1fr 24px 1fr;
-  }
-
-  .w-slider-thumb__range {
-    appearance: none;
-    background-color: transparent;
-    grid-area: slider;
-    height: 44px; /* touch target */
-    margin-left: 0;
-    pointer-events: none; /* let clicks pass through for range slider where we place two inputs over each other */
-  }
-
-  .w-slider-thumb__range::-webkit-slider-runnable-track {
-    box-shadow: none;
-    color: var(--w-s-color-text);
-    height: var(--w-slider-track-height);
-  }
-
-  /*
+	.w-slider-thumb {
+		position: relative;
+		display: grid;
+		pointer-events: none; /* For range inputs we position two of these on top of each other. Let clicks go through the top one. */
+		grid-template-areas:
+			"slider slider slider"
+			"frommarker . tomarker"
+			"fromtextfield . totextfield";
+		grid-template-columns: 1fr 24px 1fr;
+	}
+
+	.w-slider-thumb__range {
+		appearance: none;
+		background-color: transparent;
+		grid-area: slider;
+		height: 44px; /* touch target */
+		margin-left: 0;
+		pointer-events: none; /* let clicks pass through for range slider where we place two inputs over each other */
+	}
+
+	.w-slider-thumb__range::-webkit-slider-runnable-track {
+		box-shadow: none;
+		color: var(--w-s-color-text);
+		height: var(--w-slider-track-height);
+	}
+
+	/*
     Use anchor positioning to place the tooltip target in relation to the slider thumb.
     We use a polyfill to bring support to older Safari, Firefox at time of writing.
    */
-  .w-slider-thumb__range::-webkit-slider-thumb {
-    anchor-name: --thumb;
-
-    appearance: none;
-    cursor: pointer;
-    background: var(--w-slider-thumb-background);
-    border-radius: 50%;
-    height: var(--w-slider-thumb-size, 28px);
-    margin-top: calc(
-      -1 * calc(var(--w-slider-thumb-offset) - calc(
-              var(--w-slider-track-height) / 2
-            ))
-    );
-    pointer-events: initial;
-    width: var(--w-slider-thumb-size, 28px);
-    z-index: 1;
-  }
-
-  .w-slider-thumb__range[disabled]::-webkit-slider-thumb {
-    cursor: auto;
-  }
-
-  .w-slider-thumb__range::-moz-range-thumb {
-    anchor-name: --thumb;
-
-    appearance: none;
-    cursor: pointer;
-    background: var(--w-slider-thumb-background);
-    border-radius: 50%;
-    border-color: transparent;
-    height: var(--w-slider-thumb-size, 28px);
-    margin-top: calc(
-      -1 * calc(var(--w-slider-thumb-offset) - calc(
-              var(--w-slider-track-height) / 2
-            ))
-    );
-    pointer-events: initial;
-    width: var(--w-slider-thumb-size, 28px);
-    z-index: 1;
-
-    box-shadow: none;
-  }
-
-  .w-slider-thumb__range[disabled]::-moz-range-thumb {
-    cursor: auto;
-  }
-
-  .w-slider-thumb__range:active::-webkit-slider-thumb,
-  .w-slider-thumb__range:hover::-webkit-slider-thumb {
-    background: var(--w-slider-thumb-background);
-    box-shadow: var(--w-shadow-slider-handle-hover);
-  }
-
-  .w-slider-thumb__range:focus,
-  .w-slider-thumb__range:focus-visible {
-    outline: none;
-  }
-
-  .w-slider-thumb__range:focus-visible::-webkit-slider-thumb {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, 1px);
-    box-shadow: none;
-  }
-
-  .w-slider-thumb__range:active::-moz-range-thumb,
-  .w-slider-thumb__range:hover::-moz-range-thumb {
-    background: var(--w-s-color-background-primary-hover);
-    box-shadow: var(--w-shadow-slider-handle-hover);
-  }
-
-  .w-slider-thumb__range:focus-visible::-moz-range-thumb {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, 1px);
-    box-shadow: none;
-  }
-
-  .w-slider-thumb__tooltip-target {
-    display: block;
-    pointer-events: none;
-    position: absolute;
-    border: 2px solid transparent;
-    border-radius: 20px;
-    width: 8px;
-    height: 8px;
-    position-anchor: --thumb;
-    position-area: center; /* Position the tooltip target right on the range thumb */
-  }
-
-  /* Uncomment this to debug the invisible anchor target */
-  /* .w-slider-thumb__tooltip-target { border-color: lime; } */
-
-  .w-slider-thumb__from-marker,
-  .w-slider-thumb__to-marker {
-    margin-inline: 2px; /* visual alignment with input border, slider thumb */
-    color: var(--w-s-color-text-subtle);
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-  }
-
-  .w-slider-thumb__from-marker {
-    grid-area: frommarker;
-  }
-
-  .w-slider-thumb__to-marker {
-    grid-area: tomarker;
-    text-align: right;
-  }
-
-  .w-slider-thumb__textfield {
-    margin-top: 12px;
-    pointer-events: auto;
-    grid-row: 3 / 4;
-    grid-column: 1 / 3; /* Single sliders should have the text field use the fromtextfield _and_ gap portion of the CSS grid. */
-  }
-
-  :host([slot="from"]) .w-slider-thumb__textfield {
-    grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
-  }
-
-  :host([slot="from"]) .w-slider-thumb__range {
-    margin-left: var(--w-slider-thumb-size, 28px);
-  }
-
-  :host([slot="to"]) .w-slider-thumb__range {
-    margin-right: var(--w-slider-thumb-size, 28px);
-  }
-
-
-  :host([slot="from"]) .w-slider-thumb__tooltip-target {
-    transform: translateX(calc(-1 * var(--transform-offset, 0px) - 1px));
-  }
-
-  :host([slot="from"]) .w-slider-thumb__range::-webkit-slider-thumb {
-    transform: translateX(calc(-1 * var(--w-slider-thumb-size, 28px) - 1px));
-  }
-
-  :host([slot="from"]) .w-slider-thumb__range::-moz-range-thumb {
-    transform: translateX(calc(-1 * var(--w-slider-thumb-size, 28px) - 1px));
-  }
-
-  :host([slot="to"]) .w-slider-thumb__textfield {
-    grid-row: 3 / 4;
-    grid-column: 3 / 4;
-  }
-
-  :host([slot="to"]) .w-slider-thumb__tooltip-target {
-    transform: translateX(calc(var(--transform-offset, 0px) - 1px));
-  }
-
-  :host([slot="to"]) .w-slider-thumb__range::-webkit-slider-thumb {
-    transform: translateX(calc(var(--w-slider-thumb-size, 28px) - 1px));
-  }
-
-  :host([slot="to"]) .w-slider-thumb__range::-moz-range-thumb {
-    transform: translateX(calc(var(--w-slider-thumb-size, 28px) - 1px));
-  }
-
-  w-textfield {
-    --w-textfield-placeholder-color-text: var(--w-s-color-text);
-  }
+	.w-slider-thumb__range::-webkit-slider-thumb {
+		anchor-name: --thumb;
+
+		appearance: none;
+		cursor: pointer;
+		background: var(--w-slider-thumb-background);
+		border-radius: 50%;
+		height: var(--w-slider-thumb-size, 28px);
+		margin-top: calc(
+			-1 *
+				calc(
+					var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)
+				)
+		);
+		pointer-events: initial;
+		width: var(--w-slider-thumb-size, 28px);
+		z-index: 1;
+	}
+
+	.w-slider-thumb__range[disabled]::-webkit-slider-thumb {
+		cursor: auto;
+	}
+
+	.w-slider-thumb__range::-moz-range-thumb {
+		anchor-name: --thumb;
+
+		appearance: none;
+		cursor: pointer;
+		background: var(--w-slider-thumb-background);
+		border-radius: 50%;
+		border-color: transparent;
+		height: var(--w-slider-thumb-size, 28px);
+		margin-top: calc(
+			-1 *
+				calc(
+					var(--w-slider-thumb-offset) - calc(var(--w-slider-track-height) / 2)
+				)
+		);
+		pointer-events: initial;
+		width: var(--w-slider-thumb-size, 28px);
+		z-index: 1;
+
+		box-shadow: none;
+	}
+
+	.w-slider-thumb__range[disabled]::-moz-range-thumb {
+		cursor: auto;
+	}
+
+	.w-slider-thumb__range:active::-webkit-slider-thumb,
+	.w-slider-thumb__range:hover::-webkit-slider-thumb {
+		background: var(--w-slider-thumb-background);
+		box-shadow: var(--w-shadow-slider-handle-hover);
+	}
+
+	.w-slider-thumb__range:focus,
+	.w-slider-thumb__range:focus-visible {
+		outline: none;
+	}
+
+	.w-slider-thumb__range:focus-visible::-webkit-slider-thumb {
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: var(--w-outline-offset, 1px);
+		box-shadow: none;
+	}
+
+	.w-slider-thumb__range:active::-moz-range-thumb,
+	.w-slider-thumb__range:hover::-moz-range-thumb {
+		background: var(--w-s-color-background-primary-hover);
+		box-shadow: var(--w-shadow-slider-handle-hover);
+	}
+
+	.w-slider-thumb__range:focus-visible::-moz-range-thumb {
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: var(--w-outline-offset, 1px);
+		box-shadow: none;
+	}
+
+	.w-slider-thumb__tooltip-target {
+		display: block;
+		pointer-events: none;
+		position: absolute;
+		border: 2px solid transparent;
+		border-radius: 20px;
+		width: 8px;
+		height: 8px;
+		position-anchor: --thumb;
+		position-area: center; /* Position the tooltip target right on the range thumb */
+	}
+
+	/* Uncomment this to debug the invisible anchor target */
+	/* .w-slider-thumb__tooltip-target { border-color: lime; } */
+
+	.w-slider-thumb__from-marker,
+	.w-slider-thumb__to-marker {
+		margin-inline: 2px; /* visual alignment with input border, slider thumb */
+		color: var(--w-s-color-text-subtle);
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+	}
+
+	.w-slider-thumb__from-marker {
+		grid-area: frommarker;
+	}
+
+	.w-slider-thumb__to-marker {
+		grid-area: tomarker;
+		text-align: right;
+	}
+
+	.w-slider-thumb__textfield {
+		margin-top: 12px;
+		pointer-events: auto;
+		grid-row: 3 / 4;
+		grid-column: 1 / 3; /* Single sliders should have the text field use the fromtextfield _and_ gap portion of the CSS grid. */
+	}
+
+	:host([slot="from"]) .w-slider-thumb__textfield {
+		grid-column: 1 / 2; /* Range sliders should leave the gap empty. */
+	}
+
+	:host([slot="from"]) .w-slider-thumb__range {
+		margin-left: var(--w-slider-thumb-size, 28px);
+	}
+
+	:host([slot="to"]) .w-slider-thumb__range {
+		margin-right: var(--w-slider-thumb-size, 28px);
+	}
+
+	:host([slot="from"]) .w-slider-thumb__tooltip-target {
+		transform: translateX(calc(-1 * var(--transform-offset, 0px) - 1px));
+	}
+
+	:host([slot="from"]) .w-slider-thumb__range::-webkit-slider-thumb {
+		transform: translateX(calc(-1 * var(--w-slider-thumb-size, 28px) - 1px));
+	}
+
+	:host([slot="from"]) .w-slider-thumb__range::-moz-range-thumb {
+		transform: translateX(calc(-1 * var(--w-slider-thumb-size, 28px) - 1px));
+	}
+
+	:host([slot="to"]) .w-slider-thumb__textfield {
+		grid-row: 3 / 4;
+		grid-column: 3 / 4;
+	}
+
+	:host([slot="to"]) .w-slider-thumb__tooltip-target {
+		transform: translateX(calc(var(--transform-offset, 0px) - 1px));
+	}
+
+	:host([slot="to"]) .w-slider-thumb__range::-webkit-slider-thumb {
+		transform: translateX(calc(var(--w-slider-thumb-size, 28px) - 1px));
+	}
+
+	:host([slot="to"]) .w-slider-thumb__range::-moz-range-thumb {
+		transform: translateX(calc(var(--w-slider-thumb-size, 28px) - 1px));
+	}
+
+	w-textfield {
+		--w-textfield-placeholder-color-text: var(--w-s-color-text);
+	}
 `;

package/dist/packages/slider-thumb/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("lit").CSSResult;

package/dist/packages/slider-thumb/styles.js

@@ -0,0 +1,2 @@
+import { unsafeCSS } from "lit";
+export const styles = unsafeCSS("*,:before,:after{--w-rotate:0;--w-rotate-x:0;--w-rotate-y:0;--w-rotate-z:0;--w-scale-x:1;--w-scale-y:1;--w-scale-z:1;--w-skew-x:0;--w-skew-y:0;--w-translate-x:0;--w-translate-y:0;--w-translate-z:0}.hidden{display:none}.absolute{position:absolute}.relative{position:relative}.static{position:static}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}");

package/dist/packages/snackbar/locales/da/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/snackbar/locales/da/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"snackbar.aria.close\":[\"Dismiss message\"]}");

package/dist/packages/snackbar/locales/en/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/snackbar/locales/en/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"snackbar.aria.close\":[\"Dismiss message\"]}");

package/dist/packages/snackbar/locales/fi/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/snackbar/locales/fi/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"snackbar.aria.close\":[\"Dismiss message\"]}");

package/dist/packages/snackbar/locales/nb/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/snackbar/locales/nb/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"snackbar.aria.close\":[\"Dismiss message\"]}");

package/dist/packages/snackbar/locales/sv/messages.d.mts

@@ -0,0 +1 @@
+export const messages: any;

package/dist/packages/snackbar/locales/sv/messages.mjs

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"snackbar.aria.close\":[\"Dismiss message\"]}");

package/dist/packages/snackbar/react.d.ts

@@ -0,0 +1,2 @@
+import { WarpSnackbar } from "./snackbar.js";
+export declare const Snackbar: import("@lit/react").ReactWebComponent<WarpSnackbar, {}>;

package/dist/packages/snackbar/react.js

@@ -0,0 +1,11 @@
+import { createComponent } from "@lit/react";
+import { LitElement } from "lit";
+import React from "react";
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Snackbar = createComponent({
+    tagName: "w-snackbar",
+    elementClass: Component,
+    react: React,
+});

package/dist/packages/snackbar/snackbar.d.ts

@@ -0,0 +1,132 @@
+import { LitElement } from "lit";
+import { SnackbarDuration, type WarpSnackbarItem, type SnackbarVariant, type SnackbarActionPlacement } from "../snackbar-item/snackbar-item.js";
+export type CreateSnackbarOptions = {
+    /**
+     * Show a close button so users can dismiss the message early.
+     *
+     * Can not be turned off if duration is Long or more.
+     *
+     * Pass a click event handler if you need to react to clicks on the close button somehow.
+     * You can stop the message from closing by calling `event.preventDefault()`.
+     *
+     * @default true
+     */
+    canClose?: boolean | ((this: GlobalEventHandlers, ev: PointerEvent) => void);
+    /**
+     * Duration until the message hides automatically.
+     *
+     * If the message has an action the default `duration` is `SnackbarDuration.Long`.
+     *
+     * @default SnackbarDuration.Short
+     */
+    duration?: SnackbarDuration;
+    /**
+     * @default 'neutral'
+     */
+    variant?: SnackbarVariant;
+    /**
+     * Shows an action before the close button.
+     *
+     * Use this action as a convenience only. Ensure the result of any action in the snackbar,
+     * such as Undo, is possible to achieve elsewhere in your application.
+     */
+    action?: {
+        /**
+         * Keep action labels short.
+         *
+         * If the label includes a space the `placement` is set to `block` by default.
+         */
+        label: string;
+        /**
+         * The action button's `onclick` property.
+         */
+        onclick: (this: GlobalEventHandlers, ev: PointerEvent) => void;
+        /**
+         * Overrides the default placement of the action button.
+         *
+         * By default labels that are only one word are `inline` and labels with multiple words are `block`.
+         * If you have a particularly long word as a label you can set `placement: 'block'`.
+         */
+        placement?: SnackbarActionPlacement;
+    };
+};
+/**
+ * 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.
+ *
+ * @example
+ *
+ * ```html
+ * <body>
+ * 	<w-snackbar></w-snackbar>
+ * </body>
+ * ```
+ *
+ * @example
+ *
+ * ```ts
+ * // Short message indicating an operation succeeded
+ * const snackbar = document.querySelector("w-snackbar");
+ * const snackbarItem = snackbar.create("Settings saved", { variant: "success" });
+ * ```
+ *
+ * @example
+ *
+ * ```ts
+ * // An action to undo what was just done
+ * const snackbar = document.querySelector("w-snackbar");
+ * const snackbarItem = snackbar.create("Settings saved", {
+ * 	variant: "success",
+ * 	action: {
+ * 		label: "Undo",
+ * 		onclick: () => {
+ * 			// undoSave();
+ * 		},
+ * 	},
+ * });
+ * ```
+ *
+ * @slot default - `w-snackbar-item` gets placed inside the default slot by the `create` function.
+ *
+ * @csspart container - the live region that positions messages on the screen.
+ *
+ * @cssprop --w-c-snackbar-container-gap
+ * @cssprop --w-c-snackbar-position-bottom
+ * @cssprop --w-c-snackbar-position-left
+ * @cssprop --w-c-snackbar-position-right
+ * @cssprop --w-c-snackbar-position-top
+ * @cssprop --w-c-snackbar-z-index
+ */
+export declare class WarpSnackbar extends LitElement {
+    private internals;
+    static styles: import("lit").CSSResult[];
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** @internal */
+    _onKeydown(e: KeyboardEvent): 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.
+     *
+     * @returns The instance of `w-snackbar-item` added to the snackbar.
+     */
+    create(message: string, options?: CreateSnackbarOptions): WarpSnackbarItem;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-snackbar": WarpSnackbar;
+    }
+}

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

@@ -0,0 +1 @@
+import "./snackbar.js";

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

@@ -0,0 +1,13 @@
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./snackbar.js";
+describe("w-snackbar React SSR hydration", () => {
+    beforeEach(() => setupHydrationWarningCapture());
+    afterEach(() => {
+        window.__HYDRATION_WARNINGS__ = [];
+    });
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-slider", {});
+        expect(warnings).toEqual([]);
+    });
+});