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

package/components/pagination.html

@@ -0,0 +1,160 @@
+<custom-element name="ui-pagination">
+  <script>
+    const props = defineProps({
+      page: prop.number().int().min(1).default(1),
+      total: prop.number().int().min(1).default(1),
+      siblings: prop.number().int().min(0).default(1),
+      href: prop.string(),
+      label: prop.string().default("Pagination"),
+    });
+
+    const pages = useState({
+      get items() {
+        const { page, total, siblings } = props;
+        const keep = new Set([1, total]);
+        for (let n = page - siblings; n <= page + siblings; n++) if (n >= 1 && n <= total) keep.add(n);
+        const sorted = [...keep].sort((a, b) => a - b);
+        return sorted.flatMap((n, index) => {
+          const item = { key: `p${n}`, number: n, kind: this.kind, current: n === page ? "page" : null, url: link(n) };
+          return index > 0 && n - sorted[index - 1] > 1 ? [{ key: `gap${n}`, kind: "gap" }, item] : [item];
+        });
+      },
+      get kind() {
+        return props.href ? "link" : "button";
+      },
+      get first() {
+        return props.page <= 1;
+      },
+      get last() {
+        return props.page >= props.total;
+      },
+      get previousUrl() {
+        return this.first ? null : link(props.page - 1);
+      },
+      get nextUrl() {
+        return this.last ? null : link(props.page + 1);
+      },
+    });
+
+    function link(n) {
+      return props.href ? props.href.replace("{page}", String(n)) : null;
+    }
+
+    function previous(event) {
+      go(props.page - 1, event);
+    }
+
+    function next(event) {
+      go(props.page + 1, event);
+    }
+
+    function go(page, event) {
+      if (page < 1 || page > props.total || page === props.page) return;
+      if (!dispatch("change", { page })) return event?.preventDefault();
+      if (!props.href) props.page = page;
+    }
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      justify-content: center;
+    }
+    ul {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      gap: calc(var(--spacing) * 1);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+    a,
+    button {
+      all: unset;
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--spacing) * 1);
+      min-width: calc(var(--spacing) * 9);
+      height: calc(var(--spacing) * 9);
+      padding: 0 calc(var(--spacing) * 2.5);
+      border: 1px solid transparent;
+      border-radius: var(--radius-md);
+      color: inherit;
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      text-decoration: none;
+      cursor: pointer;
+    }
+    :is(a, button):hover {
+      background: var(--accent);
+    }
+    :is(a, button):focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    [aria-current="page"] {
+      border-color: var(--border);
+      box-shadow: var(--shadow-xs);
+    }
+    a:not([href]),
+    button:disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+    @media (width < 40rem) {
+      .label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+    }
+    .gap {
+      display: inline-flex;
+      width: calc(var(--spacing) * 9);
+      justify-content: center;
+    }
+  </style>
+
+  <nav _aria-label="@label">
+    <ul part="list">
+      <li>
+        <is-visible when="#pages.kind" eq="link">
+          <a part="previous" _href="#pages.previousUrl" _aria-disabled="#pages.first" onclick="previous(event)">‹ <span class="label">Previous</span></a>
+        </is-visible>
+        <is-visible when="#pages.kind" eq="button">
+          <button type="button" part="previous" _disabled="#pages.first" onclick="previous(event)">‹ <span class="label">Previous</span></button>
+        </is-visible>
+      </li>
+      <li repeat="#pages.items" as="item" key="key">
+        <is-visible when="#item.kind" eq="link">
+          <a part="page" _href="#item.url" _aria-current="#item.current" onclick="go(item.number, event)"><slot name="#item.number"></slot></a>
+        </is-visible>
+        <is-visible when="#item.kind" eq="button">
+          <button type="button" part="page" _aria-current="#item.current" onclick="go(item.number, event)"><slot name="#item.number"></slot></button>
+        </is-visible>
+        <is-visible when="#item.kind" eq="gap"><span class="gap" aria-hidden="true">…</span></is-visible>
+      </li>
+      <li>
+        <is-visible when="#pages.kind" eq="link">
+          <a part="next" _href="#pages.nextUrl" _aria-disabled="#pages.last" onclick="next(event)"><span class="label">Next</span> ›</a>
+        </is-visible>
+        <is-visible when="#pages.kind" eq="button">
+          <button type="button" part="next" _disabled="#pages.last" onclick="next(event)"><span class="label">Next</span> ›</button>
+        </is-visible>
+      </li>
+    </ul>
+  </nav>
+</custom-element>

package/components/popover.html

@@ -0,0 +1,164 @@
+<custom-element name="ui-popover">
+  <script>
+    let wasOpen = false;
+
+    function press() {
+      wasOpen = host.querySelector(":scope > ui-popover-content").matches(":popover-open");
+    }
+
+    function toggle(trigger) {
+      const content = host.querySelector(":scope > ui-popover-content");
+      const open = wasOpen || content.matches(":popover-open");
+      wasOpen = false;
+      if (open) content.hidePopover();
+      else {
+        trigger.firstElementChild?.focus();
+        content.showPopover({ source: trigger });
+      }
+    }
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: contents;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-popover-trigger">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  </style>
+
+  <span part="trigger" onpointerdown="press()" onclick="toggle(host)"><slot></slot></span>
+</custom-element>
+
+<custom-element name="ui-popover-content">
+  <script>
+    defineProps({
+      placement: prop.enum(["bottom", "top", "left", "right"]).default("bottom"),
+    });
+
+    attrs.popover ??= "auto";
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      box-sizing: border-box;
+      width: calc(var(--spacing) * 72);
+      margin: calc(var(--spacing) * 1);
+      padding: calc(var(--spacing) * 4);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      background: var(--popover);
+      color: var(--popover-foreground);
+      box-shadow: var(--shadow-md);
+      inset: auto;
+      height: fit-content;
+      max-height: calc(100svh - calc(var(--spacing) * 8));
+      overflow-y: auto;
+      position-area: bottom;
+      position-try-fallbacks: flip-block, flip-inline;
+    }
+    :host(:popover-open) {
+      display: grid;
+      /* Safari stretches a grid overlay to its max-height unless the rows are packed at the start. */
+      align-content: start;
+      gap: calc(var(--spacing) * 4);
+    }
+    :host(:state(attr-width)) {
+      width: calc(var(--spacing) * var(--attr-width));
+    }
+    :host(:state(attr-placement-is-top)) {
+      position-area: top;
+    }
+    :host(:state(attr-placement-is-left)) {
+      position-area: left;
+    }
+    :host(:state(attr-placement-is-right)) {
+      position-area: right;
+    }
+    @supports not (position-area: bottom) {
+      :host {
+        inset: 0;
+        margin: auto;
+        height: fit-content;
+      }
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-popover-header">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: grid;
+      gap: calc(var(--spacing) * 1);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-popover-title">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+    }
+    h3 {
+      margin: 0;
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      line-height: 1;
+    }
+  </style>
+
+  <h3 part="title"><slot></slot></h3>
+</custom-element>
+
+<custom-element name="ui-popover-description">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+    }
+    p {
+      margin: 0;
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+    }
+  </style>
+
+  <p part="description"><slot></slot></p>
+</custom-element>

package/components/progress.html

@@ -0,0 +1,45 @@
+<custom-element name="ui-progress">
+  <script>
+    defineProps({
+      value: prop.number().min(0),
+      max: prop.number().min(1).default(100),
+      label: prop.string().attribute("aria-label"),
+    });
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    progress {
+      appearance: none;
+      display: block;
+      width: 100%;
+      height: calc(var(--spacing) * 2);
+      border: 0;
+      border-radius: var(--radius-full);
+      overflow: hidden;
+      background: color-mix(in oklab, var(--primary) 20%, transparent);
+    }
+    progress::-webkit-progress-bar {
+      background: transparent;
+    }
+    progress::-webkit-progress-value {
+      background: var(--primary);
+      transition: inline-size 0.2s;
+    }
+    progress::-moz-progress-bar {
+      background: var(--primary);
+    }
+  </style>
+
+  <progress part="bar" _value="@value" _max="@max" _aria-label="@label"><slot></slot></progress>
+</custom-element>

package/components/radio-group.html

@@ -0,0 +1,120 @@
+<custom-element name="ui-radio-group" form-associated>
+  <script>
+    const props = defineProps({
+      value: prop.string(),
+      orientation: prop.enum(["vertical", "horizontal"]).default("vertical"),
+      disabled: prop.boolean(),
+      required: prop.boolean(),
+    });
+
+    const options = useChildren("option", ["value", "label", "disabled"]);
+    const group = useState({
+      get options() {
+        return options.map((option, index) => ({
+          id: `${index}:${option.value}`,
+          value: option.value,
+          label: option.label,
+          disabled: props.disabled || option.disabled,
+          checked: option.value === props.value,
+        }));
+      },
+    });
+
+    function choose(option) {
+      props.value = option.value;
+      dispatch("change");
+    }
+
+    onConnected(() => {
+      internals.role = "radiogroup";
+    });
+
+    observe(() => {
+      const missing = props.required && !props.value;
+      const anchor = refs.list?.querySelector("input:not(:disabled)") ?? undefined;
+      internals.setValidity(missing ? { valueMissing: true } : {}, missing ? "Please select an option." : "", anchor);
+    });
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: grid;
+      gap: calc(var(--spacing) * 3);
+    }
+    :host(:state(attr-orientation-is-horizontal)) {
+      grid-auto-flow: column;
+      justify-content: start;
+    }
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      cursor: pointer;
+    }
+    input {
+      appearance: none;
+      display: grid;
+      place-content: center;
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      margin: 0;
+      border: 1px solid var(--input);
+      border-radius: var(--radius-full);
+      box-shadow: var(--shadow-xs);
+      cursor: pointer;
+      outline: none;
+    }
+    input::before {
+      content: "";
+      width: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 2);
+      border-radius: var(--radius-full);
+      background: var(--primary);
+      transform: scale(0);
+      transition: transform 0.1s;
+    }
+    input:checked::before {
+      transform: scale(1);
+    }
+    input:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input:disabled,
+    input:disabled + span {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    .list {
+      display: contents;
+    }
+    .options {
+      display: none;
+    }
+  </style>
+
+  <div class="list" ref="list">
+    <repeat-list of="#group.options" as="option" key="id">
+      <label part="item">
+        <input
+          type="radio"
+          name="group"
+          part="control"
+          _value="#option.value"
+          _checked="#option.checked"
+          _disabled="#option.disabled"
+          onchange="choose(option)">
+        <span><slot name="#option.label"></slot></span>
+      </label>
+    </repeat-list>
+  </div>
+  <div class="options"><slot></slot></div>
+</custom-element>

package/components/resizable.html

@@ -0,0 +1,170 @@
+<custom-element name="ui-resizable">
+  <script>
+    defineProps({
+      direction: prop.enum(["horizontal", "vertical"]).default("horizontal"),
+      variant: prop.enum(["default", "outline"]).default("default"),
+    });
+  </script>
+
+  <style>
+    /* A double tap must not zoom the page. Set inside the shadow root, because a page-level
+       touch-action does not reach shadow content in iOS Safari. */
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      width: 100%;
+      height: 100%;
+      overflow: hidden;
+    }
+    :host(:state(attr-height)) {
+      height: calc(var(--spacing) * var(--attr-height));
+    }
+    :host(:state(attr-variant-is-outline)) {
+      box-sizing: border-box;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+    }
+    :host(:state(attr-direction-is-vertical)) {
+      flex-direction: column;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-resizable-panel">
+  <script>
+    defineProps({ size: prop.number().min(0).max(100).default(50), min: prop.number().min(0).default(10) });
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+      flex: var(--attr-size) 1 0;
+      min-width: 0;
+      min-height: 0;
+      overflow: auto;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-resizable-handle" role="separator">
+  <script>
+    const props = defineProps({ handle: prop.boolean() });
+
+    const drag = useState({ active: false });
+    const KEYS = { ArrowLeft: -5, ArrowUp: -5, ArrowRight: 5, ArrowDown: 5 };
+
+    function vertical() {
+      return host.parentElement?.getAttribute("direction") === "vertical";
+    }
+
+    function resize(delta) {
+      const before = host.previousElementSibling;
+      const after = host.nextElementSibling;
+      if (!before || !after) return;
+      const total = before.size + after.size;
+      const size = Math.min(Math.max(before.size + delta, before.min), total - after.min);
+      before.size = size;
+      after.size = total - size;
+      internals.ariaValueNow = String(Math.round(size));
+    }
+
+    function start(event) {
+      drag.active = true;
+      if (event.isTrusted) host.setPointerCapture(event.pointerId);
+    }
+
+    function move(event) {
+      if (!drag.active) return;
+      const parent = host.parentElement.getBoundingClientRect();
+      const length = vertical() ? parent.height : parent.width;
+      const pixels = vertical() ? event.movementY : event.movementX;
+      const before = host.previousElementSibling;
+      const after = host.nextElementSibling;
+      resize(((before.size + after.size) * pixels) / length);
+    }
+
+    function stop() {
+      drag.active = false;
+    }
+
+    function keys(event) {
+      const step = KEYS[event.key];
+      if (!step) return;
+      event.preventDefault();
+      resize(step);
+    }
+
+    attrs.tabindex ??= 0;
+    listen("pointerdown", start);
+    listen("pointermove", move);
+    listen("pointerup", stop);
+    listen("keydown", keys);
+
+    onConnected(() => {
+      if (vertical()) internals.states.add("vertical");
+      internals.ariaOrientation = vertical() ? "horizontal" : "vertical";
+      internals.ariaValueMin = "0";
+      internals.ariaValueMax = "100";
+    });
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      position: relative;
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      width: 1px;
+      background: var(--border);
+      cursor: col-resize;
+      outline: none;
+      touch-action: none;
+    }
+    :host(:state(vertical)) {
+      width: auto;
+      height: 1px;
+      cursor: row-resize;
+    }
+    :host(:state(vertical))::after {
+      inset: calc(var(--spacing) * -1) 0;
+    }
+    :host::after {
+      content: "";
+      position: absolute;
+      inset: 0 calc(var(--spacing) * -1);
+    }
+    :host(:focus-visible) {
+      box-shadow: 0 0 0 1px var(--ring);
+    }
+    .grip {
+      display: none;
+      z-index: 1;
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 4);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-xs);
+      background: var(--border);
+    }
+    :host(:state(attr-handle)) .grip {
+      display: block;
+    }
+  </style>
+
+  <div class="grip" part="grip"></div>
+</custom-element>