@threadlabs/looma 0.14.8 → 0.15.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/shared/icons.js +5 -0
- package/components/shared/menu-navigation.js +49 -0
- package/components/shared/overlay.js +33 -60
- package/components/ui-avatar/ui-avatar.html +19 -2
- package/components/ui-avatar/ui-avatar.js +7 -1
- package/components/ui-avatar-group/ui-avatar-group.html +8 -3
- package/components/ui-avatar-group/ui-avatar-group.js +6 -2
- package/components/ui-badge/ui-badge.html +70 -4
- package/components/ui-button/ui-button.html +21 -5
- package/components/ui-button/ui-button.js +10 -0
- package/components/ui-callout/ui-callout.html +13 -5
- package/components/ui-checkbox/ui-checkbox.html +11 -0
- package/components/ui-cluster/ui-cluster.html +7 -0
- package/components/ui-combobox/ui-combobox.html +46 -10
- package/components/ui-combobox/ui-combobox.js +5 -5
- package/components/ui-context-menu/ui-context-menu.html +33 -5
- package/components/ui-context-menu/ui-context-menu.js +26 -17
- package/components/ui-dialog/ui-dialog.html +51 -8
- package/components/ui-dialog/ui-dialog.js +28 -7
- package/components/ui-disclosure/ui-disclosure.html +14 -5
- package/components/ui-disclosure/ui-disclosure.js +51 -4
- package/components/ui-editable/ui-editable.html +17 -3
- package/components/ui-editable/ui-editable.js +7 -0
- package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.html +48 -14
- package/components/ui-editor-insert-table-grid/ui-editor-insert-table-grid.js +40 -6
- package/components/ui-editor-mention-menu/ui-editor-mention-menu.html +22 -9
- package/components/ui-editor-mention-menu/ui-editor-mention-menu.js +33 -11
- package/components/ui-editor-mention-menu-item/ui-editor-mention-menu-item.html +67 -0
- package/components/ui-editor-slash-menu/ui-editor-slash-menu.html +33 -30
- package/components/ui-editor-slash-menu/ui-editor-slash-menu.js +42 -8
- package/components/ui-editor-slash-menu-group/ui-editor-slash-menu-group.html +31 -0
- package/components/ui-editor-slash-menu-item/ui-editor-slash-menu-item.html +75 -0
- package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.html +16 -5
- package/components/ui-editor-table-context-menu/ui-editor-table-context-menu.js +10 -2
- package/components/ui-editor-table-overlay/ui-editor-table-overlay.html +5 -5
- package/components/ui-editor-table-overlay/ui-editor-table-overlay.js +5 -2
- package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html +14 -4
- package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js +2 -2
- package/components/ui-editor-toolbar/ui-editor-toolbar.html +1 -1
- package/components/ui-editor-toolbar/ui-editor-toolbar.js +46 -0
- package/components/ui-floating-action-button/ui-floating-action-button.html +1 -1
- package/components/ui-form-field/ui-form-field.html +16 -3
- package/components/ui-form-field/ui-form-field.js +1 -1
- package/components/ui-grid/ui-grid.html +17 -2
- package/components/ui-icon/ui-icon.html +5 -0
- package/components/ui-icon-button/ui-icon-button.html +25 -6
- package/components/ui-icon-button/ui-icon-button.js +11 -1
- package/components/ui-input/ui-input.html +3 -3
- package/components/ui-input-group/ui-input-group.html +18 -4
- package/components/ui-listbox/ui-listbox.html +81 -0
- package/components/ui-listbox/ui-listbox.js +27 -0
- package/components/ui-menu/ui-menu.html +33 -5
- package/components/ui-menu/ui-menu.js +18 -12
- package/components/ui-menu-group/ui-menu-group.html +27 -0
- package/components/ui-menu-item/ui-menu-item.html +80 -8
- package/components/ui-menu-item/ui-menu-item.js +47 -0
- package/components/ui-popover/ui-popover.html +33 -5
- package/components/ui-popover/ui-popover.js +9 -1
- package/components/ui-radio-group/ui-radio-group.html +13 -1
- package/components/ui-search-shell/ui-search-shell.html +6 -6
- package/components/ui-search-shell/ui-search-shell.js +21 -5
- package/components/ui-select/ui-select.html +14 -4
- package/components/ui-switch/ui-switch.html +2 -2
- package/components/ui-switcher/ui-switcher.html +8 -1
- package/components/ui-switcher/ui-switcher.js +15 -0
- package/components/ui-tabs/ui-tabs.html +17 -12
- package/components/ui-tabs/ui-tabs.js +43 -7
- package/components/ui-textarea/ui-textarea.html +28 -5
- package/components/ui-toast/ui-toast.html +88 -0
- package/components/ui-toast/ui-toast.js +68 -0
- package/components/ui-toast-region/ui-toast-region.html +102 -19
- package/components/ui-toast-region/ui-toast-region.js +10 -18
- package/components/ui-tooltip/ui-tooltip.html +51 -7
- package/components/ui-tooltip/ui-tooltip.js +29 -3
- package/components/ui-tree/ui-tree.html +12 -0
- package/components/ui-tree/ui-tree.js +191 -12
- package/components/ui-tree-item/ui-tree-item.html +87 -8
- package/components/ui-tree-item/ui-tree-item.js +3 -1
- package/dist/index.js +38 -32
- package/editor/chunks/extensions.js +82 -2
- package/editor/extensions/table-commands.d.ts +8 -0
- package/editor/icons.d.ts +5 -0
- package/editor/index.js +7 -2
- package/editor/insert-table-grid.d.ts +1 -1
- package/editor/mention-menu.d.ts +2 -0
- package/editor/slash-menu.d.ts +3 -0
- package/editor/table-context-menu.d.ts +1 -1
- package/editor/table-overlay.d.ts +2 -2
- package/package.json +1 -1
- package/styles/ui-avatar-group.css +1 -2
- package/styles/ui-avatar.css +11 -1
- package/styles/ui-badge.css +73 -1
- package/styles/ui-button.css +9 -1
- package/styles/ui-callout.css +1 -1
- package/styles/ui-checkbox.css +9 -0
- package/styles/ui-cluster.css +3 -0
- package/styles/ui-combobox.css +38 -7
- package/styles/ui-context-menu.css +32 -4
- package/styles/ui-dialog.css +42 -5
- package/styles/ui-editor-insert-table-grid.css +48 -11
- package/styles/ui-editor-mention-menu-item.css +57 -0
- package/styles/ui-editor-mention-menu.css +11 -1
- package/styles/ui-editor-slash-menu-group.css +21 -0
- package/styles/ui-editor-slash-menu-item.css +62 -0
- package/styles/ui-editor-slash-menu.css +10 -21
- package/styles/ui-editor-table-context-menu.css +1 -1
- package/styles/ui-floating-action-button.css +1 -1
- package/styles/ui-form-field.css +14 -1
- package/styles/ui-grid.css +14 -1
- package/styles/ui-icon-button.css +17 -5
- package/styles/ui-input-group.css +18 -4
- package/styles/ui-input.css +3 -3
- package/styles/ui-listbox.css +69 -0
- package/styles/ui-menu-group.css +19 -0
- package/styles/ui-menu-item.css +48 -9
- package/styles/ui-menu.css +32 -4
- package/styles/ui-popover.css +28 -4
- package/styles/ui-radio-group.css +9 -0
- package/styles/ui-search-shell.css +5 -5
- package/styles/ui-select.css +14 -4
- package/styles/ui-switch.css +2 -2
- package/styles/ui-switcher.css +4 -0
- package/styles/ui-textarea.css +27 -4
- package/styles/ui-toast-region.css +88 -4
- package/styles/ui-toast.css +74 -0
- package/styles/ui-tooltip.css +46 -6
- package/styles/ui-tree-item.css +72 -4
- package/styles/ui-tree.css +8 -0
- package/tokens.css +3 -0
- package/vanilla/UiAvatar.d.ts +2 -0
- package/vanilla/UiAvatar.js +8 -1
- package/vanilla/UiAvatarGroup.d.ts +2 -0
- package/vanilla/UiAvatarGroup.js +1 -1
- package/vanilla/UiBadge.d.ts +1 -1
- package/vanilla/UiBadge.js +1 -1
- package/vanilla/UiButton.d.ts +1 -0
- package/vanilla/UiButton.js +22 -6
- package/vanilla/UiCallout.d.ts +1 -1
- package/vanilla/UiCallout.js +1 -1
- package/vanilla/UiCheckbox.d.ts +1 -0
- package/vanilla/UiCheckbox.js +12 -9
- package/vanilla/UiCluster.d.ts +1 -0
- package/vanilla/UiCluster.js +2 -0
- package/vanilla/UiCombobox.d.ts +3 -0
- package/vanilla/UiCombobox.js +30 -15
- package/vanilla/UiContextMenu.d.ts +1 -1
- package/vanilla/UiContextMenu.js +1 -1
- package/vanilla/UiDialog.d.ts +5 -2
- package/vanilla/UiDialog.js +1 -1
- package/vanilla/UiDisclosure.d.ts +2 -0
- package/vanilla/UiDisclosure.js +32 -18
- package/vanilla/UiEditable.d.ts +5 -0
- package/vanilla/UiEditable.js +7 -3
- package/vanilla/UiEditorInsertTableGrid.js +1 -6
- package/vanilla/UiEditorMentionMenu.d.ts +4 -2
- package/vanilla/UiEditorMentionMenu.js +49 -31
- package/vanilla/UiEditorMentionMenuItem.d.ts +16 -0
- package/vanilla/UiEditorMentionMenuItem.js +56 -0
- package/vanilla/UiEditorSlashMenu.d.ts +4 -3
- package/vanilla/UiEditorSlashMenu.js +59 -46
- package/vanilla/UiEditorSlashMenuGroup.d.ts +14 -0
- package/vanilla/UiEditorSlashMenuGroup.js +48 -0
- package/vanilla/UiEditorSlashMenuItem.d.ts +18 -0
- package/vanilla/UiEditorSlashMenuItem.js +57 -0
- package/vanilla/UiEditorTableContextMenu.d.ts +5 -2
- package/vanilla/UiEditorTableContextMenu.js +1 -2
- package/vanilla/UiEditorTableOverlay.d.ts +1 -1
- package/vanilla/UiEditorTableOverlay.js +5 -5
- package/vanilla/UiEditorTableToolbar.d.ts +4 -2
- package/vanilla/UiEditorTableToolbar.js +1 -2
- package/vanilla/UiEditorToolbar.js +2 -0
- package/vanilla/UiGrid.d.ts +1 -0
- package/vanilla/UiGrid.js +8 -7
- package/vanilla/UiIcon.js +1 -1
- package/vanilla/UiIconButton.d.ts +1 -0
- package/vanilla/UiIconButton.js +11 -2
- package/vanilla/UiListbox.d.ts +20 -0
- package/vanilla/UiListbox.js +45 -0
- package/vanilla/UiMenu.d.ts +1 -1
- package/vanilla/UiMenu.js +1 -1
- package/vanilla/UiMenuGroup.d.ts +14 -0
- package/vanilla/UiMenuGroup.js +35 -0
- package/vanilla/UiMenuItem.d.ts +5 -1
- package/vanilla/UiMenuItem.js +91 -30
- package/vanilla/UiPopover.d.ts +1 -1
- package/vanilla/UiPopover.js +1 -1
- package/vanilla/UiRadioGroup.d.ts +1 -0
- package/vanilla/UiRadioGroup.js +6 -3
- package/vanilla/UiSwitcher.d.ts +1 -0
- package/vanilla/UiSwitcher.js +7 -9
- package/vanilla/UiTabs.d.ts +1 -0
- package/vanilla/UiTabs.js +9 -1
- package/vanilla/UiTextarea.d.ts +1 -0
- package/vanilla/UiTextarea.js +4 -1
- package/vanilla/UiToast.d.ts +16 -0
- package/vanilla/UiToast.js +53 -0
- package/vanilla/UiToastRegion.d.ts +1 -4
- package/vanilla/UiToastRegion.js +3 -11
- package/vanilla/UiTooltip.d.ts +1 -1
- package/vanilla/UiTooltip.js +1 -1
- package/vanilla/UiTree.d.ts +2 -0
- package/vanilla/UiTree.js +1 -1
- package/vanilla/UiTreeItem.d.ts +1 -0
- package/vanilla/UiTreeItem.js +45 -31
- package/vanilla/index.js +6 -0
- package/vue/UiAvatar.d.ts +4 -0
- package/vue/UiAvatar.vue +23 -3
- package/vue/UiAvatarGroup.d.ts +3 -0
- package/vue/UiAvatarGroup.vue +7 -4
- package/vue/UiBadge.d.ts +2 -2
- package/vue/UiBadge.vue +74 -2
- package/vue/UiButton.d.ts +5 -3
- package/vue/UiButton.vue +41 -7
- package/vue/UiCallout.d.ts +2 -2
- package/vue/UiCallout.vue +3 -2
- package/vue/UiCheckbox.d.ts +2 -0
- package/vue/UiCheckbox.vue +16 -0
- package/vue/UiCluster.d.ts +1 -0
- package/vue/UiCluster.vue +5 -0
- package/vue/UiCombobox.d.ts +11 -3
- package/vue/UiCombobox.vue +60 -11
- package/vue/UiContextMenu.d.ts +2 -0
- package/vue/UiContextMenu.vue +47 -6
- package/vue/UiDialog.d.ts +18 -4
- package/vue/UiDialog.vue +86 -11
- package/vue/UiDisclosure.d.ts +8 -2
- package/vue/UiDisclosure.vue +38 -14
- package/vue/UiEditable.d.ts +10 -0
- package/vue/UiEditable.vue +14 -2
- package/vue/UiEditorInsertTableGrid.vue +52 -15
- package/vue/UiEditorMentionMenu.d.ts +24 -2
- package/vue/UiEditorMentionMenu.vue +27 -11
- package/vue/UiEditorMentionMenuItem.d.ts +24 -0
- package/vue/UiEditorMentionMenuItem.js +2 -0
- package/vue/UiEditorMentionMenuItem.vue +88 -0
- package/vue/UiEditorSlashMenu.d.ts +24 -1
- package/vue/UiEditorSlashMenu.vue +33 -33
- package/vue/UiEditorSlashMenuGroup.d.ts +18 -0
- package/vue/UiEditorSlashMenuGroup.js +2 -0
- package/vue/UiEditorSlashMenuGroup.vue +43 -0
- package/vue/UiEditorSlashMenuItem.d.ts +26 -0
- package/vue/UiEditorSlashMenuItem.js +2 -0
- package/vue/UiEditorSlashMenuItem.vue +101 -0
- package/vue/UiEditorTableContextMenu.d.ts +9 -3
- package/vue/UiEditorTableContextMenu.vue +53 -3
- package/vue/UiEditorTableOverlay.d.ts +2 -2
- package/vue/UiEditorTableOverlay.vue +8 -6
- package/vue/UiEditorTableToolbar.d.ts +7 -3
- package/vue/UiEditorTableToolbar.vue +50 -2
- package/vue/UiEditorToolbar.vue +14 -1
- package/vue/UiFloatingActionButton.vue +1 -1
- package/vue/UiFormField.vue +28 -3
- package/vue/UiGrid.d.ts +1 -0
- package/vue/UiGrid.vue +26 -2
- package/vue/UiIcon.vue +16 -0
- package/vue/UiIconButton.d.ts +5 -3
- package/vue/UiIconButton.vue +40 -6
- package/vue/UiInput.vue +10 -3
- package/vue/UiInputGroup.vue +32 -11
- package/vue/UiListbox.d.ts +33 -0
- package/vue/UiListbox.js +2 -0
- package/vue/UiListbox.vue +131 -0
- package/vue/UiMenu.d.ts +2 -0
- package/vue/UiMenu.vue +43 -6
- package/vue/UiMenuGroup.d.ts +18 -0
- package/vue/UiMenuGroup.js +2 -0
- package/vue/UiMenuGroup.vue +39 -0
- package/vue/UiMenuItem.d.ts +34 -2
- package/vue/UiMenuItem.vue +145 -9
- package/vue/UiPopover.d.ts +2 -2
- package/vue/UiPopover.vue +44 -5
- package/vue/UiRadioGroup.d.ts +2 -0
- package/vue/UiRadioGroup.vue +17 -0
- package/vue/UiSearchShell.vue +12 -5
- package/vue/UiSelect.vue +18 -4
- package/vue/UiSwitch.vue +2 -2
- package/vue/UiSwitcher.d.ts +1 -0
- package/vue/UiSwitcher.vue +22 -1
- package/vue/UiTabs.d.ts +6 -2
- package/vue/UiTabs.vue +14 -12
- package/vue/UiTextarea.d.ts +2 -0
- package/vue/UiTextarea.vue +32 -4
- package/vue/UiToast.d.ts +34 -0
- package/vue/UiToast.js +2 -0
- package/vue/UiToast.vue +173 -0
- package/vue/UiToastRegion.d.ts +2 -18
- package/vue/UiToastRegion.vue +123 -48
- package/vue/UiTooltip.d.ts +2 -2
- package/vue/UiTooltip.vue +67 -12
- package/vue/UiTree.d.ts +10 -0
- package/vue/UiTree.vue +27 -0
- package/vue/UiTreeItem.d.ts +2 -0
- package/vue/UiTreeItem.vue +96 -4
- package/vue/chunks/UiAvatar.js +19 -5
- package/vue/chunks/UiAvatarGroup.js +10 -4
- package/vue/chunks/UiBadge.js +1 -1
- package/vue/chunks/UiButton.js +58 -11
- package/vue/chunks/UiCallout.js +2 -2
- package/vue/chunks/UiCheckbox.js +12 -2
- package/vue/chunks/UiCluster.js +5 -3
- package/vue/chunks/UiCombobox.js +29 -13
- package/vue/chunks/UiContextMenu.js +6 -2
- package/vue/chunks/UiDialog.js +25 -8
- package/vue/chunks/UiDisclosure.js +36 -12
- package/vue/chunks/UiEditable.js +22 -8
- package/vue/chunks/UiEditorInsertTableGrid.js +11 -14
- package/vue/chunks/UiEditorMentionMenu.js +30 -19
- package/vue/chunks/UiEditorMentionMenuItem.js +36 -0
- package/vue/chunks/UiEditorSlashMenu.js +33 -35
- package/vue/chunks/UiEditorSlashMenuGroup.js +26 -0
- package/vue/chunks/UiEditorSlashMenuItem.js +51 -0
- package/vue/chunks/UiEditorTableContextMenu.js +39 -5
- package/vue/chunks/UiEditorTableOverlay.js +6 -6
- package/vue/chunks/UiEditorTableToolbar.js +37 -4
- package/vue/chunks/UiEditorToolbar.js +18 -4
- package/vue/chunks/UiFloatingActionButton.js +1 -1
- package/vue/chunks/UiFormField.js +13 -9
- package/vue/chunks/UiGrid.js +6 -2
- package/vue/chunks/UiIcon.js +40 -2
- package/vue/chunks/UiIconButton.js +35 -4
- package/vue/chunks/UiInput.js +1 -1
- package/vue/chunks/UiInputGroup.js +1 -1
- package/vue/chunks/UiListbox.js +70 -0
- package/vue/chunks/UiMenu.js +6 -2
- package/vue/chunks/UiMenuGroup.js +25 -0
- package/vue/chunks/UiMenuItem.js +128 -7
- package/vue/chunks/UiPopover.js +1 -1
- package/vue/chunks/UiRadioGroup.js +8 -2
- package/vue/chunks/UiSearchShell.js +1 -1
- package/vue/chunks/UiSelect.js +1 -1
- package/vue/chunks/UiSwitch.js +1 -1
- package/vue/chunks/UiSwitcher.js +20 -3
- package/vue/chunks/UiTabs.js +4 -3
- package/vue/chunks/UiTextarea.js +7 -2
- package/vue/chunks/UiToast.js +81 -0
- package/vue/chunks/UiToastRegion.js +25 -49
- package/vue/chunks/UiTooltip.js +3 -7
- package/vue/chunks/UiTree.js +8 -4
- package/vue/chunks/UiTreeItem.js +28 -10
- package/vue/components.css +1856 -864
- package/vue/editor/index.js +263 -2
- package/vue/index.d.ts +6 -0
- package/vue/index.js +9 -3
package/vanilla/UiCheckbox.js
CHANGED
|
@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
|
|
|
3
3
|
import * as controller from "../components/ui-checkbox/ui-checkbox.js";
|
|
4
4
|
import "../styles/ui-checkbox.css";
|
|
5
5
|
|
|
6
|
-
const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
|
|
6
|
+
const definition = {...{"contract":{"tag":"ui-checkbox","props":{"checked":{"type":"boolean","required":false,"target":{"attribute":"checked"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"indeterminate":{"type":"boolean","required":false,"target":{"property":"indeterminate"},"default":false},"invalid":{"type":"boolean","required":false,"target":{"attribute":"aria-invalid"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"value":{"type":"string","required":false,"target":{"attribute":"value"},"default":"on"}}},"template":{"kind":"element","name":"label","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"checkbox"},{"kind":"property","key":"checked","name":"checked","expression":"internalChecked","expressionPlan":{"source":"internalChecked","ast":{"kind":"id","name":"internalChecked"},"dependencies":["internalChecked"]}},{"kind":"property","key":"indeterminate","name":"indeterminate","expression":"indeterminate","expressionPlan":{"source":"indeterminate","ast":{"kind":"id","name":"indeterminate"},"dependencies":["indeterminate"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid","expressionPlan":{"source":"invalid","ast":{"kind":"id","name":"invalid"},"dependencies":["invalid"]}},{"kind":"attribute","name":"required","expression":"required","expressionPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"value","expressionPlan":{"source":"value","ast":{"kind":"id","name":"value"},"dependencies":["value"]}}],"children":[],"ref":"input"},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"text"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"label"}],"children":[{"kind":"slot"}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot","fallback":[],"name":"description"}],"ref":"description"}]}]},"declarations":[{"kind":"state","name":"internalChecked","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"change","type":"object({ checked: boolean, value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"label","choices":["label"]}},source:{file:import.meta.url},css:""};
|
|
7
7
|
|
|
8
8
|
export function createUiCheckbox(options = {}) {
|
|
9
9
|
const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
|
|
@@ -21,15 +21,18 @@ export function createUiCheckbox(options = {}) {
|
|
|
21
21
|
const value1 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
|
|
22
22
|
if (value1 === true) element0.setAttribute("disabled", "");
|
|
23
23
|
else element0.removeAttribute("disabled");
|
|
24
|
-
const value2 = componentProps["
|
|
25
|
-
if (value2 ===
|
|
24
|
+
const value2 = componentProps["invalid"] === undefined ? false : componentProps["invalid"];
|
|
25
|
+
if (typeof value2 === "boolean") element0.setAttribute("aria-invalid", String(value2));
|
|
26
|
+
else element0.removeAttribute("aria-invalid");
|
|
27
|
+
const value3 = componentProps["required"] === undefined ? false : componentProps["required"];
|
|
28
|
+
if (value3 === true) element0.setAttribute("required", "");
|
|
26
29
|
else element0.removeAttribute("required");
|
|
27
|
-
const
|
|
28
|
-
if (
|
|
29
|
-
else element0.setAttribute("name", String(
|
|
30
|
-
const
|
|
31
|
-
if (
|
|
32
|
-
else element0.setAttribute("value", String(
|
|
30
|
+
const value4 = componentProps["name"] === undefined ? "" : componentProps["name"];
|
|
31
|
+
if (value4 === null || value4 === undefined) element0.removeAttribute("name");
|
|
32
|
+
else element0.setAttribute("name", String(value4));
|
|
33
|
+
const value5 = componentProps["value"] === undefined ? "on" : componentProps["value"];
|
|
34
|
+
if (value5 === null || value5 === undefined) element0.removeAttribute("value");
|
|
35
|
+
else element0.setAttribute("value", String(value5));
|
|
33
36
|
element.append(element0);
|
|
34
37
|
const element1 = document.createElement("span");
|
|
35
38
|
element1.setAttribute("class", "text");
|
package/vanilla/UiCluster.d.ts
CHANGED
|
@@ -9,6 +9,7 @@ export interface UiClusterProps {
|
|
|
9
9
|
align?: "start" | "center" | "end" | "stretch" | null;
|
|
10
10
|
gap?: "xs" | "s" | "m" | "l" | "xl" | null;
|
|
11
11
|
justify?: "start" | "center" | "end" | "between" | null;
|
|
12
|
+
wrap?: "wrap" | "nowrap" | null;
|
|
12
13
|
attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
|
|
13
14
|
children?: readonly (string | Node)[];
|
|
14
15
|
slots?: Readonly<Record<string, readonly (string | Node)[]>>;
|
package/vanilla/UiCluster.js
CHANGED
|
@@ -8,6 +8,7 @@ export function createUiCluster(options = {}) {
|
|
|
8
8
|
const prop0 = componentProps["align"] === undefined ? undefined : componentProps["align"];
|
|
9
9
|
const prop1 = componentProps["gap"] === undefined ? undefined : componentProps["gap"];
|
|
10
10
|
const prop2 = componentProps["justify"] === undefined ? undefined : componentProps["justify"];
|
|
11
|
+
const prop3 = componentProps["wrap"] === undefined ? undefined : componentProps["wrap"];
|
|
11
12
|
const element = document.createElement("div");
|
|
12
13
|
for (const [name, value] of Object.entries(attributes)) {
|
|
13
14
|
if (value === null || value === undefined || value === false) continue;
|
|
@@ -26,6 +27,7 @@ export function createUiCluster(options = {}) {
|
|
|
26
27
|
{ name: "align", attribute: "data-align", value: componentProps["align"], type: ["start","center","end","stretch"], required: false },
|
|
27
28
|
{ name: "gap", attribute: "data-gap", value: componentProps["gap"], type: ["xs","s","m","l","xl"], required: false },
|
|
28
29
|
{ name: "justify", attribute: "data-justify", value: componentProps["justify"], type: ["start","center","end","between"], required: false },
|
|
30
|
+
{ name: "wrap", attribute: "data-wrap", value: componentProps["wrap"], type: ["wrap","nowrap"], required: false },
|
|
29
31
|
]);
|
|
30
32
|
return element;
|
|
31
33
|
}
|
package/vanilla/UiCombobox.d.ts
CHANGED
|
@@ -25,11 +25,14 @@ export interface UiComboboxProps {
|
|
|
25
25
|
disclosure?: boolean | null;
|
|
26
26
|
filter?: "label" | "none" | null;
|
|
27
27
|
help?: string | null;
|
|
28
|
+
invalid?: boolean | null;
|
|
28
29
|
items?: readonly ({ readonly id: string; readonly value: string; readonly label: string; readonly group?: string; readonly disabled?: boolean; readonly description?: string; readonly tag?: { readonly label: string; readonly tone?: "neutral" | "accent" | "info" | "success" | "warning" | "danger" } })[] | null;
|
|
29
30
|
label?: string | null;
|
|
30
31
|
labelVisibility?: "visible" | "sr-only" | null;
|
|
32
|
+
loading?: boolean | null;
|
|
31
33
|
multiple?: boolean | null;
|
|
32
34
|
name?: string | null;
|
|
35
|
+
openOnFocus?: boolean | null;
|
|
33
36
|
placeholder?: string | null;
|
|
34
37
|
query?: string | null;
|
|
35
38
|
readonly?: boolean | null;
|
package/vanilla/UiCombobox.js
CHANGED
|
@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
|
|
|
3
3
|
import * as controller from "../components/ui-combobox/ui-combobox.js";
|
|
4
4
|
import "../styles/ui-combobox.css";
|
|
5
5
|
|
|
6
|
-
const definition = {...{"contract":{"tag":"ui-combobox","props":{"allowCreate":{"type":"boolean","required":false,"target":{"attribute":"allowcreate"},"default":false},"allowFreeText":{"type":"boolean","required":false,"target":{"attribute":"allowfreetext"},"default":false},"clearable":{"type":"boolean","required":false,"target":{"attribute":"clearable"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"disclosure":{"type":"boolean","required":false,"target":{"attribute":"disclosure"},"default":false},"filter":{"type":{"enum":["label","none"]},"required":false,"target":{"attribute":"filter"},"default":"label"},"help":{"type":"string","required":false,"target":{"attribute":"help"},"default":""},"items":{"type":{"kind":"list","item":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"group","type":{"kind":"terminal","name":"string"},"optional":true},{"name":"disabled","type":{"kind":"terminal","name":"boolean"},"optional":true},{"name":"description","type":{"kind":"terminal","name":"string"},"optional":true},{"name":"tag","type":{"kind":"object","fields":[{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"tone","type":{"kind":"union","members":[{"kind":"keyword","value":"neutral"},{"kind":"keyword","value":"accent"},{"kind":"keyword","value":"info"},{"kind":"keyword","value":"success"},{"kind":"keyword","value":"warning"},{"kind":"keyword","value":"danger"}]},"optional":true}],"open":false},"optional":true}],"open":false}},"required":false,"target":{"attribute":"items"}},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"labelVisibility":{"type":{"enum":["visible","sr-only"]},"required":false,"target":{"attribute":"labelvisibility"},"default":"visible"},"multiple":{"type":"boolean","required":false,"target":{"attribute":"multiple"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"placeholder":{"type":"string","required":false,"target":{"attribute":"placeholder"},"default":""},"query":{"type":"string","required":false,"target":{"attribute":"query"}},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"selectedValues":{"type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"required":false,"target":{"attribute":"selectedvalues"}},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"tokenSeparators":{"type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"required":false,"target":{"attribute":"tokenseparators"}},"value":{"type":{"kind":"union","members":[{"kind":"terminal","name":"string"},{"kind":"terminal","name":"null"}]},"required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"label","attributes":[{"kind":"attribute","name":"for","expression":"format('%s-input', uid)","expressionPlan":{"source":"format('%s-input', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-input"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"sr-only","expression":"labelVisibility = 'sr-only'","expressionPlan":{"source":"labelVisibility = 'sr-only'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"labelVisibility"},"right":{"kind":"literal","value":"sr-only"}},"dependencies":["labelVisibility"]},"target":"class"}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"text","value":"\n *"}],"flow":{"kind":"if","test":"required","testPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"control"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"field"}],"children":[{"kind":"slot","fallback":[],"name":"start"},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"item"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"data-index","expression":"index","expressionPlan":{"source":"index","ast":{"kind":"id","name":"index"},"dependencies":["index"]}},{"kind":"attribute","name":"disabled","expression":"disabled or readonly or item.disabled","expressionPlan":{"source":"disabled or readonly or item.disabled","ast":{"kind":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"readonly"}},"right":{"kind":"member","object":{"kind":"id","name":"item"},"key":"disabled"}},"dependencies":["disabled","item.disabled","readonly"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s, press Delete or Backspace to remove', item.label)","expressionPlan":{"source":"format('%s, press Delete or Backspace to remove', item.label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s, press Delete or Backspace to remove"},{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"}]},"dependencies":["item.label"]}}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"ui-badge","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"nameExpression":{"source":"format('item-%s', item.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"item-%s"},{"kind":"member","object":{"kind":"id","name":"item"},"key":"id"}]},"dependencies":["item.id"]}}],"flow":{"kind":"each","item":"item","list":"internalItems","listPlan":{"source":"internalItems","ast":{"kind":"id","name":"internalItems"},"dependencies":["internalItems"]},"index":"index","key":"item.id","keyPlan":{"source":"item.id","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"id"},"dependencies":["item.id"]}}}],"flow":{"kind":"if","test":"multiple","testPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}}},{"kind":"element","name":"input","attributes":[{"kind":"attribute","name":"id","expression":"format('%s-input', uid)","expressionPlan":{"source":"format('%s-input', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-input"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"literal","name":"role","value":"combobox"},{"kind":"literal","name":"aria-autocomplete","value":"list"},{"kind":"literal","name":"autocomplete","value":"off"},{"kind":"attribute","name":"aria-controls","expression":"format('%s-listbox', uid)","expressionPlan":{"source":"format('%s-listbox', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-listbox"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"aria-expanded","expression":"expanded","expressionPlan":{"source":"expanded","ast":{"kind":"id","name":"expanded"},"dependencies":["expanded"]}},{"kind":"attribute","name":"aria-invalid","expression":"validationStatus = 'error'","expressionPlan":{"source":"validationStatus = 'error'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"validationStatus"},"right":{"kind":"literal","value":"error"}},"dependencies":["validationStatus"]}},{"kind":"attribute","name":"aria-busy","expression":"validationStatus = 'pending'","expressionPlan":{"source":"validationStatus = 'pending'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"validationStatus"},"right":{"kind":"literal","value":"pending"}},"dependencies":["validationStatus"]}},{"kind":"property","key":"value","name":"value","expression":"display","expressionPlan":{"source":"display","ast":{"kind":"id","name":"display"},"dependencies":["display"]}},{"kind":"attribute","name":"placeholder","expression":"placeholder","expressionPlan":{"source":"placeholder","ast":{"kind":"id","name":"placeholder"},"dependencies":["placeholder"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required and not (multiple and internalItems[0])","expressionPlan":{"source":"required and not (multiple and internalItems[0])","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"required"},"right":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"multiple"},"right":{"kind":"index","object":{"kind":"id","name":"internalItems"},"index":{"kind":"literal","value":0}}}}},"dependencies":["internalItems.0","multiple","required"]}}],"children":[],"ref":"input"},{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"hidden"},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"submitted","expressionPlan":{"source":"submitted","ast":{"kind":"id","name":"submitted"},"dependencies":["submitted"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[],"flow":{"kind":"if","test":"name and not multiple","testPlan":{"source":"name and not multiple","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"name"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"multiple"}}},"dependencies":["multiple","name"]}}},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"hidden"},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"item.value","expressionPlan":{"source":"item.value","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"value"},"dependencies":["item.value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[],"flow":{"kind":"each","item":"item","list":"internalItems","listPlan":{"source":"internalItems","ast":{"kind":"id","name":"internalItems"},"dependencies":["internalItems"]},"key":"item.id","keyPlan":{"source":"item.id","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"id"},"dependencies":["item.id"]}}}],"flow":{"kind":"if","test":"name and multiple","testPlan":{"source":"name and multiple","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"name"},"right":{"kind":"id","name":"multiple"}},"dependencies":["multiple","name"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"data-combobox-action","value":"clear"},{"kind":"literal","name":"aria-label","value":"Clear"},{"kind":"attribute","name":"disabled","expression":"disabled or readonly","expressionPlan":{"source":"disabled or readonly","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"readonly"}},"dependencies":["disabled","readonly"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"class","value":"affordance-icon"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M7 7l10 10M17 7 7 17"}],"children":[]}]}],"flow":{"kind":"if","test":"clearable","testPlan":{"source":"clearable","ast":{"kind":"id","name":"clearable"},"dependencies":["clearable"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"data-combobox-action","value":"disclosure"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"literal","name":"aria-label","value":"Show suggestions"},{"kind":"attribute","name":"aria-controls","expression":"format('%s-listbox', uid)","expressionPlan":{"source":"format('%s-listbox', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-listbox"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"disabled","expression":"disabled or readonly","expressionPlan":{"source":"disabled or readonly","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"readonly"}},"dependencies":["disabled","readonly"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"class","value":"affordance-icon"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2.25"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m6 9 6 6 6-6"}],"children":[]}]}],"flow":{"kind":"if","test":"disclosure","testPlan":{"source":"disclosure","ast":{"kind":"id","name":"disclosure"},"dependencies":["disclosure"]}}}],"ref":"field"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"help"},{"kind":"attribute","name":"id","expression":"format('%s-help', uid)","expressionPlan":{"source":"format('%s-help', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-help"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"aria-label","value":"Help"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"class","value":"help-icon"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 17h.01"}],"children":[]}]}],"flow":{"kind":"if","test":"help","testPlan":{"source":"help","ast":{"kind":"id","name":"help"},"dependencies":["help"]}}}]},{"kind":"element","name":"ui-tooltip","attributes":[{"kind":"literal","name":"trigger","value":"click"},{"kind":"attribute","name":"id","expression":"format('%s-help-text', uid)","expressionPlan":{"source":"format('%s-help-text', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-help-text"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"for","expression":"format('%s-help', uid)","expressionPlan":{"source":"format('%s-help', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-help"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"help","expressionPlan":{"source":"help","ast":{"kind":"id","name":"help"},"dependencies":["help"]}}],"children":[]}],"flow":{"kind":"if","test":"help","testPlan":{"source":"help","ast":{"kind":"id","name":"help"},"dependencies":["help"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"popup"},{"kind":"attribute","name":"hidden","expression":"not expanded","expressionPlan":{"source":"not expanded","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"expanded"}},"dependencies":["expanded"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"listbox"},{"kind":"attribute","name":"id","expression":"format('%s-listbox', uid)","expressionPlan":{"source":"format('%s-listbox', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-listbox"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s suggestions', label)","expressionPlan":{"source":"format('%s suggestions', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s suggestions"},{"kind":"id","name":"label"}]},"dependencies":["label"]}},{"kind":"attribute","name":"aria-busy","expression":"loading","expressionPlan":{"source":"loading","ast":{"kind":"id","name":"loading"},"dependencies":["loading"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"role","expression":"group.role","expressionPlan":{"source":"group.role","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"role"},"dependencies":["group.role"]}},{"kind":"attribute","name":"aria-label","expression":"group.label","expressionPlan":{"source":"group.label","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"label"},"dependencies":["group.label"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"directive","name":"value","expression":"group.name","expressionPlan":{"source":"group.name","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"name"},"dependencies":["group.name"]}}],"children":[],"flow":{"kind":"if","test":"group.name","testPlan":{"source":"group.name","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"name"},"dependencies":["group.name"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"option"},{"kind":"attribute","name":"active","expression":"row.index = active","expressionPlan":{"source":"row.index = active","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","row.index"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"attribute","name":"id","expression":"format('%s-option-%s', uid, row.index)","expressionPlan":{"source":"format('%s-option-%s', uid, row.index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s"},{"kind":"id","name":"uid"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"}]},"dependencies":["row.index","uid"]}},{"kind":"attribute","name":"aria-selected","expression":"row.selected","expressionPlan":{"source":"row.selected","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"selected"},"dependencies":["row.selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"row.disabled","expressionPlan":{"source":"row.disabled","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"disabled"},"dependencies":["row.disabled"]}},{"kind":"attribute","name":"data-index","expression":"row.index","expressionPlan":{"source":"row.index","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"},"dependencies":["row.index"]}},{"kind":"attribute","name":"aria-labelledby","expression":"row.labelledBy","expressionPlan":{"source":"row.labelledBy","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"labelledBy"},"dependencies":["row.labelledBy"]}},{"kind":"attribute","name":"aria-describedby","expression":"row.detail","expressionPlan":{"source":"row.detail","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"},"dependencies":["row.detail"]}}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"detail"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"line"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"primary"},{"kind":"attribute","name":"id","expression":"format('%s-option-%s-label', uid, row.index)","expressionPlan":{"source":"format('%s-option-%s-label', uid, row.index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s-label"},{"kind":"id","name":"uid"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"}]},"dependencies":["row.index","uid"]}},{"kind":"directive","name":"value","expression":"row.label","expressionPlan":{"source":"row.label","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"label"},"dependencies":["row.label"]}}],"children":[]},{"kind":"element","name":"ui-badge","attributes":[{"kind":"attribute","name":"tone","expression":"row.tag.tone","expressionPlan":{"source":"row.tag.tone","ast":{"kind":"member","object":{"kind":"member","object":{"kind":"id","name":"row"},"key":"tag"},"key":"tone"},"dependencies":["row.tag.tone"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"id","expression":"format('%s-option-%s-tag', uid, row.index)","expressionPlan":{"source":"format('%s-option-%s-tag', uid, row.index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s-tag"},{"kind":"id","name":"uid"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"}]},"dependencies":["row.index","uid"]}},{"kind":"directive","name":"value","expression":"row.tag.label","expressionPlan":{"source":"row.tag.label","ast":{"kind":"member","object":{"kind":"member","object":{"kind":"id","name":"row"},"key":"tag"},"key":"label"},"dependencies":["row.tag.label"]}}],"children":[]}],"flow":{"kind":"if","test":"row.tag","testPlan":{"source":"row.tag","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"tag"},"dependencies":["row.tag"]}}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"attribute","name":"id","expression":"format('%s-option-%s-description', uid, row.index)","expressionPlan":{"source":"format('%s-option-%s-description', uid, row.index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s-description"},{"kind":"id","name":"uid"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"}]},"dependencies":["row.index","uid"]}},{"kind":"directive","name":"value","expression":"row.description","expressionPlan":{"source":"row.description","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"description"},"dependencies":["row.description"]}}],"children":[],"flow":{"kind":"if","test":"row.description","testPlan":{"source":"row.description","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"description"},"dependencies":["row.description"]}}}],"flow":{"kind":"if","test":"row.detail","testPlan":{"source":"row.detail","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"},"dependencies":["row.detail"]}}},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"primary"},{"kind":"directive","name":"value","expression":"row.label","expressionPlan":{"source":"row.label","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"label"},"dependencies":["row.label"]}}],"children":[],"flow":{"kind":"if","test":"not row.detail","testPlan":{"source":"not row.detail","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"}},"dependencies":["row.detail"]}}}],"nameExpression":{"source":"format('option-%s', row.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"option-%s"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"id"}]},"dependencies":["row.id"]}}],"flow":{"kind":"each","item":"row","list":"group.rows","listPlan":{"source":"group.rows","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"rows"},"dependencies":["group.rows"]},"key":"row.id","keyPlan":{"source":"row.id","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"id"},"dependencies":["row.id"]}}}],"flow":{"kind":"each","item":"group","list":"groups","listPlan":{"source":"groups","ast":{"kind":"id","name":"groups"},"dependencies":["groups"]},"key":"group.name","keyPlan":{"source":"group.name","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"name"},"dependencies":["group.name"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"option"},{"kind":"attribute","name":"active","expression":"createIndex = active","expressionPlan":{"source":"createIndex = active","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"createIndex"},"right":{"kind":"id","name":"active"}},"dependencies":["active","createIndex"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"literal","name":"aria-selected","value":"false"},{"kind":"attribute","name":"id","expression":"format('%s-option-%s', uid, createIndex)","expressionPlan":{"source":"format('%s-option-%s', uid, createIndex)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s"},{"kind":"id","name":"uid"},{"kind":"id","name":"createIndex"}]},"dependencies":["createIndex","uid"]}},{"kind":"attribute","name":"data-index","expression":"createIndex","expressionPlan":{"source":"createIndex","ast":{"kind":"id","name":"createIndex"},"dependencies":["createIndex"]}},{"kind":"directive","name":"value","expression":"format('Create “%s”', raw)","expressionPlan":{"source":"format('Create “%s”', raw)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Create “%s”"},{"kind":"id","name":"raw"}]},"dependencies":["raw"]}}],"children":[],"flow":{"kind":"if","test":"creatable","testPlan":{"source":"creatable","ast":{"kind":"id","name":"creatable"},"dependencies":["creatable"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"message"},{"kind":"directive","name":"value","expression":"message","expressionPlan":{"source":"message","ast":{"kind":"id","name":"message"},"dependencies":["message"]}}],"children":[],"flow":{"kind":"if","test":"message","testPlan":{"source":"message","ast":{"kind":"id","name":"message"},"dependencies":["message"]}}}],"ref":"listbox"},{"kind":"slot","fallback":[],"name":"footer"}],"ref":"popup"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"message"},{"kind":"attribute","name":"id","expression":"format('%s-validation', uid)","expressionPlan":{"source":"format('%s-validation', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-validation"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"hidden","expression":"not validation.issues.length","expressionPlan":{"source":"not validation.issues.length","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"member","object":{"kind":"id","name":"validation"},"key":"issues"},"key":"length"}},"dependencies":["validation.issues.length"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"directive","name":"value","expression":"issue.message","expressionPlan":{"source":"issue.message","ast":{"kind":"member","object":{"kind":"id","name":"issue"},"key":"message"},"dependencies":["issue.message"]}}],"children":[],"flow":{"kind":"each","item":"issue","list":"validation.issues","listPlan":{"source":"validation.issues","ast":{"kind":"member","object":{"kind":"id","name":"validation"},"key":"issues"},"dependencies":["validation.issues"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sr-only"},{"kind":"literal","name":"role","value":"status"},{"kind":"literal","name":"aria-live","value":"polite"},{"kind":"literal","name":"aria-atomic","value":"true"},{"kind":"directive","name":"value","expression":"statusText","expressionPlan":{"source":"statusText","ast":{"kind":"id","name":"statusText"},"dependencies":["statusText"]}}],"children":[]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"authored-options"},{"kind":"literal","name":"hidden","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot"}],"ref":"options"}]},"declarations":[{"kind":"state","name":"internalItems","type":"list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"raw","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"display","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"selected","type":"string | null","expression":{"source":"null","ast":{"kind":"literal","value":null},"dependencies":[]}},{"kind":"state","name":"expanded","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"rows","type":"list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, selected: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"active","expression":{"source":"-1","ast":{"kind":"unary","op":"-","operand":{"kind":"literal","value":1}},"dependencies":[]}},{"kind":"state","name":"loading","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"helpOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"lookupError","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"validation","type":"object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string })), ... })","expression":{"source":"{ status: 'pristine', touched: false, dirty: false, issues: [] }","ast":{"kind":"object","pairs":[{"key":"status","value":{"kind":"literal","value":"pristine"}},{"key":"touched","value":{"kind":"literal","value":false}},{"key":"dirty","value":{"kind":"literal","value":false}},{"key":"issues","value":{"kind":"array","items":[]}}]},"dependencies":[]}},{"kind":"state","name":"uid","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"submitted","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"groups","type":"list(object({ name: string, role: group | presentation, label: string | null, rows: list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, selected: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }), index: integer, labelledBy: string | null, detail: string | null })) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"creatable","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"createIndex","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}},{"kind":"state","name":"message","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"statusText","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"validationStatus","expression":{"source":"'pristine'","ast":{"kind":"literal","value":"pristine"},"dependencies":[]}},{"kind":"event","name":"query-change","type":"object({ query: string, display: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"value-change","type":"object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic }) | list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"free-entry","type":"object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"create-entry","type":"object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"validation-change","type":"object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string, path?: list(unknown), severity?: error | warning })), output?: unknown })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"options-change","type":"list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"add-item","type":"object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }), index: integer, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"remove-item","type":"object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }), index: integer, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"create-item","type":"object({ query: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"selected-values-change","type":"object({ selectedValues: list(string), trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"method","name":"validate","exportName":"validate","returns":"promise(unknown)"},{"kind":"method","name":"focusInput","exportName":"focusInput","returns":"promise(undefined)"}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
|
|
6
|
+
const definition = {...{"contract":{"tag":"ui-combobox","props":{"allowCreate":{"type":"boolean","required":false,"target":{"attribute":"allowcreate"},"default":false},"allowFreeText":{"type":"boolean","required":false,"target":{"attribute":"allowfreetext"},"default":false},"clearable":{"type":"boolean","required":false,"target":{"attribute":"clearable"},"default":false},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"disclosure":{"type":"boolean","required":false,"target":{"attribute":"disclosure"},"default":false},"filter":{"type":{"enum":["label","none"]},"required":false,"target":{"attribute":"filter"},"default":"label"},"help":{"type":"string","required":false,"target":{"attribute":"help"},"default":""},"invalid":{"type":"boolean","required":false,"target":{"attribute":"invalid"},"default":false},"items":{"type":{"kind":"list","item":{"kind":"object","fields":[{"name":"id","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"value","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"group","type":{"kind":"terminal","name":"string"},"optional":true},{"name":"disabled","type":{"kind":"terminal","name":"boolean"},"optional":true},{"name":"description","type":{"kind":"terminal","name":"string"},"optional":true},{"name":"tag","type":{"kind":"object","fields":[{"name":"label","type":{"kind":"terminal","name":"string"},"optional":false},{"name":"tone","type":{"kind":"union","members":[{"kind":"keyword","value":"neutral"},{"kind":"keyword","value":"accent"},{"kind":"keyword","value":"info"},{"kind":"keyword","value":"success"},{"kind":"keyword","value":"warning"},{"kind":"keyword","value":"danger"}]},"optional":true}],"open":false},"optional":true}],"open":false}},"required":false,"target":{"attribute":"items"}},"label":{"type":"string","required":false,"target":{"attribute":"label"},"default":""},"labelVisibility":{"type":{"enum":["visible","sr-only"]},"required":false,"target":{"attribute":"labelvisibility"},"default":"visible"},"loading":{"type":"boolean","required":false,"target":{"attribute":"aria-busy"},"default":false},"multiple":{"type":"boolean","required":false,"target":{"attribute":"multiple"},"default":false},"name":{"type":"string","required":false,"target":{"attribute":"name"},"default":""},"openOnFocus":{"type":"boolean","required":false,"target":{"attribute":"openonfocus"},"default":false},"placeholder":{"type":"string","required":false,"target":{"attribute":"placeholder"},"default":""},"query":{"type":"string","required":false,"target":{"attribute":"query"}},"readonly":{"type":"boolean","required":false,"target":{"attribute":"readonly"},"default":false},"required":{"type":"boolean","required":false,"target":{"attribute":"required"},"default":false},"selectedValues":{"type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"required":false,"target":{"attribute":"selectedvalues"}},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"tokenSeparators":{"type":{"kind":"list","item":{"kind":"terminal","name":"string"}},"required":false,"target":{"attribute":"tokenseparators"}},"value":{"type":{"kind":"union","members":[{"kind":"terminal","name":"string"},{"kind":"terminal","name":"null"}]},"required":false,"target":{"attribute":"value"}}}},"template":{"kind":"element","name":"div","attributes":[],"children":[{"kind":"element","name":"label","attributes":[{"kind":"attribute","name":"for","expression":"format('%s-input', uid)","expressionPlan":{"source":"format('%s-input', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-input"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"sr-only","expression":"labelVisibility = 'sr-only'","expressionPlan":{"source":"labelVisibility = 'sr-only'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"labelVisibility"},"right":{"kind":"literal","value":"sr-only"}},"dependencies":["labelVisibility"]},"target":"class"}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"label","expressionPlan":{"source":"label","ast":{"kind":"id","name":"label"},"dependencies":["label"]}}],"children":[]},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"text","value":"\n *"}],"flow":{"kind":"if","test":"required","testPlan":{"source":"required","ast":{"kind":"id","name":"required"},"dependencies":["required"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"control"}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"field"}],"children":[{"kind":"slot","fallback":[],"name":"start"},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"item"},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"attribute","name":"data-index","expression":"index","expressionPlan":{"source":"index","ast":{"kind":"id","name":"index"},"dependencies":["index"]}},{"kind":"attribute","name":"disabled","expression":"disabled or readonly or item.disabled","expressionPlan":{"source":"disabled or readonly or item.disabled","ast":{"kind":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"readonly"}},"right":{"kind":"member","object":{"kind":"id","name":"item"},"key":"disabled"}},"dependencies":["disabled","item.disabled","readonly"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s, press Delete or Backspace to remove', item.label)","expressionPlan":{"source":"format('%s, press Delete or Backspace to remove', item.label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s, press Delete or Backspace to remove"},{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"}]},"dependencies":["item.label"]}}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"ui-badge","attributes":[{"kind":"directive","name":"value","expression":"item.label","expressionPlan":{"source":"item.label","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"label"},"dependencies":["item.label"]}}],"children":[]}],"nameExpression":{"source":"format('item-%s', item.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"item-%s"},{"kind":"member","object":{"kind":"id","name":"item"},"key":"id"}]},"dependencies":["item.id"]}}],"flow":{"kind":"each","item":"item","list":"internalItems","listPlan":{"source":"internalItems","ast":{"kind":"id","name":"internalItems"},"dependencies":["internalItems"]},"index":"index","key":"item.id","keyPlan":{"source":"item.id","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"id"},"dependencies":["item.id"]}}}],"flow":{"kind":"if","test":"multiple","testPlan":{"source":"multiple","ast":{"kind":"id","name":"multiple"},"dependencies":["multiple"]}}},{"kind":"element","name":"input","attributes":[{"kind":"attribute","name":"id","expression":"format('%s-input', uid)","expressionPlan":{"source":"format('%s-input', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-input"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"literal","name":"role","value":"combobox"},{"kind":"literal","name":"aria-autocomplete","value":"list"},{"kind":"literal","name":"autocomplete","value":"off"},{"kind":"attribute","name":"aria-controls","expression":"format('%s-listbox', uid)","expressionPlan":{"source":"format('%s-listbox', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-listbox"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"aria-expanded","expression":"expanded","expressionPlan":{"source":"expanded","ast":{"kind":"id","name":"expanded"},"dependencies":["expanded"]}},{"kind":"attribute","name":"aria-invalid","expression":"invalid or validationStatus = 'error'","expressionPlan":{"source":"invalid or validationStatus = 'error'","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"invalid"},"right":{"kind":"binary","op":"=","left":{"kind":"id","name":"validationStatus"},"right":{"kind":"literal","value":"error"}}},"dependencies":["invalid","validationStatus"]}},{"kind":"attribute","name":"aria-busy","expression":"loading or validationStatus = 'pending'","expressionPlan":{"source":"loading or validationStatus = 'pending'","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"binary","op":"=","left":{"kind":"id","name":"validationStatus"},"right":{"kind":"literal","value":"pending"}}},"dependencies":["loading","validationStatus"]}},{"kind":"property","key":"value","name":"value","expression":"display","expressionPlan":{"source":"display","ast":{"kind":"id","name":"display"},"dependencies":["display"]}},{"kind":"attribute","name":"placeholder","expression":"placeholder","expressionPlan":{"source":"placeholder","ast":{"kind":"id","name":"placeholder"},"dependencies":["placeholder"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"readonly","expression":"readonly","expressionPlan":{"source":"readonly","ast":{"kind":"id","name":"readonly"},"dependencies":["readonly"]}},{"kind":"attribute","name":"required","expression":"required and not (multiple and internalItems[0])","expressionPlan":{"source":"required and not (multiple and internalItems[0])","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"required"},"right":{"kind":"unary","op":"not","operand":{"kind":"binary","op":"and","left":{"kind":"id","name":"multiple"},"right":{"kind":"index","object":{"kind":"id","name":"internalItems"},"index":{"kind":"literal","value":0}}}}},"dependencies":["internalItems.0","multiple","required"]}}],"children":[],"ref":"input"},{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"hidden"},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"submitted","expressionPlan":{"source":"submitted","ast":{"kind":"id","name":"submitted"},"dependencies":["submitted"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[],"flow":{"kind":"if","test":"name and not multiple","testPlan":{"source":"name and not multiple","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"name"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"multiple"}}},"dependencies":["multiple","name"]}}},{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"input","attributes":[{"kind":"literal","name":"type","value":"hidden"},{"kind":"attribute","name":"name","expression":"name","expressionPlan":{"source":"name","ast":{"kind":"id","name":"name"},"dependencies":["name"]}},{"kind":"attribute","name":"value","expression":"item.value","expressionPlan":{"source":"item.value","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"value"},"dependencies":["item.value"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[],"flow":{"kind":"each","item":"item","list":"internalItems","listPlan":{"source":"internalItems","ast":{"kind":"id","name":"internalItems"},"dependencies":["internalItems"]},"key":"item.id","keyPlan":{"source":"item.id","ast":{"kind":"member","object":{"kind":"id","name":"item"},"key":"id"},"dependencies":["item.id"]}}}],"flow":{"kind":"if","test":"name and multiple","testPlan":{"source":"name and multiple","ast":{"kind":"binary","op":"and","left":{"kind":"id","name":"name"},"right":{"kind":"id","name":"multiple"}},"dependencies":["multiple","name"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"data-combobox-action","value":"clear"},{"kind":"literal","name":"aria-label","value":"Clear"},{"kind":"attribute","name":"disabled","expression":"disabled or readonly","expressionPlan":{"source":"disabled or readonly","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"readonly"}},"dependencies":["disabled","readonly"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"class","value":"affordance-icon"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M7 7l10 10M17 7 7 17"}],"children":[]}]}],"flow":{"kind":"if","test":"clearable","testPlan":{"source":"clearable","ast":{"kind":"id","name":"clearable"},"dependencies":["clearable"]}}},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"data-combobox-action","value":"disclosure"},{"kind":"literal","name":"tabindex","value":"-1"},{"kind":"literal","name":"aria-label","value":"Show suggestions"},{"kind":"attribute","name":"aria-controls","expression":"format('%s-listbox', uid)","expressionPlan":{"source":"format('%s-listbox', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-listbox"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"disabled","expression":"disabled or readonly","expressionPlan":{"source":"disabled or readonly","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"readonly"}},"dependencies":["disabled","readonly"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"class","value":"affordance-icon"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2.25"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"m6 9 6 6 6-6"}],"children":[]}]}],"flow":{"kind":"if","test":"disclosure","testPlan":{"source":"disclosure","ast":{"kind":"id","name":"disclosure"},"dependencies":["disclosure"]}}}],"ref":"field"},{"kind":"element","name":"button","attributes":[{"kind":"literal","name":"class","value":"help"},{"kind":"attribute","name":"id","expression":"format('%s-help', uid)","expressionPlan":{"source":"format('%s-help', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-help"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"literal","name":"type","value":"button"},{"kind":"literal","name":"aria-label","value":"Help"},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}}],"children":[{"kind":"element","name":"svg","attributes":[{"kind":"literal","name":"class","value":"help-icon"},{"kind":"literal","name":"aria-hidden","value":"true"},{"kind":"literal","name":"viewBox","value":"0 0 24 24"},{"kind":"literal","name":"fill","value":"none"},{"kind":"literal","name":"stroke","value":"currentColor"},{"kind":"literal","name":"stroke-width","value":"2"},{"kind":"literal","name":"stroke-linecap","value":"round"},{"kind":"literal","name":"stroke-linejoin","value":"round"}],"children":[{"kind":"element","name":"circle","attributes":[{"kind":"literal","name":"cx","value":"12"},{"kind":"literal","name":"cy","value":"12"},{"kind":"literal","name":"r","value":"10"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M9.1 9a3 3 0 0 1 5.8 1c0 2-3 3-3 3"}],"children":[]},{"kind":"element","name":"path","attributes":[{"kind":"literal","name":"d","value":"M12 17h.01"}],"children":[]}]}],"flow":{"kind":"if","test":"help","testPlan":{"source":"help","ast":{"kind":"id","name":"help"},"dependencies":["help"]}}}]},{"kind":"element","name":"ui-tooltip","attributes":[{"kind":"literal","name":"trigger","value":"click"},{"kind":"attribute","name":"id","expression":"format('%s-help-text', uid)","expressionPlan":{"source":"format('%s-help-text', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-help-text"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"for","expression":"format('%s-help', uid)","expressionPlan":{"source":"format('%s-help', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-help"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}}],"children":[{"kind":"element","name":"template","attributes":[{"kind":"directive","name":"value","expression":"help","expressionPlan":{"source":"help","ast":{"kind":"id","name":"help"},"dependencies":["help"]}}],"children":[]}],"flow":{"kind":"if","test":"help","testPlan":{"source":"help","ast":{"kind":"id","name":"help"},"dependencies":["help"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"popup"},{"kind":"attribute","name":"hidden","expression":"not expanded","expressionPlan":{"source":"not expanded","ast":{"kind":"unary","op":"not","operand":{"kind":"id","name":"expanded"}},"dependencies":["expanded"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"role","value":"listbox"},{"kind":"attribute","name":"id","expression":"format('%s-listbox', uid)","expressionPlan":{"source":"format('%s-listbox', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-listbox"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"aria-label","expression":"format('%s suggestions', label)","expressionPlan":{"source":"format('%s suggestions', label)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s suggestions"},{"kind":"id","name":"label"}]},"dependencies":["label"]}},{"kind":"attribute","name":"aria-busy","expression":"loading","expressionPlan":{"source":"loading","ast":{"kind":"id","name":"loading"},"dependencies":["loading"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"attribute","name":"role","expression":"group.role","expressionPlan":{"source":"group.role","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"role"},"dependencies":["group.role"]}},{"kind":"attribute","name":"aria-label","expression":"group.label","expressionPlan":{"source":"group.label","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"label"},"dependencies":["group.label"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"group"},{"kind":"directive","name":"value","expression":"group.name","expressionPlan":{"source":"group.name","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"name"},"dependencies":["group.name"]}}],"children":[],"flow":{"kind":"if","test":"group.name","testPlan":{"source":"group.name","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"name"},"dependencies":["group.name"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"option"},{"kind":"attribute","name":"active","expression":"row.index = active","expressionPlan":{"source":"row.index = active","ast":{"kind":"binary","op":"=","left":{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"},"right":{"kind":"id","name":"active"}},"dependencies":["active","row.index"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"attribute","name":"id","expression":"format('%s-option-%s', uid, row.index)","expressionPlan":{"source":"format('%s-option-%s', uid, row.index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s"},{"kind":"id","name":"uid"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"}]},"dependencies":["row.index","uid"]}},{"kind":"attribute","name":"aria-selected","expression":"row.selected","expressionPlan":{"source":"row.selected","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"selected"},"dependencies":["row.selected"]}},{"kind":"attribute","name":"aria-disabled","expression":"row.disabled","expressionPlan":{"source":"row.disabled","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"disabled"},"dependencies":["row.disabled"]}},{"kind":"attribute","name":"data-index","expression":"row.index","expressionPlan":{"source":"row.index","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"},"dependencies":["row.index"]}},{"kind":"attribute","name":"aria-labelledby","expression":"row.labelledBy","expressionPlan":{"source":"row.labelledBy","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"labelledBy"},"dependencies":["row.labelledBy"]}},{"kind":"attribute","name":"aria-describedby","expression":"row.detail","expressionPlan":{"source":"row.detail","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"},"dependencies":["row.detail"]}}],"children":[{"kind":"slot","fallback":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"detail"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"line"}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"primary"},{"kind":"attribute","name":"id","expression":"format('%s-option-%s-label', uid, row.index)","expressionPlan":{"source":"format('%s-option-%s-label', uid, row.index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s-label"},{"kind":"id","name":"uid"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"}]},"dependencies":["row.index","uid"]}},{"kind":"directive","name":"value","expression":"row.label","expressionPlan":{"source":"row.label","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"label"},"dependencies":["row.label"]}}],"children":[]},{"kind":"element","name":"ui-badge","attributes":[{"kind":"attribute","name":"tone","expression":"row.tag.tone","expressionPlan":{"source":"row.tag.tone","ast":{"kind":"member","object":{"kind":"member","object":{"kind":"id","name":"row"},"key":"tag"},"key":"tone"},"dependencies":["row.tag.tone"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"attribute","name":"id","expression":"format('%s-option-%s-tag', uid, row.index)","expressionPlan":{"source":"format('%s-option-%s-tag', uid, row.index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s-tag"},{"kind":"id","name":"uid"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"}]},"dependencies":["row.index","uid"]}},{"kind":"directive","name":"value","expression":"row.tag.label","expressionPlan":{"source":"row.tag.label","ast":{"kind":"member","object":{"kind":"member","object":{"kind":"id","name":"row"},"key":"tag"},"key":"label"},"dependencies":["row.tag.label"]}}],"children":[]}],"flow":{"kind":"if","test":"row.tag","testPlan":{"source":"row.tag","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"tag"},"dependencies":["row.tag"]}}}]},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"description"},{"kind":"attribute","name":"id","expression":"format('%s-option-%s-description', uid, row.index)","expressionPlan":{"source":"format('%s-option-%s-description', uid, row.index)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s-description"},{"kind":"id","name":"uid"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"index"}]},"dependencies":["row.index","uid"]}},{"kind":"directive","name":"value","expression":"row.description","expressionPlan":{"source":"row.description","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"description"},"dependencies":["row.description"]}}],"children":[],"flow":{"kind":"if","test":"row.description","testPlan":{"source":"row.description","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"description"},"dependencies":["row.description"]}}}],"flow":{"kind":"if","test":"row.detail","testPlan":{"source":"row.detail","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"},"dependencies":["row.detail"]}}},{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"primary"},{"kind":"directive","name":"value","expression":"row.label","expressionPlan":{"source":"row.label","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"label"},"dependencies":["row.label"]}}],"children":[],"flow":{"kind":"if","test":"not row.detail","testPlan":{"source":"not row.detail","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"id","name":"row"},"key":"detail"}},"dependencies":["row.detail"]}}}],"nameExpression":{"source":"format('option-%s', row.id)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"option-%s"},{"kind":"member","object":{"kind":"id","name":"row"},"key":"id"}]},"dependencies":["row.id"]}}],"flow":{"kind":"each","item":"row","list":"group.rows","listPlan":{"source":"group.rows","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"rows"},"dependencies":["group.rows"]},"key":"row.id","keyPlan":{"source":"row.id","ast":{"kind":"member","object":{"kind":"id","name":"row"},"key":"id"},"dependencies":["row.id"]}}}],"flow":{"kind":"each","item":"group","list":"groups","listPlan":{"source":"groups","ast":{"kind":"id","name":"groups"},"dependencies":["groups"]},"key":"group.name","keyPlan":{"source":"group.name","ast":{"kind":"member","object":{"kind":"id","name":"group"},"key":"name"},"dependencies":["group.name"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"option"},{"kind":"attribute","name":"active","expression":"createIndex = active","expressionPlan":{"source":"createIndex = active","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"createIndex"},"right":{"kind":"id","name":"active"}},"dependencies":["active","createIndex"]},"target":"class"},{"kind":"literal","name":"role","value":"option"},{"kind":"literal","name":"aria-selected","value":"false"},{"kind":"attribute","name":"id","expression":"format('%s-option-%s', uid, createIndex)","expressionPlan":{"source":"format('%s-option-%s', uid, createIndex)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-option-%s"},{"kind":"id","name":"uid"},{"kind":"id","name":"createIndex"}]},"dependencies":["createIndex","uid"]}},{"kind":"attribute","name":"data-index","expression":"createIndex","expressionPlan":{"source":"createIndex","ast":{"kind":"id","name":"createIndex"},"dependencies":["createIndex"]}},{"kind":"directive","name":"value","expression":"format('Create “%s”', raw)","expressionPlan":{"source":"format('Create “%s”', raw)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"Create “%s”"},{"kind":"id","name":"raw"}]},"dependencies":["raw"]}}],"children":[],"flow":{"kind":"if","test":"creatable","testPlan":{"source":"creatable","ast":{"kind":"id","name":"creatable"},"dependencies":["creatable"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"message"},{"kind":"directive","name":"value","expression":"message","expressionPlan":{"source":"message","ast":{"kind":"id","name":"message"},"dependencies":["message"]}}],"children":[],"flow":{"kind":"if","test":"message","testPlan":{"source":"message","ast":{"kind":"id","name":"message"},"dependencies":["message"]}}},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"message"}],"children":[{"kind":"slot","fallback":[{"kind":"text","value":"No suggestions."}],"name":"empty"}],"flow":{"kind":"if","test":"not loading and not rows[0] and not creatable and not lookupError","testPlan":{"source":"not loading and not rows[0] and not creatable and not lookupError","ast":{"kind":"binary","op":"and","left":{"kind":"binary","op":"and","left":{"kind":"binary","op":"and","left":{"kind":"unary","op":"not","operand":{"kind":"id","name":"loading"}},"right":{"kind":"unary","op":"not","operand":{"kind":"index","object":{"kind":"id","name":"rows"},"index":{"kind":"literal","value":0}}}},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"creatable"}}},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"lookupError"}}},"dependencies":["creatable","loading","lookupError","rows.0"]}}}],"ref":"listbox"},{"kind":"slot","fallback":[],"name":"footer"}],"ref":"popup"},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"message"},{"kind":"attribute","name":"id","expression":"format('%s-validation', uid)","expressionPlan":{"source":"format('%s-validation', uid)","ast":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s-validation"},{"kind":"id","name":"uid"}]},"dependencies":["uid"]}},{"kind":"attribute","name":"hidden","expression":"not validation.issues.length","expressionPlan":{"source":"not validation.issues.length","ast":{"kind":"unary","op":"not","operand":{"kind":"member","object":{"kind":"member","object":{"kind":"id","name":"validation"},"key":"issues"},"key":"length"}},"dependencies":["validation.issues.length"]}}],"children":[{"kind":"element","name":"div","attributes":[{"kind":"directive","name":"value","expression":"issue.message","expressionPlan":{"source":"issue.message","ast":{"kind":"member","object":{"kind":"id","name":"issue"},"key":"message"},"dependencies":["issue.message"]}}],"children":[],"flow":{"kind":"each","item":"issue","list":"validation.issues","listPlan":{"source":"validation.issues","ast":{"kind":"member","object":{"kind":"id","name":"validation"},"key":"issues"},"dependencies":["validation.issues"]}}}]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"sr-only"},{"kind":"literal","name":"role","value":"status"},{"kind":"literal","name":"aria-live","value":"polite"},{"kind":"literal","name":"aria-atomic","value":"true"},{"kind":"directive","name":"value","expression":"statusText","expressionPlan":{"source":"statusText","ast":{"kind":"id","name":"statusText"},"dependencies":["statusText"]}}],"children":[]},{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"authored-options"},{"kind":"literal","name":"hidden","value":""},{"kind":"literal","name":"aria-hidden","value":"true"}],"children":[{"kind":"slot"}],"ref":"options"}]},"declarations":[{"kind":"state","name":"internalItems","type":"list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"raw","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"display","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"selected","type":"string | null","expression":{"source":"null","ast":{"kind":"literal","value":null},"dependencies":[]}},{"kind":"state","name":"expanded","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"rows","type":"list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, selected: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"active","expression":{"source":"-1","ast":{"kind":"unary","op":"-","operand":{"kind":"literal","value":1}},"dependencies":[]}},{"kind":"state","name":"helpOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"lookupError","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"validation","type":"object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string })), ... })","expression":{"source":"{ status: 'pristine', touched: false, dirty: false, issues: [] }","ast":{"kind":"object","pairs":[{"key":"status","value":{"kind":"literal","value":"pristine"}},{"key":"touched","value":{"kind":"literal","value":false}},{"key":"dirty","value":{"kind":"literal","value":false}},{"key":"issues","value":{"kind":"array","items":[]}}]},"dependencies":[]}},{"kind":"state","name":"uid","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"submitted","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"groups","type":"list(object({ name: string, role: group | presentation, label: string | null, rows: list(object({ id: string, value: string, label: string, group?: string, disabled: boolean, selected: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }), index: integer, labelledBy: string | null, detail: string | null })) }))","expression":{"source":"[]","ast":{"kind":"array","items":[]},"dependencies":[]}},{"kind":"state","name":"creatable","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"state","name":"createIndex","expression":{"source":"0","ast":{"kind":"literal","value":0},"dependencies":[]}},{"kind":"state","name":"message","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"statusText","expression":{"source":"''","ast":{"kind":"literal","value":""},"dependencies":[]}},{"kind":"state","name":"validationStatus","expression":{"source":"'pristine'","ast":{"kind":"literal","value":"pristine"},"dependencies":[]}},{"kind":"event","name":"query-change","type":"object({ query: string, display: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"value-change","type":"object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic }) | list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"free-entry","type":"object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"create-entry","type":"object({ value: string | null, query: string, option: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }) | null, kind: selection | clear | free-entry | create, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"validation-change","type":"object({ status: pristine | pending | valid | warning | error, touched: boolean, dirty: boolean, issues: list(object({ message: string, path?: list(unknown), severity?: error | warning })), output?: unknown })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"options-change","type":"list(object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }))","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"add-item","type":"object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }), index: integer, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"remove-item","type":"object({ item: object({ id: string, value: string, label: string, group?: string, disabled?: boolean, description?: string, tag?: object({ label: string, tone?: neutral | accent | info | success | warning | danger }) }), index: integer, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"create-item","type":"object({ query: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"selected-values-change","type":"object({ selectedValues: list(string), trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"method","name":"validate","exportName":"validate","returns":"promise(unknown)"},{"kind":"method","name":"focusInput","exportName":"focusInput","returns":"promise(undefined)"}],"root":{"kind":"native","element":"div","choices":["div"]}},source:{file:import.meta.url},css:""};
|
|
7
7
|
|
|
8
8
|
export function createUiCombobox(options = {}) {
|
|
9
9
|
const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
|
|
@@ -160,6 +160,9 @@ export function createUiCombobox(options = {}) {
|
|
|
160
160
|
element25.setAttribute("class", "popup");
|
|
161
161
|
const element26 = document.createElement("div");
|
|
162
162
|
element26.setAttribute("role", "listbox");
|
|
163
|
+
const value8 = componentProps["loading"] === undefined ? false : componentProps["loading"];
|
|
164
|
+
if (typeof value8 === "boolean") element26.setAttribute("aria-busy", String(value8));
|
|
165
|
+
else element26.removeAttribute("aria-busy");
|
|
163
166
|
const element27 = document.createElement("div");
|
|
164
167
|
const element28 = document.createElement("div");
|
|
165
168
|
element28.setAttribute("class", "group");
|
|
@@ -204,6 +207,18 @@ export function createUiCombobox(options = {}) {
|
|
|
204
207
|
const element38 = document.createElement("div");
|
|
205
208
|
element38.setAttribute("class", "message");
|
|
206
209
|
element26.append(element38);
|
|
210
|
+
const element39 = document.createElement("div");
|
|
211
|
+
element39.setAttribute("class", "message");
|
|
212
|
+
if (slots["empty"] ?? [].length > 0) {
|
|
213
|
+
for (const child of slots["empty"] ?? []) {
|
|
214
|
+
const node = typeof child === "string" ? document.createTextNode(child) : child;
|
|
215
|
+
projected.push([node, "empty"]);
|
|
216
|
+
element39.append(node);
|
|
217
|
+
}
|
|
218
|
+
} else {
|
|
219
|
+
element39.append("No suggestions.");
|
|
220
|
+
}
|
|
221
|
+
element26.append(element39);
|
|
207
222
|
element25.append(element26);
|
|
208
223
|
if (slots["footer"] ?? [].length > 0) {
|
|
209
224
|
for (const child of slots["footer"] ?? []) {
|
|
@@ -214,30 +229,30 @@ export function createUiCombobox(options = {}) {
|
|
|
214
229
|
} else {
|
|
215
230
|
}
|
|
216
231
|
element.append(element25);
|
|
217
|
-
const element39 = document.createElement("div");
|
|
218
|
-
element39.setAttribute("class", "message");
|
|
219
232
|
const element40 = document.createElement("div");
|
|
220
|
-
|
|
221
|
-
element.append(element39);
|
|
233
|
+
element40.setAttribute("class", "message");
|
|
222
234
|
const element41 = document.createElement("div");
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
element41.setAttribute("aria-live", "polite");
|
|
226
|
-
element41.setAttribute("aria-atomic", "true");
|
|
227
|
-
element.append(element41);
|
|
235
|
+
element40.append(element41);
|
|
236
|
+
element.append(element40);
|
|
228
237
|
const element42 = document.createElement("div");
|
|
229
|
-
element42.setAttribute("class", "
|
|
230
|
-
element42.setAttribute("
|
|
231
|
-
element42.setAttribute("aria-
|
|
238
|
+
element42.setAttribute("class", "sr-only");
|
|
239
|
+
element42.setAttribute("role", "status");
|
|
240
|
+
element42.setAttribute("aria-live", "polite");
|
|
241
|
+
element42.setAttribute("aria-atomic", "true");
|
|
242
|
+
element.append(element42);
|
|
243
|
+
const element43 = document.createElement("div");
|
|
244
|
+
element43.setAttribute("class", "authored-options");
|
|
245
|
+
element43.setAttribute("hidden", "");
|
|
246
|
+
element43.setAttribute("aria-hidden", "true");
|
|
232
247
|
if (children.length > 0) {
|
|
233
248
|
for (const child of children) {
|
|
234
249
|
const node = typeof child === "string" ? document.createTextNode(child) : child;
|
|
235
250
|
projected.push([node, ""]);
|
|
236
|
-
|
|
251
|
+
element43.append(node);
|
|
237
252
|
}
|
|
238
253
|
} else {
|
|
239
254
|
}
|
|
240
|
-
element.append(
|
|
255
|
+
element.append(element43);
|
|
241
256
|
manageComponentLifecycle(element, definition, { props: componentProps, projected,
|
|
242
257
|
controller,
|
|
243
258
|
});
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
export interface UiContextMenuEventMap {
|
|
3
3
|
open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
|
|
4
4
|
close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
|
|
5
|
-
select: CustomEvent<{ readonly value: string; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
|
|
5
|
+
select: CustomEvent<{ readonly value: string; readonly checked?: boolean; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
|
|
6
6
|
}
|
|
7
7
|
export interface UiContextMenuElement extends HTMLSpanElement {
|
|
8
8
|
addEventListener<K extends keyof UiContextMenuEventMap>(type: K, listener: (this: UiContextMenuElement, event: UiContextMenuEventMap[K]) => unknown, options?: boolean | AddEventListenerOptions): void;
|
package/vanilla/UiContextMenu.js
CHANGED
|
@@ -3,7 +3,7 @@ import { manageComponentLifecycle } from "@nextwebwg/html-next/runtime";
|
|
|
3
3
|
import * as controller from "../components/ui-context-menu/ui-context-menu.js";
|
|
4
4
|
import "../styles/ui-context-menu.css";
|
|
5
5
|
|
|
6
|
-
const definition = {...{"contract":{"tag":"ui-context-menu","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu"},{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-orientation","value":"vertical"}],"children":[{"kind":"slot"}],"ref":"menu"}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select","type":"object({ value: string, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
|
|
6
|
+
const definition = {...{"contract":{"tag":"ui-context-menu","props":{"for":{"type":"string","required":false,"target":{"attribute":"for"},"default":""},"open":{"type":"boolean","required":false,"target":{"attribute":"open"},"default":false}}},"template":{"kind":"element","name":"span","attributes":[],"children":[{"kind":"element","name":"div","attributes":[{"kind":"literal","name":"class","value":"menu"},{"kind":"literal","name":"role","value":"menu"},{"kind":"literal","name":"aria-orientation","value":"vertical"}],"children":[{"kind":"slot"}],"ref":"menu"}]},"declarations":[{"kind":"state","name":"internalOpen","expression":{"source":"false","ast":{"kind":"literal","value":false},"dependencies":[]}},{"kind":"event","name":"open","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"close","type":"object({ open: boolean, reason: action | programmatic | light-dismiss | escape, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false},{"kind":"event","name":"select","type":"object({ value: string, checked?: boolean, trigger: keyboard | pointer | programmatic })","bubbles":true,"composed":true,"cancelable":false}],"root":{"kind":"native","element":"span","choices":["span"]}},source:{file:import.meta.url},css:""};
|
|
7
7
|
|
|
8
8
|
export function createUiContextMenu(options = {}) {
|
|
9
9
|
const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
|
package/vanilla/UiDialog.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
// Generated by HTML Next 1.0.0-alpha.7 for Vanilla DOM. Do not edit.
|
|
2
2
|
export interface UiDialogEventMap {
|
|
3
|
+
open: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
|
|
3
4
|
close: CustomEvent<{ readonly open: boolean; readonly reason: "action" | "programmatic" | "light-dismiss" | "escape"; readonly trigger: "keyboard" | "pointer" | "programmatic" }>;
|
|
4
5
|
}
|
|
5
6
|
export interface UiDialogElement extends HTMLDialogElement {
|
|
@@ -7,11 +8,13 @@ export interface UiDialogElement extends HTMLDialogElement {
|
|
|
7
8
|
removeEventListener<K extends keyof UiDialogEventMap>(type: K, listener: (this: UiDialogElement, event: UiDialogEventMap[K]) => unknown, options?: boolean | EventListenerOptions): void;
|
|
8
9
|
}
|
|
9
10
|
export interface UiDialogProps {
|
|
10
|
-
|
|
11
|
+
alert?: boolean | null;
|
|
12
|
+
closedby?: "any" | "closerequest" | "none" | null;
|
|
11
13
|
for?: string | null;
|
|
12
14
|
label?: string | null;
|
|
13
|
-
|
|
15
|
+
modeless?: boolean | null;
|
|
14
16
|
open?: boolean | null;
|
|
17
|
+
size?: "sm" | "md" | "lg" | "fullscreen" | null;
|
|
15
18
|
attributes?: Readonly<Record<string, string | number | boolean | null | undefined>>;
|
|
16
19
|
children?: readonly (string | Node)[];
|
|
17
20
|
slots?: Readonly<Record<string, readonly (string | Node)[]>>;
|