opui-css 5.0.0 → 5.1.0

package/css/components.css

@@ -1,41 +1,41 @@
-/*
-* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
-*/
-
-/*** Root components (no dependencies)  */
-@import "./components/button.css";
-@import "./components/callout.css";
-@import "./components/icon-button.css";
-@import "./components/tabs.css";
-@import "./components/toggle-group.css";
-@import "./components/toggle-button.css";
-@import "./components/anchor.css";
-@import "./components/avatar.css";
-@import "./components/card.css";
-@import "./components/chip.css";
-@import "./components/description-list.css";
-@import "./components/divider.css";
-@import "./components/link.css";
-@import "./components/table.css";
-@import "./components/progress.css";
-@import "./components/spinner.css";
-@import "./components/checkbox.css";
-@import "./components/radio.css";
-@import "./components/range.css";
-@import "./components/switch.css";
-@import "./components/toast.css";
-@import "./components/typography.css";
-
-/*** Extended components (has dependencies) */
-@import "./components/badge.css";
-@import "./components/button-group.css";
-@import "./components/accordion.css";
-@import "./components/list.css";
-@import "./components/dialog.css";
-@import "./components/drawer.css";
-@import "./components/form.css";
-@import "./components/text-field.css";
-@import "./components/select.css";
-@import "./components/text-input.css";
-@import "./components/textarea.css";
-@import "./components/tooltip.css";
+/*
+* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
+*/
+
+/*** Root components (no dependencies)  */
+@import "./components/button.css";
+@import "./components/callout.css";
+@import "./components/icon-button.css";
+@import "./components/tabs.css";
+@import "./components/toggle-group.css";
+@import "./components/toggle-button.css";
+@import "./components/anchor.css";
+@import "./components/avatar.css";
+@import "./components/card.css";
+@import "./components/chip.css";
+@import "./components/description-list.css";
+@import "./components/divider.css";
+@import "./components/link.css";
+@import "./components/table.css";
+@import "./components/progress.css";
+@import "./components/spinner.css";
+@import "./components/checkbox.css";
+@import "./components/radio.css";
+@import "./components/range.css";
+@import "./components/switch.css";
+@import "./components/toast.css";
+@import "./components/typography.css";
+
+/*** Extended components (has dependencies) */
+@import "./components/badge.css";
+@import "./components/button-group.css";
+@import "./components/accordion.css";
+@import "./components/list.css";
+@import "./components/dialog.css";
+@import "./components/drawer.css";
+@import "./components/form.css";
+@import "./components/text-field.css";
+@import "./components/select.css";
+@import "./components/text-input.css";
+@import "./components/textarea.css";
+@import "./components/tooltip.css";

package/css/imports.css

@@ -1,16 +1,17 @@
-@layer openprops, normalize, theme, components.root, components.extended, utils;
-
-/* Open Props */
-@import "../open-props.css";
-
-/* Normalize */
-@import "../core/normalize.css";
-
-/* Theme */
-@import "./theme.css";
-
-/* Components */
-@import "./components.css";
-
-/* Utils */
-@import "../core/utils.css";
+@layer openprops, theme, normalize, components.root, components.extended, utils;
+
+/* Open Props */
+@import "../open-props.css";
+
+/* Theme */
+@import "../core/palette.css";
+@import "./theme.css";
+
+/* Normalize */
+@import "../core/normalize.css";
+
+/* Components */
+@import "./components.css";
+
+/* Utils */
+@import "../core/utils.css";

package/css/js/checkbox.js

@@ -1,21 +1,21 @@
-/**
- * Checkbox runtime helpers.
- *
- * `indeterminate` is a JavaScript-only property on HTMLInputElement — the
- * attribute alone has no effect. We mark inputs with `data-indeterminate` at
- * render time and apply the property here, both on initial load and after
- * Astro's view transitions swap the DOM.
- */
-
-export function activateIndeterminate(root = document) {
-  root
-    .querySelectorAll('input[type="checkbox"][data-indeterminate]')
-    .forEach((el) => {
-      el.indeterminate = true
-    })
-}
-
-export function initCheckbox() {
-  activateIndeterminate()
-  document.addEventListener("astro:after-swap", () => activateIndeterminate())
-}
+/**
+ * Checkbox runtime helpers.
+ *
+ * `indeterminate` is a JavaScript-only property on HTMLInputElement — the
+ * attribute alone has no effect. We mark inputs with `data-indeterminate` at
+ * render time and apply the property here, both on initial load and after
+ * Astro's view transitions swap the DOM.
+ */
+
+export function activateIndeterminate(root = document) {
+  root
+    .querySelectorAll('input[type="checkbox"][data-indeterminate]')
+    .forEach((el) => {
+      el.indeterminate = true
+    })
+}
+
+export function initCheckbox() {
+  activateIndeterminate()
+  document.addEventListener("astro:after-swap", () => activateIndeterminate())
+}

package/css/js/toast.js

@@ -1,94 +1,94 @@
-/**
- * Toast manager.
- *
- * - HTML owns structure (via <template id="toast-template">).
- * - CSS owns lifetime (via attr(data-duration type(<time>))).
- * - JS owns lifecycle (clone template, fill slots, append, remove on animationend).
- *
- * No setTimeout. No popovertargetaction. No innerHTML of user data.
- */
-
-const FALLBACK_TEMPLATE = `<div class="ui-toast" role="alert">
-  <span class="ui-icon" data-toast-icon></span>
-  <div class="ui-content">
-    <div class="ui-title" data-toast-title></div>
-    <div class="ui-description" data-toast-description></div>
-  </div>
-  <button class="ui-close-button" data-toast-close type="button" aria-label="Close">
-    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
-  </button>
-</div>`
-
-export function initToastManager() {
-  const manager = document.getElementById("toast-manager")
-  if (!manager) return
-
-  try {
-    manager.showPopover()
-  } catch {
-    /* already open or unsupported */
-  }
-
-  manager.addEventListener("command", (event) => {
-    if (event.command !== "--show-toast") return
-    const trigger = event.source
-    if (!trigger) return
-
-    const data = trigger.dataset || {}
-    showToast(
-      {
-        description: data.description,
-        duration: data.duration,
-        severity: data.severity,
-        template: data.template,
-        title: data.title || trigger.textContent?.trim() || "",
-      },
-      manager,
-    )
-  })
-
-  window.showToast = (options) => showToast(options || {}, manager)
-}
-
-function showToast(options, manager) {
-  const node = buildToast(options.template || "toast-template")
-  if (!node) return
-
-  fillSlot(node, "[data-toast-title]", options.title)
-  fillSlot(node, "[data-toast-description]", options.description)
-
-  if (options.severity) node.dataset.severity = options.severity
-  if (options.duration) node.dataset.duration = options.duration
-
-  wireToast(node)
-  manager.appendChild(node)
-}
-
-function buildToast(templateId) {
-  const tpl = document.getElementById(templateId)
-  if (tpl?.content?.firstElementChild) {
-    return tpl.content.firstElementChild.cloneNode(true)
-  }
-  const wrap = document.createElement("div")
-  wrap.innerHTML = FALLBACK_TEMPLATE.trim()
-  return wrap.firstElementChild
-}
-
-function fillSlot(root, selector, text) {
-  const el = root.querySelector(selector)
-  if (!el) return
-  if (text == null || text === "") {
-    el.remove()
-    return
-  }
-  el.textContent = text
-}
-
-function wireToast(node) {
-  node.querySelector("[data-toast-close]")?.addEventListener("click", () => {
-    node.classList.add("ui-exiting")
-  })
-  node.addEventListener("animationend", (event) => {
-    if (event.animationName === "toast-exit") node.remove()
-  })
-}
+/**
+ * Toast manager.
+ *
+ * - HTML owns structure (via <template id="toast-template">).
+ * - CSS owns lifetime (via attr(data-duration type(<time>))).
+ * - JS owns lifecycle (clone template, fill slots, append, remove on animationend).
+ *
+ * No setTimeout. No popovertargetaction. No innerHTML of user data.
+ */
+
+const FALLBACK_TEMPLATE = `<div class="ui-toast" role="alert">
+  <span class="ui-icon" data-toast-icon></span>
+  <div class="ui-content">
+    <div class="ui-title" data-toast-title></div>
+    <div class="ui-description" data-toast-description></div>
+  </div>
+  <button class="ui-close-button" data-toast-close type="button" aria-label="Close">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+  </button>
+</div>`
+
+export function initToastManager() {
+  const manager = document.getElementById("toast-manager")
+  if (!manager) return
+
+  try {
+    manager.showPopover()
+  } catch {
+    /* already open or unsupported */
+  }
+
+  manager.addEventListener("command", (event) => {
+    if (event.command !== "--show-toast") return
+    const trigger = event.source
+    if (!trigger) return
+
+    const data = trigger.dataset || {}
+    showToast(
+      {
+        description: data.description,
+        duration: data.duration,
+        severity: data.severity,
+        template: data.template,
+        title: data.title || trigger.textContent?.trim() || "",
+      },
+      manager,
+    )
+  })
+
+  window.showToast = (options) => showToast(options || {}, manager)
+}
+
+function showToast(options, manager) {
+  const node = buildToast(options.template || "toast-template")
+  if (!node) return
+
+  fillSlot(node, "[data-toast-title]", options.title)
+  fillSlot(node, "[data-toast-description]", options.description)
+
+  if (options.severity) node.dataset.severity = options.severity
+  if (options.duration) node.dataset.duration = options.duration
+
+  wireToast(node)
+  manager.appendChild(node)
+}
+
+function buildToast(templateId) {
+  const tpl = document.getElementById(templateId)
+  if (tpl?.content?.firstElementChild) {
+    return tpl.content.firstElementChild.cloneNode(true)
+  }
+  const wrap = document.createElement("div")
+  wrap.innerHTML = FALLBACK_TEMPLATE.trim()
+  return wrap.firstElementChild
+}
+
+function fillSlot(root, selector, text) {
+  const el = root.querySelector(selector)
+  if (!el) return
+  if (text == null || text === "") {
+    el.remove()
+    return
+  }
+  el.textContent = text
+}
+
+function wireToast(node) {
+  node.querySelector("[data-toast-close]")?.addEventListener("click", () => {
+    node.classList.add("ui-exiting")
+  })
+  node.addEventListener("animationend", (event) => {
+    if (event.animationName === "toast-exit") node.remove()
+  })
+}

package/css/theme.css

@@ -1,132 +1,133 @@
-/*
-  theme three theme setup
-*/
-@layer theme {
-
-  /* 1. Color scheme */
-  .ui-light {
-    --color-scheme: light;
-  }
-
-  .ui-dark {
-    --color-scheme: dark;
-  }
-
-  :where(html) {
-    color-scheme: var(--color-scheme, light dark);
-
-    /* 2. Palette source - one value to rule them all. Every other color is derived from this one.
-       Both light/dark branches are wired up via light-dark() so prefers-color-scheme works
-       automatically. Set them to different OKLCH values if you want a distinct dark-mode palette. */
-    --palette-source: light-dark(oklch(0.58 calc(0.21 * 0.5) var(--hue-blue)),
-        oklch(0.58 calc(0.21 * 0.5) var(--hue-blue)));
-    --palette-hue-rotate-by: 0;
-
-    /* Gray ramp lives in core/palette.css. Override --gray-chroma or
-       --gray-hue here if this theme wants warmer/cooler grays. */
-
-    /* 3. Named colors (no severity meaning) — use when you literally want a green/red/etc. dot */
-    --blue: oklch(from var(--color-9) l 0.2 210);
-    --green: oklch(from var(--color-9) l 0.2 145);
-    --orange: oklch(from var(--color-7) l 0.2 75);
-    --red: oklch(from var(--color-9) l 0.2 25);
-
-    /* 4. Intent tokens
-       Severity (have scope classes below): --success, --info, --warning, --critical
-       Non-severity (value-only):           --primary, --neutral */
-    --success: var(--green);
-    --info: var(--blue);
-    --warning: var(--orange);
-    --critical: var(--red);
-    --neutral: var(--gray-9);
-
-    /* 5. Primary */
-    --primary: var(--color-8);
-    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
-    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
-    --primary-contrast: var(--gray-1);
-
-    /* 6. Text */
-    --text-primary: light-dark(var(--gray-15), var(--gray-1));
-    --text-primary-contrast: light-dark(var(--gray-2), var(--gray-15));
-    --text-muted: light-dark(var(--gray-13), var(--gray-4));
-    --text-muted-contrast: light-dark(var(--gray-4), var(--gray-13));
-
-    /* 7. Surfaces */
-    --surface-default: light-dark(var(--gray-1), var(--gray-13));
-    --surface-filled: light-dark(var(--gray-4), var(--gray-15));
-    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
-    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
-
-    /* 8. Borders */
-    --border-color: light-dark(var(--gray-4), var(--gray-12));
-    --border-radius: var(--size-2);
-    --border-width: 1px;
-
-    /* 9. Focus ring — components consume these and may override locally
-       (e.g. .ui-button.ui-filled { --focus-ring-offset: 3px; }, .ui-checkbox { --focus-ring-offset: 0; }) */
-    --focus-ring-color: var(--primary);
-    --focus-ring-width: 2px;
-    --focus-ring-offset: 2px;
-    --focus-ring-style: solid;
-
-    /* 10. Typography */
-    --font-size-h1: var(--font-size-fluid-3);
-    --font-size-h2: var(--font-size-fluid-2);
-    --font-size-h3: var(--font-size-fluid-1);
-    --font-size-h4: var(--font-size-3);
-    --font-size-h5: var(--font-size-2);
-    --font-size-h6: var(--font-size-fluid-0);
-
-    /* Sneaking in an extra font size I want but Open Props doesn't provide. You can do whatever you want with your own theme. It's just CSS. */
-    --font-size-05: 0.875rem;
-
-    /* 11. Control sizes — shared scale for fields and buttons so they line up
-       visually. --field-size-* and --button-size-* alias from --control-size-*. */
-    --control-size-x-small: 28px;
-    --control-size-small: 32px;
-    --control-size: 40px;
-    --control-size-large: 46px;
-
-    --field-size-x-small: var(--control-size-x-small);
-    --field-size-small: var(--control-size-small);
-    --field-size: var(--control-size);
-    --field-size-large: var(--control-size-large);
-
-    --button-size-x-small: var(--control-size-x-small);
-    --button-size-small: var(--control-size-small);
-    --button-size: var(--control-size);
-    --button-size-large: var(--control-size-large);
-
-    /* 12. Field / input */
-    --field-border-color: var(--border-color);
-    --field-border-radius: var(--size-2);
-    --field-border-width: 1px;
-
-    /* 13. Button */
-    --button-border-radius: var(--size-2);
-  }
-
-  /* 14. Severity scope classes — re-source the palette inside these contexts.
-     Authoring `<div class="ui-warning">` paints the entire subtree warning-orange.
-     Non-severity tokens (--primary, --neutral) deliberately have no scope class. */
-  :where(.ui-critical, [data-invalid], del) {
-    --palette-source: oklch(0.58 0.21 var(--hue-red));
-    --palette-hue-rotate-by: 1;
-  }
-
-  :where(.ui-info, abbr, dfn) {
-    --palette-source: oklch(0.58 0.21 var(--hue-blue));
-    --palette-hue-rotate-by: 1;
-  }
-
-  :where(.ui-success, ins) {
-    --palette-source: oklch(0.58 0.21 var(--hue-green));
-    --palette-hue-rotate-by: 1;
-  }
-
-  :where(.ui-warning) {
-    --palette-source: oklch(0.58 0.21 var(--hue-orange));
-    --palette-hue-rotate-by: 1;
-  }
-}
+/*
+  theme three theme setup
+*/
+@layer theme {
+  /* 1. Color scheme */
+  .ui-light {
+    --color-scheme: light;
+  }
+
+  .ui-dark {
+    --color-scheme: dark;
+  }
+
+  :where(html) {
+    color-scheme: var(--color-scheme, light dark);
+
+    /* 2. Palette source - one value to rule them all. Every other color is derived from this one.
+       Both light/dark branches are wired up via light-dark() so prefers-color-scheme works
+       automatically. Set them to different OKLCH values if you want a distinct dark-mode palette. */
+    --palette-source: light-dark(
+      oklch(0.58 calc(0.21 * 0.5) var(--hue-blue)),
+      oklch(0.58 calc(0.21 * 0.5) var(--hue-blue))
+    );
+    --palette-hue-rotate-by: 0;
+
+    /* Gray ramp lives in core/palette.css. Override --gray-chroma or
+       --gray-hue here if this theme wants warmer/cooler grays. */
+
+    /* 3. Named colors (no severity meaning) — use when you literally want a green/red/etc. dot */
+    --blue: oklch(from var(--color-9) l 0.2 210);
+    --green: oklch(from var(--color-9) l 0.2 145);
+    --orange: oklch(from var(--color-7) l 0.2 75);
+    --red: oklch(from var(--color-9) l 0.2 25);
+
+    /* 4. Intent tokens
+       Severity (have scope classes below): --success, --info, --warning, --critical
+       Non-severity (value-only):           --primary, --neutral */
+    --success: var(--green);
+    --info: var(--blue);
+    --warning: var(--orange);
+    --critical: var(--red);
+    --neutral: var(--gray-9);
+
+    /* 5. Primary */
+    --primary: var(--color-8);
+    --primary-light: oklch(from var(--primary) calc(l * 1.25) c h);
+    --primary-dark: oklch(from var(--primary) calc(l * 0.75) c h);
+    --primary-contrast: var(--gray-1);
+
+    /* 6. Text */
+    --text-primary: light-dark(var(--gray-15), var(--gray-1));
+    --text-primary-contrast: light-dark(var(--gray-2), var(--gray-15));
+    --text-muted: light-dark(var(--gray-13), var(--gray-4));
+    --text-muted-contrast: light-dark(var(--gray-4), var(--gray-13));
+
+    /* 7. Surfaces */
+    --surface-default: light-dark(var(--gray-1), var(--gray-13));
+    --surface-filled: light-dark(var(--gray-4), var(--gray-15));
+    --surface-tonal: light-dark(var(--gray-3), var(--gray-12));
+    --surface-elevated: light-dark(var(--gray-1), var(--gray-12));
+
+    /* 8. Borders */
+    --border-color: light-dark(var(--gray-4), var(--gray-12));
+    --border-radius: var(--size-2);
+    --border-width: 1px;
+
+    /* 9. Focus ring — components consume these and may override locally
+       (e.g. .ui-button.ui-filled { --focus-ring-offset: 3px; }, .ui-checkbox { --focus-ring-offset: 0; }) */
+    --focus-ring-color: var(--primary);
+    --focus-ring-width: 2px;
+    --focus-ring-offset: 2px;
+    --focus-ring-style: solid;
+
+    /* 10. Typography */
+    --font-size-h1: var(--font-size-fluid-3);
+    --font-size-h2: var(--font-size-fluid-2);
+    --font-size-h3: var(--font-size-fluid-1);
+    --font-size-h4: var(--font-size-3);
+    --font-size-h5: var(--font-size-2);
+    --font-size-h6: var(--font-size-fluid-0);
+
+    /* Sneaking in an extra font size I want but Open Props doesn't provide. You can do whatever you want with your own theme. It's just CSS. */
+    --font-size-05: 0.875rem;
+
+    /* 11. Control sizes — shared scale for fields and buttons so they line up
+       visually. --field-size-* and --button-size-* alias from --control-size-*. */
+    --control-size-x-small: 28px;
+    --control-size-small: 32px;
+    --control-size: 40px;
+    --control-size-large: 46px;
+
+    --field-size-x-small: var(--control-size-x-small);
+    --field-size-small: var(--control-size-small);
+    --field-size: var(--control-size);
+    --field-size-large: var(--control-size-large);
+
+    --button-size-x-small: var(--control-size-x-small);
+    --button-size-small: var(--control-size-small);
+    --button-size: var(--control-size);
+    --button-size-large: var(--control-size-large);
+
+    /* 12. Field / input */
+    --field-border-color: var(--border-color);
+    --field-border-radius: var(--size-2);
+    --field-border-width: 1px;
+
+    /* 13. Button */
+    --button-border-radius: var(--size-2);
+  }
+
+  /* 14. Severity scope classes — re-source the palette inside these contexts.
+     Authoring `<div class="ui-warning">` paints the entire subtree warning-orange.
+     Non-severity tokens (--primary, --neutral) deliberately have no scope class. */
+  :where(.ui-critical, [data-invalid], del) {
+    --palette-source: oklch(0.58 0.21 var(--hue-red));
+    --palette-hue-rotate-by: 1;
+  }
+
+  :where(.ui-info, abbr, dfn) {
+    --palette-source: oklch(0.58 0.21 var(--hue-blue));
+    --palette-hue-rotate-by: 1;
+  }
+
+  :where(.ui-success, ins) {
+    --palette-source: oklch(0.58 0.21 var(--hue-green));
+    --palette-hue-rotate-by: 1;
+  }
+
+  :where(.ui-warning) {
+    --palette-source: oklch(0.58 0.21 var(--hue-orange));
+    --palette-hue-rotate-by: 1;
+  }
+}