@brandsync/wc 1.7.0 → 1.8.0

package/dist/types/components/bs-button/bs-button/bs-button.d.ts

@@ -36,6 +36,7 @@ export type BsButtonSize = 'sm' | 'md' | 'lg';
  */
 export declare class BsButton {
     el: HTMLElement;
+    internals: ElementInternals;
     /**
      * Visual style. Maps directly to the brandsync-tokens `--bs-button-*` semantic set.
      * `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger
@@ -46,7 +47,8 @@ export declare class BsButton {
     size: BsButtonSize;
     /** Disables the button and applies the disabled token set. */
     disabled: boolean;
-    /** Native `<button>` type. */
+    /** Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation
+     * runs); `reset` resets it; `button` (default) does nothing on its own. */
     type: 'button' | 'submit' | 'reset';
     /**
      * Accessible name for the button. Required for icon-only usage (no visible label text via the
@@ -85,5 +87,6 @@ export declare class BsButton {
     private onIconSlotchange;
     private onEndIconSlotchange;
     private onLabelSlotchange;
+    private onClick;
     render(): any;
 }

package/dist/types/components/bs-button/bs-icon-button/bs-icon-button.d.ts

@@ -26,6 +26,7 @@ export type BsIconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
  */
 export declare class BsIconButton {
     el: HTMLElement;
+    internals: ElementInternals;
     /**
      * Visual style. Maps to the same semantic token families as `bs-button`'s `variant`.
      * `error` is for destructive/irreversible actions per BrandSync guidance, not a stronger
@@ -39,7 +40,8 @@ export declare class BsIconButton {
     size: BsIconButtonSize;
     /** Disables the button and applies the disabled token set. */
     disabled: boolean;
-    /** Native `<button>` type. */
+    /** Button type. `submit` submits the surrounding `<form>` (via `requestSubmit()`, so validation
+     * runs); `reset` resets it; `button` (default) does nothing on its own. */
     type: 'button' | 'submit' | 'reset';
     /**
      * Accessible name for the button. Required -- this component is always icon-only, so there's
@@ -47,5 +49,6 @@ export declare class BsIconButton {
      * prop to the `aria-label` HTML attribute automatically.
      */
     ariaLabel: string | null;
+    private onClick;
     render(): any;
 }

package/dist/types/components/bs-checkbox/bs-checkbox.d.ts

@@ -20,7 +20,15 @@ export type BsCheckboxSize = 'sm' | 'md' | 'lg';
  */
 export declare class BsCheckbox {
     el: HTMLElement;
+    internals: ElementInternals;
     private inputEl?;
+    private initialChecked;
+    /** The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. */
+    name?: string;
+    /** The value submitted when checked (native checkbox default: `"on"`). */
+    value: string;
+    /** Marks the checkbox as required: the surrounding form fails validation while unchecked. */
+    required: boolean;
     /** Sizing scale. Controls the box's width/height and border width; corner radius is constant
      * across all sizes. */
     size: BsCheckboxSize;
@@ -56,6 +64,10 @@ export declare class BsCheckbox {
     bsChange: EventEmitter<boolean>;
     /** Keeps the native input's `.indeterminate` JS property in sync -- this can't be expressed as a
      * JSX attribute in Stencil, it must be set imperatively on the element. */
+    syncFormValue(): void;
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback(): void;
+    componentWillLoad(): void;
     onIndeterminateChange(): void;
     componentDidLoad(): void;
     componentDidUpdate(): void;

package/dist/types/components/bs-form-association.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-input/bs-input.d.ts

@@ -46,6 +46,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
  */
 export declare class BsInput {
     el: HTMLElement;
+    internals: ElementInternals;
+    private initialValue;
+    /** The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. */
+    name?: string;
     /** Current value. Native `input`/`change` events don't cross the Shadow DOM boundary, so this
      * component re-dispatches them as `bsInput`/`bsChange` custom events instead. Mutable so the
      * `number` type's stepper buttons can update it directly. */
@@ -128,6 +132,14 @@ export declare class BsInput {
      * children, before first render -- see `bs-button`'s `componentWillLoad` for why `slotchange`
      * alone isn't enough for a slot that starts (and stays) empty. */
     componentWillLoad(): void;
+    onFormStateChange(): void;
+    /** Pushes the current value + validity to the surrounding form. `chip` submits one entry per
+     * chip under `name`; every other type submits `value` as a single string. */
+    private syncFormValue;
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback(): void;
+    /** Called when the browser restores form state (back/forward navigation, autofill). */
+    formStateRestoreCallback(state: string | FormData | null): void;
     private hasSlottedContent;
     private onIconSlotchange;
     private onEndIconSlotchange;

package/dist/types/components/bs-keyboard-nav.cmp.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/components/bs-menu/bs-menu.d.ts

@@ -20,5 +20,9 @@
  * @prop --bs-menu-shadow - Elevation shadow of the menu box. Aliased to `--bs-shadow-sm`.
  */
 export declare class BsMenu {
+    el: HTMLElement;
+    /** WAI-ARIA menu pattern: Up/Down move focus between enabled items (wrapping), Home/End jump
+     * to the first/last. Items are the slotted `bs-menu-item` children. */
+    onKeyDown(ev: KeyboardEvent): void;
     render(): any;
 }

package/dist/types/components/bs-progress/bs-progress.d.ts

@@ -38,6 +38,11 @@ export declare class BsProgress {
      * `indeterminate` never shows a label regardless of this prop, since there's no percentage to
      * show. Defaults to `true`. */
     showLabel: boolean;
+    /** Accessible name for the progress bar (e.g. "Uploading report"). Required for assistive tech --
+     * a `role="progressbar"` with no name is an axe-core `aria-progressbar-name` violation. Setting
+     * `aria-label` on the host doesn't reach the inner element across the shadow boundary, so this
+     * prop binds it directly -- same pattern as `bs-button`'s `ariaLabel`. */
+    ariaLabel: string | null;
     private get clampedValue();
     private get diameter();
     private get radius();

package/dist/types/components/bs-radio/bs-radio.d.ts

@@ -19,13 +19,10 @@ import { EventEmitter } from '../../stencil-public-runtime';
 export declare class BsRadio {
     el: HTMLElement;
     /** The native radio input's `name` attribute. Passed straight through to the native input inside.
-     * NOTE: because each `bs-radio` renders its own shadow root, native `<input type="radio">`
-     * mutual-exclusion grouping (which the HTML spec scopes to a single DOM tree) does NOT extend
-     * across separate `bs-radio` instances sharing the same `name` -- checking one will not natively
-     * uncheck another. Within a single instance this still behaves like a normal radio input. See
-     * bs-radio.mdx's Accessibility section for this known gap; consumers building a group currently
-     * need to manage mutual exclusivity themselves (e.g. via `bsChange`) until a `bs-radio-group`
-     * wrapper exists. */
+     * Also the group key: `bs-radio` elements sharing a `name` within the same root (document or
+     * shadow root) behave as one radio group -- checking one unchecks the others, arrow keys move
+     * between them, and only one is in the tab order. Native grouping can't cross each radio's own
+     * shadow root, so this component implements it itself. */
     name: string;
     /** The native radio input's `value` attribute -- read from `event.target.value`, or used when
      * wiring the group up to a form. */
@@ -37,9 +34,26 @@ export declare class BsRadio {
     disabled: boolean;
     /** Emitted with this radio's own `value` when it becomes checked via user interaction. Since
      * native same-`name` grouping doesn't cross shadow-root boundaries (see the `name` prop's doc),
-     * a consumer wiring up a group of `bs-radio`s must itself set `checked = false` on the others in
-     * response to this event -- there's no automatic un-checking to rely on here. */
+     * a consumer wiring up a group of `bs-radio`s does not need to un-check the others itself. */
     bsChange: EventEmitter<string>;
+    internals: ElementInternals;
+    private initialChecked;
+    /** Whether any radio in this group is checked -- drives roving tabindex (an unchecked radio is
+     * only tabbable while nothing in its group is checked). */
+    groupHasChecked: boolean;
+    /** Other `bs-radio`s sharing this one's `name` within the same root, in DOM order (including
+     * this one). */
+    private groupMembers;
+    onCheckedChange(): void;
+    onAnyRadioChange(): void;
+    private refreshGroupState;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback(): void;
+    /** WAI-ARIA radio group pattern: arrows move selection (and focus) to the previous/next enabled
+     * radio in the group, wrapping at the ends. */
+    private onKeyDown;
     private onChange;
     render(): any;
 }

package/dist/types/components/bs-slider/bs-slider.d.ts

@@ -31,6 +31,9 @@ export declare class BsSlider {
      * and `segmented` use one thumb (`value`). `segmented` additionally draws `segments` tick marks
      * along the track. */
     type: BsSliderType;
+    /** The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. `type="range"`
+     * submits two entries under this name: the start value, then the end value. */
+    name?: string;
     /** Shows/hides the "Label" text and editable percentage field(s) above the track, and the
      * static min/max bound labels flanking it. When `false`, only the bare track (and its
      * knob/knobs) renders. */
@@ -80,6 +83,12 @@ export declare class BsSlider {
         start: number;
         end: number;
     }>;
+    internals: ElementInternals;
+    private initial;
+    componentWillLoad(): void;
+    syncFormValue(): void;
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback(): void;
     private get effectiveValueStart();
     private get effectiveValueEnd();
     /** Effective step for the native range input(s): `step` as-is, except for `type="segmented"`,

package/dist/types/components/bs-switch/bs-switch.d.ts

@@ -19,6 +19,12 @@ export type BsSwitchSize = 'md' | 'lg';
  */
 export declare class BsSwitch {
     el: HTMLElement;
+    internals: ElementInternals;
+    private initialChecked;
+    /** The `name` the value is submitted under in a surrounding `<form>`'s `FormData`. */
+    name?: string;
+    /** The value submitted when on (native checkbox default: `"on"`). */
+    value: string;
     /** Sizing scale. Controls the track's width/height and the knob's diameter. */
     size: BsSwitchSize;
     /** Whether the switch is on. Mutable so clicking the label/input toggles it directly, and
@@ -40,6 +46,10 @@ export declare class BsSwitch {
     ariaLabel: string | null;
     /** Emitted when the checked state changes via user interaction, with the new `checked` value. */
     bsChange: EventEmitter<boolean>;
+    syncFormValue(): void;
+    /** Called by the browser when the surrounding `<form>` is reset. */
+    formResetCallback(): void;
+    componentWillLoad(): void;
     private onChange;
     render(): any;
 }

package/dist/types/components/bs-tab/bs-inline-tab/bs-inline-tab.d.ts

@@ -45,6 +45,10 @@ export declare class BsInlineTab {
      * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
      * automatically, same as `bs-tab`'s identical prop. */
     ariaLabel: string | null;
+    /** Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the
+     * Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays
+     * a normal tab stop. */
+    tabbable?: boolean;
     /** Tracks whether the `icon` slot has assigned content. */
     hasIcon: boolean;
     /** Tracks whether the default (label) slot has assigned content. */

package/dist/types/components/bs-tab/bs-tab/bs-tab.d.ts

@@ -51,6 +51,10 @@ export declare class BsTab {
      * violation). Stencil reflects this camelCase prop to the `aria-label` HTML attribute
      * automatically, same as `bs-button`'s identical prop. */
     ariaLabel: string | null;
+    /** Set by a parent `bs-tabs` to implement roving tabindex (only one tab in the group is in the
+     * Tab order; arrow keys move between them). Left `undefined` for a standalone tab, which stays
+     * a normal tab stop. */
+    tabbable?: boolean;
     /** Tracks whether the `icon` slot has assigned content. */
     hasIcon: boolean;
     /** Tracks whether the default (label) slot has assigned content. */

package/dist/types/components/bs-tab/bs-tabs/bs-tabs.d.ts

@@ -41,5 +41,12 @@ export declare class BsTabs {
      * `if (this.disabled) return;`), so no special-casing is needed here.
      */
     onTabSelect(ev: CustomEvent<void>): void;
+    componentDidLoad(): void;
+    syncRovingTabindex(): void;
+    private tabs;
+    /** WAI-ARIA tabs pattern (automatic activation): arrows move focus *and* selection to the
+     * previous/next enabled tab (wrapping), Home/End jump to the first/last. Arrow axis follows
+     * `orientation`; in RTL the horizontal arrows are mirrored. */
+    onKeyDown(ev: KeyboardEvent): void;
     render(): any;
 }

package/dist/types/components/forms/forms.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/web-components-vite';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Default: Story;
+export declare const Validation: Story;