@warp-ds/elements 2.11.0-next.1 → 2.12.0-next.1

package/dist/packages/textfield/textfield.react.stories.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 import { TextField } from "./react";
 declare const _default: {
     title: string;
-    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "autocomplete" | "name" | "type" | "disabled" | "invalid" | "label" | "helpText" | "optional" | "size" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "pattern" | "placeholder" | "readOnly" | "readonly" | "required" | "value" | "step" | "formatter" | "mask" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
+    render(args: Omit<Omit<Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "autocomplete" | "name" | "type" | "disabled" | "invalid" | "label" | "helpText" | "optional" | "size" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "pattern" | "placeholder" | "readOnly" | "readonly" | "required" | "value" | "step" | "tooltip" | "formatter" | "mask" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
         onBlur?: ((e: FocusEvent) => void) | undefined;
         onblur?: ((e: FocusEvent) => void) | undefined;
         onChange?: ((e: import("../types").ChangeEventWithTarget<HTMLInputElement>) => void) | undefined;
@@ -18,7 +18,7 @@ declare const _default: {
         maxLength?: number;
         readOnly?: boolean;
     } & React.RefAttributes<import("./textfield").WarpTextField>): React.JSX.Element;
-    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "autocomplete" | "name" | "type" | "disabled" | "invalid" | "label" | "helpText" | "optional" | "size" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "pattern" | "placeholder" | "readOnly" | "readonly" | "required" | "value" | "step" | "formatter" | "mask" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
+    component: React.ForwardRefExoticComponent<Omit<Omit<Omit<React.HTMLAttributes<import("./textfield").WarpTextField>, "autocomplete" | "name" | "type" | "disabled" | "invalid" | "label" | "helpText" | "optional" | "size" | "max" | "min" | "minLength" | "minlength" | "maxLength" | "maxlength" | "pattern" | "placeholder" | "readOnly" | "readonly" | "required" | "value" | "step" | "tooltip" | "formatter" | "mask" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "onblur" | "onchange" | "onfocus" | "oninput" | "_hasPrefix" | "_hasSuffix" | "updated" | "firstUpdated" | "resetFormControl" | "_inputstyles" | "_helptextstyles" | "_label" | "_helpId" | "_id" | "_error" | "handler" | "prefixSlotChange" | "suffixSlotChange" | "render" | "validationTarget" | "form" | "internals" | "showError" | "validationMessage" | "validity" | "validationComplete" | "checkValidity" | "formResetCallback" | "valueChangedCallback" | "validityCallback" | "validationMessageCallback" | "setValue" | "shouldFormValueUpdate" | "renderOptions" | "onFocus" | "onBlur" | "onChange" | "onInput"> & {
         onBlur?: ((e: FocusEvent) => void) | undefined;
         onblur?: ((e: FocusEvent) => void) | undefined;
         onChange?: ((e: import("../types").ChangeEventWithTarget<HTMLInputElement>) => void) | undefined;

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"tooltip.aria.description\":[\"En sort taleboble med flere oplysninger\"],\"tooltip.aria.pointingDown\":[\"peger nedad\"],\"tooltip.aria.pointingLeft\":[\"peger til venstre\"],\"tooltip.aria.pointingRight\":[\"peger til højre\"],\"tooltip.aria.pointingUp\":[\"peger opad\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"tooltip.aria.description\":[\"A black speech bubble providing complementary information\"],\"tooltip.aria.pointingDown\":[\"pointing down\"],\"tooltip.aria.pointingLeft\":[\"pointing left\"],\"tooltip.aria.pointingRight\":[\"pointing right\"],\"tooltip.aria.pointingUp\":[\"pointing up\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"tooltip.aria.description\":[\"Musta puhekupla, joka tarjoaa täydentävää tietoa\"],\"tooltip.aria.pointingDown\":[\"osoittaa alas\"],\"tooltip.aria.pointingLeft\":[\"osoittaa vasemmalle\"],\"tooltip.aria.pointingRight\":[\"osoittaa oikealle\"],\"tooltip.aria.pointingUp\":[\"osoittaa ylös\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"tooltip.aria.description\":[\"En svart taleboble som forklarer konteksten\"],\"tooltip.aria.pointingDown\":[\"peker ned\"],\"tooltip.aria.pointingLeft\":[\"peker til venstre\"],\"tooltip.aria.pointingRight\":[\"peker til høyre\"],\"tooltip.aria.pointingUp\":[\"peker opp\"]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"tooltip.aria.description\":[\"En svart pratbubbla som ger kompletterande information\"],\"tooltip.aria.pointingDown\":[\"pekar ned\"],\"tooltip.aria.pointingLeft\":[\"pekar vänster\"],\"tooltip.aria.pointingRight\":[\"pekar höger\"],\"tooltip.aria.pointingUp\":[\"pekar upp\"]}");

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

@@ -0,0 +1,16 @@
+import React from "react";
+import { WarpTooltip } from "./tooltip.js";
+/**
+ * A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.
+ *
+ * Tooltips should be used sparingly and contain succinct, supplementary information.
+ *
+ * @example
+ * ```html
+ * <Button id="my-button" aria-labelledby="my-tooltip">Hover over me</Button>
+ * <Tooltip id="my-tooltip" htmlFor="my-button">I am a tooltip</Tooltip>
+ * ```
+ */
+export declare const Tooltip: React.ForwardRefExoticComponent<Omit<Omit<React.HTMLAttributes<WarpTooltip>, "open" | "renderRoot" | "isUpdatePending" | "hasUpdated" | "addController" | "removeController" | "connectedCallback" | "disconnectedCallback" | "attributeChangedCallback" | "requestUpdate" | "updateComplete" | "firstUpdated" | "render" | "renderOptions" | "show" | "hide" | "placement" | "noArrow" | "for" | "showDelay" | "hideDelay"> & {} & Partial<Omit<WarpTooltip, keyof HTMLElement>> & React.RefAttributes<WarpTooltip>, "ref"> & {
+    htmlFor?: string;
+} & React.RefAttributes<WarpTooltip>>;

package/dist/packages/tooltip/react.js

@@ -0,0 +1,28 @@
+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 {
+}
+const BaseTooltip = createComponent({
+    tagName: "w-tooltip",
+    elementClass: Component,
+    react: React,
+});
+/**
+ * A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.
+ *
+ * Tooltips should be used sparingly and contain succinct, supplementary information.
+ *
+ * @example
+ * ```html
+ * <Button id="my-button" aria-labelledby="my-tooltip">Hover over me</Button>
+ * <Tooltip id="my-tooltip" htmlFor="my-button">I am a tooltip</Tooltip>
+ * ```
+ */
+export const Tooltip = React.forwardRef(({ htmlFor, ...props }, ref) => React.createElement(BaseTooltip, {
+    for: htmlFor,
+    ...props,
+    ref,
+}));
+Tooltip.displayName = "Tooltip";

package/dist/packages/tooltip/styles.d.ts

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

package/dist/packages/tooltip/styles.js

@@ -0,0 +1,66 @@
+import { css } from "lit";
+export const styles = css `
+	:host {
+		--_background-color: var(
+			--w-c-tooltip-bg,
+			var(--w-color-tooltip-background-static)
+		);
+		--_box-shadow: var(--w-c-tooltip-box-shadow, var(--w-shadow-m));
+		--_color: var(--w-c-tooltip-color, var(--w-s-color-text-inverted-static));
+		--_z-index: var(--w-c-tooltip-z-index, 30);
+	}
+
+	[part="tooltip"] {
+		box-shadow: var(--_box-shadow);
+		width: max-content;
+		position: absolute;
+		top: 0;
+		left: 0;
+		background: var(--_background-color);
+		color: var(--_color);
+		padding: 6px 8px;
+		border-radius: 4px;
+		font-size: var(--w-font-size-s);
+		font-weight: 400;
+		line-height: var(--w-line-height-s);
+		z-index: var(--_z-index);
+	}
+
+	[part="arrow"] {
+		position: absolute;
+		width: 23px; /* square box for floating-ui arrow plugin, width of the "beak" */
+		height: 23px;
+		z-index: -1; /* within part="tooltip"'s stacking context */
+	}
+
+	[part="beak"] {
+		position: absolute;
+		background: var(--_background-color);
+	}
+
+	[part="hover-bridge"] {
+		position: fixed;
+		z-index: calc(var(--_z-index) + 1);
+		inset: 0px;
+		clip-path: polygon(
+			var(--_hover-bridge-top-left-x, 0) var(--_hover-bridge-top-left-y, 0),
+			var(--_hover-bridge-top-right-x, 0) var(--_hover-bridge-top-right-y, 0),
+			var(--_hover-bridge-bottom-right-x, 0)
+				var(--_hover-bridge-bottom-right-y, 0),
+			var(--_hover-bridge-bottom-left-x, 0)
+				var(--_hover-bridge-bottom-left-y, 0)
+		);
+	}
+
+	.sr-only {
+		position: absolute;
+		width: 1px;
+		height: 1px;
+		padding: 0;
+		margin: -1px;
+		overflow: hidden;
+		clip: rect(0, 0, 0, 0);
+		white-space: nowrap;
+		border-width: 0;
+	}
+`;

package/dist/packages/tooltip/tooltip.d.ts

@@ -0,0 +1,72 @@
+import { LitElement, PropertyValues } from "lit";
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+/**
+ * A tooltip is a message box that is displayed when a user hovers over or gives focus to a UI element.
+ *
+ * Tooltips should be used sparingly and contain succinct, supplementary information.
+ *
+ * @example
+ * ```html
+ * <w-button id="my-button" aria-labelledby="my-tooltip">Hover over me</w-button>
+ * <w-tooltip id="my-tooltip" for="my-button">I am a tooltip</w-tooltip>
+ * ```
+ */
+export declare class WarpTooltip extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /**
+     * ID of the element that triggers the tooltip on hover or focus.
+     */
+    for: string;
+    /**
+     * Hide the arrow pointing toward the tooltip target.
+     */
+    noArrow: boolean;
+    /**
+     * Indicates whether the tooltip is visible or not.
+     */
+    open: boolean;
+    /**
+     * Sets the placement of the tooltip relative to its target.
+     *
+     * The tooltip will try to position itself at the given placement. If there is no room it will flip to the opposite side automatically.
+     *
+     * @default "top"
+     */
+    placement: TooltipPlacement;
+    /**
+     * Milliseconds to wait before showing the tooltip on hover.
+     *
+     * Keep at a non-zero value to avoid flickering the tooltip on and off when cursors move quickly past the target element.
+     *
+     * Focusing the target element shows the tooltip immediately.
+     */
+    showDelay: number;
+    /**
+     * Milliseconds to wait before hiding the tooltip on mouseout.
+     */
+    hideDelay: number;
+    private target;
+    private tooltip;
+    private hoverBridge;
+    private arrow;
+    private beak;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(_changedProperties: PropertyValues): void;
+    firstUpdated(): void;
+    private handleBlur;
+    private handleFocus;
+    private handleMouseOver;
+    private handleKeydown;
+    private handleMouseOut;
+    hide(): Promise<void>;
+    show(): Promise<void>;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-tooltip": WarpTooltip;
+    }
+}

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

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

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

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