@astryxdesign/core 0.1.7 → 0.1.8-canary.c5fa19b

package/dist/Toolbar/Toolbar.js

@@ -180,6 +180,7 @@ export function Toolbar({
   const hasCenterContent = centerContent != null;
   const hasStartContent = startContent != null;
   const hasEndContent = endContent != null;
+  const hasBottomDivider = dividers?.includes('bottom') ?? false;
   const gapVar = spacingVars[spacingStepToVar[gap]];
   const {
     listRef,
@@ -242,7 +243,13 @@ export function Toolbar({
         onBlur: handleToolbarBlur,
         ...mergeProps(themeProps('toolbar', {
           size
-        }), stylex.props(hasCenterContent ? styles.baseGrid : styles.baseFlex, orientation === 'vertical' && styles.vertical, sizeStyles.base, dynamicStyles.gap(gapVar), dynamicStyles.tabIndicatorBottom(`calc(-1 * (${blockPaddingVarForSize[size]}${dividers?.includes('bottom') ? ' + 1px' : ''}))`))),
+        }), stylex.props(hasCenterContent ? styles.baseGrid : styles.baseFlex, orientation === 'vertical' && styles.vertical, sizeStyles.base, dynamicStyles.gap(gapVar),
+        // Only drop the tab indicator through the toolbar's block padding
+        // onto the rail when a bottom divider is actually present.
+        // Without a divider, leave `--_tab-indicator-bottom` unset so a
+        // nested TabList's indicator keeps its own default (hugging the
+        // tab) instead of floating down into the toolbar's padding.
+        hasBottomDivider && dynamicStyles.tabIndicatorBottom(`calc(-1 * (${blockPaddingVarForSize[size]} + 1px))`))),
         ...props,
         children: [hasCenterContent ?
         /*#__PURE__*/

package/dist/TreeList/TreeListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AAqNrD,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BA+L3B;yBArNe,YAAY"}
+{"version":3,"file":"TreeListItem.d.ts","sourceRoot":"","sources":["../../src/TreeList/TreeListItem.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;GAUG;AAEH,OAAO,EAAiB,KAAK,SAAS,EAAC,MAAM,OAAO,CAAC;AAcrD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,iBAAiB,CAAC;AA8NrD,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,OAAO,CAAC;IAChB,eAAe,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACxC,UAAU,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,OAAO,EAAE,eAAe,CAAC;IACzB,uEAAuE;IACvE,gBAAgB,CAAC,EAAE,SAAS,CAAC;IAC7B,wEAAwE;IACxE,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,UAAU,EAAE,OAAO,CAAC;CACrB;AAMD,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EACF,KAAK,EACL,WAAW,EACX,YAAY,EACZ,UAAU,EACV,OAAO,EACP,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,UAAkB,EAClB,WAAW,EACX,WAAW,EACX,MAAM,EACN,eAAe,EACf,UAAU,EACV,QAAQ,EACR,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,OAAO,EACP,UAAU,GACX,EAAE,yBAAyB,+BA+L3B;yBArNe,YAAY"}

package/dist/TreeList/TreeListItem.js

@@ -21,8 +21,6 @@ import { getIcon } from "../Icon/globalIconRegistry.js";
 import { mergeProps } from "../utils/index.js";
 import { useLinkComponent } from "../Link/useLinkComponent.js";
 import { TreeListBranches } from "./TreeListBranches.js";
-import "./treeListItem.markers.stylex.js";
-import { treeItemScope } from "./treeListItem.markers.stylex.js";
 import { themeProps } from "../utils/themeProps.js";
 import { useTranslator } from "../i18n/index.js";
 
@@ -31,15 +29,6 @@ import { useTranslator } from "../i18n/index.js";
 // =============================================================================
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const styles = {
-  wrapper: {
-    kH6xsr: "x3ct3a4",
-    kogj98: "x1ghz6dp",
-    kmVPX3: "x1717udv",
-    kVAEAm: "x1n2onr6",
-    kzqmXN: "xh8yej3",
-    kI3sdo: "x1a2a7pz",
-    $$css: true
-  },
   contentWrapper: {
     kaIpWk: "xh6dtrn",
     k1xSpc: "x78zum5",
@@ -62,8 +51,8 @@ const styles = {
     $$css: true
   },
   focusVisibleOutline: {
-    kI3sdo: "x1a2a7pz xr21g96 x1irc7jg",
-    kInvED: "x1wfwxd8 xs4y3kv xdjuwb3",
+    kI3sdo: "x11h0toi x1irc7jg",
+    kInvED: "x1g710d4 xdjuwb3",
     $$css: true
   },
   disabled: {
@@ -299,7 +288,9 @@ export function TreeListItem({
     "data-tree-id": id,
     "data-tree-level": nestedLevel + 1,
     "data-tree-disabled": isDisabled || undefined,
-    ...stylex.props(styles.wrapper, treeItemScope),
+    ...{
+      className: "x3ct3a4 x1ghz6dp x1717udv x1n2onr6 xh8yej3 x1a2a7pz x1hb5tod xtoutpx x1f8er9e x1aefuf3"
+    },
     children: [/*#__PURE__*/_jsx("div", {
       ...{
         className: "x12gdq22"

package/dist/astryx.css

@@ -73,7 +73,10 @@
   .xqwz7mz{--_hovercard-radius:var(--radius-container)}
   .x18jk3ff{--_segmented-control-padding:var(--spacing-0-5)}
   .x9icjy1{--_segmented-control-radius:var(--radius-element)}
+  .xficto1{--_tab-indicator-bottom:calc(-1 * (var(--spacing-1) + var(--border-width)))}
   .xbrl7fg{--_tab-indicator-bottom:var(--x---_tab-indicator-bottom)}
+  .x1f8er9e{--_tree-focus-outline-offset:0}
+  .x1hb5tod{--_tree-focus-outline:none}
   .xnvcwyz{--astryx-section-padding:var(--spacing-0-5)}
   .xvdw317{--astryx-section-padding:var(--spacing-0)}
   .x1rj2uvf{--astryx-section-padding:var(--spacing-1-5)}
@@ -251,6 +254,8 @@
   .x1t5kicu{--layout-padding-outer-y:var(--spacing-9)}
   .xnpej1e{--radius-element:var(--radius-full)}
   .xkce8z9{--separator-display:flex}
+  .x1aefuf3:focus-visible{--_tree-focus-outline-offset:2px}
+  .xtoutpx:focus-visible{--_tree-focus-outline:2px solid var(--color-accent)}
   .x11woleg:focus-visible{--indicator-color:var(--color-accent)}
   .x1ibt0lz:first-child{--separator-display:none}
   .x1rht92:nth-child(even){--table-row-overlay:var(--color-background-muted)}
@@ -366,6 +371,7 @@
   .xhrcg97:not(#\#):not(#\#){margin-inline:var(--spacing-1)}
   .xvlecxo:not(#\#):not(#\#){margin-inline:var(--x-marginInline)}
   .x1a2a7pz:not(#\#):not(#\#){outline:none}
+  .x11h0toi:not(#\#):not(#\#){outline:var(--_tree-focus-outline,none)}
   .xysyzu8:not(#\#):not(#\#){overflow:auto}
   .x7giv3:not(#\#):not(#\#){overflow:clip}
   .xb3r6kr:not(#\#):not(#\#){overflow:hidden}
@@ -416,7 +422,6 @@
   .xq2gx43:not(#\#):not(#\#){transition:none}
   .x1ey1afo:not(#\#):not(#\#){transition:opacity var(--duration-fast)}
   .x1ob6yzd:not(#\#):not(#\#){transition:transform var(--duration-fast) var(--ease-standard)}
-  .xr21g96.xr21g96:where(.x1g2q90y:focus-visible *):not(#\#):not(#\#){outline:2px solid var(--color-accent)}
   .x6q1khz:focus-within:not(#\#):not(#\#){border-color:var(--color-accent)}
   .xk2sxw7:focus-within:not(#\#):not(#\#){border-color:var(--color-error)}
   .xyq33ac:focus-within:not(#\#):not(#\#){border-color:var(--color-success)}
@@ -698,12 +703,15 @@
   .x9ynric:not(#\#):not(#\#):not(#\#){font-family:var(--font-family-body)}
   .x9m5x89:not(#\#):not(#\#):not(#\#){font-family:var(--font-family-code)}
   .x1g81bgm:not(#\#):not(#\#):not(#\#){font-family:var(--font-family-heading)}
+  .xboafo0:not(#\#):not(#\#):not(#\#){font-size:.75rem}
+  .x1603h9y:not(#\#):not(#\#):not(#\#){font-size:1.25rem}
+  .xngnso2:not(#\#):not(#\#):not(#\#){font-size:1.5rem}
   .x1k6wstc:not(#\#):not(#\#):not(#\#){font-size:10px}
   .xfifm61:not(#\#):not(#\#):not(#\#){font-size:12px}
   .xif65rj:not(#\#):not(#\#):not(#\#){font-size:14px}
   .x1j61zf2:not(#\#):not(#\#):not(#\#){font-size:16px}
+  .x1jchvi3:not(#\#):not(#\#):not(#\#){font-size:1rem}
   .xwsyq91:not(#\#):not(#\#):not(#\#){font-size:20px}
-  .x1pvqxga:not(#\#):not(#\#):not(#\#){font-size:24px}
   .x1qlqyl8:not(#\#):not(#\#):not(#\#){font-size:inherit}
   .xhs0kqb:not(#\#):not(#\#):not(#\#){font-size:var(--font-size-2xl)}
   .x16a80zy:not(#\#):not(#\#):not(#\#){font-size:var(--font-size-2xs)}
@@ -844,9 +852,11 @@
   .xg01cxk:not(#\#):not(#\#):not(#\#){opacity:0}
   .x1hc1fzr:not(#\#):not(#\#):not(#\#){opacity:1}
   .x1clqncf:not(#\#):not(#\#):not(#\#){order:-1}
+  .x1g77sc7:not(#\#):not(#\#):not(#\#){order:0}
   .x1wfwxd8:not(#\#):not(#\#):not(#\#){outline-offset:0}
   .x1y3gkto:not(#\#):not(#\#):not(#\#){outline-offset:1px}
   .x1hl8ikr:not(#\#):not(#\#):not(#\#){outline-offset:2px}
+  .x1g710d4:not(#\#):not(#\#):not(#\#){outline-offset:var(--_tree-focus-outline-offset,0)}
   .x9y5y3v:not(#\#):not(#\#):not(#\#){overflow-clip-margin:1px}
   .x1mzt3pk:not(#\#):not(#\#):not(#\#){overflow-wrap:break-word}
   .x1h4wwuj:not(#\#):not(#\#):not(#\#){overflow-wrap:normal}
@@ -988,6 +998,7 @@
   .xshfolx:not(#\#):not(#\#):not(#\#){transition-property:border-color}
   .x16mfhj0:not(#\#):not(#\#):not(#\#){transition-property:box-shadow,border-color}
   .x1vix5yk:not(#\#):not(#\#):not(#\#){transition-property:color,background-color,box-shadow}
+  .x1gbuem2:not(#\#):not(#\#):not(#\#){transition-property:color,background-color}
   .x1mpt4pi:not(#\#):not(#\#):not(#\#){transition-property:color,text-decoration}
   .xt3l3uh:not(#\#):not(#\#):not(#\#){transition-property:color}
   .xjshnde:not(#\#):not(#\#):not(#\#){transition-property:grid-template-rows,padding}
@@ -1034,7 +1045,6 @@
   .x6cuj84:not(#\#):not(#\#):not(#\#){z-index:500}
   .x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
   .x1v2claj.x1v2claj:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}
-  .xs4y3kv.xs4y3kv:where(.x1g2q90y:focus-visible *):not(#\#):not(#\#):not(#\#){outline-offset:2px}
   .x3730vf.x3730vf:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){pointer-events:auto}
   .xuqivmr.xuqivmr:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){transform:translateY(0)}
   .x7v6acp.x7v6acp:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){visibility:visible}
@@ -1108,6 +1118,8 @@
   @media (max-width: 480px){.x1rpgqan.x1rpgqan:not(#\#):not(#\#):not(#\#){flex-direction:column}}
   @media (pointer: coarse){.x6pjikd.x6pjikd:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-body-size))}}
   @media (pointer: coarse){.xdk3u5w.xdk3u5w:not(#\#):not(#\#):not(#\#){font-size:max(1rem,var(--text-label-size))}}
+  @media (pointer: coarse){.x1jymrmb.x1jymrmb:not(#\#):not(#\#):not(#\#){margin-inline-start:auto}}
+  @media (pointer: coarse){.xozvky.xozvky:not(#\#):not(#\#):not(#\#){order:1}}
   @media (prefers-reduced-motion: reduce){.xg83hb1.xg83hb1:not(#\#):not(#\#):not(#\#){scroll-behavior:auto}}
   @media (prefers-reduced-motion: reduce){.xsagj69.xsagj69:not(#\#):not(#\#):not(#\#){transition-duration:.01ms}}
   @media (prefers-reduced-motion: reduce){.xzg1mie.xzg1mie:not(#\#):not(#\#):not(#\#){transition-duration:.01s}}
@@ -1186,11 +1198,14 @@
   .x13fuv20:not(#\#):not(#\#):not(#\#):not(#\#){border-top-style:solid}
   .x178xt8z:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:1px}
   .x11xkdxz:not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:var(--border-width)}
-  .xqmqy1e:not(#\#):not(#\#):not(#\#):not(#\#){bottom:-1px}
   .x1ey2m1c:not(#\#):not(#\#):not(#\#):not(#\#){bottom:0}
   .x1c7jfne:not(#\#):not(#\#):not(#\#):not(#\#){bottom:2px}
+  .xyi47jn:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--_tab-indicator-bottom,-1px)}
   .x1nqzi6q:not(#\#):not(#\#):not(#\#):not(#\#){bottom:var(--x-bottom)}
+  .xvle69y:not(#\#):not(#\#):not(#\#):not(#\#){height:.75rem}
   .xqtp20y:not(#\#):not(#\#):not(#\#):not(#\#){height:0}
+  .xmll18r:not(#\#):not(#\#):not(#\#):not(#\#){height:1.25rem}
+  .xam5rvr:not(#\#):not(#\#):not(#\#):not(#\#){height:1.5rem}
   .x5yr21d:not(#\#):not(#\#):not(#\#):not(#\#){height:100%}
   .xtdtrs8:not(#\#):not(#\#):not(#\#):not(#\#){height:100dvh}
   .xpyat2d:not(#\#):not(#\#):not(#\#):not(#\#){height:100px}
@@ -1204,6 +1219,7 @@
   .xlup9mm:not(#\#):not(#\#):not(#\#):not(#\#){height:16px}
   .xmix8c7:not(#\#):not(#\#):not(#\#):not(#\#){height:18px}
   .xjm9jq1:not(#\#):not(#\#):not(#\#):not(#\#){height:1px}
+  .x1l36t39:not(#\#):not(#\#):not(#\#):not(#\#){height:1rem}
   .x1qx5ct2:not(#\#):not(#\#):not(#\#):not(#\#){height:20px}
   .x17rw0jw:not(#\#):not(#\#):not(#\#):not(#\#){height:22px}
   .xxk0z11:not(#\#):not(#\#):not(#\#):not(#\#){height:24px}
@@ -1406,7 +1422,10 @@
   .xctzyg:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--spacing-2)}
   .xyx6v2t:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--spacing-3)}
   .xjbys53:not(#\#):not(#\#):not(#\#):not(#\#){top:var(--x-top)}
+  .x1jw3ynk:not(#\#):not(#\#):not(#\#):not(#\#){width:.75rem}
   .xnalus7:not(#\#):not(#\#):not(#\#):not(#\#){width:0}
+  .xwqq7k2:not(#\#):not(#\#):not(#\#):not(#\#){width:1.25rem}
+  .xp8d6y2:not(#\#):not(#\#):not(#\#):not(#\#){width:1.5rem}
   .xh8yej3:not(#\#):not(#\#):not(#\#):not(#\#){width:100%}
   .x1o6l61p:not(#\#):not(#\#):not(#\#):not(#\#){width:100dvw}
   .xn9wirt:not(#\#):not(#\#):not(#\#):not(#\#){width:100vw}
@@ -1417,6 +1436,7 @@
   .xzjbwwf:not(#\#):not(#\#):not(#\#):not(#\#){width:180px}
   .x1xp8n7a:not(#\#):not(#\#):not(#\#):not(#\#){width:18px}
   .x1i1rx1s:not(#\#):not(#\#):not(#\#):not(#\#){width:1px}
+  .xcdlrvm:not(#\#):not(#\#):not(#\#):not(#\#){width:1rem}
   .x1oysuqx:not(#\#):not(#\#):not(#\#):not(#\#){width:200px}
   .xw4jnvo:not(#\#):not(#\#):not(#\#):not(#\#){width:20px}
   .x17z2i9w:not(#\#):not(#\#):not(#\#):not(#\#){width:22px}