@auvyx/ui 0.0.0-stage → 0.1.0

package/dist/ui/data-table.js

@@ -0,0 +1,140 @@
+/* @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
+(() => {
+  // ../elements/src/data-table.js
+  var AuvyxDataTable = class extends HTMLElement {
+    connectedCallback() {
+      if (this._init) return;
+      this._init = true;
+      this.table = this.querySelector("table");
+      this.tbody = this.table?.tBodies[0];
+      if (!this.tbody) return;
+      this.rows = [...this.tbody.rows].filter((r) => !r.hasAttribute("data-empty"));
+      this.empty = this.tbody.querySelector("tr[data-empty]");
+      this.pageSize = parseInt(this.dataset.pageSize, 10) || 0;
+      this.page = 0;
+      this.query = "";
+      this.sort = { col: -1, dir: "ascending" };
+      this.collator = new Intl.Collator(this.closest("[lang]")?.lang || void 0, { numeric: true, sensitivity: "base" });
+      this.headers = [...this.table.tHead.rows[0].cells];
+      this.headers.forEach((th, col) => {
+        const button = th.hasAttribute("aria-sort") ? th.querySelector(":scope > button") : null;
+        button?.addEventListener("click", () => this.toggleSort(col));
+      });
+      this.filterInput = this.querySelector("input[data-filter]");
+      this.filterInput?.addEventListener("input", () => {
+        this.query = this.filterInput.value.trim().toLocaleLowerCase();
+        this.page = 0;
+        this.render();
+      });
+      this.selectAll = this.querySelector("input[data-select-all]");
+      this.selectAll?.addEventListener("change", () => {
+        this.visible().forEach((row) => this.setSelected(row, this.selectAll.checked));
+        this.updateSelection();
+      });
+      this.tbody.addEventListener("change", (e) => {
+        if (!e.target.matches("input[data-select]")) return;
+        this.setSelected(e.target.closest("tr"), e.target.checked);
+        this.updateSelection();
+      });
+      this.querySelectorAll("input[data-column]").forEach((toggle) => {
+        toggle.addEventListener("change", () => this.setColumn(parseInt(toggle.dataset.column, 10), toggle.checked));
+        if (!toggle.checked) this.setColumn(parseInt(toggle.dataset.column, 10), false);
+      });
+      this.querySelector('[data-page="prev"]')?.addEventListener("click", () => {
+        this.page--;
+        this.render();
+      });
+      this.querySelector('[data-page="next"]')?.addEventListener("click", () => {
+        this.page++;
+        this.render();
+      });
+      this.rows.forEach((row) => {
+        const box = row.querySelector("input[data-select]");
+        if (box?.checked) row.setAttribute("aria-selected", "true");
+      });
+      this.render();
+    }
+    cellValue(row, col) {
+      const cell = row.cells[col];
+      return cell ? cell.dataset.value ?? cell.textContent.trim() : "";
+    }
+    matches(row) {
+      if (!this.query) return true;
+      const only = this.filterInput?.dataset.filter;
+      const cols = only ? only.split(",").map(Number) : null;
+      return [...row.cells].some((cell, i) => (!cols || cols.includes(i)) && cell.textContent.toLocaleLowerCase().includes(this.query));
+    }
+    toggleSort(col) {
+      this.sort = this.sort.col === col ? { col, dir: this.sort.dir === "ascending" ? "descending" : "ascending" } : { col, dir: "ascending" };
+      this.headers.forEach((th, i) => th.hasAttribute("aria-sort") && th.setAttribute("aria-sort", i === col ? this.sort.dir : "none"));
+      this.render();
+    }
+    ordered() {
+      const list = this.rows.filter((r) => this.matches(r));
+      const { col, dir } = this.sort;
+      if (col < 0) return list;
+      const numeric = this.headers[col]?.dataset.type === "number";
+      const sign = dir === "descending" ? -1 : 1;
+      return list.sort((a, b) => {
+        const x = this.cellValue(a, col);
+        const y = this.cellValue(b, col);
+        return sign * (numeric ? (parseFloat(x) || 0) - (parseFloat(y) || 0) : this.collator.compare(x, y));
+      });
+    }
+    visible() {
+      return this.rows.filter((r) => !r.hidden);
+    }
+    setSelected(row, on) {
+      const box = row.querySelector("input[data-select]");
+      if (box) box.checked = on;
+      if (on) row.setAttribute("aria-selected", "true");
+      else row.removeAttribute("aria-selected");
+    }
+    setColumn(col, show) {
+      [this.table.tHead, ...this.table.tBodies, this.table.tFoot].filter(Boolean).forEach((section) => {
+        [...section.rows].forEach((row) => {
+          if (row.cells[col] && !row.hasAttribute("data-empty")) row.cells[col].hidden = !show;
+        });
+      });
+    }
+    updateSelection() {
+      const shown = this.visible();
+      const selected = this.rows.filter((r) => r.getAttribute("aria-selected") === "true").length;
+      const shownSelected = shown.filter((r) => r.getAttribute("aria-selected") === "true").length;
+      if (this.selectAll) {
+        this.selectAll.checked = shown.length > 0 && shownSelected === shown.length;
+        this.selectAll.indeterminate = shownSelected > 0 && shownSelected < shown.length;
+      }
+      const count = this.querySelector("[data-selected-count]");
+      if (count) {
+        const tpl = count.dataset.template || "{selected} of {total} row(s) selected.";
+        count.textContent = tpl.replace("{selected}", selected).replace("{total}", this.rows.length);
+      }
+      this.dispatchEvent(new CustomEvent("selectionchange", { detail: { rows: this.rows.filter((r) => r.getAttribute("aria-selected") === "true") } }));
+    }
+    render() {
+      const list = this.ordered();
+      const pages = this.pageSize ? Math.max(1, Math.ceil(list.length / this.pageSize)) : 1;
+      this.page = Math.min(Math.max(0, this.page), pages - 1);
+      const from = this.pageSize ? this.page * this.pageSize : 0;
+      const to = this.pageSize ? from + this.pageSize : list.length;
+      const shown = new Set(list.slice(from, to));
+      list.forEach((row) => this.tbody.insertBefore(row, this.empty));
+      this.rows.forEach((row) => {
+        row.hidden = !shown.has(row);
+      });
+      if (this.empty) this.empty.hidden = list.length > 0;
+      const status = this.querySelector("[data-page-status]");
+      if (status) {
+        const tpl = status.dataset.template || "Page {page} of {pages}";
+        status.textContent = tpl.replace("{page}", this.page + 1).replace("{pages}", pages);
+      }
+      const prev = this.querySelector('[data-page="prev"]');
+      const next = this.querySelector('[data-page="next"]');
+      if (prev) prev.disabled = this.page <= 0;
+      if (next) next.disabled = this.page >= pages - 1;
+      this.updateSelection();
+    }
+  };
+  if (!customElements.get("auvyx-data-table")) customElements.define("auvyx-data-table", AuvyxDataTable);
+})();

package/dist/ui/date-picker.css

@@ -0,0 +1,14 @@
+/* @auvyx/ui date-picker | order 59 */
+@layer components {
+  .date-picker > button:first-child {
+      width: calc(var(--spacing) * 60);
+      --tw-font-weight: var(--font-weight-normal);
+      font-weight: var(--font-weight-normal);
+    }
+  .date-picker > button:first-child:not([data-value]) {
+      color: var(--color-muted-foreground);
+    }
+  .date-picker > [data-popover] {
+      padding: 0;
+    }
+}

package/dist/ui/date-picker.js

@@ -0,0 +1,101 @@
+/* @auvyx/ui v0.1.0 | MIT | based on Basecoat (MIT) */
+(() => {
+  // ../elements/src/date-picker.js
+  var calendarIcon = '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 2v4"/><path d="M16 2v4"/><rect width="18" height="18" x="3" y="4" rx="2"/><path d="M3 10h18"/></svg>';
+  var PASS = ["months", "caption", "week-numbers", "disabled-days", "disabled-dates", "booked", "min-days", "max-days"];
+  var asDate = (v) => v ? /* @__PURE__ */ new Date(`${v}T00:00:00`) : null;
+  var AuvyxDatePicker = class extends HTMLElement {
+    connectedCallback() {
+      if (this._init) return;
+      this.inputs = [...this.querySelectorAll(':scope > input[type="date"]')];
+      if (!this.inputs.length) return;
+      this._init = true;
+      this.range = this.getAttribute("mode") === "range" && this.inputs.length >= 2;
+      const first = this.inputs[0];
+      const uid = first.id || `dp-${Math.random().toString(36).slice(2, 8)}`;
+      const locale = this.closest("[lang]")?.getAttribute("lang") || navigator.language;
+      this.format = new Intl.DateTimeFormat(locale, { dateStyle: "medium" });
+      this.button = document.createElement("button");
+      this.button.type = "button";
+      this.button.className = "btn";
+      this.button.dataset.variant = this.dataset.variant || "outline";
+      this.button.setAttribute("popovertarget", `${uid}-popover`);
+      this.button.setAttribute("aria-haspopup", "dialog");
+      const label = first.labels?.[0];
+      if (label) {
+        label.id ||= `${uid}-label`;
+        this.button.setAttribute("aria-labelledby", `${label.id} ${uid}-value`);
+        label.htmlFor = "";
+        label.addEventListener("click", () => this.button.focus());
+      }
+      this.button.innerHTML = `${calendarIcon}<span id="${uid}-value"></span>`;
+      this.panel = document.createElement("div");
+      this.panel.id = `${uid}-popover`;
+      this.panel.setAttribute("data-popover", "");
+      this.panel.setAttribute("popover", "");
+      this.panel.setAttribute("role", "dialog");
+      this.panel.setAttribute("aria-label", this.dataset.dialogLabel || (this.range ? "Choose dates" : "Choose date"));
+      this.panel.dataset.side = this.dataset.side || "bottom";
+      this.panel.dataset.align = this.dataset.align || "start";
+      this.calendar = document.createElement("auvyx-calendar");
+      this.calendar.className = "calendar";
+      if (this.range) this.calendar.setAttribute("mode", "range");
+      for (const attr of ["min", "max"]) if (first[attr]) this.calendar.setAttribute(attr, first[attr]);
+      for (const attr of PASS) if (this.hasAttribute(attr)) this.calendar.setAttribute(attr, this.getAttribute(attr));
+      if (this.dataset.weekStart) this.calendar.dataset.weekStart = this.dataset.weekStart;
+      const v = this.range ? this.inputs[0].value ? `${this.inputs[0].value}/${this.inputs[1].value}` : "" : first.value;
+      if (v) this.calendar.setAttribute("value", v);
+      this.panel.append(this.calendar);
+      for (const input of this.inputs) {
+        input.hidden = true;
+        input.tabIndex = -1;
+        input.addEventListener("invalid", (e) => {
+          e.preventDefault();
+          this.button.setAttribute("aria-invalid", "true");
+          this.button.focus();
+        });
+      }
+      this.prepend(this.button);
+      this.append(this.panel);
+      this.update();
+      this.calendar.addEventListener("change", (e) => {
+        e.stopPropagation();
+        const [a, b] = e.detail.value.split("/");
+        this.setInput(this.inputs[0], a || "");
+        if (this.range) this.setInput(this.inputs[1], b || "");
+        this.button.removeAttribute("aria-invalid");
+        this.update();
+        if (e.detail.complete) {
+          this.panel.hidePopover();
+          this.button.focus();
+        }
+        this.dispatchEvent(new CustomEvent("change", { bubbles: true, detail: { value: e.detail.value, complete: e.detail.complete } }));
+      });
+      this.panel.addEventListener("toggle", (e) => {
+        if (e.newState === "open") requestAnimationFrame(() => this.calendar.focusDate?.());
+      });
+    }
+    setInput(input, value) {
+      if (input.value === value) return;
+      input.value = value;
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+    }
+    get value() {
+      return this.range ? `${this.inputs[0].value}/${this.inputs[1].value}` : this.inputs[0].value;
+    }
+    update() {
+      const text = this.button.querySelector("span");
+      const a = asDate(this.inputs[0].value);
+      const b = this.range ? asDate(this.inputs[1].value) : null;
+      let label;
+      if (this.range && a && b) label = this.format.formatRange(a, b);
+      else if (a) label = this.format.format(a) + (this.range ? " \u2013" : "");
+      else label = this.dataset.placeholder || this.inputs[0].placeholder || (this.range ? "Pick a date range" : "Pick a date");
+      text.textContent = label;
+      if (a) this.button.dataset.value = this.value;
+      else delete this.button.dataset.value;
+    }
+  };
+  if (!customElements.get("auvyx-date-picker")) customElements.define("auvyx-date-picker", AuvyxDatePicker);
+})();

package/dist/ui/dialog.css

@@ -0,0 +1,363 @@
+/* @auvyx/ui dialog | order 12 */
+@keyframes dialog-scroll-lock {
+  from, to {
+    scrollbar-gutter: stable;
+  }
+}
+
+@layer components {
+  html:has(:is(.dialog, .alert-dialog, .command-dialog, .drawer):modal) {
+      overflow: hidden;
+      animation: dialog-scroll-lock linear both;
+      animation-timeline: scroll(self);
+    }
+  .dialog, .alert-dialog {
+      background-color: transparent;
+      padding: 0;
+      color: inherit;
+      opacity: 0%;
+      transition-property: all;
+      transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+      transition-duration: var(--tw-duration, var(--default-transition-duration));
+      transition-behavior: allow-discrete;
+      &::backdrop {
+        opacity: 0%;
+      }
+      &::backdrop {
+        transition-property: all;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
+      &::backdrop {
+        transition-behavior: allow-discrete;
+      }
+      max-width: none;
+      max-height: none;
+      &:is([open], :popover-open) {
+        opacity: 100%;
+        &::backdrop {
+          opacity: 100%;
+        }
+        > * {
+          --tw-scale-x: 100%;
+          --tw-scale-y: 100%;
+          --tw-scale-z: 100%;
+          scale: var(--tw-scale-x) var(--tw-scale-y);
+        }
+        @starting-style {
+          opacity: 0%;
+          &::backdrop {
+            opacity: 0%;
+          }
+          > * {
+            --tw-scale-x: 95%;
+            --tw-scale-y: 95%;
+            --tw-scale-z: 95%;
+            scale: var(--tw-scale-x) var(--tw-scale-y);
+          }
+        }
+      }
+      > * {
+        position: fixed;
+        top: calc(1 / 2 * 100%);
+        left: calc(1 / 2 * 100%);
+        z-index: 50;
+        display: flex;
+        max-height: calc(100% - 2rem);
+        width: 100%;
+        --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+        --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+        --tw-scale-x: 95%;
+        --tw-scale-y: 95%;
+        --tw-scale-z: 95%;
+        scale: var(--tw-scale-x) var(--tw-scale-y);
+        flex-direction: column;
+        --tw-outline-style: none;
+        outline-style: none;
+        @media (forced-colors: active) {
+          outline: 2px solid transparent;
+          outline-offset: 2px;
+        }
+        transition-property: all;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+      }
+    }
+  .dialog {
+      > * > header {
+        display: flex;
+        flex-direction: column;
+      }
+      > * > section {
+        flex: 1;
+      }
+      > * > footer {
+        display: flex;
+        flex-direction: column-reverse;
+        @media (width >= 40rem) {
+          flex-direction: row;
+        }
+        @media (width >= 40rem) {
+          justify-content: flex-end;
+        }
+      }
+      > * > :is(button, form[method='dialog']) {
+        position: absolute;
+      }
+      > * > :is(button, form[method='dialog'] > button) {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        opacity: 70%;
+        transition-property: opacity;
+        transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+        transition-duration: var(--tw-duration, var(--default-transition-duration));
+        &:hover {
+          @media (hover: hover) {
+            opacity: 100%;
+          }
+        }
+        &:focus-visible {
+          --tw-outline-style: none;
+          outline-style: none;
+          @media (forced-colors: active) {
+            outline: 2px solid transparent;
+            outline-offset: 2px;
+          }
+        }
+        &:disabled {
+          pointer-events: none;
+        }
+        & svg {
+          pointer-events: none;
+        }
+        & svg {
+          flex-shrink: 0;
+        }
+      }
+      > * > :is(button, form[method='dialog'] > button) > svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 4);
+        height: calc(var(--spacing) * 4);
+      }
+    }
+  .alert-dialog {
+      > * > header {
+        display: grid;
+        grid-template-rows: auto 1fr;
+        place-items: center;
+        text-align: center;
+        @media (width >= 40rem) {
+          place-items: start;
+        }
+        @media (width >= 40rem) {
+          text-align: start;
+        }
+      }
+      > * > header:has(> figure) {
+        grid-template-rows: auto auto 1fr;
+        @media (width >= 40rem) {
+          grid-template-rows: auto 1fr;
+        }
+      }
+      > * > header > figure {
+        margin: 0;
+        flex-shrink: 0;
+        @media (width >= 40rem) {
+          grid-row: span 2 / span 2;
+        }
+        & svg {
+          pointer-events: none;
+        }
+        & svg {
+          flex-shrink: 0;
+        }
+      }
+      > * > header > figure:has(img) {
+        overflow: hidden;
+        & img {
+          width: 100%;
+          height: 100%;
+        }
+        & img {
+          object-fit: cover;
+        }
+      }
+      > * > header:has(> figure) > :is(h2, p) {
+        @media (width >= 40rem) {
+          grid-column-start: 2;
+        }
+      }
+      > * > footer {
+        display: flex;
+        flex-direction: column-reverse;
+        @media (width >= 40rem) {
+          flex-direction: row;
+        }
+        @media (width >= 40rem) {
+          justify-content: flex-end;
+        }
+      }
+      &:is([data-size='sm']) > * > header, > [data-size='sm'] > header {
+        @media (width >= 40rem) {
+          place-items: center;
+        }
+        @media (width >= 40rem) {
+          text-align: center;
+        }
+      }
+      &:is([data-size='sm']) > * > header:has(> figure), > [data-size='sm'] > header:has(> figure) {
+        @media (width >= 40rem) {
+          grid-template-rows: auto auto 1fr;
+        }
+      }
+      &:is([data-size='sm']) > * > header:has(> figure) > :is(h2, p), > [data-size='sm'] > header:has(> figure) > :is(h2, p) {
+        @media (width >= 40rem) {
+          grid-column-start: auto;
+        }
+      }
+      &:is([data-size='sm']) > * > footer, > [data-size='sm'] > footer {
+        display: grid;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        @media (width >= 40rem) {
+          display: grid;
+        }
+        @media (width >= 40rem) {
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+        }
+      }
+    }
+}
+
+@layer components {
+  .dialog::backdrop, .alert-dialog::backdrop, .command-dialog::backdrop {
+      background-color: color-mix(in srgb, #000 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
+      }
+      --tw-backdrop-blur: blur(var(--blur-xs));
+      -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
+      --tw-duration: 100ms;
+      transition-duration: 100ms;
+    }
+  .alert-dialog > * {
+      max-width: var(--container-xs);
+      gap: calc(var(--spacing) * 6);
+      border-radius: var(--radius-xl);
+      background-color: var(--color-popover);
+      padding: calc(var(--spacing) * 6);
+      color: var(--color-popover-foreground);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --tw-ring-color: var(--color-foreground);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+      }
+      --tw-duration: 100ms;
+      transition-duration: 100ms;
+      @media (width >= 40rem) {
+        max-width: var(--container-lg);
+      }
+    }
+  .alert-dialog:is([data-size='sm']) > *, .alert-dialog > [data-size='sm'] {
+      @media (width >= 40rem) {
+        max-width: var(--container-xs);
+      }
+    }
+  .dialog > * {
+      max-width: calc(100% - 2rem);
+      gap: calc(var(--spacing) * 6);
+      border-radius: var(--radius-xl);
+      background-color: var(--color-popover);
+      padding: calc(var(--spacing) * 6);
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      color: var(--color-popover-foreground);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      --tw-ring-color: var(--color-foreground);
+      @supports (color: color-mix(in lab, red, red)) {
+        --tw-ring-color: color-mix(in oklab, var(--color-foreground) 10%, transparent);
+      }
+      --tw-duration: 100ms;
+      transition-duration: 100ms;
+      @media (width >= 40rem) {
+        max-width: var(--container-md);
+      }
+    }
+  .dialog > * > :is(button, form[method='dialog']) {
+      inset-inline-end: calc(var(--spacing) * 4);
+      top: calc(var(--spacing) * 4);
+    }
+  .dialog > * > header {
+      gap: calc(var(--spacing) * 2);
+    }
+  .alert-dialog > * > header {
+      column-gap: calc(var(--spacing) * 6);
+      row-gap: calc(var(--spacing) * 1.5);
+    }
+  .alert-dialog > * > header > figure {
+      margin-bottom: calc(var(--spacing) * 2);
+      display: inline-flex;
+      width: calc(var(--spacing) * 16);
+      height: calc(var(--spacing) * 16);
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-md);
+      background-color: var(--color-muted);
+      &>svg:not([class*='size-']) {
+        width: calc(var(--spacing) * 8);
+        height: calc(var(--spacing) * 8);
+      }
+    }
+  .alert-dialog > * > footer, .dialog > * > footer {
+      gap: calc(var(--spacing) * 2);
+    }
+  .dialog > * > header > h2, .dialog > * > [data-title] {
+      --tw-leading: 1;
+      line-height: 1;
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  .alert-dialog > * > header > h2, .alert-dialog > * > [data-title] {
+      font-size: var(--text-lg);
+      line-height: var(--tw-leading, var(--text-lg--line-height));
+      --tw-font-weight: var(--font-weight-medium);
+      font-weight: var(--font-weight-medium);
+    }
+  .dialog > * > header > p, .dialog > * > [data-description] {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      --tw-leading: var(--leading-normal);
+      line-height: var(--leading-normal);
+      color: var(--color-muted-foreground);
+      & a {
+        text-decoration-line: underline;
+      }
+      & a {
+        text-underline-offset: 3px;
+      }
+      & a:hover {
+        color: var(--color-foreground);
+      }
+    }
+  .alert-dialog > * > header > p, .alert-dialog > * > [data-description] {
+      font-size: var(--text-sm);
+      line-height: var(--tw-leading, var(--text-sm--line-height));
+      text-wrap: balance;
+      color: var(--color-muted-foreground);
+      @media (width >= 48rem) {
+        text-wrap: pretty;
+      }
+      & a {
+        text-decoration-line: underline;
+      }
+      & a {
+        text-underline-offset: 3px;
+      }
+      & a:hover {
+        color: var(--color-foreground);
+      }
+    }
+}

package/dist/ui/dialog.native.css

@@ -0,0 +1,6 @@
+/* @auvyx/ui dialog.native | order 63 */
+@layer components {
+  :is(.dialog, .alert-dialog) [command='close'] {
+      cursor: pointer;
+    }
+}