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

package/components/hover-card.html

@@ -0,0 +1,111 @@
+<custom-element name="ui-hover-card">
+  <script>
+    const props = defineProps({
+      openDelay: prop.number().attribute("open-delay").min(0).default(500),
+      closeDelay: prop.number().attribute("close-delay").min(0).default(300),
+    });
+
+    let timer;
+    let source;
+
+    function apply(open) {
+      const card = host.querySelector(":scope > ui-hover-card-content");
+      if (card.matches(":popover-open") === open) return;
+      if (open) card.showPopover({ source });
+      else card.hidePopover();
+    }
+
+    function schedule(open, trigger = source) {
+      source = trigger;
+      clearTimeout(timer);
+      timer = setTimeout(() => apply(open), open ? props.openDelay : props.closeDelay);
+    }
+
+    function dismiss(event) {
+      if (event.key !== "Escape") return;
+      clearTimeout(timer);
+      apply(false);
+    }
+
+    listen("keydown", dismiss, document);
+  </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-hover-card-trigger">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: inline-block;
+    }
+  </style>
+
+  <span part="trigger" onpointerenter="schedule(true, host)" onpointerleave="schedule(false)" onfocusin="schedule(true, host)" onfocusout="schedule(false)"><slot></slot></span>
+</custom-element>
+
+<custom-element name="ui-hover-card-content">
+  <script>
+    defineProps({
+      placement: prop.enum(["bottom", "top", "left", "right"]).default("bottom"),
+    });
+
+    attrs.popover ??= "manual";
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      box-sizing: border-box;
+      width: calc(var(--spacing) * 64);
+      margin: calc(var(--spacing) * 1);
+      padding: 0;
+      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(: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;
+    }
+    div {
+      padding: calc(var(--spacing) * 4);
+    }
+  </style>
+
+  <div part="content" onpointerenter="schedule(true)" onpointerleave="schedule(false)"><slot></slot></div>
+</custom-element>

package/components/input-group.html

@@ -0,0 +1,91 @@
+<custom-element name="ui-input-group" form-associated delegates-focus>
+  <script>
+    defineProps({
+      value: prop.string().default(""),
+      type: prop.enum(["text", "email", "password", "number", "search", "tel", "url"]).default("text"),
+      placeholder: prop.string(),
+      disabled: prop.boolean(),
+      required: 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 {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      height: calc(var(--spacing) * 9);
+      box-sizing: border-box;
+      border: 1px solid var(--input);
+      border-radius: var(--radius-md);
+      box-shadow: var(--shadow-xs);
+      transition: box-shadow var(--default-transition-duration);
+    }
+    :host(:focus-within) {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input {
+      flex: 1;
+      min-width: 0;
+      height: 100%;
+      padding: 0 calc(var(--spacing) * 3);
+      border: 0;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-size: var(--text-sm);
+      outline: none;
+    }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      input {
+        font-size: var(--text-base);
+      }
+    }
+    input::placeholder {
+      color: var(--muted-foreground);
+    }
+  </style>
+
+  <slot></slot>
+  <input ref="control" part="input" _type="@type" _value="@value" _placeholder="@placeholder" _disabled="@disabled" _required="@required" _aria-label="@label">
+</custom-element>
+
+<custom-element name="ui-input-group-addon">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      order: -1;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      height: 100%;
+      padding-inline-start: calc(var(--spacing) * 3);
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+      cursor: text;
+      user-select: none;
+    }
+    :host(:state(attr-align-is-inline-end)) {
+      order: 1;
+      padding-inline: 0 calc(var(--spacing) * 3);
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/input-otp.html

@@ -0,0 +1,151 @@
+<custom-element name="ui-input-otp" form-associated>
+  <script>
+    const props = defineProps({
+      value: prop.string().default(""),
+      length: prop.number().int().min(1).max(12).default(6),
+      pattern: prop.string().default("[0-9]"),
+      separator: prop.number().int().min(0).default(0),
+      disabled: prop.boolean(),
+      required: prop.boolean(),
+    });
+
+    const otp = useState({
+      get slots() {
+        return Array.from({ length: props.length }, (_, index) => ({
+          index,
+          char: props.value[index] ?? "",
+          gap: props.separator > 0 && index > 0 && index % props.separator === 0,
+          label: `Character ${index + 1} of ${props.length}`,
+        }));
+      },
+      get complete() {
+        return props.value.length === props.length;
+      },
+    });
+
+    const KEYS = { ArrowLeft: -1, ArrowRight: 1 };
+
+    function boxes() {
+      return [...refs.group.querySelectorAll("input")];
+    }
+
+    function accept(text) {
+      const matcher = new RegExp(`^${props.pattern}$`);
+      return [...text].filter((char) => matcher.test(char)).join("");
+    }
+
+    async function write(start, text) {
+      const chars = [...props.value.padEnd(start, " ")];
+      [...accept(text)].forEach((char, offset) => {
+        chars[start + offset] = char;
+      });
+      props.value = chars.join("").slice(0, props.length).trimEnd();
+      dispatch("change");
+      if (otp.complete) dispatch("complete", { value: props.value });
+      await tick();
+      boxes()[Math.min(start + accept(text).length, props.length - 1)]?.focus();
+    }
+
+    function input(slot, field) {
+      const text = field.value;
+      field.value = slot.char;
+      if (text) write(slot.index, text.slice(-1));
+    }
+
+    function paste(slot, event) {
+      event.preventDefault();
+      write(slot.index, event.clipboardData.getData("text"));
+    }
+
+    function keys(slot, event) {
+      const step = KEYS[event.key];
+      if (step) boxes()[slot.index + step]?.focus();
+      if (event.key !== "Backspace") return;
+      event.preventDefault();
+      const target = slot.char ? slot.index : slot.index - 1;
+      if (target < 0) return;
+      props.value = props.value.slice(0, target) + props.value.slice(target + 1);
+      boxes()[target]?.focus();
+      dispatch("change");
+    }
+
+    observe(() => {
+      const missing = props.required && !otp.complete;
+      const anchor = refs.group?.querySelectorAll("input")[Math.min(props.value.length, props.length - 1)];
+      internals.setValidity(missing ? { valueMissing: true } : {}, missing ? "Enter the full code." : "", 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: inline-flex;
+    }
+    .group {
+      display: flex;
+      align-items: center;
+    }
+    input {
+      box-sizing: border-box;
+      width: calc(var(--spacing) * 9);
+      height: calc(var(--spacing) * 9);
+      margin-left: -1px;
+      border: 1px solid var(--input);
+      background: transparent;
+      color: inherit;
+      font: inherit;
+      font-size: var(--text-sm);
+      text-align: center;
+      outline: none;
+    }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      input {
+        font-size: var(--text-base);
+      }
+    }
+    input:first-child,
+    input[data-gap] {
+      margin-left: 0;
+      border-start-start-radius: var(--radius-md);
+      border-end-start-radius: var(--radius-md);
+    }
+    input:last-child {
+      border-start-end-radius: var(--radius-md);
+      border-end-end-radius: var(--radius-md);
+    }
+    input[data-gap] {
+      margin-inline-start: calc(var(--spacing) * 6);
+    }
+    input:focus-visible {
+      position: relative;
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input:disabled {
+      opacity: 0.5;
+    }
+  </style>
+
+  <div class="group" ref="group" part="group" role="group">
+    <repeat-list of="#otp.slots" as="slot" key="index">
+      <input
+        part="slot"
+        inputmode="numeric"
+        autocomplete="one-time-code"
+        maxlength="2"
+        _value="#slot.char"
+        _aria-label="#slot.label"
+        _data-gap="#slot.gap"
+        _disabled="@disabled"
+        oninput="input(slot, this)"
+        onpaste="paste(slot, event)"
+        onkeydown="keys(slot, event)">
+    </repeat-list>
+  </div>
+</custom-element>

package/components/input.html

@@ -0,0 +1,94 @@
+<custom-element name="ui-input" form-associated delegates-focus>
+  <script>
+    defineProps({
+      value: prop.string().default(""),
+      type: prop
+        .enum(["text", "email", "password", "number", "search", "tel", "url", "date", "time", "datetime-local", "month", "week", "color"])
+        .default("text"),
+      placeholder: prop.string(),
+      autocomplete: prop.string(),
+      inputmode: prop.string(),
+      pattern: prop.string(),
+      min: prop.string(),
+      max: prop.string(),
+      step: prop.string(),
+      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>
+    /* 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: 0;
+    }
+    input {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(var(--spacing) * 9);
+      padding: calc(var(--spacing) * 1) 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;
+      transition: color var(--default-transition-duration), box-shadow var(--default-transition-duration);
+    }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      input {
+        font-size: var(--text-base);
+      }
+    }
+    input::placeholder {
+      color: var(--muted-foreground);
+    }
+    input:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    input:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    input[aria-invalid="true"] {
+      border-color: var(--destructive);
+      box-shadow: 0 0 0 3px color-mix(in oklab, var(--destructive) 20%, transparent);
+    }
+  </style>
+
+  <input
+    ref="control"
+    _aria-label="@label"
+    part="input"
+    _type="@type"
+    _value="@value"
+    _placeholder="@placeholder"
+    _autocomplete="@autocomplete"
+    _inputmode="@inputmode"
+    _pattern="@pattern"
+    _min="@min"
+    _max="@max"
+    _step="@step"
+    _minlength="@minlength"
+    _maxlength="@maxlength"
+    _disabled="@disabled"
+    _readonly="@readonly"
+    _required="@required"
+    _aria-invalid="@invalid"
+>
+</custom-element>

package/components/item.html

@@ -0,0 +1,208 @@
+<custom-element name="ui-item">
+  <script>
+    defineProps({
+      variant: prop.enum(["default", "outline", "muted"]).default("default"),
+      size: prop.enum(["default", "sm"]).default("default"),
+    });
+
+    onConnected(() => {
+      internals.role = host.parentElement?.localName === "ui-item-group" ? "listitem" : null;
+    });
+  </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;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: calc(var(--spacing) * 4);
+      padding: calc(var(--spacing) * 4);
+      border: 1px solid transparent;
+      border-radius: var(--radius-md);
+      font-size: var(--text-sm);
+      transition: background-color 0.1s;
+    }
+    :host(:state(attr-variant-is-outline)) {
+      border-color: var(--border);
+    }
+    :host(:state(attr-variant-is-muted)) {
+      background: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+    :host(:state(attr-size-is-sm)) {
+      gap: calc(var(--spacing) * 2.5);
+      padding: calc(var(--spacing) * 3) calc(var(--spacing) * 4);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-group" role="list">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-media">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-shrink: 0;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--spacing) * 2);
+    }
+    :host(:state(attr-variant-is-icon)) {
+      box-sizing: border-box;
+      width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 8);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-sm);
+      background: var(--muted);
+    }
+    :host(:state(attr-variant-is-image)) {
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+      overflow: hidden;
+      border-radius: var(--radius-sm);
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+    }
+    :host(:state(attr-variant-is-image)) ::slotted(img) {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-content">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex: 1;
+      flex-direction: column;
+      gap: calc(var(--spacing) * 1);
+      min-width: 0;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-title">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      font-weight: var(--font-weight-medium);
+      line-height: 1.25;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-description">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: -webkit-box;
+      overflow: hidden;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+      color: var(--muted-foreground);
+      line-height: 1.4;
+      text-wrap: balance;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-actions">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-header">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-basis: 100%;
+      align-items: center;
+      justify-content: space-between;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-item-footer">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-basis: 100%;
+      align-items: center;
+      justify-content: space-between;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>

package/components/kbd.html

@@ -0,0 +1,45 @@
+<custom-element name="ui-kbd">
+  <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;
+      justify-content: center;
+      gap: calc(var(--spacing) * 1);
+      height: calc(var(--spacing) * 5);
+      min-width: calc(var(--spacing) * 5);
+      padding: 0 calc(var(--spacing) * 1);
+      border-radius: var(--radius-xs);
+      background: var(--muted);
+      color: var(--muted-foreground);
+      font-family: var(--font-sans);
+      font-size: var(--text-xs);
+      font-weight: var(--font-weight-medium);
+      pointer-events: none;
+      user-select: none;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-kbd-group">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 1);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>