@khanacademy/wonder-blocks-tabs 0.2.1 → 0.2.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @khanacademy/wonder-blocks-tabs
 
+## 0.2.3
+
+### Patch Changes
+
+- 24bf12f: Update sizing tokens used internally to Base 10 to handle browser minimum size issues
+- Updated dependencies [24bf12f]
+    - @khanacademy/wonder-blocks-tokens@6.0.0
+
+## 0.2.2
+
+### Patch Changes
+
+- 4846e9c: Fix pseudo-states to account for aria-disabled
+- Updated dependencies [3dc5dac]
+    - @khanacademy/wonder-blocks-tokens@5.2.0
+
 ## 0.2.1
 
 ### Patch Changes

package/dist/es/index.js

@@ -95,18 +95,18 @@ const styles$1 = StyleSheet.create({
     position: "relative"
   },
   list: {
-    paddingInline: sizing.size_050,
+    paddingInline: sizing.size_040,
     paddingBlock: sizing.size_0,
     margin: sizing.size_0,
     display: "flex",
-    gap: sizing.size_200,
+    gap: sizing.size_160,
     flexWrap: "nowrap"
   },
   currentUnderline: {
     position: "absolute",
     bottom: 0,
     left: 0,
-    height: sizing.size_050,
+    height: sizing.size_040,
     backgroundColor: semanticColor.action.secondary.progressive.default.foreground
   },
   underlineTransition: {
@@ -147,16 +147,16 @@ const styles = StyleSheet.create({
     listStyle: "none",
     display: "inline-flex",
     [":has(a:hover)"]: {
-      boxShadow: `inset 0 -${sizing.size_025} 0 0 ${semanticColor.action.secondary.progressive.hover.foreground}`
+      boxShadow: `inset 0 -${sizing.size_020} 0 0 ${semanticColor.action.secondary.progressive.hover.foreground}`
     },
     [":has(a:active)"]: {
-      boxShadow: `inset 0 -${sizing.size_075} 0 0 ${semanticColor.action.secondary.progressive.press.foreground}`
+      boxShadow: `inset 0 -${sizing.size_060} 0 0 ${semanticColor.action.secondary.progressive.press.foreground}`
     },
-    paddingBlockStart: sizing.size_100,
-    paddingBlockEnd: sizing.size_225,
+    paddingBlockStart: sizing.size_080,
+    paddingBlockEnd: sizing.size_180,
     [breakpoint.mediaQuery.mdOrLarger]: {
-      paddingBlockStart: sizing.size_250,
-      paddingBlockEnd: sizing.size_300
+      paddingBlockStart: sizing.size_200,
+      paddingBlockEnd: sizing.size_240
     }
   },
   current: {
@@ -175,14 +175,14 @@ const styles = StyleSheet.create({
     position: "relative",
     whiteSpace: "nowrap",
     textDecoration: "none",
-    ":hover": {
+    [":hover:not([aria-disabled=true])"]: {
       textDecoration: "none",
       border: "none",
       outline: "none",
       color: semanticColor.action.secondary.progressive.default.foreground,
       backgroundColor: "transparent"
     },
-    ":active": {
+    [":active:not([aria-disabled=true])"]: {
       textDecoration: "none",
       border: "none",
       outline: "none",
@@ -192,7 +192,7 @@ const styles = StyleSheet.create({
       color: semanticColor.action.secondary.progressive.default.foreground,
       border: "none",
       outline: "none",
-      boxShadow: `0 0 0 ${sizing.size_025} ${semanticColor.focus.inner}, 0 0 0 ${sizing.size_050} ${semanticColor.focus.outer}`,
+      boxShadow: `0 0 0 ${sizing.size_020} ${semanticColor.focus.inner}, 0 0 0 ${sizing.size_040} ${semanticColor.focus.outer}`,
       borderRadius: 0
     }
   }

package/dist/index.js

@@ -123,18 +123,18 @@ const styles$1 = aphrodite.StyleSheet.create({
     position: "relative"
   },
   list: {
-    paddingInline: wonderBlocksTokens.sizing.size_050,
+    paddingInline: wonderBlocksTokens.sizing.size_040,
     paddingBlock: wonderBlocksTokens.sizing.size_0,
     margin: wonderBlocksTokens.sizing.size_0,
     display: "flex",
-    gap: wonderBlocksTokens.sizing.size_200,
+    gap: wonderBlocksTokens.sizing.size_160,
     flexWrap: "nowrap"
   },
   currentUnderline: {
     position: "absolute",
     bottom: 0,
     left: 0,
-    height: wonderBlocksTokens.sizing.size_050,
+    height: wonderBlocksTokens.sizing.size_040,
     backgroundColor: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground
   },
   underlineTransition: {
@@ -175,16 +175,16 @@ const styles = aphrodite.StyleSheet.create({
     listStyle: "none",
     display: "inline-flex",
     [":has(a:hover)"]: {
-      boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_025} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground}`
+      boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_020} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.hover.foreground}`
     },
     [":has(a:active)"]: {
-      boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_075} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}`
+      boxShadow: `inset 0 -${wonderBlocksTokens.sizing.size_060} 0 0 ${wonderBlocksTokens.semanticColor.action.secondary.progressive.press.foreground}`
     },
-    paddingBlockStart: wonderBlocksTokens.sizing.size_100,
-    paddingBlockEnd: wonderBlocksTokens.sizing.size_225,
+    paddingBlockStart: wonderBlocksTokens.sizing.size_080,
+    paddingBlockEnd: wonderBlocksTokens.sizing.size_180,
     [wonderBlocksTokens.breakpoint.mediaQuery.mdOrLarger]: {
-      paddingBlockStart: wonderBlocksTokens.sizing.size_250,
-      paddingBlockEnd: wonderBlocksTokens.sizing.size_300
+      paddingBlockStart: wonderBlocksTokens.sizing.size_200,
+      paddingBlockEnd: wonderBlocksTokens.sizing.size_240
     }
   },
   current: {
@@ -203,14 +203,14 @@ const styles = aphrodite.StyleSheet.create({
     position: "relative",
     whiteSpace: "nowrap",
     textDecoration: "none",
-    ":hover": {
+    [":hover:not([aria-disabled=true])"]: {
       textDecoration: "none",
       border: "none",
       outline: "none",
       color: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,
       backgroundColor: "transparent"
     },
-    ":active": {
+    [":active:not([aria-disabled=true])"]: {
       textDecoration: "none",
       border: "none",
       outline: "none",
@@ -220,7 +220,7 @@ const styles = aphrodite.StyleSheet.create({
       color: wonderBlocksTokens.semanticColor.action.secondary.progressive.default.foreground,
       border: "none",
       outline: "none",
-      boxShadow: `0 0 0 ${wonderBlocksTokens.sizing.size_025} ${wonderBlocksTokens.semanticColor.focus.inner}, 0 0 0 ${wonderBlocksTokens.sizing.size_050} ${wonderBlocksTokens.semanticColor.focus.outer}`,
+      boxShadow: `0 0 0 ${wonderBlocksTokens.sizing.size_020} ${wonderBlocksTokens.semanticColor.focus.inner}, 0 0 0 ${wonderBlocksTokens.sizing.size_040} ${wonderBlocksTokens.semanticColor.focus.outer}`,
       borderRadius: 0
     }
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-tabs",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "design": "v1",
   "description": "Tabs are used to control what content is shown",
   "main": "dist/index.js",
@@ -13,9 +13,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@khanacademy/wonder-blocks-core": "12.2.1",
-    "@khanacademy/wonder-blocks-tokens": "5.1.1",
-    "@khanacademy/wonder-blocks-typography": "3.1.3"
+    "@khanacademy/wonder-blocks-typography": "3.1.3",
+    "@khanacademy/wonder-blocks-tokens": "6.0.0",
+    "@khanacademy/wonder-blocks-core": "12.2.1"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",