@realmorg/ui 0.0.0-stage → 2.0.0-alpha.2

package/components/tabs.html

@@ -0,0 +1,164 @@
+<custom-element name="ui-tabs">
+  <script>
+    const props = defineProps({
+      value: prop.string(),
+      orientation: prop.enum(["horizontal", "vertical"]).default("horizontal"),
+    });
+
+    const parts = useChildren("ui-tabs-list, ui-tabs-content", ["value", "disabled"]);
+    const tabs = useState({
+      get orientation() {
+        return props.orientation;
+      },
+      get focusgroup() {
+        return `tablist ${props.orientation === "vertical" ? "block" : "inline"} wrap`;
+      },
+      get triggers() {
+        return parts.flatMap((part) => [...part.querySelectorAll("ui-tabs-trigger")]);
+      },
+      get current() {
+        const enabled = this.triggers.filter((trigger) => !trigger.hasAttribute("disabled")).map((trigger) => trigger.getAttribute("value"));
+        return enabled.includes(props.value) ? props.value : (enabled[0] ?? null);
+      },
+    });
+
+    function select(value) {
+      if (value === tabs.current) return;
+      props.value = value;
+      dispatch("change");
+    }
+
+    observe(() => {
+      for (const content of parts.filter((part) => part.localName === "ui-tabs-content")) {
+        const value = content.getAttribute("value");
+        content.hidden = value !== tabs.current;
+        content.ariaLabelledByElements = tabs.triggers.filter((trigger) => trigger.getAttribute("value") === value);
+      }
+    });
+  </script>
+
+  <style>
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 2);
+    }
+    :host(:state(attr-orientation-is-vertical)) {
+      flex-direction: row;
+      --ui-tabs-list-direction: column;
+      --ui-tabs-list-height: fit-content;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-tabs-list">
+  <style>
+    :host {
+      display: block;
+      width: fit-content;
+    }
+    [role="tablist"] {
+      display: inline-flex;
+      flex-direction: var(--ui-tabs-list-direction, row);
+      height: var(--ui-tabs-list-height, calc(var(--spacing) * 9));
+      align-items: center;
+      justify-content: center;
+      padding: 3px;
+      box-sizing: border-box;
+      border-radius: var(--radius-lg);
+      background: var(--muted);
+      color: var(--muted-foreground);
+    }
+  </style>
+
+  <div role="tablist" part="list" _aria-orientation="#tabs.orientation" _focusgroup="#tabs.focusgroup"><slot></slot></div>
+</custom-element>
+
+<custom-element name="ui-tabs-trigger">
+  <script>
+    const props = defineProps({ value: prop.string(), disabled: prop.boolean() });
+    const tabs = lookup("tabs");
+    const tab = useState({
+      get selected() {
+        return props.value === tabs.current;
+      },
+      get tabindex() {
+        return this.selected ? 0 : -1;
+      },
+    });
+  </script>
+
+  <style>
+    :host {
+      display: flex;
+      flex: 1;
+      align-self: stretch;
+    }
+    button {
+      all: unset;
+      box-sizing: border-box;
+      display: inline-flex;
+      flex: 1;
+      height: calc(100% - 1px);
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--spacing) * 1.5);
+      padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+      border: 1px solid transparent;
+      border-radius: var(--radius-md);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      white-space: nowrap;
+      color: color-mix(in oklab, var(--foreground) 60%, transparent);
+      cursor: pointer;
+      transition: color var(--default-transition-duration), box-shadow var(--default-transition-duration);
+    }
+    button:hover {
+      color: var(--foreground);
+    }
+    button[aria-selected="true"] {
+      background: var(--background);
+      color: var(--foreground);
+      box-shadow: var(--shadow-xs);
+    }
+    button:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    button:disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      flex-shrink: 0;
+    }
+  </style>
+
+  <button type="button"
+    role="tab"
+    part="trigger"
+    _aria-selected="#tab.selected"
+    _tabindex="#tab.tabindex"
+    _disabled="@disabled"
+    onclick="select(props.value)"
+    onfocus="select(props.value)"><slot></slot></button>
+</custom-element>
+
+<custom-element name="ui-tabs-content" role="tabpanel">
+  <style>
+    :host {
+      display: block;
+      flex: 1;
+      outline: none;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/textarea.html

@@ -0,0 +1,68 @@
+<custom-element name="ui-textarea" form-associated delegates-focus>
+  <script>
+    defineProps({
+      value: prop.string().default(""),
+      placeholder: prop.string(),
+      rows: prop.number().int().min(1).default(3),
+      minlength: prop.number(),
+      maxlength: prop.number(),
+      disabled: prop.boolean(),
+      readonly: prop.boolean(),
+      required: prop.boolean(),
+      invalid: prop.boolean(),
+      label: prop.string().attribute("aria-label"),
+    });
+  </script>
+
+  <style>
+    :host {
+      display: block;
+    }
+    textarea {
+      box-sizing: border-box;
+      display: block;
+      width: 100%;
+      min-height: calc(var(--spacing) * 16);
+      padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+      border: 1px solid var(--input);
+      border-radius: var(--radius-md);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-size: var(--text-sm);
+      box-shadow: var(--shadow-xs);
+      outline: none;
+      field-sizing: content;
+      resize: vertical;
+    }
+    textarea::placeholder {
+      color: var(--muted-foreground);
+    }
+    textarea:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    textarea:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    textarea[aria-invalid="true"] {
+      border-color: var(--destructive);
+    }
+  </style>
+
+  <textarea
+    ref="control"
+    _aria-label="@label"
+    part="textarea"
+    _value="@value"
+    _placeholder="@placeholder"
+    _rows="@rows"
+    _minlength="@minlength"
+    _maxlength="@maxlength"
+    _disabled="@disabled"
+    _readonly="@readonly"
+    _required="@required"
+    _aria-invalid="@invalid"
+></textarea>
+</custom-element>

package/components/toaster.html

@@ -0,0 +1,128 @@
+<custom-element name="ui-toaster">
+  <script>
+    const props = defineProps({
+      position: prop.enum(["bottom-right", "bottom-left", "bottom-center", "top-right", "top-left", "top-center"]).default("bottom-right"),
+      duration: prop.number().min(0).default(4000),
+    });
+
+    const toasts = useState({ list: [] });
+    const timers = new Map();
+    let counter = 0;
+
+    function dismiss(toast) {
+      clearTimeout(timers.get(toast.id));
+      timers.delete(toast.id);
+      const index = toasts.list.findIndex((item) => item.id === toast.id);
+      if (index !== -1) toasts.list.splice(index, 1);
+    }
+
+    function add(detail = {}) {
+      const toast = {
+        id: ++counter,
+        title: detail.title ?? "",
+        description: detail.description ?? "",
+        variant: detail.variant ?? "default",
+      };
+      toasts.list.push(toast);
+      const duration = detail.duration ?? props.duration;
+      if (duration > 0) timers.set(toast.id, setTimeout(() => dismiss(toast), duration));
+      return toast.id;
+    }
+
+    defineMethods({ toast: add, dismiss: (id) => dismiss({ id }) });
+    listen("toast", (event) => add(event.detail), document);
+    onConnected(() => {
+      observe(() => {
+        const region = refs.region;
+        const open = toasts.list.length > 0;
+        if (!region.isConnected) return;
+        if (open && !region.matches(":popover-open")) region.showPopover();
+        if (!open && region.matches(":popover-open")) region.hidePopover();
+      });
+    });
+  </script>
+
+  <style>
+    ol {
+      position: fixed;
+      inset: auto calc(var(--spacing) * 4) calc(var(--spacing) * 4) auto;
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 2);
+      width: min(calc(var(--spacing) * 88), calc(100% - calc(var(--spacing) * 8)));
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      list-style: none;
+      overflow: visible;
+    }
+    :host(:state(attr-position-is-bottom-left)) ol {
+      inset: auto auto calc(var(--spacing) * 4) calc(var(--spacing) * 4);
+    }
+    :host(:state(attr-position-is-bottom-center)) ol {
+      inset: auto 0 calc(var(--spacing) * 4) 0;
+      margin: 0 auto;
+    }
+    :host(:state(attr-position-is-top-right)) ol {
+      inset: calc(var(--spacing) * 4) calc(var(--spacing) * 4) auto auto;
+    }
+    :host(:state(attr-position-is-top-left)) ol {
+      inset: calc(var(--spacing) * 4) auto auto calc(var(--spacing) * 4);
+    }
+    :host(:state(attr-position-is-top-center)) ol {
+      inset: calc(var(--spacing) * 4) 0 auto 0;
+      margin: 0 auto;
+    }
+    li {
+      position: relative;
+      display: grid;
+      gap: calc(var(--spacing) * 1);
+      padding: calc(var(--spacing) * 4) calc(var(--spacing) * 10) calc(var(--spacing) * 4) calc(var(--spacing) * 4);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      background: var(--popover);
+      color: var(--popover-foreground);
+      font-size: var(--text-sm);
+      box-shadow: var(--shadow-md);
+      animation: enter 0.2s ease-out;
+    }
+    li[data-variant="destructive"] {
+      border-color: var(--destructive);
+      color: var(--destructive);
+    }
+    strong {
+      font-weight: var(--font-weight-semibold);
+    }
+    p {
+      margin: 0;
+      color: var(--muted-foreground);
+    }
+    button {
+      all: unset;
+      position: absolute;
+      top: calc(var(--spacing) * 3);
+      right: calc(var(--spacing) * 3);
+      cursor: pointer;
+      opacity: 0.6;
+    }
+    button:hover,
+    button:focus-visible {
+      opacity: 1;
+    }
+    @keyframes enter {
+      from {
+        opacity: 0;
+        translate: 0 calc(var(--spacing) * 2);
+      }
+    }
+  </style>
+
+  <ol ref="region" part="region" popover="manual" aria-live="polite">
+    <li repeat="#toasts.list" as="toast" key="id" part="toast" _data-variant="#toast.variant">
+      <strong><slot name="#toast.title"></slot></strong>
+      <p _hidden="!#toast.description"><slot name="#toast.description"></slot></p>
+      <button type="button" aria-label="Dismiss" onclick="dismiss(toast)">×</button>
+    </li>
+  </ol>
+</custom-element>

package/components/toggle-group.html

@@ -0,0 +1,65 @@
+<import-element from="./toggle.html"></import-element>
+
+<custom-element name="ui-toggle-group" role="group" form-associated>
+  <script>
+    const props = defineProps({
+      type: prop.enum(["single", "multiple"]).default("single"),
+      value: prop.string().default(""),
+      orientation: prop.enum(["horizontal", "vertical"]).default("horizontal"),
+    });
+
+    const toggles = useChildren("ui-toggle");
+    const group = useState({
+      get focusgroup() {
+        return `toolbar ${props.orientation === "vertical" ? "block" : "inline"} wrap`;
+      },
+      get selected() {
+        return new Set(props.value.split(",").filter(Boolean));
+      },
+    });
+
+    function changed(event) {
+      const toggle = event.target;
+      if (toggle.localName !== "ui-toggle") return;
+      event.stopPropagation();
+      const value = toggle.value;
+      const selected = props.type === "single" ? new Set(toggle.pressed ? [value] : []) : new Set(group.selected);
+      if (props.type === "multiple") selected[toggle.pressed ? "add" : "delete"](value);
+      props.value = [...selected].join(",");
+      dispatch("change");
+    }
+
+    listen("change", changed);
+
+    observe(() => {
+      for (const toggle of toggles) toggle.pressed = group.selected.has(toggle.value);
+    });
+  </script>
+
+  <style>
+    :host {
+      display: inline-flex;
+      align-items: center;
+      width: fit-content;
+      border-radius: var(--radius-md);
+    }
+    :host(:state(attr-orientation-is-vertical)) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    :host(:not(:state(attr-orientation-is-vertical))) ::slotted(:not(:first-child)) {
+      --ui-radius-start: 0;
+    }
+    :host(:not(:state(attr-orientation-is-vertical))) ::slotted(:not(:last-child)) {
+      --ui-radius-end: 0;
+    }
+    :host(:state(attr-orientation-is-vertical)) ::slotted(:not(:first-child)) {
+      --ui-radius-block-start: 0;
+    }
+    :host(:state(attr-orientation-is-vertical)) ::slotted(:not(:last-child)) {
+      --ui-radius-block-end: 0;
+    }
+  </style>
+
+  <div part="group" _focusgroup="#group.focusgroup" style="display: contents"><slot></slot></div>
+</custom-element>

package/components/toggle.html

@@ -0,0 +1,81 @@
+<custom-element name="ui-toggle" delegates-focus>
+  <script>
+    const props = defineProps({
+      pressed: prop.boolean().reflect(),
+      variant: prop.enum(["default", "outline"]).default("default"),
+      size: prop.enum(["default", "sm", "lg"]).default("default"),
+      disabled: prop.boolean(),
+      value: prop.string(),
+      label: prop.string().attribute("aria-label"),
+    });
+
+    function toggle() {
+      props.pressed = !props.pressed;
+      dispatch("change");
+    }
+  </script>
+
+  <style>
+    :host {
+      display: inline-flex;
+    }
+    button {
+      all: unset;
+      box-sizing: border-box;
+      display: inline-flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--spacing) * 2);
+      min-width: calc(var(--spacing) * 9);
+      height: calc(var(--spacing) * 9);
+      padding: 0 calc(var(--spacing) * 2);
+      border: 1px solid transparent;
+      border-radius: var(--radius-md);
+      border-start-start-radius: var(--ui-radius-block-start, var(--ui-radius-start, var(--radius-md)));
+      border-end-start-radius: var(--ui-radius-block-end, var(--ui-radius-start, var(--radius-md)));
+      border-start-end-radius: var(--ui-radius-block-start, var(--ui-radius-end, var(--radius-md)));
+      border-end-end-radius: var(--ui-radius-block-end, var(--ui-radius-end, var(--radius-md)));
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      cursor: pointer;
+      transition: background-color var(--default-transition-duration), color var(--default-transition-duration);
+    }
+    button:hover {
+      background: var(--muted);
+      color: var(--muted-foreground);
+    }
+    :host(:state(attr-pressed)) button {
+      background: var(--accent);
+      color: var(--accent-foreground);
+    }
+    :host(:state(attr-variant-is-outline)) button {
+      border-color: var(--input);
+      box-shadow: var(--shadow-xs);
+    }
+    :host(:state(attr-size-is-sm)) button {
+      min-width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 8);
+      padding: 0 calc(var(--spacing) * 1.5);
+    }
+    :host(:state(attr-size-is-lg)) button {
+      min-width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+      padding: 0 calc(var(--spacing) * 2.5);
+    }
+    button:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    button:disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  </style>
+
+  <button type="button" part="button" _aria-pressed="@pressed" _aria-label="@label" _disabled="@disabled" onclick="toggle()"><slot></slot></button>
+</custom-element>

package/components/tooltip.html

@@ -0,0 +1,97 @@
+<custom-element name="ui-tooltip">
+  <script>
+    const props = defineProps({
+      delay: prop.number().min(0).default(300),
+    });
+
+    const parts = useChildren("ui-tooltip-trigger, ui-tooltip-content");
+
+    let timer;
+
+    function tip() {
+      return parts.find((part) => part.localName === "ui-tooltip-content");
+    }
+
+    function show(trigger) {
+      clearTimeout(timer);
+      timer = setTimeout(() => {
+        if (!tip().matches(":popover-open")) tip().showPopover({ source: trigger });
+      }, props.delay);
+    }
+
+    function hide() {
+      clearTimeout(timer);
+      if (tip().matches(":popover-open")) tip().hidePopover();
+    }
+
+    function key(event) {
+      if (event.key === "Escape") hide();
+    }
+
+    function describe() {
+      const text = tip()?.textContent.trim() ?? "";
+      for (const trigger of parts.filter((part) => part.localName === "ui-tooltip-trigger"))
+        for (const element of trigger.children) element.setAttribute("aria-description", text);
+    }
+
+    observe(describe);
+  </script>
+
+  <style>
+    :host {
+      display: contents;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-tooltip-trigger">
+  <style>
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  </style>
+
+  <span part="trigger" onpointerenter="show(host)" onpointerleave="hide()" onfocusin="show(host)" onfocusout="hide()" onkeydown="key(event)"><slot></slot></span>
+</custom-element>
+
+<custom-element name="ui-tooltip-content" role="tooltip">
+  <script>
+    defineProps({
+      placement: prop.enum(["top", "bottom", "left", "right"]).default("top"),
+    });
+
+    attrs.popover ??= "manual";
+  </script>
+
+  <style>
+    :host {
+      margin: 0 0 calc(var(--spacing) * 1);
+      padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
+      border: 0;
+      border-radius: var(--radius-md);
+      background: var(--foreground);
+      color: var(--background);
+      font-size: var(--text-xs);
+      inset: auto;
+      position-area: top;
+      position-try-fallbacks: flip-block;
+    }
+    :host(:state(attr-placement-is-bottom)) {
+      position-area: bottom;
+      margin: calc(var(--spacing) * 1) 0 0;
+    }
+    :host(:state(attr-placement-is-left)) {
+      position-area: left;
+      margin: 0 calc(var(--spacing) * 1) 0 0;
+    }
+    :host(:state(attr-placement-is-right)) {
+      position-area: right;
+      margin: 0 0 0 calc(var(--spacing) * 1);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>