@boostdev/design-system-components 2.6.0 → 2.7.1

package/dist/web-components/{chunk-T6AETZRP.js → chunk-3GFWLSLS.js}

@@ -30,7 +30,7 @@ var BdsCheckbox = class extends i2 {
       inline-size: var(--inputSize);
       block-size: var(--inputSize);
       flex-shrink: 0;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--checkbox_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--checkbox_radius, var(--bdc-outline_radius));

package/dist/web-components/{chunk-N6IMUOY4.js → chunk-65JXQOBA.js}

@@ -15,7 +15,7 @@ var BdsDialog = class extends i2 {
     .dialog {
       font-size: var(--bds-font_size--body--s);
       border: var(--dialog_border, none);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--dialog_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--m);
 
       border-radius: var(--dialog_radius, var(--bdc-outline_radius));
@@ -47,11 +47,11 @@ var BdsDialog = class extends i2 {
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 50%;
+      border-radius: var(--dialog_close-radius, var(--bds-border_radius--circle));
       background-color: var(--bds-color_bg);
       color: currentcolor;
       border: var(--dialog_close-border, none);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--dialog_close-border-color, currentcolor);
 
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       cursor: pointer;

package/dist/web-components/{chunk-ZTC6GRP7.js → chunk-BKIHQYJR.js}

@@ -9,6 +9,7 @@ var BdsAccordion = class extends i2 {
   static styles = i`
     :host {
       display: block;
+      border: var(--accordion_border, none);
       --bdc_color: var(--bds-color_bg--subtle);
       --bdc-outline_radius: var(--bds-border_radius--s);
       border-radius: var(--accordion_radius, var(--bdc-outline_radius));

package/dist/web-components/{chunk-X3FKVHLK.js → chunk-CM3KYZ6Z.js}

@@ -29,7 +29,7 @@ var BdsSelect = class extends i2 {
       padding: var(--bds-space_s);
       padding-inline-end: var(--bds-space_xl);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--select_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--select_radius, var(--bdc-outline_radius));

package/dist/web-components/{chunk-QLZ2362S.js → chunk-CZBIVR4V.js}

@@ -29,7 +29,7 @@ var BdsCombobox = class extends i2 {
       padding: var(--bds-space_s);
       padding-inline-end: var(--bds-space_xl);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--combobox_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--combobox_radius, var(--bdc-outline_radius));

package/dist/web-components/{chunk-GER5UJOF.js → chunk-F5E3IT7G.js}

@@ -31,7 +31,7 @@ var BdsButton = class extends i2 {
       padding-inline: var(--bds-space_l);
       display: inline-flex;
       gap: var(--bds-space_xs);
-      border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
+      border-radius: var(--button_radius, var(--bds-border_radius--full));
       align-items: center;
       cursor: pointer;
       justify-content: center;
@@ -77,7 +77,6 @@ var BdsButton = class extends i2 {
     .button.small {
       --button_height:    2.25em;
       --button_font-size: var(--bds-font_size--body--s);
-      --button_border_radius--s: var(--bds-border_radius--xs);
       padding-inline: var(--bds-space_m);
     }
 
@@ -88,7 +87,6 @@ var BdsButton = class extends i2 {
 
     .button.large {
       --button_font-size: var(--bds-font_size--heading-3);
-      --button_border_radius--s: var(--bds-border_radius--m);
       padding-inline: var(--bds-space_xl);
     }
 

package/dist/web-components/{chunk-UFFCKVZE.js → chunk-FXURM6D5.js}

@@ -49,7 +49,7 @@ var BdsAccordionItem = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .trigger:not(:disabled):hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
       }
     }
 

package/dist/web-components/{chunk-HHHRF2PS.js → chunk-IYGF6CD5.js}

@@ -30,7 +30,7 @@ var BdsRadio = class extends i2 {
       inline-size: var(--inputSize);
       block-size: var(--inputSize);
       flex-shrink: 0;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--radio_border-color, currentcolor);
       --bdc-outline_radius: 50%;
 
       border-radius: 50%;

package/dist/web-components/{chunk-OCODKRVZ.js → chunk-KUI55GFB.js}

@@ -96,7 +96,7 @@ var BdsDrawer = class extends i2 {
       justify-content: center;
       inline-size: 2rem;
       block-size: 2rem;
-      border-radius: 50%;
+      border-radius: var(--drawer_close-radius, var(--bds-border_radius--circle));
       cursor: pointer;
       transition: var(--bds-animation_transition);
     }
@@ -113,7 +113,7 @@ var BdsDrawer = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .close-button:hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
       }
     }
 

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

@@ -89,7 +89,8 @@ var BdsAlert = class extends i2 {
       cursor: pointer;
       color: currentcolor;
       transition: var(--bds-animation_transition);
-      border-radius: 50%;
+      border: var(--alert_dismiss-border, none);
+      border-radius: var(--alert_dismiss-radius, var(--bds-border_radius--circle));
       --bdc_color: currentcolor;
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
@@ -106,7 +107,7 @@ var BdsAlert = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .dismiss:hover {
-        opacity: 0.7;
+        opacity: var(--alert_dismiss-opacity--hover, 0.7);
       }
     }
   `;

package/dist/web-components/{chunk-RTOS7LLG.js → chunk-PC3IOQAH.js}

@@ -20,9 +20,11 @@ var BdsCard = class extends i2 {
       position: relative;
       box-sizing: border-box;
       inline-size: 100%;
+      block-size: 100%;
       text-align: inherit;
       font: inherit;
       border: none;
+      padding: var(--card_padding, var(--bds-space_m));
     }
 
     /* Resting shadows — consumers can override per-variant via
@@ -31,15 +33,11 @@ var BdsCard = class extends i2 {
     .card.--elevated { box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m)); }
 
     .card.--outlined {
+      border: var(--card_border, none);
       --bdc_color: currentcolor;
       box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
     }
 
-    .card.--padding-none   { padding: 0; }
-    .card.--padding-small  { padding: var(--bds-space_s); }
-    .card.--padding-medium { padding: var(--bds-space_m); }
-    .card.--padding-large  { padding: var(--bds-space_l); }
-
     .card.--text-start  { text-align: start; }
     .card.--text-center { text-align: center; }
     .card.--text-end    { text-align: end; }
@@ -72,7 +70,6 @@ var BdsCard = class extends i2 {
   `;
   static properties = {
     variant: { type: String, reflect: true },
-    padding: { type: String, reflect: true },
     textAlign: { type: String, attribute: "text-align", reflect: true },
     clickable: { type: Boolean, reflect: true },
     ariaLabel: { type: String, attribute: "aria-label" }
@@ -80,7 +77,6 @@ var BdsCard = class extends i2 {
   constructor() {
     super();
     this.variant = "default";
-    this.padding = "medium";
     this.textAlign = "start";
     this.clickable = false;
     this.ariaLabel = "";
@@ -92,7 +88,6 @@ var BdsCard = class extends i2 {
     const classes = [
       "card",
       `--${this.variant}`,
-      `--padding-${this.padding}`,
       `--text-${this.textAlign}`,
       this.clickable ? "--clickable" : ""
     ].filter(Boolean).join(" ");

package/dist/web-components/{chunk-JUKB3BUP.js → chunk-PXZWYO6Z.js}

@@ -28,7 +28,7 @@ var BdsNumberInput = class extends i2 {
       font-size: var(--bds-font_size--body);
       padding: var(--bds-space_s);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--number-input_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--number-input_radius, var(--bdc-outline_radius));

package/dist/web-components/{chunk-EBJM3VD4.js → chunk-QBB6ZX4R.js}

@@ -24,7 +24,7 @@ var BdsTextarea = class extends i2 {
       line-height: var(--bds-font_line-height--body);
       padding: var(--bds-space_s);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--textarea_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--textarea_radius, var(--bdc-outline_radius));

package/dist/web-components/{chunk-ECW3HHWA.js → chunk-TQ7IQ4GZ.js}

@@ -28,10 +28,15 @@ var BdsPopover = class extends i2 {
       overflow-y: auto;
       z-index: var(--popover_z-index, 100);
       min-width: 12rem;
+      max-width: var(--popover_max-width, 20rem);
+      max-height: var(--popover_max-height, 80dvh);
       padding: var(--bds-space_m);
-      border-radius: var(--bds-border_radius--s);
+      border: var(--popover_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--s);
+      border-radius: var(--popover_radius, var(--bdc-outline_radius));
       background-color: var(--popover_color, var(--bds-color_bg));
-      box-shadow: var(--popover_shadow, var(--bds-shadow_m));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--popover_shadow, var(--bds-shadow_m));
       color: var(--popover_on-color, var(--bds-color_on-bg));
       font-size: var(--bds-font_size--body);
     }

package/dist/web-components/{chunk-AJSXNDAP.js → chunk-X46KL5BK.js}

@@ -17,9 +17,9 @@ var BdsNotificationBanner = class extends i2 {
       align-items: center;
       gap: var(--bds-space_m);
       padding: var(--bds-space_s) var(--bds-space_m);
-      background-color: var(--banner_bg, var(--bds-color_blue--subtle));
-      color: var(--banner_text, var(--bds-color_on-blue--subtle));
-      border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
+      background-color: var(--banner_bg, var(--banner_bg--variant, var(--bds-color_blue--subtle)));
+      color: var(--banner_text, var(--banner_text--variant, var(--bds-color_on-blue--subtle)));
+      border-block-end: 3px solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
       inline-size: 100%;
@@ -27,27 +27,27 @@ var BdsNotificationBanner = class extends i2 {
     }
 
     :host([variant='info']) .banner {
-      --banner_bg:     var(--bds-color_blue--subtle);
-      --banner_text:   var(--bds-color_on-blue--subtle);
-      --banner_border: var(--bds-color_blue);
+      --banner_bg--variant:     var(--banner_bg--info, var(--bds-color_blue--subtle));
+      --banner_text--variant:   var(--banner_text--info, var(--bds-color_on-blue--subtle));
+      --banner_border--variant: var(--banner_border--info, var(--bds-color_blue));
     }
 
     :host([variant='success']) .banner {
-      --banner_bg:     var(--bds-color_success--subtle);
-      --banner_text:   var(--bds-color_on-success--subtle);
-      --banner_border: var(--bds-color_success);
+      --banner_bg--variant:     var(--banner_bg--success, var(--bds-color_success--subtle));
+      --banner_text--variant:   var(--banner_text--success, var(--bds-color_on-success--subtle));
+      --banner_border--variant: var(--banner_border--success, var(--bds-color_success));
     }
 
     :host([variant='warning']) .banner {
-      --banner_bg:     var(--bds-color_orange--subtle);
-      --banner_text:   var(--bds-color_on-orange--subtle);
-      --banner_border: var(--bds-color_warning);
+      --banner_bg--variant:     var(--banner_bg--warning, var(--bds-color_orange--subtle));
+      --banner_text--variant:   var(--banner_text--warning, var(--bds-color_on-orange--subtle));
+      --banner_border--variant: var(--banner_border--warning, var(--bds-color_warning));
     }
 
     :host([variant='error']) .banner {
-      --banner_bg:     rgb(from var(--bds-color_error) r g b / 12%);
-      --banner_text:   var(--bds-color_on-bg);
-      --banner_border: var(--bds-color_error);
+      --banner_bg--variant:     var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
+      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-bg));
+      --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
     }
 
     .content {
@@ -71,9 +71,10 @@ var BdsNotificationBanner = class extends i2 {
       flex-shrink: 0;
       cursor: pointer;
       color: currentcolor;
-      border-radius: 50%;
+      border-radius: var(--banner_dismiss-radius, var(--bds-border_radius--circle));
+      border: var(--banner_dismiss-border, none);
       transition: var(--bds-animation_transition);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--notification-banner_dismiss-border-color, currentcolor);
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
 
@@ -89,7 +90,7 @@ var BdsNotificationBanner = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .dismiss:hover {
-        opacity: 0.7;
+        opacity: var(--banner_dismiss-opacity--hover, 0.7);
       }
     }
   `;

package/dist/web-components/{chunk-XNA6WTXG.js → chunk-Y3POAKGS.js}

@@ -30,7 +30,7 @@ var BdsSwitch = class extends i2 {
       block-size: 1.5rem;
       border-radius: 999px;
       background-color: var(--switch_color_bg, var(--bds-color_bg--subtle));
-      --bdc_color: currentcolor;
+      --bdc_color: var(--switch_border-color, currentcolor);
 
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
       transition: background-color 0.2s ease;

package/dist/web-components/{chunk-HGBNDR22.js → chunk-Y7V7LM6R.js}

@@ -17,7 +17,7 @@ var BdsTooltip = class extends i2 {
       position: absolute;
       z-index: var(--bds-z-index_popover, 200);
       padding: var(--bds-space_xxs) var(--bds-space_xs);
-      border-radius: var(--bds-border_radius--xs);
+      border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
       background-color: var(--tooltip_bg, var(--bds-color_on-bg));
       color: var(--tooltip_text, var(--bds-color_bg));
       font-size: var(--bds-font_size--body--s);

package/dist/web-components/index.d.ts

@@ -426,6 +426,61 @@ declare global {
     }
 }
 
+type FieldGroupVariant = 'horizontal' | 'vertical';
+/**
+ * `<bds-field-group>` — framework-agnostic FieldGroup custom element.
+ *
+ * Semantically groups related form fields under a single `<fieldset>` and
+ * lays them out either horizontally (with a CSS container query that
+ * collapses to a vertical stack when the FieldGroup itself is too narrow)
+ * or vertically. Mirrors the React `FieldGroup` component.
+ *
+ * Attributes:
+ *   variant  — "horizontal" (default) | "vertical"
+ *   legend   — optional legend text rendered above the fields
+ *   disabled — boolean; forwarded to the inner <fieldset>
+ *
+ * Slots:
+ *   (default) — form fields (any element). The slotted-element count is
+ *     measured on each `slotchange` and surfaced via the
+ *     `--fieldGroup_field-count` custom property, which the auto-derived
+ *     collapse threshold reads.
+ *
+ * @example
+ * <bds-field-group variant="horizontal" legend="Contact details">
+ *   <bds-form-input label="First name" name="first"></bds-form-input>
+ *   <bds-form-input label="Last name"  name="last"></bds-form-input>
+ *   <bds-form-input label="Email"      name="email"></bds-form-input>
+ * </bds-field-group>
+ */
+declare class BdsFieldGroup extends LitElement {
+    static styles: lit.CSSResult;
+    static properties: {
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
+        legend: {
+            type: StringConstructor;
+        };
+        disabled: {
+            type: BooleanConstructor;
+            reflect: boolean;
+        };
+    };
+    variant: FieldGroupVariant;
+    legend: string;
+    disabled: boolean;
+    constructor();
+    private _onSlotChange;
+    render(): lit.TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'bds-field-group': BdsFieldGroup;
+    }
+}
+
 /**
  * `<bds-form-input>` — form-associated text input with label, hint, and error support.
  *
@@ -749,4 +804,4 @@ declare global {
     }
 }
 
-export { BdsButtonGroup, BdsCalendar, BdsCarousel, BdsCheckboxGroup, BdsDropdownMenu, BdsDropdownMenuItem, BdsFormInput, BdsGrid, BdsGridItem, BdsPagination, BdsRadioGroup, BdsTable };
+export { BdsButtonGroup, BdsCalendar, BdsCarousel, BdsCheckboxGroup, BdsDropdownMenu, BdsDropdownMenuItem, BdsFieldGroup, type FieldGroupVariant as BdsFieldGroupVariant, BdsFormInput, BdsGrid, BdsGridItem, BdsPagination, BdsRadioGroup, BdsTable };