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

package/components/sidebar.html

@@ -0,0 +1,393 @@
+<import-element from="./button.html"></import-element>
+
+<custom-element name="ui-sidebar-layout">
+  <script>
+    const props = defineProps({
+      collapsed: prop.boolean().reflect(),
+      persist: prop.string(),
+    });
+
+    const media = matchMedia("(max-width: 767px)");
+    const layout = useState({ mobile: media.matches, open: false });
+
+    function toggle() {
+      if (layout.mobile) layout.open = !layout.open;
+      else props.collapsed = !props.collapsed;
+    }
+
+    function close() {
+      layout.open = false;
+    }
+
+    function shortcut(event) {
+      if (event.key.toLowerCase() !== "b" || !(event.metaKey || event.ctrlKey)) return;
+      event.preventDefault();
+      toggle();
+    }
+
+    if (props.persist) props.collapsed = localStorage.getItem(props.persist) === "true";
+
+    defineMethods({ toggle });
+
+    listen("sidebartoggle", toggle);
+    listen("keydown", shortcut, document);
+    listen("change", () => (layout.mobile = media.matches), media);
+
+    observe(() => {
+      if (props.persist) localStorage.setItem(props.persist, String(props.collapsed));
+    });
+  </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 {
+      --ui-sidebar-width: calc(var(--spacing) * 64);
+      --ui-sidebar-label: block;
+      display: flex;
+      min-height: 100svh;
+      background: var(--sidebar);
+    }
+    :host(:state(attr-collapsed)) {
+      --ui-sidebar-width: calc(var(--spacing) * 12);
+      --ui-sidebar-label: none;
+    }
+    .sidebar {
+      position: sticky;
+      top: 0;
+      width: var(--ui-sidebar-width);
+      height: 100svh;
+      flex-shrink: 0;
+      transition: width 0.2s ease;
+    }
+    .backdrop {
+      display: none;
+    }
+    :host(:state(state-layout-mobile)) {
+      --ui-sidebar-width: calc(var(--spacing) * 72);
+      --ui-sidebar-label: block;
+      --ui-sidebar-inset-margin: 0;
+      --ui-sidebar-inset-radius: 0;
+    }
+    :host(:state(state-layout-mobile)) .sidebar {
+      position: fixed;
+      inset: 0 auto 0 0;
+      z-index: 50;
+      translate: -100% 0;
+      transition: translate 0.2s ease;
+    }
+    :host(:state(state-layout-open)) .sidebar {
+      translate: 0 0;
+    }
+    :host(:state(state-layout-open)) .backdrop {
+      position: fixed;
+      inset: 0;
+      z-index: 40;
+      display: block;
+      background: rgb(0 0 0 / 0.5);
+    }
+  </style>
+
+  <aside class="sidebar" part="sidebar"><slot name="sidebar"></slot></aside>
+  <div class="backdrop" part="backdrop" onclick="close()"></div>
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-sidebar" slot="sidebar">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      box-sizing: border-box;
+      background: var(--sidebar);
+      color: var(--sidebar-foreground);
+      overflow: hidden;
+    }
+  </style>
+
+  <slot name="header"></slot>
+  <slot></slot>
+  <slot name="footer"></slot>
+</custom-element>
+
+<custom-element name="ui-sidebar-header" slot="header">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 2);
+      padding: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-sidebar-footer" slot="footer">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 2);
+      padding: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-sidebar-content">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+      flex: 1;
+      min-height: 0;
+      overflow: hidden auto;
+    }
+    nav {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <nav part="content"><slot></slot></nav>
+</custom-element>
+
+<custom-element name="ui-sidebar-group" role="group">
+  <script>
+    const labels = useChildren("ui-sidebar-group-label");
+
+    observe(() => {
+      internals.ariaLabelledByElements = [...labels];
+    });
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-direction: column;
+      padding: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-sidebar-group-label">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: var(--ui-sidebar-label, block);
+      height: calc(var(--spacing) * 8);
+      padding: 0 calc(var(--spacing) * 2);
+      font-size: var(--text-xs);
+      font-weight: var(--font-weight-medium);
+      line-height: calc(var(--spacing) * 8);
+      white-space: nowrap;
+      color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-sidebar-menu">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+    }
+    ul {
+      display: flex;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 1);
+      margin: 0;
+      padding: 0;
+      list-style: none;
+    }
+  </style>
+
+  <ul part="menu" focusgroup="menu block"><slot></slot></ul>
+</custom-element>
+
+<custom-element name="ui-sidebar-menu-item" role="listitem">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      position: relative;
+      display: block;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-sidebar-menu-button">
+  <script>
+    const props = defineProps({
+      href: prop.string(),
+      current: prop.boolean(),
+      label: prop.string(),
+    });
+
+    const item = useState({
+      get current() {
+        return props.current ? "page" : null;
+      },
+      get role() {
+        return props.href ? null : "button";
+      },
+    });
+
+    const ACTIVATE = { Enter: true, " ": true };
+
+    function pressed(event) {
+      if (!dispatch("select")) event.preventDefault();
+    }
+
+    function key(event) {
+      if (props.href || !ACTIVATE[event.key]) return;
+      event.preventDefault();
+      event.currentTarget.click();
+    }
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+    }
+    a {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 8);
+      padding: 0 calc(var(--spacing) * 2);
+      border-radius: var(--radius-md);
+      overflow: hidden;
+      color: inherit;
+      font-size: var(--text-sm);
+      text-decoration: none;
+      white-space: nowrap;
+      outline: none;
+      cursor: pointer;
+    }
+    a:hover,
+    a:focus-visible,
+    :host(:state(attr-current)) a {
+      background: var(--sidebar-accent);
+    }
+    :host(:state(attr-current)) a {
+      font-weight: var(--font-weight-medium);
+    }
+    a:focus-visible {
+      box-shadow: 0 0 0 2px var(--ring);
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      flex-shrink: 0;
+    }
+  </style>
+
+  <a part="button" _href="@href" _title="@label" _aria-current="#item.current" _role="#item.role" tabindex="0" onclick="pressed(event)" onkeydown="key(event)"><slot></slot></a>
+</custom-element>
+
+<custom-element name="ui-sidebar-menu-badge">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: var(--ui-sidebar-label, block);
+      position: absolute;
+      top: 0;
+      right: calc(var(--spacing) * 1);
+      padding: 0 calc(var(--spacing) * 1);
+      line-height: calc(var(--spacing) * 8);
+      font-size: var(--text-xs);
+      font-weight: var(--font-weight-medium);
+      color: color-mix(in oklab, var(--sidebar-foreground) 70%, transparent);
+      pointer-events: none;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-sidebar-trigger">
+  <script>
+    function toggle() {
+      dispatch("sidebartoggle");
+    }
+  </script>
+
+  <ui-button variant="ghost" size="icon-sm" aria-label="Toggle sidebar" onclick="toggle()">
+    <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2" /><path d="M9 3v18" /></svg>
+  </ui-button>
+</custom-element>
+
+<custom-element name="ui-sidebar-inset">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex: 1;
+      min-width: 0;
+    }
+    main {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      min-width: 0;
+      margin: var(--ui-sidebar-inset-margin, calc(var(--spacing) * 2) calc(var(--spacing) * 2) calc(var(--spacing) * 2) 0);
+      border-radius: var(--ui-sidebar-inset-radius, var(--radius-xl));
+      background: var(--background);
+      box-shadow: var(--shadow-xs);
+    }
+  </style>
+
+  <main part="main"><slot></slot></main>
+</custom-element>

package/components/skeleton.html

@@ -0,0 +1,36 @@
+<custom-element name="ui-skeleton">
+  <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;
+      border-radius: var(--radius-md);
+      background: var(--accent);
+      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+    :host(:state(attr-width)) {
+      width: calc(var(--spacing) * var(--attr-width));
+    }
+    :host(:state(attr-height)) {
+      height: calc(var(--spacing) * var(--attr-height));
+    }
+    :host(:state(attr-shape-is-circle)) {
+      flex-shrink: 0;
+      border-radius: var(--radius-full);
+    }
+    @keyframes pulse {
+      50% {
+        opacity: 0.5;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      :host {
+        animation: none;
+      }
+    }
+  </style>
+</custom-element>

package/components/slider.html

@@ -0,0 +1,108 @@
+<custom-element name="ui-slider" form-associated delegates-focus>
+  <script>
+    const props = defineProps({
+      value: prop.number().default(0),
+      min: prop.number().default(0),
+      max: prop.number().default(100),
+      step: prop.number().default(1),
+      disabled: prop.boolean(),
+      label: prop.string().attribute("aria-label"),
+    });
+
+    const range = useState({
+      get percent() {
+        return `${((props.value - props.min) / (props.max - props.min || 1)) * 100}%`;
+      },
+    });
+
+    // Writing the value Safari just set, during a finger drag, makes the thumb jump.
+    observe(() => {
+      const value = String(props.value);
+      if (refs.control && refs.control.value !== value) refs.control.value = value;
+    });
+  </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;
+      min-width: calc(var(--spacing) * 32);
+    }
+    input {
+      --fill: var(--primary);
+      appearance: none;
+      width: 100%;
+      height: calc(var(--spacing) * 4);
+      margin: 0;
+      background: transparent;
+      cursor: pointer;
+      outline: none;
+      /* The slider owns the whole gesture, so the browser never turns a drag into a page pan. */
+      touch-action: none;
+    }
+    input::-webkit-slider-runnable-track {
+      height: calc(var(--spacing) * 1.5);
+      border-radius: var(--radius-full);
+      background: linear-gradient(to right, var(--fill) var(--state-range-percent), var(--muted) var(--state-range-percent));
+    }
+    input::-moz-range-track {
+      height: calc(var(--spacing) * 1.5);
+      border-radius: var(--radius-full);
+      background: linear-gradient(to right, var(--fill) var(--state-range-percent), var(--muted) var(--state-range-percent));
+    }
+    input::-webkit-slider-thumb {
+      appearance: none;
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      margin-top: calc(var(--spacing) * -1.25);
+      border: 1px solid var(--primary);
+      border-radius: var(--radius-full);
+      background: var(--background);
+      box-shadow: var(--shadow-sm);
+    }
+    input::-moz-range-thumb {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      border: 1px solid var(--primary);
+      border-radius: var(--radius-full);
+      background: var(--background);
+    }
+    input:focus-visible::-webkit-slider-thumb {
+      box-shadow: 0 0 0 4px color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+    @media (pointer: coarse) {
+      input {
+        height: calc(var(--spacing) * 6);
+      }
+      input::-webkit-slider-thumb {
+        width: calc(var(--spacing) * 6);
+        height: calc(var(--spacing) * 6);
+        margin-top: calc(var(--spacing) * -2.25);
+      }
+      input::-moz-range-thumb {
+        width: calc(var(--spacing) * 6);
+        height: calc(var(--spacing) * 6);
+      }
+    }
+    input:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+  </style>
+
+  <input
+    ref="control"
+    type="range"
+    part="control"
+    _min="@min"
+    _max="@max"
+    _step="@step"
+    _disabled="@disabled"
+    _aria-label="@label"
+>
+</custom-element>

package/components/spinner.html

@@ -0,0 +1,53 @@
+<custom-element name="ui-spinner" role="status">
+  <script>
+    const props = defineProps({
+      size: prop.number().min(8).default(16),
+      label: prop.string().default("Loading"),
+      variant: prop.enum(["default", "primary", "muted", "destructive"]).default("default"),
+    });
+
+    observe(() => {
+      internals.ariaLabel = props.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: inline-flex;
+      width: calc(var(--attr-size) * 1px);
+      height: calc(var(--attr-size) * 1px);
+    }
+    :host(:state(attr-variant-is-primary)) {
+      color: var(--primary);
+    }
+    :host(:state(attr-variant-is-muted)) {
+      color: var(--muted-foreground);
+    }
+    :host(:state(attr-variant-is-destructive)) {
+      color: var(--destructive);
+    }
+    svg {
+      width: 100%;
+      height: 100%;
+      animation: spin 0.8s linear infinite;
+    }
+    @keyframes spin {
+      to {
+        rotate: 360deg;
+      }
+    }
+    @media (prefers-reduced-motion: reduce) {
+      svg {
+        animation-duration: 2.4s;
+      }
+    }
+  </style>
+
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-6.219-8.56" /></svg>
+</custom-element>

package/components/switch.html

@@ -0,0 +1,95 @@
+<custom-element name="ui-switch" form-associated delegates-focus>
+  <script>
+    defineProps({
+      checked: prop.boolean(),
+      value: prop.string(),
+      size: prop.enum(["default", "sm"]).default("default"),
+      disabled: prop.boolean(),
+      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(:state(attr-checked)) label {
+      color: var(--foreground);
+    }
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      vertical-align: middle;
+    }
+    input {
+      appearance: none;
+      box-sizing: border-box;
+      position: relative;
+      width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 4.6);
+      margin: 0;
+      border: 1px solid transparent;
+      border-radius: var(--radius-full);
+      background: var(--input);
+      box-shadow: var(--shadow-xs);
+      cursor: pointer;
+      outline: none;
+      transition: background-color var(--default-transition-duration), box-shadow var(--default-transition-duration);
+    }
+    input::before {
+      content: "";
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      border-radius: var(--radius-full);
+      background: var(--background);
+      translate: 0 -50%;
+      transition: translate var(--default-transition-duration);
+    }
+    input:checked {
+      background: var(--primary);
+    }
+    input:checked::before {
+      translate: calc(100% - 2px) -50%;
+    }
+    :host(:state(attr-size-is-sm)) input {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 3.5);
+    }
+    :host(:state(attr-size-is-sm)) input::before {
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 3);
+    }
+    input:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    label {
+      font-size: var(--text-sm);
+      font-weight: var(--font-weight-medium);
+    }
+  </style>
+
+  <input
+    id="control"
+    ref="control"
+    part="control"
+    type="checkbox"
+    _aria-label="@label"
+    role="switch"
+    _checked="@checked"
+    _aria-checked="@checked"
+    _disabled="@disabled"
+>
+  <label for="control" part="label"><slot></slot></label>
+</custom-element>