@khanacademy/wonder-blocks-breadcrumbs 3.2.14 → 3.2.16

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @khanacademy/wonder-blocks-breadcrumbs
 
+## 3.2.16
+
+### Patch Changes
+
+- 0fadf9f: Migrate internal usage of the deprecated `spacing` primitive token to the
+  `sizing` token. No public API or visual changes — each `spacing.<name>`
+  value maps 1:1 to a `sizing.size_<n>` token with the same rendered value.
+  A handful of internal `Strut` usages are replaced with CSS `gap` /
+  `margin` (since `sizing.X` is a CSS variable string at runtime, not a
+  number). Layout-spec and SVG sites that genuinely need JS numbers use
+  hardcoded values that mirror the matching `sizing.size_*` tokens (with
+  comments). Prep for removal of the `spacing` export in a future major
+  release of `@khanacademy/wonder-blocks-tokens`.
+- Updated dependencies [c1c74df]
+- Updated dependencies [72c5272]
+    - @khanacademy/wonder-blocks-tokens@16.4.0
+
+## 3.2.15
+
+### Patch Changes
+
+- Updated dependencies [40f217b]
+    - @khanacademy/wonder-blocks-tokens@16.3.0
+
 ## 3.2.14
 
 ### Patch Changes

package/dist/es/index.js

@@ -2,10 +2,10 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { addStyle } from '@khanacademy/wonder-blocks-core';
-import { spacing, font } from '@khanacademy/wonder-blocks-tokens';
+import { sizing, font } from '@khanacademy/wonder-blocks-tokens';
 
 const StyledOl=addStyle("ol");const Breadcrumbs=React.forwardRef(function Breadcrumbs(props,ref){const{"aria-label":ariaLabel="Breadcrumbs",children,testId,...otherProps}=props;const lastChildIndex=React.Children.count(children)-1;return jsx("nav",{...otherProps,"aria-label":ariaLabel,"data-testid":testId,ref:ref,children:jsx(StyledOl,{style:styles$1.container,children:React.Children.map(children,(item,index)=>{const isLastChild=index===lastChildIndex;return React.cloneElement(item,{...item.props,showSeparator:!isLastChild,["aria-current"]:isLastChild?"page":undefined})})})})});const styles$1=StyleSheet.create({container:{display:"flex",listStyle:"none",margin:0,padding:0,overflow:"hidden"}});
 
-const StyledLi=addStyle("li");const StyledSvg=addStyle("svg");const BreadcrumbsItem=React.forwardRef(function BreadcrumbsItem(props,ref){const{children,showSeparator,testId,...otherProps}=props;const _renderSeparator=()=>{return jsx(StyledSvg,{style:styles.separator,width:16,height:16,viewBox:"0 0 16 16","aria-hidden":true,children:jsx("circle",{cx:"8",cy:"9",r:"1.5"})})};return jsxs(StyledLi,{...otherProps,style:styles.item,"data-testid":testId,ref:ref,children:[children,showSeparator&&_renderSeparator()]})});const styles=StyleSheet.create({item:{display:"flex",alignItems:"center",justifyContent:"center",marginRight:spacing.xxxSmall_4,lineHeight:"inherit",fontFamily:font.family.sans},separator:{marginLeft:spacing.xxxSmall_4}});
+const StyledLi=addStyle("li");const StyledSvg=addStyle("svg");const BreadcrumbsItem=React.forwardRef(function BreadcrumbsItem(props,ref){const{children,showSeparator,testId,...otherProps}=props;const _renderSeparator=()=>{return jsx(StyledSvg,{style:styles.separator,width:16,height:16,viewBox:"0 0 16 16","aria-hidden":true,children:jsx("circle",{cx:"8",cy:"9",r:"1.5"})})};return jsxs(StyledLi,{...otherProps,style:styles.item,"data-testid":testId,ref:ref,children:[children,showSeparator&&_renderSeparator()]})});const styles=StyleSheet.create({item:{display:"flex",alignItems:"center",justifyContent:"center",marginInlineEnd:sizing.size_040,lineHeight:"inherit",fontFamily:font.family.sans},separator:{marginInlineStart:sizing.size_040}});
 
 export { Breadcrumbs, BreadcrumbsItem };

package/dist/index.js

@@ -30,7 +30,7 @@ var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 const StyledOl=wonderBlocksCore.addStyle("ol");const Breadcrumbs=React__namespace.forwardRef(function Breadcrumbs(props,ref){const{"aria-label":ariaLabel="Breadcrumbs",children,testId,...otherProps}=props;const lastChildIndex=React__namespace.Children.count(children)-1;return jsxRuntime.jsx("nav",{...otherProps,"aria-label":ariaLabel,"data-testid":testId,ref:ref,children:jsxRuntime.jsx(StyledOl,{style:styles$1.container,children:React__namespace.Children.map(children,(item,index)=>{const isLastChild=index===lastChildIndex;return React__namespace.cloneElement(item,{...item.props,showSeparator:!isLastChild,["aria-current"]:isLastChild?"page":undefined})})})})});const styles$1=aphrodite.StyleSheet.create({container:{display:"flex",listStyle:"none",margin:0,padding:0,overflow:"hidden"}});
 
-const StyledLi=wonderBlocksCore.addStyle("li");const StyledSvg=wonderBlocksCore.addStyle("svg");const BreadcrumbsItem=React__namespace.forwardRef(function BreadcrumbsItem(props,ref){const{children,showSeparator,testId,...otherProps}=props;const _renderSeparator=()=>{return jsxRuntime.jsx(StyledSvg,{style:styles.separator,width:16,height:16,viewBox:"0 0 16 16","aria-hidden":true,children:jsxRuntime.jsx("circle",{cx:"8",cy:"9",r:"1.5"})})};return jsxRuntime.jsxs(StyledLi,{...otherProps,style:styles.item,"data-testid":testId,ref:ref,children:[children,showSeparator&&_renderSeparator()]})});const styles=aphrodite.StyleSheet.create({item:{display:"flex",alignItems:"center",justifyContent:"center",marginRight:wonderBlocksTokens.spacing.xxxSmall_4,lineHeight:"inherit",fontFamily:wonderBlocksTokens.font.family.sans},separator:{marginLeft:wonderBlocksTokens.spacing.xxxSmall_4}});
+const StyledLi=wonderBlocksCore.addStyle("li");const StyledSvg=wonderBlocksCore.addStyle("svg");const BreadcrumbsItem=React__namespace.forwardRef(function BreadcrumbsItem(props,ref){const{children,showSeparator,testId,...otherProps}=props;const _renderSeparator=()=>{return jsxRuntime.jsx(StyledSvg,{style:styles.separator,width:16,height:16,viewBox:"0 0 16 16","aria-hidden":true,children:jsxRuntime.jsx("circle",{cx:"8",cy:"9",r:"1.5"})})};return jsxRuntime.jsxs(StyledLi,{...otherProps,style:styles.item,"data-testid":testId,ref:ref,children:[children,showSeparator&&_renderSeparator()]})});const styles=aphrodite.StyleSheet.create({item:{display:"flex",alignItems:"center",justifyContent:"center",marginInlineEnd:wonderBlocksTokens.sizing.size_040,lineHeight:"inherit",fontFamily:wonderBlocksTokens.font.family.sans},separator:{marginInlineStart:wonderBlocksTokens.sizing.size_040}});
 
 exports.Breadcrumbs = Breadcrumbs;
 exports.BreadcrumbsItem = BreadcrumbsItem;

package/package.json

@@ -3,7 +3,7 @@
   "description": "",
   "author": "Khan Academy",
   "license": "MIT",
-  "version": "3.2.14",
+  "version": "3.2.16",
   "publishConfig": {
     "access": "public"
   },
@@ -21,7 +21,7 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@khanacademy/wonder-blocks-core": "12.4.3",
-    "@khanacademy/wonder-blocks-tokens": "16.2.0"
+    "@khanacademy/wonder-blocks-tokens": "16.4.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",