@warp-ds/elements 2.6.0 → 2.7.0-next.1

package/dist/index.d.ts

@@ -27,6 +27,8 @@ import type { WarpTabs } from "./packages/tabs/tabs.ts";
 import type { WarpTextarea } from "./packages/textarea/textarea.ts";
 import type { WarpTextField } from "./packages/textfield/textfield.ts";
 import type { WarpToastContainer } from "./packages/toast-container/toast-container.ts";
+import type { WarpSliderThumb } from "./packages/slider-thumb/slider-thumb.ts";
+import type { WarpSlider } from "./packages/slider/slider.ts";
 
 /**
  * This type can be used to create scoped tags for your components.
@@ -1441,6 +1443,165 @@ export type WarpToastContainerSolidJsProps = {
   textContent?: string | number;
 };
 
+export type WarpSliderThumbProps = {
+  /**  */
+  "aria-label"?: WarpSliderThumb["ariaLabel"];
+  /**  */
+  ariaLabel?: WarpSliderThumb["ariaLabel"];
+  /**  */
+  "aria-description"?: WarpSliderThumb["ariaDescription"];
+  /**  */
+  ariaDescription?: WarpSliderThumb["ariaDescription"];
+  /**  */
+  name?: WarpSliderThumb["name"];
+  /**  */
+  value?: WarpSliderThumb["value"];
+  /**  */
+  placeholder?: WarpSliderThumb["placeholder"];
+  /**  */
+  range?: WarpSliderThumb["range"];
+  /**  */
+  tooltipTarget?: WarpSliderThumb["tooltipTarget"];
+  /**  */
+  textfield?: WarpSliderThumb["textfield"];
+
+  /**  */
+  onslidervalidity?: (e: CustomEvent) => void;
+};
+
+export type WarpSliderThumbSolidJsProps = {
+  /**  */
+  "attr:aria-label"?: WarpSliderThumb["ariaLabel"];
+  /**  */
+  "prop:ariaLabel"?: WarpSliderThumb["ariaLabel"];
+  /**  */
+  "attr:aria-description"?: WarpSliderThumb["ariaDescription"];
+  /**  */
+  "prop:ariaDescription"?: WarpSliderThumb["ariaDescription"];
+  /**  */
+  "prop:name"?: WarpSliderThumb["name"];
+  /**  */
+  "prop:value"?: WarpSliderThumb["value"];
+  /**  */
+  "prop:placeholder"?: WarpSliderThumb["placeholder"];
+  /**  */
+  "prop:range"?: WarpSliderThumb["range"];
+  /**  */
+  "prop:tooltipTarget"?: WarpSliderThumb["tooltipTarget"];
+  /**  */
+  "prop:textfield"?: WarpSliderThumb["textfield"];
+  /**  */
+  "on:slidervalidity"?: (e: CustomEvent) => void;
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
+export type WarpSliderProps = {
+  /** The slider fieldset label. Required for proper accessibility.
+
+If you need to display HTML, use the `label` slot instead (f. ex. `<legend class="sr-only" slot="label">Production year</legend>`) */
+  label?: WarpSlider["label"];
+  /**  */
+  disabled?: WarpSlider["disabled"];
+  /** Whether or not to allow values outside the range such as "Before 1950" and "2025+". */
+  "open-ended"?: WarpSlider["openEnded"];
+  /** Whether or not to allow values outside the range such as "Before 1950" and "2025+". */
+  openEnded?: WarpSlider["openEnded"];
+  /**  */
+  error?: WarpSlider["error"];
+  /**  */
+  "help-text"?: WarpSlider["helpText"];
+  /**  */
+  helpText?: WarpSlider["helpText"];
+  /**  */
+  invalid?: WarpSlider["invalid"];
+  /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
+  required?: WarpSlider["required"];
+  /**  */
+  min?: WarpSlider["min"];
+  /**  */
+  max?: WarpSlider["max"];
+  /** Pass a value similar to step to create visual markers at that interval */
+  markers?: WarpSlider["markers"];
+  /**  */
+  step?: WarpSlider["step"];
+  /** Suffix used in text input fields and for the min and max values of the slider. */
+  suffix?: WarpSlider["suffix"];
+  /**  */
+  "hidden-textfield"?: WarpSlider["hiddenTextfield"];
+  /**  */
+  hiddenTextfield?: WarpSlider["hiddenTextfield"];
+  /** Formatter for the tooltip and input mask values. */
+  valueFormatter?: WarpSlider["valueFormatter"];
+  /** Formatter for the min and max labels below the range. */
+  labelFormatter?: WarpSlider["labelFormatter"];
+  /**  */
+  _invalidMessage?: WarpSlider["_invalidMessage"];
+  /**  */
+  _hasInternalError?: WarpSlider["_hasInternalError"];
+  /**  */
+  _showError?: WarpSlider["_showError"];
+  /**  */
+  _tabbableElements?: WarpSlider["_tabbableElements"];
+};
+
+export type WarpSliderSolidJsProps = {
+  /** The slider fieldset label. Required for proper accessibility.
+
+If you need to display HTML, use the `label` slot instead (f. ex. `<legend class="sr-only" slot="label">Production year</legend>`) */
+  "prop:label"?: WarpSlider["label"];
+  /**  */
+  "prop:disabled"?: WarpSlider["disabled"];
+  /** Whether or not to allow values outside the range such as "Before 1950" and "2025+". */
+  "bool:open-ended"?: WarpSlider["openEnded"];
+  /** Whether or not to allow values outside the range such as "Before 1950" and "2025+". */
+  "prop:openEnded"?: WarpSlider["openEnded"];
+  /**  */
+  "prop:error"?: WarpSlider["error"];
+  /**  */
+  "attr:help-text"?: WarpSlider["helpText"];
+  /**  */
+  "prop:helpText"?: WarpSlider["helpText"];
+  /**  */
+  "prop:invalid"?: WarpSlider["invalid"];
+  /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
+  "prop:required"?: WarpSlider["required"];
+  /**  */
+  "prop:min"?: WarpSlider["min"];
+  /**  */
+  "prop:max"?: WarpSlider["max"];
+  /** Pass a value similar to step to create visual markers at that interval */
+  "prop:markers"?: WarpSlider["markers"];
+  /**  */
+  "prop:step"?: WarpSlider["step"];
+  /** Suffix used in text input fields and for the min and max values of the slider. */
+  "prop:suffix"?: WarpSlider["suffix"];
+  /**  */
+  "bool:hidden-textfield"?: WarpSlider["hiddenTextfield"];
+  /**  */
+  "prop:hiddenTextfield"?: WarpSlider["hiddenTextfield"];
+  /** Formatter for the tooltip and input mask values. */
+  "prop:valueFormatter"?: WarpSlider["valueFormatter"];
+  /** Formatter for the min and max labels below the range. */
+  "prop:labelFormatter"?: WarpSlider["labelFormatter"];
+  /**  */
+  "prop:_invalidMessage"?: WarpSlider["_invalidMessage"];
+  /**  */
+  "prop:_hasInternalError"?: WarpSlider["_hasInternalError"];
+  /**  */
+  "prop:_showError"?: WarpSlider["_showError"];
+  /**  */
+  "prop:_tabbableElements"?: WarpSlider["_tabbableElements"];
+
+  /** Set the innerHTML of the element */
+  innerHTML?: string;
+  /** Set the textContent of the element */
+  textContent?: string | number;
+};
+
 export type CustomElements = {
   /**
    *
@@ -2189,6 +2350,92 @@ export type CustomElements = {
   "w-toast-container": Partial<
     WarpToastContainerProps & BaseProps<WarpToastContainer> & BaseEvents
   >;
+
+  /**
+   * Component to place inside a `<w-slider>`.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `aria-label`/`ariaLabel`: undefined
+   * - `aria-description`/`ariaDescription`: undefined
+   * - `name`: undefined
+   * - `value`: undefined
+   * - `placeholder`: undefined
+   * - `range`: undefined (property only)
+   * - `tooltipTarget`: undefined (property only)
+   * - `textfield`: undefined (property only)
+   * - `boundaryValue`: undefined (property only) (readonly)
+   * - `textFieldDisplayValue`: Value to display in the textfield (shows boundary when focused on empty value) (property only) (readonly)
+   * - `tooltipDisplayValue`: Value to display in the tooltip (property only) (readonly)
+   * - `ariaDescriptionText`: undefined (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `slidervalidity`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   * - `updateFieldAfterValidation() => void`: undefined
+   */
+  "w-slider-thumb": Partial<
+    WarpSliderThumbProps & BaseProps<WarpSliderThumb> & BaseEvents
+  >;
+
+  /**
+   * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`: The slider fieldset label. Required for proper accessibility.
+   *
+   * If you need to display HTML, use the `label` slot instead (f. ex. `<legend class="sr-only" slot="label">Production year</legend>`)
+   * - `disabled`: undefined
+   * - `open-ended`/`openEnded`: Whether or not to allow values outside the range such as "Before 1950" and "2025+".
+   * - `error`: undefined
+   * - `help-text`/`helpText`: undefined
+   * - `invalid`: undefined
+   * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit.
+   * - `min`: undefined
+   * - `max`: undefined
+   * - `markers`: Pass a value similar to step to create visual markers at that interval
+   * - `step`: undefined
+   * - `suffix`: Suffix used in text input fields and for the min and max values of the slider.
+   * - `hidden-textfield`/`hiddenTextfield`: undefined
+   * - `valueFormatter`: Formatter for the tooltip and input mask values. (property only)
+   * - `labelFormatter`: Formatter for the min and max labels below the range. (property only)
+   * - `_invalidMessage`: undefined (property only)
+   * - `_hasInternalError`: undefined (property only)
+   * - `_showError`: undefined (property only)
+   * - `_tabbableElements`: undefined (property only)
+   * - `edgeMin`: undefined (property only) (readonly)
+   * - `edgeMax`: undefined (property only) (readonly)
+   * - `componentHasError`: undefined (property only) (readonly)
+   * - `errorText`: undefined (property only) (readonly)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: For single sliders place a `<w-slider-thumb>` in the default slot.
+   * - `label`: Label for the slider or range slider as a whole.
+   * - `description`: Optional description between the label and slider.
+   * - `from`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+   * - `to`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+   */
+  "w-slider": Partial<WarpSliderProps & BaseProps<WarpSlider> & BaseEvents>;
 };
 
 export type CustomElementsSolidJs = {
@@ -3020,6 +3267,100 @@ export type CustomElementsSolidJs = {
       BaseProps<WarpToastContainer> &
       BaseEvents
   >;
+
+  /**
+   * Component to place inside a `<w-slider>`.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `aria-label`/`ariaLabel`: undefined
+   * - `aria-description`/`ariaDescription`: undefined
+   * - `name`: undefined
+   * - `value`: undefined
+   * - `placeholder`: undefined
+   * - `range`: undefined (property only)
+   * - `tooltipTarget`: undefined (property only)
+   * - `textfield`: undefined (property only)
+   * - `boundaryValue`: undefined (property only) (readonly)
+   * - `textFieldDisplayValue`: Value to display in the textfield (shows boundary when focused on empty value) (property only) (readonly)
+   * - `tooltipDisplayValue`: Value to display in the tooltip (property only) (readonly)
+   * - `ariaDescriptionText`: undefined (property only) (readonly)
+   *
+   * ## Events
+   *
+   * Events that will be emitted by the component.
+   *
+   * - `slidervalidity`: undefined
+   *
+   * ## Methods
+   *
+   * Methods that can be called to access component functionality.
+   *
+   * - `resetFormControl() => void`: undefined
+   * - `updateFieldAfterValidation() => void`: undefined
+   */
+  "w-slider-thumb": Partial<
+    WarpSliderThumbProps &
+      WarpSliderThumbSolidJsProps &
+      BaseProps<WarpSliderThumb> &
+      BaseEvents
+  >;
+
+  /**
+   * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
+   *
+   * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+   *
+   * ## Attributes & Properties
+   *
+   * Component attributes and properties that can be applied to the element or by using JavaScript.
+   *
+   * - `label`: The slider fieldset label. Required for proper accessibility.
+   *
+   * If you need to display HTML, use the `label` slot instead (f. ex. `<legend class="sr-only" slot="label">Production year</legend>`)
+   * - `disabled`: undefined
+   * - `open-ended`/`openEnded`: Whether or not to allow values outside the range such as "Before 1950" and "2025+".
+   * - `error`: undefined
+   * - `help-text`/`helpText`: undefined
+   * - `invalid`: undefined
+   * - `required`: Ensures a child slider thumb has a value before allowing the containing form to submit.
+   * - `min`: undefined
+   * - `max`: undefined
+   * - `markers`: Pass a value similar to step to create visual markers at that interval
+   * - `step`: undefined
+   * - `suffix`: Suffix used in text input fields and for the min and max values of the slider.
+   * - `hidden-textfield`/`hiddenTextfield`: undefined
+   * - `valueFormatter`: Formatter for the tooltip and input mask values. (property only)
+   * - `labelFormatter`: Formatter for the min and max labels below the range. (property only)
+   * - `_invalidMessage`: undefined (property only)
+   * - `_hasInternalError`: undefined (property only)
+   * - `_showError`: undefined (property only)
+   * - `_tabbableElements`: undefined (property only)
+   * - `edgeMin`: undefined (property only) (readonly)
+   * - `edgeMax`: undefined (property only) (readonly)
+   * - `componentHasError`: undefined (property only) (readonly)
+   * - `errorText`: undefined (property only) (readonly)
+   *
+   * ## Slots
+   *
+   * Areas where markup can be added to the component.
+   *
+   * - `(default)`: For single sliders place a `<w-slider-thumb>` in the default slot.
+   * - `label`: Label for the slider or range slider as a whole.
+   * - `description`: Optional description between the label and slider.
+   * - `from`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+   * - `to`: Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+   */
+  "w-slider": Partial<
+    WarpSliderProps &
+      WarpSliderSolidJsProps &
+      BaseProps<WarpSlider> &
+      BaseEvents
+  >;
 };
 
 export type CustomCssProperties = {};

package/dist/packages/slider/Slider.d.ts

@@ -0,0 +1,2 @@
+import { WarpSlider } from './slider.js';
+export declare const Slider: import("@lit/react").ReactWebComponent<WarpSlider, {}>;

package/dist/packages/slider/Slider.js

@@ -0,0 +1,8 @@
+import { createComponent } from '@lit/react';
+import React from 'react';
+import { WarpSlider } from './slider.js';
+export const Slider = createComponent({
+    tagName: 'w-slider',
+    elementClass: WarpSlider,
+    react: React,
+});

package/dist/packages/slider/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../slider-thumb/slider-thumb.js';
+export * from './slider.js';

package/dist/packages/slider/index.js

@@ -0,0 +1,2 @@
+export * from '../slider-thumb/slider-thumb.js';
+export * from './slider.js';

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"slider.label.from\":[\"From\"],\"slider.placeholder.to\":[\"Max\"],\"slider.placeholder.from\":[\"Min\"],\"slider.error.overlap\":[\"Maksimumværdien må ikke være mindre end minimumværdien\"],\"slider.error.required\":[\"Dette felt er påkrævet\"],\"slider.label.to\":[\"To\"],\"slider.error.out_of_bounds\":[\"Værdien skal være mellem \",[\"min\"],\" og \",[\"max\"]]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"slider.label.from\":[\"From\"],\"slider.placeholder.to\":[\"Max\"],\"slider.placeholder.from\":[\"Min\"],\"slider.error.overlap\":[\"The maximum value cannot be less than the minimum\"],\"slider.error.required\":[\"This field is required\"],\"slider.label.to\":[\"To\"],\"slider.error.out_of_bounds\":[\"Value must be between \",[\"min\"],\" and \",[\"max\"]]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"slider.label.from\":[\"From\"],\"slider.placeholder.to\":[\"Max\"],\"slider.placeholder.from\":[\"Min\"],\"slider.error.overlap\":[\"Maksimiarvo ei voi olla pienempi kuin minimiarvo\"],\"slider.error.required\":[\"Tämä kenttä on pakollinen\"],\"slider.label.to\":[\"To\"],\"slider.error.out_of_bounds\":[\"Arvon on oltava välillä \",[\"min\"],\" - \",[\"max\"]]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"slider.label.from\":[\"From\"],\"slider.placeholder.to\":[\"Max\"],\"slider.placeholder.from\":[\"Min\"],\"slider.error.overlap\":[\"Maksimumsverdien kan ikke være mindre enn minimumsverdien\"],\"slider.error.required\":[\"Dette feltet er påkrevd\"],\"slider.label.to\":[\"To\"],\"slider.error.out_of_bounds\":[\"Verdien må være mellom \",[\"min\"],\" og \",[\"max\"]]}");

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

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

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

@@ -0,0 +1 @@
+/*eslint-disable*/ export const messages = JSON.parse("{\"slider.label.from\":[\"From\"],\"slider.placeholder.to\":[\"Max\"],\"slider.placeholder.from\":[\"Min\"],\"slider.error.overlap\":[\"Maxvärdet kan inte vara mindre än minimivärdet\"],\"slider.error.required\":[\"Detta fält är obligatoriskt\"],\"slider.label.to\":[\"To\"],\"slider.error.out_of_bounds\":[\"Värdet måste vara mellan \",[\"min\"],\" och \",[\"max\"]]}");

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

@@ -0,0 +1,3 @@
+import { WarpSlider } from './slider.js';
+export { SliderThumb } from '../slider-thumb/react.js';
+export declare const Slider: import("@lit/react").ReactWebComponent<WarpSlider, {}>;

package/dist/packages/slider/react.js

@@ -0,0 +1,13 @@
+import { createComponent } from '@lit/react';
+import { LitElement } from 'lit';
+import React from 'react';
+// Re-export from split packages
+export { SliderThumb } from '../slider-thumb/react.js';
+// decouple from CDN by providing a dummy class
+class Component extends LitElement {
+}
+export const Slider = createComponent({
+    tagName: 'w-slider',
+    elementClass: Component,
+    react: React,
+});

package/dist/packages/slider/slider.d.ts

@@ -0,0 +1,64 @@
+import { LitElement, PropertyValues } from 'lit';
+import type { SliderSlot } from '../slider-thumb/slider-thumb.js';
+/**
+ * Parent component for sliders (both single and range sliders). Used in combination with a `<w-slider-thumb>`.
+ *
+ * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/forms-slider-and-range-slider--docs)
+ *
+ * @slot - For single sliders place a `<w-slider-thumb>` in the default slot.
+ * @slot label - Label for the slider or range slider as a whole.
+ * @slot description - Optional description between the label and slider.
+ * @slot from - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+ * @slot to - Range sliders need to place a `<w-slider-thumb>` in the from and to slots.
+ */
+declare class WarpSlider extends LitElement {
+    #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    static styles: import("lit").CSSResult[];
+    /**
+     * The slider fieldset label. Required for proper accessibility.
+     *
+     * If you need to display HTML, use the `label` slot instead (f. ex. `<legend class="sr-only" slot="label">Production year</legend>`)
+     */
+    label: string;
+    disabled: boolean;
+    /**
+     * Whether or not to allow values outside the range such as "Before 1950" and "2025+".
+     */
+    openEnded: boolean;
+    error: string;
+    helpText: string;
+    invalid: boolean;
+    /** Ensures a child slider thumb has a value before allowing the containing form to submit. */
+    required: boolean;
+    min: string;
+    max: string;
+    /** Pass a value similar to step to create visual markers at that interval */
+    markers: number;
+    step: number;
+    /** Suffix used in text input fields and for the min and max values of the slider. */
+    suffix: string;
+    hiddenTextfield: boolean;
+    /** Formatter for the tooltip and input mask values. */
+    valueFormatter: (value: string, slot: SliderSlot) => string;
+    /** Formatter for the min and max labels below the range. */
+    labelFormatter: (slot: SliderSlot) => string;
+    _invalidMessage: string;
+    _hasInternalError: boolean;
+    _showError: boolean;
+    _tabbableElements: Array<HTMLElement>;
+    constructor();
+    get edgeMin(): string;
+    get edgeMax(): string;
+    connectedCallback(): Promise<void>;
+    updated(changedProperties: PropertyValues<this>): void;
+    get componentHasError(): boolean;
+    get errorText(): string;
+    render(): import("lit").TemplateResult<1>;
+}
+export { WarpSlider };