@boostdev/design-system-components 2.8.0 → 2.11.0

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'),
-    ),
-};