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

package/dist/packages/datepicker/styles/w-datepicker-month.styles.js

@@ -1,72 +1,75 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const wDatepickerMonthStyles = css `
-  .w-datepicker__month {
-    /* Sets default used in the day fragment */
-    --day-width: 40px;
+	.w-datepicker__month {
+		/* Sets default used in the day fragment */
+		--day-width: 40px;
 
-    --_month-color: var(--month-color, var(--w-s-color-text));
-    --_month-font-size: var(--month-font-size, var(--w-font-size-m));
-    --_month-line-height: var(--month-line-height, var(--w-line-height-m));
+		--_month-color: var(--month-color, var(--w-s-color-text));
+		--_month-font-size: var(--month-font-size, var(--w-font-size-m));
+		--_month-line-height: var(--month-line-height, var(--w-line-height-m));
 
-    --_month-table-min-width: var(--month-table-min-width, calc(var(--day-width) * 7));
+		--_month-table-min-width: var(
+			--month-table-min-width,
+			calc(var(--day-width) * 7)
+		);
 
-    --_weekdays-font-size: var(--weekdays-font-size, var(--w-font-size-xs));
-    --_weekdays-line-height: var(--weekdays-font-size, var(--w-line-height-xs));
-    --_weekdays-font-weight: var(--weekdays-font-weight, bold);
+		--_weekdays-font-size: var(--weekdays-font-size, var(--w-font-size-xs));
+		--_weekdays-line-height: var(--weekdays-font-size, var(--w-line-height-xs));
+		--_weekdays-font-weight: var(--weekdays-font-weight, bold);
 
-    --_weekdays-padding: var(--weekdays-padding, 8px 0 4px 0);
+		--_weekdays-padding: var(--weekdays-padding, 8px 0 4px 0);
 
-    text-align: center;
-    user-select: none;
-    display: inline-block;
+		text-align: center;
+		user-select: none;
+		display: inline-block;
 
-    color: var(--_month-color);
-    font-size: var(--_month-font-size);
-    line-height: var(--_month-line-height);
-  }
+		color: var(--_month-color);
+		font-size: var(--_month-font-size);
+		line-height: var(--_month-line-height);
+	}
 
-  .w-datepicker__month__nav {
-    margin: 0 0 8px 0;
-  }
+	.w-datepicker__month__nav {
+		margin: 0 0 8px 0;
+	}
 
-  .w-datepicker__month__nav__header {
-    text-align: center;
-    font-weight: Bold;
-  }
+	.w-datepicker__month__nav__header {
+		text-align: center;
+		font-weight: Bold;
+	}
 
-  .w-datepicker__table {
-    width: 100%;
-    border-spacing: 0;
-    border-collapse: collapse;
-    display: block;
-    min-width: var(--_month-table-min-width);
-    padding-top: 8px;
-  }
+	.w-datepicker__table {
+		width: 100%;
+		border-spacing: 0;
+		border-collapse: collapse;
+		display: block;
+		min-width: var(--_month-table-min-width);
+		padding-top: 8px;
+	}
 
-  .w-datepicker__weekday {
-    text-align: center;
-    font-size: var(--_weekdays-font-size);
-    line-height: var(--_weekdays-line-height);
-    font-weight: var(--_weekdays-font-weight);
-    padding: var(--_weekdays-padding);
-  }
+	.w-datepicker__weekday {
+		text-align: center;
+		font-size: var(--_weekdays-font-size);
+		line-height: var(--_weekdays-line-height);
+		font-weight: var(--_weekdays-font-weight);
+		padding: var(--_weekdays-padding);
+	}
 
-  .w-datepicker__month-nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-  }
+	.w-datepicker__month-nav {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		width: 100%;
+	}
 
-  .w-datepicker__month__nav__button {
-    flex-shrink: 0;
-  }
+	.w-datepicker__month__nav__button {
+		flex-shrink: 0;
+	}
 
-  .w-datepicker__month__nav__header {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-  }
+	.w-datepicker__month__nav__header {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+	}
 `;

package/dist/packages/datepicker/styles/w-datepicker.styles.js

@@ -1,95 +1,95 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const wDatepickerStyles = css `
-  /* CustomDatePicker.css */
+	/* CustomDatePicker.css */
 
-  /* container */
-  .w-datepicker-wrapper {
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-  }
-  .w-datepicker-input-wrapper {
-    position: relative;
-  }
-  /* hide the browser’s calendar icon, and prevent the native popup */
-  .w-datepicker-input {
-    /* remove default arrows/appearance */
-    -webkit-appearance: none;
-    -moz-appearance: textfield;
-    appearance: none;
+	/* container */
+	.w-datepicker-wrapper {
+		position: relative;
+		display: inline-block;
+		width: 100%;
+		font-size: var(--w-font-size-m);
+		line-height: var(--w-line-height-m);
+	}
+	.w-datepicker-input-wrapper {
+		position: relative;
+	}
+	/* hide the browser’s calendar icon, and prevent the native popup */
+	.w-datepicker-input {
+		/* remove default arrows/appearance */
+		-webkit-appearance: none;
+		-moz-appearance: textfield;
+		appearance: none;
 
-    /* basic styling */
-    display: block;
-    padding: 1.2rem 0.8rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    width: 100%;
-    height: 48px;
-    cursor: pointer;
-    font-size: var(--w-font-size-m);
-    line-height: var(--w-line-height-m);
-    background-color: var(--w-s-color-background);
-  }
-  .w-datepicker-input:hover {
-    border-color: var(--w-s-color-border-hover);
-  }
-  .w-datepicker-input:active {
-    border-color: var(--w-s-color-border-selected);
-  }
+		/* basic styling */
+		display: block;
+		padding: 1.2rem 0.8rem;
+		border: 1px solid #ccc;
+		border-radius: 4px;
+		width: 100%;
+		height: 48px;
+		cursor: pointer;
+		font-size: var(--w-font-size-m);
+		line-height: var(--w-line-height-m);
+		background-color: var(--w-s-color-background);
+	}
+	.w-datepicker-input:hover {
+		border-color: var(--w-s-color-border-hover);
+	}
+	.w-datepicker-input:active {
+		border-color: var(--w-s-color-border-selected);
+	}
 
-  .w-datepicker-input:focus,
-  .w-datepicker-input:focus-visible {
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: -2px;
-  }
+	.w-datepicker-input:focus,
+	.w-datepicker-input:focus-visible {
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: -2px;
+	}
 
-  .w-datepicker-input-label {
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-    font-weight: 700;
-    cursor: pointer;
-    padding-bottom: 0.4rem;
-    color: var(--w-s-color-text);
-    display: block;
-  }
+	.w-datepicker-input-label {
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+		font-weight: 700;
+		cursor: pointer;
+		padding-bottom: 0.4rem;
+		color: var(--w-s-color-text);
+		display: block;
+	}
 
-  /* custom calendar button */
-  .w-datepicker-button {
-    --padding-x: 14px;
-    --padding-y: 14px;
-    --border-radius: 2px; /* override to better fit inside the input field */
-    position: absolute;
-    right: 2px;
-    top: 2px;
-    pointer-events: auto; /* override parent’s none */
-  }
+	/* custom calendar button */
+	.w-datepicker-button {
+		--padding-x: 14px;
+		--padding-y: 14px;
+		--border-radius: 2px; /* override to better fit inside the input field */
+		position: absolute;
+		right: 2px;
+		top: 2px;
+		pointer-events: auto; /* override parent’s none */
+	}
 
-  input[type='date']::-webkit-inner-spin-button,
-  input[type='date']::-webkit-calendar-picker-indicator {
-    display: none;
-    -webkit-appearance: none;
-  }
-  input[type='date'],
-  input[type='time'],
-  input[type='datetime-local'],
-  input[type='month'] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-  }
-  /* Temporary dropdown, should probably use the appropriate component when it is done */
-  .w-dropdown__popover {
-    position: absolute;
-    width: max-content;
-    background-color: var(--w-s-color-background);
-    box-shadow: var(--w-shadow-s);
-    z-index: 100;
-    border-radius: 8px;
-    visibility: hidden;
-  }
-  .w-dropdown__popover--open {
-    visibility: visible;
-  }
+	input[type="date"]::-webkit-inner-spin-button,
+	input[type="date"]::-webkit-calendar-picker-indicator {
+		display: none;
+		-webkit-appearance: none;
+	}
+	input[type="date"],
+	input[type="time"],
+	input[type="datetime-local"],
+	input[type="month"] {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+	}
+	/* Temporary dropdown, should probably use the appropriate component when it is done */
+	.w-dropdown__popover {
+		position: absolute;
+		width: max-content;
+		background-color: var(--w-s-color-background);
+		box-shadow: var(--w-shadow-s);
+		z-index: 100;
+		border-radius: 8px;
+		visibility: hidden;
+	}
+	.w-dropdown__popover--open {
+		visibility: visible;
+	}
 `;

package/dist/packages/datepicker/utils.d.ts

@@ -11,6 +11,6 @@
  * @throws {Error} if string is not a valid ISO-8601 date
  */
 export declare function fromISOToDate(isoString: string): Date | null;
-export declare function getDateInputType(userAgent?: string): 'date' | 'text';
+export declare function getDateInputType(userAgent?: string): "date" | "text";
 export declare function getDateInputPlaceholder(locale: string): string;
 export declare function getDateInputDisplayValue(value: string, locale: string): string;

package/dist/packages/datepicker/utils.js

@@ -12,7 +12,7 @@ const dateOnlyRe = /^\d{4}-\d{2}-\d{2}$/;
  * @throws {Error} if string is not a valid ISO-8601 date
  */
 export function fromISOToDate(isoString) {
-    if (typeof isoString !== 'string') {
+    if (typeof isoString !== "string") {
         return null;
     }
     // If it's a bare date (YYYY-MM-DD), treat it as UTC midnight
@@ -26,36 +26,42 @@ export function fromISOToDate(isoString) {
     }
     return new Date(timestamp);
 }
-export function getDateInputType(userAgent = typeof navigator !== 'undefined' ? navigator.userAgent : '') {
-    const isIOS = /iP(hone|od|ad)/.test(userAgent);
-    const isSafari = /Safari/.test(userAgent) && !/(Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android)/.test(userAgent);
-    return isIOS || isSafari ? 'text' : 'date';
+const iDeviceRe = /iP(hone|od|ad)/;
+const safariRe = /Safari/;
+const chromiumRe = /(Chrome|Chromium|CriOS|FxiOS|Edg|OPR|Android)/;
+export function getDateInputType(userAgent = typeof navigator !== "undefined" ? navigator.userAgent : "") {
+    const isIOS = iDeviceRe.test(userAgent);
+    const isSafari = safariRe.test(userAgent) && !chromiumRe.test(userAgent);
+    return isIOS || isSafari ? "text" : "date";
 }
 export function getDateInputPlaceholder(locale) {
-    const placeholderLocale = locale === 'en' ? 'en-GB' : locale;
+    const placeholderLocale = locale === "en" ? "en-GB" : locale;
     const parts = new Intl.DateTimeFormat(placeholderLocale, {
-        day: '2-digit',
-        month: '2-digit',
-        year: 'numeric',
-        timeZone: 'UTC',
+        day: "2-digit",
+        month: "2-digit",
+        year: "numeric",
+        timeZone: "UTC",
     }).formatToParts(new Date(Date.UTC(2006, 0, 2)));
     return parts
         .map((part) => {
-        if (part.type === 'day')
-            return 'dd';
-        if (part.type === 'month')
-            return 'mm';
-        if (part.type === 'year')
-            return 'yyyy';
+        if (part.type === "day")
+            return "dd";
+        if (part.type === "month")
+            return "mm";
+        if (part.type === "year")
+            return "yyyy";
         return part.value;
     })
-        .join('');
+        .join("");
 }
 export function getDateInputDisplayValue(value, locale) {
     const match = dateOnlyRe.exec(value);
     if (!match) {
         return value;
     }
-    const [year, month, day] = value.split('-');
-    return getDateInputPlaceholder(locale).replace('yyyy', year).replace('mm', month).replace('dd', day);
+    const [year, month, day] = value.split("-");
+    return getDateInputPlaceholder(locale)
+        .replace("yyyy", year)
+        .replace("mm", month)
+        .replace("dd", day);
 }

package/dist/packages/datepicker/utils.test.js

@@ -1,29 +1,29 @@
-import { describe, expect, test } from 'vitest';
-import { getDateInputDisplayValue, getDateInputPlaceholder, getDateInputType } from './utils.js';
-describe('getDateInputType', () => {
-    test('uses text input for Safari to avoid Safari showing a concrete empty-state date', () => {
-        expect(getDateInputType('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Safari/605.1.15')).toBe('text');
+import { describe, expect, test } from "vitest";
+import { getDateInputDisplayValue, getDateInputPlaceholder, getDateInputType, } from "./utils.js";
+describe("getDateInputType", () => {
+    test("uses text input for Safari to avoid Safari showing a concrete empty-state date", () => {
+        expect(getDateInputType("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.0 Safari/605.1.15")).toBe("text");
     });
-    test('uses text input for iOS browsers', () => {
-        expect(getDateInputType('Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0.0.0 Mobile/15E148 Safari/604.1')).toBe('text');
+    test("uses text input for iOS browsers", () => {
+        expect(getDateInputType("Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/120.0.0.0 Mobile/15E148 Safari/604.1")).toBe("text");
     });
-    test('keeps date input for Chrome on desktop', () => {
-        expect(getDateInputType('Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36')).toBe('date');
+    test("keeps date input for Chrome on desktop", () => {
+        expect(getDateInputType("Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36")).toBe("date");
     });
 });
-describe('getDateInputPlaceholder', () => {
-    test('returns a locale-shaped date format hint', () => {
-        expect(getDateInputPlaceholder('en')).toBe('dd/mm/yyyy');
-        expect(getDateInputPlaceholder('en-GB')).toBe('dd/mm/yyyy');
-        expect(getDateInputPlaceholder('nb')).toBe('dd.mm.yyyy');
+describe("getDateInputPlaceholder", () => {
+    test("returns a locale-shaped date format hint", () => {
+        expect(getDateInputPlaceholder("en")).toBe("dd/mm/yyyy");
+        expect(getDateInputPlaceholder("en-GB")).toBe("dd/mm/yyyy");
+        expect(getDateInputPlaceholder("nb")).toBe("dd.mm.yyyy");
     });
 });
-describe('getDateInputDisplayValue', () => {
-    test('formats ISO dates using the locale-shaped date format hint', () => {
-        expect(getDateInputDisplayValue('2026-03-25', 'en')).toBe('25/03/2026');
-        expect(getDateInputDisplayValue('2026-03-25', 'nb')).toBe('25.03.2026');
+describe("getDateInputDisplayValue", () => {
+    test("formats ISO dates using the locale-shaped date format hint", () => {
+        expect(getDateInputDisplayValue("2026-03-25", "en")).toBe("25/03/2026");
+        expect(getDateInputDisplayValue("2026-03-25", "nb")).toBe("25.03.2026");
     });
-    test('keeps non-ISO values unchanged', () => {
-        expect(getDateInputDisplayValue('25/03/2026', 'en')).toBe('25/03/2026');
+    test("keeps non-ISO values unchanged", () => {
+        expect(getDateInputDisplayValue("25/03/2026", "en")).toBe("25/03/2026");
     });
 });

package/dist/packages/expandable/expandable.d.ts

@@ -1,7 +1,7 @@
-import { LitElement, PropertyValues } from 'lit';
-import '../icon/icon.js';
-import '../utils/expand-transition';
-import '../utils/unstyled-heading';
+import { LitElement, PropertyValues } from "lit";
+import "../icon/icon.js";
+import "../utils/expand-transition";
+import "../utils/unstyled-heading";
 /**
  * Expandable is a layout component used for creating expandable content areas on a page.
  *

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

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

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

@@ -1,45 +1,45 @@
-import { afterEach, beforeEach, describe, expect, test } from 'vitest';
-import { setupHydrationWarningCapture, testHydration } from '../../tests/react-hydration';
-import './expandable.js';
-describe('w-expandable React SSR hydration', () => {
+import { afterEach, beforeEach, describe, expect, test } from "vitest";
+import { setupHydrationWarningCapture, testHydration, } from "../../tests/react-hydration";
+import "./expandable.js";
+describe("w-expandable React SSR hydration", () => {
     beforeEach(() => setupHydrationWarningCapture());
     afterEach(() => {
         window.__HYDRATION_WARNINGS__ = [];
     });
-    test('default (no attributes) hydrates without warnings', async () => {
-        const warnings = await testHydration('w-expandable', {});
+    test("default (no attributes) hydrates without warnings", async () => {
+        const warnings = await testHydration("w-expandable", {});
         expect(warnings).toEqual([]);
     });
-    test('with title hydrates without warnings', async () => {
-        const warnings = await testHydration('w-expandable', {
-            title: 'Show more',
+    test("with title hydrates without warnings", async () => {
+        const warnings = await testHydration("w-expandable", {
+            title: "Show more",
         });
         expect(warnings).toEqual([]);
     });
-    test('expanded state hydrates without warnings', async () => {
-        const warnings = await testHydration('w-expandable', {
-            title: 'Show more',
+    test("expanded state hydrates without warnings", async () => {
+        const warnings = await testHydration("w-expandable", {
+            title: "Show more",
             expanded: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with box variant hydrates without warnings', async () => {
-        const warnings = await testHydration('w-expandable', {
-            title: 'Show more',
+    test("with box variant hydrates without warnings", async () => {
+        const warnings = await testHydration("w-expandable", {
+            title: "Show more",
             box: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with bleed hydrates without warnings', async () => {
-        const warnings = await testHydration('w-expandable', {
-            title: 'Show more',
+    test("with bleed hydrates without warnings", async () => {
+        const warnings = await testHydration("w-expandable", {
+            title: "Show more",
             bleed: true,
         });
         expect(warnings).toEqual([]);
     });
-    test('with animated hydrates without warnings', async () => {
-        const warnings = await testHydration('w-expandable', {
-            title: 'Show more',
+    test("with animated hydrates without warnings", async () => {
+        const warnings = await testHydration("w-expandable", {
+            title: "Show more",
             animated: true,
         });
         expect(warnings).toEqual([]);