@boostdev/design-system-components 2.7.1 → 2.11.0

package/dist/web-components/chunk-Y3POAKGS.js

@@ -1,133 +0,0 @@
-import {
-  T,
-  i,
-  i2
-} from "./chunk-LGEZYFUU.js";
-
-// src/web-components/interaction/form/bds-switch.ts
-var BdsSwitch = class extends i2 {
-  static formAssociated = true;
-  static styles = i`
-    :host {
-      display: inline-flex;
-      align-items: center;
-      gap: var(--bds-space_xs);
-      cursor: pointer;
-      font-size: var(--bds-font_size--body);
-      font-family: var(--bds-font_family--body);
-      color: var(--bds-color_on-bg);
-    }
-
-    :host([disabled]) {
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    .track {
-      position: relative;
-      inline-size: 2.75rem;
-      block-size: 1.5rem;
-      border-radius: 999px;
-      background-color: var(--switch_color_bg, var(--bds-color_bg--subtle));
-      --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;
-      flex-shrink: 0;
-    }
-
-    .thumb {
-      position: absolute;
-      inset-block-start: 0.2rem;
-      inset-inline-start: 0.2rem;
-      inline-size: 1.1rem;
-      block-size: 1.1rem;
-      border-radius: 50%;
-      background-color: var(--switch_thumb_color, var(--bds-color_interactive));
-      transition: inset-inline-start 0.2s ease;
-    }
-
-    .input {
-      position: absolute;
-      opacity: 0;
-      inline-size: 0;
-      block-size: 0;
-      margin: 0;
-    }
-
-    .input:checked + .track {
-      background-color: var(--switch_color-active, var(--bdc-color_active--subtle));
-    }
-
-    .input:checked + .track .thumb {
-      inset-inline-start: calc(100% - 1.3rem);
-    }
-
-    .input:focus-visible + .track {
-      outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
-    }
-
-    label {
-      cursor: pointer;
-    }
-  `;
-  static properties = {
-    name: { type: String, reflect: true },
-    value: { type: String },
-    checked: { type: Boolean, reflect: true },
-    required: { type: Boolean, reflect: true },
-    disabled: { type: Boolean, reflect: true }
-  };
-  _internals;
-  _uid = Math.random().toString(36).slice(2, 8);
-  constructor() {
-    super();
-    this._internals = this.attachInternals();
-    this.name = "";
-    this.value = "on";
-    this.checked = false;
-    this.required = false;
-    this.disabled = false;
-  }
-  updated(changed) {
-    super.updated(changed);
-    if (changed.has("checked") || changed.has("value")) {
-      this._internals.setFormValue?.(this.checked ? this.value : null);
-    }
-  }
-  formResetCallback() {
-    this.checked = false;
-    this._internals.setFormValue?.(null);
-  }
-  _handleChange(e) {
-    this.checked = e.target.checked;
-  }
-  render() {
-    const id = `bds-switch-${this._uid}`;
-    return T`
-      <input
-        id=${id}
-        type="checkbox"
-        role="switch"
-        class="input"
-        .checked=${this.checked}
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        @change=${this._handleChange}
-      />
-      <label for=${id}>
-        <span class="track">
-          <span class="thumb"></span>
-        </span>
-        <slot></slot>
-      </label>
-    `;
-  }
-};
-customElements.define("bds-switch", BdsSwitch);
-
-export {
-  BdsSwitch
-};

package/dist/web-components/chunk-Y4MAXTMA.js

@@ -1,80 +0,0 @@
-import {
-  s,
-  u
-} from "./chunk-QPOKHLMQ.js";
-import {
-  A,
-  T,
-  i,
-  i2
-} from "./chunk-LGEZYFUU.js";
-
-// src/web-components/ui/bds-section-header.ts
-var BdsSectionHeader = class extends i2 {
-  static styles = i`
-    :host {
-      display: block;
-    }
-
-    .header {
-      display: flex;
-      flex-direction: column;
-      gap: var(--bds-space_m);
-    }
-
-    .title {
-      color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
-      margin: 0;
-      font-family: var(--bds-font_family--body);
-    }
-
-    .subtitle {
-      color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
-      margin: 0;
-      font-family: var(--bds-font_family--body);
-      font-weight: var(--bds-font_weight--medium);
-    }
-
-    .header.--start  { align-items: flex-start; text-align: start; }
-    .header.--center { align-items: center;      text-align: center; }
-    .header.--end    { align-items: flex-end;    text-align: end; }
-
-    .header.--small  .title { font-size: var(--bds-font_size--heading-1); line-height: var(--bds-font_line-height--heading); font-weight: var(--bds-font_weight--bold); }
-    .header.--small  .subtitle { font-size: var(--bds-font_size--body); line-height: 1.4; }
-
-    .header.--medium .title { font-size: var(--bds-font_size--display); line-height: var(--bds-font_line-height--display); font-weight: var(--bds-font_weight--bold); }
-    .header.--medium .subtitle { font-size: var(--bds-font_size--heading-3); line-height: 1.3; }
-
-    .header.--large  .title { font-size: var(--bds-font_size--display); line-height: var(--bds-font_line-height--display); font-weight: var(--bds-font_weight--bold); letter-spacing: var(--bds-font_tracking--tight); }
-    .header.--large  .subtitle { font-size: var(--bds-font_size--heading-2); line-height: 1.3; font-weight: var(--bds-font_weight--medium); }
-  `;
-  static properties = {
-    title: { type: String },
-    subtitle: { type: String },
-    alignment: { type: String, reflect: true },
-    size: { type: String, reflect: true },
-    titleAs: { type: String, attribute: "title-as" }
-  };
-  constructor() {
-    super();
-    this.title = "";
-    this.subtitle = "";
-    this.alignment = "start";
-    this.size = "medium";
-    this.titleAs = "h2";
-  }
-  render() {
-    const tag = s(this.titleAs || "h2");
-    return T`
-      <div class="header --${this.alignment} --${this.size}">
-        ${u`<${tag} class="title">${this.title}</${tag}>`}
-        ${this.subtitle ? T`<p class="subtitle">${this.subtitle}</p>` : A}
-      </div>
-    `;
-  }
-};
-customElements.define("bds-section-header", BdsSectionHeader);
-
-export {
-  BdsSectionHeader
-};

package/dist/web-components/chunk-Y7V7LM6R.js

@@ -1,98 +0,0 @@
-import {
-  T,
-  i,
-  i2
-} from "./chunk-LGEZYFUU.js";
-
-// src/web-components/interaction/bds-tooltip.ts
-var BdsTooltip = class extends i2 {
-  static styles = i`
-    :host {
-      display: inline-flex;
-      align-items: center;
-      position: relative;
-    }
-
-    .tooltip {
-      position: absolute;
-      z-index: var(--bds-z-index_popover, 200);
-      padding: var(--bds-space_xxs) var(--bds-space_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);
-      line-height: var(--bds-font_line-height--body);
-      white-space: nowrap;
-      pointer-events: none;
-
-      /* Hidden by default */
-      visibility: hidden;
-      opacity: 0;
-      transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
-    }
-
-    /* Show on hover and keyboard focus */
-    :host(:hover) .tooltip,
-    :host(:focus-within) .tooltip {
-      visibility: visible;
-      opacity: 1;
-    }
-
-    /* Placement: top (default) */
-    .tooltip.--placement_top {
-      inset-block-end: calc(100% + var(--bds-space_xs));
-      inset-inline-start: 50%;
-      transform: translateX(-50%);
-    }
-
-    /* Placement: bottom */
-    .tooltip.--placement_bottom {
-      inset-block-start: calc(100% + var(--bds-space_xs));
-      inset-inline-start: 50%;
-      transform: translateX(-50%);
-    }
-
-    /* Placement: left */
-    .tooltip.--placement_left {
-      inset-inline-end: calc(100% + var(--bds-space_xs));
-      inset-block-start: 50%;
-      transform: translateY(-50%);
-    }
-
-    /* Placement: right */
-    .tooltip.--placement_right {
-      inset-inline-start: calc(100% + var(--bds-space_xs));
-      inset-block-start: 50%;
-      transform: translateY(-50%);
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .tooltip {
-        transition: none;
-      }
-    }
-  `;
-  static properties = {
-    content: { type: String },
-    placement: { type: String, reflect: true }
-  };
-  constructor() {
-    super();
-    this.content = "";
-    this.placement = "top";
-  }
-  render() {
-    return T`
-      <slot></slot>
-      <span
-        class="tooltip --placement_${this.placement}"
-        role="tooltip"
-      >${this.content}</span>
-    `;
-  }
-};
-customElements.define("bds-tooltip", BdsTooltip);
-
-export {
-  BdsTooltip
-};

package/src/web-components/ui/BdsButtonGroup.mdx

@@ -1,69 +0,0 @@
-import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
-import * as Stories from './BdsButtonGroup.stories';
-
-<Meta of={Stories} />
-
-# &lt;bds-button-group&gt;
-
-Framework-agnostic Button Group custom element. Groups related `<bds-button>` elements in a flex container, collapsing adjacent border radii so they read as a single unit.
-
-> **Status: experimental** — API may change before stable release.
-
-## Installation
-
-```js
-import '@boostdev/design-system-components/web-components';
-```
-
-## When to use
-
-- Toggle groups (Day / Week / Month), segmented actions, or sets of closely related operations
-- Use `orientation="vertical"` for stacked navigation menus
-
-## Examples
-
-### Default (horizontal)
-<Canvas of={Stories.Default} />
-
-### Horizontal
-<Canvas of={Stories.Horizontal} />
-
-### Vertical
-<Canvas of={Stories.Vertical} />
-
-## Props
-
-<ArgTypes of={Stories} />
-
-## Attributes
-
-| Attribute | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Flex direction of the group |
-| `aria-label` | string | — | Accessible label for the group container |
-
-## Slots
-
-| Slot | Description |
-|------|-------------|
-| `(default)` | `<bds-button>` elements |
-
-## Usage in plain HTML
-
-```html
-<bds-button-group aria-label="View options">
-  <bds-button>Day</bds-button>
-  <bds-button>Week</bds-button>
-  <bds-button>Month</bds-button>
-</bds-button-group>
-
-<bds-button-group orientation="vertical" aria-label="Navigation">
-  <bds-button>Profile</bds-button>
-  <bds-button>Settings</bds-button>
-</bds-button-group>
-```
-
-## Accessibility
-
-- Renders a `<div role="group">` with the provided `aria-label`
-- Always set `aria-label` to describe the purpose of the group

package/src/web-components/ui/BdsButtonGroup.stories.tsx

@@ -1,66 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import type { ButtonGroupOrientation } from './bds-button-group';
-import '../index'; // auto-registers all custom elements
-
-function BdsButtonGroup({
-  orientation = 'horizontal',
-  ariaLabel,
-  children,
-}: {
-  orientation?: ButtonGroupOrientation;
-  ariaLabel?: string;
-  children?: React.ReactNode;
-}) {
-  return React.createElement(
-    'bds-button-group',
-    { orientation, 'aria-label': ariaLabel },
-    children,
-  );
-}
-
-const meta = {
-  title: 'Web Components/Layout/ButtonGroup',
-  component: BdsButtonGroup,
-  tags: ['!stable', 'experimental'],
-  parameters: { layout: 'centered' },
-  argTypes: {
-    orientation: { control: 'radio', options: ['horizontal', 'vertical'] },
-    ariaLabel: { control: 'text' },
-  },
-} satisfies Meta<typeof BdsButtonGroup>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () =>
-    React.createElement(
-      'bds-button-group',
-      { 'aria-label': 'View options' },
-      React.createElement('bds-button', null, 'Day'),
-      React.createElement('bds-button', null, 'Week'),
-      React.createElement('bds-button', null, 'Month'),
-    ),
-};
-
-export const Horizontal: Story = {
-  render: () =>
-    React.createElement(
-      'bds-button-group',
-      { orientation: 'horizontal', 'aria-label': 'Actions' },
-      React.createElement('bds-button', null, 'Save'),
-      React.createElement('bds-button', { variant: 'ghost' }, 'Cancel'),
-    ),
-};
-
-export const Vertical: Story = {
-  render: () =>
-    React.createElement(
-      'bds-button-group',
-      { orientation: 'vertical', 'aria-label': 'Navigation' },
-      React.createElement('bds-button', null, 'Profile'),
-      React.createElement('bds-button', null, 'Settings'),
-      React.createElement('bds-button', null, 'Logout'),
-    ),
-};