@unofficialbox/box-open-elements 0.12.0 → 0.14.0

package/dist/components/feedback/alert.d.ts

@@ -4,7 +4,9 @@ export declare class Alert extends BaseElement {
     static get observedAttributes(): string[];
     private openValue;
     private alertEl;
+    private iconEl;
     private toneLabelEl;
+    private renderedTone;
     private titleEl;
     private messageEl;
     private richSlot;

package/dist/components/feedback/alert.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { toneAccessibleLabel } from "./tone.js";
+import { toneAccessibleLabel, toneIcon } from "./tone.js";
 import { boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { boeNeutralInteractiveStyles } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
@@ -15,7 +15,13 @@ const alertStyles = `
     display: none;
   }
 
+  /* The accent colours the glyph only. The tinted backgrounds below are pinned
+     by the colour conformance manifest against upstream box-ui-elements and are
+     deliberately not derived from it; upstream has no glyph, so adding one
+     costs no conformance. */
   [part="alert"] {
+    --alert-accent: var(--boe-token-text-text-secondary, #6f6f6f);
+
     display: flex;
     align-items: start;
     justify-content: space-between;
@@ -29,23 +35,44 @@ const alertStyles = `
   }
 
   [part="alert"][data-tone="info"] {
+    --alert-accent: var(--boe-token-surface-surface-brand, #0061d5);
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 10%, #fff);
   }
 
   [part="alert"][data-tone="success"] {
+    --alert-accent: var(--boe-token-surface-status-surface-success, #26c281);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 10%, #fff);
   }
 
   [part="alert"][data-tone="error"] {
+    --alert-accent: var(--boe-token-surface-status-surface-error, #ed3757);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 10%, #fff);
   }
 
   [part="alert"][data-tone="warning"],
   [part="alert"][data-tone="inprogress"] {
+    --alert-accent: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 10%, #fff);
   }
 
+  [part="icon"] {
+    flex: 0 0 auto;
+    inline-size: 20px;
+    block-size: 20px;
+    /* Full strength: with only a 10% tint behind it, the glyph is where the
+       tone actually reads. */
+    color: var(--alert-accent);
+  }
+
+  [part="icon"] svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
   [part="content"] {
+    flex: 1 1 auto;
+    min-inline-size: 0;
     display: grid;
     gap: ${boeSpace[1]};
     line-height: 1.45;
@@ -123,7 +150,9 @@ export class Alert extends BaseElement {
     }
     openValue = true;
     alertEl;
+    iconEl;
     toneLabelEl;
+    renderedTone = null;
     titleEl;
     messageEl;
     richSlot;
@@ -196,6 +225,7 @@ export class Alert extends BaseElement {
         this.shadowRoot.innerHTML = `
       <style>${alertStyles}</style>
       <div part="alert" role="status" aria-live="polite">
+        <span part="icon" aria-hidden="true"></span>
         <div part="content">
           <span part="tone-label" class="sr-only"></span>
           <h2 part="title" id="alert-title" hidden></h2>
@@ -206,6 +236,7 @@ export class Alert extends BaseElement {
       </div>
     `;
         this.alertEl = this.shadowRoot.querySelector('[part="alert"]');
+        this.iconEl = this.shadowRoot.querySelector('[part="icon"]');
         this.toneLabelEl = this.shadowRoot.querySelector('[part="tone-label"]');
         this.titleEl = this.shadowRoot.querySelector('[part="title"]');
         this.messageEl = this.shadowRoot.querySelector('[part~="description"]');
@@ -237,7 +268,14 @@ export class Alert extends BaseElement {
             return;
         }
         this.alertEl.dataset.tone = this.tone;
-        this.toneLabelEl.textContent = toneAccessibleLabel(this.tone);
+        const tone = this.tone;
+        this.toneLabelEl.textContent = toneAccessibleLabel(tone);
+        // Literal markup keyed by tone, so re-writing it on every update would be
+        // wasted work — and would restart any transition on the glyph.
+        if (tone !== this.renderedTone) {
+            this.renderedTone = tone;
+            this.iconEl.innerHTML = toneIcon(tone);
+        }
         if (this.heading) {
             this.alertEl.setAttribute("aria-labelledby", "alert-title");
             this.alertEl.removeAttribute("aria-label");

package/dist/components/feedback/indicator.d.ts

@@ -0,0 +1,34 @@
+import { BaseElement } from "../../core/index.js";
+/**
+ * A status mark, for dense lists where a full badge would not fit.
+ *
+ * ```html
+ * <box-indicator tone="success" label="Signed"></box-indicator>
+ * ```
+ *
+ * Distinct in shape as well as colour, so a status column survives being read
+ * by someone who cannot separate green from amber — the same rule the alert and
+ * toast glyphs follow.
+ *
+ * When there is no visible `label` the tone is still stated for assistive
+ * technology, because a bare dot otherwise announces nothing at all. A host
+ * whose surrounding text already says "Signed" should pass that as the label
+ * rather than leaving a reader to infer it from a colour.
+ */
+export declare class Indicator extends BaseElement {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    private shapeEl;
+    private labelEl;
+    private toneLabelEl;
+    private renderedTone;
+    /** The status. Unknown tones render the neutral disc. */
+    get tone(): string;
+    set tone(value: string);
+    /** Visible text beside the mark. Optional. */
+    get label(): string;
+    set label(value: string);
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}

package/dist/components/feedback/indicator.js

@@ -0,0 +1,167 @@
+import { BaseElement } from "../../core/index.js";
+import { toneAccessibleLabel } from "./tone.js";
+const DEFAULT_TAG_NAME = "box-indicator";
+/**
+ * Indicator shapes, one per tone.
+ *
+ * The shape is the point. A row of coloured dots is unreadable to anyone who
+ * cannot separate the colours, and status is exactly the information a reader
+ * most needs from a dense list. Carbon ships both an icon and a shape
+ * indicator for this reason; here the shape *is* the indicator, and colour is
+ * the redundant channel rather than the only one.
+ */
+const INDICATOR_SHAPES = {
+    // A filled disc: the neutral resting state.
+    info: `<svg viewBox="0 0 12 12" fill="currentColor" focusable="false"><circle cx="6" cy="6" r="5"/></svg>`,
+    // A disc with a tick cut into it, matching the success glyph on alert/toast.
+    success: `<svg viewBox="0 0 12 12" fill="currentColor" focusable="false"><path d="M6 1a5 5 0 100 10A5 5 0 006 1zm2.5 3.6L5.6 8a.7.7 0 01-1 0L3.5 6.8a.7.7 0 111-1l.6.7 2.4-2.8a.7.7 0 011 .9z"/></svg>`,
+    // A triangle, distinguishable from a disc at a glance and at small sizes.
+    warning: `<svg viewBox="0 0 12 12" fill="currentColor" focusable="false"><path d="M5.5 1.4 0.5 10a.6.6 0 00.5.9h10a.6.6 0 00.5-.9l-5-8.6a.6.6 0 00-1 0z"/></svg>`,
+    // A diamond: a square is too close to a disc once antialiased at 10px.
+    error: `<svg viewBox="0 0 12 12" fill="currentColor" focusable="false"><path d="M6 0.6 11.4 6 6 11.4.6 6z"/></svg>`,
+    // A hollow ring: nothing has happened yet, so nothing is filled in.
+    pending: `<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" focusable="false"><circle cx="6" cy="6" r="4"/></svg>`,
+};
+/** The shape for a tone, falling back to the neutral disc. */
+const indicatorShape = (tone) => INDICATOR_SHAPES[tone] ?? INDICATOR_SHAPES.info;
+const indicatorStyles = `
+  :host {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+    color: inherit;
+    font: inherit;
+  }
+
+  :host([hidden]) {
+    display: none;
+  }
+
+  [part="shape"] {
+    flex: 0 0 auto;
+    inline-size: 0.62rem;
+    block-size: 0.62rem;
+    color: var(--boe-token-text-text-secondary, #6f6f6f);
+  }
+
+  [part="shape"] svg {
+    display: block;
+    inline-size: 100%;
+    block-size: 100%;
+  }
+
+  :host([tone="info"]) [part="shape"] {
+    color: var(--boe-token-surface-surface-brand, #0061d5);
+  }
+
+  :host([tone="success"]) [part="shape"] {
+    color: var(--boe-token-surface-status-surface-success, #26c281);
+  }
+
+  :host([tone="error"]) [part="shape"] {
+    color: var(--boe-token-surface-status-surface-error, #ed3757);
+  }
+
+  :host([tone="warning"]) [part="shape"] {
+    color: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
+  }
+
+  [part="label"] {
+    min-inline-size: 0;
+    overflow-wrap: anywhere;
+  }
+
+  /* With no label the dot stands alone, and an empty span would still take a
+     line box and the flex gap beside it. */
+  [part="label"]:empty {
+    display: none;
+  }
+
+  .sr-only {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+`;
+/**
+ * A status mark, for dense lists where a full badge would not fit.
+ *
+ * ```html
+ * <box-indicator tone="success" label="Signed"></box-indicator>
+ * ```
+ *
+ * Distinct in shape as well as colour, so a status column survives being read
+ * by someone who cannot separate green from amber — the same rule the alert and
+ * toast glyphs follow.
+ *
+ * When there is no visible `label` the tone is still stated for assistive
+ * technology, because a bare dot otherwise announces nothing at all. A host
+ * whose surrounding text already says "Signed" should pass that as the label
+ * rather than leaving a reader to infer it from a colour.
+ */
+export class Indicator extends BaseElement {
+    static tagName = DEFAULT_TAG_NAME;
+    static get observedAttributes() {
+        return ["label", "tone"];
+    }
+    shapeEl;
+    labelEl;
+    toneLabelEl;
+    renderedTone = null;
+    /** The status. Unknown tones render the neutral disc. */
+    get tone() {
+        return this.getAttribute("tone") ?? "info";
+    }
+    set tone(value) {
+        this.setAttribute("tone", value);
+    }
+    /** Visible text beside the mark. Optional. */
+    get label() {
+        return this.getAttribute("label") ?? "";
+    }
+    set label(value) {
+        if (!value) {
+            this.removeAttribute("label");
+            return;
+        }
+        this.setAttribute("label", value);
+    }
+    renderTemplate() {
+        if (!this.shadowRoot) {
+            return;
+        }
+        this.shadowRoot.innerHTML = `
+      <style>${indicatorStyles}</style>
+      <span part="shape" aria-hidden="true"></span>
+      <span part="tone-label" class="sr-only"></span>
+      <span part="label"></span>
+    `;
+        this.shapeEl = this.shadowRoot.querySelector('[part="shape"]');
+        this.toneLabelEl = this.shadowRoot.querySelector('[part="tone-label"]');
+        this.labelEl = this.shadowRoot.querySelector('[part="label"]');
+    }
+    setupListeners() {
+        // Display only.
+    }
+    update() {
+        if (!this.shapeEl) {
+            return;
+        }
+        const tone = this.tone;
+        if (tone !== this.renderedTone) {
+            this.renderedTone = tone;
+            this.shapeEl.innerHTML = indicatorShape(tone);
+        }
+        this.labelEl.textContent = this.label;
+        // Only speak the tone when no visible label carries it; otherwise a reader
+        // hears "Success Signed" where the screen says "Signed".
+        this.toneLabelEl.textContent = this.label ? "" : toneAccessibleLabel(tone);
+    }
+}
+Indicator.register();

package/dist/components/feedback/toast.js

@@ -1,5 +1,5 @@
 import { BaseElement } from "../../core/index.js";
-import { toneAccessibleLabel } from "./tone.js";
+import { toneAccessibleLabel, toneIcon } from "./tone.js";
 import { boeRadius, boeSpace } from "../../foundations/geometry/index.js";
 import { boeFocusVisibleStyles } from "../../foundations/tokens/index.js";
 import { boeMotionDuration, boeMotionEasing } from "../../foundations/motion/index.js";
@@ -7,22 +7,6 @@ const DEFAULT_TAG_NAME = "box-toast";
 const TOAST_MODES = new Set(["dismissible", "sticky"]);
 /** Narrow an author-supplied mode, falling back to `dismissible`. */
 export const resolveToastMode = (value) => TOAST_MODES.has(value) ? value : "dismissible";
-/**
- * Status glyphs, one per tone.
- *
- * A toast is read at a glance and often out of the corner of an eye, so the
- * shape has to carry the meaning before the colour does — a round tick and a
- * warning triangle are distinguishable to a reader who cannot separate green
- * from amber. Literal markup, never author input, so innerHTML is safe here.
- */
-const TONE_ICONS = {
-    info: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 3.4a1.15 1.15 0 110 2.3 1.15 1.15 0 010-2.3zM11.1 15H8.9V9.3h2.2V15z"/></svg>`,
-    success: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm4.06 5.86-5 5.2a1 1 0 01-1.44 0L5.94 11.3A1 1 0 117.38 9.9l1.04 1.08 4.28-4.52a1 1 0 011.36 1.38z"/></svg>`,
-    warning: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M9.13 2.6 1.4 15.9a1 1 0 00.87 1.5h15.46a1 1 0 00.87-1.5L10.87 2.6a1 1 0 00-1.74 0zM11.1 15.4H8.9v-2.2h2.2v2.2zm0-3.4H8.9V7.6h2.2V12z"/></svg>`,
-    error: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 2c1.29 0 2.48.41 3.46 1.1L5.1 13.46A6 6 0 0110 4zm0 12c-1.29 0-2.48-.41-3.46-1.1l8.36-8.36A6 6 0 0110 16z"/></svg>`,
-};
-/** The tone glyph, falling back to the info mark for an unknown tone. */
-const toneIcon = (tone) => TONE_ICONS[tone] ?? TONE_ICONS.info;
 const DISMISS_ICON = `<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" focusable="false"><path d="M5.5 5.5l9 9M14.5 5.5l-9 9"/></svg>`;
 const toastStyles = `
   :host {

package/dist/components/feedback/tone.d.ts

@@ -5,6 +5,10 @@
  * readers, and both must say the *same* words: a reader who hears "In progress"
  * from an alert should not hear "Inprogress" from a toast reporting the same
  * thing. One definition is what keeps them in step.
+ *
+ * The glyphs live here for the same reason. Both surfaces render them, and a
+ * success tick that differs between an alert and a toast reporting the same
+ * outcome is a defect a reader would notice before either team did.
  */
 /**
  * The tone as a word, for assistive technology.
@@ -14,3 +18,17 @@
  * a host that invents a tone should still get something spoken.
  */
 export declare const toneAccessibleLabel: (tone: string) => string;
+/**
+ * Status glyphs, one per tone.
+ *
+ * These surfaces are read at a glance, often out of the corner of an eye, so
+ * the shape has to carry the meaning before the colour does — a round tick and
+ * a warning triangle are distinguishable to a reader who cannot separate green
+ * from amber. That matters most where the fill is faint: `box-alert` tints its
+ * background by only 10%, which on its own is a weak signal.
+ *
+ * Literal markup, never author input, so innerHTML is safe here.
+ */
+export declare const TONE_ICONS: Record<string, string>;
+/** The tone glyph, falling back to the info mark for an unknown tone. */
+export declare const toneIcon: (tone: string) => string;

package/dist/components/feedback/tone.js

@@ -5,6 +5,10 @@
  * readers, and both must say the *same* words: a reader who hears "In progress"
  * from an alert should not hear "Inprogress" from a toast reporting the same
  * thing. One definition is what keeps them in step.
+ *
+ * The glyphs live here for the same reason. Both surfaces render them, and a
+ * success tick that differs between an alert and a toast reporting the same
+ * outcome is a defect a reader would notice before either team did.
  */
 /**
  * The tone as a word, for assistive technology.
@@ -29,3 +33,22 @@ export const toneAccessibleLabel = (tone) => {
             return tone.charAt(0).toUpperCase() + tone.slice(1);
     }
 };
+/**
+ * Status glyphs, one per tone.
+ *
+ * These surfaces are read at a glance, often out of the corner of an eye, so
+ * the shape has to carry the meaning before the colour does — a round tick and
+ * a warning triangle are distinguishable to a reader who cannot separate green
+ * from amber. That matters most where the fill is faint: `box-alert` tints its
+ * background by only 10%, which on its own is a weak signal.
+ *
+ * Literal markup, never author input, so innerHTML is safe here.
+ */
+export const TONE_ICONS = {
+    info: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 3.4a1.15 1.15 0 110 2.3 1.15 1.15 0 010-2.3zM11.1 15H8.9V9.3h2.2V15z"/></svg>`,
+    success: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm4.06 5.86-5 5.2a1 1 0 01-1.44 0L5.94 11.3A1 1 0 117.38 9.9l1.04 1.08 4.28-4.52a1 1 0 011.36 1.38z"/></svg>`,
+    warning: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M9.13 2.6 1.4 15.9a1 1 0 00.87 1.5h15.46a1 1 0 00.87-1.5L10.87 2.6a1 1 0 00-1.74 0zM11.1 15.4H8.9v-2.2h2.2v2.2zm0-3.4H8.9V7.6h2.2V12z"/></svg>`,
+    error: `<svg viewBox="0 0 20 20" fill="currentColor" focusable="false"><path d="M10 2a8 8 0 100 16 8 8 0 000-16zm0 2c1.29 0 2.48.41 3.46 1.1L5.1 13.46A6 6 0 0110 4zm0 12c-1.29 0-2.48-.41-3.46-1.1l8.36-8.36A6 6 0 0110 16z"/></svg>`,
+};
+/** The tone glyph, falling back to the info mark for an unknown tone. */
+export const toneIcon = (tone) => TONE_ICONS[tone] ?? TONE_ICONS.info;

package/dist/components/forms/calendar.d.ts

@@ -27,6 +27,31 @@ export declare class Calendar extends BaseElement {
     private isOutOfRange;
     private goToMonth;
     private shiftMonth;
+    /**
+     * `single` (default) or `range`.
+     *
+     * Range mode uses `start`/`end` rather than overloading `value`: a single
+     * attribute holding two dates would have to invent a separator, and every
+     * host would then have to parse it back out.
+     */
+    get mode(): string;
+    set mode(next: string);
+    /** First date of the range, ISO. */
+    get start(): string;
+    set start(next: string);
+    /** Last date of the range, ISO. Empty while only one end has been picked. */
+    get end(): string;
+    set end(next: string);
+    /**
+     * Advance the range by one click.
+     *
+     * Three states, cycling: nothing chosen picks a start; a start alone closes
+     * the range; a complete range starts over. Picking an earlier day as the
+     * second click swaps the ends rather than rejecting it — a reader dragging
+     * backwards through a calendar means the same thing as dragging forwards,
+     * and refusing it would be pedantry.
+     */
+    private selectRange;
     private selectDate;
     /** Move roving focus by `delta` days, following into the neighbouring month if needed. */
     private moveActive;

package/dist/components/forms/calendar.js

@@ -172,6 +172,15 @@ const calendarStyles = `
     background: var(--boe-token-surface-surface-brand-hover, #006ae9);
   }
 
+  /* The span between the endpoints. A tint rather than the brand fill, so the
+     two chosen dates stay the things the eye lands on — the middle is context,
+     not a selection the reader made. */
+  [part~="day"][data-in-range="true"]:not([data-selected="true"]) {
+    background: var(--boe-token-surface-item-surface-selected, #f2f7fd);
+    border-color: transparent;
+    color: var(--boe-token-text-text, #222222);
+  }
+
   [part~="day"]:focus-visible {
     outline: none;
     box-shadow: 0 0 0 3px color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 24%, transparent);
@@ -185,7 +194,7 @@ const calendarStyles = `
 export class Calendar extends BaseElement {
     static tagName = DEFAULT_TAG_NAME;
     static get observedAttributes() {
-        return ["disabled", "max", "min", "month", "today", "value"];
+        return ["disabled", "end", "max", "min", "mode", "month", "start", "today", "value"];
     }
     /** The date the roving tabindex currently points at. */
     activeDate = null;
@@ -283,11 +292,83 @@ export class Calendar extends BaseElement {
         const next = new Date(Date.UTC(y, m - 1 + delta, 1));
         this.goToMonth(next.getUTCFullYear(), next.getUTCMonth() + 1);
     }
+    /**
+     * `single` (default) or `range`.
+     *
+     * Range mode uses `start`/`end` rather than overloading `value`: a single
+     * attribute holding two dates would have to invent a separator, and every
+     * host would then have to parse it back out.
+     */
+    get mode() {
+        return this.getAttribute("mode") === "range" ? "range" : "single";
+    }
+    set mode(next) {
+        this.setAttribute("mode", next);
+    }
+    /** First date of the range, ISO. */
+    get start() {
+        return this.getAttribute("start") ?? "";
+    }
+    set start(next) {
+        if (!next) {
+            this.removeAttribute("start");
+            return;
+        }
+        this.setAttribute("start", next);
+    }
+    /** Last date of the range, ISO. Empty while only one end has been picked. */
+    get end() {
+        return this.getAttribute("end") ?? "";
+    }
+    set end(next) {
+        if (!next) {
+            this.removeAttribute("end");
+            return;
+        }
+        this.setAttribute("end", next);
+    }
+    /**
+     * Advance the range by one click.
+     *
+     * Three states, cycling: nothing chosen picks a start; a start alone closes
+     * the range; a complete range starts over. Picking an earlier day as the
+     * second click swaps the ends rather than rejecting it — a reader dragging
+     * backwards through a calendar means the same thing as dragging forwards,
+     * and refusing it would be pedantry.
+     */
+    selectRange(iso) {
+        const start = this.start;
+        const end = this.end;
+        if (!start || end) {
+            this.start = iso;
+            this.end = "";
+        }
+        else if (iso < start) {
+            this.end = start;
+            this.start = iso;
+        }
+        else {
+            this.end = iso;
+        }
+        this.dispatchEvent(new CustomEvent("range-changed", {
+            bubbles: true,
+            composed: true,
+            detail: { end: this.end, start: this.start },
+        }));
+    }
     selectDate(date) {
         const iso = toISO(date);
         if (this.disabled || this.isOutOfRange(iso)) {
             return;
         }
+        if (this.mode === "range") {
+            this.selectRange(iso);
+            this.setAttribute("month", `${date.y}-${pad(date.m)}`);
+            this.activeDate = date;
+            this.update();
+            this.focusActive();
+            return;
+        }
         this.setAttribute("value", iso);
         // Keep the grid on the month of the chosen day.
         this.setAttribute("month", `${date.y}-${pad(date.m)}`);
@@ -446,6 +527,9 @@ export class Calendar extends BaseElement {
         }
         const { y, m } = this.displayedMonth();
         const selected = parseISO(this.value);
+        const isRange = this.mode === "range";
+        const rangeStart = isRange ? this.start : "";
+        const rangeEnd = isRange ? this.end : "";
         const active = this.resolveActiveDate();
         const activeIso = toISO({ y, m, d: clampDay(y, m, active.d) });
         const todayIso = toISO(this.resolveToday());
@@ -459,7 +543,14 @@ export class Calendar extends BaseElement {
         }
         for (let day = 1; day <= total; day += 1) {
             const iso = toISO({ y, m, d: day });
-            const isSelected = selected ? toISO(selected) === iso : false;
+            const isSelected = isRange
+                ? iso === rangeStart || iso === rangeEnd
+                : selected
+                    ? toISO(selected) === iso
+                    : false;
+            // Strictly between the ends: the endpoints are "selected", not "in range",
+            // so they keep the brand fill rather than the tint.
+            const inRange = isRange && rangeStart !== "" && rangeEnd !== "" && iso > rangeStart && iso < rangeEnd;
             const isToday = iso === todayIso;
             const isActive = iso === activeIso;
             const outOfRange = this.isOutOfRange(iso);
@@ -470,6 +561,7 @@ export class Calendar extends BaseElement {
           role="gridcell"
           data-date="${iso}"
           data-selected="${isSelected ? "true" : "false"}"
+          data-in-range="${inRange ? "true" : "false"}"
           data-today="${isToday ? "true" : "false"}"
           tabindex="${isActive && !disabled ? "0" : "-1"}"
           aria-selected="${isSelected ? "true" : "false"}"

package/dist/components/forms/tile-group.d.ts

@@ -0,0 +1,58 @@
+import { BaseElement } from "../../core/index.js";
+/** One choice. `description` is the second line; `disabled` greys it out. */
+export interface TileOption {
+    description?: string;
+    disabled?: boolean;
+    id: string;
+    label: string;
+}
+/** Attribute payloads are author input — validate every record. */
+export declare const isTileOptionRecord: (value: unknown) => value is TileOption;
+/**
+ * Choose one option, or several, as cards rather than radios.
+ *
+ * ```html
+ * <box-tile-group name="plan" options='[{"id":"team","label":"Team"}]'></box-tile-group>
+ * ```
+ *
+ * Each tile wraps a real `<input type="radio">` or `<input type="checkbox">`,
+ * visually hidden but present in the tab order and the accessibility tree. That
+ * is the whole design: grouping, arrow-key navigation between radios, the
+ * roving focus rules, and form participation all come from the platform rather
+ * than being reimplemented on `<div>`s and then subtly diverging from what a
+ * screen reader user expects.
+ *
+ * Use it where the choice deserves explaining — a plan, a permission level, a
+ * retention policy — and a bare radio label would not have room. Where the
+ * options are one word each, radios are smaller and better.
+ */
+export declare class TileGroup extends BaseElement {
+    static readonly tagName: string;
+    static get observedAttributes(): string[];
+    private groupEl;
+    private legendEl;
+    private optionsSignature;
+    /** The choices, as JSON. */
+    get options(): TileOption[];
+    set options(value: TileOption[]);
+    /** Several selections rather than one. Switches radios for checkboxes. */
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    /** The radio group name. Required for radios to behave as one group. */
+    get name(): string;
+    set name(value: string);
+    /** Selected ids, comma-separated. A single id when not `multiple`. */
+    get value(): string;
+    set value(next: string);
+    /** Selected ids as an array, which is what a host actually wants. */
+    get selected(): string[];
+    get legend(): string;
+    set legend(value: string);
+    private optionsKey;
+    private rebuild;
+    private syncSelection;
+    private readSelection;
+    protected renderTemplate(): void;
+    protected setupListeners(): void;
+    protected update(): void;
+}