@reliability-design/web 1.4.10 → 1.4.11

package/dist/index.mjs

@@ -5022,7 +5022,7 @@ ${item.supportingText}` : nothing6;
                           size="${this.optionCheckboxSize}"
                           label="${item.label}"
                           icon="${item.icon}"
-                          supportingtext="${item.supportingText}"
+                          .supportingText="${item.supportingText ?? ""}"
                           status="${this.selectedValues.includes(item.value) ? "checked" : "unchecked"}"
                         ></rel-checkbox>
                       </div>` : html7`
@@ -17238,13 +17238,14 @@ var RelSelect = class extends RelElement {
       if (top + c.height > window.innerHeight - 8) {
         top = Math.max(8, t.top - c.height - 8);
       }
+      this.listboxEl.style.width = `${t.width}px`;
+      const w = Math.max(t.width, this.listboxEl.getBoundingClientRect().width);
       let left = t.left;
-      if (left + t.width > window.innerWidth - 8) {
-        left = Math.max(8, window.innerWidth - t.width - 8);
+      if (left + w > window.innerWidth - 8) {
+        left = Math.max(8, window.innerWidth - w - 8);
       }
       this.listboxEl.style.top = `${top}px`;
       this.listboxEl.style.left = `${left}px`;
-      this.listboxEl.style.width = `${t.width}px`;
       const applied = this.listboxEl.getBoundingClientRect();
       top -= applied.top - top;
       left -= applied.left - left;
@@ -17928,7 +17929,7 @@ ${option.supportingText}` : nothing19;
                         size="${this.optionCheckboxSize}"
                         label="${option.label}"
                         icon="${option.icon}"
-                        supportingtext="${option.supportingText}"
+                        .supportingText="${option.supportingText ?? ""}"
                         status="${this.selectedValues.includes(option.value) ? "checked" : "unchecked"}"
                       ></rel-checkbox>
                     </div>
@@ -18560,6 +18561,8 @@ RelSelect.styles = css27`
       margin: 0;
       padding: 0;
       width: auto;
+      /* Opt-in floor under the trigger-width panel (unset: 0, no change). */
+      min-width: var(--rel-select-panel-min-width, 0px);
       height: auto;
       color: inherit;
       box-sizing: border-box;
@@ -19191,19 +19194,34 @@ var RelPagination = class extends RelElement {
     const pages = this.generatePageNumbers();
     const current = this.activePage;
     const total = this.computedTotalPages;
+    const narrowShown = (p) => p !== -1 && (p === 1 || p === total || Math.abs(p - current) <= 1);
+    const narrowGapAt = /* @__PURE__ */ new Set();
+    const narrowKeep = /* @__PURE__ */ new Set();
+    for (let i = 0; i < pages.length; ) {
+      if (narrowShown(pages[i])) {
+        i++;
+        continue;
+      }
+      let end = i;
+      while (end < pages.length && !narrowShown(pages[end])) end++;
+      if (end - i === 1 && pages[i] !== -1) narrowKeep.add(pages[i]);
+      else narrowGapAt.add(i);
+      i = end;
+    }
     return html30`
       <div part="base" class="pag-root" role="navigation" aria-label="${this.ariaLabel}">
         <div class="pag-stack">
           ${this.renderNavBtn("prev")}
           <div class="pag-numbers">
-            ${pages.map((p) => {
-      if (p === -1) return html30`<span class="pag-ellipsis">...</span>`;
+            ${pages.map((p, i) => {
+      const gap = narrowGapAt.has(i) ? html30`<span class="pag-ellipsis pag-ellipsis-narrow">...</span>` : nothing20;
+      if (p === -1) return html30`${gap}<span class="pag-ellipsis">...</span>`;
       const isNear = Math.abs(p - current) <= 1;
       const isEdge = p === 1 || p === total;
       const label = isEdge && !isNear ? this.formatPageLabel(p) : String(p);
-      return html30`<button
+      return html30`${gap}<button
                 type="button"
-                class="pag-page-btn ${isNear ? "near" : ""} ${p === 1 || p === total ? "edge" : ""}"
+                class="pag-page-btn ${isNear ? "near" : ""} ${p === 1 || p === total ? "edge" : ""} ${narrowKeep.has(p) ? "keep" : ""}"
                 aria-label="Page ${p}"
                 title="${label === String(p) ? nothing20 : `Page ${p}`}"
                 aria-current="${p === current ? "page" : "false"}"
@@ -19262,6 +19280,13 @@ var RelPagination = class extends RelElement {
     if (to < total) pages.push(total);
     return pages.map(String);
   }
+  /** Both dropdowns' panels may be wider than their 72px trigger: the longest
+      value (`largest`), the row's 12px side padding, the 16px gap, the 18px
+      check and 20px kept for a classic scrollbar (the page list scrolls past
+      9 pages). */
+  panelMinWidth(largest) {
+    return `--rel-select-panel-min-width: calc(${String(Math.max(1, largest)).length}ch + 2 * var(--rel-spacing-sm) + var(--rel-spacing-md) + 38px)`;
+  }
   /* The inner rel-select fires its own composed `changed` / `rel-change`
      ({ value }). They must not reach the page as if the pagination had fired
      them, so they stop at the select. */
@@ -19299,7 +19324,8 @@ var RelPagination = class extends RelElement {
           size="medium"
           label-style="none"
           field-aria-label="Page (of ${total})"
-          search-placeholder="Go to page"
+          no-search
+          style=${this.panelMinWidth(total)}
           .options=${this.pageOptions(total, current)}
           .selected=${live3(String(current))}
           .state=${this.disabled ? "disabled" : "default"}
@@ -19322,6 +19348,7 @@ var RelPagination = class extends RelElement {
           label-style="none"
           field-aria-label="${this.rowsPerPageLabel}"
           no-search
+          style=${this.panelMinWidth(Math.max(0, ...values.map(Number)))}
           .options=${values}
           .selected=${live3(String(this.perPage))}
           .state=${this.disabled ? "disabled" : "default"}
@@ -19649,12 +19676,22 @@ RelPagination.styles = css28`
       }
     }
 
-    /* 480–768px: shrink the number window to current ±1 plus first/last */
+    /* The ellipsis that marks a gap only the 480–768px window opens. */
+    .pag-ellipsis.pag-ellipsis-narrow {
+      display: none;
+    }
+
+    /* 480–768px: shrink the number window to current ±1 plus first/last, with
+       an ellipsis wherever that hides more than one page */
     @container (min-width: 480px) and (max-width: 768px) {
-      .pag-page-btn:not(.near):not(.edge):not([aria-current="page"]),
+      .pag-page-btn:not(.near):not(.edge):not(.keep):not([aria-current="page"]),
       .pag-ellipsis {
         display: none;
       }
+
+      .pag-numbers .pag-ellipsis.pag-ellipsis-narrow {
+        display: inline-flex;
+      }
     }
 
     /* <480px: swap to the compact layout automatically */
@@ -19678,10 +19715,14 @@ RelPagination.styles = css28`
       }
 
       @media (min-width: 480px) and (max-width: 768px) {
-        .pag-page-btn:not(.near):not(.edge):not([aria-current="page"]),
+        .pag-page-btn:not(.near):not(.edge):not(.keep):not([aria-current="page"]),
         .pag-ellipsis {
           display: none;
         }
+
+        .pag-numbers .pag-ellipsis.pag-ellipsis-narrow {
+          display: inline-flex;
+        }
       }
 
       @media (max-width: 479px) {
@@ -23270,27 +23311,23 @@ RelSignaturePad.styles = css38`
       border-color: var(--rel-border-strong);
     }
 
-    /* Error: the 2px danger border inside, at rest too, drawn by a pseudo
-       element's border (borders paint in forced colours) so the outline stays
-       free for focus: focused in error adds a 2px danger ring outside, so
-       focus stays visible (WCAG 2.4.7). */
+    /* Error: the 2px danger border inside, at rest too, drawn as ONE outline
+       pulled 2px in like focus (outlines paint in forced colours). Focused in
+       error, the same outline widens to 4px from 2px inside: a 2px danger
+       ring outside on top of the inside edge, so focus stays visible
+       (WCAG 2.4.7). One layer, so no seams between rings at any zoom (a
+       border plus a pseudo element clipped by the pad's overflow plus an
+       outline drew three bands with light gaps between them). */
     .field.error .pad {
       border-color: var(--rel-border-danger);
-    }
-
-    .field.error .pad::after {
-      content: "";
-      position: absolute;
-      inset: -1px;
-      border: 2px solid var(--rel-border-danger);
-      border-radius: inherit;
-      pointer-events: none;
+      outline: 2px solid var(--rel-border-danger);
+      outline-offset: -2px;
     }
 
     .field.error .pad:focus,
     .field.error.typing .pad:focus-within {
-      outline-color: var(--rel-border-danger);
-      outline-offset: 0;
+      outline: 4px solid var(--rel-border-danger);
+      outline-offset: -2px;
     }
 
     /* Read-only: the edge on the page colour, one step fainter than subtle. */
@@ -24930,7 +24967,8 @@ RelSplitButton.styles = [RelButton.styles, css41`
        between the segments, so the pill is action + 1 + trigger wide. The
        outlined segments drop their inner borders. Colours:
        - secondary: the tone's outline border, and the outline's hover colour
-         while the main action is hovered or pressed (decision Combo-G);
+         while either segment is hovered or pressed, or the menu is open
+         (decision Combo-G, extended to the chevron 2026-10-27);
        - primary: the segment's label colour at full strength (Combo-B);
        - static: the static label colour (white);
        - ghost (no counterpart in the sandbox): --rel-border-subtle. */
@@ -24965,6 +25003,17 @@ RelSplitButton.styles = [RelButton.styles, css41`
       background: var(--rel-action-danger-border-outline-hover);
     }
 
+    /* The same for the chevron (Combo-G extended to the trigger, user
+       2026-10-27): hovered, pressed or open, the divider takes its border
+       colour, so the chevron shows four dark sides like the main action. */
+    :host([variant="secondary"]) .divider:has(+ rel-popover button.toggle:is(:hover, :active, .is-open):not(:disabled)) {
+      background: var(--rel-action-neutral-border-outline-hover);
+    }
+
+    :host([variant="secondary"][tone="destructive"]) .divider:has(+ rel-popover button.toggle:is(:hover, :active, .is-open):not(:disabled)) {
+      background: var(--rel-action-danger-border-outline-hover);
+    }
+
     :host([variant="primary"]) .divider {
       background: var(--rel-action-neutral-label-icons-fill-inverse);
     }