@ndla/primitives 0.0.8 → 0.0.10

package/dist/styles.css

@@ -320,6 +320,26 @@
     display: none;
 }
 
+  .z_dropdown {
+    z-index: var(--z-index-dropdown);
+}
+
+  .shadow_large {
+    box-shadow: var(--shadows-large);
+}
+
+  .p_xsmall {
+    padding: var(--spacing-xsmall);
+}
+
+  .max-h_surface\.xsmall {
+    max-height: var(--sizes-surface-xsmall);
+}
+
+  .text_stroke\.default {
+    color: var(--colors-stroke-default);
+}
+
   .pos_fixed {
     position: fixed;
 }
@@ -488,6 +508,14 @@
     white-space: pre-line;
 }
 
+  .z_base {
+    z-index: var(--z-index-base);
+}
+
+  .my_xsmall {
+    margin-block: var(--spacing-xsmall);
+}
+
   .rounded_small {
     border-radius: var(--radii-small);
 }
@@ -604,10 +632,6 @@
     box-shadow: var(--shadows-xsmall);
 }
 
-  .z_dropdown {
-    z-index: var(--z-index-dropdown);
-}
-
   .gap_small {
     gap: var(--spacing-small);
 }
@@ -656,6 +680,14 @@
     outline-offset: -6px;
 }
 
+  .text_icon\.default {
+    color: var(--colors-icon-default);
+}
+
+  .w_surface\.small {
+    width: var(--sizes-surface-small);
+}
+
   .animation_skeleton-pulse {
     animation: var(--animations-skeleton-pulse);
 }
@@ -736,24 +768,32 @@
     table-layout: fixed;
 }
 
-  .p_xsmall {
-    padding: var(--spacing-xsmall);
-}
-
   .overflow_auto {
     overflow: auto;
 }
 
-  .ring_4px_solid {
-    outline: 4px solid;
+  .white-space_nowrap {
+    white-space: nowrap;
 }
 
-  .ring-offset_-4px {
-    outline-offset: -4px;
+  .w_full {
+    width: full;
 }
 
-  .white-space_nowrap {
-    white-space: nowrap;
+  .gap_1 {
+    gap: var(--spacing-1);
+}
+
+  .pe_3xsmall {
+    padding-inline-end: var(--spacing-3xsmall);
+}
+
+  .ps_xsmall {
+    padding-inline-start: var(--spacing-xsmall);
+}
+
+  .cursor_initial {
+    cursor: initial;
 }
 
   .shadow_medium {
@@ -928,6 +968,15 @@
     transition-property: border-color, background, box-shadow, color;
 }
 
+  .overflow-y_auto {
+    overflow-y: auto;
+}
+
+  .transition-prop_background\,_color\,_border-color {
+    --transition-prop: background, color, border-color;
+    transition-property: background, color, border-color;
+}
+
   .left_0 {
     left: 0;
 }
@@ -936,8 +985,13 @@
     top: 0;
 }
 
-  .overflow-y_auto {
-    overflow-y: auto;
+  .transition-prop_transform\,_width\,_height {
+    --transition-prop: transform, width, height;
+    transition-property: transform, width, height;
+}
+
+  .left_auto {
+    left: auto;
 }
 
   .bg_surface\.default {
@@ -1049,21 +1103,34 @@
     overflow-x: auto;
 }
 
+  .transition-prop_color\,_background\,_border-color {
+    --transition-prop: color, background, border-color;
+    transition-property: color, background, border-color;
+}
+
+  .border_transparent {
+    border-color: transparent;
+}
+
   .border-w_1px {
     border-width: 1px;
 }
 
-  .ring-color_stroke\.default {
-    outline-color: var(--colors-stroke-default);
+  .ring-color_transparent {
+    outline-color: transparent;
 }
 
-  .transition-prop_color\,_background\,_border-color {
-    --transition-prop: color, background, border-color;
-    transition-property: color, background, border-color;
+  .bg_surface\.actionSubtle\.selected {
+    background-color: var(--colors-surface-action-subtle-selected);
 }
 
-  .border_transparent {
-    border-color: transparent;
+  .transition-prop_background\,_outline-color\,_color {
+    --transition-prop: background, outline-color, color;
+    transition-property: background, outline-color, color;
+}
+
+  .pb_1 {
+    padding-bottom: var(--spacing-1);
 }
 
   .duration_slow {
@@ -1137,6 +1204,10 @@
     background: var(--colors-surface-disabled);
 }
 
+  .disabled\:shadow-color_surface\.disabled:is(:disabled, [disabled], [data-disabled]) {
+    --shadow-color: var(--colors-surface-disabled);
+}
+
   .\[\&_svg\]\:mx_0 svg {
     margin-inline: 0;
 }
@@ -1181,6 +1252,38 @@
     color: var(--colors-stroke-disabled);
 }
 
+  .open\:animation_fade-shift-in_0\.25s_ease-out:is([open], [data-open], [data-state="open"]) {
+    animation: fade-shift-in 0.25s ease-out;
+}
+
+  .closed\:animation_fade-shift-out_0\.25s_ease-out:is([closed], [data-closed], [data-state="closed"]) {
+    animation: fade-shift-out 0.25s ease-out;
+}
+
+  .highlighted\:bg_surface\.hover[data-highlighted] {
+    background: var(--colors-surface-hover);
+}
+
+  .checked\:bg_surface\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    background: var(--colors-surface-selected);
+}
+
+  .\[\&_svg\]\:text_icon\.default svg {
+    color: var(--colors-icon-default);
+}
+
+  .\[\&_svg\]\:origin_center svg {
+    transform-origin: center;
+}
+
+  .checked\:text-decor_underline:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    text-decoration: underline;
+}
+
+  .highlighted\:text-decor_underline[data-highlighted] {
+    text-decoration: underline;
+}
+
   .open\:animation_backdrop-in:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-backdrop-in);
 }
@@ -1245,14 +1348,6 @@
     color: var(--colors-text-subtle);
 }
 
-  .highlighted\:text-decor_underline[data-highlighted] {
-    text-decoration: underline;
-}
-
-  .highlighted\:bg_surface\.hover[data-highlighted] {
-    background: var(--colors-surface-hover);
-}
-
   .\[\&_svg\]\:text_icon\.error svg {
     color: icon.error;
 }
@@ -1265,14 +1360,6 @@
     background: var(--colors-surface-error-subtle-hover);
 }
 
-  .open\:animation_fade-shift-in_0\.25s_ease-out:is([open], [data-open], [data-state="open"]) {
-    animation: fade-shift-in 0.25s ease-out;
-}
-
-  .closed\:animation_fade-shift-out_0\.25s_ease-out:is([closed], [data-closed], [data-state="closed"]) {
-    animation: fade-shift-out 0.25s ease-out;
-}
-
   .open\:animation_fade-shift-in_0\.2s_ease-out:is([open], [data-open], [data-state="open"]) {
     animation: fade-shift-in 0.2s ease-out;
 }
@@ -1285,6 +1372,14 @@
     background: var(--colors-stroke-default);
 }
 
+  .selected\:bg_surface\.selected:is([aria-selected=true], [data-selected]) {
+    background: var(--colors-surface-selected);
+}
+
+  .ariaInvalid\:shadow-color_stroke\.error:has([aria-invalid='true']),.ariaInvalid\:shadow-color_stroke\.error[aria-invalid='true'] {
+    --shadow-color: var(--colors-stroke-error);
+}
+
   .\[\&\:\:before\,_\&\:\:after\,_\*\]\:vis_hidden::before,.\[\&\:\:before\,_\&\:\:after\,_\*\]\:vis_hidden::after,.\[\&\:\:before\,_\&\:\:after\,_\*\]\:vis_hidden * {
     visibility: hidden;
 }
@@ -1381,14 +1476,6 @@
     padding-block: var(--spacing-3xsmall);
 }
 
-  .horizontal\:pt_xsmall[data-orientation=horizontal] {
-    padding-block-start: var(--spacing-xsmall);
-}
-
-  .vertical\:ps_xsmall[data-orientation=vertical] {
-    padding-inline-start: var(--spacing-xsmall);
-}
-
   .horizontal\:mb_-1px[data-orientation=horizontal] {
     margin-block-end: -1px;
 }
@@ -1397,22 +1484,6 @@
     margin-inline-end: -1px;
 }
 
-  .horizontal\:h_2[data-orientation=horizontal] {
-    height: var(--sizes-2);
-}
-
-  .horizontal\:w_var\(--width\)[data-orientation=horizontal] {
-    width: var(--width);
-}
-
-  .vertical\:h_var\(--height\)[data-orientation=vertical] {
-    height: var(--height);
-}
-
-  .vertical\:w_2[data-orientation=vertical] {
-    width: var(--sizes-2);
-}
-
   .selected\:text_text\.strong:is([aria-selected=true], [data-selected]) {
     color: var(--colors-text-strong);
 }
@@ -1434,6 +1505,22 @@
     background: var(--colors-surface-default);
 }
 
+  .horizontal\:pt_xsmall[data-orientation=horizontal] {
+    padding-block-start: var(--spacing-xsmall);
+}
+
+  .vertical\:ps_xsmall[data-orientation=vertical] {
+    padding-inline-start: var(--spacing-xsmall);
+}
+
+  .highlighted\:ring-offset_-1px[data-highlighted] {
+    outline-offset: -1px;
+}
+
+  .\[\&_span\]\:d_inline-block span {
+    display: inline-block;
+}
+
   .closed\:transition-prop_background\,_border-color\,_border\,_border-radius:is([closed], [data-closed], [data-state="closed"]) {
     --transition-prop: background, border-color, border, border-radius;
     transition-property: background, border-color, border, border-radius;
@@ -1475,6 +1562,29 @@
     border-color: var(--colors-surface-action);
 }
 
+  .highlighted\:border_stroke\.default[data-highlighted] {
+    border-color: var(--colors-stroke-default);
+}
+
+  .checked\:border_stroke\.default:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    border-color: var(--colors-stroke-default);
+}
+
+  .\[\&_svg\]\:duration_normal svg {
+    --transition-duration: var(--durations-normal);
+    transition-duration: var(--durations-normal);
+}
+
+  .\[\&_svg\]\:transition-prop_transform svg {
+    --transition-prop: transform;
+    transition-property: transform;
+}
+
+  .\[\&_svg\]\:ease_default svg {
+    --transition-easing: var(--easings-default);
+    transition-timing-function: var(--easings-default);
+}
+
   .ariaInvalid\:ring-color_stroke\.error:has([aria-invalid='true']),.ariaInvalid\:ring-color_stroke\.error[aria-invalid='true'] {
     outline-color: var(--colors-stroke-error);
 }
@@ -1491,10 +1601,6 @@
     flex-direction: row;
 }
 
-  .checked\:border_stroke\.default:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
-    border-color: var(--colors-stroke-default);
-}
-
   .\[\&_\>_caption\]\:fw_bold > caption,.\[\&_thead_tr_th\]\:fw_bold thead tr th {
     font-weight: var(--font-weights-bold);
 }
@@ -1527,14 +1633,6 @@
     flex-direction: row;
 }
 
-  .horizontal\:bottom_0[data-orientation=horizontal] {
-    bottom: 0;
-}
-
-  .vertical\:left_0[data-orientation=vertical] {
-    left: 0;
-}
-
   .disabled\:border_stroke\.default:is(:disabled, [disabled], [data-disabled]) {
     border-color: var(--colors-stroke-default);
 }
@@ -1555,6 +1653,18 @@
     border-color: var(--colors-stroke-subtle);
 }
 
+  .highlighted\:bg_surface\.actionSubtle\.hover[data-highlighted] {
+    background-color: var(--colors-surface-action-subtle-hover);
+}
+
+  .highlighted\:ring-width_3px[data-highlighted] {
+    outline-width: 3px;
+}
+
+  .highlighted\:ring-color_stroke\.hover[data-highlighted] {
+    outline-color: var(--colors-stroke-hover);
+}
+
   .focusWithin\:ring-offset_-1px:focus-within {
     outline-offset: -1px;
 }
@@ -1629,6 +1739,10 @@
     border-radius: var(--radii-xsmall);
 }
 
+  .focusVisible\:ring-offset_-1:is(:focus-visible, [data-focus-visible]) {
+    outline-offset: calc(var(--spacing-1) * -1);
+}
+
   .focusVisible\:border_2px_solid:is(:focus-visible, [data-focus-visible]) {
     border: 2px solid;
 }
@@ -1641,24 +1755,16 @@
     outline-offset: 0px;
 }
 
-  .focusVisible\:shadow_0_0_0_3px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
-    box-shadow: 0 0 0 3px var(--shadow-color);
+  .focusVisible\:rounded_unset:is(:focus-visible, [data-focus-visible]) {
+    border-radius: unset;
 }
 
   .focusVisible\:ring-offset_-3px:is(:focus-visible, [data-focus-visible]) {
     outline-offset: -3px;
 }
 
-  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:h_var\(--height\) {
-    height: var(--height);
-}
-
-  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:w_var\(--width\) {
-    width: var(--width);
-}
-
-  .focusVisible\:rounded_unset:is(:focus-visible, [data-focus-visible]) {
-    border-radius: unset;
+  .focusVisible\:shadow_0_0_0_3px_var\(--shadow-color\):is(:focus-visible, [data-focus-visible]) {
+    box-shadow: 0 0 0 3px var(--shadow-color);
 }
 
   .focus\:ring-color_stroke\.default:is(:focus, [data-focus]) {
@@ -1741,14 +1847,18 @@
     --shadow-color: var(--colors-surface-action-subtle-hover-strong);
 }
 
-  .hover\:text-decor_underline:is(:hover, [data-hover]) {
-    text-decoration: underline;
-}
-
   .hover\:bg_surface\.hover:is(:hover, [data-hover]) {
     background: var(--colors-surface-hover);
 }
 
+  .hover\:bg_surface\.default:is(:hover, [data-hover]) {
+    background: var(--colors-surface-default);
+}
+
+  .hover\:text-decor_underline:is(:hover, [data-hover]) {
+    text-decoration: underline;
+}
+
   .hover\:text_text\.default:is(:hover, [data-hover]) {
     color: var(--colors-text-default);
 }
@@ -1769,6 +1879,10 @@
     outline-color: var(--colors-stroke-hover);
 }
 
+  .hover\:bg_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
+    background-color: var(--colors-surface-action-subtle-hover);
+}
+
   .active\:text_text\.onAction:is(:active, [data-active]) {
     color: var(--colors-text-on-action);
 }
@@ -1817,6 +1931,10 @@
     color: var(--colors-icon-strong);
 }
 
+  .disabled\:\[\&_svg\]\:text_text\.onAction:is(:disabled, [disabled], [data-disabled]) svg {
+    color: var(--colors-text-on-action);
+}
+
   .disabled\:hover\:text_text\.onAction:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     color: var(--colors-text-on-action);
 }
@@ -1877,6 +1995,14 @@
     color: var(--colors-stroke-disabled);
 }
 
+  .checked\:highlighted\:bg_surface\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"])[data-highlighted] {
+    background: var(--colors-surface-hover);
+}
+
+  .open\:\[\&_svg\]\:transform_rotate\(180deg\):is([open], [data-open], [data-state="open"]) svg {
+    transform: rotate(180deg);
+}
+
   .open\:\[\&_summary\]\:mb_-xxsmall:is([open], [data-open], [data-state="open"]) summary {
     margin-block-end: calc(var(--spacing-xxsmall) * -1);
 }
@@ -1897,6 +2023,34 @@
     color: var(--colors-icon-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]) {
+    background: var(--colors-surface-hover);
+}
+
+  .disabled\:highlighted\:text_text\.disabled:is(:disabled, [disabled], [data-disabled])[data-highlighted] {
+    color: var(--colors-text-disabled);
+}
+
+  .disabled\:highlighted\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled])[data-highlighted] {
+    background: var(--colors-surface-disabled);
+}
+
+  .disabled\:selected\:text_text\.disabled:is(:disabled, [disabled], [data-disabled]):is([aria-selected=true], [data-selected]) {
+    color: var(--colors-text-disabled);
+}
+
+  .disabled\:selected\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled]):is([aria-selected=true], [data-selected]) {
+    background: var(--colors-surface-disabled);
+}
+
   .checked\:hover\:transform_translateX\(100\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     transform: translateX(100%);
 }
@@ -1913,20 +2067,14 @@
     text-align: right;
 }
 
-  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:horizontal\:rounded-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\:rounded-r_xsmall[data-orientation=vertical] {
-    border-top-right-radius: var(--radii-xsmall);
-    border-bottom-right-radius: var(--radii-xsmall);
-}
-
   .disabled\:hover\:text_text\.subtle:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
     color: var(--colors-text-subtle);
 }
 
+  .highlighted\:\[\&_svg\]\:text_stroke\.hover[data-highlighted] svg {
+    color: var(--colors-stroke-hover);
+}
+
   .\[\&_\>_li\]\:marker\:content_counters\(list-item\,_\'\.\'\)_\'\._\' > li::marker {
     content: counters(list-item, '.') '. ';
 }
@@ -2011,6 +2159,10 @@
     transform: translateX(0);
 }
 
+  .hover\:\[\&_svg\]\:text_stroke\.hover:is(:hover, [data-hover]) svg {
+    color: var(--colors-stroke-hover);
+}
+
   .hover\:invalid\:bg_surface\.dangerSubtle:is(:hover, [data-hover]):is(:invalid, [data-invalid]) {
     background-color: var(--colors-surface-danger-subtle);
 }
@@ -2065,6 +2217,45 @@
 }
     .tablet\:rounded_sharp {
       border-radius: var(--radii-sharp);
+}
+    .tablet\:w_50\% {
+      width: 50%;
+}
+    .tablet\:w_35\% {
+      width: 35%;
+}
+    .tablet\:w_25\% {
+      width: 25%;
+}
+    .tablet\:float_left {
+      float: left;
+}
+    .tablet\:clear_left {
+      clear: left;
+}
+    .tablet\:pe_medium {
+      padding-inline-end: var(--spacing-medium);
+}
+    .tablet\:float_right {
+      float: right;
+}
+    .tablet\:clear_right {
+      clear: right;
+}
+    .tablet\:ps_medium {
+      padding-inline-start: var(--spacing-medium);
+}
+}
+
+  @media screen and (min-width: 61.3125rem) {
+    .desktop\:w_65\% {
+      width: 65%;
+}
+    .desktop\:w_50\% {
+      width: 50%;
+}
+    .desktop\:w_35\% {
+      width: 35%;
 }
 }
 

package/es/Accordion.js

@@ -6,8 +6,7 @@
  *
  */
 
-import { accordionAnatomy } from "@ark-ui/anatomy";
-import { Accordion } from "@ark-ui/react";
+import { Accordion, accordionAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
 const accordionRecipe = sva({

package/es/Button.js

@@ -32,6 +32,10 @@ export const buttonBaseRecipe = cva({
       cursor: "not-allowed",
       color: "text.onAction",
       background: "surface.disabled",
+      boxShadowColor: "surface.disabled",
+      "& svg": {
+        color: "text.onAction"
+      },
       _hover: {
         color: "text.onAction",
         background: "surface.disabled"

package/es/Checkbox.js

@@ -6,8 +6,7 @@
  *
  */
 
-import { checkboxAnatomy } from "@ark-ui/anatomy";
-import { Checkbox } from "@ark-ui/react";
+import { Checkbox, checkboxAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
 import { Text } from "./Text";