@threadlabs/looma 0.2.20 → 0.3.0

package/styles.css

@@ -207,12 +207,7 @@
     color: var(--ui-action-secondary-text, var(--ui-text-primary));
   }
 
-  /* Match data-variant too, not just the variant attribute. ui-button does not
-   * reflect its `variant` prop, so a `variant` attribute only exists on buttons
-   * rendered server-side; client-rendered buttons (e.g. a dialog opened after
-   * mount) carry only the Stencil-synced data-variant. Keying on data-variant
-   * (as the size rules already do with data-size) makes this fallback apply in
-   * both cases instead of stranding client-rendered variants on the neutral base. */
+  /* The invocation attribute and lowered reflected value share one fallback. */
   ui-button:is([variant="solid"], [data-variant="solid"]) {
     color: var(--ui-action-primary-text, var(--ui-text-on-accent));
   }
@@ -279,21 +274,21 @@
     transform: translateY(0);
   }
 
-  ui-button:is([variant="destructive"], [data-variant="destructive"]) > button {
+  ui-button:is([variant="danger"], [data-variant="danger"]) > button {
     border-color: var(--ui-danger-solid);
     background: var(--ui-danger-solid);
     color: var(--ui-text-on-accent);
-    box-shadow: var(--ui-button-destructive-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
+    box-shadow: var(--ui-button-danger-shadow, inset 0 1px rgb(255 255 255 / 0.14), var(--ui-shadow-xs));
   }
 
-  ui-button:is([variant="destructive"], [data-variant="destructive"]) > button:hover:enabled {
+  ui-button:is([variant="danger"], [data-variant="danger"]) > button:hover:enabled {
     background: var(--ui-danger-hover);
     border-color: var(--ui-danger-hover);
     box-shadow: var(--ui-shadow-sm);
     transform: translateY(-1px);
   }
 
-  ui-button:is([variant="destructive"], [data-variant="destructive"]) > button:active:enabled {
+  ui-button:is([variant="danger"], [data-variant="danger"]) > button:active:enabled {
     background: var(--ui-danger-hover);
     border-color: var(--ui-danger-hover);
     box-shadow: none;

package/svelte/index.d.ts

@@ -0,0 +1,204 @@
+/** Inputs accepted by generated DOM factories before lifecycle attachment. */
+interface VanillaComponentOptions {
+  readonly attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
+  readonly children?: readonly Node[];
+  readonly slots?: Readonly<Record<string, readonly Node[]>>;
+  readonly [name: string]: unknown;
+}
+
+declare function createUiAffordanceScope(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiAvatarGroup(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiAvatar(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiBadge(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiButton(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiCallout(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiCheckbox(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiCombobox(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiContextMenu(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiDialog(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiDisclosure(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiEditable(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiFormField(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiIconButton(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiInput(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiMenuItem(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiMenu(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiPopover(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiRadioGroup(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiRadio(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiSearchResultRow(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiSearchShell(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiSelect(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiSwitch(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiTabs(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiTextarea(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiToastRegion(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiTooltip(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiTopBar(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiTreeItem(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiTree(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiCluster(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiContainer(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiGrid(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiReel(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiSeparator(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiSidebar(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiStack(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiSwitcher(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiEditorInsertTableGrid(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiEditorMentionMenu(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiEditorSlashMenu(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiEditorTableContextMenu(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiEditorTableOverlay(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiEditorTableToolbar(options?: VanillaComponentOptions): HTMLElement;
+declare function createUiEditorToolbar(options?: VanillaComponentOptions): HTMLElement;
+
+type GeneratedTagName = "ui-affordance-scope" | "ui-avatar-group" | "ui-avatar" | "ui-badge" | "ui-button" | "ui-callout" | "ui-checkbox" | "ui-combobox" | "ui-context-menu" | "ui-dialog" | "ui-disclosure" | "ui-editable" | "ui-form-field" | "ui-icon-button" | "ui-input" | "ui-menu-item" | "ui-menu" | "ui-popover" | "ui-radio-group" | "ui-radio" | "ui-search-result-row" | "ui-search-shell" | "ui-select" | "ui-switch" | "ui-tabs" | "ui-textarea" | "ui-toast-region" | "ui-tooltip" | "ui-top-bar" | "ui-tree-item" | "ui-tree" | "ui-cluster" | "ui-container" | "ui-grid" | "ui-reel" | "ui-separator" | "ui-sidebar" | "ui-stack" | "ui-switcher" | "ui-editor-insert-table-grid" | "ui-editor-mention-menu" | "ui-editor-slash-menu" | "ui-editor-table-context-menu" | "ui-editor-table-overlay" | "ui-editor-table-toolbar" | "ui-editor-toolbar";
+declare const factoryByTag: Readonly<Record<GeneratedTagName, (options?: VanillaComponentOptions) => HTMLElement>>;
+
+/**
+ * Stable event-detail shapes exposed by the handwritten Svelte adapter.
+ * The adapter unwraps `CustomEvent.detail`; handlers therefore receive these
+ * payloads directly rather than browser event objects.
+ *
+ * @contract Event names and detail objects remain identical to the native
+ * declarative roots so Svelte integration does not introduce another API.
+ */
+interface SvelteAdapterEventMap {
+    open: {
+        open: boolean;
+        reason: string;
+        trigger: string;
+    };
+    close: {
+        open: boolean;
+        reason: string;
+        trigger: string;
+    };
+    select: {
+        value: string;
+        previousValue?: string;
+        trigger: string;
+    };
+    change: {
+        checked: boolean;
+        value: string;
+        trigger: string;
+    };
+    dismiss: {
+        id: string;
+        reason: string;
+        trigger: string;
+    };
+}
+/** A tag accepted by the generated native-root factory inventory. */
+type AdapterTagName = GeneratedTagName;
+/**
+ * Property values applied after a native root is created.
+ * Object values always use DOM properties because stringifying structured
+ * component input would silently corrupt its contract.
+ */
+type AdapterPropsRecord = Record<string, unknown>;
+/**
+ * Svelte-facing callbacks for native Looma events.
+ *
+ * @ownership `bindAdapter` owns the DOM listeners; the caller owns callback
+ * identity and may replace callbacks through the action's `update` method.
+ */
+type AdapterEventHandlers = {
+    onOpen?: (detail: SvelteAdapterEventMap["open"]) => void;
+    onClose?: (detail: SvelteAdapterEventMap["close"]) => void;
+    onSelect?: (detail: SvelteAdapterEventMap["select"]) => void;
+    onChange?: (detail: SvelteAdapterEventMap["change"]) => void;
+    onDismiss?: (detail: SvelteAdapterEventMap["dismiss"]) => void;
+};
+/**
+ * Inputs shared by one-shot factory creation and the stateful Svelte action.
+ * `props` target DOM properties when available, while attributes, children,
+ * and slots preserve the generated factory's declarative construction rules.
+ */
+type SvelteAdapterOptions = AdapterEventHandlers & {
+    props?: AdapterPropsRecord;
+    attributes?: VanillaComponentOptions["attributes"];
+    children?: VanillaComponentOptions["children"];
+    slots?: VanillaComponentOptions["slots"];
+};
+/**
+ * Keeps a Svelte-owned native root synchronized with adapter props and events.
+ *
+ * @ownership Svelte owns the node. The action owns only listeners it installs
+ * and never removes or replaces the node.
+ * @lifecycle Every update removes the previous listener set before installing
+ * the next one; `destroy` performs the final listener cleanup.
+ */
+declare function bindAdapter(node: HTMLElement, options?: SvelteAdapterOptions): {
+    update(updatedOptions?: SvelteAdapterOptions): void;
+    destroy(): void;
+};
+/**
+ * Materializes a native root directly from the generated declarative factory.
+ *
+ * @ownership The returned element belongs to the caller. Event listeners are
+ * attached for its lifetime; callers needing replaceable callbacks should use
+ * `bindAdapter` after creation.
+ * @failure An unknown tag cannot enter through the typed API; unchecked input
+ * fails when no generated factory exists rather than producing a partial root.
+ */
+declare function createAdapterElement(tagName: AdapterTagName, options?: SvelteAdapterOptions): HTMLElement;
+/**
+ * Canonical adapter export-to-native-tag correspondence.
+ * Release checks consume this map to prove that generated Svelte factories and
+ * the framework-neutral package graph expose the same component inventory.
+ */
+declare const ADAPTER_COMPONENT_TAG_MAP: {
+    readonly AffordanceScope: "ui-affordance-scope";
+    readonly AvatarGroup: "ui-avatar-group";
+    readonly Avatar: "ui-avatar";
+    readonly Badge: "ui-badge";
+    readonly Button: "ui-button";
+    readonly Callout: "ui-callout";
+    readonly Checkbox: "ui-checkbox";
+    readonly Combobox: "ui-combobox";
+    readonly ContextMenu: "ui-context-menu";
+    readonly Dialog: "ui-dialog";
+    readonly Disclosure: "ui-disclosure";
+    readonly Editable: "ui-editable";
+    readonly FormField: "ui-form-field";
+    readonly IconButton: "ui-icon-button";
+    readonly Input: "ui-input";
+    readonly MenuItem: "ui-menu-item";
+    readonly Menu: "ui-menu";
+    readonly Popover: "ui-popover";
+    readonly RadioGroup: "ui-radio-group";
+    readonly Radio: "ui-radio";
+    readonly SearchResultRow: "ui-search-result-row";
+    readonly SearchShell: "ui-search-shell";
+    readonly Select: "ui-select";
+    readonly Switch: "ui-switch";
+    readonly Tabs: "ui-tabs";
+    readonly Textarea: "ui-textarea";
+    readonly ToastRegion: "ui-toast-region";
+    readonly Tooltip: "ui-tooltip";
+    readonly TopBar: "ui-top-bar";
+    readonly TreeItem: "ui-tree-item";
+    readonly Tree: "ui-tree";
+    readonly EditorInsertTableGrid: "ui-editor-insert-table-grid";
+    readonly EditorMentionMenu: "ui-editor-mention-menu";
+    readonly EditorSlashMenu: "ui-editor-slash-menu";
+    readonly EditorTableContextMenu: "ui-editor-table-context-menu";
+    readonly EditorTableOverlay: "ui-editor-table-overlay";
+    readonly EditorTableToolbar: "ui-editor-table-toolbar";
+    readonly EditorToolbar: "ui-editor-toolbar";
+    readonly Container: "ui-container";
+    readonly Grid: "ui-grid";
+    readonly Cluster: "ui-cluster";
+    readonly Reel: "ui-reel";
+    readonly Separator: "ui-separator";
+    readonly Sidebar: "ui-sidebar";
+    readonly Stack: "ui-stack";
+    readonly Switcher: "ui-switcher";
+};
+/** Human-readable provenance recorded beside generated adapter artifacts. */
+declare const SVELTE_ADAPTER_NOTE = "Native-root adapter: factories and bindAdapter project the framework-neutral Looma declarative contract into Svelte.";
+
+export { ADAPTER_COMPONENT_TAG_MAP, type AdapterEventHandlers, type AdapterPropsRecord, type AdapterTagName, type GeneratedTagName, SVELTE_ADAPTER_NOTE, type SvelteAdapterEventMap, type SvelteAdapterOptions, type VanillaComponentOptions, bindAdapter, createAdapterElement, createUiAffordanceScope, createUiAvatar, createUiAvatarGroup, createUiBadge, createUiButton, createUiCallout, createUiCheckbox, createUiCluster, createUiCombobox, createUiContainer, createUiContextMenu, createUiDialog, createUiDisclosure, createUiEditable, createUiEditorInsertTableGrid, createUiEditorMentionMenu, createUiEditorSlashMenu, createUiEditorTableContextMenu, createUiEditorTableOverlay, createUiEditorTableToolbar, createUiEditorToolbar, createUiFormField, createUiGrid, createUiIconButton, createUiInput, createUiMenu, createUiMenuItem, createUiPopover, createUiRadio, createUiRadioGroup, createUiReel, createUiSearchResultRow, createUiSearchShell, createUiSelect, createUiSeparator, createUiSidebar, createUiStack, createUiSwitch, createUiSwitcher, createUiTabs, createUiTextarea, createUiToastRegion, createUiTooltip, createUiTopBar, createUiTree, createUiTreeItem, factoryByTag };