@warp-ds/elements 2.10.0-next.2 → 2.10.0-next.20

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,73 +1,52 @@
-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.
  *
- * [See Storybook for usage examples](https://warp-ds.github.io/elements/?path=/docs/layout-expandable--docs)
- *
  * @slot title - Alternative to the `title` attribute should you need to provide some additional markup.
  */
 declare class WarpExpandable extends LitElement {
     #private;
     /**
-     * @summary
-     * @description
+     * Controls component's expanded state
      */
     expanded: boolean;
     /**
-     * @summary
-     * @description
+     * Component title. Used to display the title value which is always present regardless of whether the component is open or closed.
      */
     title: string;
     /**
-     * @summary
-     * @description
+     * Will make the expandable a Box
      */
     box: boolean;
     /**
-     * @summary
-     * @description
+     * Will make the expandable full-width on the sm breakpoint size
      */
     bleed: boolean;
     /**
-     * @summary
-     * @description
+     * @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;
     /**
-     * @summary
-     * @description
+     * @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;
     /**
-     * @summary
-     * @description
+     * Controls chevron visibility
      */
     noChevron: boolean;
     /**
-     * @summary
-     * @description
+     * Will animate the expansion/collapse
      */
     animated: boolean;
     /**
-     * @summary
-     * @description
-     */
-    headingLevel: number;
-    /**
-     * @summary
-     * @description
+     * 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.
      */
-    /** @internal */
-    _hasTitle: boolean;
-    /**
-     * @summary
-     * @description
-     */
-    /** @internal */
-    _showChevronUp: boolean;
+    headingLevel: number | undefined;
+    private _hasTitle;
+    private _showChevronUp;
     static styles: import("lit").CSSResult[];
     updated(changedProperties: PropertyValues<this>): void;
     firstUpdated(): void;

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 { describe, expect, test, beforeEach, afterEach } 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([]);