@boostdev/design-system-components 2.8.0 → 2.11.0

package/dist/web-components/{chunk-UUKSDCYS.js → chunk-47AT5KZD.js}

@@ -1,4 +1,5 @@
 import {
+  A,
   T,
   i,
   i2
@@ -8,6 +9,16 @@ import {
 var BdsCombobox = class extends i2 {
   static formAssociated = true;
   static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
       position: relative;
@@ -18,6 +29,15 @@ var BdsCombobox = class extends i2 {
       pointer-events: none;
     }
 
+    .label {
+      display: block;
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      margin-block-end: var(--bds-space_xxs);
+    }
+
     .wrapper {
       position: relative;
     }
@@ -27,8 +47,8 @@ var BdsCombobox = class extends i2 {
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
       padding: var(--bds-space_s);
-      padding-inline-end: var(--bds-space_xl);
-      border: none;
+      padding-inline-end: var(--bds-space_xxl);
+      border: var(--combobox_border, none);
       --bdc_color: var(--combobox_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--full);
 
@@ -49,6 +69,14 @@ var BdsCombobox = class extends i2 {
       outline-offset: var(--bds-outline_offset);
     }
 
+    :host([error]) .input {
+      --bdc_color: var(--bdc_color--error);
+    }
+
+    :host([error]) .input:focus {
+      --bdc_color: var(--bdc_color--error);
+    }
+
     .chevron {
       position: absolute;
       inset-inline-end: var(--bds-space_s);
@@ -67,31 +95,39 @@ var BdsCombobox = class extends i2 {
 
     .listbox {
       position: absolute;
-      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-block-start: calc(100% + var(--bds-space_xxs));
       inset-inline-start: 0;
       inline-size: 100%;
       max-block-size: 15rem;
-      overflow-y: auto;
-      background-color: var(--combobox_list-bg, var(--bds-color_bg));
-      border-radius: var(--bds-border_radius--s);
-      box-shadow: var(--bds-shadow_m);
-      z-index: var(--combobox_z-index, 100);
-      padding-block: var(--bds-space_xs);
+      overflow-block: auto;
+      list-style: none;
+      margin: 0;
+      border: var(--combobox_listbox-border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--s);
+
+      border-radius: var(--combobox_listbox-radius, var(--bdc-outline_radius));
+      background-color: var(--combobox_color_bg, var(--bds-color_bg));
+      color: var(--combobox_on-color, var(--bds-color_on-bg));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_listbox-shadow, var(--bds-shadow_m));
+      z-index: var(--combobox_z-index, var(--bds-z-index_dropdown));
+      padding: var(--bds-space_xxs) 0;
     }
 
     .option {
       display: block;
-      padding: var(--bds-space_s) var(--bds-space_m);
+      padding: var(--bds-space_xs) var(--bds-space_m);
       cursor: pointer;
       font-family: var(--bds-font_family--body);
       font-size: var(--bds-font_size--body);
-      color: var(--bds-color_on-bg);
+      color: var(--combobox_on-color, var(--bds-color_on-bg));
       transition: background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 
     .option:hover,
     .option[aria-selected='true'] {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
+      color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
     }
 
     .option[aria-disabled='true'] {
@@ -100,7 +136,8 @@ var BdsCombobox = class extends i2 {
     }
 
     .option.--focused {
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--combobox_option-bg--highlighted, var(--bds-color_bg--subtle));
+      color: var(--combobox_option-color--highlighted, var(--bds-color_interactive_on-bg));
       outline: none;
     }
 
@@ -110,15 +147,34 @@ var BdsCombobox = class extends i2 {
       font-size: var(--bds-font_size--body--s);
       color: var(--bds-color_on-bg--subtle);
     }
+
+    .message {
+      margin-block-start: var(--bds-space_xxs);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+    }
+
+    .message--error {
+      color: var(--bds-color_error);
+    }
+
+    .message--hint {
+      color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
+    }
   `;
   static properties = {
     name: { type: String, reflect: true },
     value: { type: String },
     options: { type: String },
     placeholder: { type: String },
+    label: { type: String },
+    hint: { type: String },
+    error: { type: String, reflect: true },
     disabled: { type: Boolean, reflect: true }
   };
   _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
   _open = false;
   _query = "";
   _focusedIndex = -1;
@@ -129,6 +185,7 @@ var BdsCombobox = class extends i2 {
     this.value = "";
     this.options = "[]";
     this.placeholder = "";
+    this.label = "";
     this.disabled = false;
   }
   get _options() {
@@ -229,15 +286,28 @@ var BdsCombobox = class extends i2 {
   render() {
     const filtered = this._filtered;
     const inputValue = this._open ? this._query : this._displayLabel;
+    const id = `bds-combobox-${this._uid}`;
+    const listboxId = `${id}-listbox`;
+    const hintId = `${id}-hint`;
+    const errorId = `${id}-error`;
+    const describedBy = [this.error && errorId, this.hint && hintId].filter(Boolean).join(" ") || void 0;
+    const activeDescendant = this._focusedIndex >= 0 && this._focusedIndex < filtered.length ? `${id}-option-${this._focusedIndex}` : void 0;
     return T`
+      ${this.label ? T`<label class="label" for=${id}>${this.label}</label>` : ""}
       <div class="wrapper">
         <input
+          id=${id}
           type="text"
           class="input"
           role="combobox"
           aria-expanded=${this._open}
           aria-autocomplete="list"
           aria-haspopup="listbox"
+          aria-controls=${listboxId}
+          aria-activedescendant=${activeDescendant ?? A}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-describedby=${describedBy ?? A}
+          autocomplete="off"
           name=${this.name}
           placeholder=${this.placeholder}
           .value=${inputValue}
@@ -253,9 +323,10 @@ var BdsCombobox = class extends i2 {
           </svg>
         </span>
         ${this._open ? T`
-          <ul class="listbox" role="listbox" aria-label="Options">
-            ${filtered.length === 0 ? T`<li class="no-results">No results</li>` : filtered.map((opt, i3) => T`
+          <ul id=${listboxId} class="listbox" role="listbox" aria-label="Options">
+            ${filtered.length === 0 ? T`<li class="no-results" role="presentation">No results</li>` : filtered.map((opt, i3) => T`
                   <li
+                    id="${id}-option-${i3}"
                     class="option ${i3 === this._focusedIndex ? "--focused" : ""}"
                     role="option"
                     aria-selected=${opt.value === this.value}
@@ -269,6 +340,7 @@ var BdsCombobox = class extends i2 {
           </ul>
         ` : ""}
       </div>
+      ${this.error ? T`<p id=${errorId} class="message message--error" role="alert">${this.error}</p>` : this.hint ? T`<p id=${hintId} class="message message--hint">${this.hint}</p>` : ""}
     `;
   }
 };

package/dist/web-components/chunk-4A2YYTYN.js

@@ -0,0 +1,93 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-button-container.ts
+var BdsButtonContainer = class extends i2 {
+  static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+      inline-size: 100%;
+      /* Span the full row when placed inside a bds-grid. */
+      grid-column: var(--bds-grid_span-100, 1 / -1);
+      container-type: inline-size;
+      container-name: button-container;
+    }
+
+    .container {
+      position: relative;
+      display: flex;
+      flex-direction: column-reverse;
+      gap: var(--buttonGroup_gap, var(--bds-space_l));
+      align-items: center;
+    }
+
+    :host([variant='card']) .container {
+      align-items: stretch;
+    }
+
+    :host([variant='flow']) .container,
+    :host([variant='modal']) .container {
+      align-items: center;
+    }
+
+    :host([variant='content']) .container {
+      align-items: flex-start;
+    }
+
+    @container button-container (min-width: 30rem) {
+      .container {
+        flex-direction: row;
+        justify-content: space-between;
+      }
+
+      /* A lone button in flow/modal is pushed to the end. */
+      :host([variant='modal']) ::slotted(:only-child),
+      :host([variant='flow']) ::slotted(:only-child) {
+        margin-inline-start: auto;
+      }
+
+      :host([variant='card']) .container {
+        justify-content: center;
+      }
+
+      :host([variant='modal']) .container {
+        justify-content: flex-end;
+      }
+
+      :host([variant='content']) .container {
+        justify-content: flex-start;
+        align-items: center;
+      }
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true },
+    "aria-label": { type: String }
+  };
+  render() {
+    return T`
+      <div class="container" role="group" aria-label=${this["aria-label"] ?? A}>
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-button-container", BdsButtonContainer);
+
+export {
+  BdsButtonContainer
+};

package/dist/web-components/{chunk-Q4T5BJT6.js → chunk-62NK3ZSC.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/ui/bds-breadcrumb.ts
 var BdsBreadcrumb = class extends i2 {
   static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
@@ -55,6 +65,10 @@ var BdsBreadcrumb = class extends i2 {
       user-select: none;
     }
 
+    .text {
+      color: var(--bds-color_on-bg--subtle);
+    }
+
     .current {
       color: var(--bds-color_on-bg--subtle);
       font-weight: var(--bds-font_weight--semibold);
@@ -68,15 +82,16 @@ var BdsBreadcrumb = class extends i2 {
     this.items = [];
   }
   render() {
+    const items = this.items ?? [];
     return T`
       <nav class="breadcrumb" aria-label="Breadcrumb">
         <ol class="list">
-          ${this.items.map((item, index) => {
-      const isLast = index === this.items.length - 1;
+          ${items.map((item, index) => {
+      const isLast = index === items.length - 1;
       return T`
               <li class="item">
                 ${isLast ? T`<span class="current" aria-current="page">${item.label}</span>` : T`
-                      <a class="link" href=${item.href ?? "#"}>${item.label}</a>
+                      ${item.href ? T`<a class="link" href=${item.href}>${item.label}</a>` : T`<span class="text">${item.label}</span>`}
                       <span class="separator" aria-hidden="true">›</span>
                     `}
               </li>

package/dist/web-components/chunk-66M6ETWD.js

@@ -0,0 +1,77 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-skip-link.ts
+var BdsSkipLink = class extends i2 {
+  static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
+    :host {
+      display: block;
+    }
+
+    .skip-link {
+      position: absolute;
+      inset-block-start: var(--skip-link_inset, var(--bds-space_s));
+      inset-inline-start: var(--skip-link_inset, var(--bds-space_s));
+      z-index: var(--skip-link_z-index, var(--bds-z-index_xl));
+      padding: var(--skip-link_padding, var(--bds-space_xs) var(--bds-space_m));
+      background-color: var(--bds-color_bg);
+      color: var(--bds-color_on-bg);
+      border-radius: var(--skip-link_radius, var(--bds-border_radius--s));
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--skip-link_font-size, var(--bds-font_size--body));
+      text-decoration: none;
+
+      --bdc_color: var(--color_focus, var(--bds-color_interactive));
+
+      border: var(--skip-link_border, none);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color),
+        var(--skip-link_shadow, var(--bdc-outline_shadow));
+      transform: translateY(calc(-100% - var(--skip-link_inset, var(--bds-space_s))));
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .skip-link:focus-visible {
+      transform: translateY(0);
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .skip-link {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    href: { type: String }
+  };
+  constructor() {
+    super();
+    this.href = "#main";
+  }
+  render() {
+    return T`
+      <a class="skip-link" href=${this.href}>
+        <slot>Skip to main content</slot>
+      </a>
+    `;
+  }
+};
+customElements.define("bds-skip-link", BdsSkipLink);
+
+export {
+  BdsSkipLink
+};

package/dist/web-components/{chunk-NCPQ7AF3.js → chunk-6G22I2CK.js}

@@ -8,6 +8,16 @@ import {
 // src/web-components/ui/bds-alert.ts
 var BdsAlert = class extends i2 {
   static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
@@ -96,8 +106,8 @@ var BdsAlert = class extends i2 {
     }
 
     .dismiss svg {
-      width: 1rem;
-      height: 1rem;
+      inline-size: 1rem;
+      block-size: 1rem;
     }
 
     .dismiss:focus-visible {
@@ -113,6 +123,7 @@ var BdsAlert = class extends i2 {
   `;
   static properties = {
     variant: { type: String, reflect: true },
+    heading: { type: String },
     title: { type: String },
     dismissible: { type: Boolean, reflect: true },
     _iconFilled: { state: true }
@@ -120,10 +131,14 @@ var BdsAlert = class extends i2 {
   constructor() {
     super();
     this.variant = "info";
+    this.heading = "";
     this.title = "";
     this.dismissible = false;
     this._iconFilled = false;
   }
+  get _headingText() {
+    return this.heading || this.title;
+  }
   _onIconSlotChange(e) {
     const slot = e.target;
     this._iconFilled = slot.assignedNodes({ flatten: true }).length > 0;
@@ -146,7 +161,7 @@ var BdsAlert = class extends i2 {
           <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
         </span>
         <div class="content">
-          ${this.title ? T`<strong class="title">${this.title}</strong>` : A}
+          ${this._headingText ? T`<strong class="title">${this._headingText}</strong>` : A}
           <div><slot></slot></div>
         </div>
         ${this.dismissible ? T`

package/dist/web-components/{chunk-QDST57JC.js → chunk-7ZOJ7N4E.js}

@@ -10,6 +10,16 @@ var SIZE_PX = { small: 40, medium: 64, large: 96 };
 var STROKE_WIDTH = 4;
 var BdsProgressCircle = class extends i2 {
   static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
       align-items: center;
@@ -22,7 +32,7 @@ var BdsProgressCircle = class extends i2 {
     }
 
     .track {
-      stroke: var(--bds-color_bg--subtle);
+      stroke: var(--progressCircle_color-track, var(--bds-color_bg--subtle));
     }
 
     .fill {
@@ -39,7 +49,7 @@ var BdsProgressCircle = class extends i2 {
       line-height: 1;
     }
 
-    :host([size='small'])  .value { font-size: 0.5rem; }
+    :host([size='small'])  .value { font-size: var(--progressCircle_font-size--small, var(--bds-font_size--body--s)); }
     :host([size='large'])  .value { font-size: var(--bds-font_size--body); }
 
     @media (prefers-reduced-motion: reduce) {
@@ -73,8 +83,8 @@ var BdsProgressCircle = class extends i2 {
     return T`
       <div
         role="progressbar"
-        aria-label=${this.label}
-        aria-valuenow=${this.value}
+        aria-label=${this.label || A}
+        aria-valuenow=${Math.min(this.max, Math.max(0, this.value))}
         aria-valuemin="0"
         aria-valuemax=${this.max}
         style="position: relative; display: inline-flex; align-items: center; justify-content: center;"

package/dist/web-components/{chunk-QLT6MTZF.js → chunk-AIBOHNDU.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/ui/bds-loading.ts
 var BdsLoading = class extends i2 {
   static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: flex;
       justify-content: center;

package/dist/web-components/{chunk-X3NQMBAQ.js → chunk-AP4RDUL2.js}

@@ -8,6 +8,16 @@ import {
 // src/web-components/ui/bds-progress.ts
 var BdsProgress = class extends i2 {
   static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: block;
     }
@@ -34,7 +44,7 @@ var BdsProgress = class extends i2 {
     .track {
       inline-size: 100%;
       block-size: var(--progress_height, var(--bds-space_xs));
-      background-color: var(--bds-color_bg--subtle);
+      background-color: var(--progress_color-track, var(--bds-color_bg--subtle));
       border-radius: var(--progress_radius, var(--bds-border_radius--full));
       overflow: hidden;
     }
@@ -76,6 +86,7 @@ var BdsProgress = class extends i2 {
   }
   render() {
     const pct = this._percentage;
+    const clampedValue = Math.min(this.max, Math.max(0, this.value));
     return T`
       <div class="container">
         ${this.showLabel ? T`
@@ -87,8 +98,8 @@ var BdsProgress = class extends i2 {
         <div
           class="track"
           role="progressbar"
-          aria-label=${this.label}
-          aria-valuenow=${this.value}
+          aria-label=${this.label || A}
+          aria-valuenow=${clampedValue}
           aria-valuemin="0"
           aria-valuemax=${this.max}
         >

package/dist/web-components/{chunk-QWPACK5L.js → chunk-BPYKZVDK.js}

@@ -7,6 +7,16 @@ import {
 // src/web-components/ui/bds-badge.ts
 var BdsBadge = class extends i2 {
   static styles = i`
+    /* Shadow DOM does not inherit the global box-sizing reset, so set it
+       here; otherwise elements with an explicit size + padding size as
+       content-box and layouts drift from the React (light-DOM) versions. */
+    :host,
+    *,
+    *::before,
+    *::after {
+      box-sizing: border-box;
+    }
+
     :host {
       display: inline-flex;
     }
@@ -16,7 +26,7 @@ var BdsBadge = class extends i2 {
       align-items: center;
       justify-content: center;
       padding: var(--bds-space_xxs) var(--bds-space_xs);
-      border-radius: var(--badge_radius, 2em);
+      border-radius: var(--badge_radius, var(--bds-border_radius--full));
       font-size: var(--badge_font-size, var(--bds-font_size--body--s));
       font-weight: var(--bds-font_weight--semibold);
       line-height: 1;