@threadlabs/looma 0.4.0 → 0.5.0

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.html

@@ -0,0 +1,271 @@
+<link rel="component" href="../ui-icon/ui-icon.html">
+<template component="ui-editor-table-toolbar" controller="./ui-editor-table-toolbar.js">
+  <defs>
+    <prop name="open" type="boolean" default="false">Shows the toolbar while a table selection is active.</prop>
+    <prop name="cellAlignment" type="left | center | right" default="left">Marks the alignment command that is active for the current cell.</prop>
+    <prop name="cellBackground" type="string" default="">Identifies the background choice that is active for the current cell.</prop>
+    <prop
+      name="actions"
+      type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)"
+    >The complete set of commands the current selection permits.</prop>
+    <state name="alignments" :value="[]"></state>
+    <state name="structure" :value="[]"></state>
+    <state name="swatches" :value="[]"></state>
+    <state name="sections" :value="[]"></state>
+    <state name="hasOverflow" :value="false"></state>
+    <state name="overflowOpen" :value="false"></state>
+    <event
+      name="action"
+      type="object({ action: align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table })"
+    ></event>
+  </defs>
+  <div role="toolbar" aria-label="Table actions" :hidden="not open">
+    <div $if="alignments" class="group" role="group" aria-label="Cell alignment">
+      <button
+        $each="item of alignments"
+        $key="item.action"
+        type="button"
+        class="icon-button"
+        class:active="item.active"
+        :data-action="item.action"
+        :aria-label="item.label"
+        :title="item.label"
+        :aria-pressed="item.active"
+      >
+        <ui-icon :name="item.action"></ui-icon>
+      </button>
+    </div>
+    <div $if="alignments and structure" class="sep" aria-hidden="true"></div>
+    <div $if="structure" class="group" role="group" aria-label="Table structure">
+      <button $each="item of structure" $key="item.action" type="button" :data-action="item.action">
+        <ui-icon :name="item.icon"></ui-icon>
+        <span $value="item.label"></span>
+      </button>
+    </div>
+    <div $if="(alignments or structure) and hasOverflow" class="sep" aria-hidden="true"></div>
+    <div $if="hasOverflow" class="overflow">
+      <button type="button" class="more" data-action="toggle-overflow" aria-haspopup="menu" :aria-expanded="overflowOpen">
+        <ui-icon name="table"></ui-icon>
+        <span>Table options</span>
+        <span class="chevron"><ui-icon name="chevron-down"></ui-icon></span>
+      </button>
+      <div $if="overflowOpen" class="menu" role="menu" aria-label="More table actions">
+        <div $if="swatches" class="menu-section" role="none">
+          <div class="menu-heading" role="presentation">Background</div>
+          <div class="swatches" role="group" aria-label="Cell background">
+            <button
+              $each="swatch of swatches"
+              $key="swatch.action"
+              type="button"
+              class="swatch-button"
+              class:selected="swatch.selected"
+              role="menuitemradio"
+              :aria-checked="swatch.selected"
+              :data-action="swatch.action"
+            >
+              <span class="swatch" class:default="not swatch.color" style:--ui-editor-table-toolbar-swatch="swatch.color"></span>
+              <span $value="swatch.label"></span>
+            </button>
+          </div>
+        </div>
+        <div $each="section of sections" $key="section.heading" class="menu-section divided" role="none">
+          <div class="menu-heading" role="presentation" $value="section.heading"></div>
+          <button $each="item of section.items" $key="item.action" type="button" role="menuitem" class:danger="item.danger" :data-action="item.action">
+            <ui-icon :name="item.icon"></ui-icon>
+            <span $value="item.label"></span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <style>
+    .looma-editor__mobile-toolbar-shell :host {
+      min-width: max-content;
+      min-height: 100%;
+      padding: 0;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+
+    .looma-editor__mobile-toolbar-shell :host button {
+      min-height: 44px;
+      background: transparent;
+    }
+
+    .looma-editor__mobile-toolbar-shell :host button.active,
+    .looma-editor__mobile-toolbar-shell :host button.selected {
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+    }
+
+    .looma-editor__mobile-toolbar-shell :host .menu {
+      top: auto;
+      right: 0;
+      bottom: calc(100% + var(--ui-space-2, 8px));
+      max-height: min(50dvh, 22rem);
+      overflow-y: auto;
+      overscroll-behavior: contain;
+    }
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--ui-space-1, 4px);
+      padding: var(--ui-space-1, 4px);
+      background: color-mix(in srgb, var(--ui-surface, #fff) 94%, transparent);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: calc(var(--ui-radius-md, 6px) + 2px);
+      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+      backdrop-filter: blur(10px);
+    }
+
+    .group {
+      display: inline-flex;
+      align-items: center;
+      gap: 2px;
+      overflow: hidden;
+    }
+
+    .sep {
+      width: 1px;
+      align-self: stretch;
+      background: var(--ui-border, #e5e7eb);
+    }
+
+    .overflow {
+      position: relative;
+    }
+
+    :host button {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ui-space-1-5, 6px);
+      min-height: 32px;
+      border: 0;
+      border-radius: var(--ui-radius-sm, 4px);
+      background: transparent;
+      color: var(--ui-text-primary, #111827);
+      cursor: pointer;
+      font-size: var(--ui-text-sm, 0.875rem);
+      font-weight: 500;
+      line-height: 1;
+      padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
+      white-space: nowrap;
+    }
+
+    :host button:hover {
+      background: var(--ui-surface-hover, #f3f4f6);
+    }
+
+    :host button.active {
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+      color: var(--ui-accent-active, #003d7a);
+    }
+
+    .group button {
+      border-radius: var(--ui-radius-sm, 4px);
+    }
+
+    .group button + button {
+      border-left: 0;
+    }
+
+    :host .more {
+      border: 0;
+      border-radius: var(--ui-radius-sm, 4px);
+    }
+
+    :host button.danger {
+      color: var(--ui-danger, #dc2626);
+    }
+
+    :host {
+      --ui-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
+      --ui-icon-stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
+    }
+
+    .chevron {
+      display: inline-flex;
+      --ui-icon-size: 0.875rem;
+    }
+
+    :host .icon-button {
+      width: 32px;
+      padding-inline: 0;
+    }
+
+    .menu {
+      position: absolute;
+      top: calc(100% + var(--ui-space-2, 8px));
+      right: 0;
+      min-width: 12rem;
+      padding: var(--ui-space-1, 4px);
+      background: var(--ui-surface, #fff);
+      border: 1px solid var(--ui-border, #e5e7eb);
+      border-radius: var(--ui-radius-md, 6px);
+      box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      z-index: 2;
+    }
+
+    .menu-section + .menu-section {
+      margin-top: var(--ui-space-1, 4px);
+      padding-top: var(--ui-space-1, 4px);
+      border-top: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, transparent);
+    }
+
+    .menu-heading {
+      padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
+      font-size: 0.6875rem;
+      font-weight: 700;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--ui-text-muted, #6b7280);
+    }
+
+    .menu button {
+      display: flex;
+      justify-content: flex-start;
+      width: 100%;
+      text-align: left;
+    }
+
+    .swatches {
+      display: grid;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+      gap: 2px;
+    }
+
+    :host .swatch-button {
+      gap: var(--ui-space-1, 4px);
+      justify-content: flex-start;
+    }
+
+    .swatch {
+      width: 14px;
+      height: 14px;
+      flex: 0 0 14px;
+      border: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, #000);
+      border-radius: 3px;
+      background: var(--ui-editor-table-toolbar-swatch);
+    }
+
+    .swatch.default {
+      background:
+        linear-gradient(135deg, transparent 44%, var(--ui-danger, #dc2626) 46% 54%, transparent 56%),
+        var(--ui-surface, #fff);
+    }
+
+    .swatch-button.selected {
+      background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
+    }
+
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-editor-table-toolbar/ui-editor-table-toolbar.js

@@ -0,0 +1,54 @@
+import { backgrounds } from "../shared/editor.js";
+
+const overflowSections = [
+  ["Structure", [["add-row-before", "Add row above", "panel-top"], ["add-column-before", "Add column left", "panel-left"]]],
+  ["Cells", [["clear-cells", "Clear selected cells", "eraser"], ["merge-cells", "Merge selected cells", "merge"], ["split-cell", "Split merged cell", "split"]]],
+  ["Table", [["delete-row", "Delete row", "trash", "danger"], ["delete-column", "Delete column", "trash", "danger"], ["delete-table", "Delete table", "trash", "danger"]]],
+];
+
+// Lists the actions the table selection permits; the overflow menu opens and closes here.
+export default function controller(host) {
+  const element = host.element;
+  const stop = host.effect(() => {
+    const enabled = new Set(Array.isArray(host.state.actions) ? host.state.actions : []);
+    const alignment = host.state.cellAlignment === "center" || host.state.cellAlignment === "right" ? host.state.cellAlignment : "left";
+    host.state.alignments = [["align-left", "Align left"], ["align-center", "Align center"], ["align-right", "Align right"]]
+      .filter(([action]) => enabled.has(action))
+      .map(([action, label]) => ({ action, label, active: action === `align-${alignment}` }));
+    host.state.structure = [["add-row-after", "Add row", "rows"], ["add-column-after", "Add column", "columns"]]
+      .filter(([action]) => enabled.has(action))
+      .map(([action, label, icon]) => ({ action, label, icon }));
+    const background = String(host.state.cellBackground ?? "");
+    host.state.swatches = backgrounds.filter(([action]) => enabled.has(action))
+      .map(([action, label, color]) => ({ action, label, color, selected: color === background }));
+    host.state.sections = overflowSections
+      .map(([heading, items]) => ({
+        heading,
+        items: items.filter(([action]) => enabled.has(action))
+          .map(([action, label, icon, tone]) => ({ action, label, icon, danger: tone === "danger" })),
+      }))
+      .filter((section) => section.items.length);
+    host.state.hasOverflow = host.state.swatches.length > 0 || host.state.sections.length > 0;
+    if (!host.state.open || !host.state.hasOverflow) host.state.overflowOpen = false;
+  });
+  const onClick = (event) => {
+    const action = event.target.closest?.("[data-action]")?.dataset.action;
+    if (!action) return;
+    if (action === "toggle-overflow") {
+      host.state.overflowOpen = !host.state.overflowOpen;
+      return;
+    }
+    host.state.overflowOpen = false;
+    host.dispatch("action", { action });
+  };
+  const onOutside = (event) => {
+    if (host.state.overflowOpen && !event.composedPath().includes(element)) host.state.overflowOpen = false;
+  };
+  element.addEventListener("click", onClick);
+  document.addEventListener("pointerdown", onOutside, true);
+  return () => {
+    stop();
+    element.removeEventListener("click", onClick);
+    document.removeEventListener("pointerdown", onOutside, true);
+  };
+}

package/components/ui-editor-toolbar/ui-editor-toolbar.html

@@ -0,0 +1,110 @@
+<template component="ui-editor-toolbar">
+  <defs>
+    <prop name="floating" type="boolean" default="false">Shows the toolbar as a floating bar beside the selection rather than pinned to the editor.</prop>
+  </defs>
+  <div role="toolbar" aria-label="Editor toolbar"><slot></slot></div>
+  <style>
+    :host {
+      position: sticky;
+      top: 0;
+      z-index: var(--ui-editor-toolbar-z-index, 10);
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      gap: var(--ui-editor-toolbar-gap, 2px);
+      padding: var(--ui-editor-toolbar-padding-block, 6px) var(--ui-editor-toolbar-padding-inline, 12px);
+      min-height: var(--ui-editor-toolbar-min-height, 48px);
+      overflow-x: auto;
+      scrollbar-width: none;
+      white-space: nowrap;
+      background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
+      border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+    }
+
+    :host::-webkit-scrollbar {
+      display: none;
+    }
+
+    :host > :slotted(*) {
+      flex: 0 0 auto;
+    }
+
+    :slotted(.divider) {
+      width: 1px;
+      height: 20px;
+      background: var(--ui-editor-toolbar-divider, var(--ui-border, #e5e7eb));
+      flex-shrink: 0;
+      margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
+    }
+
+    :host-state([floating]) {
+      position: static;
+      top: auto;
+      width: max-content;
+      max-width: min(calc(100vw - 24px), 100%);
+      min-height: auto;
+      padding: var(--ui-editor-toolbar-floating-padding, 4px);
+      overflow-x: visible;
+      background: color-mix(in srgb, var(--ui-editor-toolbar-bg, var(--ui-surface, #fff)) 96%, transparent);
+      border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+      border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+      box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
+      backdrop-filter: blur(10px);
+    }
+
+    @media (max-width: 767px) {
+      :host {
+        position: fixed;
+        top: auto;
+        bottom: env(safe-area-inset-bottom);
+        left: 0;
+        right: 0;
+        min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
+        border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+        border-bottom: none;
+        box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
+      }
+
+      :host-state([floating]) {
+        position: static;
+        inset: auto;
+        min-height: auto;
+        border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+        border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
+        box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
+      }
+    }
+
+    /* Inside LoomaEditor's sticky shell, the shell is the sticky surface. */
+    .looma-editor__sticky-toolbar-shell :host {
+      position: static;
+      min-height: var(--ui-editor-toolbar-min-height, 48px);
+      overscroll-behavior-inline: contain;
+      background: transparent;
+      border: 0;
+      box-shadow: none;
+    }
+
+    /* Inside LoomaEditor's mobile shell, the toolbar is a scroll-snapping strip. */
+    .looma-editor__mobile-toolbar-shell :host-state([floating]) {
+      width: 100%;
+      max-width: none;
+      min-height: 100%;
+      padding: 0;
+      overflow-x: auto;
+      overflow-y: hidden;
+      overscroll-behavior-inline: contain;
+      scroll-snap-type: x mandatory;
+      background: transparent;
+      border: 0;
+      border-radius: 0;
+      box-shadow: none;
+      backdrop-filter: none;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-floating-action-button/ui-floating-action-button.html

@@ -0,0 +1,83 @@
+<template component="ui-floating-action-button">
+  <defs>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="mobileOnly" type="boolean" default="false">mobileOnly token.</prop>
+    <prop name="label" type="string" default="">label token.</prop>
+  </defs>
+  <button type="button" :aria-label="label" :disabled="disabled"><slot></slot></button>
+  <style>
+    :host {
+      position: fixed;
+      inset-block-end: calc(var(--ui-floating-action-button-bottom, var(--ui-space-6, 1.5rem)) + env(safe-area-inset-bottom));
+      inset-inline-end: max(
+        var(--ui-floating-action-button-inline-end, var(--ui-space-5, 1.25rem)),
+        env(safe-area-inset-right)
+      );
+      inline-size: var(--ui-floating-action-button-size, 56px);
+      block-size: var(--ui-floating-action-button-size, 56px);
+      display: inline-flex;
+      z-index: var(--ui-floating-action-button-z-index, 100);
+    }
+
+    :host {
+      appearance: none;
+      border: none;
+      border-radius: 999px;
+      margin: 0;
+      padding: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--ui-floating-action-button-bg, var(--ui-accent-solid));
+      color: var(--ui-floating-action-button-color, var(--ui-text-on-accent));
+      box-shadow: var(
+        --ui-floating-action-button-shadow,
+        0 4px 12px color-mix(in srgb, var(--ui-accent-solid) 40%, transparent)
+      );
+      cursor: pointer;
+      transition:
+        background-color var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+        transform var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease),
+        box-shadow var(--ui-motion-fast, 160ms) var(--ui-motion-ease, ease);
+    }
+
+    :host:hover:enabled {
+      background: var(--ui-floating-action-button-hover-bg, var(--ui-accent-hover));
+      box-shadow: var(
+        --ui-floating-action-button-hover-shadow,
+        0 6px 16px color-mix(in srgb, var(--ui-accent-solid) 50%, transparent)
+      );
+    }
+
+    :host:active:enabled {
+      transform: scale(var(--ui-floating-action-button-active-scale, 0.94));
+    }
+
+    :host:focus-visible {
+      outline: 2px solid var(--ui-focus-ring, currentColor);
+      outline-offset: 2px;
+    }
+
+    :host:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+
+    :slotted(svg) {
+      inline-size: var(--ui-floating-action-button-icon-size, 24px);
+      block-size: var(--ui-floating-action-button-icon-size, 24px);
+      flex-shrink: 0;
+    }
+
+    @media (min-width: 768px) {
+      :host-state([mobileOnly]) {
+        display: none;
+      }
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-form-field/ui-form-field.html

@@ -0,0 +1,45 @@
+<template component="ui-form-field" controller="./ui-form-field.js">
+  <defs>
+    <prop name="invalid" type="boolean" default="false">invalid token.</prop>
+    <prop name="disabled" type="boolean" default="false">disabled token.</prop>
+    <prop name="required" type="boolean" default="false">required token.</prop>
+  </defs>
+  <div>
+    <slot name="label"></slot>
+    <slot></slot>
+    <slot name="help"></slot>
+    <slot name="error"></slot>
+  </div>
+  <style>
+    :host {
+      display: grid;
+      gap: var(--ui-space-2);
+      min-inline-size: 0;
+      align-content: start;
+      color: var(--ui-text-primary);
+    }
+
+    :slotted([slot="label"]) {
+      color: var(--ui-text-secondary);
+      font-size: 0.95rem;
+    }
+
+    :slotted([slot="help"]) {
+      min-block-size: var(--ui-form-field-help-min-block-size, 0);
+      color: var(--ui-text-muted);
+      font-size: 0.875rem;
+      line-height: var(--ui-line-height-md);
+    }
+
+    :slotted([slot="error"]),
+    :slotted([role="alert"]) {
+      color: var(--ui-accent-active);
+      font-size: 0.875rem;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>

package/components/ui-form-field/ui-form-field.js

@@ -0,0 +1,71 @@
+let nextFieldId = 0;
+
+function id(prefix) {
+  nextFieldId += 1;
+  return `${prefix}-${nextFieldId}`;
+}
+
+function descriptionIds(input) {
+  return Array.from(new Set((input.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean)));
+}
+
+export default function controller(host) {
+  const element = host.element;
+  let activeInput = null;
+  let owned = new Set();
+  let queued = false;
+  const removeOwned = (input) => {
+    if (!input || owned.size === 0) return;
+    const remaining = descriptionIds(input).filter((value) => !owned.has(value));
+    if (remaining.length) input.setAttribute("aria-describedby", remaining.join(" "));
+    else input.removeAttribute("aria-describedby");
+  };
+  const wire = () => {
+    const label = element.querySelector('[slot="label"], label');
+    const input = element.querySelector("input, textarea, select");
+    const help = element.querySelector('[slot="help"]');
+    const error = element.querySelector('[slot="error"], [role="alert"]');
+    if (input !== activeInput) {
+      removeOwned(activeInput);
+      activeInput = input;
+      owned = new Set();
+    }
+    if (!input) return;
+    if (!input.id) input.id = id("form-field-input");
+    if (label && !label.getAttribute("for")) label.setAttribute("for", input.id);
+    const external = descriptionIds(input).filter((value) => !owned.has(value));
+    const described = [];
+    if (help) {
+      if (!help.id) help.id = id("form-field-help");
+      described.push(help.id);
+    }
+    if (error) {
+      if (!error.id) error.id = id("form-field-error");
+      described.push(error.id);
+    }
+    owned = new Set(described.filter((value) => !external.includes(value)));
+    const next = Array.from(new Set([...external, ...described])).join(" ");
+    if (next && input.getAttribute("aria-describedby") !== next) input.setAttribute("aria-describedby", next);
+    else if (!next && input.hasAttribute("aria-describedby")) input.removeAttribute("aria-describedby");
+    input.disabled = Boolean(host.state.disabled);
+    input.required = Boolean(host.state.required);
+    input.setAttribute("aria-invalid", String(Boolean(host.state.invalid)));
+  };
+  const schedule = () => {
+    if (queued) return;
+    queued = true;
+    queueMicrotask(() => {
+      queued = false;
+      wire();
+    });
+  };
+  const observer = new MutationObserver(schedule);
+  observer.observe(element, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-describedby", "slot", "id", "role"] });
+  const stop = host.effect(schedule);
+  wire();
+  return () => {
+    stop();
+    observer.disconnect();
+    removeOwned(activeInput);
+  };
+}

package/components/ui-grid/ui-grid.html

@@ -0,0 +1,46 @@
+<template component="ui-grid">
+  <defs>
+    <prop name="gap" type="xs | s | m | l | xl">gap token.</prop>
+    <prop name="min" type="sm | md | lg">min token.</prop>
+  </defs>
+  <div><slot></slot></div>
+  <style>
+    :host {
+      --_grid-gap: var(--ui-space-4, 1rem);
+      --_grid-min: 12rem;
+      display: grid;
+      gap: var(--ui-grid-gap, var(--_grid-gap));
+      grid-template-columns: repeat(auto-fit, minmax(min(var(--ui-grid-min, var(--_grid-min)), 100%), 1fr));
+      min-inline-size: 0;
+      max-inline-size: 100%;
+      margin: 0;
+    }
+
+    :host-state([gap="xs"]) {
+      --_grid-gap: var(--ui-space-2, 0.5rem);
+    }
+    :host-state([gap="s"]) {
+      --_grid-gap: var(--ui-space-3, 0.75rem);
+    }
+    :host-state([gap="m"]) {
+      --_grid-gap: var(--ui-space-4, 1rem);
+    }
+    :host-state([gap="l"]) {
+      --_grid-gap: var(--ui-space-5, 1.5rem);
+    }
+    :host-state([gap="xl"]) {
+      --_grid-gap: var(--ui-space-6, 2rem);
+    }
+    :host-state([min="md"]) {
+      --_grid-min: 16rem;
+    }
+    :host-state([min="lg"]) {
+      --_grid-min: 20rem;
+    }
+
+    /* A component that sets its display still honours the hidden attribute on its root. */
+    :host[hidden] {
+      display: none;
+    }
+  </style>
+</template>