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

package/components/label.html

@@ -0,0 +1,46 @@
+<custom-element name="ui-label">
+  <script>
+    const props = defineProps({ for: prop.string() });
+
+    const CHECKABLE = new Set(["checkbox", "radio"]);
+
+    function target() {
+      return props.for ? host.getRootNode().getElementById(props.for) : null;
+    }
+
+    function activate() {
+      const field = target();
+      if (!field) return;
+      field.focus();
+      if (CHECKABLE.has(field.type) || "checked" in field) (field.shadowRoot?.querySelector('[ref="control"]') ?? field).click();
+    }
+
+    onConnected(() => {
+      const field = target();
+      if (field && !field.hasAttribute("aria-label")) field.setAttribute("aria-label", host.textContent.trim());
+    });
+  </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: inline-flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      line-height: 1;
+      user-select: none;
+    }
+    :host(:state(attr-for)) {
+      cursor: pointer;
+    }
+  </style>
+
+  <span part="label" onclick="activate()"><slot></slot></span>
+</custom-element>

package/components/marker.html

@@ -0,0 +1,41 @@
+<custom-element name="ui-marker">
+  <script>
+    defineProps({ variant: prop.enum(["default", "separator", "border"]).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;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      width: 100%;
+      min-height: calc(var(--spacing) * 4);
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+    }
+    :host(:state(attr-variant-is-separator))::before,
+    :host(:state(attr-variant-is-separator))::after {
+      content: "";
+      flex: 1;
+      height: 1px;
+      background: var(--border);
+    }
+    :host(:state(attr-variant-is-border)) {
+      padding-bottom: calc(var(--spacing) * 2);
+      border-bottom: 1px solid var(--border);
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      flex-shrink: 0;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/menubar.html

@@ -0,0 +1,137 @@
+<custom-element name="ui-menubar" role="menubar">
+  <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;
+      align-items: center;
+      gap: calc(var(--spacing) * 1);
+      width: fit-content;
+      height: calc(var(--spacing) * 9);
+      padding: calc(var(--spacing) * 1);
+      box-sizing: border-box;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+      background: var(--background);
+      box-shadow: var(--shadow-xs);
+    }
+    div {
+      display: contents;
+    }
+  </style>
+
+  <div part="bar" focusgroup="menubar inline wrap"><slot></slot></div>
+</custom-element>
+
+<custom-element name="ui-menubar-menu">
+  <script>
+    let wasOpen = false;
+
+    function press() {
+      wasOpen = host.querySelector(":scope > ui-menubar-content").matches(":popover-open");
+    }
+
+    function toggle(trigger) {
+      const content = host.querySelector(":scope > ui-menubar-content");
+      const open = wasOpen || content.matches(":popover-open");
+      wasOpen = false;
+      if (open) content.hidePopover();
+      else {
+        trigger.focus();
+        content.showPopover({ source: trigger });
+      }
+    }
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: contents;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-menubar-trigger">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: inline-flex;
+    }
+    button {
+      all: unset;
+      display: inline-flex;
+      align-items: center;
+      padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2);
+      border-radius: var(--radius-sm);
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+      cursor: default;
+      user-select: none;
+    }
+    button:hover,
+    button:focus-visible {
+      background: var(--accent);
+      color: var(--accent-foreground);
+    }
+  </style>
+
+  <button type="button" part="trigger" role="menuitem" aria-haspopup="menu" onpointerdown="press()" onclick="toggle(this)"><slot></slot></button>
+</custom-element>
+
+<custom-element name="ui-menubar-content" role="menu">
+  <script>
+    const ITEMS = ":is(ui-menu-item, ui-menu-checkbox-item, ui-menu-radio-item):not([disabled])";
+
+    function opened(event) {
+      if (event.newState === "open") host.querySelector(ITEMS)?.focus();
+    }
+
+    function leave(event) {
+      if (document.hasFocus() && !host.contains(event.relatedTarget)) host.hidePopover();
+    }
+
+    attrs.popover ??= "auto";
+
+    listen("toggle", opened);
+    listen("focusout", leave);
+    listen("select", () => host.hidePopover());
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      box-sizing: border-box;
+      min-width: calc(var(--spacing) * 48);
+      margin: calc(var(--spacing) * 2) 0 0 calc(var(--spacing) * -1);
+      padding: calc(var(--spacing) * 1);
+      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 span-right;
+      position-try-fallbacks: flip-block, flip-inline;
+    }
+  </style>
+
+  <div part="menu" focusgroup="menu block wrap"><slot></slot></div>
+</custom-element>

package/components/message-scroller.html

@@ -0,0 +1,68 @@
+<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>
+    /* 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 {
+      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,95 @@
+<custom-element name="ui-message">
+  <script>
+    defineProps({ align: prop.enum(["start", "end"]).default("start") });
+  </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;
+      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,
+    * {
+      touch-action: manipulation;
+    }
+    :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,
+    * {
+      touch-action: manipulation;
+    }
+    :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,
+    * {
+      touch-action: manipulation;
+    }
+    :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,233 @@
+<custom-element name="ui-navigation-menu">
+  <script>
+    defineProps({ label: prop.string().default("Main") });
+  </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;
+    }
+  </style>
+
+  <nav _aria-label="@label"><slot></slot></nav>
+</custom-element>
+
+<custom-element name="ui-navigation-menu-list">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :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,
+    * {
+      touch-action: manipulation;
+    }
+    :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;
+      height: fit-content;
+      max-height: calc(100svh - calc(var(--spacing) * 8));
+      overflow-y: auto;
+      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,
+    * {
+      touch-action: manipulation;
+    }
+    :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,
+    * {
+      touch-action: manipulation;
+    }
+    :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,
+    * {
+      touch-action: manipulation;
+    }
+    :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>