@deepfuture/dui-components 0.0.1 → 0.0.4

package/radio/index.js

@@ -1,2 +1,5 @@
-export { DuiRadio } from "./radio.js";
-export { DuiRadioGroup, valueChangeEvent } from "./radio-group.js";
+import { DuiRadio } from "./radio.js";
+export { DuiRadio };
+import { DuiRadioGroup, valueChangeEvent } from "./radio-group.js";
+export { DuiRadioGroup, valueChangeEvent };
+export const radioFamily = [DuiRadio, DuiRadioGroup];

package/radio/radio.js

@@ -32,7 +32,6 @@ const styles = css `
     padding: 0;
     margin: 0;
     border: none;
-    transition-property: background, border-color, box-shadow, filter, transform;
   }
 
   [part="root"][data-disabled] {

package/scroll-area/index.d.ts

@@ -1 +1,3 @@
-export { DuiScrollArea } from "./scroll-area.js";
+import { DuiScrollArea } from "./scroll-area.js";
+export { DuiScrollArea };
+export declare const scrollAreaFamily: (typeof DuiScrollArea)[];

package/scroll-area/index.js

@@ -1 +1,3 @@
-export { DuiScrollArea } from "./scroll-area.js";
+import { DuiScrollArea } from "./scroll-area.js";
+export { DuiScrollArea };
+export const scrollAreaFamily = [DuiScrollArea];

package/scroll-area/scroll-area.js

@@ -198,9 +198,16 @@ export class DuiScrollArea extends LitElement {
         this.#resizeObserver.observe(viewport);
         const slot = viewport.querySelector("slot");
         if (slot) {
+            const observe = () => {
+                for (const node of slot.assignedElements()) {
+                    this.#resizeObserver.observe(node);
+                }
+            };
             slot.addEventListener("slotchange", () => {
+                observe();
                 requestAnimationFrame(() => this.#measure());
             });
+            observe();
         }
         this.#measure();
     }

package/select/index.d.ts

@@ -1,2 +1,4 @@
-export { DuiSelect } from "./select.js";
+import { DuiSelect } from "./select.js";
+export { DuiSelect };
 export type { SelectOption } from "./select.js";
+export declare const selectFamily: (typeof DuiSelect)[];

package/select/index.js

@@ -1 +1,3 @@
-export { DuiSelect } from "./select.js";
+import { DuiSelect } from "./select.js";
+export { DuiSelect };
+export const selectFamily = [DuiSelect];

package/select/select.js

@@ -27,7 +27,6 @@ const componentStyles = css `
     cursor: pointer;
     user-select: none;
     box-sizing: border-box;
-    transition-property: border-color, box-shadow, background, filter, transform;
   }
 
   .Trigger[data-disabled] {
@@ -45,74 +44,41 @@ const componentStyles = css `
     flex-shrink: 0;
   }
 `;
-/** Styles injected into the portal positioner. */
+/** Structural styles injected into the portal positioner. */
 const portalPopupStyles = [
     css `
     .Popup {
-      background: var(--popover);
-      border: var(--border-width-thin) solid var(--border);
-      border-radius: var(--radius-md);
-      box-shadow: var(--shadow-md);
       max-height: 240px;
       overflow-y: auto;
       overscroll-behavior: contain;
       opacity: 1;
       transform: translateY(0);
       transition-property: opacity, transform;
-      transition-duration: var(--duration-fast);
-      transition-timing-function: var(--ease-out-3);
       pointer-events: auto;
     }
 
     .Popup[data-starting-style],
     .Popup[data-ending-style] {
       opacity: 0;
-      transform: translateY(calc(var(--space-1) * -1));
-    }
-
-    .Listbox {
-      padding: var(--space-1);
     }
 
     .Item {
       display: flex;
       align-items: center;
-      gap: var(--space-2);
-      padding: var(--space-1_5) var(--space-2);
-      border-radius: var(--radius-sm);
-      font-size: var(--font-size-sm);
-      font-family: var(--font-sans);
-      color: var(--popover-foreground);
       cursor: pointer;
     }
 
-    .Item:hover,
-    .Item[data-highlighted] {
-      background: var(--secondary);
-      color: var(--foreground);
-    }
-
-    .Item[data-selected] {
-      font-weight: var(--font-weight-medium);
-    }
-
     .Item[data-disabled] {
-      opacity: 0.5;
       cursor: not-allowed;
     }
 
     .ItemIndicator {
       flex-shrink: 0;
-      width: var(--space-3_5);
       display: flex;
       align-items: center;
       justify-content: center;
     }
 
-    .ItemIndicator dui-icon {
-      --icon-size: var(--space-3_5);
-    }
-
     .ItemText {
       flex: 1;
     }

package/separator/index.d.ts

@@ -1 +1,3 @@
-export { DuiSeparator } from "./separator.js";
+import { DuiSeparator } from "./separator.js";
+export { DuiSeparator };
+export declare const separatorFamily: (typeof DuiSeparator)[];

package/separator/index.js

@@ -1 +1,3 @@
-export { DuiSeparator } from "./separator.js";
+import { DuiSeparator } from "./separator.js";
+export { DuiSeparator };
+export const separatorFamily = [DuiSeparator];

package/sidebar/index.d.ts

@@ -1,16 +1,29 @@
-export { DuiSidebarProvider, openChangeEvent } from "./sidebar-provider.js";
+import { DuiSidebarProvider, openChangeEvent } from "./sidebar-provider.js";
+export { DuiSidebarProvider, openChangeEvent };
 export type { SidebarOpenChangeDetail } from "./sidebar-provider.js";
-export { DuiSidebar } from "./sidebar.js";
-export { DuiSidebarTrigger } from "./sidebar-trigger.js";
-export { DuiSidebarContent } from "./sidebar-content.js";
-export { DuiSidebarHeader } from "./sidebar-header.js";
-export { DuiSidebarFooter } from "./sidebar-footer.js";
-export { DuiSidebarGroup } from "./sidebar-group.js";
-export { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
-export { DuiSidebarMenu } from "./sidebar-menu.js";
-export { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
-export { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
-export type { SidebarMenuButtonSize } from "./sidebar-menu-button.js";
-export { DuiSidebarSeparator } from "./sidebar-separator.js";
-export { DuiSidebarInset } from "./sidebar-inset.js";
+import { DuiSidebar } from "./sidebar.js";
+export { DuiSidebar };
+import { DuiSidebarTrigger } from "./sidebar-trigger.js";
+export { DuiSidebarTrigger };
+import { DuiSidebarContent } from "./sidebar-content.js";
+export { DuiSidebarContent };
+import { DuiSidebarHeader } from "./sidebar-header.js";
+export { DuiSidebarHeader };
+import { DuiSidebarFooter } from "./sidebar-footer.js";
+export { DuiSidebarFooter };
+import { DuiSidebarGroup } from "./sidebar-group.js";
+export { DuiSidebarGroup };
+import { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
+export { DuiSidebarGroupLabel };
+import { DuiSidebarMenu } from "./sidebar-menu.js";
+export { DuiSidebarMenu };
+import { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
+export { DuiSidebarMenuItem };
+import { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
+export { DuiSidebarMenuButton };
+import { DuiSidebarSeparator } from "./sidebar-separator.js";
+export { DuiSidebarSeparator };
+import { DuiSidebarInset } from "./sidebar-inset.js";
+export { DuiSidebarInset };
 export type { SidebarContext } from "./sidebar-context.js";
+export declare const sidebarFamily: (typeof DuiSidebarProvider | typeof DuiSidebar | typeof DuiSidebarTrigger | typeof DuiSidebarContent | typeof DuiSidebarHeader | typeof DuiSidebarFooter | typeof DuiSidebarGroup | typeof DuiSidebarGroupLabel | typeof DuiSidebarMenu | typeof DuiSidebarMenuItem | typeof DuiSidebarMenuButton | typeof DuiSidebarSeparator | typeof DuiSidebarInset)[];

package/sidebar/index.js

@@ -1,13 +1,32 @@
-export { DuiSidebarProvider, openChangeEvent } from "./sidebar-provider.js";
-export { DuiSidebar } from "./sidebar.js";
-export { DuiSidebarTrigger } from "./sidebar-trigger.js";
-export { DuiSidebarContent } from "./sidebar-content.js";
-export { DuiSidebarHeader } from "./sidebar-header.js";
-export { DuiSidebarFooter } from "./sidebar-footer.js";
-export { DuiSidebarGroup } from "./sidebar-group.js";
-export { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
-export { DuiSidebarMenu } from "./sidebar-menu.js";
-export { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
-export { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
-export { DuiSidebarSeparator } from "./sidebar-separator.js";
-export { DuiSidebarInset } from "./sidebar-inset.js";
+import { DuiSidebarProvider, openChangeEvent } from "./sidebar-provider.js";
+export { DuiSidebarProvider, openChangeEvent };
+import { DuiSidebar } from "./sidebar.js";
+export { DuiSidebar };
+import { DuiSidebarTrigger } from "./sidebar-trigger.js";
+export { DuiSidebarTrigger };
+import { DuiSidebarContent } from "./sidebar-content.js";
+export { DuiSidebarContent };
+import { DuiSidebarHeader } from "./sidebar-header.js";
+export { DuiSidebarHeader };
+import { DuiSidebarFooter } from "./sidebar-footer.js";
+export { DuiSidebarFooter };
+import { DuiSidebarGroup } from "./sidebar-group.js";
+export { DuiSidebarGroup };
+import { DuiSidebarGroupLabel } from "./sidebar-group-label.js";
+export { DuiSidebarGroupLabel };
+import { DuiSidebarMenu } from "./sidebar-menu.js";
+export { DuiSidebarMenu };
+import { DuiSidebarMenuItem } from "./sidebar-menu-item.js";
+export { DuiSidebarMenuItem };
+import { DuiSidebarMenuButton } from "./sidebar-menu-button.js";
+export { DuiSidebarMenuButton };
+import { DuiSidebarSeparator } from "./sidebar-separator.js";
+export { DuiSidebarSeparator };
+import { DuiSidebarInset } from "./sidebar-inset.js";
+export { DuiSidebarInset };
+export const sidebarFamily = [
+    DuiSidebarProvider, DuiSidebar, DuiSidebarTrigger, DuiSidebarContent,
+    DuiSidebarHeader, DuiSidebarFooter, DuiSidebarGroup, DuiSidebarGroupLabel,
+    DuiSidebarMenu, DuiSidebarMenuItem, DuiSidebarMenuButton,
+    DuiSidebarSeparator, DuiSidebarInset,
+];

package/sidebar/sidebar-context.d.ts

@@ -5,7 +5,7 @@ export type SidebarContext = {
     readonly openMobile: boolean;
     readonly isMobile: boolean;
     readonly side: "left" | "right";
-    readonly variant: "sidebar" | "floating" | "inset";
+    readonly variant: string;
     readonly collapsible: "offcanvas" | "icon" | "none";
     readonly setOpen: (open: boolean) => void;
     readonly toggleSidebar: () => void;

package/sidebar/sidebar-menu-button.d.ts

@@ -1,6 +1,5 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/sidebar */
 import { LitElement, type TemplateResult } from "lit";
-export type SidebarMenuButtonSize = "default" | "sm" | "lg";
 /**
  * `<dui-sidebar-menu-button>` — Interactive button or link within a sidebar menu.
  *
@@ -17,8 +16,6 @@ export declare class DuiSidebarMenuButton extends LitElement {
     #private;
     static tagName: "dui-sidebar-menu-button";
     static styles: import("lit").CSSResult[];
-    /** Size variant for the button. */
-    accessor size: SidebarMenuButtonSize;
     /** Whether the button is in active/selected state. */
     accessor active: boolean;
     /** Whether the button is disabled. */

package/sidebar/sidebar-menu-button.js

@@ -84,10 +84,6 @@ const styles = css `
 export class DuiSidebarMenuButton extends LitElement {
     static { this.tagName = "dui-sidebar-menu-button"; }
     static { this.styles = [base, styles]; }
-    #size_accessor_storage = "default";
-    /** Size variant for the button. */
-    get size() { return this.#size_accessor_storage; }
-    set size(value) { this.#size_accessor_storage = value; }
     #active_accessor_storage = false;
     /** Whether the button is in active/selected state. */
     get active() { return this.#active_accessor_storage; }
@@ -184,9 +180,6 @@ export class DuiSidebarMenuButton extends LitElement {
         return this.#renderContent();
     }
 }
-__decorate([
-    property({ reflect: true })
-], DuiSidebarMenuButton.prototype, "size", null);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], DuiSidebarMenuButton.prototype, "active", null);

package/sidebar/sidebar-provider.d.ts

@@ -24,7 +24,7 @@ export declare class DuiSidebarProvider extends LitElement {
     /** Which side the sidebar appears on. */
     accessor side: "left" | "right";
     /** Visual variant of the sidebar. */
-    accessor variant: "sidebar" | "floating" | "inset";
+    accessor variant: string;
     /** How the sidebar collapses. */
     accessor collapsible: "offcanvas" | "icon" | "none";
     connectedCallback(): void;

package/sidebar/sidebar-provider.js

@@ -41,7 +41,7 @@ export class DuiSidebarProvider extends LitElement {
     /** Which side the sidebar appears on. */
     get side() { return this.#side_accessor_storage; }
     set side(value) { this.#side_accessor_storage = value; }
-    #variant_accessor_storage = "sidebar";
+    #variant_accessor_storage = "";
     /** Visual variant of the sidebar. */
     get variant() { return this.#variant_accessor_storage; }
     set variant(value) { this.#variant_accessor_storage = value; }

package/sidebar/sidebar-trigger.js

@@ -40,7 +40,7 @@ export class DuiSidebarTrigger extends LitElement {
     };
     render() {
         return html `
-      <dui-button variant="ghost" size="sm" @click=${this.#onClick}>
+      <dui-button appearance="ghost" size="sm" @click=${this.#onClick}>
         <slot>
           <dui-icon>${panelLeftSvg}</dui-icon>
         </slot>

package/slider/index.d.ts

@@ -1 +1,3 @@
-export { DuiSlider, valueChangeEvent, valueCommittedEvent } from "./slider.js";
+import { DuiSlider, valueChangeEvent, valueCommittedEvent } from "./slider.js";
+export { DuiSlider, valueChangeEvent, valueCommittedEvent };
+export declare const sliderFamily: (typeof DuiSlider)[];

package/slider/index.js

@@ -1 +1,3 @@
-export { DuiSlider, valueChangeEvent, valueCommittedEvent } from "./slider.js";
+import { DuiSlider, valueChangeEvent, valueCommittedEvent } from "./slider.js";
+export { DuiSlider, valueChangeEvent, valueCommittedEvent };
+export const sliderFamily = [DuiSlider];

package/slider/slider.js

@@ -49,7 +49,6 @@ const styles = css `
     transform: translateX(-50%);
     cursor: grab;
     outline: none;
-    transition-property: left, box-shadow;
   }
 
   [part="root"][data-dragging] [part="thumb"] {

package/spinner/index.d.ts

@@ -1 +1,3 @@
-export { DuiSpinner } from "./spinner.js";
+import { DuiSpinner } from "./spinner.js";
+export { DuiSpinner };
+export declare const spinnerFamily: (typeof DuiSpinner)[];

package/spinner/index.js

@@ -1 +1,3 @@
-export { DuiSpinner } from "./spinner.js";
+import { DuiSpinner } from "./spinner.js";
+export { DuiSpinner };
+export const spinnerFamily = [DuiSpinner];

package/spinner/spinner.d.ts

@@ -1,7 +1,5 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/spinner */
 import { LitElement, type TemplateResult } from "lit";
-type SpinnerSize = "sm" | "md" | "lg";
-type SpinnerVariant = "pulse" | "lucide-loader" | "lucide-loader-circle";
 /**
  * A loading indicator with multiple animation variants and sizes.
  */
@@ -9,10 +7,7 @@ export declare class DuiSpinner extends LitElement {
     #private;
     static tagName: "dui-spinner";
     static styles: import("lit").CSSResult[];
-    /** Size variant: "sm" (24px), "md" (32px), "lg" (44px). */
-    accessor size: SpinnerSize;
     /** Animation variant. */
-    accessor variant: SpinnerVariant;
+    accessor variant: string;
     render(): TemplateResult;
 }
-export {};

package/spinner/spinner.js

@@ -108,11 +108,7 @@ const styles = css `
 export class DuiSpinner extends LitElement {
     static { this.tagName = "dui-spinner"; }
     static { this.styles = [base, styles]; }
-    #size_accessor_storage = "sm";
-    /** Size variant: "sm" (24px), "md" (32px), "lg" (44px). */
-    get size() { return this.#size_accessor_storage; }
-    set size(value) { this.#size_accessor_storage = value; }
-    #variant_accessor_storage = "pulse";
+    #variant_accessor_storage = "";
     /** Animation variant. */
     get variant() { return this.#variant_accessor_storage; }
     set variant(value) { this.#variant_accessor_storage = value; }
@@ -130,9 +126,6 @@ export class DuiSpinner extends LitElement {
         return html `${this.#getSvg()}`;
     }
 }
-__decorate([
-    property({ reflect: true })
-], DuiSpinner.prototype, "size", null);
 __decorate([
     property({ reflect: true })
 ], DuiSpinner.prototype, "variant", null);

package/switch/index.d.ts

@@ -1 +1,3 @@
-export { DuiSwitch, checkedChangeEvent } from "./switch.js";
+import { DuiSwitch, checkedChangeEvent } from "./switch.js";
+export { DuiSwitch, checkedChangeEvent };
+export declare const switchFamily: (typeof DuiSwitch)[];

package/switch/index.js

@@ -1 +1,3 @@
-export { DuiSwitch, checkedChangeEvent } from "./switch.js";
+import { DuiSwitch, checkedChangeEvent } from "./switch.js";
+export { DuiSwitch, checkedChangeEvent };
+export const switchFamily = [DuiSwitch];

package/switch/switch.js

@@ -32,13 +32,11 @@ const styles = css `
     margin-inline: 0;
     border: none;
     cursor: pointer;
-    transition-property: background, outline-color, box-shadow, filter, transform;
   }
 
   [part="thumb"] {
     position: absolute;
     left: var(--switch-thumb-offset, 0.125rem);
-    transition-property: transform, outline-color;
   }
 
   [part="root"][data-checked] [part="thumb"] {

package/tabs/index.d.ts

@@ -1,6 +1,12 @@
-export { DuiTabs, valueChangeEvent } from "./tabs.js";
-export { DuiTabsList } from "./tabs-list.js";
-export { DuiTab } from "./tab.js";
-export { DuiTabsPanel } from "./tabs-panel.js";
-export { DuiTabsIndicator } from "./tabs-indicator.js";
+import { DuiTabs, valueChangeEvent } from "./tabs.js";
+export { DuiTabs, valueChangeEvent };
+import { DuiTabsList } from "./tabs-list.js";
+export { DuiTabsList };
+import { DuiTab } from "./tab.js";
+export { DuiTab };
+import { DuiTabsPanel } from "./tabs-panel.js";
+export { DuiTabsPanel };
+import { DuiTabsIndicator } from "./tabs-indicator.js";
+export { DuiTabsIndicator };
 export type { TabsContext } from "./tabs-context.js";
+export declare const tabsFamily: (typeof DuiTabs | typeof DuiTabsList | typeof DuiTab | typeof DuiTabsPanel | typeof DuiTabsIndicator)[];

package/tabs/index.js

@@ -1,5 +1,11 @@
-export { DuiTabs, valueChangeEvent } from "./tabs.js";
-export { DuiTabsList } from "./tabs-list.js";
-export { DuiTab } from "./tab.js";
-export { DuiTabsPanel } from "./tabs-panel.js";
-export { DuiTabsIndicator } from "./tabs-indicator.js";
+import { DuiTabs, valueChangeEvent } from "./tabs.js";
+export { DuiTabs, valueChangeEvent };
+import { DuiTabsList } from "./tabs-list.js";
+export { DuiTabsList };
+import { DuiTab } from "./tab.js";
+export { DuiTab };
+import { DuiTabsPanel } from "./tabs-panel.js";
+export { DuiTabsPanel };
+import { DuiTabsIndicator } from "./tabs-indicator.js";
+export { DuiTabsIndicator };
+export const tabsFamily = [DuiTabs, DuiTabsList, DuiTab, DuiTabsPanel, DuiTabsIndicator];

package/tabs/tab.js

@@ -29,7 +29,6 @@ const styles = css `
     white-space: nowrap;
     word-break: keep-all;
     cursor: pointer;
-    transition-property: color, box-shadow, background, filter, transform;
   }
 
   [part="tab"][data-disabled] {

package/tabs/tabs-panel.js

@@ -22,7 +22,6 @@ const styles = css `
   [part="panel"] {
     position: relative;
     outline: 0;
-    transition-property: box-shadow;
   }
 
   [part="panel"][hidden] {

package/textarea/index.d.ts

@@ -1,2 +1,4 @@
-export { DuiTextarea, textareaChangeEvent } from "./textarea.js";
-export type { TextareaResize, TextareaVariant } from "./textarea.js";
+import { DuiTextarea, textareaChangeEvent } from "./textarea.js";
+export { DuiTextarea, textareaChangeEvent };
+export type { TextareaResize } from "./textarea.js";
+export declare const textareaFamily: (typeof DuiTextarea)[];

package/textarea/index.js

@@ -1 +1,3 @@
-export { DuiTextarea, textareaChangeEvent } from "./textarea.js";
+import { DuiTextarea, textareaChangeEvent } from "./textarea.js";
+export { DuiTextarea, textareaChangeEvent };
+export const textareaFamily = [DuiTextarea];

package/textarea/textarea.d.ts

@@ -1,7 +1,6 @@
 /** Ported from original DUI: deep-future-app/app/client/components/dui/textarea */
 import { LitElement, type TemplateResult } from "lit";
 export type TextareaResize = "none" | "vertical" | "horizontal" | "both" | "auto";
-export type TextareaVariant = "default" | "ghost";
 export declare const textareaChangeEvent: (detail: {
     value: string;
 }) => CustomEvent<{
@@ -27,8 +26,6 @@ export declare class DuiTextarea extends LitElement {
     accessor minLength: number | undefined;
     accessor maxLength: number | undefined;
     accessor name: string;
-    /** Visual variant: "default" or "ghost" (no border/background). */
-    accessor variant: TextareaVariant;
     /** Resize behavior: "none" | "vertical" | "horizontal" | "both" | "auto". */
     accessor resize: TextareaResize;
     /** Maximum height (CSS value). Textarea scrolls when content exceeds this. */

package/textarea/textarea.js

@@ -23,7 +23,6 @@ const styles = css `
     font-family: inherit;
     outline: none;
     resize: vertical;
-    transition-property: border-color, box-shadow, background, filter, transform;
   }
 
   [part="textarea"][data-resize="none"] {
@@ -91,10 +90,6 @@ export class DuiTextarea extends LitElement {
     #name_accessor_storage = "";
     get name() { return this.#name_accessor_storage; }
     set name(value) { this.#name_accessor_storage = value; }
-    #variant_accessor_storage = "default";
-    /** Visual variant: "default" or "ghost" (no border/background). */
-    get variant() { return this.#variant_accessor_storage; }
-    set variant(value) { this.#variant_accessor_storage = value; }
     #resize_accessor_storage = "vertical";
     /** Resize behavior: "none" | "vertical" | "horizontal" | "both" | "auto". */
     get resize() { return this.#resize_accessor_storage; }
@@ -159,9 +154,6 @@ __decorate([
 __decorate([
     property()
 ], DuiTextarea.prototype, "name", null);
-__decorate([
-    property({ reflect: true })
-], DuiTextarea.prototype, "variant", null);
 __decorate([
     property()
 ], DuiTextarea.prototype, "resize", null);

package/toggle/index.d.ts

@@ -1,3 +1,6 @@
-export { DuiToggle, pressedChangeEvent } from "./toggle.js";
-export { DuiToggleGroup, valueChangeEvent } from "./toggle-group.js";
+import { DuiToggle, pressedChangeEvent } from "./toggle.js";
+export { DuiToggle, pressedChangeEvent };
+import { DuiToggleGroup, valueChangeEvent } from "./toggle-group.js";
+export { DuiToggleGroup, valueChangeEvent };
 export type { ToggleGroupContext } from "./toggle-group-context.js";
+export declare const toggleFamily: (typeof DuiToggle | typeof DuiToggleGroup)[];

package/toggle/index.js

@@ -1,2 +1,5 @@
-export { DuiToggle, pressedChangeEvent } from "./toggle.js";
-export { DuiToggleGroup, valueChangeEvent } from "./toggle-group.js";
+import { DuiToggle, pressedChangeEvent } from "./toggle.js";
+export { DuiToggle, pressedChangeEvent };
+import { DuiToggleGroup, valueChangeEvent } from "./toggle-group.js";
+export { DuiToggleGroup, valueChangeEvent };
+export const toggleFamily = [DuiToggle, DuiToggleGroup];

package/toggle/toggle.d.ts

@@ -8,6 +8,7 @@ export declare const pressedChangeEvent: (detail: {
  * `<dui-toggle>` — A two-state toggle button. Works standalone or inside a toggle group.
  *
  * @slot - Toggle content (text and/or icons).
+ * @slot icon - Optional leading icon.
  * @csspart root - The button element.
  * @fires pressed-change - Fired when toggled. Detail: { pressed: boolean }
  */

package/toggle/toggle.js

@@ -19,6 +19,7 @@ const styles = css `
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    gap: var(--toggle-gap, 0);
     border: none;
     background: none;
     cursor: pointer;
@@ -36,6 +37,7 @@ const styles = css `
  * `<dui-toggle>` — A two-state toggle button. Works standalone or inside a toggle group.
  *
  * @slot - Toggle content (text and/or icons).
+ * @slot icon - Optional leading icon.
  * @csspart root - The button element.
  * @fires pressed-change - Fired when toggled. Detail: { pressed: boolean }
  */
@@ -105,6 +107,7 @@ export class DuiToggle extends LitElement {
         ?data-disabled="${isDisabled}"
         @click="${this.#handleClick}"
       >
+        <slot name="icon"></slot>
         <slot></slot>
       </button>
     `;

package/toolbar/index.d.ts

@@ -1 +1,3 @@
-export { DuiToolbar } from "./toolbar.js";
+import { DuiToolbar } from "./toolbar.js";
+export { DuiToolbar };
+export declare const toolbarFamily: (typeof DuiToolbar)[];

package/toolbar/index.js

@@ -1 +1,3 @@
-export { DuiToolbar } from "./toolbar.js";
+import { DuiToolbar } from "./toolbar.js";
+export { DuiToolbar };
+export const toolbarFamily = [DuiToolbar];

package/toolbar/toolbar.d.ts

@@ -3,8 +3,6 @@ import { LitElement, type TemplateResult } from "lit";
 export declare class DuiToolbar extends LitElement {
     static tagName: "dui-toolbar";
     static styles: import("lit").CSSResult[];
-    /** Sets a minimum height using the corresponding `--component-height-*` token. */
-    accessor size: "sm" | "md" | "lg" | "xl" | undefined;
     /** Adds horizontal and vertical padding. */
     accessor inset: boolean;
     /** Reduces left inset padding when a button is the first item. */