@duskmoon-dev/components 0.5.0 → 0.5.2

package/dist/components/dm-pro-table/index.js

@@ -2147,6 +2147,7 @@ var SelectRoot = forwardRef6(({
   "aria-invalid": ariaInvalid,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  "aria-required": ariaRequired,
   children,
   className,
   defaultValue,
@@ -2283,6 +2284,7 @@ var SelectRoot = forwardRef6(({
         "aria-invalid": ariaInvalid,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
@@ -2297,7 +2299,20 @@ var SelectRoot = forwardRef6(({
           /* @__PURE__ */ jsx8("span", {
             className: selectIconClass,
             "aria-hidden": "true",
-            children: "v"
+            children: /* @__PURE__ */ jsx8("svg", {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx8("path", {
+                d: "m6 9 6 6 6-6"
+              })
+            })
           })
         ]
       }),
@@ -2306,7 +2321,19 @@ var SelectRoot = forwardRef6(({
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
-        children: "x"
+        children: /* @__PURE__ */ jsx8("svg", {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx8("path", {
+            d: "m6 6 12 12M6 18 18 6"
+          })
+        })
       }) : null,
       open ? /* @__PURE__ */ jsxs7("div", {
         className: selectDropdownClass,

package/dist/components/dm-query/index.js

@@ -1645,6 +1645,7 @@ var SelectRoot = forwardRef4(({
   "aria-invalid": ariaInvalid,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  "aria-required": ariaRequired,
   children,
   className,
   defaultValue,
@@ -1781,6 +1782,7 @@ var SelectRoot = forwardRef4(({
         "aria-invalid": ariaInvalid,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
@@ -1795,7 +1797,20 @@ var SelectRoot = forwardRef4(({
           /* @__PURE__ */ jsx5("span", {
             className: selectIconClass,
             "aria-hidden": "true",
-            children: "v"
+            children: /* @__PURE__ */ jsx5("svg", {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx5("path", {
+                d: "m6 9 6 6 6-6"
+              })
+            })
           })
         ]
       }),
@@ -1804,7 +1819,19 @@ var SelectRoot = forwardRef4(({
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
-        children: "x"
+        children: /* @__PURE__ */ jsx5("svg", {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx5("path", {
+            d: "m6 6 12 12M6 18 18 6"
+          })
+        })
       }) : null,
       open ? /* @__PURE__ */ jsxs5("div", {
         className: selectDropdownClass,

package/dist/components/dm-search/index.js

@@ -1637,6 +1637,7 @@ var SelectRoot = forwardRef4(({
   "aria-invalid": ariaInvalid,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  "aria-required": ariaRequired,
   children,
   className,
   defaultValue,
@@ -1773,6 +1774,7 @@ var SelectRoot = forwardRef4(({
         "aria-invalid": ariaInvalid,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
@@ -1787,7 +1789,20 @@ var SelectRoot = forwardRef4(({
           /* @__PURE__ */ jsx5("span", {
             className: selectIconClass,
             "aria-hidden": "true",
-            children: "v"
+            children: /* @__PURE__ */ jsx5("svg", {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx5("path", {
+                d: "m6 9 6 6 6-6"
+              })
+            })
           })
         ]
       }),
@@ -1796,7 +1811,19 @@ var SelectRoot = forwardRef4(({
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
-        children: "x"
+        children: /* @__PURE__ */ jsx5("svg", {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx5("path", {
+            d: "m6 6 12 12M6 18 18 6"
+          })
+        })
       }) : null,
       open ? /* @__PURE__ */ jsxs5("div", {
         className: selectDropdownClass,

package/dist/components/dm-table/index.js

@@ -2137,6 +2137,7 @@ var SelectRoot = forwardRef6(({
   "aria-invalid": ariaInvalid,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  "aria-required": ariaRequired,
   children,
   className,
   defaultValue,
@@ -2273,6 +2274,7 @@ var SelectRoot = forwardRef6(({
         "aria-invalid": ariaInvalid,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
@@ -2287,7 +2289,20 @@ var SelectRoot = forwardRef6(({
           /* @__PURE__ */ jsx8("span", {
             className: selectIconClass,
             "aria-hidden": "true",
-            children: "v"
+            children: /* @__PURE__ */ jsx8("svg", {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx8("path", {
+                d: "m6 9 6 6 6-6"
+              })
+            })
           })
         ]
       }),
@@ -2296,7 +2311,19 @@ var SelectRoot = forwardRef6(({
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
-        children: "x"
+        children: /* @__PURE__ */ jsx8("svg", {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx8("path", {
+            d: "m6 6 12 12M6 18 18 6"
+          })
+        })
       }) : null,
       open ? /* @__PURE__ */ jsxs7("div", {
         className: selectDropdownClass,

package/dist/components/input-number/index.js

@@ -88,6 +88,7 @@ var InputNumber = forwardRef(({
   onStep,
   parser = parseNumber,
   precision,
+  readOnly,
   size = "md",
   status,
   step = 1,
@@ -107,7 +108,7 @@ var InputNumber = forwardRef(({
     return normalized;
   }
   function stepValue(type) {
-    if (disabled)
+    if (disabled || readOnly)
       return;
     const offset = type === "up" ? step : -step;
     const base = typeof currentValue === "number" ? currentValue : 0;
@@ -129,11 +130,15 @@ var InputNumber = forwardRef(({
         inputMode: "decimal",
         className: inputNumberInputClass,
         disabled,
+        readOnly,
         value: displayValue,
-        onChange: (event) => emitChange(parser(event.currentTarget.value)),
+        onChange: (event) => {
+          if (!readOnly)
+            emitChange(parser(event.currentTarget.value));
+        },
         onKeyDown: (event) => {
           onKeyDown?.(event);
-          if (!keyboard || event.defaultPrevented)
+          if (readOnly || !keyboard || event.defaultPrevented)
             return;
           if (event.key === "ArrowUp") {
             event.preventDefault();
@@ -151,7 +156,7 @@ var InputNumber = forwardRef(({
           /* @__PURE__ */ jsx("button", {
             type: "button",
             className: inputNumberControlClass,
-            disabled: disabled || max !== undefined && Number(currentValue) >= max,
+            disabled: disabled || readOnly || max !== undefined && Number(currentValue) >= max,
             "aria-label": "Increase value",
             onClick: () => stepValue("up"),
             children: "+"
@@ -159,7 +164,7 @@ var InputNumber = forwardRef(({
           /* @__PURE__ */ jsx("button", {
             type: "button",
             className: inputNumberControlClass,
-            disabled: disabled || min !== undefined && Number(currentValue) <= min,
+            disabled: disabled || readOnly || min !== undefined && Number(currentValue) <= min,
             "aria-label": "Decrease value",
             onClick: () => stepValue("down"),
             children: "-"

package/dist/components/json-schema-form/JsonSchemaForm.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import type { CompiledForm, FormErrors, RenderableSchema, FormValue } from "./json-schema-form";
 export type JsonSchemaFormProps = {
+    /** Additional classes for the generated native form; default classes are preserved. */
+    className?: string;
     value?: FormValue;
     defaultValue?: FormValue;
     onChange?: (value: FormValue) => void;
@@ -16,4 +18,4 @@ export type JsonSchemaFormProps = {
     schema: RenderableSchema;
     compiled?: never;
 });
-export declare function JsonSchemaForm({ compiled: suppliedCompiled, schema, value: controlledValue, defaultValue, onChange, errors: suppliedErrors, onErrorsChange, onSubmit, onReset, }: JsonSchemaFormProps): React.JSX.Element;
+export declare function JsonSchemaForm({ className, compiled: suppliedCompiled, schema, value: controlledValue, defaultValue, onChange, errors: suppliedErrors, onErrorsChange, onSubmit, onReset, }: JsonSchemaFormProps): React.JSX.Element;

package/dist/components/json-schema-form/index.js

@@ -3328,6 +3328,7 @@ var InputNumber = forwardRef11(({
   onStep,
   parser = parseNumber,
   precision,
+  readOnly,
   size = "md",
   status,
   step = 1,
@@ -3347,7 +3348,7 @@ var InputNumber = forwardRef11(({
     return normalized;
   }
   function stepValue(type) {
-    if (disabled)
+    if (disabled || readOnly)
       return;
     const offset = type === "up" ? step : -step;
     const base = typeof currentValue === "number" ? currentValue : 0;
@@ -3369,11 +3370,15 @@ var InputNumber = forwardRef11(({
         inputMode: "decimal",
         className: inputNumberInputClass,
         disabled,
+        readOnly,
         value: displayValue,
-        onChange: (event) => emitChange(parser(event.currentTarget.value)),
+        onChange: (event) => {
+          if (!readOnly)
+            emitChange(parser(event.currentTarget.value));
+        },
         onKeyDown: (event) => {
           onKeyDown?.(event);
-          if (!keyboard || event.defaultPrevented)
+          if (readOnly || !keyboard || event.defaultPrevented)
             return;
           if (event.key === "ArrowUp") {
             event.preventDefault();
@@ -3391,7 +3396,7 @@ var InputNumber = forwardRef11(({
           /* @__PURE__ */ jsx12("button", {
             type: "button",
             className: inputNumberControlClass,
-            disabled: disabled || max !== undefined && Number(currentValue) >= max,
+            disabled: disabled || readOnly || max !== undefined && Number(currentValue) >= max,
             "aria-label": "Increase value",
             onClick: () => stepValue("up"),
             children: "+"
@@ -3399,7 +3404,7 @@ var InputNumber = forwardRef11(({
           /* @__PURE__ */ jsx12("button", {
             type: "button",
             className: inputNumberControlClass,
-            disabled: disabled || min !== undefined && Number(currentValue) <= min,
+            disabled: disabled || readOnly || min !== undefined && Number(currentValue) <= min,
             "aria-label": "Decrease value",
             onClick: () => stepValue("down"),
             children: "-"
@@ -4207,6 +4212,7 @@ var SelectRoot = forwardRef16(({
   "aria-invalid": ariaInvalid,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  "aria-required": ariaRequired,
   children,
   className,
   defaultValue,
@@ -4343,6 +4349,7 @@ var SelectRoot = forwardRef16(({
         "aria-invalid": ariaInvalid,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
@@ -4357,7 +4364,20 @@ var SelectRoot = forwardRef16(({
           /* @__PURE__ */ jsx17("span", {
             className: selectIconClass,
             "aria-hidden": "true",
-            children: "v"
+            children: /* @__PURE__ */ jsx17("svg", {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx17("path", {
+                d: "m6 9 6 6 6-6"
+              })
+            })
           })
         ]
       }),
@@ -4366,7 +4386,19 @@ var SelectRoot = forwardRef16(({
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
-        children: "x"
+        children: /* @__PURE__ */ jsx17("svg", {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx17("path", {
+            d: "m6 6 12 12M6 18 18 6"
+          })
+        })
       }) : null,
       open ? /* @__PURE__ */ jsxs15("div", {
         className: selectDropdownClass,
@@ -7258,6 +7290,7 @@ function newItem(schema) {
   return "";
 }
 function JsonSchemaForm({
+  className,
   compiled: suppliedCompiled,
   schema,
   value: controlledValue,
@@ -7617,7 +7650,7 @@ function JsonSchemaForm({
     ref: formRef,
     className: "schema-form-container",
     children: /* @__PURE__ */ jsxs22("form", {
-      className: "form form-vertical schema-form",
+      className: ["form form-vertical schema-form", className].filter(Boolean).join(" "),
       noValidate: true,
       onSubmit: (event) => {
         event.preventDefault();

package/dist/components/select/index.js

@@ -177,6 +177,7 @@ var SelectRoot = forwardRef(({
   "aria-invalid": ariaInvalid,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  "aria-required": ariaRequired,
   children,
   className,
   defaultValue,
@@ -313,6 +314,7 @@ var SelectRoot = forwardRef(({
         "aria-invalid": ariaInvalid,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
@@ -327,7 +329,20 @@ var SelectRoot = forwardRef(({
           /* @__PURE__ */ jsx("span", {
             className: selectIconClass,
             "aria-hidden": "true",
-            children: "v"
+            children: /* @__PURE__ */ jsx("svg", {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx("path", {
+                d: "m6 9 6 6 6-6"
+              })
+            })
           })
         ]
       }),
@@ -336,7 +351,19 @@ var SelectRoot = forwardRef(({
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
-        children: "x"
+        children: /* @__PURE__ */ jsx("svg", {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("path", {
+            d: "m6 6 12 12M6 18 18 6"
+          })
+        })
       }) : null,
       open ? /* @__PURE__ */ jsxs("div", {
         className: selectDropdownClass,

package/dist/generated/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.5.0";
+export declare const version = "0.5.2";

package/dist/index.js

@@ -107,7 +107,7 @@ function duskmoonMerge(classes) {
 import { useCallback as useCallback2, useState as useState2 } from "react";
 
 // src/generated/version.ts
-var version = "0.5.0";
+var version = "0.5.2";
 
 // src/infrastructure.ts
 var theme = {
@@ -8967,6 +8967,7 @@ var SelectRoot = forwardRef38(({
   "aria-invalid": ariaInvalid,
   "aria-label": ariaLabel,
   "aria-labelledby": ariaLabelledBy,
+  "aria-required": ariaRequired,
   children,
   className,
   defaultValue,
@@ -9103,6 +9104,7 @@ var SelectRoot = forwardRef38(({
         "aria-invalid": ariaInvalid,
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
+        "aria-required": ariaRequired,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         onClick: () => setOpen((current) => !current),
@@ -9117,7 +9119,20 @@ var SelectRoot = forwardRef38(({
           /* @__PURE__ */ jsx48("span", {
             className: selectIconClass,
             "aria-hidden": "true",
-            children: "v"
+            children: /* @__PURE__ */ jsx48("svg", {
+              width: "16",
+              height: "16",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              "aria-hidden": "true",
+              children: /* @__PURE__ */ jsx48("path", {
+                d: "m6 9 6 6 6-6"
+              })
+            })
           })
         ]
       }),
@@ -9126,7 +9141,19 @@ var SelectRoot = forwardRef38(({
         className: selectClearClass,
         "aria-label": "Clear selection",
         onClick: clearValue,
-        children: "x"
+        children: /* @__PURE__ */ jsx48("svg", {
+          width: "14",
+          height: "14",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx48("path", {
+            d: "m6 6 12 12M6 18 18 6"
+          })
+        })
       }) : null,
       open ? /* @__PURE__ */ jsxs34("div", {
         className: selectDropdownClass,
@@ -13869,6 +13896,7 @@ var InputNumber = forwardRef58(({
   onStep,
   parser = parseNumber,
   precision,
+  readOnly,
   size = "md",
   status,
   step = 1,
@@ -13888,7 +13916,7 @@ var InputNumber = forwardRef58(({
     return normalized;
   }
   function stepValue(type) {
-    if (disabled)
+    if (disabled || readOnly)
       return;
     const offset = type === "up" ? step : -step;
     const base = typeof currentValue === "number" ? currentValue : 0;
@@ -13910,11 +13938,15 @@ var InputNumber = forwardRef58(({
         inputMode: "decimal",
         className: inputNumberInputClass,
         disabled,
+        readOnly,
         value: displayValue,
-        onChange: (event) => emitChange(parser(event.currentTarget.value)),
+        onChange: (event) => {
+          if (!readOnly)
+            emitChange(parser(event.currentTarget.value));
+        },
         onKeyDown: (event) => {
           onKeyDown?.(event);
-          if (!keyboard || event.defaultPrevented)
+          if (readOnly || !keyboard || event.defaultPrevented)
             return;
           if (event.key === "ArrowUp") {
             event.preventDefault();
@@ -13932,7 +13964,7 @@ var InputNumber = forwardRef58(({
           /* @__PURE__ */ jsx71("button", {
             type: "button",
             className: inputNumberControlClass,
-            disabled: disabled || max !== undefined && Number(currentValue) >= max,
+            disabled: disabled || readOnly || max !== undefined && Number(currentValue) >= max,
             "aria-label": "Increase value",
             onClick: () => stepValue("up"),
             children: "+"
@@ -13940,7 +13972,7 @@ var InputNumber = forwardRef58(({
           /* @__PURE__ */ jsx71("button", {
             type: "button",
             className: inputNumberControlClass,
-            disabled: disabled || min !== undefined && Number(currentValue) <= min,
+            disabled: disabled || readOnly || min !== undefined && Number(currentValue) <= min,
             "aria-label": "Decrease value",
             onClick: () => stepValue("down"),
             children: "-"

package/dist/infrastructure.js

@@ -4,7 +4,7 @@
 import { useCallback, useState } from "react";
 
 // src/generated/version.ts
-var version = "0.5.0";
+var version = "0.5.2";
 
 // src/infrastructure.ts
 var theme = {

package/dist/styles.css

@@ -434,29 +434,33 @@ html {
   grid-template-columns: repeat(auto-fit, minmax(min(calc(--value(integer) * 0.25rem), 100%), 1fr));
 }
 
-/* Screen reader only utility - visually hidden but accessible */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
+/* Low-specificity fallbacks let Tailwind variants override either import order. */
+@layer utilities {
+  /* Screen reader only utility - visually hidden but accessible */
+  :where(.sr-only) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
 
-/* Undo sr-only for focus states (useful for skip links) */
-.not-sr-only {
-  position: static;
-  width: auto;
-  height: auto;
-  padding: 0;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
+  /* Undo sr-only for focus states (useful for skip links) */
+  :where(.not-sr-only) {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    clip-path: none;
+    white-space: normal;
+  }
 }
 
 
@@ -5075,6 +5079,10 @@ html {
   .pagination-item-active,
   .pagination-item-active-primary,
   .pagination-item[aria-current="page"],
+  .pagination li > a.pagination-item-active,
+  .pagination li > button.pagination-item-active,
+  .pagination li > a.pagination-item-active-primary,
+  .pagination li > button.pagination-item-active-primary,
   .pagination li > a.active,
   .pagination li > button.active,
   .pagination li > a[aria-current="page"],
@@ -5084,13 +5092,19 @@ html {
     border-color: var(--color-primary);
   }
 
-  .pagination-item-active-secondary {
+  .pagination-item-active-secondary,
+  .pagination-item-active-secondary[aria-current="page"],
+  .pagination li > a.pagination-item-active-secondary,
+  .pagination li > button.pagination-item-active-secondary {
     background-color: var(--color-secondary);
     color: var(--color-secondary-content);
     border-color: var(--color-secondary);
   }
 
-  .pagination-item-active-tertiary {
+  .pagination-item-active-tertiary,
+  .pagination-item-active-tertiary[aria-current="page"],
+  .pagination li > a.pagination-item-active-tertiary,
+  .pagination li > button.pagination-item-active-tertiary {
     background-color: var(--color-tertiary);
     color: var(--color-tertiary-content);
     border-color: var(--color-tertiary);
@@ -5099,11 +5113,29 @@ html {
   .pagination-item-active:hover,
   .pagination-item-active-primary:hover,
   .pagination-item[aria-current="page"]:hover,
+  .pagination li > a.pagination-item-active:hover,
+  .pagination li > button.pagination-item-active:hover,
+  .pagination li > a.pagination-item-active-primary:hover,
+  .pagination li > button.pagination-item-active-primary:hover,
   .pagination li > a[aria-current="page"]:hover,
   .pagination li > button[aria-current="page"]:hover {
     background-color: color-mix(in oklch, var(--color-primary), black 10%);
   }
 
+  .pagination-item-active-secondary:hover,
+  .pagination-item-active-secondary[aria-current="page"]:hover,
+  .pagination li > a.pagination-item-active-secondary:hover,
+  .pagination li > button.pagination-item-active-secondary:hover {
+    background-color: color-mix(in oklch, var(--color-secondary), black 10%);
+  }
+
+  .pagination-item-active-tertiary:hover,
+  .pagination-item-active-tertiary[aria-current="page"]:hover,
+  .pagination li > a.pagination-item-active-tertiary:hover,
+  .pagination li > button.pagination-item-active-tertiary:hover {
+    background-color: color-mix(in oklch, var(--color-tertiary), black 10%);
+  }
+
   .pagination-item:focus-visible,
   .pagination-prev:focus-visible,
   .pagination-next:focus-visible,
@@ -5318,7 +5350,9 @@ html {
   .megamenu-panel[popover] {
     position-anchor: var(--megamenu-anchor);
     position-area: block-end span-inline-end;
-    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+    /* Narrow viewports need candidates spanning the whole inline axis. */
+    position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline,
+      block-end span-all, block-start span-all;
     display: none; box-sizing: border-box;
     width: min(48rem, calc(100vw - 2rem)); max-width: calc(100vw - 2rem);
     max-height: min(36rem, calc(100dvh - 2rem)); margin: 0.5rem; padding: 1rem;
@@ -26433,6 +26467,10 @@ html {
     border-color: var(--color-primary);
   }
 
+  .select-container > .select {
+    background-image: none;
+  }
+
   .select:focus-visible {
     outline: none;
     border-color: var(--color-primary);
@@ -26481,6 +26519,10 @@ html {
     text-overflow: ellipsis;
   }
 
+  .select-container:has(> .select-clear) > .select > .select-selection {
+    margin-inline-end: 1.75rem;
+  }
+
   .select-placeholder {
     color: var(--color-on-surface-variant);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/components",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -485,7 +485,7 @@
     "ajv-formats": "^3.0.1"
   },
   "devDependencies": {
-    "@duskmoon-dev/core": "1.20.3",
+    "@duskmoon-dev/core": "1.20.5",
     "@testing-library/react": "16.3.2",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.4",