@ndla/primitives 1.0.126-alpha.0 → 1.0.128-alpha.0

package/dist/panda.buildinfo.json

@@ -1,5 +1,5 @@
 {
-  "schemaVersion": "1.7.0",
+  "schemaVersion": "1.10.0",
   "styles": {
     "atomic": [
       "display]___[value:flex",

package/dist/styles.css

@@ -114,9 +114,6 @@
         font-size: calc(var(--font-sizes-xxsmall) * 1.11);
         line-height: calc(var(--line-heights-xsmall) * 1.11);
 }
-}
-
-    @media print {
       .textStyle_label\.medium {
         font-size: var(--font-sizes-xsmall);
         line-height: var(--line-heights-xsmall);
@@ -126,9 +123,6 @@
         font-size: calc(var(--font-sizes-xsmall) * 1.11);
         line-height: calc(var(--line-heights-xsmall) * 1.11);
 }
-}
-
-    @media print {
       .textStyle_label\.large\! {
         font-size: var(--font-sizes-small) !important;
         line-height: var(--line-heights-small) !important;
@@ -138,9 +132,6 @@
         font-size: calc(var(--font-sizes-small) * 1.11) !important;
         line-height: calc(var(--line-heights-small) * 1.11) !important;
 }
-}
-
-    @media print {
       .textStyle_label\.xsmall {
         font-size: var(--font-sizes-xxsmall);
         line-height: var(--line-heights-xxsmall);
@@ -150,9 +141,6 @@
         font-size: calc(var(--font-sizes-xxsmall) * 1.11);
         line-height: calc(var(--line-heights-xxsmall) * 1.11);
 }
-}
-
-    @media print {
       .textStyle_body\.medium {
         font-size: var(--font-sizes-xsmall);
         line-height: var(--line-heights-xsmall);
@@ -162,9 +150,6 @@
         font-size: calc(var(--font-sizes-xsmall) * 1.11);
         line-height: calc(var(--line-heights-xsmall) * 1.11);
 }
-}
-
-    @media print {
       .textStyle_heading\.medium {
         font-size: var(--font-sizes-xxlarge);
         line-height: var(--line-heights-xxlarge);
@@ -174,9 +159,6 @@
         font-size: calc(var(--font-sizes-xxlarge) * 1.11);
         line-height: calc(var(--line-heights-xxlarge) * 1.11);
 }
-}
-
-    @media print {
       .\[\&_\>_\*\]\:textStyle_label\.large\! > * {
         font-size: var(--font-sizes-small) !important;
         line-height: var(--line-heights-small) !important;
@@ -1750,12 +1732,7 @@
     border-color: var(--colors-surface-action);
 }
 
-  .checked\:text-decoration_underline:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
-    text-decoration: underline;
-    text-decoration-thickness: max(0.0625em, 1px);
-}
-
-  .highlighted\:text-decoration_underline[data-highlighted] {
+  .checked\:text-decoration_underline:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]),.highlighted\:text-decoration_underline[data-highlighted] {
     text-decoration: underline;
     text-decoration-thickness: max(0.0625em, 1px);
 }
@@ -2253,11 +2230,7 @@
     border-radius: var(--radii-xsmall);
 }
 
-  .focusVisible\:ring_2px_solid:is(:focus-visible, [data-focus-visible]) {
-    outline: 2px solid;
-}
-
-  .\[\&\:has\(input\:focus-visible\)\]\:ring_2px_solid:has(input:focus-visible) {
+  .focusVisible\:ring_2px_solid:is(:focus-visible, [data-focus-visible]),.\[\&\:has\(input\:focus-visible\)\]\:ring_2px_solid:has(input:focus-visible) {
     outline: 2px solid;
 }
 
@@ -2539,11 +2512,7 @@
     background: var(--colors-surface-disabled-subtle);
 }
 
-  .disabled\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
-    background: var(--colors-surface-disabled);
-}
-
-  .disabled\:checked\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .disabled\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]),.disabled\:checked\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     background: var(--colors-surface-disabled);
 }
 
@@ -2563,31 +2532,15 @@
     background: var(--colors-surface-default);
 }
 
-  .selected\:hover\:bg_surface\.hover:is([aria-selected=true], [data-selected]):is(:hover, [data-hover]) {
-    background: var(--colors-surface-hover);
-}
-
-  .selected\:highlighted\:bg_surface\.hover:is([aria-selected=true], [data-selected])[data-highlighted] {
-    background: var(--colors-surface-hover);
-}
-
-  .highlighted\:hover\:bg_surface\.hover[data-highlighted]:is(:hover, [data-hover]) {
+  .selected\:hover\:bg_surface\.hover:is([aria-selected=true], [data-selected]):is(:hover, [data-hover]),.selected\:highlighted\:bg_surface\.hover:is([aria-selected=true], [data-selected])[data-highlighted],.highlighted\:hover\:bg_surface\.hover[data-highlighted]:is(:hover, [data-hover]) {
     background: var(--colors-surface-hover);
 }
 
-  .disabled\:highlighted\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])[data-highlighted] {
+  .disabled\:highlighted\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])[data-highlighted],.disabled\:selected\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is([aria-selected=true], [data-selected]) {
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:selected\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is([aria-selected=true], [data-selected]) {
-    background: var(--colors-surface-disabled);
-}
-
-  .disabled\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
-    border-color: var(--colors-stroke-disabled);
-}
-
-  .disabled\:checked\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+  .disabled\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]),.disabled\:checked\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     border-color: var(--colors-stroke-disabled);
 }
 
@@ -2659,11 +2612,7 @@
     list-style-type: square;
 }
 
-  .disabled\:\[\&_svg\]\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) svg {
-    color: var(--colors-text-on-action);
-}
-
-  .disabled\:hover\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
+  .disabled\:\[\&_svg\]\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) svg,.disabled\:hover\:c_text\.onAction:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
     color: var(--colors-text-on-action);
 }
 
@@ -2743,11 +2692,7 @@
     margin-block-end: calc(var(--spacing-xxsmall) * -1);
 }
 
-  .ariaInvalid\:hover\:bx-sh-c_stroke\.error:has([aria-invalid='true']):is(:hover, [data-hover]),.ariaInvalid\:hover\:bx-sh-c_stroke\.error[aria-invalid='true']:is(:hover, [data-hover]) {
-    --shadow-color: var(--colors-stroke-error);
-}
-
-  .ariaInvalid\:focusWithin\:bx-sh-c_stroke\.error:has([aria-invalid='true']):focus-within,.ariaInvalid\:focusWithin\:bx-sh-c_stroke\.error[aria-invalid='true']:focus-within {
+  .ariaInvalid\:hover\:bx-sh-c_stroke\.error:has([aria-invalid='true']):is(:hover, [data-hover]),.ariaInvalid\:hover\:bx-sh-c_stroke\.error[aria-invalid='true']:is(:hover, [data-hover]),.ariaInvalid\:focusWithin\:bx-sh-c_stroke\.error:has([aria-invalid='true']):focus-within,.ariaInvalid\:focusWithin\:bx-sh-c_stroke\.error[aria-invalid='true']:focus-within {
     --shadow-color: var(--colors-stroke-error);
 }
 
@@ -2763,11 +2708,7 @@
     color: var(--colors-icon-default);
 }
 
-  .disabled\:highlighted\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])[data-highlighted] {
-    color: var(--colors-text-disabled);
-}
-
-  .disabled\:selected\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is([aria-selected=true], [data-selected]) {
+  .disabled\:highlighted\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true])[data-highlighted],.disabled\:selected\:c_text\.disabled:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is([aria-selected=true], [data-selected]) {
     color: var(--colors-text-disabled);
 }
 
@@ -2795,16 +2736,6 @@
     color: var(--colors-text-subtle);
 }
 
-  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:horizontal\:bdr-t_xsmall[data-orientation=horizontal] {
-    border-top-left-radius: var(--radii-xsmall);
-    border-top-right-radius: var(--radii-xsmall);
-}
-
-  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:vertical\:bdr-r_xsmall[data-orientation=vertical] {
-    border-top-right-radius: var(--radii-xsmall);
-    border-bottom-right-radius: var(--radii-xsmall);
-}
-
   .highlighted\:\[\&_svg\]\:c_stroke\.hover[data-highlighted] svg {
     color: var(--colors-stroke-hover);
 }
@@ -2817,6 +2748,16 @@
     --shadow-color: var(--colors-stroke-default);
 }
 
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:horizontal\:bdr-t_xsmall[data-orientation=horizontal] {
+    border-top-left-radius: var(--radii-xsmall);
+    border-top-right-radius: var(--radii-xsmall);
+}
+
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:vertical\:bdr-r_xsmall[data-orientation=vertical] {
+    border-top-right-radius: var(--radii-xsmall);
+    border-bottom-right-radius: var(--radii-xsmall);
+}
+
   .hover\:disabled\:border-style_solid:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled=true]) {
     border-style: solid;
 }
@@ -2983,21 +2924,9 @@
     .motionReduce\:anim-dur_2s {
       animation-duration: 2s;
 }
-}
-
-  @media (prefers-reduced-motion: reduce) {
-    .open\:motionReduce\:anim_none:is([open], [data-open], [data-state="open"], :popover-open) {
-      animation: none;
-}
-}
-
-  @media (prefers-reduced-motion: reduce) {
-    .closed\:motionReduce\:anim_none:is([closed], [data-closed], [data-state="closed"]) {
+    .open\:motionReduce\:anim_none:is([open], [data-open], [data-state="open"], :popover-open),.closed\:motionReduce\:anim_none:is([closed], [data-closed], [data-state="closed"]) {
       animation: none;
 }
-}
-
-  @media (prefers-reduced-motion: reduce) {
     .\[\&_svg\]\:motionReduce\:trs_none svg,.highlighted\:motionReduce\:trs_none[data-highlighted] {
       transition: none;
 }
@@ -3005,28 +2934,16 @@
       --transition-duration: 0s;
       transition-duration: 0s;
 }
-}
-
-  @media (prefers-reduced-motion: reduce) {
     .hover\:motionReduce\:trs_none:is(:hover, [data-hover]) {
       transition: none;
 }
-}
-
-  @media (prefers-reduced-motion: reduce) {
     .hover\:motionReduce\:trf_translateX\(0\):is(:hover, [data-hover]) {
       transform: translateX(0);
 }
-}
-
-  @media (prefers-reduced-motion: reduce) {
     .hover\:motionReduce\:trs-dur_0s:is(:hover, [data-hover]) {
       --transition-duration: 0s;
       transition-duration: 0s;
 }
-}
-
-  @media (prefers-reduced-motion: reduce) {
     .checked\:hover\:motionReduce\:trf_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
       transform: translateX(120%);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ndla/primitives",
   "type": "module",
-  "version": "1.0.126-alpha.0",
+  "version": "1.0.128-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "exports": {
@@ -33,12 +33,12 @@
   ],
   "dependencies": {
     "@ark-ui/react": "^5.34.1",
-    "@ndla/styled-system": "^0.0.48",
-    "@ndla/util": "^5.0.19-alpha.0"
+    "@ndla/styled-system": "^0.0.49",
+    "@ndla/util": "^5.0.21-alpha.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.75",
-    "@pandacss/dev": "^1.7.0"
+    "@ndla/preset-panda": "^0.0.76",
+    "@pandacss/dev": "^1.10.0"
   },
   "peerDependencies": {
     "react": ">= 18",
@@ -47,5 +47,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "74f4af9223bd5cbd27679b44b3cab1fcf4d26c76"
+  "gitHead": "f8a73392a71c05f052f6cc69d55ca57c38e0db5b"
 }