sygnal 5.4.0 → 6.0.0

package/dist/ui-select.cjs.js

@@ -0,0 +1,104 @@
+'use strict';
+
+var select = require('@zag-js/select');
+var zag = require('sygnal/zag');
+var sygnal = require('sygnal');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var select__namespace = /*#__PURE__*/_interopNamespaceDefault(select);
+
+/*
+ * PLAN-5 2-Z: helpers the Zag-based parts (Menu, Select, Combobox) share. '../../zag' becomes the
+ * external 'sygnal/zag' and '../../index' the external 'sygnal' in the 'sygnal/ui/menu', 'sygnal/ui/select' and 'sygnal/ui/combobox' builds.
+ */
+/** G-413: the naming props a part applies to its control (not the host) */
+const NAMING = ['aria-label', 'aria-labelledby', 'aria-describedby'];
+/**
+ * A control's (or listbox's) Zag props named from the part's props: without a label element, no
+ * aria-labelledby to it; the props' aria-label / aria-labelledby (/ aria-describedby) win
+ */
+const named = (bag, p, describe) => {
+    const a = bag.attrs;
+    if (p.label == null)
+        delete a['aria-labelledby'];
+    for (const k of NAMING)
+        if (p[k] != null && (describe || k != 'aria-describedby'))
+            a[k] = p[k];
+    if (p['aria-labelledby'] != null)
+        delete a['aria-label'];
+    return bag;
+};
+/** An item as the parts take it: a string, or { value, label?, disabled? } (Menu also { separator: true }) */
+const norm = (items) => (items || []).map((i) => (i && typeof i == 'object'
+    ? { ...i, value: String(i.value ?? ''), label: i.label ?? String(i.value ?? '') }
+    : { value: String(i), label: String(i) }));
+/** A Select / Combobox value prop as Zag's string[] (undefined: uncontrolled; null or '': none) */
+const arr = (v) => v === undefined ? undefined : v == null || v === '' ? [] : Array.isArray(v) ? v.map(String) : [String(v)];
+/** The listbox collection options for Zag's collection() */
+const collectionOf = (z, items) => z.collection({ items, itemToValue: (i) => i.value, itemToString: (i) => i.label, isItemDisabled: (i) => !!i.disabled });
+/** value-change's detail: the value (single) or the values (multiple) */
+const valueOut = (d, x) => (x.multiple ? d.value : d.value[0] ?? null);
+/** Item rows of a listbox (Select, Combobox): text + a ✓ indicator Zag hides when unselected */
+const options = (h, api) => api.collection.items.map((item) => h('div', { key: item.value, ...api.getItemProps({ item }) }, h('span', api.getItemTextProps({ item }), item.label), h('span', api.getItemIndicatorProps({ item }), '✓')));
+
+/*
+ * PLAN-5 2-Z (U-1): Select, a Zag select machine (WAI-ARIA select-only combobox + listbox) as a
+ * widget tag.
+ *
+ *   <Select className="size" label="Size" items={['S', 'M', 'L']} value={state.size} placeholder="Pick a size" name="size" />
+ *   intent: SIZE: DOM.select('.size').events('value-change').detail()   // 'M' (multiple: ['M', 'L'])
+ *
+ * Renders a label, a trigger button (role="combobox", named by the label) showing the selected
+ * label or the placeholder, the listbox (items role="option", aria-selected, a ✓ indicator Zag
+ * hides when unselected) in a positioner, and a hidden native <select> for forms (`name`).
+ * Keyboard and typeahead are Zag's. Styling hooks: `data-scope="select"` + `data-part` (root,
+ * label, control, trigger, value-text, indicator, positioner, content, item, item-text,
+ * item-indicator), `data-state`, `data-highlighted`, `data-placeholder-shown`.
+ *
+ * Props: `label`, `items` (strings or { value, label?, disabled? }), `value` (controlled: a
+ * string, or an array when `multiple`; null for none), `defaultValue`, `placeholder`, and Zag's
+ * select props (`multiple`, `name`, `form`, `disabled`, `required`, `readOnly`, `invalid`,
+ * `deselectable`, `closeOnSelect`, `loopFocus`, `positioning`, `open`, `id`). Events:
+ * `value-change` (the value, or the values when multiple), `open-change` (boolean).
+ * Commands: `open`, `close`, `clear`, `focus` (the trigger).
+ */
+const Select = /*#__PURE__*/ zag.fromZag(select__namespace, (api, p, x) => {
+    const hidden = api.getHiddenSelectProps(), v = api.value;
+    // multiple: the options' selected props carry the value (a select's value prop is one string)
+    if (x.multiple)
+        delete hidden.props.value;
+    if (p.label == null)
+        delete hidden.attrs['aria-labelledby'];
+    return sygnal.createElement('div', api.getRootProps(), p.label != null && sygnal.createElement('label', api.getLabelProps(), p.label), sygnal.createElement('div', api.getControlProps(), sygnal.createElement('button', named(api.getTriggerProps(), p, 1), sygnal.createElement('span', api.getValueTextProps(), api.valueAsString || p.placeholder || ''), sygnal.createElement('span', api.getIndicatorProps(), '▾'))), sygnal.createElement('div', api.getPositionerProps(), sygnal.createElement('div', named(api.getContentProps(), p), options(sygnal.createElement, api))), sygnal.createElement('select', hidden, sygnal.createElement('option', { value: '' }), x.items.map((i) => sygnal.createElement('option', { key: i.value, value: i.value, selected: v.includes(i.value) }, i.label))));
+}, {
+    name: 'Select',
+    $own: 1,
+    ownProps: [...NAMING, 'name'],
+    props: ({ items, label, placeholder, value, defaultValue, 'aria-label': _l, 'aria-labelledby': _b, 'aria-describedby': _d, ...p }, x) => {
+        x.items = norm(items);
+        x.multiple = !!p.multiple;
+        return { ...p, collection: collectionOf(select__namespace, x.items), value: arr(value), defaultValue: arr(defaultValue) };
+    },
+    events: { 'value-change': ['onValueChange', valueOut], 'open-change': ['onOpenChange', (d) => d.open] },
+    commands: { open: (api) => api.setOpen(true), close: (api) => api.setOpen(false), clear: (api) => api.clearValue(), focus: (api) => api.focus() },
+    fallback: (p, hh) => hh('div', null, p.label != null && hh('label', null, p.label), hh('button', { type: 'button', disabled: true }, p.placeholder || '')),
+});
+
+exports.Select = Select;
+//# sourceMappingURL=ui-select.cjs.js.map

package/dist/ui-select.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-select.cjs.js","sources":["../src/ui/zag/shared.ts","../src/ui/zag/select.ts"],"sourcesContent":["/*\n * PLAN-5 2-Z: helpers the Zag-based parts (Menu, Select, Combobox) share. '../../zag' becomes the\n * external 'sygnal/zag' and '../../index' the external 'sygnal' in the 'sygnal/ui/menu', 'sygnal/ui/select' and 'sygnal/ui/combobox' builds.\n */\n\n/** G-413: the naming props a part applies to its control (not the host) */\nexport const NAMING = ['aria-label', 'aria-labelledby', 'aria-describedby']\n\n/**\n * A control's (or listbox's) Zag props named from the part's props: without a label element, no\n * aria-labelledby to it; the props' aria-label / aria-labelledby (/ aria-describedby) win\n */\nexport const named = (bag: any, p: any, describe?: any) => {\n  const a = bag.attrs\n  if (p.label == null) delete a['aria-labelledby']\n  for (const k of NAMING) if (p[k] != null && (describe || k != 'aria-describedby')) a[k] = p[k]\n  if (p['aria-labelledby'] != null) delete a['aria-label']\n  return bag\n}\n\n/** An item as the parts take it: a string, or { value, label?, disabled? } (Menu also { separator: true }) */\nexport const norm = (items: any): any[] =>\n  (items || []).map((i: any) => (i && typeof i == 'object'\n    ? {...i, value: String(i.value ?? ''), label: i.label ?? String(i.value ?? '')}\n    : {value: String(i), label: String(i)}))\n\n/** A Select / Combobox value prop as Zag's string[] (undefined: uncontrolled; null or '': none) */\nexport const arr = (v: any): any =>\n  v === undefined ? undefined : v == null || v === '' ? [] : Array.isArray(v) ? v.map(String) : [String(v)]\n\n/** The listbox collection options for Zag's collection() */\nexport const collectionOf = (z: any, items: any[]) =>\n  z.collection({items, itemToValue: (i: any) => i.value, itemToString: (i: any) => i.label, isItemDisabled: (i: any) => !!i.disabled})\n\n/** value-change's detail: the value (single) or the values (multiple) */\nexport const valueOut = (d: any, x: any) => (x.multiple ? d.value : d.value[0] ?? null)\n\n/** Item rows of a listbox (Select, Combobox): text + a ✓ indicator Zag hides when unselected */\nexport const options = (h: any, api: any) =>\n  api.collection.items.map((item: any) =>\n    h('div', {key: item.value, ...api.getItemProps({item})},\n      h('span', api.getItemTextProps({item}), item.label),\n      h('span', api.getItemIndicatorProps({item}), '✓')))\n","/*\n * PLAN-5 2-Z (U-1): Select, a Zag select machine (WAI-ARIA select-only combobox + listbox) as a\n * widget tag.\n *\n *   <Select className=\"size\" label=\"Size\" items={['S', 'M', 'L']} value={state.size} placeholder=\"Pick a size\" name=\"size\" />\n *   intent: SIZE: DOM.select('.size').events('value-change').detail()   // 'M' (multiple: ['M', 'L'])\n *\n * Renders a label, a trigger button (role=\"combobox\", named by the label) showing the selected\n * label or the placeholder, the listbox (items role=\"option\", aria-selected, a ✓ indicator Zag\n * hides when unselected) in a positioner, and a hidden native <select> for forms (`name`).\n * Keyboard and typeahead are Zag's. Styling hooks: `data-scope=\"select\"` + `data-part` (root,\n * label, control, trigger, value-text, indicator, positioner, content, item, item-text,\n * item-indicator), `data-state`, `data-highlighted`, `data-placeholder-shown`.\n *\n * Props: `label`, `items` (strings or { value, label?, disabled? }), `value` (controlled: a\n * string, or an array when `multiple`; null for none), `defaultValue`, `placeholder`, and Zag's\n * select props (`multiple`, `name`, `form`, `disabled`, `required`, `readOnly`, `invalid`,\n * `deselectable`, `closeOnSelect`, `loopFocus`, `positioning`, `open`, `id`). Events:\n * `value-change` (the value, or the values when multiple), `open-change` (boolean).\n * Commands: `open`, `close`, `clear`, `focus` (the trigger).\n */\nimport * as select from '@zag-js/select'\nimport {fromZag} from '../../zag'\nimport {createElement as h} from '../../index'\nimport {NAMING, arr, collectionOf, named, norm, options, valueOut} from './shared'\n\nexport const Select: any = /*#__PURE__*/ fromZag(select, (api: any, p: any, x: any) => {\n  const hidden = api.getHiddenSelectProps(), v = api.value\n  // multiple: the options' selected props carry the value (a select's value prop is one string)\n  if (x.multiple) delete hidden.props.value\n  if (p.label == null) delete hidden.attrs['aria-labelledby']\n  return h('div', api.getRootProps(),\n    p.label != null && h('label', api.getLabelProps(), p.label),\n    h('div', api.getControlProps(),\n      h('button', named(api.getTriggerProps(), p, 1),\n        h('span', api.getValueTextProps(), api.valueAsString || p.placeholder || ''),\n        h('span', api.getIndicatorProps(), '▾'))),\n    h('div', api.getPositionerProps(), h('div', named(api.getContentProps(), p), options(h, api))),\n    h('select', hidden,\n      h('option', {value: ''}),\n      x.items.map((i: any) => h('option', {key: i.value, value: i.value, selected: v.includes(i.value)}, i.label))))\n}, {\n  name: 'Select',\n  $own: 1,\n  ownProps: [...NAMING, 'name'],\n  props: ({items, label, placeholder, value, defaultValue, 'aria-label': _l, 'aria-labelledby': _b, 'aria-describedby': _d, ...p}: any, x: any) => {\n    x.items = norm(items)\n    x.multiple = !!p.multiple\n    return {...p, collection: collectionOf(select, x.items), value: arr(value), defaultValue: arr(defaultValue)}\n  },\n  events: {'value-change': ['onValueChange', valueOut], 'open-change': ['onOpenChange', (d: any) => d.open]},\n  commands: {open: (api: any) => api.setOpen(true), close: (api: any) => api.setOpen(false), clear: (api: any) => api.clearValue(), focus: (api: any) => api.focus()},\n  fallback: (p: any, hh: any) => hh('div', null, p.label != null && hh('label', null, p.label), hh('button', {type: 'button', disabled: true}, p.placeholder || '')),\n})\n"],"names":["fromZag","select","h"],"mappings":"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"}

package/dist/ui-select.esm.js

@@ -0,0 +1,83 @@
+import * as select from '@zag-js/select';
+import { fromZag } from 'sygnal/zag';
+import { createElement } from 'sygnal';
+
+/*
+ * PLAN-5 2-Z: helpers the Zag-based parts (Menu, Select, Combobox) share. '../../zag' becomes the
+ * external 'sygnal/zag' and '../../index' the external 'sygnal' in the 'sygnal/ui/menu', 'sygnal/ui/select' and 'sygnal/ui/combobox' builds.
+ */
+/** G-413: the naming props a part applies to its control (not the host) */
+const NAMING = ['aria-label', 'aria-labelledby', 'aria-describedby'];
+/**
+ * A control's (or listbox's) Zag props named from the part's props: without a label element, no
+ * aria-labelledby to it; the props' aria-label / aria-labelledby (/ aria-describedby) win
+ */
+const named = (bag, p, describe) => {
+    const a = bag.attrs;
+    if (p.label == null)
+        delete a['aria-labelledby'];
+    for (const k of NAMING)
+        if (p[k] != null && (describe || k != 'aria-describedby'))
+            a[k] = p[k];
+    if (p['aria-labelledby'] != null)
+        delete a['aria-label'];
+    return bag;
+};
+/** An item as the parts take it: a string, or { value, label?, disabled? } (Menu also { separator: true }) */
+const norm = (items) => (items || []).map((i) => (i && typeof i == 'object'
+    ? { ...i, value: String(i.value ?? ''), label: i.label ?? String(i.value ?? '') }
+    : { value: String(i), label: String(i) }));
+/** A Select / Combobox value prop as Zag's string[] (undefined: uncontrolled; null or '': none) */
+const arr = (v) => v === undefined ? undefined : v == null || v === '' ? [] : Array.isArray(v) ? v.map(String) : [String(v)];
+/** The listbox collection options for Zag's collection() */
+const collectionOf = (z, items) => z.collection({ items, itemToValue: (i) => i.value, itemToString: (i) => i.label, isItemDisabled: (i) => !!i.disabled });
+/** value-change's detail: the value (single) or the values (multiple) */
+const valueOut = (d, x) => (x.multiple ? d.value : d.value[0] ?? null);
+/** Item rows of a listbox (Select, Combobox): text + a ✓ indicator Zag hides when unselected */
+const options = (h, api) => api.collection.items.map((item) => h('div', { key: item.value, ...api.getItemProps({ item }) }, h('span', api.getItemTextProps({ item }), item.label), h('span', api.getItemIndicatorProps({ item }), '✓')));
+
+/*
+ * PLAN-5 2-Z (U-1): Select, a Zag select machine (WAI-ARIA select-only combobox + listbox) as a
+ * widget tag.
+ *
+ *   <Select className="size" label="Size" items={['S', 'M', 'L']} value={state.size} placeholder="Pick a size" name="size" />
+ *   intent: SIZE: DOM.select('.size').events('value-change').detail()   // 'M' (multiple: ['M', 'L'])
+ *
+ * Renders a label, a trigger button (role="combobox", named by the label) showing the selected
+ * label or the placeholder, the listbox (items role="option", aria-selected, a ✓ indicator Zag
+ * hides when unselected) in a positioner, and a hidden native <select> for forms (`name`).
+ * Keyboard and typeahead are Zag's. Styling hooks: `data-scope="select"` + `data-part` (root,
+ * label, control, trigger, value-text, indicator, positioner, content, item, item-text,
+ * item-indicator), `data-state`, `data-highlighted`, `data-placeholder-shown`.
+ *
+ * Props: `label`, `items` (strings or { value, label?, disabled? }), `value` (controlled: a
+ * string, or an array when `multiple`; null for none), `defaultValue`, `placeholder`, and Zag's
+ * select props (`multiple`, `name`, `form`, `disabled`, `required`, `readOnly`, `invalid`,
+ * `deselectable`, `closeOnSelect`, `loopFocus`, `positioning`, `open`, `id`). Events:
+ * `value-change` (the value, or the values when multiple), `open-change` (boolean).
+ * Commands: `open`, `close`, `clear`, `focus` (the trigger).
+ */
+const Select = /*#__PURE__*/ fromZag(select, (api, p, x) => {
+    const hidden = api.getHiddenSelectProps(), v = api.value;
+    // multiple: the options' selected props carry the value (a select's value prop is one string)
+    if (x.multiple)
+        delete hidden.props.value;
+    if (p.label == null)
+        delete hidden.attrs['aria-labelledby'];
+    return createElement('div', api.getRootProps(), p.label != null && createElement('label', api.getLabelProps(), p.label), createElement('div', api.getControlProps(), createElement('button', named(api.getTriggerProps(), p, 1), createElement('span', api.getValueTextProps(), api.valueAsString || p.placeholder || ''), createElement('span', api.getIndicatorProps(), '▾'))), createElement('div', api.getPositionerProps(), createElement('div', named(api.getContentProps(), p), options(createElement, api))), createElement('select', hidden, createElement('option', { value: '' }), x.items.map((i) => createElement('option', { key: i.value, value: i.value, selected: v.includes(i.value) }, i.label))));
+}, {
+    name: 'Select',
+    $own: 1,
+    ownProps: [...NAMING, 'name'],
+    props: ({ items, label, placeholder, value, defaultValue, 'aria-label': _l, 'aria-labelledby': _b, 'aria-describedby': _d, ...p }, x) => {
+        x.items = norm(items);
+        x.multiple = !!p.multiple;
+        return { ...p, collection: collectionOf(select, x.items), value: arr(value), defaultValue: arr(defaultValue) };
+    },
+    events: { 'value-change': ['onValueChange', valueOut], 'open-change': ['onOpenChange', (d) => d.open] },
+    commands: { open: (api) => api.setOpen(true), close: (api) => api.setOpen(false), clear: (api) => api.clearValue(), focus: (api) => api.focus() },
+    fallback: (p, hh) => hh('div', null, p.label != null && hh('label', null, p.label), hh('button', { type: 'button', disabled: true }, p.placeholder || '')),
+});
+
+export { Select };
+//# sourceMappingURL=ui-select.esm.js.map

package/dist/ui-select.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-select.esm.js","sources":["../src/ui/zag/shared.ts","../src/ui/zag/select.ts"],"sourcesContent":["/*\n * PLAN-5 2-Z: helpers the Zag-based parts (Menu, Select, Combobox) share. '../../zag' becomes the\n * external 'sygnal/zag' and '../../index' the external 'sygnal' in the 'sygnal/ui/menu', 'sygnal/ui/select' and 'sygnal/ui/combobox' builds.\n */\n\n/** G-413: the naming props a part applies to its control (not the host) */\nexport const NAMING = ['aria-label', 'aria-labelledby', 'aria-describedby']\n\n/**\n * A control's (or listbox's) Zag props named from the part's props: without a label element, no\n * aria-labelledby to it; the props' aria-label / aria-labelledby (/ aria-describedby) win\n */\nexport const named = (bag: any, p: any, describe?: any) => {\n  const a = bag.attrs\n  if (p.label == null) delete a['aria-labelledby']\n  for (const k of NAMING) if (p[k] != null && (describe || k != 'aria-describedby')) a[k] = p[k]\n  if (p['aria-labelledby'] != null) delete a['aria-label']\n  return bag\n}\n\n/** An item as the parts take it: a string, or { value, label?, disabled? } (Menu also { separator: true }) */\nexport const norm = (items: any): any[] =>\n  (items || []).map((i: any) => (i && typeof i == 'object'\n    ? {...i, value: String(i.value ?? ''), label: i.label ?? String(i.value ?? '')}\n    : {value: String(i), label: String(i)}))\n\n/** A Select / Combobox value prop as Zag's string[] (undefined: uncontrolled; null or '': none) */\nexport const arr = (v: any): any =>\n  v === undefined ? undefined : v == null || v === '' ? [] : Array.isArray(v) ? v.map(String) : [String(v)]\n\n/** The listbox collection options for Zag's collection() */\nexport const collectionOf = (z: any, items: any[]) =>\n  z.collection({items, itemToValue: (i: any) => i.value, itemToString: (i: any) => i.label, isItemDisabled: (i: any) => !!i.disabled})\n\n/** value-change's detail: the value (single) or the values (multiple) */\nexport const valueOut = (d: any, x: any) => (x.multiple ? d.value : d.value[0] ?? null)\n\n/** Item rows of a listbox (Select, Combobox): text + a ✓ indicator Zag hides when unselected */\nexport const options = (h: any, api: any) =>\n  api.collection.items.map((item: any) =>\n    h('div', {key: item.value, ...api.getItemProps({item})},\n      h('span', api.getItemTextProps({item}), item.label),\n      h('span', api.getItemIndicatorProps({item}), '✓')))\n","/*\n * PLAN-5 2-Z (U-1): Select, a Zag select machine (WAI-ARIA select-only combobox + listbox) as a\n * widget tag.\n *\n *   <Select className=\"size\" label=\"Size\" items={['S', 'M', 'L']} value={state.size} placeholder=\"Pick a size\" name=\"size\" />\n *   intent: SIZE: DOM.select('.size').events('value-change').detail()   // 'M' (multiple: ['M', 'L'])\n *\n * Renders a label, a trigger button (role=\"combobox\", named by the label) showing the selected\n * label or the placeholder, the listbox (items role=\"option\", aria-selected, a ✓ indicator Zag\n * hides when unselected) in a positioner, and a hidden native <select> for forms (`name`).\n * Keyboard and typeahead are Zag's. Styling hooks: `data-scope=\"select\"` + `data-part` (root,\n * label, control, trigger, value-text, indicator, positioner, content, item, item-text,\n * item-indicator), `data-state`, `data-highlighted`, `data-placeholder-shown`.\n *\n * Props: `label`, `items` (strings or { value, label?, disabled? }), `value` (controlled: a\n * string, or an array when `multiple`; null for none), `defaultValue`, `placeholder`, and Zag's\n * select props (`multiple`, `name`, `form`, `disabled`, `required`, `readOnly`, `invalid`,\n * `deselectable`, `closeOnSelect`, `loopFocus`, `positioning`, `open`, `id`). Events:\n * `value-change` (the value, or the values when multiple), `open-change` (boolean).\n * Commands: `open`, `close`, `clear`, `focus` (the trigger).\n */\nimport * as select from '@zag-js/select'\nimport {fromZag} from '../../zag'\nimport {createElement as h} from '../../index'\nimport {NAMING, arr, collectionOf, named, norm, options, valueOut} from './shared'\n\nexport const Select: any = /*#__PURE__*/ fromZag(select, (api: any, p: any, x: any) => {\n  const hidden = api.getHiddenSelectProps(), v = api.value\n  // multiple: the options' selected props carry the value (a select's value prop is one string)\n  if (x.multiple) delete hidden.props.value\n  if (p.label == null) delete hidden.attrs['aria-labelledby']\n  return h('div', api.getRootProps(),\n    p.label != null && h('label', api.getLabelProps(), p.label),\n    h('div', api.getControlProps(),\n      h('button', named(api.getTriggerProps(), p, 1),\n        h('span', api.getValueTextProps(), api.valueAsString || p.placeholder || ''),\n        h('span', api.getIndicatorProps(), '▾'))),\n    h('div', api.getPositionerProps(), h('div', named(api.getContentProps(), p), options(h, api))),\n    h('select', hidden,\n      h('option', {value: ''}),\n      x.items.map((i: any) => h('option', {key: i.value, value: i.value, selected: v.includes(i.value)}, i.label))))\n}, {\n  name: 'Select',\n  $own: 1,\n  ownProps: [...NAMING, 'name'],\n  props: ({items, label, placeholder, value, defaultValue, 'aria-label': _l, 'aria-labelledby': _b, 'aria-describedby': _d, ...p}: any, x: any) => {\n    x.items = norm(items)\n    x.multiple = !!p.multiple\n    return {...p, collection: collectionOf(select, x.items), value: arr(value), defaultValue: arr(defaultValue)}\n  },\n  events: {'value-change': ['onValueChange', valueOut], 'open-change': ['onOpenChange', (d: any) => d.open]},\n  commands: {open: (api: any) => api.setOpen(true), close: (api: any) => api.setOpen(false), clear: (api: any) => api.clearValue(), focus: (api: any) => api.focus()},\n  fallback: (p: any, hh: any) => hh('div', null, p.label != null && hh('label', null, p.label), hh('button', {type: 'button', disabled: true}, p.placeholder || '')),\n})\n"],"names":["h"],"mappings":"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"}