@adia-ai/web-components 0.6.50 → 0.7.0

package/components/grid/grid.css

@@ -28,9 +28,23 @@
   :scope[columns="5"] { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; }
   :scope[columns="6"] { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); grid-auto-columns: auto; }
 
-  /* Responsive presets */
-  :scope[columns="auto-fill"] { grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
-  :scope[columns="auto-fit"]  { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
+  /* Responsive presets — the minmax() floor reads [min-column-width] via
+     --grid-min-col (set inline by grid.class.js), defaulting to 12rem.
+     MUST also flip to grid-auto-flow:row + grid-auto-columns:auto (like the
+     numeric rules) — the base :scope default is grid-auto-flow:column +
+     grid-auto-columns:1fr, which makes items flow into IMPLICIT 1fr columns
+     instead of wrapping into the auto-fit row tracks (the cause of the
+     "240px 77px 77px" sliver cram). */
+  :scope[columns="auto-fill"] {
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    grid-template-columns: repeat(auto-fill, minmax(var(--grid-min-col, 12rem), 1fr));
+  }
+  :scope[columns="auto-fit"] {
+    grid-auto-flow: row;
+    grid-auto-columns: auto;
+    grid-template-columns: repeat(auto-fit, minmax(var(--grid-min-col, 12rem), 1fr));
+  }
 
   /* Column span — children can span multiple columns */
   & > [span="2"] { grid-column: span 2; }

package/components/grid/grid.d.ts

@@ -19,6 +19,8 @@ export class UIGrid extends UIElement {
   columns: string;
   /** Grid gap. Accepts numeric space-scale values (0–12) or named sizes (xs/sm/md/lg/xl). Responsive notation supported: "2 4@md" = 2 below md, 4 from md upward. */
   gap: string;
+  /** Minimum track width for columns="auto-fit"/"auto-fill" (any CSS length, e.g. "240px", "16rem"). Sets the minmax() floor so cards don't shrink below it before wrapping; unset uses the 12rem default. No effect on numeric columns. */
+  minColumnWidth: string;
   /** Row gap override */
   rowGap: string;
 }

package/components/grid/grid.yaml

@@ -35,6 +35,15 @@ props:
       md, 4 from md upward.
     type: string
     default: md
+  minColumnWidth:
+    description: >-
+      Minimum track width for columns="auto-fit"/"auto-fill" (any CSS length,
+      e.g. "240px", "16rem"). Sets the minmax() floor so cards don't shrink
+      below it before wrapping; unset uses the 12rem default. No effect on
+      numeric columns.
+    type: string
+    default: ""
+    attribute: min-column-width
   rowGap:
     description: Row gap override
     type: string

package/components/heatmap/heatmap.class.js

@@ -181,15 +181,21 @@ export class UIHeatmap extends UIElement {
           labels.appendChild(span);
         }
       }
-      labels.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
+      // day-grid month labels align to the fixed-size cell columns.
+      labels.style.gridTemplateColumns = `repeat(${cols}, var(--heatmap-cell-min-size, 0.75rem))`;
       this.appendChild(labels);
     }
 
     // ── Grid of cells ──
+    // day-grid keeps FIXED cell tracks (host scrolls horizontally when the
+    // 52-week grid exceeds the container); matrix/density use minmax(0,1fr)
+    // so they fit-and-shrink to the container.
+    const isDayGrid = this.type === 'day-grid';
+    const cellTrack = isDayGrid ? 'var(--heatmap-cell-min-size, 0.75rem)' : 'minmax(0, 1fr)';
     const grid = document.createElement('div');
     grid.setAttribute('data-grid', '');
-    grid.style.gridTemplateColumns = `repeat(${cols}, minmax(0, 1fr))`;
-    grid.style.gridTemplateRows = `repeat(${rows}, 1fr)`;
+    grid.style.gridTemplateColumns = `repeat(${cols}, ${cellTrack})`;
+    grid.style.gridTemplateRows = `repeat(${rows}, ${isDayGrid ? 'var(--heatmap-cell-min-size, 0.75rem)' : '1fr'})`;
     for (let r = 0; r < rows; r++) {
       for (let c = 0; c < cols; c++) {
         const d = map.get(`${r},${c}`);

package/components/heatmap/heatmap.css

@@ -36,6 +36,19 @@
     gap: var(--heatmap-gap, var(--heatmap-gap-default));
     color: var(--heatmap-text, var(--heatmap-text-default));
     font-size: var(--a-body-size);
+    /* A wide day-grid (52+ week columns) keeps a FIXED cell size and scrolls
+       horizontally (the GitHub-contributions model) rather than crushing
+       fixed-size cells into overlap. matrix/density fit-and-shrink instead. */
+    overflow-x: auto;
+    scrollbar-width: thin;
+  }
+
+  /* day-grid: fixed-size cell tracks + intrinsic width so the host scrolls
+     instead of squishing. (class.js writes the fixed gridTemplateColumns
+     inline for day-grid; matrix/density keep minmax(0,1fr) to fit.) */
+  :scope[type="day-grid"] > [data-grid],
+  :scope[type="day-grid"] > [data-months] {
+    width: max-content;
   }
 
   /* Title slot */
@@ -73,8 +86,12 @@
   :scope [data-cell] {
     border-radius: var(--heatmap-cell-radius, var(--heatmap-cell-radius-default));
     background: var(--heatmap-empty-bg, var(--heatmap-empty-bg-default));
-    min-width: var(--heatmap-cell-min-size, var(--heatmap-cell-min-size-default));
-    min-height: var(--heatmap-cell-min-size, var(--heatmap-cell-min-size-default));
+    /* No hard min on the cell box — it conflicted with matrix/density's
+       minmax(0,1fr) tracks (the floor refused to shrink, so cells overlapped
+       into a smear). day-grid keeps fixed size via its fixed tracks; the
+       fit-to-container modes shrink with the track. */
+    min-width: 0;
+    min-height: 0;
     aspect-ratio: 1 / 1;
     cursor: default;
     transition: transform var(--a-duration-fast) var(--a-easing-out);

package/components/image/image.css

@@ -14,13 +14,16 @@
   :scope {
     /* ── Base ── */
     box-sizing: border-box;
-    display: inline-block;
+    display: block;
     position: relative;
     overflow: hidden;
     background: var(--image-bg, var(--image-bg-default));
     border-radius: var(--image-radius, var(--image-radius-default));
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-block; }
+
   /* ── Image ── */
   [slot="image"] {
     display: block;

package/components/input/input.css

@@ -229,7 +229,7 @@ input-ui:not([disabled]) [slot="field"]:hover [slot="suffix"] {
      past the half-column cell). Targeting icon-ui directly is required
      because its own `:where(:scope)` declaration of --icon-size wins over
      any value inherited from its parent button-ui. Tying it to
-     --input-height keeps the chevron proportional across sm/md/lg. */
+     --input-height keeps the caret proportional across sm/md/lg. */
   [data-number] [slot="controls"] icon-ui {
     --icon-size: calc(var(--input-height, var(--input-height-default)) * 0.4);
   }

package/components/integration-card/integration-card.class.js

@@ -55,6 +55,25 @@ const BADGE_FOR_STATUS = Object.freeze({
   'coming-soon':{ variant: 'muted',   text: 'Coming soon', icon: '' },
 });
 
+// Fallback glyph per known provider when no explicit [logo] is supplied, so
+// a card set up with just [provider] never renders a blank logo disc. All
+// names are verified Phosphor icons. Unknown providers fall back to a generic
+// plug glyph.
+const PROVIDER_LOGO = Object.freeze({
+  slack:   'chat-circle',
+  github:  'git-branch',
+  gitlab:  'git-branch',
+  linear:  'kanban',
+  stripe:  'credit-card',
+  zapier:  'lightning',
+  figma:   'figma-logo',
+  notion:  'notion-logo',
+  webhook: 'lightning',
+  discord: 'discord-logo',
+  google:  'google-logo',
+});
+const DEFAULT_LOGO = 'plug';
+
 export class UIIntegrationCard extends UIElement {
   // Phosphor icons this primitive auto-stamps (without consumer markup).
   // Aggregated by installIconLoadersForRegistered() across all defined
@@ -238,8 +257,13 @@ export class UIIntegrationCard extends UIElement {
     // a "not found" warn for every {{p:4}} it receives on first connect.
     if (logo.startsWith('{{p:')) return;
 
-    // No logo → strip any prior content and hide.
-    if (!logo) {
+    // Resolve the visual: an explicit [logo] wins; otherwise fall back to a
+    // per-provider glyph (or a generic plug) so a card with only [provider]
+    // never renders a blank disc. Hide only when there's neither.
+    const provider = (this.provider || '').trim().toLowerCase();
+    const resolved = logo || PROVIDER_LOGO[provider] || (provider ? DEFAULT_LOGO : '');
+
+    if (!resolved) {
       this.#logoEl.replaceChildren();
       this.#logoEl.hidden = true;
       return;
@@ -247,18 +271,18 @@ export class UIIntegrationCard extends UIElement {
     this.#logoEl.hidden = false;
 
     // URL vs icon-name sniff: presence of '/' → URL.
-    const isUrl = logo.includes('/');
+    const isUrl = resolved.includes('/');
 
     if (isUrl) {
       // Reuse existing <img> if same src; otherwise re-stamp.
       let img = this.#logoEl.querySelector(':scope > img');
-      if (img && img.getAttribute('src') === logo) {
+      if (img && img.getAttribute('src') === resolved) {
         img.setAttribute('alt', `${this.name || this.provider || 'Integration'} logo`);
         return;
       }
       this.#logoEl.replaceChildren();
       img = document.createElement('img');
-      img.setAttribute('src', logo);
+      img.setAttribute('src', resolved);
       img.setAttribute('alt', `${this.name || this.provider || 'Integration'} logo`);
       img.setAttribute('data-integration-logo', '');
       img.setAttribute('loading', 'lazy');
@@ -269,10 +293,10 @@ export class UIIntegrationCard extends UIElement {
 
     // Icon name → <icon-ui>.
     let icon = this.#logoEl.querySelector(':scope > icon-ui');
-    if (icon && icon.getAttribute('name') === logo) return;
+    if (icon && icon.getAttribute('name') === resolved) return;
     this.#logoEl.replaceChildren();
     icon = document.createElement('icon-ui');
-    icon.setAttribute('name', logo);
+    icon.setAttribute('name', resolved);
     icon.setAttribute('aria-hidden', 'true');
     this.#logoEl.appendChild(icon);
   }

package/components/integration-card/integration-card.test.js

@@ -256,11 +256,22 @@ describe('integration-card-ui — logo rendering', () => {
     expect(icon.getAttribute('name')).toBe('lightning');
   });
 
-  it('hides logo wrapper when logo prop is empty', async () => {
+  it('renders a provider fallback glyph when logo prop is empty', async () => {
+    // Empty [logo] + a [provider] → the per-provider Phosphor glyph fallback
+    // (instead of a blank logo disc): wrapper stays visible with an <icon-ui>.
     const c = mount('<integration-card-ui provider="slack" name="Slack"></integration-card-ui>');
     await tick2();
     const wrap = c.querySelector('[data-integration-card-logo]');
     expect(wrap).not.toBeNull();
+    expect(wrap.hidden).toBe(false);
+    expect(wrap.querySelector('icon-ui')).not.toBeNull();
+  });
+
+  it('hides logo wrapper when both logo and provider are empty', async () => {
+    const c = mount('<integration-card-ui name="Custom"></integration-card-ui>');
+    await tick2();
+    const wrap = c.querySelector('[data-integration-card-logo]');
+    expect(wrap).not.toBeNull();
     expect(wrap.hidden).toBe(true);
   });
 });

package/components/kbd/kbd.a2ui.json

@@ -17,11 +17,12 @@
       "const": "Kbd"
     },
     "size": {
-      "description": "Sizing scale (compact tier — sm / md only).",
+      "description": "Sizing scale: sm, md (default), lg.",
       "type": "string",
       "enum": [
         "sm",
-        "md"
+        "md",
+        "lg"
       ],
       "default": ""
     }

package/components/kbd/kbd.css

@@ -7,8 +7,10 @@
     --kbd-radius-default:    var(--a-radius-sm);
     --kbd-font-default:      var(--a-font-family-code);
 
-    /* Size — defaults to md */
-    --kbd-font-size-default: var(--a-ui-tiny);
+    /* Size — defaults to md. Glyph is --a-ui-xs (12px) so md reads distinctly
+       larger than sm (--a-ui-tiny 10px) inside its 20px cap — previously both
+       md and sm resolved to --a-ui-tiny, so the glyphs were identical. */
+    --kbd-font-size-default: var(--a-ui-xs);
     --kbd-height-default:    1.25rem;
     --kbd-min-width-default: 1.25rem;
     --kbd-px-default:        var(--a-space-1);
@@ -19,8 +21,9 @@
     --kbd-height-sm-default:    1rem;
     --kbd-min-width-sm-default: 1rem;
 
-    /* Size: lg */
-    --kbd-font-size-lg-default: var(--a-ui-sm);
+    /* Size: lg — glyph --a-ui-md (14px), the top of the three-tier ramp
+       (sm 10 / md 12 / lg 14). */
+    --kbd-font-size-lg-default: var(--a-ui-md);
     --kbd-height-lg-default:    1.5rem;
     --kbd-min-width-lg-default: 1.5rem;
     text-align: start;  /* §text-align-reset — blocks inheritance from centered ancestors */

package/components/kbd/kbd.d.ts

@@ -13,6 +13,6 @@
 import { UIElement } from '../../core/element.js';
 
 export class UIKbd extends UIElement {
-  /** Sizing scale (compact tier — sm / md only). */
-  size: 'sm' | 'md';
+  /** Sizing scale: sm, md (default), lg. */
+  size: 'sm' | 'md' | 'lg';
 }

package/components/kbd/kbd.yaml

@@ -11,12 +11,13 @@ description: >-
   menu items, tooltips, command hints, and shortcut documentation.
 props:
   size:
-    description: Sizing scale (compact tier — sm / md only).
+    description: 'Sizing scale: sm, md (default), lg.'
     type: string
     default: ''
     enum:
     - sm
     - md
+    - lg
     reflect: true
 events: {}
 slots:

package/components/list/list.class.js

@@ -87,8 +87,15 @@ export class UIList extends UIElement {
   }
 
   #items() {
+    // Match by TAG as well as role: a child <list-item-ui> sets role="listitem"
+    // in its OWN connected(), which (light-DOM upgrade order) has NOT run yet
+    // when the parent list first render()s. A role-only filter therefore found
+    // zero items on the initial selectable render → aria-selected was never
+    // stamped → the [aria-selected="true"] selection CSS never matched. The tag
+    // name is present pre-upgrade, so this finds the rows regardless of timing;
+    // the attribute (aria-selected) we set persists through their later upgrade.
     return [...this.children].filter(
-      (el) => el.getAttribute && el.getAttribute('role') === 'listitem',
+      (el) => el.tagName === 'LIST-ITEM-UI' || el.getAttribute?.('role') === 'listitem',
     );
   }
 

package/components/menu/menu.css

@@ -12,10 +12,13 @@
 
   :scope {
     box-sizing: border-box;
-    display: inline-flex;
+    display: flex;
     position: relative;
   }
 
+  /* Display convention (ADR-0037): block-level by default; [inline] opts back to inline-level. */
+  :scope[inline] { display: inline-flex; }
+
   /* Items/dividers in Light DOM are hidden unless they've been adopted
      into the popover on open. Popover API also hides the popover itself
      when closed. */

package/components/modal/modal.class.js

@@ -122,7 +122,16 @@ export class UIModal extends UIElement {
   }
 
   #getDuration() {
-    const raw = getComputedStyle(this).getPropertyValue('--modal-duration').trim();
+    // Read the same fallback chain the CSS transitions use —
+    // var(--modal-duration, var(--modal-duration-default)). Reading only the
+    // public token (unset unless a consumer overrides) made this always fall
+    // back to 200ms while the CSS exit animation ran for --modal-duration-default
+    // (= --a-duration = 250ms), so the dialog closed 50ms early, clipping the
+    // animation. Same class as swiper bug-29 (the OD-5 -default token sweep left
+    // JS read-sites pointed at the now-unset public token).
+    const cs = getComputedStyle(this);
+    const raw = cs.getPropertyValue('--modal-duration').trim()
+             || cs.getPropertyValue('--modal-duration-default').trim();
     return parseFloat(raw) || 200;
   }
 

package/components/modal/modal.css

@@ -142,6 +142,12 @@
     flex: 1;
     overflow: auto;
   }
+  /* Form controls in the modal body fill the available width (a modal body is
+     a form column, not a content-width row) — matches the field/input family's
+     full-width behaviour in a real form. */
+  :scope [slot="body"] :is(field-ui, input-ui, select-ui, textarea-ui, combobox-ui, tags-input-ui, color-input-ui, slider-ui) {
+    width: 100%;
+  }
 
   /* ═══════ Footer ═══════ */
   :scope [slot="footer"] {
@@ -153,4 +159,7 @@
     border-top: 1px solid var(--modal-border, var(--modal-border-default));
     flex-shrink: 0;
   }
+  /* No content → no footer chrome: an empty footer slot otherwise renders a
+     dead band (border-top + padding) under the body. */
+  :scope [slot="footer"]:empty { display: none; }
 }

package/components/option-card/option-card.a2ui.json

@@ -114,6 +114,9 @@
       "default": {
         "description": "Spillover content revealed only when the card is checked — typically a follow-up form field (e.g. a textarea on an \"Other\" option, conditional inputs that depend on the selection). Aligns with the heading/description column; hidden via `display: none` when not checked."
       },
+      "action": {
+        "description": "CTA slot for `layout=\"tile\"` — a button-ui anchored to the card's bottom edge and stretched full-width, so a row of tile cards keeps their CTAs aligned regardless of body length (plan-picker-style pickers)."
+      },
       "heading": {
         "description": "Rich heading content. Overrides the `heading` attribute when present."
       },

package/components/option-card/option-card.css

@@ -173,34 +173,59 @@ option-card-ui[checked] [slot="icon"] {
        description below, all left-aligned. Used for hero pickers
        (data source, role, plan tiles) where the icon is a primary
        brand cue rather than secondary chrome. ── */
+  /* Tile layout — a vertical content stack (icon → heading → description →
+     body → action) with the radio indicator pinned top-right OUT of flow.
+     Flex (not grid) so content flows in DOM order with no reserved/empty
+     tracks: a no-icon plan card has no dead left column, and a slotted CTA
+     (slot="action") anchors to the card bottom regardless of how much body
+     content (price / feature list) precedes it. (Plan Picker option-card grid) */
   :scope[layout="tile"] {
-    grid-template-columns: minmax(0, 1fr) auto;
-    grid-template-areas:
-      "icon       indicator"
-      "heading    heading"
-      "description description";
-    column-gap: var(--option-card-gap-x, var(--option-card-gap-x-default));
-    row-gap: var(--option-card-gap-y, var(--option-card-gap-y-default));
-    padding: var(--a-space-4);
-    align-items: start;
+    display: flex;
+    flex-direction: column;
+    gap: var(--option-card-gap-y, var(--option-card-gap-y-default));
+    position: relative;
+    /* padding inherited from base :scope (token-driven, --option-card-padding-*) */
+  }
+  /* Radio pinned to the card's top-right corner, OUT of flow. Clear the
+     base grid-area:indicator so the absolute containing block is the card
+     itself (position:relative) rather than a collapsed grid cell — otherwise
+     a grid-forcing host (plan-picker-ui) strands the indicator in an 8px
+     gutter and inset-inline-end resolves negative. Inset by the active
+     padding token so the dot aligns with the content edge. */
+  :scope[layout="tile"]::before {
+    position: absolute;
+    grid-area: auto;
+    inset-block-start: var(--option-card-padding-block, var(--option-card-padding-block-default));
+    inset-inline-end: var(--option-card-padding-inline, var(--option-card-padding-inline-default));
+    margin-block-start: 0;
   }
+  /* Visual order is fixed via `order`, NOT DOM order: composites
+     (plan-picker-ui) append default-slot body content BEFORE option-card
+     stamps the heading/description spans on connect, so a flex stack that
+     trusted DOM order would render the body above the title. */
   :scope[layout="tile"] [slot="icon"] {
-    grid-area: icon;
-    justify-self: start;
+    order: 1;
     align-self: start;
     --option-card-icon-size-default: 1.75rem;
   }
-  :scope[layout="tile"]::before {
-    grid-area: indicator;
-    align-self: start;
-    justify-self: end;
-    margin-block-start: 0;
-  }
   :scope[layout="tile"] [slot="heading"] {
-    margin-block-start: var(--a-space-2);
+    order: 2;
+    /* Reserve the top-right radio's footprint so a long heading doesn't run
+       under it. */
+    padding-inline-end: var(--a-space-6);
+  }
+  :scope[layout="tile"] [slot="description"] {
+    order: 3;
   }
   :scope[layout="tile"] > :not([slot]) {
-    grid-column: 1 / -1;
+    order: 4;
+  }
+  /* CTA anchors to the card bottom (auto top-margin) + full-width, so a row of
+     plan cards with different body lengths keeps their buttons aligned. */
+  :scope[layout="tile"] [slot="action"] {
+    order: 5;
+    width: 100%;
+    margin-block-start: auto;
   }
 
   /* ── State: disabled ── */

package/components/option-card/option-card.yaml

@@ -76,6 +76,11 @@ slots:
     description: Rich description content. Overrides the `description` attribute when present.
   icon:
     description: Custom icon element. Overrides the `icon` attribute when present.
+  action:
+    description: >-
+      CTA slot for `layout="tile"` — a button-ui anchored to the card's bottom
+      edge and stretched full-width, so a row of tile cards keeps their CTAs
+      aligned regardless of body length (plan-picker-style pickers).
   default:
     description: >-
       Spillover content revealed only when the card is checked — typically a

package/components/otp-input/otp-input.css

@@ -1,9 +1,13 @@
 @scope (otp-input-ui) {
   :where(:scope) {
     /* ── Tokens ── */
-    --otp-input-size-default:         var(--a-size);
+    /* Digit boxes grow to fill the row, capped at ~1.75× the base control size
+       (~52px) so they read as comfortable single-digit boxes. Radius is the
+       plain --a-radius-lg token (no min()/clamp expression — radius patterns
+       stay simple). Scales with [size] + density (relative to --a-size). */
+    --otp-input-size-default:         calc(var(--a-size) * 1.75);
     --otp-input-gap-default:          var(--a-space-2);
-    --otp-input-radius-default:       var(--a-radius-md);
+    --otp-input-radius-default:       var(--a-radius-lg);
     --otp-input-border-default:       var(--a-ui-border);
     --otp-input-border-hover-default: var(--a-ui-border-hover);
     --otp-input-border-focus-default: var(--a-accent);
@@ -24,15 +28,27 @@
     /* ── Base ── */
     box-sizing: border-box;
     display: flex;
-    justify-content: space-around;
+    justify-content: center;
     gap: var(--otp-input-gap, var(--otp-input-gap-default));
+    /* Fill the container (a block-level control per ADR-0037) so the digit
+       boxes grow to use the available width instead of sitting content-width
+       on the left. Boxes flex to fill up to their cap; once capped (very wide
+       container) the group centers rather than packing left. (bug-37 follow-up) */
+    width: 100%;
   }
 
   /* ── Digit inputs ── */
+  /* Boxes grow equally to fill the row (flex), staying square (aspect-ratio)
+     and capped at --otp-input-size so they read as digit boxes — not huge on a
+     wide container, not cramped on a narrow one. The cap keeps --a-radius-md
+     proportional (a rounded square, ~25-30%), which is the whole point of the
+     bug-37 sizing. */
   [slot="digit"] {
     box-sizing: border-box;
-    width: var(--otp-input-size, var(--otp-input-size-default));
-    height: var(--otp-input-size, var(--otp-input-size-default));
+    flex: 1 1 0;
+    min-width: 0;
+    max-width: var(--otp-input-size, var(--otp-input-size-default));
+    aspect-ratio: 1;
     text-align: center;
     border: 1px solid var(--otp-input-border, var(--otp-input-border-default));
     border-radius: var(--otp-input-radius, var(--otp-input-radius-default));
@@ -67,12 +83,11 @@
   :scope[disabled] [slot="digit"] {
     background: var(--otp-input-bg-disabled, var(--otp-input-bg-disabled-default));
     color: var(--otp-input-fg-disabled, var(--otp-input-fg-disabled-default));
-    /* Dashed border rendered via SVG border-image for consistent ~8px
-       dashes across browsers (native `border-style: dashed` is too short
-       and varies by engine). The border-color fallback is used when
-       border-image isn't supported. */
+    /* Native dashed border — it follows the box's border-radius (a rounded
+       dashed square, matching the enabled state). An SVG border-image would
+       give more uniform dashes but is clipped to a SQUARE — it ignores
+       border-radius — so the disabled corners wouldn't round. */
     border: 1px dashed var(--otp-input-border-disabled, var(--otp-input-border-disabled-default));
-    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' preserveAspectRatio='none'><rect x='0.5' y='0.5' width='27' height='27' fill='none' stroke='%23999' stroke-width='1' stroke-dasharray='8 6'/></svg>") 1 repeat;
     cursor: not-allowed;
   }
 }