@boostdev/design-system-components 1.2.8 → 2.1.0

package/src/web-components/interaction/BdsSkipLink.mdx

@@ -12,14 +12,14 @@ Framework-agnostic Skip Navigation Link custom element. Visually hidden until fo
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 

package/src/web-components/interaction/BdsTabs.mdx

@@ -12,14 +12,14 @@ Framework-agnostic Tabs custom element. Coordinates `<bds-tab>` and `<bds-tab-pa
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 

package/src/web-components/interaction/BdsToastProvider.mdx

@@ -12,7 +12,7 @@ Framework-agnostic toast notification provider. Wrap your page content in `<bds-
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## Examples
@@ -34,7 +34,7 @@ import '@boostdev/components/web-components';
 ### 1. Static method (import required)
 
 ```js
-import { BdsToastProvider } from '@boostdev/components/web-components';
+import { BdsToastProvider } from '@boostdev/design-system-components/web-components';
 
 BdsToastProvider.show('File saved', 'success');
 BdsToastProvider.show('Something went wrong', 'error');
@@ -75,7 +75,7 @@ document.dispatchEvent(new CustomEvent('bds-show-toast', {
 </bds-toast-provider>
 
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
   // or use the document event API — no import needed
 </script>
 ```

package/src/web-components/interaction/BdsTooltip.mdx

@@ -12,14 +12,14 @@ Framework-agnostic Tooltip custom element. Displays a small informational label
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 

package/src/web-components/interaction/bds-button.spec.ts

@@ -92,4 +92,39 @@ describe('bds-button', () => {
     expect(a!.getAttribute('rel')).toBe('noopener');
     cleanup(el);
   });
+
+  it('applies is-icon-only class when is-icon-only is set', async () => {
+    const el = await fixture('<bds-button is-icon-only aria-label="Confirm"><svg></svg></bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).toContain('is-icon-only');
+    cleanup(el);
+  });
+
+  it('does not apply is-icon-only class by default', async () => {
+    const el = await fixture('<bds-button>Click</bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).not.toContain('is-icon-only');
+    cleanup(el);
+  });
+
+  it('reflects the is-icon-only attribute on the host', async () => {
+    const el = await fixture('<bds-button is-icon-only aria-label="Confirm"></bds-button>');
+    expect(el.hasAttribute('is-icon-only')).toBe(true);
+    cleanup(el);
+  });
+
+  it('composes is-icon-only with outline variant', async () => {
+    const el = await fixture('<bds-button variant="outline" is-icon-only aria-label="Confirm"></bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.className).toContain('outline');
+    expect(btn!.className).toContain('is-icon-only');
+    cleanup(el);
+  });
+
+  it('forwards aria-label to the inner button', async () => {
+    const el = await fixture('<bds-button is-icon-only aria-label="Close"></bds-button>');
+    const btn = el.shadowRoot!.querySelector('button');
+    expect(btn!.getAttribute('aria-label')).toBe('Close');
+    cleanup(el);
+  });
 });

package/src/web-components/interaction/bds-button.ts

@@ -14,6 +14,7 @@ export type ButtonSize = 'small' | 'medium' | 'large';
  *   target    — forwarded to <a> when href is set
  *   rel       — forwarded to <a> when href is set
  *   has-pulse — boolean, enables the pulse ring animation
+ *   is-icon-only — boolean, forces a 1:1 aspect ratio with minimal xs padding (requires aria-label)
  *   type      — "button" (default) | "submit" | "reset"
  *
  * Slots:
@@ -114,6 +115,23 @@ export class BdsButton extends LitElement {
       animation: pulse 3s infinite;
     }
 
+    /* Icon-only: square (1:1), equal xs padding on both axes — composes with
+       any variant/size. box-sizing: border-box keeps the outer box at
+       --button_height; without it, all: unset reverts to content-box and
+       padding-block would stretch the button past its declared height.
+       Slotted child fills the content area (button height minus the two
+       padding sides) so SVG icons scale with button size. */
+    .button.is-icon-only {
+      aspect-ratio: 1;
+      box-sizing: border-box;
+      padding: var(--bds-space_xs);
+    }
+
+    :host([is-icon-only]) ::slotted(*) {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
     /* SVG icon colour */
     .button svg {
       --icon__stroke: currentcolor;
@@ -141,6 +159,12 @@ export class BdsButton extends LitElement {
       transition: var(--bds-animation_transition);
     }
 
+    /* Icon-only: zero out icon slot margins so icon centres */
+    .button.is-icon-only .icon-start.has-content,
+    .button.is-icon-only .icon-end.has-content {
+      margin-inline: 0;
+    }
+
     /* Hover icon animation */
     @media (hover: hover) and (pointer: fine) {
       .button:hover .icon-start svg,
@@ -189,6 +213,7 @@ export class BdsButton extends LitElement {
     target:           { type: String },
     rel:              { type: String },
     hasPulse:         { type: Boolean, attribute: 'has-pulse', reflect: true },
+    isIconOnly:       { type: Boolean, attribute: 'is-icon-only', reflect: true },
     type:             { type: String },
     ariaLabel:        { type: String, attribute: 'aria-label' },
     // Internal state
@@ -205,6 +230,7 @@ export class BdsButton extends LitElement {
   declare target: string | undefined;
   declare rel: string | undefined;
   declare hasPulse: boolean;
+  declare isIconOnly: boolean;
   declare type: 'button' | 'submit' | 'reset';
   declare ariaLabel: string | null;
   declare private _iconStartFilled: boolean;
@@ -216,6 +242,7 @@ export class BdsButton extends LitElement {
     this.size = 'medium';
     this.disabled = false;
     this.hasPulse = false;
+    this.isIconOnly = false;
     this.type = 'button';
     this.ariaLabel = null;
     this._iconStartFilled = false;
@@ -233,7 +260,7 @@ export class BdsButton extends LitElement {
   }
 
   private get _classes() {
-    return `button ${this.variant} ${this.size}${this.hasPulse ? ' has-pulse' : ''}`;
+    return `button ${this.variant} ${this.size}${this.hasPulse ? ' has-pulse' : ''}${this.isIconOnly ? ' is-icon-only' : ''}`;
   }
 
   private _handleAnchorClick(e: MouseEvent) {

package/src/web-components/interaction/form/BdsCheckbox.mdx

@@ -12,7 +12,7 @@ Form-associated checkbox custom element. Participates in HTML forms via the Form
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsCheckboxGroup.mdx

@@ -12,7 +12,7 @@ Groups related checkboxes with a shared label, hint, and error message. Renders
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsCombobox.mdx

@@ -12,7 +12,7 @@ Form-associated autocomplete combobox. Renders a text input with a filterable dr
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsFileInput.mdx

@@ -12,7 +12,7 @@ Form-associated file upload zone with drag-and-drop support. Renders a styled dr
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsFormInput.mdx

@@ -12,7 +12,7 @@ Form-associated text input with label, hint, error, and prefix/suffix slot suppo
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsNumberInput.mdx

@@ -12,7 +12,7 @@ Form-associated number input with increment and decrement stepper buttons. Hides
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsRadio.mdx

@@ -12,7 +12,7 @@ Form-associated radio button custom element. Use multiple `<bds-radio>` elements
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsRadioGroup.mdx

@@ -12,7 +12,7 @@ Groups related radio buttons with a shared label and name. Renders a `<fieldset>
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsSegmentedControl.mdx

@@ -12,7 +12,7 @@ Form-associated segmented control. Renders a group of radio buttons (or anchor l
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsSelect.mdx

@@ -12,7 +12,7 @@ Form-associated select custom element. Wraps a native `<select>` with consistent
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsSlider.mdx

@@ -12,7 +12,7 @@ Form-associated range slider. Wraps a native `<input type="range">` with a style
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsSwitch.mdx

@@ -12,7 +12,7 @@ Form-associated toggle switch. Visually a sliding toggle but semantically equiva
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

package/src/web-components/interaction/form/BdsTextarea.mdx

@@ -12,7 +12,7 @@ Form-associated multiline text input. Wraps a native `<textarea>` with consisten
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic alert custom element for inline status messages. Supports fou
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## Examples

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

@@ -12,7 +12,7 @@ Framework-agnostic Avatar custom element. Displays a user photo when `src` is pr
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic badge custom element for short status labels and counts. Five
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## Examples

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

@@ -12,7 +12,7 @@ Framework-agnostic Breadcrumb custom element. Renders a horizontal navigation tr
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Button Group custom element. Groups related `<bds-button>` el
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Calendar date picker custom element. Renders a keyboard-navig
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Card layout custom element. A versatile container with three
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Carousel custom element. A scroll-snap based slider where eac
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Description List custom element. Wraps slotted `<dt>`/`<dd>`
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Icon Wrapper custom element. Displays a slotted icon inside a
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Link custom element. Renders a styled `<a>` tag with three vi
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Loading spinner custom element. Displays an animated circular
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Notification Banner custom element. Renders a full-width stat
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Pagination navigation custom element. Renders previous/next b
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic horizontal Progress bar custom element. Tracks progress towar
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic circular Progress custom element. Renders an SVG ring that fi
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic read-only star Rating custom element. Renders a row of SVG st
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Section Header custom element. Combines a title and optional
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -13,14 +13,14 @@ Framework-agnostic Separator custom element. Renders a thin decorative line to v
 
 ```js
 // Register all web components at once
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 Or in HTML without a bundler:
 
 ```html
 <script type="module">
-  import '@boostdev/components/web-components';
+  import '@boostdev/design-system-components/web-components';
 </script>
 ```
 

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

@@ -12,7 +12,7 @@ Framework-agnostic Skeleton loading placeholder custom element. Displays an anim
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic scrollable Table wrapper custom element. Apply design-system
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use

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

@@ -12,7 +12,7 @@ Framework-agnostic Typography custom element. Renders slotted text inside the ap
 ## Installation
 
 ```js
-import '@boostdev/components/web-components';
+import '@boostdev/design-system-components/web-components';
 ```
 
 ## When to use