@warp-ds/elements 2.9.1-next.3 → 2.9.1-next.4

package/dist/packages/pagination/pagination.test.js

@@ -1,8 +1,14 @@
+import { i18n } from '@lingui/core';
 import { userEvent } from '@vitest/browser/context';
 import { html } from 'lit';
 import { expect, test, vi } from 'vitest';
 import { render } from 'vitest-browser-lit';
+import { detectLocale } from '../i18n.js';
 import './pagination.js';
+function restoreDocumentLang(lang) {
+    document.documentElement.lang = lang;
+    i18n.activate(detectLocale());
+}
 test('current page is the active page', async () => {
     const component = html `<w-pagination current-page="5" pages="10" base-url="/page/"></w-pagination>`;
     const page = render(component);
@@ -92,3 +98,35 @@ test('defaults to visible-pages=7 when no visible-pages attribute is set', async
     // But 7 pages should be visible (the default)
     await expect.poll(() => page.getByRole('link').and(page.getByLabelText('Page ')).all()).toHaveLength(7);
 });
+test('uses the document lang attribute for Norwegian labels', async () => {
+    const originalLang = document.documentElement.lang;
+    try {
+        document.documentElement.lang = 'nb';
+        const component = html `<w-pagination current-page="5" pages="10" base-url="/page/"></w-pagination>`;
+        const page = render(component);
+        await expect.element(page.getByLabelText('Side 5')).toHaveAttribute('aria-current', 'page');
+        await expect.element(page.getByText('Første side')).toBeInTheDocument();
+        await expect.element(page.getByText('Forrige side')).toBeInTheDocument();
+        await expect.element(page.getByText('Neste side')).toBeInTheDocument();
+        await expect.element(page.getByText('Side 5')).toBeInTheDocument();
+    }
+    finally {
+        restoreDocumentLang(originalLang);
+    }
+});
+test.skip('updates labels when the document lang attribute changes', async () => {
+    const originalLang = document.documentElement.lang;
+    try {
+        document.documentElement.lang = 'en';
+        const component = html `<w-pagination current-page="5" pages="10" base-url="/page/"></w-pagination>`;
+        const page = render(component);
+        await expect.element(page.getByLabelText('Page 5')).toHaveAttribute('aria-current', 'page');
+        document.documentElement.lang = 'nb';
+        await expect.poll(() => page.getByLabelText('Side 5').query()).toBeInTheDocument();
+        await expect.element(page.getByLabelText('Side 5')).toHaveAttribute('aria-current', 'page');
+        await expect.element(page.getByText('Første side')).toBeInTheDocument();
+    }
+    finally {
+        restoreDocumentLang(originalLang);
+    }
+});

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

@@ -3,8 +3,6 @@ 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.
@@ -13,6 +11,7 @@ import type { SliderSlot } from '../slider-thumb/slider-thumb.js';
  */
 declare class WarpSlider extends LitElement {
     #private;
+    /** @internal */
     static shadowRootOptions: {
         delegatesFocus: boolean;
         clonable?: boolean;
@@ -26,99 +25,89 @@ declare class WarpSlider extends LitElement {
      * 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>`)
-     
-     * @summary
-     * @description
-    */
-    label: string;
-    /**
-     * @summary
-     * @description
      */
+    label: string;
     disabled: boolean;
     /**
      * Whether or not to allow values outside the range such as "Before 1950" and "2025+".
-     
-     * @summary
-     * @description
     */
     openEnded: boolean;
     /**
-     * @summary
-     * @description
+     * Validation error text, if any
      */
     error: string;
     /**
-     * @summary
-     * @description
+     * Additional description to show below the fieldset
      */
     helpText: string;
     /**
-     * @summary
-     * @description
+     * Sets the form fields and fieldset in an invalid state
      */
     invalid: boolean;
-    /** Ensures a child slider thumb has a value before allowing the containing form to submit.
-     * @summary
-     * @description
+    /**
+     * Ensures a child slider thumb has a value before allowing the containing form to submit
      */
     required: boolean;
     /**
-     * @summary
-     * @description
+     * The minimum allowed value in the range inputs
+     * @default 0
      */
     min: string;
     /**
-     * @summary
-     * @description
+     * The maximum allowed value in the range inputs
+     * @default 100
      */
     max: string;
-    /** Pass a value similar to step to create visual markers at that interval
-     * @summary
-     * @description
+    /**
+     * Pass a value similar to step to create visual markers at that interval
      */
     markers: number;
     /**
-     * @summary
-     * @description
+     * ets step on the range input to jump between values when dragging
      */
     step: number;
-    /** Suffix used in text input fields and for the min and max values of the slider.
-     * @summary
-     * @description
+    /**
+     * Suffix used in text input fields and for the min and max values of the slider
      */
     suffix: string;
     /**
-     * @summary
-     * @description
+     * Should only be used in special cases
      */
     hiddenTextfield: boolean;
-    /** Formatter for the tooltip and input mask values.
-     * @summary
-     * @description
+    /**
+     * Formatter for the tooltip and input mask values
      */
     valueFormatter: (value: string, slot: SliderSlot) => string;
-    /** Replaces {@link valueFormatter} for the tooltip. Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip.
-     * @summary
-     * @description
+    /**
+     * Overrides {@link valueFormatter} for the tooltip.
+     *
+     * Use in open-ended sliders to show for example "300+ hk" instead of "Max" in the tooltip.
      */
     tooltipFormatter: (value: string, slot: SliderSlot) => string;
-    /** Formatter for the min and max labels below the range.
-     * @summary
-     * @description
+    /**
+     * Formatter for the min and max labels below the range.
      */
     labelFormatter: (slot: SliderSlot) => string;
+    /** @internal */
     fieldset: HTMLFieldSetElement;
+    /** @internal */
     _invalidMessage: string;
+    /** @internal */
     _hasInternalError: boolean;
+    /** @internal */
     _showError: boolean;
+    /** @internal */
     _tabbableElements: Array<HTMLElement>;
     constructor();
+    /** @internal */
     get edgeMin(): string;
+    /** @internal */
     get edgeMax(): string;
     connectedCallback(): Promise<void>;
     updated(changedProperties: PropertyValues<this>): void;
+    /** @internal */
     get componentHasError(): boolean;
+    /** @internal */
     get errorText(): string;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/packages/slider/slider.js

@@ -2637,5 +2637,5 @@ Please compile your catalog first.
                 ${this.helpText}
               </p>`:j}
       </fieldset>
-    `}};l=new WeakSet,m=function(){var a;let e=this.querySelectorAll("w-slider-thumb"),o=!1;for(let i of e.values())i.min=this.edgeMin,i.max=this.edgeMax,i.step=this.step,i.suffix=(a=this.suffix)!=null?a:"",i.required=this.required,i.labelFormatter=this.labelFormatter,i.valueFormatter=this.valueFormatter,i.tooltipFormatter=this.tooltipFormatter,i.openEnded=this.openEnded,i._hiddenTextfield=this.hiddenTextfield,i.ariaLabel||(i.slot||(i.ariaLabel=this.label),i.slot==="from"&&(i.ariaLabel=`${this.label} min`),i.slot==="to"&&(i.ariaLabel=`${this.label} max`)),(i.slot==="from"||i.slot==="to")&&(o=!0),i.disabled=this.disabled,i.invalid=!!this.errorText,h(this,l,L).call(this,i);o?(this.fieldset.style.setProperty("--active-range-inline-start-padding","var(--w-slider-thumb-size, 28px)"),this.fieldset.style.setProperty("--active-range-inline-end-padding","var(--w-slider-thumb-size, 28px)")):this.fieldset.style.setProperty("--active-range-border-radius","4px")},ce=function(e){let o=e.target;h(this,l,L).call(this,o)},be=function(e){let o=e.target;h(this,l,L).call(this,o),o.slot&&h(this,l,pe).call(this)},he=function(){this.componentHasError?this._showError=!0:this._showError=!1,h(this,l,m).call(this)},ge=function(e){if(e.key==="Tab"){let o=this._tabbableElements.indexOf(e.target.shadowRoot.activeElement);if(o===-1)return;let a=e.shiftKey?-1:1,i=this._tabbableElements[o+a];if(!i)return;e.preventDefault(),i.focus()}},pe=function(){let e,o,a=this.querySelectorAll("w-slider-thumb");for(let i of a.values())i.slot==="from"&&(e=i),i.slot==="to"&&(o=i);!e||!o||!e.invalid&&o.invalid},ue=function(e){e.stopPropagation();let o=this._hasInternalError||this.invalid,a=e.target;if(this._hasInternalError=!!e.detail.invalid||this.invalid,this._invalidMessage=e.detail.invalid,o===!0&&this._hasInternalError===!1){let i=this.querySelectorAll("w-slider-thumb");for(let s of i.values())s!==a&&s.updateFieldAfterValidation()}},q=function(e,o){return(o.value===void 0||o.value===null)&&(o.value=this.openEnded?"":e),o.value===""?e:o.value},L=function(e){let o=e.slot;o||this.fieldset.style.setProperty("--from","0"),o==="from"&&this.fieldset.style.setProperty("--from",h(this,l,q).call(this,this.edgeMin,e)),(!o||o==="to")&&this.fieldset.style.setProperty("--to",h(this,l,q).call(this,this.edgeMax,e))},d.shadowRootOptions={...de.shadowRootOptions,delegatesFocus:!0},d.styles=[oe,le],b([g({reflect:!0})],d.prototype,"label",2),b([g({type:Boolean,reflect:!0})],d.prototype,"disabled",2),b([g({type:Boolean,attribute:"open-ended"})],d.prototype,"openEnded",2),b([g({type:String,reflect:!0})],d.prototype,"error",2),b([g({type:String,reflect:!0,attribute:"help-text"})],d.prototype,"helpText",2),b([g({type:Boolean,reflect:!0})],d.prototype,"invalid",2),b([g({type:Boolean,reflect:!0})],d.prototype,"required",2),b([g({reflect:!0})],d.prototype,"min",2),b([g({reflect:!0})],d.prototype,"max",2),b([g({type:Number,reflect:!0})],d.prototype,"markers",2),b([g({type:Number,reflect:!0})],d.prototype,"step",2),b([g({reflect:!0})],d.prototype,"suffix",2),b([g({type:Boolean,reflect:!0,attribute:"hidden-textfield"})],d.prototype,"hiddenTextfield",2),b([g({attribute:!1})],d.prototype,"valueFormatter",2),b([g({attribute:!1})],d.prototype,"tooltipFormatter",2),b([g({attribute:!1})],d.prototype,"labelFormatter",2),b([je("fieldset")],d.prototype,"fieldset",2),b([T()],d.prototype,"_invalidMessage",2),b([T()],d.prototype,"_hasInternalError",2),b([T()],d.prototype,"_showError",2),b([T()],d.prototype,"_tabbableElements",2);customElements.get("w-slider")||customElements.define("w-slider",d);export{d as WarpSlider};
+    `}};l=new WeakSet,m=function(){var a;let e=this.querySelectorAll("w-slider-thumb"),o=!1;for(let i of e.values())i.min=this.edgeMin,i.max=this.edgeMax,i.step=this.step,i.suffix=(a=this.suffix)!=null?a:"",i.required=this.required,i.labelFormatter=this.labelFormatter,i.valueFormatter=this.valueFormatter,i.tooltipFormatter=this.tooltipFormatter,i.openEnded=this.openEnded,i._hiddenTextfield=this.hiddenTextfield,i.ariaLabel||(i.slot||(i.ariaLabel=this.label),i.slot==="from"&&(i.ariaLabel=`${this.label} min`),i.slot==="to"&&(i.ariaLabel=`${this.label} max`)),(i.slot==="from"||i.slot==="to")&&(o=!0),i.disabled=this.disabled,i.invalid=!!this.errorText,h(this,l,L).call(this,i);o?(this.fieldset.style.setProperty("--active-range-inline-start-padding","var(--w-slider-thumb-size, 28px)"),this.fieldset.style.setProperty("--active-range-inline-end-padding","var(--w-slider-thumb-size, 28px)")):this.fieldset.style.setProperty("--active-range-border-radius","4px")},ce=function(e){e.stopPropagation();let o=e.target;h(this,l,L).call(this,o)},be=function(e){let o=e.target;h(this,l,L).call(this,o),o.slot&&h(this,l,pe).call(this)},he=function(){this.componentHasError?this._showError=!0:this._showError=!1,h(this,l,m).call(this)},ge=function(e){if(e.key==="Tab"){let o=this._tabbableElements.indexOf(e.target.shadowRoot.activeElement);if(o===-1)return;let a=e.shiftKey?-1:1,i=this._tabbableElements[o+a];if(!i)return;e.preventDefault(),i.focus()}},pe=function(){let e,o,a=this.querySelectorAll("w-slider-thumb");for(let i of a.values())i.slot==="from"&&(e=i),i.slot==="to"&&(o=i);!e||!o||!e.invalid&&o.invalid},ue=function(e){e.stopPropagation();let o=this._hasInternalError||this.invalid,a=e.target;if(this._hasInternalError=!!e.detail.invalid||this.invalid,this._invalidMessage=e.detail.invalid,o===!0&&this._hasInternalError===!1){let i=this.querySelectorAll("w-slider-thumb");for(let s of i.values())s!==a&&s.updateFieldAfterValidation()}},q=function(e,o){return(o.value===void 0||o.value===null)&&(o.value=this.openEnded?"":e),o.value===""?e:o.value},L=function(e){let o=e.slot;o||this.fieldset.style.setProperty("--from","0"),o==="from"&&this.fieldset.style.setProperty("--from",h(this,l,q).call(this,this.edgeMin,e)),(!o||o==="to")&&this.fieldset.style.setProperty("--to",h(this,l,q).call(this,this.edgeMax,e))},d.shadowRootOptions={...de.shadowRootOptions,delegatesFocus:!0},d.styles=[oe,le],b([g({reflect:!0})],d.prototype,"label",2),b([g({type:Boolean,reflect:!0})],d.prototype,"disabled",2),b([g({type:Boolean,attribute:"open-ended"})],d.prototype,"openEnded",2),b([g({type:String,reflect:!0})],d.prototype,"error",2),b([g({type:String,reflect:!0,attribute:"help-text"})],d.prototype,"helpText",2),b([g({type:Boolean,reflect:!0})],d.prototype,"invalid",2),b([g({type:Boolean,reflect:!0})],d.prototype,"required",2),b([g({reflect:!0})],d.prototype,"min",2),b([g({reflect:!0})],d.prototype,"max",2),b([g({type:Number,reflect:!0})],d.prototype,"markers",2),b([g({type:Number,reflect:!0})],d.prototype,"step",2),b([g({reflect:!0})],d.prototype,"suffix",2),b([g({type:Boolean,reflect:!0,attribute:"hidden-textfield"})],d.prototype,"hiddenTextfield",2),b([g({attribute:!1})],d.prototype,"valueFormatter",2),b([g({attribute:!1})],d.prototype,"tooltipFormatter",2),b([g({attribute:!1})],d.prototype,"labelFormatter",2),b([je("fieldset")],d.prototype,"fieldset",2),b([T()],d.prototype,"_invalidMessage",2),b([T()],d.prototype,"_hasInternalError",2),b([T()],d.prototype,"_showError",2),b([T()],d.prototype,"_tabbableElements",2);customElements.get("w-slider")||customElements.define("w-slider",d);export{d as WarpSlider};
 //# sourceMappingURL=slider.js.map