@astryxdesign/core 0.1.7 → 0.1.8-canary.08a0957

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

@@ -10,6 +10,7 @@
   @property --x-126w13d { syntax: "*"; inherits: false;}
   @property --x-4drmnv { syntax: "*"; inherits: false;}
   @property --x-animationDelay { syntax: "*"; inherits: false;}
+  @property --x-backgroundColor { syntax: "*"; inherits: false;}
   @property --x-borderWidth { syntax: "*"; inherits: false;}
   @property --x-bottom { syntax: "*"; inherits: false;}
   @property --x-counterReset { syntax: "*"; inherits: false;}
@@ -73,7 +74,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 +255,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 +372,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 +423,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)}
@@ -549,6 +555,7 @@
   .x24i8r5:not(#\#):not(#\#):not(#\#){background-color:var(--color-warning-muted)}
   .x1q8g9m5:not(#\#):not(#\#):not(#\#){background-color:var(--color-warning)}
   .x1fd97le:not(#\#):not(#\#):not(#\#){background-color:var(--table-sticky-background,var(--color-background-card))}
+  .xl8spv7:not(#\#):not(#\#):not(#\#){background-color:var(--x-backgroundColor)}
   .x1vrk509:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-background-muted),var(--color-background-muted))}
   .x14bno8m:not(#\#):not(#\#):not(#\#){background-image:linear-gradient(var(--color-neutral),var(--color-neutral))}
   .x18o3ruo:not(#\#):not(#\#):not(#\#){background-image:none}
@@ -698,12 +705,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 +854,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 +1000,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 +1047,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 +1120,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 +1200,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 +1221,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 +1424,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 +1438,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}