@ndla/primitives 0.0.3 → 0.0.4

package/dist/panda.buildinfo.json

@@ -136,23 +136,65 @@
       "outlineOffset]___[value:4xsmall]___[cond:_focus",
       "outlineColor]___[value:stroke.default]___[cond:_focus",
       "borderRadius]___[value:xsmall]___[cond:_focus",
+      "color]___[value:text.default",
+      "gap]___[value:4xsmall",
+      "background]___[value:surface.actionSubtle",
+      "outlineColor]___[value:stroke.subtle",
+      "paddingBlock]___[value:4xsmall",
+      "borderRadius]___[value:large",
+      "minHeight]___[value:large",
+      "transitionProperty]___[value:border-color, background, box-shadow, color",
+      "borderColor]___[value:stroke.disabled]___[cond:_disabled",
+      "borderColor]___[value:stroke.disabled]___[cond:_disabled<___>_hover",
+      "color]___[value:text.disabled]___[cond:_disabled<___>_checked",
+      "borderColor]___[value:stroke.disabled]___[cond:_disabled<___>_checked",
+      "background]___[value:surface.disabled]___[cond:_disabled<___>_checked",
+      "color]___[value:text.disabled]___[cond:_disabled<___>_checked<___>_hover",
+      "borderColor]___[value:stroke.disabled]___[cond:_disabled<___>_checked<___>_hover",
+      "background]___[value:surface.disabled]___[cond:_disabled<___>_checked<___>_hover",
+      "borderColor]___[value:stroke.hover]___[cond:_hover",
+      "outlineColor]___[value:stroke.hover]___[cond:_hover",
+      "backgroundColor]___[value:surface.dangerSubtle]___[cond:_hover<___>_invalid",
+      "color]___[value:text.onAction]___[cond:_checked",
+      "background]___[value:surface.actionSubtle.selected]___[cond:_checked",
+      "borderColor]___[value:surface.actionSubtle.selected]___[cond:_checked",
+      "outlineColor]___[value:icon.onAction]___[cond:_checked",
+      "outlineOffset]___[value:-4px]___[cond:_checked<___>_focus",
+      "outlineOffset]___[value:-2px]___[cond:_checked<___>_hover",
+      "background]___[value:surface.actionSubtle.hover]___[cond:_checked<___>_hover",
+      "color]___[value:text.default]___[cond:_checked<___>_hover",
+      "borderColor]___[value:stroke.hover]___[cond:_checked<___>_hover",
+      "outlineColor]___[value:stroke.hover]___[cond:_checked<___>_hover",
+      "borderColor]___[value:stroke.error]___[cond:_invalid",
+      "outlineColor]___[value:stroke.error]___[cond:_invalid",
+      "background]___[value:surface.dangerSubtle]___[cond:_invalid",
+      "outlineOffset]___[value:-2px]___[cond:_invalid",
+      "color]___[value:text.default]___[cond:_invalid<___>_checked",
+      "borderColor]___[value:stroke.error]___[cond:_invalid<___>_checked",
+      "outlineColor]___[value:stroke.error]___[cond:_invalid<___>_checked",
+      "background]___[value:surface.dangerSubtle]___[cond:_invalid<___>_checked",
+      "outlineOffset]___[value:-2px]___[cond:_invalid<___>_checked",
+      "borderColor]___[value:stroke.hover]___[cond:_invalid<___>_checked<___>_hover",
+      "outlineColor]___[value:stroke.hover]___[cond:_invalid<___>_checked<___>_hover",
+      "outlineStyle]___[value:solid]___[cond:_focus",
+      "outlineWidth]___[value:2px]___[cond:_focus",
+      "outlineOffset]___[value:-2px]___[cond:_focus",
       "width]___[value:medium",
       "height]___[value:medium",
       "border]___[value:2px solid",
-      "transitionProperty]___[value:border-color, background, box-shadow, color",
       "boxShadow]___[value:0 0 0 4px var(--shadow-color)]___[cond:_hover",
       "boxShadowColor]___[value:surface.actionSubtle.hover.strong]___[cond:_hover",
-      "color]___[value:icon.onAction]___[cond:_checked",
       "backgroundColor]___[value:surface.action]___[cond:_checked",
       "borderColor]___[value:surface.action]___[cond:_checked",
-      "borderColor]___[value:stroke.disabled]___[cond:_disabled",
-      "borderColor]___[value:stroke.disabled]___[cond:_disabled<___>_hover",
+      "color]___[value:icon.onAction]___[cond:_checked",
       "boxShadow]___[value:none]___[cond:_disabled<___>_hover",
-      "background]___[value:surface.disabled]___[cond:_disabled<___>_checked",
-      "borderColor]___[value:stroke.error]___[cond:_invalid",
       "color]___[value:stroke.error]___[cond:_invalid<___>_checked",
-      "borderColor]___[value:stroke.error]___[cond:_invalid<___>_checked",
       "backgroundColor]___[value:surface.default]___[cond:_invalid<___>_checked",
+      "display]___[value:none",
+      "display]___[value:flex]___[cond:_checked",
+      "color]___[value:stroke.hover]___[cond:_checked<___>_hover",
+      "color]___[value:stroke.disabled]___[cond:_disabled",
+      "color]___[value:stroke.disabled]___[cond:_disabled<___>_hover",
       "position]___[value:fixed",
       "height]___[value:100vh",
       "width]___[value:100vw",
@@ -238,7 +280,6 @@
       "width]___[value:large",
       "height]___[value:large",
       "outline]___[value:1px solid",
-      "outlineColor]___[value:stroke.subtle",
       "background]___[value:background.default",
       "minHeight]___[value:xxlarge",
       "paddingBlock]___[value:0",
@@ -246,14 +287,12 @@
       "outlineColor]___[value:stroke.error]___[cond:_ariaInvalid<___>_hover",
       "outlineColor]___[value:stroke.error]___[cond:_ariaInvalid<___>_focusWithin",
       "outlineColor]___[value:stroke.error]___[cond:_ariaInvalid<___>_focusWithin<___>_hover",
-      "outlineColor]___[value:stroke.hover]___[cond:_hover",
       "outlineWidth]___[value:2px]___[cond:_focusWithin",
       "outlineOffset]___[value:-1px]___[cond:_focusWithin",
       "outlineColor]___[value:stroke.default]___[cond:_focusWithin",
       "outlineColor]___[value:stroke.default]___[cond:_focusWithin<___>_hover",
       "outlineColor]___[value:stroke.subtle]___[cond:&:disabled, &:has(:disabled)",
       "outlineColor]___[value:stroke.subtle]___[cond:&:disabled, &:has(:disabled)<___>_hover",
-      "color]___[value:text.default",
       "background]___[value:none",
       "border]___[value:0",
       "padding]___[value:xxsmall",
@@ -267,7 +306,6 @@
       "border]___[value:none",
       "padding]___[value:0",
       "margin]___[value:0",
-      "paddingBlock]___[value:4xsmall",
       "transitionProperty]___[value:background, color",
       "textDecoration]___[value:underline]___[cond:_hover",
       "textDecoration]___[value:underline]___[cond:_highlighted",
@@ -332,7 +370,6 @@
       "cursor]___[value:default",
       "pointerEvents]___[value:none",
       "visibility]___[value:hidden]___[cond:&::before, &::after, *",
-      "gap]___[value:4xsmall",
       "background]___[value:surface.disabled",
       "flex]___[value:1",
       "width]___[value:4xsmall]___[cond:_vertical",
@@ -412,7 +449,6 @@
       "whiteSpace]___[value:nowrap",
       "color]___[value:text.strong]___[cond:_selected",
       "color]___[value:text.subtle]___[cond:_disabled<___>_hover",
-      "borderColor]___[value:stroke.hover]___[cond:_hover",
       "borderColor]___[value:stroke.default]___[cond:_hover<___>_focusVisible",
       "borderBottom]___[value:1px solid]___[cond:_horizontal",
       "borderColor]___[value:stroke.default]___[cond:_disabled",
@@ -435,19 +471,6 @@
       "paddingInlineStart]___[value:xsmall]___[cond:_vertical",
       "boxShadow]___[value:0 0 0 3px var(--shadow-color)]___[cond:_focusVisible",
       "padding]___[value:xsmall",
-      "outline]___[value:4px solid",
-      "outlineColor]___[value:stroke.default",
-      "outlineOffset]___[value:-4px",
-      "height]___[value:var(--height)]___[cond:_peerFocusVisible",
-      "width]___[value:var(--width)]___[cond:_peerFocusVisible",
-      "borderTopRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_horizontal",
-      "borderRightRadius]___[value:xsmall]___[cond:_peerFocusVisible<___>_vertical",
-      "bottom]___[value:0]___[cond:_horizontal",
-      "height]___[value:2]___[cond:_horizontal",
-      "width]___[value:var(--width)]___[cond:_horizontal",
-      "height]___[value:var(--height)]___[cond:_vertical",
-      "left]___[value:0]___[cond:_vertical",
-      "width]___[value:2]___[cond:_vertical",
       "textStyle]___[value:body.medium",
       "textStyle]___[value:heading.medium",
       "boxShadow]___[value:medium",

package/dist/styles.css

@@ -276,6 +276,30 @@
     gap: var(--spacing-xxsmall);
 }
 
+  .text_text\.default {
+    color: var(--colors-text-default);
+}
+
+  .gap_4xsmall {
+    gap: var(--spacing-4xsmall);
+}
+
+  .bg_surface\.actionSubtle {
+    background: var(--colors-surface-action-subtle);
+}
+
+  .py_4xsmall {
+    padding-block: var(--spacing-4xsmall);
+}
+
+  .rounded_large {
+    border-radius: var(--radii-large);
+}
+
+  .min-h_large {
+    min-height: var(--sizes-large);
+}
+
   .w_medium {
     width: var(--sizes-medium);
 }
@@ -288,6 +312,10 @@
     border: 2px solid;
 }
 
+  .d_none {
+    display: none;
+}
+
   .pos_fixed {
     position: fixed;
 }
@@ -524,10 +552,6 @@
     padding-block: 0;
 }
 
-  .text_text\.default {
-    color: var(--colors-text-default);
-}
-
   .bg_none {
     background: none;
 }
@@ -564,10 +588,6 @@
     margin: 0;
 }
 
-  .py_4xsmall {
-    padding-block: var(--spacing-4xsmall);
-}
-
   .min-w_surface\.xxsmall {
     min-width: var(--sizes-surface-xxsmall);
 }
@@ -648,10 +668,6 @@
     pointer-events: none;
 }
 
-  .gap_4xsmall {
-    gap: var(--spacing-4xsmall);
-}
-
   .bg_surface\.disabled {
     background: var(--colors-surface-disabled);
 }
@@ -736,14 +752,6 @@
     padding: var(--spacing-xsmall);
 }
 
-  .ring_4px_solid {
-    outline: 4px solid;
-}
-
-  .ring-offset_-4px {
-    outline-offset: -4px;
-}
-
   .shadow_medium {
     box-shadow: var(--shadows-medium);
 }
@@ -907,6 +915,10 @@
     line-height: 1;
 }
 
+  .ring-color_stroke\.subtle {
+    outline-color: var(--colors-stroke-subtle);
+}
+
   .transition-prop_border-color\,_background\,_box-shadow\,_color {
     --transition-prop: border-color, background, box-shadow, color;
     transition-property: border-color, background, box-shadow, color;
@@ -940,10 +952,6 @@
     flex-shrink: 0;
 }
 
-  .ring-color_stroke\.subtle {
-    outline-color: var(--colors-stroke-subtle);
-}
-
   .overflow-y_hidden {
     overflow-y: hidden;
 }
@@ -1050,10 +1058,6 @@
     border-width: 1px;
 }
 
-  .ring-color_stroke\.default {
-    outline-color: var(--colors-stroke-default);
-}
-
   .duration_slow {
     --transition-duration: var(--durations-slow);
     transition-duration: var(--durations-slow);
@@ -1141,10 +1145,34 @@
     height: var(--sizes-medium);
 }
 
+  .checked\:text_text\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    color: var(--colors-text-on-action);
+}
+
+  .checked\:bg_surface\.actionSubtle\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    background: var(--colors-surface-action-subtle-selected);
+}
+
+  .invalid\:bg_surface\.dangerSubtle:is(:invalid, [data-invalid]) {
+    background: var(--colors-surface-danger-subtle);
+}
+
+  .invalid\:ring-offset_-2px:is(:invalid, [data-invalid]) {
+    outline-offset: -2px;
+}
+
   .checked\:text_icon\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     color: var(--colors-icon-on-action);
 }
 
+  .checked\:d_flex:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    display: flex;
+}
+
+  .disabled\:text_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
+    color: var(--colors-stroke-disabled);
+}
+
   .open\:animation_backdrop-in:is([open], [data-open], [data-state="open"]) {
     animation: var(--animations-backdrop-in);
 }
@@ -1382,22 +1410,6 @@
     padding-inline-start: var(--spacing-xsmall);
 }
 
-  .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);
-}
-
   .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;
@@ -1411,22 +1423,34 @@
     font-weight: var(--font-weights-bold);
 }
 
-  .checked\:bg_surface\.action:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
-    background-color: var(--colors-surface-action);
+  .disabled\:border_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
+    border-color: var(--colors-stroke-disabled);
 }
 
-  .checked\:border_surface\.action:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
-    border-color: var(--colors-surface-action);
+  .checked\:border_surface\.actionSubtle\.selected:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    border-color: var(--colors-surface-action-subtle-selected);
 }
 
-  .disabled\:border_stroke\.disabled:is(:disabled, [disabled], [data-disabled]) {
-    border-color: var(--colors-stroke-disabled);
+  .checked\:ring-color_icon\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    outline-color: var(--colors-icon-on-action);
 }
 
   .invalid\:border_stroke\.error:is(:invalid, [data-invalid]) {
     border-color: var(--colors-stroke-error);
 }
 
+  .invalid\:ring-color_stroke\.error:is(:invalid, [data-invalid]) {
+    outline-color: var(--colors-stroke-error);
+}
+
+  .checked\:bg_surface\.action:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    background-color: var(--colors-surface-action);
+}
+
+  .checked\:border_surface\.action:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    border-color: var(--colors-surface-action);
+}
+
   .ariaInvalid\:ring-color_stroke\.error:has([aria-invalid='true']),.ariaInvalid\:ring-color_stroke\.error[aria-invalid='true'] {
     outline-color: var(--colors-stroke-error);
 }
@@ -1499,14 +1523,6 @@
     border-color: var(--colors-stroke-subtle);
 }
 
-  .horizontal\:bottom_0[data-orientation=horizontal] {
-    bottom: 0;
-}
-
-  .vertical\:left_0[data-orientation=vertical] {
-    left: 0;
-}
-
   .focusWithin\:ring-offset_-1px:focus-within {
     outline-offset: -1px;
 }
@@ -1560,6 +1576,10 @@
     border-radius: var(--radii-xsmall);
 }
 
+  .focus\:ring-offset_-2px:is(:focus, [data-focus]) {
+    outline-offset: -2px;
+}
+
   .focus\:appearance_none:is(:focus, [data-focus]) {
     appearance: none;
     -webkit-appearance: none;
@@ -1601,16 +1621,16 @@
     box-shadow: 0 0 0 3px var(--shadow-color);
 }
 
-  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:h_var\(--height\) {
-    height: var(--height);
+  .focus\:ring-color_stroke\.default:is(:focus, [data-focus]) {
+    outline-color: var(--colors-stroke-default);
 }
 
-  .peer:is(:focus-visible, [data-focus-visible]) ~ .peerFocusVisible\:w_var\(--width\) {
-    width: var(--width);
+  .focus\:outline-style_solid:is(:focus, [data-focus]) {
+    outline-style: solid;
 }
 
-  .focus\:ring-color_stroke\.default:is(:focus, [data-focus]) {
-    outline-color: var(--colors-stroke-default);
+  .focus\:ring-width_2px:is(:focus, [data-focus]) {
+    outline-width: 2px;
 }
 
   .\[\&\:has\(input\:focus-visible\)\]\:ring-color_stroke\.default:has(input:focus-visible) {
@@ -1701,14 +1721,14 @@
     transform: translateX(20%);
 }
 
-  .hover\:ring-color_stroke\.hover:is(:hover, [data-hover]) {
-    outline-color: var(--colors-stroke-hover);
-}
-
   .hover\:border_stroke\.hover:is(:hover, [data-hover]) {
     border-color: var(--colors-stroke-hover);
 }
 
+  .hover\:ring-color_stroke\.hover:is(:hover, [data-hover]) {
+    outline-color: var(--colors-stroke-hover);
+}
+
   .active\:text_text\.onAction:is(:active, [data-active]) {
     color: var(--colors-text-on-action);
 }
@@ -1765,18 +1785,58 @@
     background: var(--colors-surface-disabled);
 }
 
-  .disabled\:hover\:shadow_none:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
-    box-shadow: none;
+  .disabled\:checked\:text_text\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    color: var(--colors-text-disabled);
 }
 
   .disabled\:checked\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     background: var(--colors-surface-disabled);
 }
 
+  .checked\:focus\:ring-offset_-4px:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:focus, [data-focus]) {
+    outline-offset: -4px;
+}
+
+  .checked\:hover\:ring-offset_-2px:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+    outline-offset: -2px;
+}
+
+  .checked\:hover\:bg_surface\.actionSubtle\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+    background: var(--colors-surface-action-subtle-hover);
+}
+
+  .checked\:hover\:text_text\.default:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+    color: var(--colors-text-default);
+}
+
+  .invalid\:checked\:text_text\.default:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    color: var(--colors-text-default);
+}
+
+  .invalid\:checked\:bg_surface\.dangerSubtle:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    background: var(--colors-surface-danger-subtle);
+}
+
+  .invalid\:checked\:ring-offset_-2px:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    outline-offset: -2px;
+}
+
+  .disabled\:hover\:shadow_none:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    box-shadow: none;
+}
+
   .invalid\:checked\:text_stroke\.error:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     color: var(--colors-stroke-error);
 }
 
+  .checked\:hover\:text_stroke\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+    color: var(--colors-stroke-hover);
+}
+
+  .disabled\:hover\:text_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) {
+    color: var(--colors-stroke-disabled);
+}
+
   .open\:\[\&_summary\]\:mb_-xxsmall:is([open], [data-open], [data-state="open"]) summary {
     margin-block-end: calc(var(--spacing-xxsmall) * -1);
 }
@@ -1817,16 +1877,6 @@
     color: var(--colors-text-subtle);
 }
 
-  .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);
-}
-
   .\[\&_\>_li\]\:marker\:content_counters\(list-item\,_\'\.\'\)_\'\._\' > li::marker {
     content: counters(list-item, '.') '. ';
 }
@@ -1843,10 +1893,26 @@
     border-color: var(--colors-stroke-disabled);
 }
 
+  .disabled\:checked\:border_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    border-color: var(--colors-stroke-disabled);
+}
+
+  .checked\:hover\:border_stroke\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+    border-color: var(--colors-stroke-hover);
+}
+
+  .checked\:hover\:ring-color_stroke\.hover:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+    outline-color: var(--colors-stroke-hover);
+}
+
   .invalid\:checked\:border_stroke\.error:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     border-color: var(--colors-stroke-error);
 }
 
+  .invalid\:checked\:ring-color_stroke\.error:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
+    outline-color: var(--colors-stroke-error);
+}
+
   .invalid\:checked\:bg_surface\.default:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     background-color: var(--colors-surface-default);
 }
@@ -1895,10 +1961,22 @@
     transform: translateX(0);
 }
 
+  .hover\:invalid\:bg_surface\.dangerSubtle:is(:hover, [data-hover]):is(:invalid, [data-invalid]) {
+    background-color: var(--colors-surface-danger-subtle);
+}
+
   .hover\:focusVisible\:border_stroke\.default:is(:hover, [data-hover]):is(:focus-visible, [data-focus-visible]) {
     border-color: var(--colors-stroke-default);
 }
 
+  .disabled\:checked\:hover\:text_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);
+}
+
+  .disabled\:checked\:hover\:bg_surface\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+    background: var(--colors-surface-disabled);
+}
+
   .disabled\:hover\:\[\&_svg\]\:text_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:hover, [data-hover]) svg {
     color: var(--colors-stroke-disabled);
 }
@@ -1911,6 +1989,18 @@
     content: counter(list-item, lower-alpha) '. ';
 }
 
+  .disabled\:checked\:hover\:border_stroke\.disabled:is(:disabled, [disabled], [data-disabled]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+    border-color: var(--colors-stroke-disabled);
+}
+
+  .invalid\:checked\:hover\:border_stroke\.hover:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+    border-color: var(--colors-stroke-hover);
+}
+
+  .invalid\:checked\:hover\:ring-color_stroke\.hover:is(:invalid, [data-invalid]):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
+    outline-color: var(--colors-stroke-hover);
+}
+
   .ariaInvalid\:focusWithin\:hover\:ring-color_stroke\.error:has([aria-invalid='true']):focus-within:is(:hover, [data-hover]),.ariaInvalid\:focusWithin\:hover\:ring-color_stroke\.error[aria-invalid='true']:focus-within:is(:hover, [data-hover]) {
     outline-color: var(--colors-stroke-error);
 }

package/es/BlockQuote.js

@@ -17,8 +17,8 @@ const blockQuoteRecipe = cva({
   variants: {
     variant: {
       neutral: {
-        borderColor: "stroke.subtle"
-        // TODO: Figure out if this should have a background color.
+        borderColor: "stroke.subtle",
+        background: "surface.default"
       },
       brand1: {
         background: "surface.brand.1.subtle",