foldkit 0.33.6 → 0.34.0

package/dist/ui/combobox/shared.js

@@ -74,8 +74,20 @@ export const MovedPointerOverItem = m('MovedPointerOverItem', {
 export const RequestedItemClick = m('RequestedItemClick', {
     index: S.Number,
 });
-/** Placeholder message used when no action is needed. */
-export const NoOp = m('NoOp');
+/** Sent when the scroll lock command completes. */
+export const CompletedScrollLock = m('CompletedScrollLock');
+/** Sent when the scroll unlock command completes. */
+export const CompletedScrollUnlock = m('CompletedScrollUnlock');
+/** Sent when the inert-others command completes. */
+export const CompletedInertSetup = m('CompletedInertSetup');
+/** Sent when the restore-inert command completes. */
+export const CompletedInertTeardown = m('CompletedInertTeardown');
+/** Sent when the focus-input command completes. */
+export const CompletedInputFocus = m('CompletedInputFocus');
+/** Sent when the scroll-into-view command completes after keyboard activation. */
+export const CompletedScrollIntoView = m('CompletedScrollIntoView');
+/** Sent when the programmatic item click command completes. */
+export const CompletedItemClick = m('CompletedItemClick');
 /** Sent internally when a double-rAF completes, advancing the transition to its animating phase. */
 export const AdvancedTransitionFrame = m('AdvancedTransitionFrame');
 /** Sent internally when all CSS transitions on the items container have completed. */
@@ -89,7 +101,7 @@ export const UpdatedInputValue = m('UpdatedInputValue', {
 /** Sent when the optional toggle button is clicked. */
 export const PressedToggleButton = m('PressedToggleButton');
 /** Union of all messages the combobox component can produce. */
-export const Message = S.Union(Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, NoOp, AdvancedTransitionFrame, EndedTransition, DetectedInputMovement, UpdatedInputValue, PressedToggleButton);
+export const Message = S.Union(Opened, Closed, ClosedByTab, ActivatedItem, DeactivatedItem, SelectedItem, MovedPointerOverItem, RequestedItemClick, CompletedScrollLock, CompletedScrollUnlock, CompletedInertSetup, CompletedInertTeardown, CompletedInputFocus, CompletedScrollIntoView, CompletedItemClick, AdvancedTransitionFrame, EndedTransition, DetectedInputMovement, UpdatedInputValue, PressedToggleButton);
 // SELECTORS
 export const inputSelector = (id) => `#${id}-input`;
 export const inputWrapperSelector = (id) => `#${id}-input-wrapper`;
@@ -111,14 +123,14 @@ export const makeUpdate = (handlers) => {
     const withUpdateReturn = M.withReturnType();
     return (model, message) => {
         const maybeNextFrame = OptionExt.when(model.isAnimated, Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame())));
-        const maybeLockScroll = OptionExt.when(model.isModal, Task.lockScroll.pipe(Effect.as(NoOp())));
-        const maybeUnlockScroll = OptionExt.when(model.isModal, Task.unlockScroll.pipe(Effect.as(NoOp())));
+        const maybeLockScroll = OptionExt.when(model.isModal, Task.lockScroll.pipe(Effect.as(CompletedScrollLock())));
+        const maybeUnlockScroll = OptionExt.when(model.isModal, Task.unlockScroll.pipe(Effect.as(CompletedScrollUnlock())));
         const maybeInertOthers = OptionExt.when(model.isModal, Task.inertOthers(model.id, [
             inputWrapperSelector(model.id),
             itemsSelector(model.id),
-        ]).pipe(Effect.as(NoOp())));
-        const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(NoOp())));
-        const focusInput = Task.focus(inputSelector(model.id)).pipe(Effect.ignore, Effect.as(NoOp()));
+        ]).pipe(Effect.as(CompletedInertSetup())));
+        const maybeRestoreInert = OptionExt.when(model.isModal, Task.restoreInert(model.id).pipe(Effect.as(CompletedInertTeardown())));
+        const focusInput = Task.focus(inputSelector(model.id)).pipe(Effect.ignore, Effect.as(CompletedInputFocus()));
         return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
             Opened: ({ maybeActiveItemIndex }) => {
                 const nextModel = constrainedEvo(model, {
@@ -165,7 +177,7 @@ export const makeUpdate = (handlers) => {
                     nextModel,
                     activationTrigger === 'Keyboard'
                         ? [
-                            Task.scrollIntoView(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
+                            Task.scrollIntoView(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(CompletedScrollIntoView())),
                         ]
                         : [],
                 ];
@@ -201,7 +213,7 @@ export const makeUpdate = (handlers) => {
             RequestedItemClick: ({ index }) => [
                 model,
                 [
-                    Task.clickElement(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(NoOp())),
+                    Task.clickElement(itemSelector(model.id, index)).pipe(Effect.ignore, Effect.as(CompletedItemClick())),
                 ],
             ],
             UpdatedInputValue: ({ value }) => {
@@ -282,14 +294,20 @@ export const makeUpdate = (handlers) => {
                 }),
                 [],
             ]), M.orElse(() => [model, []])),
-            NoOp: () => [model, []],
+            CompletedScrollLock: () => [model, []],
+            CompletedScrollUnlock: () => [model, []],
+            CompletedInertSetup: () => [model, []],
+            CompletedInertTeardown: () => [model, []],
+            CompletedInputFocus: () => [model, []],
+            CompletedScrollIntoView: () => [model, []],
+            CompletedItemClick: () => [model, []],
         }));
     };
 };
 /** Creates a combobox view function from variant-specific behavior. Shared rendering logic (input, items, transitions, keyboard navigation) is handled internally; only selection display varies by variant. */
 export const makeView = (behavior) => (config) => {
-    const { div, input, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaInvalid, AriaLabelledBy, AriaMultiSelectable, AriaSelected, Attribute, Autocomplete, Class, DataAttribute, Id, Name, OnBlur, OnClick, OnDestroy, OnFocus, OnInput, OnInsert, OnKeyDownPreventDefault, OnPointerLeave, OnPointerMove, Role, Style, Tabindex, Type, Value, keyed, } = html();
-    const { model: { id, isOpen, immediate, transitionState, maybeActiveItemIndex }, toMessage, items, itemToConfig, itemToValue, itemToDisplayText, isItemDisabled, inputClassName, inputPlaceholder, itemsClassName, itemsScrollClassName, backdropClassName, className, inputWrapperClassName, buttonContent, buttonClassName, formName, isDisabled, isInvalid, openOnFocus, itemGroupKey, groupToHeading, groupClassName, separatorClassName, anchor, } = config;
+    const { div, input, AriaActiveDescendant, AriaControls, AriaDisabled, AriaExpanded, AriaInvalid, AriaLabelledBy, AriaMultiSelectable, AriaSelected, Attribute, Autocomplete, Class, DataAttribute, Id, Name, OnBlur, OnClick, OnDestroy, OnFocus, OnInput, OnInsert, OnKeyDownPreventDefault, OnPointerLeave, OnPointerMove, Placeholder, Role, Style, Tabindex, Type, Value, keyed, } = html();
+    const { model: { id, isOpen, immediate, transitionState, maybeActiveItemIndex }, toMessage, items, itemToConfig, itemToValue, itemToDisplayText, isItemDisabled, inputClassName, inputAttributes = [], inputPlaceholder, inputWrapperClassName, inputWrapperAttributes = [], itemsClassName, itemsAttributes = [], itemsScrollClassName, itemsScrollAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], buttonContent, buttonClassName, buttonAttributes = [], formName, isDisabled, isInvalid, openOnFocus, itemGroupKey, groupToHeading, groupClassName, groupAttributes = [], separatorClassName, separatorAttributes = [], anchor, } = config;
     const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
     const isVisible = isOpen || isLeaving;
     const transitionAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
@@ -373,10 +391,9 @@ export const makeView = (behavior) => (config) => {
         onNone: () => [],
         onSome: index => [AriaActiveDescendant(itemId(id, index))],
     });
-    const inputAttributes = [
+    const resolvedInputAttributes = [
         Id(`${id}-input`),
         Role('combobox'),
-        Class(inputClassName),
         AriaExpanded(isVisible),
         AriaControls(`${id}-items`),
         Attribute('aria-autocomplete', 'list'),
@@ -384,7 +401,7 @@ export const makeView = (behavior) => (config) => {
         Autocomplete('off'),
         Value(config.model.inputValue),
         ...maybeActiveDescendant,
-        ...(inputPlaceholder ? [Attribute('placeholder', inputPlaceholder)] : []),
+        ...(inputPlaceholder ? [Placeholder(inputPlaceholder)] : []),
         ...(isDisabled
             ? [AriaDisabled(true), DataAttribute('disabled', '')]
             : [
@@ -410,6 +427,8 @@ export const makeView = (behavior) => (config) => {
                 }),
             ]
             : []),
+        ...(inputClassName ? [Class(inputClassName)] : []),
+        ...inputAttributes,
     ];
     const hooks = anchor
         ? anchorHooks({
@@ -434,9 +453,10 @@ export const makeView = (behavior) => (config) => {
         ...(behavior.ariaMultiSelectable ? [AriaMultiSelectable(true)] : []),
         AriaLabelledBy(`${id}-input`),
         Tabindex(-1),
-        Class(itemsClassName),
         ...anchorAttributes,
         ...transitionAttributes,
+        ...(itemsClassName ? [Class(itemsClassName)] : []),
+        ...itemsAttributes,
     ];
     const comboboxItems = Array.map(items, (item, index) => {
         const isActiveItem = Option.exists(maybeActiveItemIndex, activeIndex => activeIndex === index);
@@ -452,7 +472,6 @@ export const makeView = (behavior) => (config) => {
             Id(itemId(id, index)),
             Role('option'),
             AriaSelected(isSelectedItem),
-            Class(itemConfig.className),
             ...(isActiveItem ? [DataAttribute('active', '')] : []),
             ...(isSelectedItem ? [DataAttribute('selected', '')] : []),
             ...(isDisabledItem
@@ -472,6 +491,7 @@ export const makeView = (behavior) => (config) => {
                     OnPointerLeave(pointerType => OptionExt.when(pointerType !== 'touch', toMessage(DeactivatedItem()))),
                 ]
                 : []),
+            ...(itemConfig.className ? [Class(itemConfig.className)] : []),
         ], [itemConfig.content]);
     });
     const renderGroupedItems = () => {
@@ -488,7 +508,11 @@ export const makeView = (behavior) => (config) => {
             const headingElement = Option.match(maybeHeading, {
                 onNone: () => [],
                 onSome: heading => [
-                    keyed('div')(headingId, [Id(headingId), Role('presentation'), Class(heading.className)], [heading.content]),
+                    keyed('div')(headingId, [
+                        Id(headingId),
+                        Role('presentation'),
+                        ...(heading.className ? [Class(heading.className)] : []),
+                    ], [heading.content]),
                 ],
             });
             const groupContent = [...headingElement, ...segment.items];
@@ -496,37 +520,51 @@ export const makeView = (behavior) => (config) => {
                 Role('group'),
                 ...(Option.isSome(maybeHeading) ? [AriaLabelledBy(headingId)] : []),
                 ...(groupClassName ? [Class(groupClassName)] : []),
+                ...groupAttributes,
             ], groupContent);
-            const separator = segmentIndex > 0 && separatorClassName
+            const separator = segmentIndex > 0 &&
+                (separatorClassName ||
+                    Array.isNonEmptyReadonlyArray(separatorAttributes))
                 ? [
-                    keyed('div')(`${id}-separator-${segmentIndex}`, [Role('separator'), Class(separatorClassName)], []),
+                    keyed('div')(`${id}-separator-${segmentIndex}`, [
+                        Role('separator'),
+                        ...(separatorClassName ? [Class(separatorClassName)] : []),
+                        ...separatorAttributes,
+                    ], []),
                 ]
                 : [];
             return [...separator, groupElement];
         });
     };
     const backdrop = keyed('div')(`${id}-backdrop`, [
-        Class(backdropClassName),
         ...(isLeaving ? [] : [OnClick(toMessage(Closed()))]),
+        ...(backdropClassName ? [Class(backdropClassName)] : []),
+        ...backdropAttributes,
     ], []);
     const renderedItems = renderGroupedItems();
-    const scrollableItems = itemsScrollClassName
-        ? [div([Class(itemsScrollClassName)], renderedItems)]
+    const scrollableItems = itemsScrollClassName ||
+        Array.isNonEmptyReadonlyArray(itemsScrollAttributes)
+        ? [
+            div([
+                ...(itemsScrollClassName ? [Class(itemsScrollClassName)] : []),
+                ...itemsScrollAttributes,
+            ], renderedItems),
+        ]
         : renderedItems;
     const visibleContent = [
         backdrop,
         keyed('div')(`${id}-items-container`, itemsContainerAttributes, scrollableItems),
     ];
-    const inputWrapperAttributes = [
+    const resolvedInputWrapperAttributes = [
         Id(`${id}-input-wrapper`),
         ...(inputWrapperClassName ? [Class(inputWrapperClassName)] : []),
+        ...inputWrapperAttributes,
     ];
-    const toggleButton = buttonContent && buttonClassName
+    const toggleButton = buttonContent
         ? [
             keyed('button')(`${id}-button`, [
                 Id(`${id}-button`),
                 Type('button'),
-                Class(buttonClassName),
                 Tabindex(-1),
                 AriaControls(`${id}-items`),
                 AriaExpanded(isVisible),
@@ -535,6 +573,8 @@ export const makeView = (behavior) => (config) => {
                     ? [AriaDisabled(true), DataAttribute('disabled', '')]
                     : [OnClick(toMessage(PressedToggleButton()))]),
                 OnInsert(preventBlurOnPointerDown),
+                ...(buttonClassName ? [Class(buttonClassName)] : []),
+                ...buttonAttributes,
             ], [buttonContent]),
         ]
         : [];
@@ -550,12 +590,16 @@ export const makeView = (behavior) => (config) => {
         : [];
     const wrapperAttributes = [
         ...(className ? [Class(className)] : []),
+        ...attributes,
         ...(isVisible ? [DataAttribute('open', '')] : []),
         ...(isDisabled ? [DataAttribute('disabled', '')] : []),
         ...(isInvalid ? [DataAttribute('invalid', '')] : []),
     ];
     return div(wrapperAttributes, [
-        div(inputWrapperAttributes, [input(inputAttributes), ...toggleButton]),
+        div(resolvedInputWrapperAttributes, [
+            input(resolvedInputAttributes),
+            ...toggleButton,
+        ]),
         ...(isVisible && Array.isNonEmptyReadonlyArray(items)
             ? visibleContent
             : []),

package/dist/ui/combobox/single.d.ts

@@ -1,5 +1,5 @@
 import { Option, Schema as S } from 'effect';
-import type { Html } from '../../html';
+import { type Html } from '../../html';
 import { type BaseInitConfig, type BaseViewConfig } from './shared';
 /** Schema for the single-select combobox component's state, tracking open/closed status, active item, input value, selected item, and display text. */
 export declare const Model: S.extend<S.Struct<{
@@ -70,8 +70,6 @@ export declare const update: (model: {
     readonly maybeSelectedItem: Option.Option<string>;
     readonly maybeSelectedDisplayText: Option.Option<string>;
 }, readonly import("../../command").Command<{
-    readonly _tag: "NoOp";
-} | {
     readonly _tag: "Opened";
     readonly maybeActiveItemIndex: Option.Option<number>;
 } | {
@@ -100,6 +98,20 @@ export declare const update: (model: {
 } | {
     readonly _tag: "RequestedItemClick";
     readonly index: number;
+} | {
+    readonly _tag: "CompletedScrollLock";
+} | {
+    readonly _tag: "CompletedScrollUnlock";
+} | {
+    readonly _tag: "CompletedInertSetup";
+} | {
+    readonly _tag: "CompletedInertTeardown";
+} | {
+    readonly _tag: "CompletedInputFocus";
+} | {
+    readonly _tag: "CompletedScrollIntoView";
+} | {
+    readonly _tag: "CompletedItemClick";
 } | {
     readonly _tag: "AdvancedTransitionFrame";
 } | {
@@ -136,28 +148,35 @@ export declare const view: <Message, Item extends string>(config: Readonly<{
         readonly maybeSelectedItem: Option.Option<string>;
         readonly maybeSelectedDisplayText: Option.Option<string>;
     };
-    toMessage: (message: import("./shared").Opened | import("./shared").Closed | import("./shared").ClosedByTab | import("./shared").ActivatedItem | import("./shared").DeactivatedItem | import("./shared").SelectedItem | import("./shared").MovedPointerOverItem | import("./shared").RequestedItemClick | import("./shared").UpdatedInputValue | import("./shared").PressedToggleButton | import("./shared").NoOp) => Message;
+    toMessage: (message: import("./shared").Opened | import("./shared").Closed | import("./shared").ClosedByTab | import("./shared").ActivatedItem | import("./shared").DeactivatedItem | import("./shared").SelectedItem | import("./shared").MovedPointerOverItem | import("./shared").RequestedItemClick | import("./shared").UpdatedInputValue | import("./shared").PressedToggleButton | import("./shared").CompletedScrollLock | import("./shared").CompletedScrollUnlock | import("./shared").CompletedInertSetup | import("./shared").CompletedInertTeardown | import("./shared").CompletedInputFocus | import("./shared").CompletedScrollIntoView | import("./shared").CompletedItemClick) => Message;
     items: readonly Item[];
     itemToConfig: (item: Item, context: Readonly<{
         isActive: boolean;
         isDisabled: boolean;
         isSelected: boolean;
     }>) => Readonly<{
-        className: string;
+        className?: string;
         content: Html;
     }>;
     itemToValue: (item: Item, index: number) => string;
     itemToDisplayText: (item: Item, index: number) => string;
     isItemDisabled?: (item: Item, index: number) => boolean;
-    inputClassName: string;
+    inputClassName?: string;
+    inputAttributes?: readonly import("../../html").Attribute<Message>[];
     inputPlaceholder?: string;
-    itemsClassName: string;
+    inputWrapperClassName?: string;
+    inputWrapperAttributes?: readonly import("../../html").Attribute<Message>[];
+    itemsClassName?: string;
+    itemsAttributes?: readonly import("../../html").Attribute<Message>[];
     itemsScrollClassName?: string;
-    backdropClassName: string;
+    itemsScrollAttributes?: readonly import("../../html").Attribute<Message>[];
+    backdropClassName?: string;
+    backdropAttributes?: readonly import("../../html").Attribute<Message>[];
     className?: string;
-    inputWrapperClassName?: string;
+    attributes?: readonly import("../../html").Attribute<Message>[];
     buttonContent?: Html;
     buttonClassName?: string;
+    buttonAttributes?: readonly import("../../html").Attribute<Message>[];
     formName?: string;
     isDisabled?: boolean;
     isInvalid?: boolean;
@@ -165,10 +184,12 @@ export declare const view: <Message, Item extends string>(config: Readonly<{
     itemGroupKey?: (item: Item, index: number) => string;
     groupToHeading?: (groupKey: string) => Readonly<{
         content: Html;
-        className: string;
+        className?: string;
     }> | undefined;
     groupClassName?: string;
+    groupAttributes?: readonly import("../../html").Attribute<Message>[];
     separatorClassName?: string;
+    separatorAttributes?: readonly import("../../html").Attribute<Message>[];
     anchor?: Readonly<{
         placement?: import("@floating-ui/dom").Placement;
         gap?: number;

package/dist/ui/combobox/single.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"single.d.ts","sourceRoot":"","sources":["../../../src/ui/combobox/single.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,IAAI,CAAC,EAAQ,MAAM,QAAQ,CAAA;AAEzD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAGtC,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAKpB,MAAM,UAAU,CAAA;AAIjB,uJAAuJ;AACvJ,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;GAOjB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,8RAA8R;AAC9R,MAAM,MAAM,UAAU,GAAG,cAAc,GACrC,QAAQ,CAAC;IACP,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAC,CAAA;AAEJ,4IAA4I;AAC5I,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAMxC,CAAA;AAIF,uIAAuI;AACvI,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDjB,CAAA;AAIF,wEAAwE;AACxE,MAAM,MAAM,UAAU,CAAC,OAAO,EAAE,IAAI,SAAS,MAAM,IAAI,cAAc,CACnE,OAAO,EACP,IAAI,EACJ,KAAK,CACN,CAAA;AAED,0IAA0I;AAC1I,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAOf,CAAA;AAEF;6EAC6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,IAAI,SAAS,MAAM,EAC/C,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,KACnE,CAAC,CACF,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,WAAW,CAAC,KACzD,IAAI,CAgBR,CAAA"}
+{"version":3,"file":"single.d.ts","sourceRoot":"","sources":["../../../src/ui/combobox/single.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,MAAM,EAAE,MAAM,IAAI,CAAC,EAAQ,MAAM,QAAQ,CAAA;AAEzD,OAAO,EAAE,KAAK,IAAI,EAAc,MAAM,YAAY,CAAA;AAElD,OAAO,EACL,KAAK,cAAc,EAEnB,KAAK,cAAc,EAKpB,MAAM,UAAU,CAAA;AAIjB,uJAAuJ;AACvJ,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;GAOjB,CAAA;AAED,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,8RAA8R;AAC9R,MAAM,MAAM,UAAU,GAAG,cAAc,GACrC,QAAQ,CAAC;IACP,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mBAAmB,CAAC,EAAE,MAAM,CAAA;CAC7B,CAAC,CAAA;AAEJ,4IAA4I;AAC5I,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAMxC,CAAA;AAIF,uIAAuI;AACvI,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDjB,CAAA;AAIF,wEAAwE;AACxE,MAAM,MAAM,UAAU,CAAC,OAAO,EAAE,IAAI,SAAS,MAAM,IAAI,cAAc,CACnE,OAAO,EACP,IAAI,EACJ,KAAK,CACN,CAAA;AAED,0IAA0I;AAC1I,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WAOf,CAAA;AAEF;6EAC6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,IAAI,SAAS,MAAM,EAC/C,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,IAAI,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,KACnE,CAAC,CACF,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,cAAc,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,WAAW,CAAC,KACzD,IAAI,CAgBR,CAAA"}

package/dist/ui/combobox/single.js

@@ -1,5 +1,5 @@
 import { Array, Option, Schema as S, pipe } from 'effect';
-import { createLazy } from '../../html/lazy';
+import { createLazy } from '../../html';
 import { evo } from '../../struct';
 import { BaseModel, baseInit, closedBaseModel, makeUpdate, makeView, } from './shared';
 // MODEL

package/dist/ui/dialog/index.d.ts

@@ -1,6 +1,6 @@
 import { Schema as S } from 'effect';
 import type { Command } from '../../command';
-import type { Html } from '../../html';
+import { type Attribute, type Html } from '../../html';
 /** Schema for the dialog component's state, tracking its unique ID, open/closed status, animation support, and transition phase. */
 export declare const Model: S.Struct<{
     id: typeof S.String;
@@ -13,17 +13,20 @@ export type Model = typeof Model.Type;
 export declare const Opened: import("../../schema").CallableTaggedStruct<"Opened", {}>;
 /** Sent when the dialog should close (Escape key, backdrop click, or programmatic). Triggers the closeModal command. */
 export declare const Closed: import("../../schema").CallableTaggedStruct<"Closed", {}>;
-/** Placeholder message used when no action is needed, such as after a showModal or closeModal command completes. */
-export declare const NoOp: import("../../schema").CallableTaggedStruct<"NoOp", {}>;
+/** Sent when the show-dialog command completes (scroll lock + showModal). */
+export declare const CompletedDialogShow: import("../../schema").CallableTaggedStruct<"CompletedDialogShow", {}>;
+/** Sent when the close-dialog command completes (closeModal + scroll unlock). */
+export declare const CompletedDialogClose: import("../../schema").CallableTaggedStruct<"CompletedDialogClose", {}>;
 /** Sent internally when a double-rAF completes, advancing the transition to its animating phase. */
 export declare const AdvancedTransitionFrame: import("../../schema").CallableTaggedStruct<"AdvancedTransitionFrame", {}>;
 /** Sent internally when all CSS transitions on the dialog panel have completed. */
 export declare const EndedTransition: import("../../schema").CallableTaggedStruct<"EndedTransition", {}>;
 /** Union of all messages the dialog component can produce. */
-export declare const Message: S.Union<[import("../../schema").CallableTaggedStruct<"Opened", {}>, import("../../schema").CallableTaggedStruct<"Closed", {}>, import("../../schema").CallableTaggedStruct<"NoOp", {}>, import("../../schema").CallableTaggedStruct<"AdvancedTransitionFrame", {}>, import("../../schema").CallableTaggedStruct<"EndedTransition", {}>]>;
+export declare const Message: S.Union<[import("../../schema").CallableTaggedStruct<"Opened", {}>, import("../../schema").CallableTaggedStruct<"Closed", {}>, import("../../schema").CallableTaggedStruct<"CompletedDialogShow", {}>, import("../../schema").CallableTaggedStruct<"CompletedDialogClose", {}>, import("../../schema").CallableTaggedStruct<"AdvancedTransitionFrame", {}>, import("../../schema").CallableTaggedStruct<"EndedTransition", {}>]>;
 export type Opened = typeof Opened.Type;
 export type Closed = typeof Closed.Type;
-export type NoOp = typeof NoOp.Type;
+export type CompletedDialogShow = typeof CompletedDialogShow.Type;
+export type CompletedDialogClose = typeof CompletedDialogClose.Type;
 export type Message = typeof Message.Type;
 /** Configuration for creating a dialog model with `init`. `isAnimated` enables CSS transition coordination (default `false`). */
 export type InitConfig = Readonly<{
@@ -43,11 +46,14 @@ export declare const descriptionId: (model: Model) => string;
 /** Configuration for rendering a dialog with `view`. */
 export type ViewConfig<Message> = Readonly<{
     model: Model;
-    toMessage: (message: Closed | NoOp) => Message;
+    toMessage: (message: Closed | CompletedDialogShow | CompletedDialogClose) => Message;
     panelContent: Html;
-    panelClassName: string;
-    backdropClassName: string;
+    panelClassName?: string;
+    panelAttributes?: ReadonlyArray<Attribute<Message>>;
+    backdropClassName?: string;
+    backdropAttributes?: ReadonlyArray<Attribute<Message>>;
     className?: string;
+    attributes?: ReadonlyArray<Attribute<Message>>;
 }>;
 /** Renders a headless dialog component backed by the native `<dialog>` element with `showModal()`. */
 export declare const view: <Message>(config: ViewConfig<Message>) => Html;

package/dist/ui/dialog/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqC,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEvE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAG5C,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAStC,oIAAoI;AACpI,eAAO,MAAM,KAAK;;;;;EAKhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,wEAAwE;AACxE,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,wHAAwH;AACxH,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,oHAAoH;AACpH,eAAO,MAAM,IAAI,yDAAY,CAAA;AAC7B,oGAAoG;AACpG,eAAO,MAAM,uBAAuB,4EAA+B,CAAA;AACnE,mFAAmF;AACnF,eAAO,MAAM,eAAe,oEAAuB,CAAA;AAEnD,8DAA8D;AAC9D,eAAO,MAAM,OAAO,0UAMnB,CAAA;AAED,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAA;AAEnC,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,iIAAiI;AACjI,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAC,CAAA;AAEF,0FAA0F;AAC1F,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAKxC,CAAA;AAOF,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA;AAG5D,0EAA0E;AAC1E,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,EAAE,SAAS,OAAO,KAAG,YAwGvD,CAAA;AAID,iGAAiG;AACjG,eAAO,MAAM,OAAO,GAAI,OAAO,KAAK,KAAG,MAA6B,CAAA;AAEpE,wGAAwG;AACxG,eAAO,MAAM,aAAa,GAAI,OAAO,KAAK,KAAG,MAAmC,CAAA;AAEhF,wDAAwD;AACxD,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI,KAAK,OAAO,CAAA;IAC9C,YAAY,EAAE,IAAI,CAAA;IAClB,cAAc,EAAE,MAAM,CAAA;IACtB,iBAAiB,EAAE,MAAM,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,sGAAsG;AACtG,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IAqF3D,CAAA;AAED;6EAC6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,EAC1B,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,KAC7D,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,CAgBtE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/index.ts"],"names":[],"mappings":"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"}

package/dist/ui/dialog/index.js

@@ -1,7 +1,6 @@
 import { Array, Effect, Match as M, Option, Schema as S } from 'effect';
 import { OptionExt } from '../../effectExtensions';
-import { html } from '../../html';
-import { createLazy } from '../../html/lazy';
+import { createLazy, html } from '../../html';
 import { m } from '../../message';
 import { evo } from '../../struct';
 import * as Task from '../../task';
@@ -19,14 +18,16 @@ export const Model = S.Struct({
 export const Opened = m('Opened');
 /** Sent when the dialog should close (Escape key, backdrop click, or programmatic). Triggers the closeModal command. */
 export const Closed = m('Closed');
-/** Placeholder message used when no action is needed, such as after a showModal or closeModal command completes. */
-export const NoOp = m('NoOp');
+/** Sent when the show-dialog command completes (scroll lock + showModal). */
+export const CompletedDialogShow = m('CompletedDialogShow');
+/** Sent when the close-dialog command completes (closeModal + scroll unlock). */
+export const CompletedDialogClose = m('CompletedDialogClose');
 /** Sent internally when a double-rAF completes, advancing the transition to its animating phase. */
 export const AdvancedTransitionFrame = m('AdvancedTransitionFrame');
 /** Sent internally when all CSS transitions on the dialog panel have completed. */
 export const EndedTransition = m('EndedTransition');
 /** Union of all messages the dialog component can produce. */
-export const Message = S.Union(Opened, Closed, NoOp, AdvancedTransitionFrame, EndedTransition);
+export const Message = S.Union(Opened, Closed, CompletedDialogShow, CompletedDialogClose, AdvancedTransitionFrame, EndedTransition);
 /** Creates an initial dialog model from a config. Defaults to closed and non-animated. */
 export const init = (config) => ({
     id: config.id,
@@ -43,7 +44,7 @@ export const update = (model, message) => {
     const maybeNextFrame = OptionExt.when(model.isAnimated, Task.nextFrame.pipe(Effect.as(AdvancedTransitionFrame())));
     return M.value(message).pipe(withUpdateReturn, M.tagsExhaustive({
         Opened: () => {
-            const maybeShow = Option.liftPredicate(Task.lockScroll.pipe(Effect.andThen(() => Task.showModal(dialogSelector(model.id))), Effect.ignore, Effect.as(NoOp())), () => !model.isOpen);
+            const maybeShow = Option.liftPredicate(Task.lockScroll.pipe(Effect.andThen(() => Task.showModal(dialogSelector(model.id))), Effect.ignore, Effect.as(CompletedDialogShow())), () => !model.isOpen);
             return [
                 evo(model, {
                     isOpen: () => true,
@@ -67,7 +68,7 @@ export const update = (model, message) => {
                     Option.toArray(maybeNextFrame),
                 ];
             }
-            const maybeClose = Option.liftPredicate(Task.closeModal(dialogSelector(model.id)).pipe(Effect.andThen(() => Task.unlockScroll), Effect.ignore, Effect.as(NoOp())), () => model.isOpen);
+            const maybeClose = Option.liftPredicate(Task.closeModal(dialogSelector(model.id)).pipe(Effect.andThen(() => Task.unlockScroll), Effect.ignore, Effect.as(CompletedDialogClose())), () => model.isOpen);
             return [evo(model, { isOpen: () => false }), Option.toArray(maybeClose)];
         },
         AdvancedTransitionFrame: () => M.value(model.transitionState).pipe(withUpdateReturn, M.when('EnterStart', () => [
@@ -87,10 +88,11 @@ export const update = (model, message) => {
         ]), M.when('LeaveAnimating', () => [
             evo(model, { transitionState: () => 'Idle' }),
             [
-                Task.closeModal(dialogSelector(model.id)).pipe(Effect.andThen(() => Task.unlockScroll), Effect.ignore, Effect.as(NoOp())),
+                Task.closeModal(dialogSelector(model.id)).pipe(Effect.andThen(() => Task.unlockScroll), Effect.ignore, Effect.as(CompletedDialogClose())),
             ],
         ]), M.orElse(() => [model, []])),
-        NoOp: () => [model, []],
+        CompletedDialogShow: () => [model, []],
+        CompletedDialogClose: () => [model, []],
     }));
 };
 // VIEW
@@ -101,7 +103,7 @@ export const descriptionId = (model) => `${model.id}-description`;
 /** Renders a headless dialog component backed by the native `<dialog>` element with `showModal()`. */
 export const view = (config) => {
     const { AriaDescribedBy, AriaLabelledBy, Class, DataAttribute, Id, OnCancel, OnClick, Style, keyed, } = html();
-    const { model: { id, isOpen, transitionState }, toMessage, panelContent, panelClassName, backdropClassName, className, } = config;
+    const { model: { id, isOpen, transitionState }, toMessage, panelContent, panelClassName, panelAttributes = [], backdropClassName, backdropAttributes = [], className, attributes = [], } = config;
     const isLeaving = transitionState === 'LeaveStart' || transitionState === 'LeaveAnimating';
     const isVisible = isOpen || isLeaving;
     const transitionAttributes = M.value(transitionState).pipe(M.when('EnterStart', () => [
@@ -134,13 +136,20 @@ export const view = (config) => {
         }),
         ...(isVisible ? [DataAttribute('open', '')] : []),
         ...(className ? [Class(className)] : []),
+        ...attributes,
     ];
     const backdrop = keyed('div')(`${id}-backdrop`, [
-        Class(backdropClassName),
         ...transitionAttributes,
         ...(isLeaving ? [] : [OnClick(toMessage(Closed()))]),
+        ...(backdropClassName ? [Class(backdropClassName)] : []),
+        ...backdropAttributes,
     ], []);
-    const panel = keyed('div')(`${id}-panel`, [Id(`${id}-panel`), Class(panelClassName), ...transitionAttributes], [panelContent]);
+    const panel = keyed('div')(`${id}-panel`, [
+        Id(`${id}-panel`),
+        ...transitionAttributes,
+        ...(panelClassName ? [Class(panelClassName)] : []),
+        ...panelAttributes,
+    ], [panelContent]);
     const content = isVisible ? [backdrop, panel] : [];
     return keyed('dialog')(id, dialogAttributes, content);
 };

package/dist/ui/dialog/public.d.ts

@@ -1,3 +1,3 @@
-export { init, update, view, lazy, titleId, descriptionId, Model, Message, Opened, Closed, NoOp, AdvancedTransitionFrame, EndedTransition, } from './index';
+export { init, update, view, lazy, titleId, descriptionId, Model, Message, Opened, Closed, CompletedDialogShow, CompletedDialogClose, AdvancedTransitionFrame, EndedTransition, } from './index';
 export type { InitConfig, ViewConfig } from './index';
 //# sourceMappingURL=public.d.ts.map

package/dist/ui/dialog/public.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,IAAI,EACJ,uBAAuB,EACvB,eAAe,GAChB,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}
+{"version":3,"file":"public.d.ts","sourceRoot":"","sources":["../../../src/ui/dialog/public.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,MAAM,EACN,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EACb,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,mBAAmB,EACnB,oBAAoB,EACpB,uBAAuB,EACvB,eAAe,GAChB,MAAM,SAAS,CAAA;AAEhB,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA"}

package/dist/ui/dialog/public.js

@@ -1 +1 @@
-export { init, update, view, lazy, titleId, descriptionId, Model, Message, Opened, Closed, NoOp, AdvancedTransitionFrame, EndedTransition, } from './index';
+export { init, update, view, lazy, titleId, descriptionId, Model, Message, Opened, Closed, CompletedDialogShow, CompletedDialogClose, AdvancedTransitionFrame, EndedTransition, } from './index';

package/dist/ui/disclosure/index.d.ts

@@ -1,6 +1,6 @@
 import { Schema as S } from 'effect';
 import type { Command } from '../../command';
-import type { Html, TagName } from '../../html';
+import { type Attribute, type Html, type TagName } from '../../html';
 /** Schema for the disclosure component's state, tracking its unique ID and open/closed status. */
 export declare const Model: S.Struct<{
     id: typeof S.String;
@@ -11,13 +11,13 @@ export type Model = typeof Model.Type;
 export declare const Toggled: import("../../schema").CallableTaggedStruct<"Toggled", {}>;
 /** Sent to explicitly close the disclosure, regardless of its current state. */
 export declare const Closed: import("../../schema").CallableTaggedStruct<"Closed", {}>;
-/** Placeholder message used when no action is needed, such as after a focus command completes. */
-export declare const NoOp: import("../../schema").CallableTaggedStruct<"NoOp", {}>;
+/** Sent when the focus-button command completes after closing. */
+export declare const CompletedButtonFocus: import("../../schema").CallableTaggedStruct<"CompletedButtonFocus", {}>;
 /** Union of all messages the disclosure component can produce. */
-export declare const Message: S.Union<[import("../../schema").CallableTaggedStruct<"Toggled", {}>, import("../../schema").CallableTaggedStruct<"Closed", {}>, import("../../schema").CallableTaggedStruct<"NoOp", {}>]>;
+export declare const Message: S.Union<[import("../../schema").CallableTaggedStruct<"Toggled", {}>, import("../../schema").CallableTaggedStruct<"Closed", {}>, import("../../schema").CallableTaggedStruct<"CompletedButtonFocus", {}>]>;
 export type Toggled = typeof Toggled.Type;
 export type Closed = typeof Closed.Type;
-export type NoOp = typeof NoOp.Type;
+export type CompletedButtonFocus = typeof CompletedButtonFocus.Type;
 export type Message = typeof Message.Type;
 /** Configuration for creating a disclosure model with `init`. */
 export type InitConfig = Readonly<{
@@ -31,16 +31,19 @@ export declare const update: (model: Model, message: Message) => [Model, Readonl
 /** Configuration for rendering a disclosure with `view`. */
 export type ViewConfig<Message> = Readonly<{
     model: Model;
-    toMessage: (message: Toggled | Closed | NoOp) => Message;
-    buttonClassName: string;
+    toMessage: (message: Toggled | Closed | CompletedButtonFocus) => Message;
+    buttonClassName?: string;
+    buttonAttributes?: ReadonlyArray<Attribute<Message>>;
     buttonContent: Html;
-    panelClassName: string;
+    panelClassName?: string;
+    panelAttributes?: ReadonlyArray<Attribute<Message>>;
     panelContent: Html;
     isDisabled?: boolean;
     persistPanel?: boolean;
     buttonElement?: TagName;
     panelElement?: TagName;
     className?: string;
+    attributes?: ReadonlyArray<Attribute<Message>>;
 }>;
 /** Renders a headless disclosure component with accessible ARIA attributes and keyboard support. */
 export declare const view: <Message>(config: ViewConfig<Message>) => Html;

package/dist/ui/disclosure/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/disclosure/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAE5C,OAAO,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,YAAY,CAAA;AAQ/C,kGAAkG;AAClG,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,iFAAiF;AACjF,eAAO,MAAM,OAAO,4DAAe,CAAA;AACnC,gFAAgF;AAChF,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,kGAAkG;AAClG,eAAO,MAAM,IAAI,yDAAY,CAAA;AAE7B,kEAAkE;AAClE,eAAO,MAAM,OAAO,2LAAiC,CAAA;AAErD,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AACzC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,IAAI,GAAG,OAAO,IAAI,CAAC,IAAI,CAAA;AAEnC,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC,CAAA;AAEF,6EAA6E;AAC7E,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAUF,8EAA8E;AAC9E,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CA+BvC,CAAA;AAIH,4DAA4D;AAC5D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,IAAI,KAAK,OAAO,CAAA;IACxD,eAAe,EAAE,MAAM,CAAA;IACvB,aAAa,EAAE,IAAI,CAAA;IACnB,cAAc,EAAE,MAAM,CAAA;IACtB,YAAY,EAAE,IAAI,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAC,CAAA;AAEF,oGAAoG;AACpG,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IAwF3D,CAAA;AAED;6EAC6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,EAC1B,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,KAC7D,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,CAgBtE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/disclosure/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8B,MAAM,IAAI,CAAC,EAAE,MAAM,QAAQ,CAAA;AAEhE,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EACL,KAAK,SAAS,EACd,KAAK,IAAI,EACT,KAAK,OAAO,EAGb,MAAM,YAAY,CAAA;AAOnB,kGAAkG;AAClG,eAAO,MAAM,KAAK;;;EAGhB,CAAA;AAEF,MAAM,MAAM,KAAK,GAAG,OAAO,KAAK,CAAC,IAAI,CAAA;AAIrC,iFAAiF;AACjF,eAAO,MAAM,OAAO,4DAAe,CAAA;AACnC,gFAAgF;AAChF,eAAO,MAAM,MAAM,2DAAc,CAAA;AACjC,kEAAkE;AAClE,eAAO,MAAM,oBAAoB,yEAA4B,CAAA;AAE7D,kEAAkE;AAClE,eAAO,MAAM,OAAO,2MAAiD,CAAA;AAErE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AACzC,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC,IAAI,CAAA;AACvC,MAAM,MAAM,oBAAoB,GAAG,OAAO,oBAAoB,CAAC,IAAI,CAAA;AAEnE,MAAM,MAAM,OAAO,GAAG,OAAO,OAAO,CAAC,IAAI,CAAA;AAIzC,iEAAiE;AACjE,MAAM,MAAM,UAAU,GAAG,QAAQ,CAAC;IAChC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAC,CAAA;AAEF,6EAA6E;AAC7E,eAAO,MAAM,IAAI,GAAI,QAAQ,UAAU,KAAG,KAGxC,CAAA;AAUF,8EAA8E;AAC9E,eAAO,MAAM,MAAM,GACjB,OAAO,KAAK,EACZ,SAAS,OAAO,KACf,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CA+BvC,CAAA;AAIH,4DAA4D;AAC5D,MAAM,MAAM,UAAU,CAAC,OAAO,IAAI,QAAQ,CAAC;IACzC,KAAK,EAAE,KAAK,CAAA;IACZ,SAAS,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,oBAAoB,KAAK,OAAO,CAAA;IACxE,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,gBAAgB,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACpD,aAAa,EAAE,IAAI,CAAA;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,eAAe,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;IACnD,YAAY,EAAE,IAAI,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,aAAa,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAA;CAC/C,CAAC,CAAA;AAEF,oGAAoG;AACpG,eAAO,MAAM,IAAI,GAAI,OAAO,EAAE,QAAQ,UAAU,CAAC,OAAO,CAAC,KAAG,IAgG3D,CAAA;AAED;6EAC6E;AAC7E,eAAO,MAAM,IAAI,GAAI,OAAO,EAC1B,cAAc,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,WAAW,CAAC,KAC7D,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,KAAK,IAAI,CAgBtE,CAAA"}