@boostdev/design-system-components 2.6.0 → 2.7.1

package/dist/web-components/index.js

@@ -1,39 +1,39 @@
 import {
   BdsSwitch
-} from "./chunk-XNA6WTXG.js";
+} from "./chunk-Y3POAKGS.js";
 import {
   BdsTextarea
-} from "./chunk-EBJM3VD4.js";
+} from "./chunk-QBB6ZX4R.js";
 import {
   BdsCheckbox
-} from "./chunk-T6AETZRP.js";
+} from "./chunk-3GFWLSLS.js";
 import {
   BdsCombobox
-} from "./chunk-QLZ2362S.js";
+} from "./chunk-CZBIVR4V.js";
 import {
   BdsFileInput
 } from "./chunk-PY62FTRW.js";
 import {
   BdsNumberInput
-} from "./chunk-JUKB3BUP.js";
+} from "./chunk-PXZWYO6Z.js";
 import {
   BdsRadio
-} from "./chunk-HHHRF2PS.js";
+} from "./chunk-IYGF6CD5.js";
 import {
   BdsSegmentedControl
 } from "./chunk-2FGATTGT.js";
 import {
   BdsSelect
-} from "./chunk-X3FKVHLK.js";
+} from "./chunk-CM3KYZ6Z.js";
 import {
   BdsSlider
 } from "./chunk-7FMR53BW.js";
 import {
   BdsDrawer
-} from "./chunk-OCODKRVZ.js";
+} from "./chunk-KUI55GFB.js";
 import {
   BdsPopover
-} from "./chunk-ECW3HHWA.js";
+} from "./chunk-TQ7IQ4GZ.js";
 import {
   BdsSkipLink
 } from "./chunk-BQLZ7I4G.js";
@@ -51,7 +51,7 @@ import {
 } from "./chunk-YLVTEY23.js";
 import {
   BdsTooltip
-} from "./chunk-HGBNDR22.js";
+} from "./chunk-Y7V7LM6R.js";
 import {
   BdsSeparator
 } from "./chunk-VMMVWLXL.js";
@@ -63,19 +63,19 @@ import {
 } from "./chunk-SOQQ7RVJ.js";
 import {
   BdsAccordion
-} from "./chunk-ZTC6GRP7.js";
+} from "./chunk-BKIHQYJR.js";
 import {
   BdsAccordionItem
-} from "./chunk-UFFCKVZE.js";
+} from "./chunk-FXURM6D5.js";
 import {
   BdsButton
-} from "./chunk-GER5UJOF.js";
+} from "./chunk-F5E3IT7G.js";
 import {
   BdsCollapsible
 } from "./chunk-6I2DBFQ7.js";
 import {
   BdsDialog
-} from "./chunk-N6IMUOY4.js";
+} from "./chunk-65JXQOBA.js";
 import {
   BdsIconWrapper
 } from "./chunk-5TFWOPLH.js";
@@ -87,7 +87,7 @@ import {
 } from "./chunk-5R6IFELV.js";
 import {
   BdsNotificationBanner
-} from "./chunk-AJSXNDAP.js";
+} from "./chunk-X46KL5BK.js";
 import {
   BdsProgress
 } from "./chunk-ITHLKR7Q.js";
@@ -104,7 +104,7 @@ import "./chunk-QPOKHLMQ.js";
 import "./chunk-3S42DZ7W.js";
 import {
   BdsAlert
-} from "./chunk-ZNKEZIYE.js";
+} from "./chunk-NCPQ7AF3.js";
 import {
   BdsAvatar
 } from "./chunk-57TRNCWQ.js";
@@ -116,11 +116,12 @@ import {
 } from "./chunk-Q4T5BJT6.js";
 import {
   BdsCard
-} from "./chunk-RTOS7LLG.js";
+} from "./chunk-PC3IOQAH.js";
 import {
   BdsDescriptionList
 } from "./chunk-AGKJTMJI.js";
 import {
+  A,
   T,
   i,
   i2
@@ -621,6 +622,10 @@ var BdsTable = class extends i2 {
     .wrapper {
       overflow-inline: auto;
       -webkit-overflow-scrolling: touch;
+      border: var(--table_border, none);
+      border-radius: var(--table_radius, var(--bds-border_radius--s));
+      --bdc_color: var(--bds-color_bg--subtle);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
 
     ::slotted(table) {
@@ -723,7 +728,7 @@ var BdsPagination = class extends i2 {
       cursor: pointer;
       color: var(--bds-color_on-bg);
       transition: var(--bds-animation_transition);
-      --bdc_color: transparent;
+      --bdc_color: var(--pagination_border-color, transparent);
       --bdc-outline_radius: var(--bds-border_radius--xs);
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bdc-outline_shadow);
     }
@@ -881,6 +886,7 @@ var BdsCheckboxGroup = class extends i2 {
 
     .message--hint {
       color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
     }
   `;
   static properties = {
@@ -957,6 +963,7 @@ var BdsRadioGroup = class extends i2 {
 
     .message--hint {
       color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
     }
   `;
   static properties = {
@@ -1007,6 +1014,118 @@ var BdsRadioGroup = class extends i2 {
 };
 customElements.define("bds-radio-group", BdsRadioGroup);
 
+// src/web-components/interaction/form/bds-field-group.ts
+var BdsFieldGroup = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+
+      /* Establish an inline-size containment context so the @container rule
+         queries the host's own width — independent of the viewport. */
+      container-type: inline-size;
+      container-name: field-group;
+
+      /* Auto-derived collapse threshold (mirror of the React component).
+         --fieldGroup_field-count is set inline by _onSlotChange; the other
+         tokens use foundation-default fallbacks so the calc rebuilds when
+         a consumer overrides --fieldGroup_min-field-width or _gap. */
+      --fieldGroup_collapse-threshold:
+        calc(
+          var(--fieldGroup_field-count, 1)
+          * var(--fieldGroup_min-field-width, 12rem)
+          + (var(--fieldGroup_field-count, 1) - 1)
+          * var(--fieldGroup_gap, var(--bds-space_m))
+        );
+    }
+
+    fieldset {
+      border: 0;
+      margin: 0;
+      padding: 0;
+      min-inline-size: 0;
+    }
+
+    .legend {
+      inline-size: 100%;
+      padding-inline: 0;
+
+      padding-block:
+        var(--fieldGroup_legend-padding-block, var(--bds-space_xs));
+      margin-block-end:
+        var(--fieldGroup_legend-gap, var(--bds-space_m));
+      border-block-end:
+        var(--fieldGroup_legend-border-block-end, 1px solid var(--bds-color_bg--subtle));
+
+      color:
+        var(--fieldGroup_legend-color, var(--bds-color_on-bg));
+      font-family: var(--bds-font_family--body);
+      font-size:
+        var(--fieldGroup_legend-font-size, var(--bds-font_size--heading-3));
+      font-weight:
+        var(--fieldGroup_legend-font-weight, var(--bds-font_weight--semibold));
+      line-height:
+        var(--fieldGroup_legend-line-height, var(--bds-font_line-height--heading));
+    }
+
+    .fields {
+      display: flex;
+      flex-direction: column;
+      gap: var(--fieldGroup_gap, var(--bds-space_m));
+    }
+
+    :host([variant='horizontal']) .fields {
+      flex-flow: row wrap;
+    }
+
+    :host([variant='horizontal']) .fields ::slotted(*) {
+      flex: 1 1 var(--fieldGroup_min-field-width, 12rem);
+      min-inline-size: 0;
+    }
+
+    /* Auto-collapse: when the host's inline-size can't fit a complete
+       horizontal row, switch to a single-column stack. Threshold scales
+       with the actual slotted-element count (see :host calc above). */
+    @container field-group (max-inline-size: var(--fieldGroup_collapse-threshold)) {
+      :host([variant='horizontal']) .fields {
+        flex-direction: column;
+      }
+
+      :host([variant='horizontal']) .fields ::slotted(*) {
+        flex: 1 1 auto;
+      }
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true },
+    legend: { type: String },
+    disabled: { type: Boolean, reflect: true }
+  };
+  constructor() {
+    super();
+    this.variant = "horizontal";
+    this.legend = "";
+    this.disabled = false;
+  }
+  // Arrow-bound for stable identity (unused here but matches the
+  // bds-popover / bds-button conventions for handlers attached in render).
+  _onSlotChange = (e) => {
+    const slot = e.target;
+    const count = slot.assignedElements().length;
+    this.style.setProperty("--fieldGroup_field-count", String(count));
+  };
+  render() {
+    return T`
+      <fieldset ?disabled=${this.disabled}>
+        ${this.legend ? T`<legend class="legend">${this.legend}</legend>` : A}
+        <div class="fields">
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+      </fieldset>
+    `;
+  }
+};
+customElements.define("bds-field-group", BdsFieldGroup);
+
 // src/web-components/interaction/form/bds-form-input.ts
 var BdsFormInput = class extends i2 {
   static formAssociated = true;
@@ -1038,7 +1157,7 @@ var BdsFormInput = class extends i2 {
       position: relative;
       display: flex;
       align-items: center;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--formInput_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--formInput_radius, var(--bdc-outline_radius));
@@ -1118,6 +1237,7 @@ var BdsFormInput = class extends i2 {
 
     .message--hint {
       color: var(--bds-color_on-bg--subtle);
+      font-style: italic;
     }
   `;
   static properties = {
@@ -2068,6 +2188,7 @@ export {
   BdsDrawer,
   BdsDropdownMenu,
   BdsDropdownMenuItem,
+  BdsFieldGroup,
   BdsFileInput,
   BdsFormInput,
   BdsGrid,

package/dist/web-components/interaction/bds-accordion-item.js

@@ -1,6 +1,6 @@
 import {
   BdsAccordionItem
-} from "../chunk-UFFCKVZE.js";
+} from "../chunk-FXURM6D5.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAccordionItem

package/dist/web-components/interaction/bds-accordion.js

@@ -1,6 +1,6 @@
 import {
   BdsAccordion
-} from "../chunk-ZTC6GRP7.js";
+} from "../chunk-BKIHQYJR.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAccordion

package/dist/web-components/interaction/bds-button.js

@@ -1,6 +1,6 @@
 import {
   BdsButton
-} from "../chunk-GER5UJOF.js";
+} from "../chunk-F5E3IT7G.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsButton

package/dist/web-components/interaction/bds-dialog.js

@@ -1,6 +1,6 @@
 import {
   BdsDialog
-} from "../chunk-N6IMUOY4.js";
+} from "../chunk-65JXQOBA.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDialog

package/dist/web-components/interaction/bds-drawer.js

@@ -1,6 +1,6 @@
 import {
   BdsDrawer
-} from "../chunk-OCODKRVZ.js";
+} from "../chunk-KUI55GFB.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDrawer

package/dist/web-components/interaction/bds-popover.js

@@ -1,6 +1,6 @@
 import {
   BdsPopover
-} from "../chunk-ECW3HHWA.js";
+} from "../chunk-TQ7IQ4GZ.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsPopover

package/dist/web-components/interaction/bds-tooltip.js

@@ -1,6 +1,6 @@
 import {
   BdsTooltip
-} from "../chunk-HGBNDR22.js";
+} from "../chunk-Y7V7LM6R.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsTooltip

package/dist/web-components/interaction/form/bds-checkbox.js

@@ -1,6 +1,6 @@
 import {
   BdsCheckbox
-} from "../../chunk-T6AETZRP.js";
+} from "../../chunk-3GFWLSLS.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCheckbox

package/dist/web-components/interaction/form/bds-combobox.js

@@ -1,6 +1,6 @@
 import {
   BdsCombobox
-} from "../../chunk-QLZ2362S.js";
+} from "../../chunk-CZBIVR4V.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCombobox

package/dist/web-components/interaction/form/bds-number-input.js

@@ -1,6 +1,6 @@
 import {
   BdsNumberInput
-} from "../../chunk-JUKB3BUP.js";
+} from "../../chunk-PXZWYO6Z.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsNumberInput

package/dist/web-components/interaction/form/bds-radio.js

@@ -1,6 +1,6 @@
 import {
   BdsRadio
-} from "../../chunk-HHHRF2PS.js";
+} from "../../chunk-IYGF6CD5.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsRadio

package/dist/web-components/interaction/form/bds-select.js

@@ -1,6 +1,6 @@
 import {
   BdsSelect
-} from "../../chunk-X3FKVHLK.js";
+} from "../../chunk-CM3KYZ6Z.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSelect

package/dist/web-components/interaction/form/bds-switch.js

@@ -1,6 +1,6 @@
 import {
   BdsSwitch
-} from "../../chunk-XNA6WTXG.js";
+} from "../../chunk-Y3POAKGS.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSwitch

package/dist/web-components/interaction/form/bds-textarea.js

@@ -1,6 +1,6 @@
 import {
   BdsTextarea
-} from "../../chunk-EBJM3VD4.js";
+} from "../../chunk-QBB6ZX4R.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsTextarea

package/dist/web-components/ui/bds-alert.js

@@ -1,6 +1,6 @@
 import {
   BdsAlert
-} from "../chunk-ZNKEZIYE.js";
+} from "../chunk-NCPQ7AF3.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAlert

package/dist/web-components/ui/bds-card.d.ts

@@ -2,14 +2,13 @@ import * as lit from 'lit';
 import { LitElement } from 'lit';
 
 type CardVariant = 'default' | 'elevated' | 'outlined';
-type CardPadding = 'none' | 'small' | 'medium' | 'large';
 type CardTextAlign = 'start' | 'center' | 'end';
 /**
  * `<bds-card>` — framework-agnostic Card layout custom element.
  *
  * Attributes:
  *   variant    — "default" (default) | "elevated" | "outlined"
- *   padding    — "none" | "small" | "medium" (default) | "large"
+ *   --card_padding — CSS custom property to override padding (default: var(--bds-space_m))
  *   text-align — "start" (default) | "center" | "end"
  *   clickable  — boolean; renders as a <button> with hover/active effects
  *   aria-label — accessible label (useful when clickable)
@@ -21,7 +20,7 @@ type CardTextAlign = 'start' | 'center' | 'end';
  *   bds-click — fired (bubbles, composed) when the card button is clicked
  *
  * @example
- * <bds-card variant="elevated" padding="large">
+ * <bds-card variant="elevated" style="--card_padding: var(--bds-space_l)">
  *   <p>Card content</p>
  * </bds-card>
  *
@@ -36,10 +35,6 @@ declare class BdsCard extends LitElement {
             type: StringConstructor;
             reflect: boolean;
         };
-        padding: {
-            type: StringConstructor;
-            reflect: boolean;
-        };
         textAlign: {
             type: StringConstructor;
             attribute: string;
@@ -55,7 +50,6 @@ declare class BdsCard extends LitElement {
         };
     };
     variant: CardVariant;
-    padding: CardPadding;
     textAlign: CardTextAlign;
     clickable: boolean;
     ariaLabel: string;
@@ -69,4 +63,4 @@ declare global {
     }
 }
 
-export { BdsCard, type CardPadding, type CardTextAlign, type CardVariant };
+export { BdsCard, type CardTextAlign, type CardVariant };

package/dist/web-components/ui/bds-card.js

@@ -1,6 +1,6 @@
 import {
   BdsCard
-} from "../chunk-RTOS7LLG.js";
+} from "../chunk-PC3IOQAH.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsCard

package/dist/web-components/ui/bds-notification-banner.js

@@ -1,6 +1,6 @@
 import {
   BdsNotificationBanner
-} from "../chunk-AJSXNDAP.js";
+} from "../chunk-X46KL5BK.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsNotificationBanner

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "2.6.0",
+  "version": "2.7.1",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -306,6 +306,7 @@
     "storybook-addon-tag-badges": "^1.4.0",
     "stylelint": "^16",
     "stylelint-config-standard": "^37",
+    "stylelint-declaration-strict-value": "^1.11.1",
     "tsup": "^8",
     "tsx": "^4",
     "typescript": "^5.8",
@@ -335,5 +336,6 @@
   ],
   "dependencies": {
     "@oddbird/css-anchor-positioning": "^0.9.0"
-  }
+  },
+  "packageManager": "pnpm@11.0.8"
 }

package/src/components/interaction/form/FieldGroup/FieldGroup.mdx

@@ -0,0 +1,113 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as Stories from './FieldGroup.stories';
+
+<Meta of={Stories} />
+
+# FieldGroup
+
+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.
+
+Use this any time multiple fields belong to the same conceptual section — contact details, address, search filters, registration step — and you want them grouped for screen readers AND visually arranged on a single row when there's room.
+
+## When to use
+
+- Two or more related form fields that should sit side by side on wide screens.
+- Sections inside a longer form that need a visual + semantic boundary.
+- A fieldset whose layout should adapt to its **container's** width, not the viewport's (e.g. a form rendered inside a sidebar or dialog).
+
+## When **not** to use
+
+- A group of related checkboxes — use `CheckboxGroup` instead (it manages legend + error/hint slots specifically for the boolean-list case).
+- A group of related radio inputs — use `RadioGroup`.
+- A single field — wrap nothing; just render the field.
+
+## Variants
+
+- **`horizontal`** (default) — fields flow into a row; each claims at least `--fieldGroup_min-field-width`. When the FieldGroup's own inline-size drops below the **auto-derived** threshold (`N × min-field-width + (N − 1) × gap`, where `N` is the actual number of children), the layout collapses to a single column via a CSS container query. A 2-field group collapses earlier than a 5-field group; you don't have to tune anything per call site.
+- **`vertical`** — fields always stack one per row.
+
+<Canvas of={Stories.Horizontal} />
+<Canvas of={Stories.Vertical} />
+
+### Container query in action
+
+The collapse-to-vertical threshold measures the **FieldGroup itself**, not the viewport. The FieldGroup below sits inside a 20 rem wrapper, so the same horizontal variant collapses cleanly to a single column even though the page is wide.
+
+<Canvas of={Stories.HorizontalCollapsesInNarrowContainer} />
+
+### Mixed inputs
+
+Any form input works as a child — `FormInput`, `Select`, `Combobox`, `NumberInput`, `Textarea`, `Switch`, etc.
+
+<Canvas of={Stories.WithSelectAndInputs} />
+
+### Without a legend
+
+Omit `legend` and provide an `aria-label` (or `aria-labelledby`) on the fieldset directly when the surrounding context already names the group.
+
+<Canvas of={Stories.WithoutLegend} />
+
+### Disabled
+
+The native `disabled` attribute on the fieldset disables every form control inside it without per-field wiring.
+
+<Canvas of={Stories.Disabled} />
+
+## Props
+
+<ArgTypes of={Stories} />
+
+## HTML attribute forwarding
+
+Extends `FieldsetHTMLAttributes<HTMLFieldSetElement>`; spreads all unrecognised props onto the root `<fieldset>` (`id`, `name`, `form`, `disabled`, `aria-*`, `data-*`, every DOM event handler, etc.). The consumer-provided `className` is merged with the internal classes via `cn()`.
+
+## CSS variables
+
+All public override tokens. Set on the FieldGroup or any ancestor; they cascade.
+
+### Layout
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--fieldGroup_gap` | `var(--bds-space_m)` | Gap between fields. |
+| `--fieldGroup_min-field-width` | `12rem` | Minimum width each field claims in horizontal mode before wrapping. |
+
+### Legend
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--fieldGroup_legend-color` | `var(--bds-color_on-bg)` | Legend text colour. |
+| `--fieldGroup_legend-font-size` | `var(--bds-font_size--heading-3)` | Legend font size. |
+| `--fieldGroup_legend-font-weight` | `var(--bds-font_weight--semibold)` | Legend font weight. |
+| `--fieldGroup_legend-line-height` | `var(--bds-font_line-height--heading)` | Legend line height. |
+| `--fieldGroup_legend-padding-block` | `var(--bds-space_xs)` | Legend block padding. |
+| `--fieldGroup_legend-gap` | `var(--bds-space_m)` | Space below the legend before the fields. |
+| `--fieldGroup_legend-border-block-end` | `1px solid var(--bds-color_bg--subtle)` | Subtle separator under the legend. Set to `none` to remove. |
+
+## Accessibility
+
+- Renders as `<fieldset>` so assistive tech announces the legend before each field, and the native `disabled` attribute cascades to all descendants.
+- When `legend` is omitted, you must provide `aria-label` or `aria-labelledby` on the FieldGroup so the group still has an accessible name.
+- The container query is a layout-only change — DOM order stays in source order, so the tab/reading order is unaffected by the horizontal-to-vertical switch.
+
+## How the responsive layout works
+
+The horizontal variant uses `display: flex; flex-flow: row wrap;` with each child claiming at least `--fieldGroup_min-field-width`. This handles natural wrapping across multiple rows.
+
+Layered on top, a CSS [`@container`](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container) query forces a clean single-column layout when the FieldGroup itself is narrower than the **auto-derived** collapse threshold:
+
+```css
+--fieldGroup_collapse-threshold:
+  calc(
+    var(--fieldGroup_field-count) * var(--fieldGroup_min-field-width)
+    + (var(--fieldGroup_field-count) - 1) * var(--fieldGroup_gap)
+  );
+
+@container field-group (max-inline-size: var(--fieldGroup_collapse-threshold)) {
+  .fieldGroup.--variant_horizontal .fields { flex-direction: column; }
+}
+```
+
+`--fieldGroup_field-count` is set by the React component as an inline `style` custom property derived from `Children.count(children)`, so the threshold scales with the actual content. A 2-field group collapses around `2 × 12rem + 1 × gap`; a 5-field group collapses around `5 × 12rem + 4 × gap`. No magic numbers per call site.
+
+Because the query is bound to the FieldGroup's own inline-size (via `container-type: inline-size`), the same FieldGroup behaves correctly whether you place it in a sidebar, a modal, a 2-up grid cell, or a full-width page — with zero media-query wiring at the call site.