@ndla/primitives 0.0.17 → 0.0.19

package/dist/panda.buildinfo.json

@@ -9,23 +9,23 @@
       "justifyContent]___[value:space-between",
       "background]___[value:surface.default",
       "cursor]___[value:pointer",
-      "paddingInline]___[value:medium",
-      "paddingBlock]___[value:medium",
-      "boxShadowColor]___[value:stroke.subtle",
-      "boxShadow]___[value:inset 0 0 0 1px var(--shadow-color)",
-      "borderRadius]___[value:xsmall",
       "transitionDuration]___[value:fast",
       "transitionTimingFunction]___[value:default",
       "transitionProperty]___[value:background, border-color, border, border-radius",
-      "width]___[value:100%",
       "transitionProperty]___[value:background, border-color, border, border-radius]___[cond:_closed",
       "cursor]___[value:not-allowed]___[cond:_disabled",
-      "background]___[value:surface..disabled.subtle]___[cond:_disabled",
+      "background]___[value:surface.disabled.subtle]___[cond:_disabled",
       "boxShadowColor]___[value:stroke.disabled]___[cond:_disabled",
       "color]___[value:text.disabled]___[cond:_disabled",
       "background]___[value:surface.disabled.subtle]___[cond:_disabled<___>_hover",
       "boxShadowColor]___[value:stroke.disabled]___[cond:_disabled<___>_hover",
       "color]___[value:text.disabled]___[cond:_disabled<___>_hover",
+      "paddingInline]___[value:medium",
+      "paddingBlock]___[value:medium",
+      "width]___[value:100%",
+      "borderRadius]___[value:xsmall",
+      "boxShadowColor]___[value:stroke.subtle",
+      "boxShadow]___[value:inset 0 0 0 1px var(--shadow-color)",
       "background]___[value:surface.actionSubtle.hover]___[cond:_hover",
       "boxShadowColor]___[value:stroke.hover]___[cond:_hover",
       "backgroundColor]___[value:surface.actionSubtle.active]___[cond:_open",
@@ -43,22 +43,41 @@
       "transitionProperty]___[value:padding-bottom",
       "paddingBlock]___[value:xsmall",
       "paddingInline]___[value:small",
+      "animation]___[value:collapse-in]___[cond:_open",
+      "animation]___[value:collapse-out]___[cond:_closed",
       "borderBottomRadius]___[value:xsmall",
       "borderWidth]___[value:0 1px 1px",
       "borderStyle]___[value:solid",
       "borderColor]___[value:stroke.default",
-      "animation]___[value:collapse-in]___[cond:_open",
-      "animation]___[value:collapse-out]___[cond:_closed",
+      "marginBlock]___[value:small]___[cond:& li",
+      "counterReset]___[value:level1",
+      "counterReset]___[value:level1 var(--start, 0)]___[cond:&[data-count='true']",
+      "marginInline]___[value:small",
+      "counterIncrement]___[value:level1]___[cond:& > li",
+      "content]___[value:counter(level1, decimal) '. ']___[cond:& > li<___>_marker",
+      "marginInlineStart]___[value:xlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])",
+      "counterReset]___[value:level2]___[cond:& > li<___>& > ol:not([data-variant='letters'])",
+      "counterReset]___[value:level2 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
+      "counterIncrement]___[value:level2]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_marker",
+      "marginInlineStart]___[value:xxlarge]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
+      "counterReset]___[value:level3]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])",
+      "counterReset]___[value:level3 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
+      "counterIncrement]___[value:level3]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>_marker",
+      "counterReset]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > ol:not([data-variant='letters'])",
+      "counterReset]___[value:level4 var(--start, 0)]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > ol:not([data-variant='letters'])<___>&[data-count='true']",
+      "counterIncrement]___[value:level4]___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > ol:not([data-variant='letters'])<___>& > li",
+      "content]___[value:counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ']___[cond:& > li<___>& > ol:not([data-variant='letters'])<___>& > li<___>& > ol:not([data-variant='letters'])<___>& > ol:not([data-variant='letters'])<___>& > li<___>_marker",
+      "paddingInlineStart]___[value:small",
+      "content]___[value:counter(level1, upper-alpha) '. ']___[cond:& > li<___>_marker",
+      "content]___[value:counter(level1, lower-alpha) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>_marker",
+      "content]___[value:counter(level1, lower-roman) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>_marker",
       "listStyle]___[value:revert",
       "listStylePosition]___[value:inside",
-      "paddingInlineStart]___[value:small",
-      "marginBlock]___[value:small]___[cond:& li",
-      "content]___[value:counters(list-item, '.') '. ']___[cond:& > li<___>_marker",
-      "content]___[value:counter(list-item, numeric) '. ']___[cond:& ol[data-variant='numbers'] > li<___>_marker",
-      "content]___[value:counter(list-item, upper-alpha) '. ']___[cond:& li<___>_marker",
-      "content]___[value:counter(list-item, lower-alpha) '. ']___[cond:& li<___>& > ol > li<___>_marker",
-      "content]___[value:counter(list-item, lower-roman) '. ']___[cond:& li<___>& > ol > li<___>& li<___>_marker",
+      "paddingInlineStart]___[value:medium",
       "color]___[value:icon.strong]___[cond:& li<___>_marker",
+      "display]___[value:inline]___[cond:& li > *:not(ol, ul, li)",
       "fontWeight]___[value:bold]___[cond:& dt",
       "marginInlineStart]___[value:medium]___[cond:& dd",
       "paddingInline]___[value:xsmall",
@@ -303,7 +322,6 @@
       "left]___[value:auto",
       "marginBlock]___[value:xsmall",
       "paddingInlineEnd]___[value:medium",
-      "paddingInlineStart]___[value:medium",
       "paddingInlineStart]___[value:0",
       "paddingInlineEnd]___[value:0",
       "borderRadius]___[value:small",
@@ -479,7 +497,6 @@
       "textAlign]___[value:right]___[cond:& td, & th<___>&[data-align='right']",
       "flexDirection]___[value:column]___[cond:_horizontal",
       "flexDirection]___[value:row]___[cond:_vertical",
-      "overflow]___[value:auto",
       "marginBlockEnd]___[value:-1px]___[cond:_horizontal",
       "marginInlineEnd]___[value:-1px]___[cond:_vertical",
       "transitionProperty]___[value:color, background, border-color",
@@ -507,6 +524,20 @@
       "paddingBlockStart]___[value:xsmall]___[cond:_horizontal",
       "paddingInlineStart]___[value:xsmall]___[cond:_vertical",
       "boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
+      "outline]___[value:3px solid",
+      "outlineColor]___[value:stroke.default",
+      "outlineOffset]___[value:-3px",
+      "height]___[value:var(--height)]___[cond:_peerFocusVisible",
+      "width]___[value:var(--width)]___[cond:_peerFocusVisible",
+      "borderTopRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_horizontal",
+      "borderRightRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_vertical",
+      "top]___[value:calc(var(--top) + var(--height) - 6px)]___[cond:_horizontal",
+      "top]___[value:var(--top)]___[cond:_horizontal<___>_peerFocusVisible",
+      "height]___[value:3]___[cond:_horizontal",
+      "width]___[value:var(--width)]___[cond:_horizontal",
+      "height]___[value:var(--height)]___[cond:_vertical",
+      "left]___[value:0]___[cond:_vertical",
+      "width]___[value:3]___[cond:_vertical",
       "width]___[value:full",
       "gap]___[value:1",
       "paddingInlineEnd]___[value:3xsmall",
@@ -543,7 +574,9 @@
       "right]___[value:xxsmall",
       "paddingInline]___[value:xxsmall",
       "--arrow-size]___[value:spacing.xxsmall",
-      "--arrow-background]___[value:colors.surface.action"
+      "--arrow-background]___[value:colors.surface.action",
+      "height]___[value:200px",
+      "objectFit]___[value:cover"
     ],
     "recipes": {}
   }

package/dist/styles.css

@@ -109,20 +109,20 @@
     padding-block: var(--spacing-medium);
 }
 
-  .bx-sh-c_stroke\.subtle {
-    --shadow-color: var(--colors-stroke-subtle);
-}
-
-  .bx-sh_inset_0_0_0_1px_var\(--shadow-color\) {
-    box-shadow: inset 0 0 0 1px var(--shadow-color);
+  .w_100\% {
+    width: 100%;
 }
 
   .bdr_xsmall {
     border-radius: var(--radii-xsmall);
 }
 
-  .w_100\% {
-    width: 100%;
+  .bx-sh-c_stroke\.subtle {
+    --shadow-color: var(--colors-stroke-subtle);
+}
+
+  .bx-sh_inset_0_0_0_1px_var\(--shadow-color\) {
+    box-shadow: inset 0 0 0 1px var(--shadow-color);
 }
 
   .c_icon\.strong {
@@ -150,14 +150,26 @@
     border-bottom-right-radius: var(--radii-xsmall);
 }
 
-  .li-s_revert {
-    list-style: revert;
+  .counter-reset_level1 {
+    counter-reset: level1;
+}
+
+  .mx_small {
+    margin-inline: var(--spacing-small);
 }
 
   .ps_small {
     padding-inline-start: var(--spacing-small);
 }
 
+  .li-s_revert {
+    list-style: revert;
+}
+
+  .ps_medium {
+    padding-inline-start: var(--spacing-medium);
+}
+
   .px_xsmall {
     padding-inline: var(--spacing-xsmall);
 }
@@ -520,10 +532,6 @@
     padding-inline-end: var(--spacing-medium);
 }
 
-  .ps_medium {
-    padding-inline-start: var(--spacing-medium);
-}
-
   .ps_0 {
     padding-inline-start: 0;
 }
@@ -748,14 +756,18 @@
     table-layout: fixed;
 }
 
-  .ov_auto {
-    overflow: auto;
-}
-
   .white-space_nowrap {
     white-space: nowrap;
 }
 
+  .ring_3px_solid {
+    outline: 3px solid;
+}
+
+  .ring-o_-3px {
+    outline-offset: -3px;
+}
+
   .w_full {
     width: full;
 }
@@ -832,6 +844,14 @@
     --arrow-background: var(--colors-surface-action);
 }
 
+  .h_200px {
+    height: 200px;
+}
+
+  .obj-f_cover {
+    object-fit: cover;
+}
+
   .flex-d_column {
     flex-direction: column;
 }
@@ -1092,6 +1112,10 @@
     border-width: 1px;
 }
 
+  .ring-c_stroke\.default {
+    outline-color: var(--colors-stroke-default);
+}
+
   .ring-c_transparent {
     outline-color: transparent;
 }
@@ -1131,8 +1155,8 @@
     cursor: not-allowed;
 }
 
-  .disabled\:bg_surface\.\.disabled\.subtle:is(:disabled, [disabled], [data-disabled]) {
-    background: surface..disabled.subtle;
+  .disabled\:bg_surface\.disabled\.subtle:is(:disabled, [disabled], [data-disabled]) {
+    background: var(--colors-surface-disabled-subtle);
 }
 
   .disabled\:bx-sh-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
@@ -1168,6 +1192,18 @@
     margin-block: var(--spacing-small);
 }
 
+  .\[\&\[data-count\=\'true\'\]\]\:counter-reset_level1_var\(--start\,_0\)[data-count='true'] {
+    counter-reset: level1 var(--start, 0);
+}
+
+  .\[\&_\>_li\]\:counter-increment_level1 > li {
+    counter-increment: level1;
+}
+
+  .\[\&_li_\>_\*\:not\(ol\,_ul\,_li\)\]\:d_inline li > *:not(ol, ul, li) {
+    display: inline;
+}
+
   .\[\&_dd\]\:ms_medium dd {
     margin-inline-start: var(--spacing-medium);
 }
@@ -1489,6 +1525,22 @@
     padding-inline-start: var(--spacing-xsmall);
 }
 
+  .horizontal\:h_3[data-orientation=horizontal] {
+    height: var(--sizes-3);
+}
+
+  .horizontal\:w_var\(--width\)[data-orientation=horizontal] {
+    width: var(--width);
+}
+
+  .vertical\:h_var\(--height\)[data-orientation=vertical] {
+    height: var(--height);
+}
+
+  .vertical\:w_3[data-orientation=vertical] {
+    width: var(--sizes-3);
+}
+
   .highlighted\:ring-o_-1px[data-highlighted] {
     outline-offset: -1px;
 }
@@ -1629,6 +1681,14 @@
     border-color: var(--colors-stroke-subtle);
 }
 
+  .horizontal\:top_calc\(var\(--top\)_\+_var\(--height\)_-_6px\)[data-orientation=horizontal] {
+    top: calc(var(--top) + var(--height) - 6px);
+}
+
+  .vertical\:left_0[data-orientation=vertical] {
+    left: 0;
+}
+
   .highlighted\:bg-c_surface\.actionSubtle\.hover[data-highlighted] {
     background-color: var(--colors-surface-action-subtle-hover);
 }
@@ -1743,6 +1803,14 @@
     box-shadow: 0 0 0 3px var(--shadow-color);
 }
 
+  .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);
+}
+
   .focus\:ring-c_stroke\.default:is(:focus, [data-focus]) {
     outline-color: var(--colors-stroke-default);
 }
@@ -1903,6 +1971,14 @@
     color: var(--colors-text-disabled);
 }
 
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:ms_xlarge > li > ol:not([data-variant='letters']) {
+    margin-inline-start: var(--spacing-xlarge);
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level2 > li > ol:not([data-variant='letters']) {
+    counter-reset: level2;
+}
+
   .\[\&_li\]\:marker\:c_icon\.strong li::marker {
     color: var(--colors-icon-strong);
 }
@@ -2047,20 +2123,26 @@
     color: var(--colors-text-subtle);
 }
 
-  .highlighted\:\[\&_svg\]\:c_stroke\.hover[data-highlighted] svg {
-    color: var(--colors-stroke-hover);
+  .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);
 }
 
-  .\[\&_\>_li\]\:marker\:content_counters\(list-item\,_\'\.\'\)_\'\._\' > li::marker {
-    content: counters(list-item, '.') '. ';
+  .highlighted\:\[\&_svg\]\:c_stroke\.hover[data-highlighted] svg {
+    color: var(--colors-stroke-hover);
 }
 
-  .\[\&_ol\[data-variant\=\'numbers\'\]_\>_li\]\:marker\:content_counter\(list-item\,_numeric\)_\'\._\' ol[data-variant='numbers'] > li::marker {
-    content: counter(list-item, numeric) '. ';
+  .\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\._\' > li::marker {
+    content: counter(level1, decimal) '. ';
 }
 
-  .\[\&_li\]\:marker\:content_counter\(list-item\,_upper-alpha\)_\'\._\' li::marker {
-    content: counter(list-item, upper-alpha) '. ';
+  .\[\&_\>_li\]\:marker\:content_counter\(level1\,_upper-alpha\)_\'\._\' > li::marker {
+    content: counter(level1, upper-alpha) '. ';
 }
 
   .disabled\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
@@ -2119,6 +2201,10 @@
     border-right-color: transparent;
 }
 
+  .peer:is(:focus-visible, [data-focus-visible]) ~ .horizontal\:peerFocusVisible\:top_var\(--top\)[data-orientation=horizontal] {
+    top: var(--top);
+}
+
   .focusWithin\:hover\:ring-c_stroke\.default:focus-within:is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-default);
 }
@@ -2147,6 +2233,14 @@
     border-color: var(--colors-stroke-default);
 }
 
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level2_var\(--start\,_0\) > li > ol:not([data-variant='letters'])[data-count='true'] {
+    counter-reset: level2 var(--start, 0);
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level2 > li > ol:not([data-variant='letters']) > li {
+    counter-increment: level2;
+}
+
   .disabled\:checked\:hover\:c_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
     color: var(--colors-text-disabled);
 }
@@ -2163,8 +2257,8 @@
     transform: translateX(120%);
 }
 
-  .\[\&_li\]\:\[\&_\>_ol_\>_li\]\:marker\:content_counter\(list-item\,_lower-alpha\)_\'\._\' li > ol > li::marker {
-    content: counter(list-item, lower-alpha) '. ';
+  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:marker\:content_counter\(level1\,_lower-alpha\)_\'\._\' > li > ol[data-variant='letters'] > li::marker {
+    content: counter(level1, lower-alpha) '. ';
 }
 
   .disabled\:checked\:hover\:bd-c_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
@@ -2183,8 +2277,48 @@
     outline-color: var(--colors-stroke-error);
 }
 
-  .\[\&_li\]\:\[\&_\>_ol_\>_li\]\:\[\&_li\]\:marker\:content_counter\(list-item\,_lower-roman\)_\'\._\' li > ol > li li::marker {
-    content: counter(list-item, lower-roman) '. ';
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:ms_xxlarge > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) {
+    margin-inline-start: var(--spacing-xxlarge);
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level3 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) {
+    counter-reset: level3;
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li::marker {
+    content: counter(level1, decimal) '.' counter(level2, decimal) '. ';
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:\[\&_\>_ol\[data-variant\=\'letters\'\]_\>_li\]\:marker\:content_counter\(level1\,_lower-roman\)_\'\._\' > li > ol[data-variant='letters'] > li > ol[data-variant='letters'] > li::marker {
+    content: counter(level1, lower-roman) '. ';
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level3_var\(--start\,_0\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters'])[data-count='true'] {
+    counter-reset: level3 var(--start, 0);
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level3 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li {
+    counter-increment: level3;
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:counter-reset_level4 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > ol:not([data-variant='letters']) {
+    counter-reset: level4;
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&\[data-count\=\'true\'\]\]\:counter-reset_level4_var\(--start\,_0\) > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > ol:not([data-variant='letters'])[data-count='true'] {
+    counter-reset: level4 var(--start, 0);
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:counter-increment_level4 > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > ol:not([data-variant='letters']) > li {
+    counter-increment: level4;
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\.\'_counter\(level3\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > li::marker {
+    content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. ';
+}
+
+  .\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_ol\:not\(\[data-variant\=\'letters\'\]\)\]\:\[\&_\>_li\]\:marker\:content_counter\(level1\,_decimal\)_\'\.\'_counter\(level2\,_decimal\)_\'\.\'_counter\(level3\,_decimal\)_\'\.\'_counter\(level4\,_decimal\)_\'\._\' > li > ol:not([data-variant='letters']) > li > ol:not([data-variant='letters']) > ol:not([data-variant='letters']) > li::marker {
+    content: counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. ';
 }
 
   @media screen and (min-width: 37.5625rem) {

package/es/Accordion.js

@@ -23,21 +23,15 @@ const accordionRecipe = sva({
       justifyContent: "space-between",
       background: "surface.default",
       cursor: "pointer",
-      paddingInline: "medium",
-      paddingBlock: "medium",
-      boxShadowColor: "stroke.subtle",
-      boxShadow: "inset 0 0 0 1px var(--shadow-color)",
-      borderRadius: "xsmall",
       transitionDuration: "fast",
       transitionTimingFunction: "default",
       transitionProperty: "background, border-color, border, border-radius",
-      width: "100%",
       _closed: {
         transitionProperty: "background, border-color, border, border-radius"
       },
       _disabled: {
         cursor: "not-allowed",
-        background: "surface..disabled.subtle",
+        background: "surface.disabled.subtle",
         boxShadowColor: "stroke.disabled",
         color: "text.disabled",
         _hover: {
@@ -45,20 +39,6 @@ const accordionRecipe = sva({
           boxShadowColor: "stroke.disabled",
           color: "text.disabled"
         }
-      },
-      _hover: {
-        background: "surface.actionSubtle.hover",
-        boxShadowColor: "stroke.hover"
-      },
-      _open: {
-        backgroundColor: "surface.actionSubtle.active",
-        boxShadowColor: "stroke.default",
-        borderBottomRadius: "sharp"
-      },
-      _focusVisible: {
-        outline: "none",
-        boxShadowColor: "stroke.default",
-        boxShadow: "inset 0 0 0 2px var(--shadow-color)"
       }
     },
     itemIndicator: {
@@ -73,21 +53,59 @@ const accordionRecipe = sva({
     },
     itemContent: {
       overflow: "hidden",
+      // TODO: Is this needed?
       transitionProperty: "padding-bottom",
       transitionDuration: "normal",
       transitionTimingFunction: "default",
       paddingBlock: "xsmall",
       paddingInline: "small",
-      borderBottomRadius: "xsmall",
-      borderWidth: "0 1px 1px",
-      borderStyle: "solid",
-      borderColor: "stroke.default",
       _open: {
         animation: "collapse-in"
       },
       _closed: {
         animation: "collapse-out"
       }
+    },
+    item: {
+      width: "100%"
+    }
+  },
+  defaultVariants: {
+    variant: "bordered"
+  },
+  variants: {
+    variant: {
+      clean: {},
+      bordered: {
+        itemTrigger: {
+          paddingInline: "medium",
+          paddingBlock: "medium",
+          width: "100%",
+          borderRadius: "xsmall",
+          boxShadowColor: "stroke.subtle",
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+          _hover: {
+            background: "surface.actionSubtle.hover",
+            boxShadowColor: "stroke.hover"
+          },
+          _open: {
+            backgroundColor: "surface.actionSubtle.active",
+            boxShadowColor: "stroke.default",
+            borderBottomRadius: "sharp"
+          },
+          _focusVisible: {
+            outline: "none",
+            boxShadowColor: "stroke.default",
+            boxShadow: "inset 0 0 0 2px var(--shadow-color)"
+          }
+        },
+        itemContent: {
+          borderBottomRadius: "xsmall",
+          borderWidth: "0 1px 1px",
+          borderStyle: "solid",
+          borderColor: "stroke.default"
+        }
+      }
     }
   }
 });
@@ -95,8 +113,18 @@ const {
   withProvider,
   withContext
 } = createStyleContext(accordionRecipe);
-export const AccordionRoot = withProvider(Accordion.Root, "root");
-export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent");
-export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator");
-export const AccordionItem = withContext(Accordion.Item, "item");
-export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger");
+export const AccordionRoot = withProvider(Accordion.Root, "root", {
+  baseComponent: true
+});
+export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent", {
+  baseComponent: true
+});
+export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator", {
+  baseComponent: true
+});
+export const AccordionItem = withContext(Accordion.Item, "item", {
+  baseComponent: true
+});
+export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger", {
+  baseComponent: true
+});