mtrl 0.10.0-next.1 → 0.10.0-next.2

package/README.md

@@ -136,23 +136,48 @@ Button progress and card actions load on demand; enable code splitting in your b
 
 ## Web components and frameworks (experimental)
 
-From `0.10.0-next.1` (`npm install mtrl@next`), components also ship as custom elements, with thin adapters for React, Vue, Svelte and Solid. Button, switch and tabs are available so far; more follow through 0.10.x. The API may still change.
+From the 0.10.0 prereleases (`npm install mtrl@next`), components also ship as custom elements, with thin adapters for React, Vue, Svelte and Solid. The API may still change.
+
+| Element | Framework component (Vue: `M` prefix, e.g. `MTextfield`) | Kind |
+|---------|---------------------|------|
+| `<m-button>` | `Button` | action, submits or resets its form |
+| `<m-icon-button>` | `IconButton` | action or toggle (`selected`) |
+| `<m-fab>`, `<m-extended-fab>` | `Fab`, `ExtendedFab` | action |
+| `<m-checkbox>` | `Checkbox` | form control (`checked`, `indeterminate`) |
+| `<m-switch>` | `Switch` | form control (`checked`) |
+| `<m-radios>` with `<m-radio>` | `Radios`, `Radio` | form control (`value`) |
+| `<m-slider>` | `Slider` | form control (`value`, `secondValue` with `range`) |
+| `<m-textfield>` | `Textfield` | form control (`value`) |
+| `<m-tabs>` with `<m-tab>` | `Tabs`, `Tab` | selection (`value`) |
+| `<m-progress>`, `<m-loading-indicator>` | `Progress`, `LoadingIndicator` | indicator |
+| `<m-badge>`, `<m-divider>` | `Badge`, `Divider` | display |
+
+More components follow through 0.10.x; the others are available as factories today.
 
 ```html
 <script type="module">
   import 'mtrl/elements/css';            // the elements' styles
   import { defineAll } from 'mtrl/elements';
-  defineAll();                           // registers <m-button>, <m-switch>, <m-tabs>, <m-tab>
+  defineAll();                           // registers every element (<m-button>, <m-switch>, …)
 </script>
 
-<m-switch name="wifi" checked>Wi-Fi</m-switch>
+<form>
+  <m-textfield name="email" type="email" label="Email" required></m-textfield>
+  <m-radios name="plan" value="free" aria-label="Plan">
+    <m-radio value="free">Free</m-radio>
+    <m-radio value="pro">Pro</m-radio>
+  </m-radios>
+  <m-switch name="news" checked>Newsletter</m-switch>
+  <m-button type="submit">Sign up</m-button>
+</form>
+
 <m-tabs value="songs">
   <m-tab value="songs">Songs</m-tab>
   <m-tab value="albums">Albums</m-tab>
 </m-tabs>
 ```
 
-The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the elements render in shadow DOM and pick up the theme's tokens. Attributes are defaults and properties the live state, as on native controls; form controls take part in forms, reset and validation.
+The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the elements render in shadow DOM and pick up the theme's tokens. Attributes are defaults and properties the live state, as on native controls: a `checked` or `value` attribute sets the state until the user or a script changes it, and `form.reset()` goes back to it. Form controls take part in forms (their host's `name`), reset, validation and back-navigation restore.
 
 | Framework | Import | Two-way binding |
 |-----------|--------|-----------------|
@@ -161,7 +186,7 @@ The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the
 | Svelte 5 | `import { Switch } from 'mtrl/svelte'` | `bind:checked` |
 | Solid | `import { Switch } from 'mtrl/solid'` | `checked` + `onChange` |
 
-Each framework is an optional peer dependency; mtrl installs none of them. All adapters render on the server and hydrate.
+Each framework is an optional peer dependency; mtrl installs none of them. All adapters render on the server and hydrate. Angular apps use the elements directly, with `CUSTOM_ELEMENTS_SCHEMA`.
 
 ## Building your own components
 

package/dist/README.md

@@ -136,23 +136,48 @@ Button progress and card actions load on demand; enable code splitting in your b
 
 ## Web components and frameworks (experimental)
 
-From `0.10.0-next.1` (`npm install mtrl@next`), components also ship as custom elements, with thin adapters for React, Vue, Svelte and Solid. Button, switch and tabs are available so far; more follow through 0.10.x. The API may still change.
+From the 0.10.0 prereleases (`npm install mtrl@next`), components also ship as custom elements, with thin adapters for React, Vue, Svelte and Solid. The API may still change.
+
+| Element | Framework component (Vue: `M` prefix, e.g. `MTextfield`) | Kind |
+|---------|---------------------|------|
+| `<m-button>` | `Button` | action, submits or resets its form |
+| `<m-icon-button>` | `IconButton` | action or toggle (`selected`) |
+| `<m-fab>`, `<m-extended-fab>` | `Fab`, `ExtendedFab` | action |
+| `<m-checkbox>` | `Checkbox` | form control (`checked`, `indeterminate`) |
+| `<m-switch>` | `Switch` | form control (`checked`) |
+| `<m-radios>` with `<m-radio>` | `Radios`, `Radio` | form control (`value`) |
+| `<m-slider>` | `Slider` | form control (`value`, `secondValue` with `range`) |
+| `<m-textfield>` | `Textfield` | form control (`value`) |
+| `<m-tabs>` with `<m-tab>` | `Tabs`, `Tab` | selection (`value`) |
+| `<m-progress>`, `<m-loading-indicator>` | `Progress`, `LoadingIndicator` | indicator |
+| `<m-badge>`, `<m-divider>` | `Badge`, `Divider` | display |
+
+More components follow through 0.10.x; the others are available as factories today.
 
 ```html
 <script type="module">
   import 'mtrl/elements/css';            // the elements' styles
   import { defineAll } from 'mtrl/elements';
-  defineAll();                           // registers <m-button>, <m-switch>, <m-tabs>, <m-tab>
+  defineAll();                           // registers every element (<m-button>, <m-switch>, …)
 </script>
 
-<m-switch name="wifi" checked>Wi-Fi</m-switch>
+<form>
+  <m-textfield name="email" type="email" label="Email" required></m-textfield>
+  <m-radios name="plan" value="free" aria-label="Plan">
+    <m-radio value="free">Free</m-radio>
+    <m-radio value="pro">Pro</m-radio>
+  </m-radios>
+  <m-switch name="news" checked>Newsletter</m-switch>
+  <m-button type="submit">Sign up</m-button>
+</form>
+
 <m-tabs value="songs">
   <m-tab value="songs">Songs</m-tab>
   <m-tab value="albums">Albums</m-tab>
 </m-tabs>
 ```
 
-The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the elements render in shadow DOM and pick up the theme's tokens. Attributes are defaults and properties the live state, as on native controls; form controls take part in forms, reset and validation.
+The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the elements render in shadow DOM and pick up the theme's tokens. Attributes are defaults and properties the live state, as on native controls: a `checked` or `value` attribute sets the state until the user or a script changes it, and `form.reset()` goes back to it. Form controls take part in forms (their host's `name`), reset, validation and back-navigation restore.
 
 | Framework | Import | Two-way binding |
 |-----------|--------|-----------------|
@@ -161,7 +186,7 @@ The page still loads mtrl's base styles and a theme (see [Styles](#styles)); the
 | Svelte 5 | `import { Switch } from 'mtrl/svelte'` | `bind:checked` |
 | Solid | `import { Switch } from 'mtrl/solid'` | `checked` + `onChange` |
 
-Each framework is an optional peer dependency; mtrl installs none of them. All adapters render on the server and hydrate.
+Each framework is an optional peer dependency; mtrl installs none of them. All adapters render on the server and hydrate. Angular apps use the elements directly, with `CUSTOM_ELEMENTS_SCHEMA`.
 
 ## Building your own components
 

package/dist/components/datepicker/constants.d.ts

@@ -101,4 +101,5 @@ export declare const DATEPICKER_ICONS: {
     readonly edit: "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"m3 17.25 11.06-11.06 3.75 3.75L6.75 21H3v-3.75ZM20.71 7.04l-1.83 1.83-3.75-3.75 1.83-1.83a1 1 0 0 1 1.41 0l2.34 2.34a1 1 0 0 1 0 1.41Z\"/></svg>";
     readonly previous: "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"m15.4 7.4-1.4-1.4-6 6 6 6 1.4-1.4-4.6-4.6Z\"/></svg>";
     readonly next: "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"m8.6 7.4 1.4-1.4 6 6-6 6-1.4-1.4 4.6-4.6Z\"/></svg>";
+    readonly close: "<svg viewBox=\"0 0 24 24\" width=\"24\" height=\"24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z\"/></svg>";
 };

package/dist/components/datepicker/constants.js

@@ -53,4 +53,5 @@ export const DATEPICKER_ICONS = {
     edit: '<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="m3 17.25 11.06-11.06 3.75 3.75L6.75 21H3v-3.75ZM20.71 7.04l-1.83 1.83-3.75-3.75 1.83-1.83a1 1 0 0 1 1.41 0l2.34 2.34a1 1 0 0 1 0 1.41Z"/></svg>',
     previous: '<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="m15.4 7.4-1.4-1.4-6 6 6 6 1.4-1.4-4.6-4.6Z"/></svg>',
     next: '<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="m8.6 7.4 1.4-1.4 6 6-6 6-1.4-1.4 4.6-4.6Z"/></svg>',
+    close: '<svg viewBox="0 0 24 24" width="24" height="24" fill="currentColor" aria-hidden="true"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12Z"/></svg>',
 };

package/dist/components/datepicker/datepicker.js

@@ -33,10 +33,10 @@ const createDatePicker = (config = {}) => {
     const today = parseDate(new Date());
     const state = {
         id, prefix: PREFIX, label: settings.label || "Select date", selectedDate: null, rangeEndDate: null,
-        currentView: ["month", "year"].includes(settings.initialView ?? "") ? settings.initialView : "day",
+        currentView: settings.variant !== "fullscreen" && ["month", "year"].includes(settings.initialView ?? "") ? settings.initialView : "day",
         currentMonth: today.getMonth(), currentYear: today.getFullYear(), focusedDate: today,
         minDate: parseDate(settings.minDate ?? null), maxDate: parseDate(settings.maxDate ?? null),
-        dateFormat: settings.dateFormat || "MM/DD/YYYY", variant: settings.variant === "modal" || settings.variant === "modal-input" ? settings.variant : "docked",
+        dateFormat: settings.dateFormat || "MM/DD/YYYY", variant: settings.variant === "modal" || settings.variant === "modal-input" || settings.variant === "fullscreen" ? settings.variant : "docked",
         selectionMode: settings.selectionMode === "range" ? "range" : "single", inputMode: settings.variant === "modal-input",
         specialDates: (settings.specialDates ?? []).map(item => ({ ...item })),
         isAllowed: date => (!state.minDate || date >= state.minDate) && (!state.maxDate || date <= state.maxDate) && !state.specialDates.some(item => { const special = parseDate(item.date); return item.disabled && special && isSameDay(date, special); }),
@@ -73,6 +73,8 @@ const createDatePicker = (config = {}) => {
     dialog.id = `${id}-dialog`;
     dialog.className = cls("calendar");
     dialog.classList.add(base.getClass(`datepicker--${modal ? "modal" : "docked"}`));
+    if (state.variant === "fullscreen")
+        dialog.classList.add(base.getClass("datepicker--fullscreen"));
     dialog.setAttribute("aria-modal", String(modal));
     if (settings.animate)
         dialog.classList.add(base.getClass("datepicker--animate"));
@@ -105,11 +107,65 @@ const createDatePicker = (config = {}) => {
         const element = track();
         if (element?.clientWidth)
             element.scrollLeft = (rtl(element) ? -1 : 1) * element.clientWidth;
+        const years = dialog.querySelector(`.${cls("years")}`);
+        const year = years?.querySelector('[aria-pressed="true"]');
+        if (years && year)
+            years.scrollTop = year.offsetTop - (years.clientHeight - year.offsetHeight) / 2;
+    };
+    const monthIndex = (date) => date.getFullYear() * 12 + date.getMonth();
+    const fromIndex = (index) => new Date(Math.floor(index / 12), index % 12, 1);
+    const list = () => dialog.querySelector(`.${cls("list")}`);
+    const limits = () => [state.minDate ? monthIndex(state.minDate) : -Infinity, state.maxDate ? monthIndex(state.maxDate) : Infinity];
+    let shiftBy = null;
+    const ensureWindow = () => {
+        if (state.variant !== "fullscreen")
+            return;
+        const focus = state.currentYear * 12 + state.currentMonth;
+        const start = state.listStart ? monthIndex(state.listStart) : NaN;
+        if (start <= focus && focus < start + (state.listLength ?? 0))
+            return;
+        const [min, max] = limits();
+        const first = Math.max(min, focus - 12), last = Math.min(max, focus + 12);
+        state.listStart = fromIndex(first);
+        state.listLength = last - first + 1;
+    };
+    const extend = (element) => {
+        const [min, max] = limits();
+        const start = monthIndex(state.listStart), end = start + state.listLength - 1;
+        const margin = element.clientHeight;
+        if (element.scrollTop < margin && start > min) {
+            const first = Math.max(min, start - 12);
+            state.listStart = fromIndex(first);
+            state.listLength = end - first + 1;
+            shiftBy = element.scrollHeight;
+        }
+        else if (element.scrollHeight - element.scrollTop - element.clientHeight < margin && end < max) {
+            state.listLength = Math.min(max, end + 12) - start + 1;
+        }
+        else
+            return;
+        const active = doc.activeElement instanceof HTMLElement ? doc.activeElement.dataset.date : undefined;
+        render();
+        if (active)
+            dialog.querySelector(`[data-date="${active}"]`)?.focus({ preventScroll: true });
+    };
+    const reveal = () => {
+        const element = list();
+        const section = element?.querySelector(`[data-month-key="${state.currentYear}-${state.currentMonth}"]`);
+        if (element && section)
+            element.scrollTop = section.offsetTop;
     };
     const render = (focus = false, action) => {
         if (!opened || destroyed)
             return;
+        ensureWindow();
+        const previous = list();
+        const kept = previous && { top: previous.scrollTop, height: previous.scrollHeight };
         dialog.replaceChildren(renderCalendar(state), announcement);
+        const current = list();
+        if (current && kept)
+            current.scrollTop = kept.top + (shiftBy === null ? 0 : current.scrollHeight - kept.height);
+        shiftBy = null;
         centre();
         announcement.textContent = new Date(state.currentYear, state.currentMonth, 1).toLocaleDateString("en-US", { month: "long", year: "numeric" });
         if (action)
@@ -150,6 +206,7 @@ const createDatePicker = (config = {}) => {
         opened = true;
         resetDraft();
         state.inputMode = state.variant === "modal-input";
+        state.listStart = undefined;
         let initial = committed ?? today;
         if (state.minDate && initial < state.minDate)
             initial = state.minDate;
@@ -169,6 +226,7 @@ const createDatePicker = (config = {}) => {
         if (modal)
             unlock = lockScroll(doc);
         centre();
+        reveal();
         trigger.setAttribute("aria-expanded", "true");
         focusCurrent();
         base.emit("open", { value: getValue() });
@@ -256,7 +314,7 @@ const createDatePicker = (config = {}) => {
             render(true);
     };
     const navigate = (amount) => {
-        const count = state.currentView === "day" ? amount : state.currentView === "month" ? amount * 12 : amount * 12 * 21;
+        const count = state.currentView === "day" ? amount : amount * 12;
         const anchor = new Date(state.currentYear, state.currentMonth, 1);
         anchor.setDate(Math.min(state.focusedDate.getDate(), new Date(state.currentYear, state.currentMonth + 1, 0).getDate()));
         setDisplayDate(addMonths(anchor, count));
@@ -363,10 +421,11 @@ const createDatePicker = (config = {}) => {
         if (target?.dataset.date) {
             const date = parseDate(target.dataset.date);
             let next;
+            const ahead = rtl(dialog) ? -1 : 1;
             if (event.key === "ArrowLeft")
-                next = addDays(date, -1);
+                next = addDays(date, -ahead);
             else if (event.key === "ArrowRight")
-                next = addDays(date, 1);
+                next = addDays(date, ahead);
             else if (event.key === "ArrowUp")
                 next = addDays(date, -7);
             else if (event.key === "ArrowDown")
@@ -395,7 +454,8 @@ const createDatePicker = (config = {}) => {
         else if (target?.hasAttribute('data-month') || target?.hasAttribute('data-year')) {
             const buttons = Array.from(dialog.querySelectorAll('[data-month], [data-year]'));
             let index = buttons.indexOf(target);
-            const delta = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -3, ArrowDown: 3 }[event.key];
+            const ahead = rtl(dialog) ? -1 : 1;
+            const delta = { ArrowLeft: -ahead, ArrowRight: ahead, ArrowUp: -3, ArrowDown: 3 }[event.key];
             if (event.key === "Home")
                 index = 0;
             else if (event.key === "End")
@@ -430,6 +490,10 @@ const createDatePicker = (config = {}) => {
         render(!!active?.dataset.date, active?.dataset.action);
     };
     const onScroll = (event) => {
+        if (event.type === "scroll" && event.target instanceof HTMLElement && event.target === list()) {
+            extend(event.target);
+            return;
+        }
         if (!(event.target instanceof HTMLElement) || event.target !== track())
             return;
         if (event.type === "scrollend") {

package/dist/components/datepicker/render.js

@@ -2,20 +2,22 @@ import { DATEPICKER_ICONS } from "./constants.js";
 import { setHTML } from "../../core/dom/html.js";
 import { createElement } from "../../core/dom/create.js";
 import { MONTH_NAMES, MONTH_NAMES_SHORT } from "./types.js";
-import { formatDate, generateCalendarDates, generateYearRange, isSameDay, parseDate } from "./utils.js";
+import { formatDate, generateCalendarDates, isSameDay, parseDate } from "./utils.js";
 export function renderCalendar(state) {
     const cls = (name) => `${state.prefix}-datepicker__${name}`;
     const make = (tag, name, text, attributes) => createElement({ tag, className: cls(name), text, attributes });
     const button = (name, text, action, label = text) => {
         const element = make("button", name, text, { type: "button", "data-action": action, "aria-label": label });
-        const icon = action === "toggle-mode" ? (state.inputMode ? DATEPICKER_ICONS.calendar : DATEPICKER_ICONS.edit) : action === "prev" ? DATEPICKER_ICONS.previous : action === "next" ? DATEPICKER_ICONS.next : null;
+        const icon = name === "close" ? DATEPICKER_ICONS.close : action === "toggle-mode" ? (state.inputMode ? DATEPICKER_ICONS.calendar : DATEPICKER_ICONS.edit) : action === "prev" ? DATEPICKER_ICONS.previous : action === "next" ? DATEPICKER_ICONS.next : null;
         if (icon)
             setHTML(element, icon);
         return element;
     };
-    const monthGrid = (year, month, current) => {
+    const monthGrid = (year, month, current, list = false) => {
         const grid = make("div", "days", undefined, { role: "grid", "aria-label": `${MONTH_NAMES[month]} ${year}`, "aria-describedby": `${state.id}-keyboard` });
         const weekdays = make("div", "weekdays", undefined, { role: "row" });
+        if (list)
+            weekdays.classList.add(cls("sr-only"));
         for (const name of ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"])
             weekdays.append(make("span", "weekday", name[0], { role: "columnheader", "aria-label": name }));
         grid.append(weekdays);
@@ -26,6 +28,10 @@ export function renderCalendar(state) {
             for (const item of dates.slice(week * 7, week * 7 + 7)) {
                 const selected = !!state.selectedDate && (isSameDay(item.date, state.selectedDate) || !!state.rangeEndDate && isSameDay(item.date, state.rangeEndDate));
                 const inRange = !!state.selectedDate && !!state.rangeEndDate && item.date >= state.selectedDate && item.date <= state.rangeEndDate;
+                if (list && !item.isCurrentMonth) {
+                    row.append(make("div", "cell", undefined, { role: "gridcell" }));
+                    continue;
+                }
                 const cell = make("div", "cell", undefined, { role: "gridcell", "aria-selected": String(selected || inRange) });
                 if (inRange)
                     cell.classList.add(cls("cell--range"));
@@ -61,11 +67,19 @@ export function renderCalendar(state) {
     };
     const content = make("div", "content");
     const modal = state.variant !== "docked";
+    const fullscreen = state.variant === "fullscreen";
+    const confirmDisabled = !state.selectedDate || !state.isAllowed(state.selectedDate) || state.selectionMode === "range" && (!state.rangeEndDate || !state.isAllowed(state.rangeEndDate));
     if (modal) {
         const header = make("div", "modal-header");
+        if (fullscreen) {
+            const save = button("save", "Save", "confirm");
+            save.disabled = confirmDisabled;
+            header.append(button("close", "", "cancel", "Close"), save);
+        }
         header.append(make("div", "title", state.label, { id: `${state.id}-title` }));
-        const headline = state.selectedDate ? formatDate(state.selectedDate, "MMM D, YYYY") : "Select date";
-        header.append(make("div", "headline", state.selectionMode === "range" && state.rangeEndDate ? `${headline} – ${formatDate(state.rangeEndDate, "MMM D, YYYY")}` : headline));
+        const pattern = fullscreen ? "MMM D" : "MMM D, YYYY";
+        const headline = state.selectedDate ? formatDate(state.selectedDate, pattern) : state.selectionMode === "range" ? "Select range" : "Select date";
+        header.append(make("div", "headline", state.selectionMode === "range" && state.rangeEndDate ? `${headline} – ${formatDate(state.rangeEndDate, pattern)}` : headline));
         header.append(button("mode-toggle", state.inputMode ? "▦" : "✎", "toggle-mode", state.inputMode ? "Switch to calendar" : "Switch to date input"));
         content.append(header);
     }
@@ -82,12 +96,30 @@ export function renderCalendar(state) {
         }
         content.append(fields);
     }
+    else if (fullscreen) {
+        const weekdays = make("div", "weekdays", undefined, { "aria-hidden": "true" });
+        for (const name of ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"])
+            weekdays.append(make("span", "weekday", name[0]));
+        const list = make("div", "list");
+        const start = state.listStart ?? new Date(state.currentYear, state.currentMonth, 1);
+        for (let index = 0; index < (state.listLength ?? 1); index++) {
+            const first = new Date(start.getFullYear(), start.getMonth() + index, 1);
+            const section = make("section", "month-section", undefined, { "data-month-key": `${first.getFullYear()}-${first.getMonth()}` });
+            section.append(make("div", "subhead", `${MONTH_NAMES[first.getMonth()]} ${first.getFullYear()}`, { "aria-hidden": "true" }));
+            section.append(monthGrid(first.getFullYear(), first.getMonth(), first.getFullYear() === state.focusedDate.getFullYear() && first.getMonth() === state.focusedDate.getMonth(), true));
+            list.append(section);
+        }
+        content.append(weekdays, list, make("div", "sr-only", "Use arrow keys for days, Home and End for the week, Page Up and Page Down for months, with Shift for years.", { id: `${state.id}-keyboard` }));
+    }
     else {
         const header = make("div", "header");
         const nav = make("div", "navigation");
         nav.append(button("month-selector", MONTH_NAMES[state.currentMonth], "month", "Select month"), button("year-selector", String(state.currentYear), "year", "Select year"));
-        const span = state.currentView === "day" ? "month" : state.currentView === "month" ? "year" : "year range";
-        header.append(nav, button("prev", "‹", "prev", `Previous ${span}`), button("next", "›", "next", `Next ${span}`));
+        header.append(nav);
+        if (state.currentView !== "year") {
+            const span = state.currentView === "day" ? "month" : "year";
+            header.append(button("prev", "‹", "prev", `Previous ${span}`), button("next", "›", "next", `Next ${span}`));
+        }
         content.append(header);
         if (state.currentView === "day") {
             const track = make("div", "track");
@@ -106,7 +138,8 @@ export function renderCalendar(state) {
         else {
             const months = state.currentView === "month";
             const grid = make("div", months ? "months" : "years", undefined, { role: "group", "aria-label": months ? "Choose month" : "Choose year" });
-            for (const value of months ? Array.from({ length: 12 }, (_, i) => i) : generateYearRange(state.currentYear)) {
+            const first = state.minDate?.getFullYear() ?? 1900, last = state.maxDate?.getFullYear() ?? 2100;
+            for (const value of months ? Array.from({ length: 12 }, (_, i) => i) : Array.from({ length: last - first + 1 }, (_, i) => first + i)) {
                 const selected = value === (months ? state.currentMonth : state.currentYear);
                 grid.append(make("button", months ? "month" : "year", months ? MONTH_NAMES_SHORT[value] : String(value), {
                     type: "button", [months ? "data-month" : "data-year"]: String(value), "aria-pressed": String(selected), tabindex: selected ? "0" : "-1",
@@ -116,10 +149,10 @@ export function renderCalendar(state) {
         }
         content.append(make("div", "sr-only", "Use arrow keys for days, Home and End for the week, Page Up and Page Down for months, with Shift for years.", { id: `${state.id}-keyboard` }));
     }
-    if (modal) {
+    if (modal && !fullscreen) {
         const footer = make("div", "footer");
         const confirm = button("confirm", "OK", "confirm");
-        confirm.disabled = !state.selectedDate || !state.isAllowed(state.selectedDate) || state.selectionMode === "range" && (!state.rangeEndDate || !state.isAllowed(state.rangeEndDate));
+        confirm.disabled = confirmDisabled;
         footer.append(button("cancel", "Cancel", "cancel"), confirm);
         content.append(footer);
     }

package/dist/components/datepicker/types.d.ts

@@ -41,7 +41,7 @@ export interface DatePickerEvents {
  * DatePicker variant types
  * @category Components
  */
-export type DatePickerVariant = 'docked' | 'modal' | 'modal-input';
+export type DatePickerVariant = 'docked' | 'modal' | 'modal-input' | 'fullscreen';
 /**
  * DatePicker view types
  * @category Components
@@ -361,4 +361,7 @@ export interface DatePickerState {
     label: string;
     specialDates: NonNullable<DatePickerConfig["specialDates"]>;
     isAllowed(date: Date): boolean;
+    /** Full screen: the first month of the rendered list, and how many follow. FLO-276. */
+    listStart?: Date;
+    listLength?: number;
 }

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

@@ -56,13 +56,6 @@ export declare const isDateInRange: (date: Date, startDate: Date, endDate: Date)
  * @returns Array of calendar dates
  */
 export declare const generateCalendarDates: (year: number, month: number, selectedDate?: Date | null, rangeEndDate?: Date | null, minDate?: Date | null, maxDate?: Date | null) => CalendarDate[];
-/**
- * Generates an array of years for year selection
- * @param currentYear - Center year for the range
- * @param range - Number of years before and after current year
- * @returns Array of years
- */
-export declare const generateYearRange: (currentYear: number, range?: number) => number[];
 /**
  * Adds days to a date
  * @param date - Base date

package/dist/components/datepicker/utils.js

@@ -162,15 +162,6 @@ export const generateCalendarDates = (year, month, selectedDate = null, rangeEnd
     }
     return result;
 };
-export const generateYearRange = (currentYear, range = 10) => {
-    const years = [];
-    const startYear = currentYear - range;
-    const endYear = currentYear + range;
-    for (let year = startYear; year <= endYear; year++) {
-        years.push(year);
-    }
-    return years;
-};
 export const addDays = (date, days) => {
     const result = new Date(date);
     result.setDate(result.getDate() + days);

package/dist/components/extended-fab/config.js

@@ -12,7 +12,7 @@ export const createBaseConfig = (config = {}) => createComponentConfig(defaultCo
 export const getElementConfig = (config) => {
     const attributes = {
         type: config.type || "button",
-        "aria-label": config.ariaLabel || config.text || (config.icon ? "action" : undefined),
+        "aria-label": config.ariaLabel,
     };
     if (config.value !== undefined) {
         attributes.value = config.value;

package/dist/components/extended-fab/types.d.ts

@@ -237,8 +237,9 @@ export interface ExtendedFabConfig {
     /**
      * Accessible label for screen readers
      *
-     * Sets the aria-label attribute for accessibility. Especially important
-     * if the Extended FAB doesn't include text content.
+     * Sets the aria-label attribute. The visible text already names the
+     * Extended FAB, so set this only when the name should differ from it or
+     * there is no text. Nothing is derived from `text` or `icon` (#232).
      *
      * @example
      * ```typescript

package/dist/components/segmented-button/segment.js

@@ -30,7 +30,7 @@ export const createSegment = (config, container, prefix, groupDisabled = false,
         ripple: options.ripple,
         rippleConfig: options.rippleConfig,
         class: config.class,
-        ariaLabel: config.text || config.value,
+        ariaLabel: isIconOnly ? config.value : undefined,
     });
     button.element.classList.add(`${prefix}-segmented-button__segment`);
     let checkmarkElement = null;

package/dist/components/slider/features/controller.js

@@ -224,13 +224,17 @@ export const withController = (config, getComponent) => (component) => {
             console.error("Error initializing slider controller:", error);
         }
     };
-    const initialization = setTimeout(initController, 0);
+    initController();
+    const layout = typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => updateHandlePositions()) : null;
+    layout?.observe(component.element);
     if (component.lifecycle) {
         const originalDestroy = component.lifecycle.destroy || (() => { });
         component.lifecycle.destroy = () => {
-            clearTimeout(initialization);
+            layout?.disconnect();
             if (settleTimer !== null)
                 clearTimeout(settleTimer);
+            if (state.valueHideTimer !== null)
+                clearTimeout(state.valueHideTimer);
             handlers.cleanupEventListeners();
             originalDestroy.call(component.lifecycle);
         };

package/dist/components/slider/features/states.d.ts

@@ -17,9 +17,6 @@ interface StatesHost {
     structure?: Record<string, HTMLElement | undefined>;
     formFields?: (HTMLInputElement | null)[] | null;
     renderTracks?: (state?: unknown) => void;
-    lifecycle?: {
-        destroy: () => void;
-    };
 }
 export declare const withStates: (config: SliderConfig) => <C extends StatesHost>(component: C) => C & {
     disabled: {

package/dist/components/slider/features/states.js

@@ -3,13 +3,6 @@ import { SLIDER_SIZES } from "../constants.js";
 export const withStates = (config) => (component) => {
     const handle = component.handle ?? component.structure?.handle;
     const secondHandle = component.secondHandle ?? component.structure?.secondHandle;
-    const isDisabled = config.disabled === true;
-    let initialization = null;
-    if (isDisabled) {
-        initialization = setTimeout(() => {
-            disableComponent();
-        }, 0);
-    }
     const setFieldsDisabled = (disabled) => {
         for (const field of component.formFields ?? []) {
             if (field)
@@ -56,14 +49,8 @@ export const withStates = (config) => (component) => {
         const foundKey = sizeKeys.find((sizeKey) => component.element.classList.contains(`${component.getClass("slider")}--${sizeKey.toLowerCase()}`));
         return foundKey || "XS";
     }
-    if (component.lifecycle) {
-        const originalDestroy = component.lifecycle.destroy;
-        component.lifecycle.destroy = () => {
-            if (initialization !== null)
-                clearTimeout(initialization);
-            originalDestroy.call(component.lifecycle);
-        };
-    }
+    if (config.disabled === true)
+        disableComponent();
     return Object.assign(component, {
         disabled: {
             enable() {

package/dist/components/textfield/constants.d.ts

@@ -133,8 +133,18 @@ export declare const TEXTFIELD_CLASSES: {
     readonly PREFIX_TEXT: "textfield__prefix";
     /** Suffix text class */
     readonly SUFFIX_TEXT: "textfield__suffix";
-    /** Reserved slot; the current outline is drawn on the root element. */
+    /** Outline of the outlined variant, drawn in three segments */
     readonly OUTLINE: "textfield__outline";
+    /** Outline segment before the label (start corner) */
+    readonly OUTLINE_LEADING: "textfield__outline-leading";
+    /** Outline segment the floating label sits in */
+    readonly OUTLINE_NOTCH: "textfield__outline-notch";
+    /** Outline segment after the label */
+    readonly OUTLINE_TRAILING: "textfield__outline-trailing";
+    /** Outline whose notch is open around the floating label */
+    readonly OUTLINE_NOTCHED: "textfield__outline--notched";
+    /** Outlined field laid out right to left, from its computed direction */
+    readonly RTL: "textfield--rtl";
     /** Multiline class */
     readonly MULTILINE: "textfield--multiline";
 };

package/dist/components/textfield/constants.js

@@ -59,5 +59,10 @@ export const TEXTFIELD_CLASSES = {
     PREFIX_TEXT: "textfield__prefix",
     SUFFIX_TEXT: "textfield__suffix",
     OUTLINE: "textfield__outline",
+    OUTLINE_LEADING: "textfield__outline-leading",
+    OUTLINE_NOTCH: "textfield__outline-notch",
+    OUTLINE_TRAILING: "textfield__outline-trailing",
+    OUTLINE_NOTCHED: "textfield__outline--notched",
+    RTL: "textfield--rtl",
     MULTILINE: "textfield--multiline",
 };