@duskmoon-dev/components 0.5.1 → 0.5.2

package/dist/generated/version.d.ts

@@ -1 +1 @@
-export declare const version = "0.5.1";
+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.1";
+var version = "0.5.2";
 
 // src/infrastructure.ts
 var theme = {

package/dist/infrastructure.js

@@ -4,7 +4,7 @@
 import { useCallback, useState } from "react";
 
 // src/generated/version.ts
-var version = "0.5.1";
+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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duskmoon-dev/components",
-  "version": "0.5.1",
+  "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",