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

package/components/button.html

@@ -0,0 +1,194 @@
+<custom-element name="ui-button" form-associated delegates-focus>
+  <script>
+    const props = defineProps({
+      variant: prop.enum(["default", "destructive", "outline", "secondary", "ghost", "link"]).default("default"),
+      size: prop.enum(["default", "xs", "sm", "lg", "icon", "icon-xs", "icon-sm", "icon-lg"]).default("default"),
+      type: prop.enum(["button", "submit", "reset"]).default("button"),
+      disabled: prop.boolean().reflect(),
+      label: prop.string().attribute("aria-label"),
+      description: prop.string().attribute("aria-description"),
+      popovertarget: prop.string(),
+      popovertargetaction: prop.enum(["toggle", "show", "hide"]),
+      commandfor: prop.string(),
+      command: prop.string(),
+    });
+
+    const NATIVE_COMMANDS = "commandForElement" in HTMLButtonElement.prototype;
+    const COMMAND_METHODS = {
+      "show-modal": "showModal",
+      close: "close",
+      "request-close": "requestClose",
+      "toggle-popover": "togglePopover",
+      "show-popover": "showPopover",
+      "hide-popover": "hidePopover",
+    };
+    const DIALOG_COMMANDS = new Set(["show-modal", "close", "request-close"]);
+    const FORM_ACTIONS = { submit: "requestSubmit", reset: "reset" };
+
+    function target(id) {
+      return id ? host.getRootNode().getElementById(id) : null;
+    }
+
+    function nativeCommand(element) {
+      const command = props.command ?? "";
+      const customTarget = element && !(element instanceof HTMLDialogElement);
+      return customTarget && DIALOG_COMMANDS.has(command) ? `--${command}` : command;
+    }
+
+    function emulateCommand() {
+      const element = target(props.commandfor);
+      if (NATIVE_COMMANDS || !element || !props.command) return;
+      const event = Object.assign(new Event("command", { cancelable: true }), { command: props.command, source: host });
+      if (element.dispatchEvent(event)) element[COMMAND_METHODS[props.command]]?.();
+    }
+
+    function activate() {
+      if (props.disabled) return;
+      emulateCommand();
+      const action = FORM_ACTIONS[props.type];
+      if (internals.form && action) HTMLFormElement.prototype[action].call(internals.form);
+    }
+
+    observe(() => {
+      const button = refs.button;
+      if (!button) return;
+      button.popoverTargetElement = target(props.popovertarget);
+      if (props.popovertargetaction) button.popoverTargetAction = props.popovertargetaction;
+      if (!NATIVE_COMMANDS) return;
+      const element = target(props.commandfor);
+      button.commandForElement = element;
+      button.command = nativeCommand(element);
+    });
+  </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;
+      vertical-align: middle;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+    button {
+      all: unset;
+      box-sizing: border-box;
+      display: inline-flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      gap: calc(var(--spacing) * 2);
+      height: calc(var(--spacing) * 9);
+      padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
+      border: 1px solid transparent;
+      border-radius: var(--radius-md);
+      border-start-start-radius: var(--ui-radius-block-start, var(--ui-radius-start, var(--radius-md)));
+      border-end-start-radius: var(--ui-radius-block-end, var(--ui-radius-start, var(--radius-md)));
+      border-start-end-radius: var(--ui-radius-block-start, var(--ui-radius-end, var(--radius-md)));
+      border-end-end-radius: var(--ui-radius-block-end, var(--ui-radius-end, var(--radius-md)));
+      font: inherit;
+      font-size: var(--text-sm);
+      line-height: calc(var(--spacing) * 5);
+      font-weight: var(--font-weight-medium);
+      white-space: nowrap;
+      cursor: pointer;
+      transition: background-color var(--default-transition-duration), color var(--default-transition-duration), box-shadow var(--default-transition-duration), opacity var(--default-transition-duration);
+      background: var(--primary);
+      color: var(--primary-foreground);
+    }
+    /* Mixing toward the text colour darkens a light-mode fill and lightens a dark-mode one, so
+       hover never lowers the text contrast. */
+    button:hover {
+      background: color-mix(in oklab, var(--primary) 88%, var(--foreground));
+    }
+    button:focus-visible {
+      border-color: var(--ring);
+      box-shadow: var(--focus-ring);
+    }
+    button:disabled {
+      pointer-events: none;
+      opacity: 0.5;
+    }
+    ::slotted(svg) {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      flex-shrink: 0;
+      pointer-events: none;
+    }
+    :host(:state(attr-variant-is-destructive)) button {
+      background: var(--destructive);
+      color: var(--destructive-foreground);
+    }
+    :host(:state(attr-variant-is-destructive)) button:hover {
+      background: color-mix(in oklab, var(--destructive) 88%, var(--foreground));
+    }
+    :host(:state(attr-variant-is-outline)) button {
+      border-color: var(--border);
+      background: var(--background);
+      color: var(--foreground);
+      box-shadow: var(--shadow-xs);
+    }
+    :host(:state(attr-variant-is-outline)) button:hover,
+    :host(:state(attr-variant-is-ghost)) button:hover {
+      background: var(--accent);
+      color: var(--accent-foreground);
+    }
+    :host(:state(attr-variant-is-secondary)) button {
+      background: var(--secondary);
+      color: var(--secondary-foreground);
+    }
+    :host(:state(attr-variant-is-secondary)) button:hover {
+      background: color-mix(in oklab, var(--secondary) 80%, transparent);
+    }
+    :host(:state(attr-variant-is-ghost)) button {
+      background: transparent;
+      color: var(--foreground);
+    }
+    :host(:state(attr-variant-is-link)) button {
+      background: transparent;
+      color: var(--primary);
+      text-underline-offset: 4px;
+    }
+    :host(:state(attr-variant-is-link)) button:hover {
+      text-decoration: underline;
+    }
+    :host(:state(attr-size-is-xs)) button {
+      height: calc(var(--spacing) * 6);
+      gap: calc(var(--spacing) * 1);
+      padding: 0 calc(var(--spacing) * 2);
+      font-size: var(--text-xs);
+    }
+    :host(:state(attr-size-is-sm)) button {
+      height: calc(var(--spacing) * 8);
+      gap: calc(var(--spacing) * 1.5);
+      padding: 0 calc(var(--spacing) * 3);
+    }
+    :host(:state(attr-size-is-lg)) button {
+      height: calc(var(--spacing) * 10);
+      padding: 0 calc(var(--spacing) * 6);
+    }
+    :host(:is(:state(attr-size-is-icon), :state(attr-size-is-icon-xs), :state(attr-size-is-icon-sm), :state(attr-size-is-icon-lg))) button {
+      padding: 0;
+      width: calc(var(--spacing) * 9);
+    }
+    :host(:state(attr-size-is-icon-xs)) button {
+      width: calc(var(--spacing) * 6);
+      height: calc(var(--spacing) * 6);
+    }
+    :host(:state(attr-size-is-icon-sm)) button {
+      width: calc(var(--spacing) * 8);
+      height: calc(var(--spacing) * 8);
+    }
+    :host(:state(attr-size-is-icon-lg)) button {
+      width: calc(var(--spacing) * 10);
+      height: calc(var(--spacing) * 10);
+    }
+  </style>
+
+  <button type="button" ref="button" part="button" _aria-label="@label" _aria-description="@description" _disabled="@disabled" onclick="activate()"><slot></slot></button>
+</custom-element>

package/components/calendar.html

@@ -0,0 +1,176 @@
+<import-element from="./button.html"></import-element>
+
+<custom-element name="ui-calendar" form-associated>
+  <script>
+    const props = defineProps({
+      value: prop.string().default(""),
+      month: prop.string(),
+      min: prop.string(),
+      max: prop.string(),
+      locale: prop.string(),
+    });
+
+    const iso = (date) => date.toISOString().slice(0, 10);
+    const parse = (text) => new Date(`${text}T00:00:00Z`);
+    const now = new Date();
+    const today = iso(new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate())));
+    const KEYS = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 };
+
+    const view = useState({
+      shown: (props.month || props.value || today).slice(0, 7),
+      focused: props.value || today,
+      get title() {
+        return new Intl.DateTimeFormat(props.locale, { month: "long", year: "numeric", timeZone: "UTC" }).format(parse(`${this.shown}-01`));
+      },
+      get weekdays() {
+        const sunday = Date.UTC(2023, 0, 1);
+        return Array.from({ length: 7 }, (_, day) =>
+          new Intl.DateTimeFormat(props.locale, { weekday: "short", timeZone: "UTC" }).format(new Date(sunday + day * 864e5)),
+        );
+      },
+      get weeks() {
+        const first = parse(`${this.shown}-01`);
+        const start = new Date(first.getTime() - first.getUTCDay() * 864e5);
+        const days = Array.from({ length: 42 }, (_, n) => {
+          const date = iso(new Date(start.getTime() + n * 864e5));
+          return {
+            date,
+            day: Number(date.slice(8)),
+            outside: !date.startsWith(this.shown),
+            selected: date === props.value,
+            today: date === today,
+            disabled: (props.min && date < props.min) || (props.max && date > props.max) || false,
+            tabindex: date === this.focused ? 0 : -1,
+          };
+        });
+        return Array.from({ length: 6 }, (_, week) => ({ week, days: days.slice(week * 7, week * 7 + 7) }));
+      },
+    });
+
+    function shift(months) {
+      const date = parse(`${view.shown}-01`);
+      date.setUTCMonth(date.getUTCMonth() + months);
+      view.shown = iso(date).slice(0, 7);
+    }
+
+    function previous() {
+      shift(-1);
+    }
+
+    function next() {
+      shift(1);
+    }
+
+    function pick(day) {
+      props.value = day.date;
+      view.focused = day.date;
+      view.shown = day.date.slice(0, 7);
+      dispatch("change");
+    }
+
+    async function keys(day, event) {
+      const step = KEYS[event.key];
+      if (!step) return;
+      event.preventDefault();
+      view.focused = iso(new Date(parse(day.date).getTime() + step * 864e5));
+      view.shown = view.focused.slice(0, 7);
+      await tick();
+      refs.grid.querySelector(`[data-date="${view.focused}"]`)?.focus();
+    }
+  </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-block;
+      padding: calc(var(--spacing) * 3);
+      border: 1px solid var(--border);
+      border-radius: var(--radius-lg);
+      font-size: var(--text-sm);
+    }
+    header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: calc(var(--spacing) * 3);
+    }
+    .title {
+      font-weight: var(--font-weight-medium);
+    }
+    table {
+      border-collapse: collapse;
+    }
+    th {
+      width: calc(var(--spacing) * 9);
+      padding-bottom: calc(var(--spacing) * 1);
+      font-size: var(--text-xs);
+      font-weight: var(--font-weight-normal);
+      color: var(--muted-foreground);
+    }
+    td {
+      padding: 0;
+    }
+    button {
+      all: unset;
+      box-sizing: border-box;
+      display: grid;
+      place-content: center;
+      width: calc(var(--spacing) * 9);
+      height: calc(var(--spacing) * 9);
+      border-radius: var(--radius-md);
+      cursor: pointer;
+    }
+    button:hover {
+      background: var(--accent);
+    }
+    button:focus-visible {
+      box-shadow: var(--focus-ring);
+    }
+    button[data-outside] {
+      color: var(--muted-foreground);
+    }
+    button[data-today] {
+      background: var(--accent);
+    }
+    button[aria-selected="true"] {
+      background: var(--primary);
+      color: var(--primary-foreground);
+    }
+    button:disabled {
+      pointer-events: none;
+      opacity: 0.4;
+    }
+  </style>
+
+  <header part="header">
+    <ui-button variant="outline" size="icon-sm" aria-label="Previous month" onclick="previous()">‹</ui-button>
+    <span class="title" aria-live="polite"><slot name="#view.title"></slot></span>
+    <ui-button variant="outline" size="icon-sm" aria-label="Next month" onclick="next()">›</ui-button>
+  </header>
+  <table role="grid" ref="grid" part="grid">
+    <thead>
+      <tr><th repeat="#view.weekdays" as="weekday" scope="col"><slot name="#weekday"></slot></th></tr>
+    </thead>
+    <tbody>
+      <tr repeat="#view.weeks" as="row" key="week">
+        <td repeat="#row.days" as="day" key="date">
+          <button type="button"
+            part="day"
+            _data-date="#day.date"
+            _data-outside="#day.outside"
+            _data-today="#day.today"
+            _aria-selected="#day.selected"
+            _disabled="#day.disabled"
+            _tabindex="#day.tabindex"
+            onclick="pick(day)"
+            onkeydown="keys(day, event)"><slot name="#day.day"></slot></button>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</custom-element>

package/components/card.html

@@ -0,0 +1,143 @@
+<custom-element name="ui-card">
+  <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-direction: column;
+      gap: calc(var(--spacing) * 6);
+      padding: calc(var(--spacing) * 6) 0;
+      border: 1px solid var(--border);
+      border-radius: var(--radius-xl);
+      background: var(--card);
+      color: var(--card-foreground);
+      box-shadow: var(--shadow-xs);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-card-header">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: grid;
+      grid-auto-rows: min-content;
+      align-items: start;
+      gap: calc(var(--spacing) * 1.5);
+      padding: 0 calc(var(--spacing) * 6);
+    }
+    ::slotted(:not(ui-card-action)) {
+      grid-column: 1;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-card-title">
+  <script>
+    defineProps({ level: prop.number().int().min(1).max(6).default(3) });
+  </script>
+
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+    }
+    [part="title"] {
+      margin: 0;
+      font-size: var(--text-base);
+      font-weight: var(--font-weight-semibold);
+      line-height: 1;
+    }
+  </style>
+
+  <div part="title" role="heading" _aria-level="@level"><slot></slot></div>
+</custom-element>
+
+<custom-element name="ui-card-description">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+      font-size: var(--text-sm);
+      color: var(--muted-foreground);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-card-action">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+      grid-column: 2;
+      grid-row: 1 / span 2;
+      justify-self: end;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-card-content">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: block;
+      padding: 0 calc(var(--spacing) * 6);
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>
+
+<custom-element name="ui-card-footer">
+  <style>
+    :host,
+    * {
+      touch-action: manipulation;
+    }
+    :host {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--spacing) * 2);
+      padding: 0 calc(var(--spacing) * 6);
+    }
+    :host(:state(attr-justify-is-between)) {
+      justify-content: space-between;
+    }
+    :host(:state(attr-justify-is-end)) {
+      justify-content: flex-end;
+    }
+    :host(:state(attr-orientation-is-vertical)) {
+      flex-direction: column;
+      align-items: stretch;
+    }
+  </style>
+
+  <slot></slot>
+</custom-element>