@unofficialbox/box-open-elements 0.11.0 → 0.13.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,42 +15,64 @@ 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;
     gap: ${boeSpace[3]};
     margin: ${boeSpace[3]} 0;
     padding: 14px 10px;
-    border: 1px solid var(--boe-token-text-text-secondary, #6f6f6f);
     border-radius: ${boeRadius.large};
     background: var(--boe-token-surface-surface-secondary, #f4f4f4);
     color: var(--boe-token-text-text, #222222);
-    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard}, border-color ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
+    transition: background ${boeMotionDuration.interactive} ${boeMotionEasing.standard};
   }
 
   [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);
-    border-color: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 50%, #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);
-    border-color: var(--boe-token-surface-status-surface-success, #26c281);
   }
 
   [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);
-    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 50%, #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);
-    border-color: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 50%, #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;
@@ -128,7 +150,9 @@ export class Alert extends BaseElement {
     }
     openValue = true;
     alertEl;
+    iconEl;
     toneLabelEl;
+    renderedTone = null;
     titleEl;
     messageEl;
     richSlot;
@@ -201,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>
@@ -211,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"]');
@@ -242,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/nudge.js

@@ -14,7 +14,6 @@ const nudgeStyles = `
     align-items: flex-start;
     gap: 0.55rem;
     padding: 0.55rem 0.7rem;
-    border: 1px solid color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 24%, var(--boe-token-surface-surface, #ffffff));
     border-radius: ${boeRadius.large};
     background: color-mix(in srgb, var(--boe-token-surface-surface-brand, #0061d5) 7%, var(--boe-token-surface-surface, #ffffff));
     color: var(--boe-token-text-text, #222222);

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

@@ -38,12 +38,11 @@ export declare class Toast extends BaseElement {
     get heading(): string;
     set heading(value: string);
     /**
-     * Drop the outline for a softer, fill-only toast.
+     * @deprecated Every toast is borderless now, so this does nothing.
      *
-     * Purely presentational and handled entirely in CSS, so it is deliberately
-     * not an observed attribute — there is nothing to re-render. The default
-     * stays bordered: that outline tracks box-ui-elements' `.notification` and
-     * is pinned by the colour conformance manifest.
+     * Kept because it shipped in 0.11.0 and removing it would break hosts that
+     * set it for no benefit — what they asked for is what they already get. The
+     * attribute is still reflected so those hosts read back what they wrote.
      */
     get borderless(): boolean;
     set borderless(value: boolean);

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 {
@@ -37,11 +21,18 @@ const toastStyles = `
     display: none;
   }
 
-  /* Fill, border, text colour and shadow all track box-ui-elements'
-     .notification and are pinned by the colour conformance manifest — they are
-     deliberately not derived from the tone accent. The --toast-accent property
-     exists only to colour the status glyph, which upstream has no equivalent
-     for, so adding it costs no conformance. */
+  /* Fill, text colour and shadow track box-ui-elements' .notification and are
+     pinned by the colour conformance manifest — they are deliberately not
+     derived from the tone accent. The --toast-accent property exists only to
+     colour the status glyph, which upstream has no equivalent for, so adding it
+     costs no conformance.
+
+     There is no border. Upstream .notification has one, and box-open-elements
+     matched it until the outline was judged too heavy; the claim that pinned it
+     was retired rather than left describing something no longer painted. Tone
+     survives that in three places — the tinted fill, the full-strength glyph,
+     and the visually-hidden tone label — so it was never carried by the border
+     alone. */
   [part="toast"] {
     --toast-accent: var(--boe-token-text-text, #222222);
 
@@ -53,28 +44,14 @@ const toastStyles = `
     min-height: 48px;
     max-inline-size: min(100%, 572px);
     padding: 10px 10px 10px 20px;
-    border: 2px solid var(--boe-token-text-text, #222222);
     border-radius: ${boeRadius.large};
     background: var(--boe-token-surface-surface-secondary, #f4f4f4);
     color: var(--boe-token-text-text, #222222);
     box-shadow: 0 2px 6px rgb(0 0 0 / 15%);
   }
 
-  /* Opt-in softer treatment: the outline goes, the geometry does not. Setting
-     the colour to transparent rather than the width to 0 keeps the 2px in the
-     box model, so a borderless toast is exactly the size of a bordered one and
-     the two can sit in the same stack without jumping. The background paints
-     under the border by default, so the fill simply extends into it.
-
-     The bordered default stays: the 2px solid text-colour rule below is pinned
-     by the colour conformance manifest against upstream's .notification, and
-     strict mode fails if that declaration goes. */
-  :host([borderless]) [part="toast"] {
-    border-color: transparent;
-  }
-
-  /* The neutral toast keeps upstream's grey fill and near-black border, so the
-     glyph is the only place the "this is information" signal can live. */
+  /* The neutral toast keeps upstream's grey fill, so the glyph is the only
+     place the "this is information" signal can live. */
   [part="toast"][data-tone="info"] {
     --toast-accent: var(--boe-token-surface-surface-brand, #0061d5);
   }
@@ -82,20 +59,17 @@ const toastStyles = `
   [part="toast"][data-tone="success"] {
     --toast-accent: var(--boe-token-surface-status-surface-success, #26c281);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-success, #26c281) 20%, #fff);
-    border-color: var(--boe-token-surface-status-surface-success, #26c281);
   }
 
   [part="toast"][data-tone="error"] {
     --toast-accent: var(--boe-token-surface-status-surface-error, #ed3757);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-error, #ed3757) 20%, #fff);
-    border-color: var(--boe-token-surface-status-surface-error, #ed3757);
   }
 
   [part="toast"][data-tone="warning"],
   [part="toast"][data-tone="inprogress"] {
     --toast-accent: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
     background: color-mix(in srgb, var(--boe-token-surface-status-surface-inprogress, #f5b31b) 20%, #fff);
-    border-color: var(--boe-token-surface-status-surface-inprogress, #f5b31b);
   }
 
   .sr-only {
@@ -304,12 +278,11 @@ export class Toast extends BaseElement {
         this.setAttribute("heading", value);
     }
     /**
-     * Drop the outline for a softer, fill-only toast.
+     * @deprecated Every toast is borderless now, so this does nothing.
      *
-     * Purely presentational and handled entirely in CSS, so it is deliberately
-     * not an observed attribute — there is nothing to re-render. The default
-     * stays bordered: that outline tracks box-ui-elements' `.notification` and
-     * is pinned by the colour conformance manifest.
+     * Kept because it shipped in 0.11.0 and removing it would break hosts that
+     * set it for no benefit — what they asked for is what they already get. The
+     * attribute is still reflected so those hosts read back what they wrote.
      */
     get borderless() {
         return this.hasAttribute("borderless");

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;