@khanacademy/wonder-blocks-cell 5.0.9 → 5.0.11

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

@@ -1,5 +1,5 @@
 
-> @khanacademy/wonder-blocks-cell@5.0.9 build:css /home/runner/work/wonder-blocks/wonder-blocks/packages/wonder-blocks-cell
+> @khanacademy/wonder-blocks-cell@5.0.11 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,30 @@
 # @khanacademy/wonder-blocks-cell
 
+## 5.0.11
+
+### Patch Changes
+
+- aa6ad92: Add themed component tokens for Cell for it's disabled state
+- aa6ad92: Move away from using `foreground.inverse` and `border.inverse` tokens in favour of the new knockout tokens
+- Updated dependencies [5a02279]
+- Updated dependencies [aa6ad92]
+- Updated dependencies [aa6ad92]
+- Updated dependencies [aa6ad92]
+    - @khanacademy/wonder-blocks-tokens@12.2.0
+    - @khanacademy/wonder-blocks-clickable@7.1.23
+    - @khanacademy/wonder-blocks-styles@0.2.29
+    - @khanacademy/wonder-blocks-typography@4.2.19
+
+## 5.0.10
+
+### Patch Changes
+
+- Updated dependencies [4aad557]
+    - @khanacademy/wonder-blocks-tokens@12.1.0
+    - @khanacademy/wonder-blocks-clickable@7.1.22
+    - @khanacademy/wonder-blocks-styles@0.2.28
+    - @khanacademy/wonder-blocks-typography@4.2.18
+
 ## 5.0.9
 
 ### Patch Changes

package/dist/css/vars.css

@@ -7,6 +7,7 @@
 --wb-c-cell-root-color-press-border: var(--wb-semanticColor-core-border-instructive-default);
 --wb-c-cell-root-color-selected-foreground: var(--wb-semanticColor-core-foreground-instructive-default);
 --wb-c-cell-root-color-selected-border: var(--wb-semanticColor-core-border-instructive-default);
+--wb-c-cell-root-color-disabled-foreground: var(--wb-semanticColor-core-foreground-disabled-default);
 --wb-c-cell-root-layout-gap-default: var(--wb-sizing-size_160);
 --wb-c-cell-root-layout-gap-detail: var(--wb-sizing-size_020);
 --wb-c-cell-root-layout-padding-block-default: var(--wb-sizing-size_120);
@@ -19,7 +20,7 @@
 --wb-c-cell-accessoryRight-color-selected-foreground: var(--wb-semanticColor-core-foreground-instructive-subtle);
 --wb-c-cell-accessoryRight-color-disabled-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
 --wb-c-cell-rule-sizing-height: var(--wb-sizing-size_020);
---wb-c-cell-rule-shadow: inset 0px -1px 0px var(--wb-semanticColor-core-border-inverse-default);
+--wb-c-cell-rule-shadow: inset 0px -1px 0px var(--wb-semanticColor-core-border-neutral-subtle);
 --wb-c-cell-title-font-lineHeight: var(--wb-font-body-lineHeight-medium);
 --wb-c-cell-subtitle-color-foreground: var(--wb-semanticColor-core-foreground-neutral-default);
 --wb-c-cell-subtitle-font-size: var(--wb-font-body-size-small);
@@ -34,6 +35,7 @@
 --wb-c-cell-root-color-press-border: var(--wb-semanticColor-core-transparent);
 --wb-c-cell-root-color-selected-foreground: var(--wb-semanticColor-core-foreground-neutral-strong);
 --wb-c-cell-root-color-selected-border: var(--wb-semanticColor-core-transparent);
+--wb-c-cell-root-color-disabled-foreground: var(--wb-semanticColor-core-foreground-disabled-subtle);
 --wb-c-cell-root-layout-gap-default: var(--wb-sizing-size_120);
 --wb-c-cell-root-layout-gap-detail: var(--wb-sizing-size_040);
 --wb-c-cell-root-layout-padding-block-default: var(--wb-sizing-size_120);

package/dist/es/index.js

@@ -7,13 +7,13 @@ import { View } from '@khanacademy/wonder-blocks-core';
 import { border, semanticColor, sizing, font, mapValuesToCssVars } from '@khanacademy/wonder-blocks-tokens';
 import { focusStyles } from '@khanacademy/wonder-blocks-styles';
 
-var themeDefault = {root:{border:{width:{default:border.width.medium,selected:border.width.thick},radius:{default:border.radius.radius_0,focus:border.radius.radius_040,press:border.radius.radius_0,focusPress:border.radius.radius_040}},color:{press:{border:semanticColor.core.border.instructive.default},selected:{foreground:semanticColor.core.foreground.instructive.default,border:semanticColor.core.border.instructive.default}},layout:{gap:{default:sizing.size_160,detail:sizing.size_020},padding:{block:{default:sizing.size_120,detail:sizing.size_160},inline:{default:sizing.size_160,detail:sizing.size_160}}},sizing:{minHeight:sizing.size_480}},accessoryLeft:{color:{default:{foreground:"inherit"}}},accessoryRight:{color:{default:{foreground:semanticColor.core.foreground.neutral.default},selected:{foreground:semanticColor.core.foreground.instructive.subtle},disabled:{foreground:semanticColor.core.foreground.neutral.strong}}},rule:{sizing:{height:sizing.size_020},shadow:`inset 0px -1px 0px ${semanticColor.core.border.inverse.default}`},title:{font:{lineHeight:font.body.lineHeight.medium}},subtitle:{color:{foreground:semanticColor.core.foreground.neutral.default},font:{size:font.body.size.small,lineHeight:font.body.lineHeight.small}}};
+var themeDefault = {root:{border:{width:{default:border.width.medium,selected:border.width.thick},radius:{default:border.radius.radius_0,focus:border.radius.radius_040,press:border.radius.radius_0,focusPress:border.radius.radius_040}},color:{press:{border:semanticColor.core.border.instructive.default},selected:{foreground:semanticColor.core.foreground.instructive.default,border:semanticColor.core.border.instructive.default},disabled:{foreground:semanticColor.core.foreground.disabled.default}},layout:{gap:{default:sizing.size_160,detail:sizing.size_020},padding:{block:{default:sizing.size_120,detail:sizing.size_160},inline:{default:sizing.size_160,detail:sizing.size_160}}},sizing:{minHeight:sizing.size_480}},accessoryLeft:{color:{default:{foreground:"inherit"}}},accessoryRight:{color:{default:{foreground:semanticColor.core.foreground.neutral.default},selected:{foreground:semanticColor.core.foreground.instructive.subtle},disabled:{foreground:semanticColor.core.foreground.neutral.strong}}},rule:{sizing:{height:sizing.size_020},shadow:`inset 0px -1px 0px ${semanticColor.core.border.neutral.subtle}`},title:{font:{lineHeight:font.body.lineHeight.medium}},subtitle:{color:{foreground:semanticColor.core.foreground.neutral.default},font:{size:font.body.size.small,lineHeight:font.body.lineHeight.small}}};
 
 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",bottom:0,right:0,height:theme.rule.sizing.height,boxShadow:theme.rule.shadow}},horizontalRuleInset:{":after":{width:`calc(100% - ${theme.root.layout.padding.inline.default})`}}});
 
-const LeftAccessory=({leftAccessory,leftAccessoryStyle,disabled})=>{if(!leftAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...leftAccessoryStyle}],children:leftAccessory})};const RightAccessory=({rightAccessory,rightAccessoryStyle,active,disabled})=>{if(!rightAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...rightAccessoryStyle},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,leftAccessoryStyle=undefined,rightAccessory=undefined,rightAccessoryStyle=undefined,testId}=props;return jsxs(Fragment,{children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,leftAccessoryStyle:leftAccessoryStyle,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,rightAccessoryStyle:rightAccessoryStyle,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,horizontalRule="inset",style,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,style],"aria-current":active?"true":undefined,tabIndex:tabIndex,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[sharedStyles,style],"aria-current":active?"true":undefined,role:role,children:jsx(CellInner,{...props})})};const styles$1=StyleSheet.create({wrapper:{background:semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"left",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:{minWidth:"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",top:0,left:0,bottom: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",top:0,left:0,bottom:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.inverse.subtle,":hover":{background:semanticColor.surface.primary,cursor:"not-allowed"},":active":{background:semanticColor.surface.primary,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:theme.accessoryRight.color.selected.foreground},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
+const LeftAccessory=({leftAccessory,leftAccessoryStyle,disabled})=>{if(!leftAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...leftAccessoryStyle}],children:leftAccessory})};const RightAccessory=({rightAccessory,rightAccessoryStyle,active,disabled})=>{if(!rightAccessory){return null}return jsx(View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...rightAccessoryStyle},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,leftAccessoryStyle=undefined,rightAccessory=undefined,rightAccessoryStyle=undefined,testId}=props;return jsxs(Fragment,{children:[jsx(LeftAccessory,{leftAccessory:leftAccessory,leftAccessoryStyle:leftAccessoryStyle,disabled:disabled}),jsx(View,{style:[styles$1.content,contentStyle],testId:testId,children:children}),jsx(RightAccessory,{rightAccessory:rightAccessory,rightAccessoryStyle:rightAccessoryStyle,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,horizontalRule="inset",style,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,style],"aria-current":active?"true":undefined,tabIndex:tabIndex,children:()=>jsx(CellInner,{...props})})}return jsx(View,{style:[sharedStyles,style],"aria-current":active?"true":undefined,role:role,children:jsx(CellInner,{...props})})};const styles$1=StyleSheet.create({wrapper:{background:semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"left",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:{minWidth:"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",top:0,left:0,bottom: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",top:0,left:0,bottom:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:semanticColor.surface.primary,cursor:"not-allowed"},":active":{background:semanticColor.surface.primary,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:theme.accessoryRight.color.selected.foreground},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

@@ -15,13 +15,13 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var Clickable__default = /*#__PURE__*/_interopDefaultLegacy(Clickable);
 
-var themeDefault = {root:{border:{width:{default:wonderBlocksTokens.border.width.medium,selected:wonderBlocksTokens.border.width.thick},radius:{default:wonderBlocksTokens.border.radius.radius_0,focus:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_0,focusPress:wonderBlocksTokens.border.radius.radius_040}},color:{press:{border:wonderBlocksTokens.semanticColor.core.border.instructive.default},selected:{foreground:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,border:wonderBlocksTokens.semanticColor.core.border.instructive.default}},layout:{gap:{default:wonderBlocksTokens.sizing.size_160,detail:wonderBlocksTokens.sizing.size_020},padding:{block:{default:wonderBlocksTokens.sizing.size_120,detail:wonderBlocksTokens.sizing.size_160},inline:{default:wonderBlocksTokens.sizing.size_160,detail:wonderBlocksTokens.sizing.size_160}}},sizing:{minHeight:wonderBlocksTokens.sizing.size_480}},accessoryLeft:{color:{default:{foreground:"inherit"}}},accessoryRight:{color:{default:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default},selected:{foreground:wonderBlocksTokens.semanticColor.core.foreground.instructive.subtle},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong}}},rule:{sizing:{height:wonderBlocksTokens.sizing.size_020},shadow:`inset 0px -1px 0px ${wonderBlocksTokens.semanticColor.core.border.inverse.default}`},title:{font:{lineHeight:wonderBlocksTokens.font.body.lineHeight.medium}},subtitle:{color:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default},font:{size:wonderBlocksTokens.font.body.size.small,lineHeight:wonderBlocksTokens.font.body.lineHeight.small}}};
+var themeDefault = {root:{border:{width:{default:wonderBlocksTokens.border.width.medium,selected:wonderBlocksTokens.border.width.thick},radius:{default:wonderBlocksTokens.border.radius.radius_0,focus:wonderBlocksTokens.border.radius.radius_040,press:wonderBlocksTokens.border.radius.radius_0,focusPress:wonderBlocksTokens.border.radius.radius_040}},color:{press:{border:wonderBlocksTokens.semanticColor.core.border.instructive.default},selected:{foreground:wonderBlocksTokens.semanticColor.core.foreground.instructive.default,border:wonderBlocksTokens.semanticColor.core.border.instructive.default},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.disabled.default}},layout:{gap:{default:wonderBlocksTokens.sizing.size_160,detail:wonderBlocksTokens.sizing.size_020},padding:{block:{default:wonderBlocksTokens.sizing.size_120,detail:wonderBlocksTokens.sizing.size_160},inline:{default:wonderBlocksTokens.sizing.size_160,detail:wonderBlocksTokens.sizing.size_160}}},sizing:{minHeight:wonderBlocksTokens.sizing.size_480}},accessoryLeft:{color:{default:{foreground:"inherit"}}},accessoryRight:{color:{default:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default},selected:{foreground:wonderBlocksTokens.semanticColor.core.foreground.instructive.subtle},disabled:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong}}},rule:{sizing:{height:wonderBlocksTokens.sizing.size_020},shadow:`inset 0px -1px 0px ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`},title:{font:{lineHeight:wonderBlocksTokens.font.body.lineHeight.medium}},subtitle:{color:{foreground:wonderBlocksTokens.semanticColor.core.foreground.neutral.default},font:{size:wonderBlocksTokens.font.body.size.small,lineHeight:wonderBlocksTokens.font.body.lineHeight.small}}};
 
 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",bottom:0,right:0,height:theme.rule.sizing.height,boxShadow:theme.rule.shadow}},horizontalRuleInset:{":after":{width:`calc(100% - ${theme.root.layout.padding.inline.default})`}}});
 
-const LeftAccessory=({leftAccessory,leftAccessoryStyle,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...leftAccessoryStyle}],children:leftAccessory})};const RightAccessory=({rightAccessory,rightAccessoryStyle,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...rightAccessoryStyle},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,leftAccessoryStyle=undefined,rightAccessory=undefined,rightAccessoryStyle=undefined,testId}=props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,leftAccessoryStyle:leftAccessoryStyle,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,rightAccessoryStyle:rightAccessoryStyle,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,horizontalRule="inset",style,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,style],"aria-current":active?"true":undefined,tabIndex:tabIndex,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[sharedStyles,style],"aria-current":active?"true":undefined,role:role,children:jsxRuntime.jsx(CellInner,{...props})})};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:wonderBlocksTokens.semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"left",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:{minWidth:"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",top:0,left:0,bottom: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",top:0,left:0,bottom:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:wonderBlocksTokens.semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.inverse.subtle,":hover":{background:wonderBlocksTokens.semanticColor.surface.primary,cursor:"not-allowed"},":active":{background:wonderBlocksTokens.semanticColor.surface.primary,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:theme.accessoryRight.color.selected.foreground},accessoryDisabled:{color:theme.accessoryRight.color.disabled.foreground,opacity:.32}});
+const LeftAccessory=({leftAccessory,leftAccessoryStyle,disabled})=>{if(!leftAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryLeft,disabled&&styles$1.accessoryDisabled,{...leftAccessoryStyle}],children:leftAccessory})};const RightAccessory=({rightAccessory,rightAccessoryStyle,active,disabled})=>{if(!rightAccessory){return null}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.accessory,styles$1.accessoryRight,disabled&&styles$1.accessoryDisabled,{...rightAccessoryStyle},active&&styles$1.accessoryActive],children:rightAccessory})};function CellInner(props){const{active,children,disabled,contentStyle=undefined,leftAccessory=undefined,leftAccessoryStyle=undefined,rightAccessory=undefined,rightAccessoryStyle=undefined,testId}=props;return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(LeftAccessory,{leftAccessory:leftAccessory,leftAccessoryStyle:leftAccessoryStyle,disabled:disabled}),jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.content,contentStyle],testId:testId,children:children}),jsxRuntime.jsx(RightAccessory,{rightAccessory:rightAccessory,rightAccessoryStyle:rightAccessoryStyle,active:active,disabled:disabled})]})}const CellCore=props=>{const{active,disabled,href,onClick,"aria-label":ariaLabel,"aria-selected":ariaSelected,"aria-checked":ariaChecked,target,role,tabIndex,horizontalRule="inset",style,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,style],"aria-current":active?"true":undefined,tabIndex:tabIndex,children:()=>jsxRuntime.jsx(CellInner,{...props})})}return jsxRuntime.jsx(wonderBlocksCore.View,{style:[sharedStyles,style],"aria-current":active?"true":undefined,role:role,children:jsxRuntime.jsx(CellInner,{...props})})};const styles$1=aphrodite.StyleSheet.create({wrapper:{background:wonderBlocksTokens.semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:wonderBlocksTokens.semanticColor.core.foreground.neutral.strong,minHeight:theme.root.sizing.minHeight,overflow:"hidden",textAlign:"left",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:{minWidth:"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",top:0,left:0,bottom: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",top:0,left:0,bottom:0,width:theme.root.border.width.selected,backgroundColor:theme.root.color.selected.border}},disabled:{background:wonderBlocksTokens.semanticColor.surface.primary,borderRadius:theme.root.border.radius.default,color:theme.root.color.disabled.foreground,":hover":{background:wonderBlocksTokens.semanticColor.surface.primary,cursor:"not-allowed"},":active":{background:wonderBlocksTokens.semanticColor.surface.primary,borderRadius:theme.root.border.radius.default},[":focus-visible:active"]:{borderRadius:theme.root.border.radius.default}},accessoryActive:{color:theme.accessoryRight.color.selected.foreground},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/dist/theme/default.d.ts

@@ -20,6 +20,9 @@ declare const _default: {
                 foreground: string;
                 border: string;
             };
+            disabled: {
+                foreground: string;
+            };
         };
         layout: {
             gap: {

package/dist/theme/index.d.ts

@@ -20,6 +20,9 @@ declare const _default: {
                 foreground: string;
                 border: string;
             };
+            disabled: {
+                foreground: string;
+            };
         };
         layout: {
             gap: {

package/dist/theme/thunderblocks.d.ts

@@ -20,6 +20,9 @@ declare const _default: {
                 foreground: string;
                 border: string;
             };
+            disabled: {
+                foreground: string;
+            };
         };
         layout: {
             gap: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-cell",
-  "version": "5.0.9",
+  "version": "5.0.11",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -18,11 +18,11 @@
     "./styles.css": "./dist/css/vars.css"
   },
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "7.1.21",
+    "@khanacademy/wonder-blocks-clickable": "7.1.23",
     "@khanacademy/wonder-blocks-core": "12.4.0",
-    "@khanacademy/wonder-blocks-styles": "0.2.27",
-    "@khanacademy/wonder-blocks-tokens": "12.0.2",
-    "@khanacademy/wonder-blocks-typography": "4.2.17"
+    "@khanacademy/wonder-blocks-styles": "0.2.29",
+    "@khanacademy/wonder-blocks-tokens": "12.2.0",
+    "@khanacademy/wonder-blocks-typography": "4.2.19"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",