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

package/components/scroll-area.html

@@ -0,0 +1,56 @@
+<custom-element name="ui-scroll-area">
+  <script>
+    defineProps({
+      orientation: prop.enum(["vertical", "horizontal", "both"]).default("vertical"),
+      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: block;
+      position: relative;
+      box-sizing: border-box;
+      overflow: hidden;
+      border-radius: inherit;
+    }
+    :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-variant-is-outline)) {
+      border: 1px solid var(--border);
+      border-radius: var(--radius-md);
+    }
+    .viewport {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      overflow-x: hidden;
+      scrollbar-width: thin;
+      scrollbar-color: var(--border) transparent;
+      border-radius: inherit;
+      outline: none;
+    }
+    :host(:state(attr-orientation-is-horizontal)) .viewport {
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+    :host(:state(attr-orientation-is-both)) .viewport {
+      overflow: auto;
+    }
+    .viewport:focus-visible {
+      box-shadow: var(--focus-ring);
+    }
+  </style>
+
+  <div class="viewport" part="viewport" tabindex="0"><slot></slot></div>
+</custom-element>

package/components/select.html

@@ -0,0 +1,103 @@
+<custom-element name="ui-select" form-associated delegates-focus>
+  <script>
+    const props = defineProps({
+      value: prop.string().default(""),
+      placeholder: prop.string(),
+      size: prop.enum(["default", "sm"]).default("default"),
+      disabled: prop.boolean(),
+      required: prop.boolean(),
+      label: prop.string().attribute("aria-label"),
+    });
+
+    const options = useChildren("option", ["value", "label", "disabled", "selected"]);
+    const menu = useState({
+      get empty() {
+        return !props.value;
+      },
+      get options() {
+        return options.map((option, index) => ({
+          id: `${index}:${option.value}`,
+          value: option.value,
+          label: option.label,
+          disabled: option.disabled,
+          selected: option.value === props.value,
+        }));
+      },
+    });
+
+    observe(() => {
+      if (props.placeholder || !options.length || menu.options.some((option) => option.selected)) return;
+      props.value = (options.find((option) => option.hasAttribute("selected")) ?? options[0]).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);
+    }
+    :host(:state(attr-width)) {
+      width: calc(var(--spacing) * var(--attr-width));
+    }
+    select {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(var(--spacing) * 9);
+      padding: 0 calc(var(--spacing) * 8) 0 calc(var(--spacing) * 3);
+      border: 1px solid var(--input);
+      border-radius: var(--radius-md);
+      background: transparent
+        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23888' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+        no-repeat right calc(var(--spacing) * 2) center;
+      color: inherit;
+      font: inherit;
+      font-size: var(--text-sm);
+      box-shadow: var(--shadow-xs);
+      appearance: none;
+      outline: none;
+      cursor: pointer;
+    }
+    /* iOS Safari zooms in on a focused field whose text is under 16px. */
+    @media (pointer: coarse) {
+      select {
+        font-size: var(--text-base);
+      }
+    }
+    :host(:state(attr-size-is-sm)) select {
+      height: calc(var(--spacing) * 8);
+    }
+    select:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    select:disabled {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+    option {
+      background: var(--popover);
+      color: var(--popover-foreground);
+    }
+    .source {
+      display: none;
+    }
+  </style>
+
+  <select
+    ref="control"
+    _aria-label="@label"
+    part="control"
+    _disabled="@disabled"
+    _required="@required"
+>
+    <option value="" disabled _hidden="!@placeholder" _label="@placeholder" _selected="#menu.empty"></option>
+    <option repeat="#menu.options" as="option" key="id" _value="#option.value" _label="#option.label" _selected="#option.selected" _disabled="#option.disabled"></option>
+  </select>
+  <div class="source"><slot></slot></div>
+</custom-element>

package/components/separator.html

@@ -0,0 +1,31 @@
+<custom-element name="ui-separator" role="separator">
+  <script>
+    const props = defineProps({
+      orientation: prop.enum(["horizontal", "vertical"]).default("horizontal"),
+    });
+    observe(() => {
+      internals.ariaOrientation = props.orientation;
+    });
+  </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;
+      flex-shrink: 0;
+      height: 1px;
+      width: 100%;
+      background: var(--border);
+    }
+    :host(:state(attr-orientation-is-vertical)) {
+      height: auto;
+      width: 1px;
+      align-self: stretch;
+    }
+  </style>
+</custom-element>

package/components/sheet.html

@@ -0,0 +1,173 @@
+<import-element from="./dialog.html"></import-element>
+
+<custom-element name="ui-sheet">
+  <script>
+    const props = defineProps({
+      open: prop.boolean().reflect(),
+      side: prop.enum(["top", "right", "bottom", "left"]).default("right"),
+    });
+
+    const parts = useChildren("ui-sheet-header, ui-sheet-title, ui-sheet-description");
+    const sheet = useState({
+      get label() {
+        return text("ui-sheet-title");
+      },
+      get description() {
+        return text("ui-sheet-description");
+      },
+    });
+
+    function text(selector) {
+      const found = parts.flatMap((part) => (part.matches(selector) ? [part] : [...part.querySelectorAll(selector)]));
+      return found.map((part) => part.textContent.trim()).join(" ") || null;
+    }
+
+    function show() {
+      props.open = true;
+    }
+
+    function showFrom(trigger) {
+      trigger.firstElementChild?.focus();
+      show();
+    }
+
+    function close() {
+      props.open = false;
+    }
+
+    function requestClose() {
+      refs.dialog.requestClose();
+    }
+
+    function closed() {
+      props.open = false;
+      dispatch("close", undefined, { bubbles: false, composed: false });
+    }
+
+    const COMMANDS = { "show-modal": show, close, "request-close": requestClose };
+
+    defineMethods({ showModal: show, show, close, requestClose });
+
+    listen("command", (event) => COMMANDS[event.command.replace(/^--/, "")]?.());
+  </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 name="trigger"></slot>
+  <ui-dialog ref="dialog" part="dialog" _side="@side" _open="@open" _label="#sheet.label" _description="#sheet.description" onclose="closed()">
+    <slot name="header" slot="header"></slot>
+    <slot></slot>
+    <slot name="footer" slot="footer"></slot>
+  </ui-dialog>
+</custom-element>
+
+<custom-element name="ui-sheet-trigger" slot="trigger">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host,
+    span {
+      display: contents;
+    }
+  </style>
+
+  <span part="trigger" onclick="showFrom(host)"><slot></slot></span>
+</custom-element>
+
+<custom-element name="ui-sheet-close">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host,
+    span {
+      display: contents;
+    }
+  </style>
+
+  <span part="close" onclick="close()"><slot></slot></span>
+</custom-element>
+
+<custom-element name="ui-sheet-header" slot="header">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: grid;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-sheet-title">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+    }
+    h2 {
+      margin: 0;
+      font-size: var(--text-lg);
+      font-weight: var(--font-weight-semibold);
+      line-height: 1;
+    }
+  </style>
+
+  <h2 part="title"><slot></slot></h2>
+</custom-element>
+
+<custom-element name="ui-sheet-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>
+
+<custom-element name="ui-sheet-footer" slot="footer">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: flex-end;
+      gap: calc(var(--spacing) * 2);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>