opui-css 5.4.2 → 6.0.0-rc.1

package/css/components.css

@@ -1,41 +1,48 @@
+@import "./layers.css";
+
 /*
-* Components are divided into two categories - if they are stand-alone (root) or if they are built on top of others (extended).
+* Four groups, by the layer a file declares. Root files declare components.root (and typography.css components.prose): rules that never have to beat another component's rules on the same element.
+* Extended files declare components.extended for the rules that must beat another component's rules on the same element, and components.root for the rest.
+* Utilities declare utils. tests/unit/layers.test.ts checks every file against its group.
 */
 
-/*** 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";
+/*** Root components (components.prose, components.root) */
 @import "./components/anchor.css";
 @import "./components/avatar.css";
+@import "./components/button.css";
+@import "./components/callout.css";
 @import "./components/card.css";
+@import "./components/carousel.css";
+@import "./components/checkbox.css";
 @import "./components/chip.css";
+@import "./components/choice.css";
 @import "./components/description-list.css";
 @import "./components/divider.css";
+@import "./components/drawer.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/spinner.css";
 @import "./components/switch.css";
-@import "./components/toast.css";
+@import "./components/table.css";
+@import "./components/tabs.css";
+@import "./components/toggle-button.css";
 @import "./components/typography.css";
 
-/*** Extended components (has dependencies) */
+/*** Extended components (components.extended, components.root) */
+@import "./components/accordion.css";
 @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/list.css";
+@import "./components/menu.css";
 @import "./components/select.css";
-@import "./components/text-input.css";
+@import "./components/text-field.css";
 @import "./components/textarea.css";
+@import "./components/toggle-group.css";
 @import "./components/tooltip.css";
+
+/*** Utilities (utils) */
+@import "./components/layout.css";

package/css/imports.css

@@ -1,7 +1,4 @@
-@layer openprops, theme, normalize, components.root, components.extended, utils;
-
-/* Open Props */
-@import "../open-props.css";
+@import "./layers.css";
 
 /* Theme */
 @import "../core/palette.css";
@@ -12,6 +9,7 @@
 
 /* Components */
 @import "./components.css";
+@import "./compat.css";
 
 /* Utils */
 @import "../core/utils.css";

package/css/js/checkbox.d.ts

@@ -0,0 +1,3 @@
+export function activateIndeterminate(root?: ParentNode): void
+export function initCheckbox(): void
+export function syncIndeterminate(input: HTMLInputElement): void

package/css/js/checkbox.js

@@ -7,6 +7,7 @@
  * Astro's view transitions swap the DOM.
  */
 
+/** @param {ParentNode} [root] */
 export function activateIndeterminate(root = document) {
   root
     .querySelectorAll('input[type="checkbox"][data-indeterminate]')
@@ -15,7 +16,16 @@ export function activateIndeterminate(root = document) {
     })
 }
 
+/** @param {HTMLInputElement} input */
+export function syncIndeterminate(input) {
+  input.indeterminate = input.hasAttribute("data-indeterminate")
+}
+
+let initialized = false
+
 export function initCheckbox() {
   activateIndeterminate()
+  if (initialized) return
+  initialized = true
   document.addEventListener("astro:after-swap", () => activateIndeterminate())
 }

package/css/js/range.d.ts

@@ -0,0 +1 @@
+export function initRange(): void

package/css/js/range.js

@@ -0,0 +1,44 @@
+const wired = new WeakSet()
+
+function resetValue(input) {
+  const probe = document.createElement("input")
+  for (const name of ["type", "min", "max", "step", "value"]) {
+    const value = input.getAttribute(name)
+    if (value !== null) probe.setAttribute(name, value)
+  }
+  return probe.value
+}
+
+// Mirror the slider's current value into its associated <output> on every
+// input event. Idempotent: each .ui-range is wired once, and ignores ranges
+// without a value display.
+function wireRanges() {
+  for (const output of document.querySelectorAll(
+    ".ui-range > output.ui-value[data-live]",
+  )) {
+    const input = output.parentElement?.querySelector('input[type="range"]')
+    if (!input || wired.has(output)) continue
+    wired.add(output)
+    const suffix = output.dataset.suffix ?? ""
+    const update = (value = input.value) => {
+      output.textContent = `${value}${suffix}`
+      if (suffix) input.setAttribute("aria-valuetext", output.textContent)
+    }
+    input.addEventListener("input", () => update())
+    input.form?.addEventListener("reset", (event) =>
+      setTimeout(() => {
+        if (!event.defaultPrevented) update(resetValue(input))
+      }),
+    )
+    update()
+  }
+}
+
+let initialized = false
+
+export function initRange() {
+  wireRanges()
+  if (initialized) return
+  initialized = true
+  document.addEventListener("astro:after-swap", () => wireRanges())
+}

package/css/layers.css

@@ -0,0 +1,2 @@
+@layer openprops, theme, normalize, components.prose, components.root, components.extended, components.compat, utils;
+@layer theme.palette, theme.base, theme.custom, theme.severity;