@khanacademy/wonder-blocks-accordion 3.1.71 → 3.1.72

package/CHANGELOG.md

@@ -1,5 +1,42 @@
 # @khanacademy/wonder-blocks-accordion
 
+## 3.1.72
+
+### Patch Changes
+
+- 8ce8b48: Warn when a heading is passed to `AccordionSection`'s `header` prop
+
+    `AccordionSection` wraps its trigger in a heading element containing a
+    `<button>`, and the `header` content renders inside that button. A heading in
+    there produces `h2 > button > h3`, which is invalid HTML — a `<button>` may only
+    contain phrasing content, and nested headings give screen reader users a
+    duplicated heading structure. Nothing caught this before.
+
+    - **eslint-plugin-wonder-blocks:** new `no-heading-in-accordion-header` rule,
+      enabled at `error` in the `recommended` config. It flags `<h1>`–`<h6>`, Wonder
+      Blocks `Heading` components, a `tag="h1"`–`tag="h6"` on any component (e.g.
+      `<BodyText tag="h1">`), and `role="heading"` anywhere inside a literal
+      `header` prop on `AccordionSection`. This is a major bump because projects
+      extending `recommended` will see new lint errors.
+    - **wonder-blocks-accordion:** `AccordionSection` now logs a development-only
+      console warning when the rendered header turns out to contain a heading. It
+      inspects the DOM, so it also catches headings rendered inside a consumer's own
+      components, which the lint rule cannot see. It does not fire during
+      server-side rendering. The `header` prop documentation now states the
+      constraint.
+
+    To set the heading level, use `AccordionSection`'s `tag` prop. For
+    heading-sized text without heading semantics, use `<BodyText tag="span">` with
+    the `font.heading.*` tokens.
+
+- Updated dependencies [04522d4]
+- Updated dependencies [5b4fed3]
+    - @khanacademy/wonder-blocks-tokens@18.0.0
+    - @khanacademy/wonder-blocks-clickable@8.2.11
+    - @khanacademy/wonder-blocks-icon@6.0.2
+    - @khanacademy/wonder-blocks-typography@5.0.5
+    - @khanacademy/wonder-blocks-core@12.5.0
+
 ## 3.1.71
 
 ### Patch Changes

package/dist/components/accordion-section.d.ts

@@ -59,8 +59,15 @@ declare const AccordionSection: React.ForwardRefExoticComponent<Readonly<import(
      */
     children: string | React.ReactElement;
     /**
-     * The header for this section. If a string is passed in, it will
-     * automatically be given Body typography from Wonder Blocks Typography.
+     * The header for this section. A string is given Heading typography and
+     * the standard header spacing; a React element is rendered as-is.
+     *
+     * NOTE: this content renders inside a `<button>` that is itself wrapped in
+     * a heading, so it must not contain a heading of its own (`<h1>`–`<h6>`,
+     * `Heading`, a `tag="h1"`–`tag="h6"` on any component, or
+     * `role="heading"`) — that is invalid HTML. Use AccordionSection's own
+     * `tag` prop to set the heading level, and `<BodyText tag="span">` with
+     * `font.heading.*` tokens for heading-sized text.
      */
     header: string | React.ReactElement;
     /**

package/dist/es/index.js

@@ -13,7 +13,7 @@ const StyledUl=addStyle("ul");const LANDMARK_PROLIFERATION_THRESHOLD=6;const Acc
 
 function getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded){switch(cornerKind){case"rounded-per-section":return {roundedTop:true,roundedBottom:!expanded};case"rounded":return {roundedTop:isFirstSection,roundedBottom:isLastSection&&!expanded};default:return {roundedTop:false,roundedBottom:false}}}
 
-const AccordionSectionHeader=React.forwardRef(function AccordionSectionHeader(props,ref){const{id,header,caretPosition,cornerKind,collapsible=true,expanded,animated,onClick,sectionContentUniqueId,headerStyle,tag="h2",testId,isFirstSection,isLastSection}=props;const headerIsString=typeof header==="string";const{roundedTop,roundedBottom}=getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded);return jsx(Heading,{size:"medium",tag:tag,style:styles$1.heading,children:jsx(Clickable,{id:id,"aria-expanded":expanded,"aria-controls":sectionContentUniqueId,onClick:onClick,disabled:!collapsible,testId:testId?`${testId}-header`:undefined,style:[styles$1.headerWrapper,animated&&styles$1.headerWrapperWithAnimation,caretPosition==="start"&&styles$1.headerWrapperCaretStart,roundedTop&&styles$1.roundedTop,roundedBottom&&styles$1.roundedBottom,headerStyle,!collapsible&&styles$1.disabled],ref:ref,children:()=>jsxs(Fragment,{children:[jsx(View,{style:[styles$1.headerContent,headerIsString&&styles$1.headerString],children:headerIsString?jsx(View,{style:[caretPosition==="end"?styles$1.headerStringCaretEnd:styles$1.headerStringCaretStart],children:header}):header}),collapsible&&jsx(PhosphorIcon,{icon:caretDown,color:semanticColor.core.foreground.neutral.default,size:"small",style:[animated&&styles$1.iconWithAnimation,caretPosition==="start"?styles$1.iconStart:styles$1.iconEnd,expanded&&styles$1.iconExpanded],testId:testId?`${testId}-caret-icon`:undefined})]})})})});const INNER_BORDER_RADIUS=`calc(${sizing.size_120} - 1px)`;const ANIMATION_LENGTH="300ms";const styles$1=StyleSheet.create({heading:{minInlineSize:0,marginBlockStart:0},headerWrapper:{display:"flex",flexDirection:"row",alignItems:"center",overflow:"hidden",minInlineSize:"auto",width:"100%",position:"relative",zIndex:1,":active":{outline:`2px solid ${semanticColor.action.secondary.progressive.press.border}`},":hover":{outline:`2px solid ${semanticColor.action.secondary.progressive.hover.border}`},":focus-visible":{outline:`2px solid ${semanticColor.focus.outer}`}},headerWrapperWithAnimation:{transition:`border-radius ${ANIMATION_LENGTH}`},headerWrapperCaretStart:{flexDirection:"row-reverse"},roundedTop:{borderStartStartRadius:INNER_BORDER_RADIUS,borderStartEndRadius:INNER_BORDER_RADIUS},roundedBottom:{borderEndStartRadius:INNER_BORDER_RADIUS,borderEndEndRadius:INNER_BORDER_RADIUS},headerContent:{flexGrow:1,textAlign:"start"},headerString:{paddingBlockStart:sizing.size_160,paddingBlockEnd:sizing.size_160},headerStringCaretEnd:{paddingInlineEnd:sizing.size_120,paddingInlineStart:sizing.size_160},headerStringCaretStart:{paddingInlineEnd:sizing.size_160,paddingInlineStart:sizing.size_120},iconWithAnimation:{transition:`transform ${ANIMATION_LENGTH}`},iconExpanded:{transform:"rotate(180deg)"},iconStart:{marginInlineStart:sizing.size_160},iconEnd:{marginInlineEnd:sizing.size_160},disabled:{pointerEvents:"none",color:"inherit",":focus-visible":{outline:`2px solid ${semanticColor.focus.outer}`}}});
+const HEADING_SELECTOR='h1,h2,h3,h4,h5,h6,[role="heading"]';const AccordionSectionHeader=React.forwardRef(function AccordionSectionHeader(props,ref){const{id,header,caretPosition,cornerKind,collapsible=true,expanded,animated,onClick,sectionContentUniqueId,headerStyle,tag="h2",testId,isFirstSection,isLastSection}=props;const headerIsString=typeof header==="string";const headerContentRef=React.useRef(null);React.useEffect(()=>{if(process.env.NODE_ENV==="production"||headerIsString){return}if(headerContentRef.current?.querySelector(HEADING_SELECTOR)){console.warn("AccordionSection's header contains a heading. It is rendered "+"inside a <button> that AccordionSection already wraps in "+"a heading, which is invalid HTML. Set the heading level "+"with the `tag` prop instead, and use "+'`<BodyText tag="span">` with `font.heading.*` tokens for '+"heading-sized text.");}},[header,headerIsString]);const{roundedTop,roundedBottom}=getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded);return jsx(Heading,{size:"medium",tag:tag,style:styles$1.heading,children:jsx(Clickable,{id:id,"aria-expanded":expanded,"aria-controls":sectionContentUniqueId,onClick:onClick,disabled:!collapsible,testId:testId?`${testId}-header`:undefined,style:[styles$1.headerWrapper,animated&&styles$1.headerWrapperWithAnimation,caretPosition==="start"&&styles$1.headerWrapperCaretStart,roundedTop&&styles$1.roundedTop,roundedBottom&&styles$1.roundedBottom,headerStyle,!collapsible&&styles$1.disabled],ref:ref,children:()=>jsxs(Fragment,{children:[jsx(View,{style:[styles$1.headerContent,headerIsString&&styles$1.headerString],ref:headerContentRef,children:headerIsString?jsx(View,{style:[caretPosition==="end"?styles$1.headerStringCaretEnd:styles$1.headerStringCaretStart],children:header}):header}),collapsible&&jsx(PhosphorIcon,{icon:caretDown,color:semanticColor.core.foreground.neutral.default,size:"small",style:[animated&&styles$1.iconWithAnimation,caretPosition==="start"?styles$1.iconStart:styles$1.iconEnd,expanded&&styles$1.iconExpanded],testId:testId?`${testId}-caret-icon`:undefined})]})})})});const INNER_BORDER_RADIUS=`calc(${sizing.size_120} - 1px)`;const ANIMATION_LENGTH="300ms";const styles$1=StyleSheet.create({heading:{minInlineSize:0,marginBlockStart:0},headerWrapper:{display:"flex",flexDirection:"row",alignItems:"center",overflow:"hidden",minInlineSize:"auto",width:"100%",position:"relative",zIndex:1,":active":{outline:`2px solid ${semanticColor.action.secondary.progressive.press.border}`},":hover":{outline:`2px solid ${semanticColor.action.secondary.progressive.hover.border}`},":focus-visible":{outline:`2px solid ${semanticColor.focus.outer}`}},headerWrapperWithAnimation:{transition:`border-radius ${ANIMATION_LENGTH}`},headerWrapperCaretStart:{flexDirection:"row-reverse"},roundedTop:{borderStartStartRadius:INNER_BORDER_RADIUS,borderStartEndRadius:INNER_BORDER_RADIUS},roundedBottom:{borderEndStartRadius:INNER_BORDER_RADIUS,borderEndEndRadius:INNER_BORDER_RADIUS},headerContent:{flexGrow:1,textAlign:"start"},headerString:{paddingBlockStart:sizing.size_160,paddingBlockEnd:sizing.size_160},headerStringCaretEnd:{paddingInlineEnd:sizing.size_120,paddingInlineStart:sizing.size_160},headerStringCaretStart:{paddingInlineEnd:sizing.size_160,paddingInlineStart:sizing.size_120},iconWithAnimation:{transition:`transform ${ANIMATION_LENGTH}`},iconExpanded:{transform:"rotate(180deg)"},iconStart:{marginInlineStart:sizing.size_160},iconEnd:{marginInlineEnd:sizing.size_160},disabled:{pointerEvents:"none",color:"inherit",":focus-visible":{outline:`2px solid ${semanticColor.focus.outer}`}}});
 
 const AccordionSection=React.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxs(View,{id:sectionId,"data-expanded":expandedState?"true":"false",style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,style],testId:testId,...ariaProps,children:[jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsx(View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsx(BodyText,{tag:"span",style:styles.stringContent,children:children}):children})]})});const styles=StyleSheet.create({wrapper:{display:"grid",gridTemplateRows:"min-content 1fr",[':not([data-expanded="true"])']:{gridTemplateRows:"min-content 0fr"},position:"static",boxSizing:"border-box",backgroundColor:semanticColor.core.background.base.default},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:sizing.size_160}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${semanticColor.core.border.neutral.subtle}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:sizing.size_120,borderStartEndRadius:sizing.size_120};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:sizing.size_120,borderEndEndRadius:sizing.size_120};contentWrapperStyle={borderEndEndRadius:sizing.size_120,borderEndStartRadius:sizing.size_120};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:border.radius.radius_120,marginBlockEnd:sizing.size_160};contentWrapperStyle={borderEndEndRadius:sizing.size_120,borderEndStartRadius:sizing.size_120};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=StyleSheet.create(newStyles);return cornerStyles[sectionType]};
 

package/dist/index.js

@@ -40,7 +40,7 @@ const StyledUl=wonderBlocksCore.addStyle("ul");const LANDMARK_PROLIFERATION_THRE
 
 function getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded){switch(cornerKind){case"rounded-per-section":return {roundedTop:true,roundedBottom:!expanded};case"rounded":return {roundedTop:isFirstSection,roundedBottom:isLastSection&&!expanded};default:return {roundedTop:false,roundedBottom:false}}}
 
-const AccordionSectionHeader=React__namespace.forwardRef(function AccordionSectionHeader(props,ref){const{id,header,caretPosition,cornerKind,collapsible=true,expanded,animated,onClick,sectionContentUniqueId,headerStyle,tag="h2",testId,isFirstSection,isLastSection}=props;const headerIsString=typeof header==="string";const{roundedTop,roundedBottom}=getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded);return jsxRuntime.jsx(wonderBlocksTypography.Heading,{size:"medium",tag:tag,style:styles$1.heading,children:jsxRuntime.jsx(Clickable__default["default"],{id:id,"aria-expanded":expanded,"aria-controls":sectionContentUniqueId,onClick:onClick,disabled:!collapsible,testId:testId?`${testId}-header`:undefined,style:[styles$1.headerWrapper,animated&&styles$1.headerWrapperWithAnimation,caretPosition==="start"&&styles$1.headerWrapperCaretStart,roundedTop&&styles$1.roundedTop,roundedBottom&&styles$1.roundedBottom,headerStyle,!collapsible&&styles$1.disabled],ref:ref,children:()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.headerContent,headerIsString&&styles$1.headerString],children:headerIsString?jsxRuntime.jsx(wonderBlocksCore.View,{style:[caretPosition==="end"?styles$1.headerStringCaretEnd:styles$1.headerStringCaretStart],children:header}):header}),collapsible&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDown__default["default"],color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,size:"small",style:[animated&&styles$1.iconWithAnimation,caretPosition==="start"?styles$1.iconStart:styles$1.iconEnd,expanded&&styles$1.iconExpanded],testId:testId?`${testId}-caret-icon`:undefined})]})})})});const INNER_BORDER_RADIUS=`calc(${wonderBlocksTokens.sizing.size_120} - 1px)`;const ANIMATION_LENGTH="300ms";const styles$1=aphrodite.StyleSheet.create({heading:{minInlineSize:0,marginBlockStart:0},headerWrapper:{display:"flex",flexDirection:"row",alignItems:"center",overflow:"hidden",minInlineSize:"auto",width:"100%",position:"relative",zIndex:1,":active":{outline:`2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border}`},":hover":{outline:`2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border}`},":focus-visible":{outline:`2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}},headerWrapperWithAnimation:{transition:`border-radius ${ANIMATION_LENGTH}`},headerWrapperCaretStart:{flexDirection:"row-reverse"},roundedTop:{borderStartStartRadius:INNER_BORDER_RADIUS,borderStartEndRadius:INNER_BORDER_RADIUS},roundedBottom:{borderEndStartRadius:INNER_BORDER_RADIUS,borderEndEndRadius:INNER_BORDER_RADIUS},headerContent:{flexGrow:1,textAlign:"start"},headerString:{paddingBlockStart:wonderBlocksTokens.sizing.size_160,paddingBlockEnd:wonderBlocksTokens.sizing.size_160},headerStringCaretEnd:{paddingInlineEnd:wonderBlocksTokens.sizing.size_120,paddingInlineStart:wonderBlocksTokens.sizing.size_160},headerStringCaretStart:{paddingInlineEnd:wonderBlocksTokens.sizing.size_160,paddingInlineStart:wonderBlocksTokens.sizing.size_120},iconWithAnimation:{transition:`transform ${ANIMATION_LENGTH}`},iconExpanded:{transform:"rotate(180deg)"},iconStart:{marginInlineStart:wonderBlocksTokens.sizing.size_160},iconEnd:{marginInlineEnd:wonderBlocksTokens.sizing.size_160},disabled:{pointerEvents:"none",color:"inherit",":focus-visible":{outline:`2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}}});
+const HEADING_SELECTOR='h1,h2,h3,h4,h5,h6,[role="heading"]';const AccordionSectionHeader=React__namespace.forwardRef(function AccordionSectionHeader(props,ref){const{id,header,caretPosition,cornerKind,collapsible=true,expanded,animated,onClick,sectionContentUniqueId,headerStyle,tag="h2",testId,isFirstSection,isLastSection}=props;const headerIsString=typeof header==="string";const headerContentRef=React__namespace.useRef(null);React__namespace.useEffect(()=>{if(process.env.NODE_ENV==="production"||headerIsString){return}if(headerContentRef.current?.querySelector(HEADING_SELECTOR)){console.warn("AccordionSection's header contains a heading. It is rendered "+"inside a <button> that AccordionSection already wraps in "+"a heading, which is invalid HTML. Set the heading level "+"with the `tag` prop instead, and use "+'`<BodyText tag="span">` with `font.heading.*` tokens for '+"heading-sized text.");}},[header,headerIsString]);const{roundedTop,roundedBottom}=getRoundedValuesForHeader(cornerKind,isFirstSection,isLastSection,expanded);return jsxRuntime.jsx(wonderBlocksTypography.Heading,{size:"medium",tag:tag,style:styles$1.heading,children:jsxRuntime.jsx(Clickable__default["default"],{id:id,"aria-expanded":expanded,"aria-controls":sectionContentUniqueId,onClick:onClick,disabled:!collapsible,testId:testId?`${testId}-header`:undefined,style:[styles$1.headerWrapper,animated&&styles$1.headerWrapperWithAnimation,caretPosition==="start"&&styles$1.headerWrapperCaretStart,roundedTop&&styles$1.roundedTop,roundedBottom&&styles$1.roundedBottom,headerStyle,!collapsible&&styles$1.disabled],ref:ref,children:()=>jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(wonderBlocksCore.View,{style:[styles$1.headerContent,headerIsString&&styles$1.headerString],ref:headerContentRef,children:headerIsString?jsxRuntime.jsx(wonderBlocksCore.View,{style:[caretPosition==="end"?styles$1.headerStringCaretEnd:styles$1.headerStringCaretStart],children:header}):header}),collapsible&&jsxRuntime.jsx(wonderBlocksIcon.PhosphorIcon,{icon:caretDown__default["default"],color:wonderBlocksTokens.semanticColor.core.foreground.neutral.default,size:"small",style:[animated&&styles$1.iconWithAnimation,caretPosition==="start"?styles$1.iconStart:styles$1.iconEnd,expanded&&styles$1.iconExpanded],testId:testId?`${testId}-caret-icon`:undefined})]})})})});const INNER_BORDER_RADIUS=`calc(${wonderBlocksTokens.sizing.size_120} - 1px)`;const ANIMATION_LENGTH="300ms";const styles$1=aphrodite.StyleSheet.create({heading:{minInlineSize:0,marginBlockStart:0},headerWrapper:{display:"flex",flexDirection:"row",alignItems:"center",overflow:"hidden",minInlineSize:"auto",width:"100%",position:"relative",zIndex:1,":active":{outline:`2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.border}`},":hover":{outline:`2px solid ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.border}`},":focus-visible":{outline:`2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}},headerWrapperWithAnimation:{transition:`border-radius ${ANIMATION_LENGTH}`},headerWrapperCaretStart:{flexDirection:"row-reverse"},roundedTop:{borderStartStartRadius:INNER_BORDER_RADIUS,borderStartEndRadius:INNER_BORDER_RADIUS},roundedBottom:{borderEndStartRadius:INNER_BORDER_RADIUS,borderEndEndRadius:INNER_BORDER_RADIUS},headerContent:{flexGrow:1,textAlign:"start"},headerString:{paddingBlockStart:wonderBlocksTokens.sizing.size_160,paddingBlockEnd:wonderBlocksTokens.sizing.size_160},headerStringCaretEnd:{paddingInlineEnd:wonderBlocksTokens.sizing.size_120,paddingInlineStart:wonderBlocksTokens.sizing.size_160},headerStringCaretStart:{paddingInlineEnd:wonderBlocksTokens.sizing.size_160,paddingInlineStart:wonderBlocksTokens.sizing.size_120},iconWithAnimation:{transition:`transform ${ANIMATION_LENGTH}`},iconExpanded:{transform:"rotate(180deg)"},iconStart:{marginInlineStart:wonderBlocksTokens.sizing.size_160},iconEnd:{marginInlineEnd:wonderBlocksTokens.sizing.size_160},disabled:{pointerEvents:"none",color:"inherit",":focus-visible":{outline:`2px solid ${wonderBlocksTokens.semanticColor.focus.outer}`}}});
 
 const AccordionSection=React__namespace.forwardRef(function AccordionSection(props,ref){const{children,id,header,collapsible,expanded,animated=false,onToggle,caretPosition="end",cornerKind="rounded",style,headerStyle,tag,testId,isFirstSection=true,isLastSection=true,isRegion=true,...ariaProps}=props;const[internalExpanded,setInternalExpanded]=React__namespace.useState(expanded??false);const controlledMode=expanded!==undefined&&onToggle;const uniqueSectionId=React.useId();const sectionId=id??uniqueSectionId;const uniqueHeaderId=React.useId();const headerId=id?`${id}-header`:uniqueHeaderId;const sectionContentUniqueId=React.useId();const sectionStyles=_generateStyles(cornerKind,isFirstSection,isLastSection);const handleClick=()=>{if(controlledMode){onToggle(!expanded);}else {setInternalExpanded(!internalExpanded);if(onToggle){onToggle(!internalExpanded);}}};let expandedState;if(collapsible===false){expandedState=true;}else {expandedState=controlledMode?expanded:internalExpanded;}return jsxRuntime.jsxs(wonderBlocksCore.View,{id:sectionId,"data-expanded":expandedState?"true":"false",style:[styles.wrapper,animated&&styles.wrapperWithAnimation,sectionStyles.wrapper,style],testId:testId,...ariaProps,children:[jsxRuntime.jsx(AccordionSectionHeader,{id:headerId,header:header,caretPosition:caretPosition,cornerKind:cornerKind,collapsible:collapsible,expanded:expandedState,animated:animated,onClick:handleClick,sectionContentUniqueId:sectionContentUniqueId,headerStyle:headerStyle,tag:tag,testId:testId,isFirstSection:isFirstSection,isLastSection:isLastSection,ref:ref}),jsxRuntime.jsx(wonderBlocksCore.View,{id:sectionContentUniqueId,role:isRegion?"region":undefined,"aria-labelledby":headerId,style:[styles.contentWrapper,expandedState?styles.contentWrapperExpanded:styles.conentWrapperCollapsed,sectionStyles.contentWrapper],testId:testId?`${testId}-content-panel`:undefined,children:typeof children==="string"?jsxRuntime.jsx(wonderBlocksTypography.BodyText,{tag:"span",style:styles.stringContent,children:children}):children})]})});const styles=aphrodite.StyleSheet.create({wrapper:{display:"grid",gridTemplateRows:"min-content 1fr",[':not([data-expanded="true"])']:{gridTemplateRows:"min-content 0fr"},position:"static",boxSizing:"border-box",backgroundColor:wonderBlocksTokens.semanticColor.core.background.base.default},wrapperWithAnimation:{transition:"grid-template-rows 300ms"},contentWrapper:{overflow:"hidden"},conentWrapperCollapsed:{visibility:"hidden"},contentWrapperExpanded:{visibility:"visible"},stringContent:{padding:wonderBlocksTokens.sizing.size_160}});const cornerStyles={};const _generateStyles=(cornerKind,isFirstSection,isLastSection)=>{const sectionType=`${cornerKind}-${isFirstSection.toString()}-${isLastSection.toString()}`;if(cornerStyles[sectionType]){return cornerStyles[sectionType]}let wrapperStyle=Object.freeze({});let contentWrapperStyle=Object.freeze({});let firstSectionStyle=Object.freeze({});let lastSectionStyle=Object.freeze({});const borderStyle=`1px solid ${wonderBlocksTokens.semanticColor.core.border.neutral.subtle}`;if(cornerKind==="square"){wrapperStyle={border:borderStyle,borderBottom:"none",borderRadius:wonderBlocksTokens.border.radius.radius_0};if(isLastSection){lastSectionStyle={borderBottom:borderStyle};}}if(cornerKind==="rounded"){wrapperStyle={border:borderStyle,borderBottom:"none"};if(isFirstSection){firstSectionStyle={borderStartStartRadius:wonderBlocksTokens.sizing.size_120,borderStartEndRadius:wonderBlocksTokens.sizing.size_120};}if(isLastSection){lastSectionStyle={borderBottom:borderStyle,borderEndStartRadius:wonderBlocksTokens.sizing.size_120,borderEndEndRadius:wonderBlocksTokens.sizing.size_120};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.sizing.size_120,borderEndStartRadius:wonderBlocksTokens.sizing.size_120};}}if(cornerKind==="rounded-per-section"){wrapperStyle={border:borderStyle,borderRadius:wonderBlocksTokens.border.radius.radius_120,marginBlockEnd:wonderBlocksTokens.sizing.size_160};contentWrapperStyle={borderEndEndRadius:wonderBlocksTokens.sizing.size_120,borderEndStartRadius:wonderBlocksTokens.sizing.size_120};}const newStyles={wrapper:{...wrapperStyle,...firstSectionStyle,...lastSectionStyle},contentWrapper:contentWrapperStyle};cornerStyles[sectionType]=aphrodite.StyleSheet.create(newStyles);return cornerStyles[sectionType]};
 

package/package.json

@@ -3,7 +3,7 @@
   "description": "Accordion components for Wonder Blocks.",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "3.1.71",
+  "version": "3.1.72",
   "publishConfig": {
     "access": "public"
   },
@@ -21,11 +21,11 @@
   "types": "dist/index.d.ts",
   "source": "src/index.js",
   "dependencies": {
-    "@khanacademy/wonder-blocks-clickable": "8.2.10",
+    "@khanacademy/wonder-blocks-clickable": "8.2.11",
     "@khanacademy/wonder-blocks-core": "12.5.0",
-    "@khanacademy/wonder-blocks-icon": "6.0.1",
-    "@khanacademy/wonder-blocks-tokens": "17.3.0",
-    "@khanacademy/wonder-blocks-typography": "5.0.4"
+    "@khanacademy/wonder-blocks-icon": "6.0.2",
+    "@khanacademy/wonder-blocks-tokens": "18.0.0",
+    "@khanacademy/wonder-blocks-typography": "5.0.5"
   },
   "peerDependencies": {
     "@phosphor-icons/core": "^2.0.2",