@ui-sdk/web 0.0.0-stage → 0.1.0-beta.1

package/dist/rating.d.ts

@@ -0,0 +1,2 @@
+declare function defineRatingElements(): void;
+export { defineRatingElements };

package/dist/rating.js

@@ -0,0 +1,64 @@
+// src/rating.ts
+import { rating } from "@ui-sdk/core/rating";
+import { createParts } from "./define-element.js";
+import { element, templateOf } from "./list.js";
+var owner = "ui-rating";
+function defineRatingElements() {
+  createParts(rating, {
+    root: {
+      tag: owner,
+      formAssociated: true,
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value)
+        }
+      },
+      api: ["getValue", "setValue", "focus"],
+      render(el, { api }) {
+        renderStars(el, api);
+        const observer = new MutationObserver(() => renderStars(el, api));
+        observer.observe(el, { attributeFilter: ["max", "step"] });
+        return () => observer.disconnect();
+      }
+    },
+    item: "ui-rating-item",
+    radio: "ui-rating-radio"
+  });
+}
+function renderStars(el, api) {
+  const items = [...el.querySelectorAll(":scope > ui-rating-item")];
+  const max = api.internal.max();
+  for (const item of items.slice(max)) {
+    item.remove();
+  }
+  for (let index = 1; index <= max; index++) {
+    let item = items[index - 1];
+    if (!item) {
+      item = element(
+        "ui-rating-item",
+        { index: String(index) },
+        void 0,
+        templateOf(el)
+      );
+      el.append(item);
+    }
+    if (item.getAttribute("index") !== String(index)) {
+      item.setAttribute("index", String(index));
+    }
+    renderRadios(item, api.internal.values(index).map(String));
+  }
+}
+function renderRadios(item, values) {
+  const radios = [...item.querySelectorAll(":scope > ui-rating-radio")];
+  if (radios.map((radio) => radio.getAttribute("value")).join() === values.join()) {
+    return;
+  }
+  for (const radio of radios) {
+    radio.remove();
+  }
+  item.append(...values.map((value) => element("ui-rating-radio", { value })));
+}
+export {
+  defineRatingElements
+};

package/dist/resizable.d.ts

@@ -0,0 +1,2 @@
+declare function defineResizableElements(): void;
+export { defineResizableElements };

package/dist/resizable.js

@@ -0,0 +1,42 @@
+// src/resizable.ts
+import { resizable } from "@ui-sdk/core/resizable";
+import { createParts } from "./define-element.js";
+function defineResizableElements() {
+  createParts(resizable, {
+    root: {
+      tag: "ui-resizable",
+      display: "block",
+      // `layout` is live: setting the property or the attribute resizes the
+      // panels, like the controller, and fires `layoutchange`. A layout can't be
+      // cleared, so removing the attribute leaves the panels where they are.
+      state: {
+        layout: {
+          get: (api) => api.getLayout(),
+          set: (api, layout) => {
+            if (Array.isArray(layout)) {
+              api.setLayout(layout);
+            }
+          }
+        }
+      },
+      api: [
+        "getLayout",
+        "setLayout",
+        "collapse",
+        "expand",
+        "resize",
+        "isCollapsed"
+      ]
+    },
+    panel: {
+      tag: "ui-resizable-panel",
+      display: "block",
+      // Its `id` keys its size in a saved layout.
+      kinds: { id: "string" }
+    },
+    handle: { tag: "ui-resizable-handle", display: "block" }
+  });
+}
+export {
+  defineResizableElements
+};

package/dist/scroll-area.d.ts

@@ -0,0 +1,2 @@
+declare function defineScrollAreaElements(): void;
+export { defineScrollAreaElements };

package/dist/scroll-area.js

@@ -0,0 +1,45 @@
+// src/scroll-area.ts
+import { scrollArea } from "@ui-sdk/core/scroll-area";
+import { createParts, wrappedButton } from "./define-element.js";
+var owner = "ui-scroll-area";
+var thumbAxis = (el) => {
+  const orientation = el.closest("ui-scroll-area-scrollbar")?.getAttribute("orientation") ?? "vertical";
+  return { id: orientation, orientation };
+};
+function defineScrollAreaElements() {
+  createParts(scrollArea, {
+    root: {
+      tag: owner,
+      display: "block",
+      api: [
+        "scrollToEnd",
+        "scrollToStart",
+        "isAtEnd",
+        "isAtStart",
+        "isSticking"
+      ]
+    },
+    viewport: { tag: "ui-scroll-area-viewport", display: "block" },
+    content: { tag: "ui-scroll-area-content", display: "block" },
+    scrollbar: {
+      tag: "ui-scroll-area-scrollbar",
+      display: "block",
+      context: (el) => ({ id: el.getAttribute("orientation") ?? "vertical" })
+    },
+    thumb: {
+      tag: "ui-scroll-area-thumb",
+      display: "block",
+      context: thumbAxis
+    },
+    corner: { tag: "ui-scroll-area-corner", display: "block" },
+    // A wrapper, so the button stays a real button with its built-in behavior.
+    "scroll-to-end": {
+      tag: "ui-scroll-area-scroll-to-end",
+      display: "contents",
+      target: wrappedButton
+    }
+  });
+}
+export {
+  defineScrollAreaElements
+};

package/dist/segmented-control.d.ts

@@ -0,0 +1,2 @@
+declare function defineSegmentedControlElements(): void;
+export { defineSegmentedControlElements };

package/dist/segmented-control.js

@@ -0,0 +1,28 @@
+// src/segmented-control.ts
+import {
+  segmentedControl
+} from "@ui-sdk/core/segmented-control";
+import { createParts } from "./define-element.js";
+function defineSegmentedControlElements() {
+  createParts(segmentedControl, {
+    root: {
+      tag: "ui-segmented-control",
+      defaults: { loop: true },
+      display: "block",
+      formAssociated: true,
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value)
+        }
+      },
+      api: ["getValue", "setValue", "focus"]
+    },
+    // Form-associated, so a <label> around or pointing at an item checks it.
+    item: { tag: "ui-segmented-control-item", formAssociated: true },
+    indicator: "ui-segmented-control-indicator"
+  });
+}
+export {
+  defineSegmentedControlElements
+};

package/dist/select.d.ts

@@ -0,0 +1,2 @@
+declare function defineSelectElements(): void;
+export { defineSelectElements };

package/dist/select.js

@@ -0,0 +1,239 @@
+// src/select.ts
+import {
+  select
+} from "@ui-sdk/core/select";
+import {
+  selectAllKey,
+  selectItemIcons,
+  selectSelectAll
+} from "@ui-sdk/core/renderer";
+import {
+  autoId,
+  createParts,
+  wrappedButton,
+  wrappedChild
+} from "./define-element.js";
+import { popupKinds, popupState, sheetPortal } from "./popup.js";
+import {
+  adoptDefaultValue,
+  copy,
+  itemText,
+  listAttribute,
+  renderData,
+  renderListItems,
+  stashedEmpty,
+  templateOf,
+  valuesOf
+} from "./list.js";
+var owner = "ui-select";
+var generated = /* @__PURE__ */ new WeakMap();
+var automatic = /* @__PURE__ */ new WeakSet();
+var markupLists = /* @__PURE__ */ new WeakMap();
+function defineSelectElements() {
+  createParts(select, {
+    root: {
+      tag: owner,
+      defaults: { loop: true, dismissible: true },
+      formAssociated: true,
+      display: "contents",
+      kinds: popupKinds,
+      // A filter function is a property; the attribute takes the named modes.
+      properties: ["filter"],
+      options: (el) => {
+        const data = el;
+        const multiple = el.hasAttribute("multiple") && el.getAttribute("multiple") !== "false";
+        const start = el.getAttribute("default-value") ?? el.getAttribute("value");
+        const items = data.items ?? optionItems(el);
+        const toValues = (keys) => valuesOf(keys, items, data.itemToValue);
+        return {
+          items,
+          ...(typeof data.filter === "function" || data.filter === false) && {
+            filter: data.filter
+          },
+          itemToValue: data.itemToValue,
+          itemToLabel: data.itemToLabel,
+          isItemEqualToValue: data.isItemEqualToValue,
+          container: void 0,
+          ...start !== null && {
+            defaultValue: multiple ? toValues(listAttribute(start)) : toValues([start])[0]
+          }
+        };
+      },
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          // A string names items by key, comma-separated with multiple.
+          set: (api, value) => {
+            if (typeof value !== "string") {
+              return api.setValue(value);
+            }
+            const keys = api.internal.options().multiple ? listAttribute(value) : [value];
+            const found = keys.map(
+              (key) => api.internal.listbox.valueOf(key) ?? key
+            );
+            api.setValue(
+              api.internal.options().multiple ? found : found[0] ?? null
+            );
+          }
+        },
+        query: {
+          get: (api) => api.getQuery(),
+          set: (api, query) => api.setQuery(query ?? "")
+        },
+        ...popupState
+      },
+      api: [
+        "isOpen",
+        "setOpen",
+        "open",
+        "close",
+        "toggle",
+        "getValue",
+        "setValue",
+        "clear",
+        "getQuery",
+        "setQuery",
+        "focus"
+      ],
+      portal: sheetPortal("ui-select-viewport"),
+      // Runs again whenever `items` is set.
+      render(el, { api, subscribe }) {
+        const target = el;
+        const toKey = api.internal.keyOf;
+        const items = target.items ?? optionItems(el);
+        const content = generated.get(el);
+        const template = templateOf(el);
+        if (!items) {
+          content?.remove();
+          generated.delete(el);
+          return;
+        }
+        adoptDefaultValue(el, items, api);
+        if (content) {
+          content.replaceChildren(
+            ...renderListItems("ui-select", items, toKey, template)
+          );
+          return;
+        }
+        const markup = el.querySelector(":scope > ui-select-content");
+        if (markup && !markupLists.has(el)) {
+          markupLists.set(el, markup.querySelector("ui-select-list"));
+        }
+        if (markupLists.has(el)) {
+          renderSearched(target, api);
+          return subscribe(() => renderSearched(target, api));
+        }
+        const created = copy(template, "ui-select-content", false);
+        created.append(...renderListItems("ui-select", items, toKey, template));
+        generated.set(el, created);
+        el.append(created);
+      }
+    },
+    label: { tag: "ui-select-label", display: "block" },
+    // A wrapper, so the trigger stays a real button. An empty button shows the value.
+    trigger: {
+      tag: "ui-select-trigger",
+      display: "contents",
+      target: wrappedButton,
+      render(el) {
+        const target = wrappedButton(el);
+        if (target && !target.childNodes.length) {
+          target.append(document.createElement("ui-select-value"));
+        }
+      }
+    },
+    value: {
+      tag: "ui-select-value",
+      rebind: ["placeholder", "maxLabels", "getMoreLabel"],
+      render(el) {
+        if (!el.childNodes.length && !el.hasAttribute("as-child")) {
+          automatic.add(el);
+        }
+      },
+      context: (el) => ({ text: automatic.has(el) }),
+      kinds: { text: null }
+    },
+    clear: {
+      tag: "ui-select-clear",
+      display: "contents",
+      target: wrappedButton
+    },
+    content: { tag: "ui-select-content", kinds: popupKinds },
+    list: { tag: "ui-select-list", display: "block" },
+    // A wrapper, so the search field stays a real input.
+    input: {
+      tag: "ui-select-input",
+      display: "contents",
+      target: wrappedChild("input")
+    },
+    empty: { tag: "ui-select-empty", ...stashedEmpty },
+    status: { tag: "ui-select-status", display: "block" },
+    // Its text, with what the search matched in <mark>. It holds text only.
+    "item-text": { tag: "ui-select-item-text", ...itemText },
+    // Selects every item that matches, in its <ui-select-group> or in the whole list.
+    "select-all": {
+      tag: "ui-select-select-all",
+      display: "block",
+      feature: selectSelectAll,
+      context: (el) => {
+        const group = el.closest("ui-select-group");
+        return { id: selectAllKey(group ? autoId(group) : void 0) };
+      }
+    },
+    item: { tag: "ui-select-item", display: "block", properties: ["value"] },
+    "item-indicator": "ui-select-item-indicator",
+    // An icon inside an item. Screen readers, typeahead and the search skip it.
+    "item-icon": { tag: "ui-select-item-icon", feature: selectItemIcons },
+    // The selected item's icon, copied from its <ui-select-item-icon>, like before the value in the trigger.
+    "value-icon": { tag: "ui-select-value-icon", feature: selectItemIcons },
+    group: { tag: "ui-select-group", display: "block" },
+    "group-label": { tag: "ui-select-group-label", display: "block" },
+    separator: { tag: "ui-select-separator", display: "block" },
+    arrow: { tag: "ui-select-arrow", display: "block" }
+  });
+}
+function renderSearched(el, api) {
+  const list = markupLists.get(el);
+  const items = el.items ?? optionItems(el);
+  if (!list || !items) {
+    return;
+  }
+  const visible = api.internal.listbox.visibleData()?.list ?? items;
+  renderData(list, "ui-select", visible, templateOf(el), api.internal.keyOf);
+}
+var fromOptions = /* @__PURE__ */ new WeakMap();
+function optionItems(el) {
+  if (!fromOptions.has(el)) {
+    fromOptions.set(el, readOptions(el));
+  }
+  return fromOptions.get(el);
+}
+function readOptions(el) {
+  const children = Array.from(el.children).filter(
+    (child) => child.localName === "option" || child.localName === "optgroup"
+  );
+  if (!children.length) {
+    return void 0;
+  }
+  const read = (option) => ({
+    value: option.value,
+    label: option.label || option.textContent?.trim() || option.value,
+    disabled: option.disabled || void 0
+  });
+  const items = children.map((child) => {
+    ;
+    child.hidden = true;
+    if (child instanceof HTMLOptGroupElement) {
+      return {
+        type: "group",
+        label: child.label,
+        items: Array.from(child.querySelectorAll("option")).map(read)
+      };
+    }
+    return read(child);
+  });
+  return items;
+}
+export {
+  defineSelectElements
+};

package/dist/separator.d.ts

@@ -0,0 +1,2 @@
+declare function defineSeparatorElements(): void;
+export { defineSeparatorElements };

package/dist/separator.js

@@ -0,0 +1,11 @@
+// src/separator.ts
+import { separator } from "@ui-sdk/core/separator";
+import { createParts } from "./define-element.js";
+function defineSeparatorElements() {
+  createParts(separator, {
+    root: { tag: "ui-separator", display: "block" }
+  });
+}
+export {
+  defineSeparatorElements
+};

package/dist/slider.d.ts

@@ -0,0 +1,2 @@
+declare function defineSliderElements(): void;
+export { defineSliderElements };

package/dist/slider.js

@@ -0,0 +1,77 @@
+// src/slider.ts
+import { attrs, partState } from "@ui-sdk/core/renderer";
+import { slider } from "@ui-sdk/core/slider";
+import { showDefaultText } from "./default-text.js";
+import { createParts } from "./define-element.js";
+import { forwardAttributes } from "./forward-attributes.js";
+var owner = "ui-slider";
+function thumbIndex(el) {
+  const own = el.closest("ui-slider-thumb");
+  if (!own) {
+    return {};
+  }
+  const explicit = own.getAttribute("index");
+  const root = own.closest(owner);
+  const thumbs = root ? Array.from(root.querySelectorAll("ui-slider-thumb")) : [own];
+  const index = explicit === null ? Math.max(0, thumbs.indexOf(own)) : Number(explicit);
+  return { index, id: String(index) };
+}
+var inputAttributes = ["aria-label", "aria-labelledby", "aria-describedby"];
+function defineSliderElements() {
+  createParts(slider, {
+    root: {
+      tag: owner,
+      display: "block",
+      formAssociated: true,
+      // The framework adapters pass it, never an attribute or a property.
+      kinds: { thumbInputId: null },
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value)
+        }
+      },
+      api: ["getValue", "setValue", "focus"],
+      // Empty values show the formatted value, and inside a thumb, that thumb's.
+      render(el, instance) {
+        return showDefaultText(el, instance, "ui-slider-value", (value) => {
+          if (!value.closest("ui-slider-thumb")) {
+            return partState(instance.part("value", {})).text;
+          }
+          return String(
+            attrs(instance.part("thumb-input", thumbIndex(value)))["aria-valuetext"]
+          );
+        });
+      }
+    },
+    control: { tag: "ui-slider-control", display: "block" },
+    track: { tag: "ui-slider-track", display: "block" },
+    indicator: { tag: "ui-slider-indicator", display: "block" },
+    thumb: {
+      tag: "ui-slider-thumb",
+      display: "block",
+      context: thumbIndex,
+      // Adds the range input that takes focus, named by the thumb's own label.
+      render(el) {
+        if (el.querySelector(":scope > ui-slider-thumb-input")) {
+          return;
+        }
+        const wrapper = document.createElement("ui-slider-thumb-input");
+        const input = document.createElement("input");
+        forwardAttributes(el, input, inputAttributes);
+        wrapper.append(input);
+        el.append(wrapper);
+      }
+    },
+    "thumb-input": {
+      tag: "ui-slider-thumb-input",
+      display: "contents",
+      context: thumbIndex,
+      target: (el) => el.querySelector("input")
+    },
+    value: { tag: "ui-slider-value", display: "block" }
+  });
+}
+export {
+  defineSliderElements
+};

package/dist/tabs.d.ts

@@ -0,0 +1,2 @@
+declare function defineTabsElements(): void;
+export { defineTabsElements };

package/dist/tabs.js

@@ -0,0 +1,37 @@
+// src/tabs.ts
+import { tabs } from "@ui-sdk/core/tabs";
+import { createParts, wrappedButton } from "./define-element.js";
+function defineTabsElements() {
+  createParts(tabs, {
+    root: {
+      tag: "ui-tabs",
+      display: "block",
+      defaults: { loop: true },
+      // `value` is live: setting the property or the attribute selects a tab,
+      // like a controller, and fires `valuechange`.
+      state: {
+        value: {
+          get: (api) => api.getValue(),
+          set: (api, value) => api.setValue(value)
+        }
+      },
+      api: ["getValue", "setValue", "select", "focus"]
+    },
+    list: { tag: "ui-tabs-list", display: "block" },
+    // A wrapper, so the tab stays a real button with its built-in behavior. It
+    // has no role, so the tab list still sees its tabs as direct children.
+    tab: {
+      tag: "ui-tabs-tab",
+      display: "contents",
+      target: wrappedButton,
+      render: (el) => el.setAttribute("role", "none")
+    },
+    // An icon inside a tab's button. Screen readers skip it.
+    "tab-icon": "ui-tabs-tab-icon",
+    indicator: { tag: "ui-tabs-indicator", display: "block" },
+    panel: { tag: "ui-tabs-panel", display: "block" }
+  });
+}
+export {
+  defineTabsElements
+};

package/dist/timeline.d.ts

@@ -0,0 +1,2 @@
+declare function defineTimelineElements(): void;
+export { defineTimelineElements };

package/dist/timeline.js

@@ -0,0 +1,27 @@
+// src/timeline.ts
+import { timeline } from "@ui-sdk/core/timeline";
+import { createParts } from "./define-element.js";
+function defineTimelineElements() {
+  createParts(timeline, {
+    root: {
+      tag: "ui-timeline",
+      display: "block",
+      defaults: { loop: true },
+      api: ["focus"]
+    },
+    item: { tag: "ui-timeline-item", display: "block" },
+    marker: { tag: "ui-timeline-marker", display: "block" },
+    connector: { tag: "ui-timeline-connector", display: "block" },
+    // Binds to the `<time>` inside it, so its `datetime` stays machine readable.
+    time: {
+      tag: "ui-timeline-time",
+      display: "block",
+      target: (el) => el.querySelector(":scope > time") ?? el
+    },
+    title: { tag: "ui-timeline-title", display: "block" },
+    description: { tag: "ui-timeline-description", display: "block" }
+  });
+}
+export {
+  defineTimelineElements
+};

package/dist/toast.d.ts

@@ -0,0 +1,20 @@
+import { createToaster as createCoreToaster, type Toaster } from "@ui-sdk/core/toast";
+/**
+ * What toasts can say on the web: text, or a node.
+ * @stable
+ */
+type ToastContent = string | Node;
+declare function defineToastElements(): void;
+/**
+ * Shows a toast from anywhere: `toast("Saved")`, `toast.success(...)`,
+ * `toast.promise(save(), { loading, success, error })`. Content is text or a node.
+ * @stable
+ */
+declare const toast: Toaster<ToastContent>;
+/**
+ * Creates a queue of toasts and the function that adds to it, for a second
+ * region with its own toasts. Pass it to that region as `toaster`.
+ * @stable
+ */
+declare const createToaster: <Content = ToastContent>(options?: Parameters<typeof createCoreToaster>[0]) => Toaster<Content>;
+export { createToaster, defineToastElements, toast, type ToastContent };