@khanacademy/wonder-blocks-cell 6.2.12 → 6.2.14

package/.turbo/turbo-build$colon$css.log

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-cell@6.2.12 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell
+> @khanacademy/wonder-blocks-cell@6.2.14 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell
 > pnpm exec wonder-blocks-tokens .
 
 CSS variables generated successfully in: /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell/dist/css

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # @khanacademy/wonder-blocks-cell
 
+## 6.2.14
+
+### Patch Changes
+
+- Updated dependencies [66bae92]
+    - @khanacademy/wonder-blocks-styles@0.4.0
+    - @khanacademy/wonder-blocks-clickable@8.3.1
+
+## 6.2.13
+
+### Patch Changes
+
+- 8ac496e: `Clickable` and `Link` now guarantee a minimum 24x24 pointer target, satisfying WCAG 2.5.8 (Target Size, Minimum). The hit area is expanded with a transparent `::after` pseudo-element rather than by growing the element, so **visual layout is unchanged**.
+
+    The new shared style is exported as `minTargetSizeStyles` from `@khanacademy/wonder-blocks-styles`, alongside `focusStyles` and `actionStyles`, for components that compose their own style arrays.
+
+    Both components accept a new `disableMinTargetSize` prop (defaults to `false`) to opt out. Opt out where the expanded hit area would overlap an adjacent target, where a `Clickable` wraps its own interactive elements that the hit area would otherwise cover, or where the element already draws its own `::after`.
+
+    That last case matters if you pass a `style` that defines `:after` or `::after`: they are the same pseudo-element, so your rule and the hit area cascade together at equal specificity (both `!important`) and merge per-property by source order, breaking both. `Cell` hits exactly this — it draws its horizontal rule with `:after` on the `Clickable` element — so `Cell` (and `DetailCell`, `OptionItem`, `ActionItem`, which all render through it) sets `disableMinTargetSize` internally. Those are all at least 44px tall already, so no target-size guarantee is lost.
+
+    Notes:
+
+    - `Link` skips this for `inline` links regardless of the prop. WCAG 2.5.8 exempts targets whose size is constrained by the line-height of surrounding text, and expanding an inline link would steal clicks from adjacent lines.
+    - Because the hit area extends beyond the element's visual box, small controls placed closer than 24px apart will have overlapping hit areas, and the later-painted one wins. Either space them at least 24px apart (which satisfies WCAG 2.5.8's own spacing exception) or set `disableMinTargetSize`.
+    - Both components now set `position: relative` when the hit area is applied, which makes them a containing block for any absolutely-positioned descendants that previously resolved against an ancestor.
+    - Like the other `wonder-blocks-styles` exports, `minTargetSizeStyles.minTargetSize` is a plain object rather than an Aphrodite stylesheet, so it can be spread into a style object. Two consequences for a `style` you pass to `Clickable` or `Link`. A `style` built with `StyleSheet.create` stays its own class and merges with the hit area per-property, but is now applied _before_ it — so it can add to the `::after` (a shadow, say) yet no longer override `position: relative`. A plain-object `style` is instead merged into the same class, so a `::after` of your own **replaces** the hit area wholesale rather than merging with it. In either case, compose rather than collide by spreading the hit area into your own rule:
+
+        ```tsx
+        <Clickable
+            style={{
+                "::after": {
+                    ...minTargetSizeStyles.minTargetSize["::after"],
+                    boxShadow: boxShadow.mid,
+                },
+            }}
+        >
+        ```
+
+    - If your Jest setup inlines Aphrodite styles (`SNAPSHOT_INLINE_APHRODITE`, as Wonder Blocks' own config does), nested selectors are not applied on that path, so the `::after` hit area will not appear in snapshots.
+
+- Updated dependencies [8ac496e]
+    - @khanacademy/wonder-blocks-clickable@8.3.0
+    - @khanacademy/wonder-blocks-styles@0.3.0
+
 ## 6.2.12
 
 ### Patch Changes

package/dist/es/index.js

@@ -13,7 +13,7 @@ var theme = mapValuesToCssVars(themeDefault,"--wb-c-cell-");
 
 const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",insetBlockEnd:0,insetInlineEnd:0,height:theme.rule.sizing.height,boxShadow:theme.rule.shadow}},horizontalRuleInset:{":after":{width:`calc(100% - ${theme.root.layout.padding.inline.default})`}}});
 
-const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxs(Fragment,{children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsx(Clickable,{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsx(CellInner,{...props})})};const styles$1=StyleSheet.create({wrapper:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.neutral.strong,minBlockSize:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",width:"100%",display:"flex",flex:1,flexDirection:"row",gap:theme.root.layout.gap.default,paddingBlock:theme.root.layout.padding.block.default,paddingInline:theme.root.layout.padding.inline.default},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minInlineSize:"auto",alignItems:"center",alignSelf:"center"},accessoryLeft:{color:theme.accessoryLeft.color.default.foreground},accessoryRight:{color:theme.accessoryRight.color.default.foreground},clickable:{":hover":{background:semanticColor.core.background.instructive.subtle},":active":{background:semanticColor.core.background.instructive.subtle,borderRadius:theme.root.border.radius.press},":focus-visible":{borderRadius:theme.root.border.radius.focus,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${theme.root.border.width.default} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`,overflow:"hidden",position:"relative",[":after"]:{content:"unset"}},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.focusPress},[":active[aria-disabled=false]:not([aria-current=true])"]:{position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.default,backgroundColor:theme.root.color.press.border}}},active:{background:semanticColor.core.background.instructive.subtle,color:theme.root.color.selected.foreground,cursor:"default",position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:semanticColor.core.foreground.instructive.default},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
+const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxs(Fragment,{children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsx(Clickable,{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,disableMinTargetSize:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsx(CellInner,{...props})})};const styles$1=StyleSheet.create({wrapper:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.neutral.strong,minBlockSize:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",width:"100%",display:"flex",flex:1,flexDirection:"row",gap:theme.root.layout.gap.default,paddingBlock:theme.root.layout.padding.block.default,paddingInline:theme.root.layout.padding.inline.default},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minInlineSize:"auto",alignItems:"center",alignSelf:"center"},accessoryLeft:{color:theme.accessoryLeft.color.default.foreground},accessoryRight:{color:theme.accessoryRight.color.default.foreground},clickable:{":hover":{background:semanticColor.core.background.instructive.subtle},":active":{background:semanticColor.core.background.instructive.subtle,borderRadius:theme.root.border.radius.press},":focus-visible":{borderRadius:theme.root.border.radius.focus,outline:focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${theme.root.border.width.default} * -1)`,boxShadow:`inset 0 0 0 calc(${border.width.medium}*2) ${semanticColor.focus.inner}`,overflow:"hidden",position:"relative",[":after"]:{content:"unset"}},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.focusPress},[":active[aria-disabled=false]:not([aria-current=true])"]:{position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.default,backgroundColor:theme.root.color.press.border}}},active:{background:semanticColor.core.background.instructive.subtle,color:theme.root.color.selected.foreground,cursor:"default",position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:semanticColor.core.foreground.instructive.default},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
 
 const CompactCell=function(props){const{title,...coreProps}=props;return jsx(CellCore,{...coreProps,children:typeof title==="string"?jsx(BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title})};
 

package/dist/index.js

@@ -21,7 +21,7 @@ var theme = wonderBlocksTokens.mapValuesToCssVars(themeDefault,"--wb-c-cell-");
 
 const getHorizontalRuleStyles=horizontalRule=>{switch(horizontalRule){case"inset":return [styles$2.horizontalRule,styles$2.horizontalRuleInset];case"full-width":return styles$2.horizontalRule;case"none":return {}}};const styles$2=aphrodite.StyleSheet.create({horizontalRule:{position:"relative",":after":{width:"100%",content:"''",position:"absolute",insetBlockEnd:0,insetInlineEnd:0,height:theme.rule.sizing.height,boxShadow:theme.rule.shadow}},horizontalRuleInset:{":after":{width:`calc(100% - ${theme.root.layout.padding.inline.default})`}}});
 
-const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsxRuntime.jsx(Clickable__default["default"],{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsxRuntime.jsx(CellInner,{...props})})};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,minBlockSize:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",width:"100%",display:"flex",flex:1,flexDirection:"row",gap:theme.root.layout.gap.default,paddingBlock:theme.root.layout.padding.block.default,paddingInline:theme.root.layout.padding.inline.default},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minInlineSize:"auto",alignItems:"center",alignSelf:"center"},accessoryLeft:{color:theme.accessoryLeft.color.default.foreground},accessoryRight:{color:theme.accessoryRight.color.default.foreground},clickable:{":hover":{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle},":active":{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle,borderRadius:theme.root.border.radius.press},":focus-visible":{borderRadius:theme.root.border.radius.focus,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${theme.root.border.width.default} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`,overflow:"hidden",position:"relative",[":after"]:{content:"unset"}},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.focusPress},[":active[aria-disabled=false]:not([aria-current=true])"]:{position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.default,backgroundColor:theme.root.color.press.border}}},active:{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle,color:theme.root.color.selected.foreground,cursor:"default",position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:wonderBlocksTokens.semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:wonderBlocksTokens.semanticColor.core.foreground.instructive.default},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
+const LeftAccessory=({leftAccessory,style,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...style}],children:leftAccessory})};const RightAccessory=({rightAccessory,style,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...style},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,rightAccessory=undefined,styles:stylesProp,testId}=props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,style:stylesProp?.leftAccessory,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle,stylesProp?.content],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,style:stylesProp?.rightAccessory,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,id,horizontalRule="inset",styles:stylesProp,innerStyle}=props;const horizontalRuleStyles=getHorizontalRuleStyles(horizontalRule);const sharedStyles=[styles$1.wrapper,innerStyle,active&&styles$1.active,horizontalRuleStyles];if(onClick||href){return jsxRuntime.jsx(Clickable__default["default"],{disabled:disabled,onClick:onClick,href:href,hideDefaultFocusRing:true,disableMinTargetSize:true,"aria-label":ariaLabel?ariaLabel:undefined,"aria-selected":ariaSelected?ariaSelected:undefined,"aria-checked":ariaChecked,role:role,target:target,style:[sharedStyles,styles$1.clickable,disabled&&styles$1.disabled,stylesProp?.root],"aria-current":active?"true":undefined,tabIndex:tabIndex,id:id,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[sharedStyles,stylesProp?.root],"aria-current":active?"true":undefined,role:role,id:id,children:jsxRuntime.jsx(CellInner,{...props})})};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,minBlockSize:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"start",width:"100%",display:"flex",flex:1,flexDirection:"row",gap:theme.root.layout.gap.default,paddingBlock:theme.root.layout.padding.block.default,paddingInline:theme.root.layout.padding.inline.default},content:{alignSelf:"center",flex:1,overflowWrap:"break-word"},accessory:{minInlineSize:"auto",alignItems:"center",alignSelf:"center"},accessoryLeft:{color:theme.accessoryLeft.color.default.foreground},accessoryRight:{color:theme.accessoryRight.color.default.foreground},clickable:{":hover":{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle},":active":{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle,borderRadius:theme.root.border.radius.press},":focus-visible":{borderRadius:theme.root.border.radius.focus,outline:wonderBlocksStyles.focusStyles.focus[":focus-visible"].outline,outlineOffset:`calc(${theme.root.border.width.default} * -1)`,boxShadow:`inset 0 0 0 calc(${wonderBlocksTokens.border.width.medium}*2) ${wonderBlocksTokens.semanticColor.focus.inner}`,overflow:"hidden",position:"relative",[":after"]:{content:"unset"}},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.focusPress},[":active[aria-disabled=false]:not([aria-current=true])"]:{position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.default,backgroundColor:theme.root.color.press.border}}},active:{background:wonderBlocksTokens.semanticColor.core.background.instructive.subtle,color:theme.root.color.selected.foreground,cursor:"default",position:"relative",":before":{content:"''",position:"absolute",insetBlockStart:0,insetInlineStart:0,insetBlockEnd:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:wonderBlocksTokens.semanticColor.core.background.base.default,cursor:"not-allowed"},":active":{background:wonderBlocksTokens.semanticColor.core.background.base.default,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:wonderBlocksTokens.semanticColor.core.foreground.instructive.default},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
 
 const CompactCell=function(props){const{title,...coreProps}=props;return jsxRuntime.jsx(CellCore,{...coreProps,children:typeof title==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{weight:"semi",style:{lineHeight:theme.title.font.lineHeight},children:title}):title})};
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "6.2.12",
+  "version": "6.2.14",
   "publishConfig": {
     "access": "public"
   },
@@ -28,9 +28,9 @@
     "./styles.css": "./dist/css/vars.css"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "8.2.11",
+    "@khanacademy/wonder-blocks-clickable": "8.3.1",
     "@khanacademy/wonder-blocks-core": "12.5.0",
-    "@khanacademy/wonder-blocks-styles": "0.2.54",
+    "@khanacademy/wonder-blocks-styles": "0.4.0",
     "@khanacademy/wonder-blocks-tokens": "18.0.0",
     "@khanacademy/wonder-blocks-typography": "5.0.5"
   },