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

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

@@ -1,64 +1,67 @@
-import { css } from 'lit';
+import { css } from "lit";
 export const wDatepickerDayStyles = css `
-  /* === Day Cell === */
-  .w-datepicker__day {
-    /* No longer in use? */
-    --_day-in-range-background: var(--day-in-range-background, var(--w-s-color-background-primary-subtle-active));
+	/* === Day Cell === */
+	.w-datepicker__day {
+		/* No longer in use? */
+		--_day-in-range-background: var(
+			--day-in-range-background,
+			var(--w-s-color-background-primary-subtle-active)
+		);
 
-    text-align: center;
-    cursor: pointer;
-    outline: none;
-    position: relative;
+		text-align: center;
+		cursor: pointer;
+		outline: none;
+		position: relative;
 
-    color: var(--day-color, var(--w-s-color-text));
-    background-color: var(--day-background, transparent);
-    width: var(--day-width, 40px);
-    height: var(--day-height, 40px);
-    padding: var(--day-padding, 0);
-    font-weight: var(--day-font-weight, normal);
-    font-size: var(--w-font-size-s);
-    line-height: var(--w-line-height-s);
-    border-radius: var(--day-border-radius, 50%);
-  }
+		color: var(--day-color, var(--w-s-color-text));
+		background-color: var(--day-background, transparent);
+		width: var(--day-width, 40px);
+		height: var(--day-height, 40px);
+		padding: var(--day-padding, 0);
+		font-weight: var(--day-font-weight, normal);
+		font-size: var(--w-font-size-s);
+		line-height: var(--w-line-height-s);
+		border-radius: var(--day-border-radius, 50%);
+	}
 
-  .w-datepicker__day:hover {
-    --day-color: var(--w-s-color-text);
-    --day-background: var(--w-s-color-background-hover);
-    --day-border-radius: 50%;
-  }
-  .w-datepicker__day:active {
-    --day-color: var(--w-s-color-text);
-    --day-background: var(--w-s-color-background-active);
-    --day-border-radius: 50%;
-  }
+	.w-datepicker__day:hover {
+		--day-color: var(--w-s-color-text);
+		--day-background: var(--w-s-color-background-hover);
+		--day-border-radius: 50%;
+	}
+	.w-datepicker__day:active {
+		--day-color: var(--w-s-color-text);
+		--day-background: var(--w-s-color-background-active);
+		--day-border-radius: 50%;
+	}
 
-  .w-datepicker__day:focus-visible {
-    text-decoration: none;
-    outline: 2px solid var(--w-s-color-border-focus);
-    outline-offset: var(--w-outline-offset, -2px);
-  }
+	.w-datepicker__day:focus-visible {
+		text-decoration: none;
+		outline: 2px solid var(--w-s-color-border-focus);
+		outline-offset: var(--w-outline-offset, -2px);
+	}
 
-  /* === Day variants === */
-  .w-datepicker__day--today {
-    --day-font-weight: bold;
-  }
+	/* === Day variants === */
+	.w-datepicker__day--today {
+		--day-font-weight: bold;
+	}
 
-  .w-datepicker__day--selected {
-    --day-background: var(--w-s-color-background-primary);
-    --day-color: var(--w-s-color-text-inverted);
-    --day-font-weight: bold;
-  }
-  .w-datepicker__day--selected:hover,
-  .w-datepicker__day--selected:focus-visible {
-    --day-background: var(--w-s-color-background-primary-hover);
-    --day-color: var(--w-s-color-text-inverted);
-    --day-font-weight: bold;
-  }
+	.w-datepicker__day--selected {
+		--day-background: var(--w-s-color-background-primary);
+		--day-color: var(--w-s-color-text-inverted);
+		--day-font-weight: bold;
+	}
+	.w-datepicker__day--selected:hover,
+	.w-datepicker__day--selected:focus-visible {
+		--day-background: var(--w-s-color-background-primary-hover);
+		--day-color: var(--w-s-color-text-inverted);
+		--day-font-weight: bold;
+	}
 
-  .w-datepicker__day--disabled,
-  .w-datepicker__day--disabled:hover {
-    --day-color: var(--w-s-color-text-disabled);
-    cursor: not-allowed;
-    pointer-events: none;
-  }
+	.w-datepicker__day--disabled,
+	.w-datepicker__day--disabled:hover {
+		--day-color: var(--w-s-color-text-disabled);
+		cursor: not-allowed;
+		pointer-events: none;
+	}
 `;

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,3 +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 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,3 +26,42 @@ export function fromISOToDate(isoString) {
     }
     return new Date(timestamp);
 }
+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 parts = new Intl.DateTimeFormat(placeholderLocale, {
+        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";
+        return part.value;
+    })
+        .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);
+}

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +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");
+    });
+    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");
+    });
+});
+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");
+    });
+    test("keeps non-ISO values unchanged", () => {
+        expect(getDateInputDisplayValue("25/03/2026", "en")).toBe("25/03/2026");
+    });
+});

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

@@ -1,10 +1,12 @@
-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.
  *
+ * [Warp component reference](https://warp-ds.github.io/docs/components/expandable/frameworks/elements)
+ *
  * @slot title - Alternative to the `title` attribute should you need to provide some additional markup.
  */
 declare class WarpExpandable extends LitElement {
@@ -28,11 +30,11 @@ declare class WarpExpandable extends LitElement {
     /**
      * @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
      */
-    buttonClass: string;
+    buttonClass: string | undefined;
     /**
      * @deprecated Probably does not work the way you expect. The class must exist inside the shadow DOM of the component.
      */
-    contentClass: string;
+    contentClass: string | undefined;
     /**
      * Controls chevron visibility
      */
@@ -44,7 +46,7 @@ declare class WarpExpandable extends LitElement {
     /**
      * Wrap the toggle button in a heading element with the specified level. If headingLevel is not specified, the button will not be wrapped by a heading element.
      */
-    headingLevel: number;
+    headingLevel: number | undefined;
     private _hasTitle;
     private _showChevronUp;
     static styles: import("lit").CSSResult[];
@@ -54,4 +56,9 @@ declare class WarpExpandable extends LitElement {
     get _expandableSlot(): import("lit").TemplateResult<1>;
     render(): import("lit").TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        "w-expandable": WarpExpandable;
+    }
+}
 export { WarpExpandable };

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([]);