@ndla/primitives 0.0.9 → 0.0.10

package/dist/panda.buildinfo.json

@@ -87,6 +87,8 @@
       "boxShadowColor]___[value:stroke.default",
       "color]___[value:text.onAction]___[cond:_disabled",
       "background]___[value:surface.disabled]___[cond:_disabled",
+      "boxShadowColor]___[value:surface.disabled]___[cond:_disabled",
+      "color]___[value:text.onAction]___[cond:_disabled<___>& svg",
       "color]___[value:text.onAction]___[cond:_disabled<___>_hover",
       "background]___[value:surface.disabled]___[cond:_disabled<___>_hover",
       "boxShadow]___[value:inset 0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
@@ -196,6 +198,30 @@
       "color]___[value:stroke.hover]___[cond:_checked<___>_hover",
       "color]___[value:stroke.disabled]___[cond:_disabled",
       "color]___[value:stroke.disabled]___[cond:_disabled<___>_hover",
+      "zIndex]___[value:dropdown",
+      "boxShadow]___[value:large",
+      "padding]___[value:xsmall",
+      "overflowY]___[value:auto",
+      "maxHeight]___[value:surface.xsmall",
+      "animation]___[value:fade-shift-in 0.25s ease-out]___[cond:_open",
+      "animation]___[value:fade-shift-out 0.25s ease-out]___[cond:_closed",
+      "transitionProperty]___[value:background, color, border-color",
+      "background]___[value:surface.hover]___[cond:_hover",
+      "background]___[value:surface.hover]___[cond:_highlighted",
+      "background]___[value:surface.selected]___[cond:_checked",
+      "background]___[value:surface.hover]___[cond:_checked<___>_highlighted",
+      "background]___[value:surface.default]___[cond:_hover",
+      "borderColor]___[value:stroke.default]___[cond:_highlighted",
+      "borderColor]___[value:stroke.default]___[cond:_checked",
+      "color]___[value:icon.default]___[cond:& svg",
+      "transformOrigin]___[value:center]___[cond:& svg",
+      "transitionDuration]___[value:normal]___[cond:& svg",
+      "transitionProperty]___[value:transform]___[cond:& svg",
+      "transitionTimingFunction]___[value:default]___[cond:& svg",
+      "transform]___[value:rotate(180deg)]___[cond:_open<___>& svg",
+      "color]___[value:stroke.default",
+      "textDecoration]___[value:underline]___[cond:_checked",
+      "textDecoration]___[value:underline]___[cond:_highlighted",
       "position]___[value:fixed",
       "height]___[value:100vh",
       "width]___[value:100vw",
@@ -214,7 +240,6 @@
       "maxWidth]___[value:95%",
       "maxHeight]___[value:95%",
       "margin]___[value:auto",
-      "overflowY]___[value:auto",
       "borderRadius]___[value:sharp",
       "borderRadius]___[value:small]___[cond:tablet",
       "paddingBlockStart]___[value:env(safe-area-inset-top)",
@@ -263,6 +288,22 @@
       "textStyle]___[value:label.large!]___[cond:& > *",
       "color]___[value:text.error",
       "whiteSpace]___[value:pre-line",
+      "transitionProperty]___[value:transform, width, height",
+      "width]___[value:50%]___[cond:tablet",
+      "width]___[value:65%]___[cond:desktop",
+      "width]___[value:35%]___[cond:tablet",
+      "width]___[value:50%]___[cond:desktop",
+      "width]___[value:25%]___[cond:tablet",
+      "width]___[value:35%]___[cond:desktop",
+      "float]___[value:left]___[cond:tablet",
+      "clear]___[value:left]___[cond:tablet",
+      "paddingInlineEnd]___[value:medium]___[cond:tablet",
+      "float]___[value:right]___[cond:tablet",
+      "clear]___[value:right]___[cond:tablet",
+      "paddingInlineStart]___[value:medium]___[cond:tablet",
+      "zIndex]___[value:base",
+      "left]___[value:auto",
+      "marginBlock]___[value:xsmall",
       "borderRadius]___[value:small",
       "boxShadow]___[value:4px 4px 0px 0px var(--shadow-color)",
       "backgroundColor]___[value:surface.default",
@@ -309,13 +350,10 @@
       "margin]___[value:0",
       "transitionProperty]___[value:background, color",
       "textDecoration]___[value:underline]___[cond:_hover",
-      "textDecoration]___[value:underline]___[cond:_highlighted",
       "color]___[value:stroke.disabled]___[cond:_disabled<___>& svg",
       "textDecoration]___[value:none]___[cond:_disabled<___>_hover",
       "background]___[value:surface.default]___[cond:_disabled<___>_hover",
       "color]___[value:stroke.disabled]___[cond:_disabled<___>_hover<___>& svg",
-      "background]___[value:surface.hover]___[cond:_hover",
-      "background]___[value:surface.hover]___[cond:_highlighted",
       "background]___[value:surface.active]___[cond:_active",
       "color]___[value:icon.error]___[cond:& svg",
       "color]___[value:text.default]___[cond:_hover",
@@ -328,9 +366,6 @@
       "minWidth]___[value:surface.xxsmall",
       "padding]___[value:3xsmall",
       "boxShadow]___[value:xsmall",
-      "zIndex]___[value:dropdown",
-      "animation]___[value:fade-shift-in 0.25s ease-out]___[cond:_open",
-      "animation]___[value:fade-shift-out 0.25s ease-out]___[cond:_closed",
       "alignItems]___[value:flex-start",
       "gap]___[value:small",
       "background]___[value:surface.infoSubtle",
@@ -359,11 +394,22 @@
       "outlineColor]___[value:surface.default",
       "transitionProperty]___[value:background, border-color, box-shadow",
       "background]___[value:stroke.default]___[cond:_checked",
-      "borderColor]___[value:stroke.default]___[cond:_checked",
       "outline]___[value:2px solid]___[cond:&:has(input:focus-visible)",
       "outlineOffset]___[value:4xsmall]___[cond:&:has(input:focus-visible)",
       "outlineColor]___[value:stroke.default]___[cond:&:has(input:focus-visible)",
       "borderRadius]___[value:xsmall]___[cond:&:has(input:focus-visible)",
+      "outlineOffset]___[value:-1]___[cond:_focusVisible",
+      "background]___[value:surface.selected]___[cond:_selected",
+      "background]___[value:surface.hover]___[cond:_selected<___>_hover",
+      "background]___[value:surface.hover]___[cond:_selected<___>_highlighted",
+      "background]___[value:surface.hover]___[cond:_highlighted<___>_hover",
+      "color]___[value:text.disabled]___[cond:_disabled<___>_highlighted",
+      "background]___[value:surface.disabled]___[cond:_disabled<___>_highlighted",
+      "color]___[value:text.disabled]___[cond:_disabled<___>_selected",
+      "background]___[value:surface.disabled]___[cond:_disabled<___>_selected",
+      "color]___[value:icon.default",
+      "width]___[value:surface.small",
+      "boxShadowColor]___[value:stroke.error]___[cond:_ariaInvalid",
       "animation]___[value:skeleton-pulse",
       "backgroundColor]___[value:surface.disabled",
       "backgroundClip]___[value:padding-box",
@@ -469,7 +515,23 @@
       "paddingBlockStart]___[value:xsmall]___[cond:_horizontal",
       "paddingInlineStart]___[value:xsmall]___[cond:_vertical",
       "boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
-      "padding]___[value:xsmall",
+      "width]___[value:full",
+      "gap]___[value:1",
+      "paddingInlineEnd]___[value:3xsmall",
+      "paddingInlineStart]___[value:xsmall",
+      "cursor]___[value:initial",
+      "outlineColor]___[value:transparent",
+      "backgroundColor]___[value:surface.actionSubtle.selected",
+      "transitionProperty]___[value:background, outline-color, color",
+      "backgroundColor]___[value:surface.actionSubtle.hover]___[cond:_hover",
+      "color]___[value:stroke.hover]___[cond:_hover<___>& svg",
+      "backgroundColor]___[value:surface.actionSubtle.hover]___[cond:_highlighted",
+      "outlineWidth]___[value:3px]___[cond:_highlighted",
+      "outlineOffset]___[value:-1px]___[cond:_highlighted",
+      "outlineColor]___[value:stroke.hover]___[cond:_highlighted",
+      "color]___[value:stroke.hover]___[cond:_highlighted<___>& svg",
+      "paddingBottom]___[value:1",
+      "display]___[value:inline-block]___[cond:& span",
       "textStyle]___[value:body.medium",
       "textStyle]___[value:heading.medium",
       "boxShadow]___[value:medium",

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);
 }
@@ -744,8 +776,24 @@
     white-space: nowrap;
 }
 
-  .p_xsmall {
-    padding: var(--spacing-xsmall);
+  .w_full {
+    width: full;
+}
+
+  .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 {
@@ -920,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;
 }
@@ -928,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 {
@@ -1054,6 +1116,23 @@
     border-width: 1px;
 }
 
+  .ring-color_transparent {
+    outline-color: transparent;
+}
+
+  .bg_surface\.actionSubtle\.selected {
+    background-color: var(--colors-surface-action-subtle-selected);
+}
+
+  .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 {
     --transition-duration: var(--durations-slow);
     transition-duration: var(--durations-slow);
@@ -1125,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;
 }
@@ -1169,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);
 }
@@ -1233,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;
 }
@@ -1253,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;
 }
@@ -1273,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;
 }
@@ -1406,6 +1513,14 @@
     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;
@@ -1447,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);
 }
@@ -1463,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);
 }
@@ -1519,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;
 }
@@ -1593,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;
 }
@@ -1697,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);
 }
@@ -1725,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);
 }
@@ -1773,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);
 }
@@ -1833,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);
 }
@@ -1853,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%);
 }
@@ -1873,6 +2071,10 @@
     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, '.') '. ';
 }
@@ -1957,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);
 }
@@ -2011,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/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"