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

package/components/message-scroller.html

@@ -0,0 +1,62 @@
+<import-element from="./button.html"></import-element>
+
+<custom-element name="ui-message-scroller">
+  <script>
+    const props = defineProps({ threshold: prop.number().min(0).default(48) });
+
+    const scroll = useState({ pinned: true });
+
+    function viewport() {
+      return refs.viewport;
+    }
+
+    function track(element) {
+      scroll.pinned = element.scrollHeight - element.scrollTop - element.clientHeight <= props.threshold;
+    }
+
+    function bottom() {
+      viewport().scrollTo({ top: viewport().scrollHeight, behavior: "smooth" });
+    }
+
+    onConnected(() => {
+      const observer = new MutationObserver(() => {
+        if (scroll.pinned) viewport().scrollTop = viewport().scrollHeight;
+      });
+      observer.observe(host, { childList: true, subtree: true, characterData: true });
+      viewport().scrollTop = viewport().scrollHeight;
+      return () => observer.disconnect();
+    });
+  </script>
+
+  <style>
+    :host {
+      position: relative;
+      display: block;
+      width: 100%;
+      min-height: 0;
+    }
+    :host(:state(attr-height)) {
+      height: calc(var(--spacing) * var(--attr-height));
+    }
+    .viewport {
+      height: 100%;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      scrollbar-width: thin;
+    }
+    .jump {
+      position: absolute;
+      left: 50%;
+      bottom: calc(var(--spacing) * 3);
+      translate: -50% 0;
+    }
+    :host(:state(state-scroll-pinned)) .jump {
+      display: none;
+    }
+  </style>
+
+  <div class="viewport" ref="viewport" part="viewport" role="log" aria-live="polite" onscroll="track(this)">
+    <slot></slot>
+  </div>
+  <ui-button class="jump" size="sm" variant="secondary" onclick="bottom()">Jump to latest</ui-button>
+</custom-element>

package/components/message.html

@@ -0,0 +1,77 @@
+<custom-element name="ui-message">
+  <script>
+    defineProps({ align: prop.enum(["start", "end"]).default("start") });
+  </script>
+
+  <style>
+    :host {
+      display: flex;
+      gap: calc(var(--spacing) * 2);
+      width: 100%;
+      min-width: 0;
+      font-size: var(--text-sm);
+    }
+    :host(:state(attr-align-is-end)) {
+      flex-direction: row-reverse;
+    }
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 2);
+      width: 100%;
+      min-width: 0;
+    }
+    :host(:state(attr-align-is-end)) .content {
+      align-items: flex-end;
+    }
+  </style>
+
+  <slot name="avatar"></slot>
+  <div class="content" part="content">
+    <slot name="header"></slot>
+    <slot></slot>
+    <slot name="footer"></slot>
+  </div>
+</custom-element>
+
+<custom-element name="ui-message-avatar" slot="avatar">
+  <style>
+    :host {
+      display: flex;
+      align-self: flex-end;
+      flex-shrink: 0;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-message-header" slot="header">
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      padding: 0 calc(var(--spacing) * 3);
+      font-size: var(--text-xs);
+      color: var(--muted-foreground);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-message-footer" slot="footer">
+  <style>
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      padding: 0 calc(var(--spacing) * 3);
+      font-size: var(--text-xs);
+      color: var(--muted-foreground);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/navigation-menu.html

@@ -0,0 +1,204 @@
+<custom-element name="ui-navigation-menu">
+  <script>
+    defineProps({ label: prop.string().default("Main") });
+  </script>
+
+  <style>
+    :host {
+      display: block;
+    }
+  </style>
+
+  <nav _aria-label="@label"><slot></slot></nav>
+</custom-element>
+
+<custom-element name="ui-navigation-menu-list">
+  <style>
+    :host {
+      display: block;
+    }
+    ul {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 1);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  </style>
+
+  <ul part="list" focusgroup="toolbar inline"><slot></slot></ul>
+</custom-element>
+
+<custom-element name="ui-navigation-menu-item" role="listitem">
+  <script>
+    const menu = useState({ open: false });
+
+    let restoreFocus = false;
+    let timer;
+
+    function schedule(open) {
+      clearTimeout(timer);
+      timer = setTimeout(() => refs.panel.togglePopover(open), open ? 150 : 200);
+    }
+
+    function toggle() {
+      refs.panel.togglePopover();
+    }
+
+    function closing(event) {
+      restoreFocus = event.newState === "closed" && host.contains(host.getRootNode().activeElement);
+    }
+
+    function toggled(event) {
+      menu.open = event.newState === "open";
+      if (!menu.open && restoreFocus) host.querySelector("ui-navigation-menu-trigger")?.focus();
+    }
+  </script>
+
+  <style>
+    :host {
+      position: relative;
+      display: block;
+    }
+    .anchor {
+      display: flex;
+      anchor-name: --navigation-trigger;
+    }
+    .panel {
+      box-sizing: border-box;
+      min-width: calc(var(--spacing) * 64);
+      margin: calc(var(--spacing) * 1.5) 0 0;
+      padding: calc(var(--spacing) * 2);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      background: var(--popover);
+      color: var(--popover-foreground);
+      box-shadow: var(--shadow-md);
+      inset: auto;
+      position-anchor: --navigation-trigger;
+      position-area: bottom span-right;
+    }
+  </style>
+
+  <div class="anchor"><slot></slot></div>
+  <div ref="panel" class="panel" part="panel" popover="auto" onbeforetoggle="closing(event)" ontoggle="toggled(event)" onpointerenter="schedule(true)" onpointerleave="schedule(false)"><slot name="content"></slot></div>
+</custom-element>
+
+<custom-element name="ui-navigation-menu-trigger" delegates-focus>
+  <style>
+    :host {
+      display: inline-flex;
+    }
+    button {
+      all: unset;
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 1);
+      height: calc(var(--spacing) * 9);
+      padding: 0 calc(var(--spacing) * 4);
+      border-radius: var(--radius-md);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      cursor: pointer;
+    }
+    button:hover,
+    button:focus-visible,
+    button[aria-expanded="true"] {
+      background: var(--accent);
+      color: var(--accent-foreground);
+    }
+    button:focus-visible {
+      box-shadow: var(--focus-ring);
+    }
+    svg {
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 3);
+      transition: rotate var(--default-transition-duration);
+    }
+    [aria-expanded="true"] svg {
+      rotate: 180deg;
+    }
+  </style>
+
+  <button type="button" part="trigger" _aria-expanded="#menu.open" onclick="toggle()" onpointerenter="schedule(true)" onpointerleave="schedule(false)">
+    <slot></slot>
+    <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6" /></svg>
+  </button>
+</custom-element>
+
+<custom-element name="ui-navigation-menu-content" slot="content">
+  <style>
+    :host {
+      display: grid;
+      gap: calc(var(--spacing) * 1);
+      --ui-navigation-link-display: flex;
+      --ui-navigation-link-direction: column;
+      --ui-navigation-link-align: stretch;
+      --ui-navigation-link-height: auto;
+      --ui-navigation-link-padding: calc(var(--spacing) * 2);
+      --ui-navigation-link-weight: var(--font-weight-normal);
+    }
+    :host(:state(attr-width)) {
+      width: calc(var(--spacing) * var(--attr-width));
+    }
+    :host(:state(attr-columns)) {
+      grid-template-columns: repeat(var(--attr-columns), minmax(0, 1fr));
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-navigation-menu-link" delegates-focus>
+  <script>
+    const props = defineProps({ href: prop.string(), current: prop.boolean() });
+    const link = useState({
+      get current() {
+        return props.current ? "page" : null;
+      },
+    });
+  </script>
+
+  <style>
+    :host {
+      display: var(--ui-navigation-link-display, inline-flex);
+    }
+    a {
+      display: flex;
+      flex: 1;
+      flex-direction: var(--ui-navigation-link-direction, row);
+      align-items: var(--ui-navigation-link-align, center);
+      gap: calc(var(--spacing) * 1);
+      height: var(--ui-navigation-link-height, calc(var(--spacing) * 9));
+      padding: var(--ui-navigation-link-padding, 0 calc(var(--spacing) * 4));
+      border-radius: var(--radius-md);
+      color: inherit;
+      font-size: var(--text-sm);
+      font-weight: var(--ui-navigation-link-weight, var(--font-weight-medium));
+      text-decoration: none;
+      outline: none;
+    }
+    a:hover,
+    a:focus-visible,
+    a[aria-current="page"] {
+      background: var(--accent);
+      color: var(--accent-foreground);
+    }
+    a:focus-visible {
+      box-shadow: var(--focus-ring);
+    }
+    ::slotted(*) {
+      margin: 0;
+    }
+    ::slotted(:first-child:not(:last-child)) {
+      font-weight: var(--font-weight-medium);
+    }
+    ::slotted(:last-child:not(:first-child)) {
+      color: var(--muted-foreground);
+      line-height: 1.4;
+    }
+  </style>
+
+  <a part="link" _href="@href" _aria-current="#link.current"><slot></slot></a>
+</custom-element>

package/components/pagination.html

@@ -0,0 +1,154 @@
+<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>
+    :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,133 @@
+<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>
+    :host {
+      display: contents;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-popover-trigger">
+  <style>
+    :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 {
+      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;
+      position-area: bottom;
+      position-try-fallbacks: flip-block, flip-inline;
+    }
+    :host(:popover-open) {
+      display: grid;
+      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 {
+      display: grid;
+      gap: calc(var(--spacing) * 1);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-popover-title">
+  <style>
+    :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 {
+      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,39 @@
+<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>
+    :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>