@duyluonganduin/acl-web-components 0.0.26 → 0.0.28

package/dist/jsx.d.ts

@@ -286,6 +286,31 @@ declare module 'react' {
       // ── anduin-tag-close ──────────────────────────────────────────────────
       'anduin-tag-close': Base
 
+      // ── anduin-toggle-group ───────────────────────────────────────────────
+      'anduin-toggle-group': Base & {
+        /** 'single' | 'multiple'  (default: 'single') */
+        mode?: 'single' | 'multiple'
+        /** Initially selected value(s); space-separated in multiple mode */
+        'default-value'?: string
+        /** Controlled selected value(s); space-separated in multiple mode */
+        value?: string
+        /** 'small' | 'medium' | 'large' | 'free'  (default: 'medium') */
+        size?: 'small' | 'medium' | 'large' | 'free'
+        /** 'gray' | 'primary'  (default: 'gray') */
+        variant?: 'gray' | 'primary'
+        /** Detach items into individually rounded pills with 8px gaps that wrap */
+        gap?: boolean | string
+      }
+
+      // ── anduin-toggle-group-item ──────────────────────────────────────────
+      'anduin-toggle-group-item': Base & {
+        /** Unique value identifying this item within the group */
+        value?: string
+        /** anduin-icon name shown before the label */
+        'start-icon'?: string
+        disabled?: boolean | string
+      }
+
       // ── anduin-tooltip ────────────────────────────────────────────────────
       'anduin-tooltip': Base & {
         disabled?: boolean | string
@@ -451,6 +476,31 @@ declare module 'react' {
         onSelect?: (e: CustomEvent<{ value: string; label?: string; icon?: string }>) => void
       }
 
+      // ── anduin-navigation ─────────────────────────────────────────────────
+      'anduin-navigation': Base & {
+        /** Initially active item value (uncontrolled usage) */
+        'default-value'?: string
+        /** Controlled active item value */
+        value?: string
+        /** 'light' | 'dark'  (default: 'light') */
+        theme?: 'light' | 'dark'
+        /** 'left' | 'center' | 'right'  (default: 'left') */
+        alignment?: 'left' | 'center' | 'right'
+        /** Fired when the active item changes — detail: string (selected value) */
+        onChange?: (e: CustomEvent<string>) => void
+      }
+
+      // ── anduin-navigation-item ────────────────────────────────────────────
+      'anduin-navigation-item': Base & {
+        /** Unique value identifying this item within the bar */
+        value?: string
+        /** anduin-icon name shown before the label */
+        'start-icon'?: string
+        /** Renders an <a> instead of a <button> when provided */
+        href?: string
+        disabled?: boolean | string
+      }
+
       // ── anduin-file-icon ──────────────────────────────────────────────────
       'anduin-file-icon': Base & {
         /** 'archive' | 'audio' | 'blueprint' | 'box' | 'csv' | 'excel' | 'folder'

package/dist/react.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("@lit/react"),e=require("./anduin-suggestion-ChXDlWeZ.cjs"),a=t.createComponent({react:n,tagName:"anduin-spinner",elementClass:e.AnduinSpinner}),o=t.createComponent({react:n,tagName:"anduin-sparkle-spinner",elementClass:e.AnduinSparkleSpinner}),s=t.createComponent({react:n,tagName:"anduin-icon",elementClass:e.AnduinIcon}),C=t.createComponent({react:n,tagName:"anduin-badge",elementClass:e.AnduinBadge}),r=t.createComponent({react:n,tagName:"anduin-badge-count",elementClass:e.AnduinBadgeCount}),l=t.createComponent({react:n,tagName:"anduin-button",elementClass:e.AnduinButton}),i=t.createComponent({react:n,tagName:"anduin-callout",elementClass:e.AnduinCallout}),c=t.createComponent({react:n,tagName:"anduin-divider",elementClass:e.AnduinDivider}),d=t.createComponent({react:n,tagName:"anduin-dot",elementClass:e.AnduinDot}),m=t.createComponent({react:n,tagName:"anduin-progress",elementClass:e.AnduinProgress}),u=t.createComponent({react:n,tagName:"anduin-skeleton",elementClass:e.AnduinSkeleton}),E=t.createComponent({react:n,tagName:"anduin-loading-state",elementClass:e.AnduinLoadingState}),A=t.createComponent({react:n,tagName:"anduin-field",elementClass:e.AnduinField}),g=t.createComponent({react:n,tagName:"anduin-field-label",elementClass:e.AnduinFieldLabel}),N=t.createComponent({react:n,tagName:"anduin-field-description",elementClass:e.AnduinFieldDescription}),p=t.createComponent({react:n,tagName:"anduin-field-error",elementClass:e.AnduinFieldError}),T=t.createComponent({react:n,tagName:"anduin-field-group",elementClass:e.AnduinFieldGroup}),_=t.createComponent({react:n,tagName:"anduin-radio",elementClass:e.AnduinRadio,events:{onChange:e.RADIO_CHANGE}}),S=t.createComponent({react:n,tagName:"anduin-radio-group",elementClass:e.AnduinRadioGroup,events:{onChange:e.RADIO_GROUP_CHANGE}}),G=t.createComponent({react:n,tagName:"anduin-checkbox",elementClass:e.AnduinCheckbox,events:{onChange:e.CHECKBOX_CHANGE}}),L=t.createComponent({react:n,tagName:"anduin-input",elementClass:e.AnduinInput,events:{onChange:e.INPUT_CHANGE,onClear:e.INPUT_CLEAR}}),O=t.createComponent({react:n,tagName:"anduin-textarea",elementClass:e.AnduinTextarea,events:{onChange:e.TEXTAREA_CHANGE}}),R=t.createComponent({react:n,tagName:"anduin-popover",elementClass:e.AnduinPopover}),I=t.createComponent({react:n,tagName:"anduin-popover-close",elementClass:e.AnduinPopoverClose}),D=t.createComponent({react:n,tagName:"anduin-menu",elementClass:e.AnduinMenu}),H=t.createComponent({react:n,tagName:"anduin-menu-item",elementClass:e.AnduinMenuItem}),v=t.createComponent({react:n,tagName:"anduin-modal",elementClass:e.AnduinModal,events:{onClose:e.MODAL_CLOSE_EVENT,onAfterClose:e.MODAL_AFTER_CLOSE_EVENT}}),b=t.createComponent({react:n,tagName:"anduin-modal-close",elementClass:e.AnduinModalClose}),F=t.createComponent({react:n,tagName:"anduin-tabs",elementClass:e.AnduinTabs,events:{onChange:e.TAB_CHANGE}}),M=t.createComponent({react:n,tagName:"anduin-tabs-list",elementClass:e.AnduinTabsList}),P=t.createComponent({react:n,tagName:"anduin-tab-trigger",elementClass:e.AnduinTabTrigger}),W=t.createComponent({react:n,tagName:"anduin-tab-content",elementClass:e.AnduinTabContent}),U=t.createComponent({react:n,tagName:"anduin-tag",elementClass:e.AnduinTag}),w=t.createComponent({react:n,tagName:"anduin-tag-close",elementClass:e.AnduinTagClose,events:{onClick:e.TAG_CLOSE_CLICK}}),h=t.createComponent({react:n,tagName:"anduin-tooltip",elementClass:e.AnduinTooltip}),B=t.createComponent({react:n,tagName:"anduin-tooltip-trigger",elementClass:e.AnduinTooltipTrigger}),k=t.createComponent({react:n,tagName:"anduin-tooltip-content",elementClass:e.AnduinTooltipContent}),V=t.createComponent({react:n,tagName:"anduin-well",elementClass:e.AnduinWell}),K=t.createComponent({react:n,tagName:"anduin-well-close",elementClass:e.AnduinWellClose,events:{onClick:e.WELL_CLOSE_CLICK}}),f=t.createComponent({react:n,tagName:"anduin-avatar",elementClass:e.AnduinAvatar}),x=t.createComponent({react:n,tagName:"anduin-file-icon",elementClass:e.AnduinFileIcon}),X=t.createComponent({react:n,tagName:"anduin-toast",elementClass:e.AnduinToast}),q=t.createComponent({react:n,tagName:"anduin-toaster",elementClass:e.AnduinToaster}),y=t.createComponent({react:n,tagName:"anduin-dropdown",elementClass:e.AnduinDropdown,events:{onChange:e.DROPDOWN_CHANGE}}),j=t.createComponent({react:n,tagName:"anduin-drawer",elementClass:e.AnduinDrawer,events:{onClose:e.DRAWER_CLOSE_EVENT,onAfterClose:e.DRAWER_AFTER_CLOSE_EVENT}}),z=t.createComponent({react:n,tagName:"anduin-drawer-close",elementClass:e.AnduinDrawerClose}),J=t.createComponent({react:n,tagName:"anduin-switcher",elementClass:e.AnduinSwitcher,events:{onChange:e.SWITCHER_CHANGE}}),Q=t.createComponent({react:n,tagName:"anduin-suggestion",elementClass:e.AnduinSuggestion,events:{onChange:e.SUGGESTION_CHANGE,onSelect:e.SUGGESTION_SELECT,onClear:e.SUGGESTION_CLEAR}});exports.CHECKBOX_CHANGE=e.CHECKBOX_CHANGE;exports.DRAWER_AFTER_CLOSE_EVENT=e.DRAWER_AFTER_CLOSE_EVENT;exports.DRAWER_CLOSE_EVENT=e.DRAWER_CLOSE_EVENT;exports.DROPDOWN_CHANGE=e.DROPDOWN_CHANGE;exports.INPUT_CHANGE=e.INPUT_CHANGE;exports.INPUT_CLEAR=e.INPUT_CLEAR;exports.MENU_ITEM_CLICK=e.MENU_ITEM_CLICK;exports.MODAL_AFTER_CLOSE_EVENT=e.MODAL_AFTER_CLOSE_EVENT;exports.MODAL_CLOSE_EVENT=e.MODAL_CLOSE_EVENT;exports.RADIO_CHANGE=e.RADIO_CHANGE;exports.RADIO_GROUP_CHANGE=e.RADIO_GROUP_CHANGE;exports.SUGGESTION_CHANGE=e.SUGGESTION_CHANGE;exports.SUGGESTION_CLEAR=e.SUGGESTION_CLEAR;exports.SUGGESTION_SELECT=e.SUGGESTION_SELECT;exports.SWITCHER_CHANGE=e.SWITCHER_CHANGE;exports.TAB_CHANGE=e.TAB_CHANGE;exports.TAG_CLOSE_CLICK=e.TAG_CLOSE_CLICK;exports.TEXTAREA_CHANGE=e.TEXTAREA_CHANGE;exports.WELL_CLOSE_CLICK=e.WELL_CLOSE_CLICK;exports.Avatar=f;exports.Badge=C;exports.BadgeCount=r;exports.Button=l;exports.Callout=i;exports.Checkbox=G;exports.Divider=c;exports.Dot=d;exports.Drawer=j;exports.DrawerClose=z;exports.Dropdown=y;exports.Field=A;exports.FieldDescription=N;exports.FieldError=p;exports.FieldGroup=T;exports.FieldLabel=g;exports.FileIcon=x;exports.Icon=s;exports.Input=L;exports.LoadingState=E;exports.Menu=D;exports.MenuItem=H;exports.Modal=v;exports.ModalClose=b;exports.Popover=R;exports.PopoverClose=I;exports.Progress=m;exports.Radio=_;exports.RadioGroup=S;exports.Skeleton=u;exports.SparkleSpinner=o;exports.Spinner=a;exports.Suggestion=Q;exports.Switcher=J;exports.TabContent=W;exports.TabTrigger=P;exports.Tabs=F;exports.TabsList=M;exports.Tag=U;exports.TagClose=w;exports.Textarea=O;exports.Toast=X;exports.Toaster=q;exports.Tooltip=h;exports.TooltipContent=k;exports.TooltipTrigger=B;exports.Well=V;exports.WellClose=K;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("@lit/react"),e=require("./anduin-navigation-BgreqvTv.cjs"),a=t.createComponent({react:n,tagName:"anduin-spinner",elementClass:e.AnduinSpinner}),o=t.createComponent({react:n,tagName:"anduin-sparkle-spinner",elementClass:e.AnduinSparkleSpinner}),C=t.createComponent({react:n,tagName:"anduin-icon",elementClass:e.AnduinIcon}),s=t.createComponent({react:n,tagName:"anduin-badge",elementClass:e.AnduinBadge}),r=t.createComponent({react:n,tagName:"anduin-badge-count",elementClass:e.AnduinBadgeCount}),i=t.createComponent({react:n,tagName:"anduin-button",elementClass:e.AnduinButton}),l=t.createComponent({react:n,tagName:"anduin-callout",elementClass:e.AnduinCallout}),c=t.createComponent({react:n,tagName:"anduin-divider",elementClass:e.AnduinDivider}),m=t.createComponent({react:n,tagName:"anduin-dot",elementClass:e.AnduinDot}),d=t.createComponent({react:n,tagName:"anduin-progress",elementClass:e.AnduinProgress}),E=t.createComponent({react:n,tagName:"anduin-skeleton",elementClass:e.AnduinSkeleton}),u=t.createComponent({react:n,tagName:"anduin-loading-state",elementClass:e.AnduinLoadingState}),g=t.createComponent({react:n,tagName:"anduin-field",elementClass:e.AnduinField}),A=t.createComponent({react:n,tagName:"anduin-field-label",elementClass:e.AnduinFieldLabel}),N=t.createComponent({react:n,tagName:"anduin-field-description",elementClass:e.AnduinFieldDescription}),T=t.createComponent({react:n,tagName:"anduin-field-error",elementClass:e.AnduinFieldError}),_=t.createComponent({react:n,tagName:"anduin-field-group",elementClass:e.AnduinFieldGroup}),p=t.createComponent({react:n,tagName:"anduin-radio",elementClass:e.AnduinRadio,events:{onChange:e.RADIO_CHANGE}}),G=t.createComponent({react:n,tagName:"anduin-radio-group",elementClass:e.AnduinRadioGroup,events:{onChange:e.RADIO_GROUP_CHANGE}}),O=t.createComponent({react:n,tagName:"anduin-checkbox",elementClass:e.AnduinCheckbox,events:{onChange:e.CHECKBOX_CHANGE}}),L=t.createComponent({react:n,tagName:"anduin-input",elementClass:e.AnduinInput,events:{onChange:e.INPUT_CHANGE,onClear:e.INPUT_CLEAR}}),S=t.createComponent({react:n,tagName:"anduin-textarea",elementClass:e.AnduinTextarea,events:{onChange:e.TEXTAREA_CHANGE}}),I=t.createComponent({react:n,tagName:"anduin-popover",elementClass:e.AnduinPopover}),R=t.createComponent({react:n,tagName:"anduin-popover-close",elementClass:e.AnduinPopoverClose}),D=t.createComponent({react:n,tagName:"anduin-menu",elementClass:e.AnduinMenu}),v=t.createComponent({react:n,tagName:"anduin-menu-item",elementClass:e.AnduinMenuItem}),H=t.createComponent({react:n,tagName:"anduin-modal",elementClass:e.AnduinModal,events:{onClose:e.MODAL_CLOSE_EVENT,onAfterClose:e.MODAL_AFTER_CLOSE_EVENT}}),P=t.createComponent({react:n,tagName:"anduin-modal-close",elementClass:e.AnduinModalClose}),M=t.createComponent({react:n,tagName:"anduin-tabs",elementClass:e.AnduinTabs,events:{onChange:e.TAB_CHANGE}}),U=t.createComponent({react:n,tagName:"anduin-tabs-list",elementClass:e.AnduinTabsList}),b=t.createComponent({react:n,tagName:"anduin-tab-trigger",elementClass:e.AnduinTabTrigger}),F=t.createComponent({react:n,tagName:"anduin-tab-content",elementClass:e.AnduinTabContent}),W=t.createComponent({react:n,tagName:"anduin-tag",elementClass:e.AnduinTag}),h=t.createComponent({react:n,tagName:"anduin-tag-close",elementClass:e.AnduinTagClose,events:{onClick:e.TAG_CLOSE_CLICK}}),w=t.createComponent({react:n,tagName:"anduin-toggle-group",elementClass:e.AnduinToggleGroup,events:{onChange:e.TOGGLE_GROUP_CHANGE}}),B=t.createComponent({react:n,tagName:"anduin-toggle-group-item",elementClass:e.AnduinToggleGroupItem,events:{onChange:e.TOGGLE_GROUP_ITEM_CHANGE,onSelect:e.TOGGLE_GROUP_ITEM_SELECT,onDeselect:e.TOGGLE_GROUP_ITEM_DESELECT}}),V=t.createComponent({react:n,tagName:"anduin-tooltip",elementClass:e.AnduinTooltip}),k=t.createComponent({react:n,tagName:"anduin-tooltip-trigger",elementClass:e.AnduinTooltipTrigger}),K=t.createComponent({react:n,tagName:"anduin-tooltip-content",elementClass:e.AnduinTooltipContent}),f=t.createComponent({react:n,tagName:"anduin-well",elementClass:e.AnduinWell}),x=t.createComponent({react:n,tagName:"anduin-well-close",elementClass:e.AnduinWellClose,events:{onClick:e.WELL_CLOSE_CLICK}}),X=t.createComponent({react:n,tagName:"anduin-avatar",elementClass:e.AnduinAvatar}),q=t.createComponent({react:n,tagName:"anduin-file-icon",elementClass:e.AnduinFileIcon}),y=t.createComponent({react:n,tagName:"anduin-toast",elementClass:e.AnduinToast}),j=t.createComponent({react:n,tagName:"anduin-toaster",elementClass:e.AnduinToaster}),z=t.createComponent({react:n,tagName:"anduin-dropdown",elementClass:e.AnduinDropdown,events:{onChange:e.DROPDOWN_CHANGE}}),J=t.createComponent({react:n,tagName:"anduin-drawer",elementClass:e.AnduinDrawer,events:{onClose:e.DRAWER_CLOSE_EVENT,onAfterClose:e.DRAWER_AFTER_CLOSE_EVENT}}),Q=t.createComponent({react:n,tagName:"anduin-drawer-close",elementClass:e.AnduinDrawerClose}),Y=t.createComponent({react:n,tagName:"anduin-switcher",elementClass:e.AnduinSwitcher,events:{onChange:e.SWITCHER_CHANGE}}),Z=t.createComponent({react:n,tagName:"anduin-suggestion",elementClass:e.AnduinSuggestion,events:{onChange:e.SUGGESTION_CHANGE,onSelect:e.SUGGESTION_SELECT,onClear:e.SUGGESTION_CLEAR}}),$=t.createComponent({react:n,tagName:"anduin-navigation",elementClass:e.AnduinNavigation,events:{onChange:e.NAVIGATION_CHANGE}}),ee=t.createComponent({react:n,tagName:"anduin-navigation-item",elementClass:e.AnduinNavigationItem});exports.CHECKBOX_CHANGE=e.CHECKBOX_CHANGE;exports.DRAWER_AFTER_CLOSE_EVENT=e.DRAWER_AFTER_CLOSE_EVENT;exports.DRAWER_CLOSE_EVENT=e.DRAWER_CLOSE_EVENT;exports.DROPDOWN_CHANGE=e.DROPDOWN_CHANGE;exports.INPUT_CHANGE=e.INPUT_CHANGE;exports.INPUT_CLEAR=e.INPUT_CLEAR;exports.MENU_ITEM_CLICK=e.MENU_ITEM_CLICK;exports.MODAL_AFTER_CLOSE_EVENT=e.MODAL_AFTER_CLOSE_EVENT;exports.MODAL_CLOSE_EVENT=e.MODAL_CLOSE_EVENT;exports.NAVIGATION_CHANGE=e.NAVIGATION_CHANGE;exports.RADIO_CHANGE=e.RADIO_CHANGE;exports.RADIO_GROUP_CHANGE=e.RADIO_GROUP_CHANGE;exports.SUGGESTION_CHANGE=e.SUGGESTION_CHANGE;exports.SUGGESTION_CLEAR=e.SUGGESTION_CLEAR;exports.SUGGESTION_SELECT=e.SUGGESTION_SELECT;exports.SWITCHER_CHANGE=e.SWITCHER_CHANGE;exports.TAB_CHANGE=e.TAB_CHANGE;exports.TAG_CLOSE_CLICK=e.TAG_CLOSE_CLICK;exports.TEXTAREA_CHANGE=e.TEXTAREA_CHANGE;exports.TOGGLE_GROUP_CHANGE=e.TOGGLE_GROUP_CHANGE;exports.TOGGLE_GROUP_ITEM_CHANGE=e.TOGGLE_GROUP_ITEM_CHANGE;exports.TOGGLE_GROUP_ITEM_DESELECT=e.TOGGLE_GROUP_ITEM_DESELECT;exports.TOGGLE_GROUP_ITEM_SELECT=e.TOGGLE_GROUP_ITEM_SELECT;exports.WELL_CLOSE_CLICK=e.WELL_CLOSE_CLICK;exports.Avatar=X;exports.Badge=s;exports.BadgeCount=r;exports.Button=i;exports.Callout=l;exports.Checkbox=O;exports.Divider=c;exports.Dot=m;exports.Drawer=J;exports.DrawerClose=Q;exports.Dropdown=z;exports.Field=g;exports.FieldDescription=N;exports.FieldError=T;exports.FieldGroup=_;exports.FieldLabel=A;exports.FileIcon=q;exports.Icon=C;exports.Input=L;exports.LoadingState=u;exports.Menu=D;exports.MenuItem=v;exports.Modal=H;exports.ModalClose=P;exports.Navigation=$;exports.NavigationItem=ee;exports.Popover=I;exports.PopoverClose=R;exports.Progress=d;exports.Radio=p;exports.RadioGroup=G;exports.Skeleton=E;exports.SparkleSpinner=o;exports.Spinner=a;exports.Suggestion=Z;exports.Switcher=Y;exports.TabContent=F;exports.TabTrigger=b;exports.Tabs=M;exports.TabsList=U;exports.Tag=W;exports.TagClose=h;exports.Textarea=S;exports.Toast=y;exports.Toaster=j;exports.ToggleGroup=w;exports.ToggleGroupItem=B;exports.Tooltip=V;exports.TooltipContent=K;exports.TooltipTrigger=k;exports.Well=f;exports.WellClose=x;

package/dist/react.d.ts

@@ -278,6 +278,51 @@ declare class AnduinModalClose extends HTMLElement {
     private _onClick;
 }
 
+/**
+ * Horizontal navigation bar — a row of items where exactly one is active.
+ * Recommended for navigating between top-level pages of an application.
+ *
+ * Theming: `theme="light"` (default) or `theme="dark"`. For a custom light
+ * theme, set any of these CSS custom properties on the element:
+ *   --nav-color, --nav-hover-color, --nav-hover-bg,
+ *   --nav-active-color, --nav-active-bg, --nav-surface
+ */
+declare class AnduinNavigation extends LitElement {
+    static styles: CSSResult;
+    /** Initially active item value (uncontrolled usage). */
+    defaultValue: string;
+    /** Controlled active item value. Leave unset for uncontrolled usage. */
+    value: string | null;
+    theme: NavigationTheme;
+    alignment: NavigationAlignment;
+    private internalValue;
+    private get isControlled();
+    private get selection();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private get items();
+    private syncItems;
+    private onItemClick;
+    render(): TemplateResult<1>;
+}
+
+declare class AnduinNavigationItem extends LitElement {
+    static styles: CSSResult;
+    /** Unique value identifying this item within the bar. */
+    value: string;
+    /** anduin-icon name shown before the label. */
+    startIcon: string;
+    /** Renders an <a> instead of a <button> when provided. */
+    href: string;
+    disabled: boolean;
+    selected: boolean;
+    theme: NavigationTheme;
+    private onClick;
+    updated(changed: Map<string, unknown>): void;
+    render(): TemplateResult<1>;
+}
+
 declare class AnduinPopover extends LitElement {
     static styles: CSSResult;
     open: boolean;
@@ -514,6 +559,44 @@ declare class AnduinToaster extends LitElement {
     render(): TemplateResult<1>;
 }
 
+declare class AnduinToggleGroup extends LitElement {
+    static styles: CSSResult;
+    mode: ToggleGroupMode;
+    defaultValue: string;
+    /** Controlled selected value (space-separated in multiple mode). Leave unset for uncontrolled usage. */
+    value: string | null;
+    size: ToggleGroupSize;
+    variant: ToggleGroupVariant;
+    /** Detach the items into individually rounded pills with 8px gaps, wrapping onto multiple lines. */
+    gap: boolean;
+    private internalValue;
+    private get isControlled();
+    private get selection();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(): void;
+    private get items();
+    private syncItems;
+    private onItemClick;
+    render(): TemplateResult<1>;
+}
+
+declare class AnduinToggleGroupItem extends LitElement {
+    static styles: CSSResult;
+    value: string;
+    startIcon: string;
+    disabled: boolean;
+    selected: boolean;
+    groupSize: ToggleGroupSize;
+    groupVariant: ToggleGroupVariant;
+    groupMode: ToggleGroupMode;
+    /** Called by the parent group when the user's action changes this item's selection. */
+    emitSelectionChange(selected: boolean): void;
+    updated(changed: Map<string, unknown>): void;
+    private onClick;
+    render(): TemplateResult<1>;
+}
+
 declare class AnduinTooltip extends LitElement {
     static styles: CSSResult;
     disabled: boolean;
@@ -689,6 +772,18 @@ export declare const MODAL_CLOSE_EVENT = "anduin-close";
 
 export declare const ModalClose: ReactWebComponent<AnduinModalClose, {}>;
 
+export declare const Navigation: ReactWebComponent<AnduinNavigation, {
+onChange: string;
+}>;
+
+export declare const NAVIGATION_CHANGE = "anduin-navigation:change";
+
+declare type NavigationAlignment = 'left' | 'center' | 'right';
+
+export declare const NavigationItem: ReactWebComponent<AnduinNavigationItem, {}>;
+
+declare type NavigationTheme = 'light' | 'dark';
+
 export declare const Popover: ReactWebComponent<AnduinPopover, {}>;
 
 export declare const PopoverClose: ReactWebComponent<AnduinPopoverClose, {}>;
@@ -781,6 +876,30 @@ declare type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-l
 
 declare type ToastVariant = "gray" | "primary" | "success" | "warning" | "danger";
 
+export declare const TOGGLE_GROUP_CHANGE = "anduin-toggle-group:change";
+
+export declare const TOGGLE_GROUP_ITEM_CHANGE = "anduin-toggle-group-item:change";
+
+export declare const TOGGLE_GROUP_ITEM_DESELECT = "anduin-toggle-group-item:deselect";
+
+export declare const TOGGLE_GROUP_ITEM_SELECT = "anduin-toggle-group-item:select";
+
+export declare const ToggleGroup: ReactWebComponent<AnduinToggleGroup, {
+onChange: string;
+}>;
+
+export declare const ToggleGroupItem: ReactWebComponent<AnduinToggleGroupItem, {
+onChange: string;
+onSelect: string;
+onDeselect: string;
+}>;
+
+declare type ToggleGroupMode = 'single' | 'multiple';
+
+declare type ToggleGroupSize = 'small' | 'medium' | 'large' | 'free';
+
+declare type ToggleGroupVariant = 'gray' | 'primary';
+
 export declare const Tooltip: ReactWebComponent<AnduinTooltip, {}>;
 
 export declare const TooltipContent: ReactWebComponent<AnduinTooltipContent, {}>;

package/dist/react.js

@@ -1,143 +1,171 @@
 import e from "react";
 import { createComponent as a } from "@lit/react";
-import { F as n, E as t, q as s, a as o, b as l, c as i, d, f as r, g as c, z as u, D as C, s as m, k as g, o as A, l as N, m as p, n as T, a8 as E, B as S, a9 as _, C as v, X as b, e as L, a3 as G, a2 as D, r as I, ai as R, O, x as h, y as w, t as F, u as f, a5 as M, a6 as k, v as H, w as P, ae as x, K as B, L as W, J as U, I as K, M as V, ah as X, N as j, R as q, T as y, S as z, U as J, ap as Q, V as Y, A as Z, p as $, P as ee, Q as ae, _ as ne, j as te, Y as se, Z as oe, h as le, i as ie, ad as de, H as re, ab as ce, ac as ue, aa as Ce, G as me } from "./anduin-suggestion-D3Sl4vcX.js";
-import { a4 as ma } from "./anduin-suggestion-D3Sl4vcX.js";
-const pe = a({ react: e, tagName: "anduin-spinner", elementClass: n }), Te = a({ react: e, tagName: "anduin-sparkle-spinner", elementClass: t }), Ee = a({ react: e, tagName: "anduin-icon", elementClass: s }), Se = a({ react: e, tagName: "anduin-badge", elementClass: o }), _e = a({ react: e, tagName: "anduin-badge-count", elementClass: l }), ve = a({ react: e, tagName: "anduin-button", elementClass: i }), be = a({ react: e, tagName: "anduin-callout", elementClass: d }), Le = a({ react: e, tagName: "anduin-divider", elementClass: r }), Ge = a({ react: e, tagName: "anduin-dot", elementClass: c }), De = a({ react: e, tagName: "anduin-progress", elementClass: u }), Ie = a({ react: e, tagName: "anduin-skeleton", elementClass: C }), Re = a({ react: e, tagName: "anduin-loading-state", elementClass: m }), Oe = a({ react: e, tagName: "anduin-field", elementClass: g }), he = a({ react: e, tagName: "anduin-field-label", elementClass: A }), we = a({ react: e, tagName: "anduin-field-description", elementClass: N }), Fe = a({ react: e, tagName: "anduin-field-error", elementClass: p }), fe = a({ react: e, tagName: "anduin-field-group", elementClass: T }), Me = a({
+import { H as n, G as t, q as s, a as o, b as l, c as i, d as r, f as d, g as u, C as c, F as m, s as C, k as g, o as A, l as N, m as T, n as E, ae as p, D as G, af as _, E as v, $ as S, e as I, a7 as L, a6 as O, r as R, ao as b, Q as D, z as h, B as M, t as w, u as F, a9 as H, aa as P, v as f, w as k, ak as U, M as W, N as x, L as B, K as V, O as K, an as X, P as j, ap as q, T as y, as as z, at as J, aq as Q, U as Y, V as Z, X as $, W as ee, Y as ae, aA as ne, Z as te, A as se, p as oe, R as le, S as ie, a2 as re, j as de, a0 as ue, a1 as ce, h as me, i as Ce, aj as ge, J as Ae, ah as Ne, ai as Te, ag as Ee, I as pe, ab as Ge, x as _e, y as ve } from "./anduin-navigation-DjjsY3gb.js";
+import { a8 as Oa } from "./anduin-navigation-DjjsY3gb.js";
+const Oe = a({ react: e, tagName: "anduin-spinner", elementClass: n }), Re = a({ react: e, tagName: "anduin-sparkle-spinner", elementClass: t }), be = a({ react: e, tagName: "anduin-icon", elementClass: s }), De = a({ react: e, tagName: "anduin-badge", elementClass: o }), he = a({ react: e, tagName: "anduin-badge-count", elementClass: l }), Me = a({ react: e, tagName: "anduin-button", elementClass: i }), we = a({ react: e, tagName: "anduin-callout", elementClass: r }), Fe = a({ react: e, tagName: "anduin-divider", elementClass: d }), He = a({ react: e, tagName: "anduin-dot", elementClass: u }), Pe = a({ react: e, tagName: "anduin-progress", elementClass: c }), fe = a({ react: e, tagName: "anduin-skeleton", elementClass: m }), ke = a({ react: e, tagName: "anduin-loading-state", elementClass: C }), Ue = a({ react: e, tagName: "anduin-field", elementClass: g }), We = a({ react: e, tagName: "anduin-field-label", elementClass: A }), xe = a({ react: e, tagName: "anduin-field-description", elementClass: N }), Be = a({ react: e, tagName: "anduin-field-error", elementClass: T }), Ve = a({ react: e, tagName: "anduin-field-group", elementClass: E }), Ke = a({
   react: e,
   tagName: "anduin-radio",
-  elementClass: S,
-  events: { onChange: E }
-}), ke = a({
+  elementClass: G,
+  events: { onChange: p }
+}), Xe = a({
   react: e,
   tagName: "anduin-radio-group",
   elementClass: v,
   events: { onChange: _ }
-}), He = a({
+}), je = a({
   react: e,
   tagName: "anduin-checkbox",
-  elementClass: L,
-  events: { onChange: b }
-}), Pe = a({
+  elementClass: I,
+  events: { onChange: S }
+}), qe = a({
   react: e,
   tagName: "anduin-input",
-  elementClass: I,
-  events: { onChange: D, onClear: G }
-}), xe = a({
+  elementClass: R,
+  events: { onChange: O, onClear: L }
+}), ye = a({
   react: e,
   tagName: "anduin-textarea",
-  elementClass: O,
-  events: { onChange: R }
-}), Be = a({ react: e, tagName: "anduin-popover", elementClass: h }), We = a({ react: e, tagName: "anduin-popover-close", elementClass: w }), Ue = a({ react: e, tagName: "anduin-menu", elementClass: F }), Ke = a({
+  elementClass: D,
+  events: { onChange: b }
+}), ze = a({ react: e, tagName: "anduin-popover", elementClass: h }), Je = a({ react: e, tagName: "anduin-popover-close", elementClass: M }), Qe = a({ react: e, tagName: "anduin-menu", elementClass: w }), Ye = a({
   react: e,
   tagName: "anduin-menu-item",
-  elementClass: f
-}), Ve = a({
+  elementClass: F
+}), Ze = a({
   react: e,
   tagName: "anduin-modal",
-  elementClass: H,
-  events: { onClose: k, onAfterClose: M }
-}), Xe = a({ react: e, tagName: "anduin-modal-close", elementClass: P }), je = a({
+  elementClass: f,
+  events: { onClose: P, onAfterClose: H }
+}), $e = a({ react: e, tagName: "anduin-modal-close", elementClass: k }), ea = a({
   react: e,
   tagName: "anduin-tabs",
-  elementClass: B,
-  events: { onChange: x }
-}), qe = a({ react: e, tagName: "anduin-tabs-list", elementClass: W }), ye = a({ react: e, tagName: "anduin-tab-trigger", elementClass: U }), ze = a({ react: e, tagName: "anduin-tab-content", elementClass: K }), Je = a({ react: e, tagName: "anduin-tag", elementClass: V }), Qe = a({
+  elementClass: W,
+  events: { onChange: U }
+}), aa = a({ react: e, tagName: "anduin-tabs-list", elementClass: x }), na = a({ react: e, tagName: "anduin-tab-trigger", elementClass: B }), ta = a({ react: e, tagName: "anduin-tab-content", elementClass: V }), sa = a({ react: e, tagName: "anduin-tag", elementClass: K }), oa = a({
   react: e,
   tagName: "anduin-tag-close",
   elementClass: j,
   events: { onClick: X }
-}), Ye = a({ react: e, tagName: "anduin-tooltip", elementClass: q }), Ze = a({ react: e, tagName: "anduin-tooltip-trigger", elementClass: y }), $e = a({ react: e, tagName: "anduin-tooltip-content", elementClass: z }), ea = a({ react: e, tagName: "anduin-well", elementClass: J }), aa = a({
+}), la = a({
   react: e,
-  tagName: "anduin-well-close",
+  tagName: "anduin-toggle-group",
+  elementClass: y,
+  events: { onChange: q }
+}), ia = a({
+  react: e,
+  tagName: "anduin-toggle-group-item",
   elementClass: Y,
-  events: { onClick: Q }
-}), na = a({ react: e, tagName: "anduin-avatar", elementClass: Z }), ta = a({ react: e, tagName: "anduin-file-icon", elementClass: $ }), sa = a({ react: e, tagName: "anduin-toast", elementClass: ee }), oa = a({ react: e, tagName: "anduin-toaster", elementClass: ae }), la = a({
+  events: { onChange: Q, onSelect: J, onDeselect: z }
+}), ra = a({ react: e, tagName: "anduin-tooltip", elementClass: Z }), da = a({ react: e, tagName: "anduin-tooltip-trigger", elementClass: $ }), ua = a({ react: e, tagName: "anduin-tooltip-content", elementClass: ee }), ca = a({ react: e, tagName: "anduin-well", elementClass: ae }), ma = a({
   react: e,
-  tagName: "anduin-dropdown",
+  tagName: "anduin-well-close",
   elementClass: te,
-  events: { onChange: ne }
-}), ia = a({
+  events: { onClick: ne }
+}), Ca = a({ react: e, tagName: "anduin-avatar", elementClass: se }), ga = a({ react: e, tagName: "anduin-file-icon", elementClass: oe }), Aa = a({ react: e, tagName: "anduin-toast", elementClass: le }), Na = a({ react: e, tagName: "anduin-toaster", elementClass: ie }), Ta = a({
+  react: e,
+  tagName: "anduin-dropdown",
+  elementClass: de,
+  events: { onChange: re }
+}), Ea = a({
   react: e,
   tagName: "anduin-drawer",
-  elementClass: le,
-  events: { onClose: oe, onAfterClose: se }
-}), da = a({ react: e, tagName: "anduin-drawer-close", elementClass: ie }), ra = a({
+  elementClass: me,
+  events: { onClose: ce, onAfterClose: ue }
+}), pa = a({ react: e, tagName: "anduin-drawer-close", elementClass: Ce }), Ga = a({
   react: e,
   tagName: "anduin-switcher",
-  elementClass: re,
-  events: { onChange: de }
-}), ca = a({
+  elementClass: Ae,
+  events: { onChange: ge }
+}), _a = a({
   react: e,
   tagName: "anduin-suggestion",
-  elementClass: me,
-  events: { onChange: Ce, onSelect: ue, onClear: ce }
+  elementClass: pe,
+  events: { onChange: Ee, onSelect: Te, onClear: Ne }
+}), va = a({
+  react: e,
+  tagName: "anduin-navigation",
+  elementClass: _e,
+  events: { onChange: Ge }
+}), Sa = a({
+  react: e,
+  tagName: "anduin-navigation-item",
+  elementClass: ve
 });
 export {
-  na as Avatar,
-  Se as Badge,
-  _e as BadgeCount,
-  ve as Button,
-  b as CHECKBOX_CHANGE,
-  be as Callout,
-  He as Checkbox,
-  se as DRAWER_AFTER_CLOSE_EVENT,
-  oe as DRAWER_CLOSE_EVENT,
-  ne as DROPDOWN_CHANGE,
-  Le as Divider,
-  Ge as Dot,
-  ia as Drawer,
-  da as DrawerClose,
-  la as Dropdown,
-  Oe as Field,
-  we as FieldDescription,
-  Fe as FieldError,
-  fe as FieldGroup,
-  he as FieldLabel,
-  ta as FileIcon,
-  D as INPUT_CHANGE,
-  G as INPUT_CLEAR,
-  Ee as Icon,
-  Pe as Input,
-  Re as LoadingState,
-  ma as MENU_ITEM_CLICK,
-  M as MODAL_AFTER_CLOSE_EVENT,
-  k as MODAL_CLOSE_EVENT,
-  Ue as Menu,
-  Ke as MenuItem,
-  Ve as Modal,
-  Xe as ModalClose,
-  Be as Popover,
-  We as PopoverClose,
-  De as Progress,
-  E as RADIO_CHANGE,
+  Ca as Avatar,
+  De as Badge,
+  he as BadgeCount,
+  Me as Button,
+  S as CHECKBOX_CHANGE,
+  we as Callout,
+  je as Checkbox,
+  ue as DRAWER_AFTER_CLOSE_EVENT,
+  ce as DRAWER_CLOSE_EVENT,
+  re as DROPDOWN_CHANGE,
+  Fe as Divider,
+  He as Dot,
+  Ea as Drawer,
+  pa as DrawerClose,
+  Ta as Dropdown,
+  Ue as Field,
+  xe as FieldDescription,
+  Be as FieldError,
+  Ve as FieldGroup,
+  We as FieldLabel,
+  ga as FileIcon,
+  O as INPUT_CHANGE,
+  L as INPUT_CLEAR,
+  be as Icon,
+  qe as Input,
+  ke as LoadingState,
+  Oa as MENU_ITEM_CLICK,
+  H as MODAL_AFTER_CLOSE_EVENT,
+  P as MODAL_CLOSE_EVENT,
+  Qe as Menu,
+  Ye as MenuItem,
+  Ze as Modal,
+  $e as ModalClose,
+  Ge as NAVIGATION_CHANGE,
+  va as Navigation,
+  Sa as NavigationItem,
+  ze as Popover,
+  Je as PopoverClose,
+  Pe as Progress,
+  p as RADIO_CHANGE,
   _ as RADIO_GROUP_CHANGE,
-  Me as Radio,
-  ke as RadioGroup,
-  Ce as SUGGESTION_CHANGE,
-  ce as SUGGESTION_CLEAR,
-  ue as SUGGESTION_SELECT,
-  de as SWITCHER_CHANGE,
-  Ie as Skeleton,
-  Te as SparkleSpinner,
-  pe as Spinner,
-  ca as Suggestion,
-  ra as Switcher,
-  x as TAB_CHANGE,
+  Ke as Radio,
+  Xe as RadioGroup,
+  Ee as SUGGESTION_CHANGE,
+  Ne as SUGGESTION_CLEAR,
+  Te as SUGGESTION_SELECT,
+  ge as SWITCHER_CHANGE,
+  fe as Skeleton,
+  Re as SparkleSpinner,
+  Oe as Spinner,
+  _a as Suggestion,
+  Ga as Switcher,
+  U as TAB_CHANGE,
   X as TAG_CLOSE_CLICK,
-  R as TEXTAREA_CHANGE,
-  ze as TabContent,
-  ye as TabTrigger,
-  je as Tabs,
-  qe as TabsList,
-  Je as Tag,
-  Qe as TagClose,
-  xe as Textarea,
-  sa as Toast,
-  oa as Toaster,
-  Ye as Tooltip,
-  $e as TooltipContent,
-  Ze as TooltipTrigger,
-  Q as WELL_CLOSE_CLICK,
-  ea as Well,
-  aa as WellClose
+  b as TEXTAREA_CHANGE,
+  q as TOGGLE_GROUP_CHANGE,
+  Q as TOGGLE_GROUP_ITEM_CHANGE,
+  z as TOGGLE_GROUP_ITEM_DESELECT,
+  J as TOGGLE_GROUP_ITEM_SELECT,
+  ta as TabContent,
+  na as TabTrigger,
+  ea as Tabs,
+  aa as TabsList,
+  sa as Tag,
+  oa as TagClose,
+  ye as Textarea,
+  Aa as Toast,
+  Na as Toaster,
+  la as ToggleGroup,
+  ia as ToggleGroupItem,
+  ra as Tooltip,
+  ua as TooltipContent,
+  da as TooltipTrigger,
+  ne as WELL_CLOSE_CLICK,
+  ca as Well,
+  ma as WellClose
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duyluonganduin/acl-web-components",
-  "version": "0.0.26",
+  "version": "0.0.28",
   "type": "module",
   "main": "./dist/acl-web-components.cjs",
   "module": "./dist/acl-web-components.js",