@astryxdesign/core 0.4.0 → 0.4.1-canary.f4868b2

package/dist/Timestamp/Timestamp.js

@@ -289,8 +289,14 @@ export function Timestamp({
     isTimezoneShown
   }) : '';
 
-  // Full absolute text for tooltip and aria-label
+  // Full absolute text for the tooltip (visible — keeps the compact timezone
+  // abbreviation) and for the AT-facing aria-label, which spells the timezone
+  // out in full: abbreviations like "PST" or "GMT+2" are unexpanded
+  // abbreviations to a screen-reader user (WCAG 3.1.4).
   const fullAbsoluteText = isValidDate ? formatInstant(date, 'full') : '';
+  const ariaLabelText = isValidDate ? formatInstant(date, 'full', {
+    timeZoneNameStyle: 'long'
+  }) : '';
 
   // Live updates
   useEffect(() => {
@@ -343,8 +349,13 @@ export function Timestamp({
     ...timestampProps,
     children: /*#__PURE__*/_jsx("time", {
       ref: mergeRefs(ref, timeRef),
-      dateTime: isoString,
-      "aria-label": isRelativeFormat(effectiveFormat) ? fullAbsoluteText : undefined
+      dateTime: isoString
+      // `ariaLabelText` is '' only for an invalid date, which bails out
+      // before rendering — but keep the guard local: an empty aria-label
+      // must be omitted entirely (not rendered as aria-label="") so AT
+      // falls back to reading the visible <time> content.
+      ,
+      "aria-label": isRelativeFormat(effectiveFormat) && ariaLabelText !== '' ? ariaLabelText : undefined
       // The hover card is anchored here with focusTrigger="always", which
       // attaches focus listeners but does not itself make the anchor
       // focusable. A bare <time> is not focusable, so without a tab stop

package/dist/Timestamp/formatInstant.d.ts

@@ -30,6 +30,16 @@ export interface FormatInstantOptions {
      * @default false
      */
     isTimezoneShown?: boolean;
+    /**
+     * How the zone name is spelled when a format carries one. `'short'` is the
+     * abbreviation ("PST"); `'long'` spells it out ("Pacific Standard Time").
+     * Only `'full'` honours it — it is the one format that always names its zone.
+     * The spelled-out form backs a relative timestamp's accessible name, where an
+     * abbreviation reads as an unexpanded initialism to a screen reader
+     * (WCAG 3.1.4); every visible surface keeps the abbreviation.
+     * @default 'short'
+     */
+    timeZoneNameStyle?: 'short' | 'long';
 }
 /**
  * Renders one instant in one absolute format.
@@ -37,5 +47,5 @@ export interface FormatInstantOptions {
  * Pure: the same arguments always produce the same string for a given host
  * locale (and, when no `timeZone` is given, host zone).
  */
-export declare function formatInstant(date: Date, format: InstantFormat, { timeZone, isTimezoneShown }?: FormatInstantOptions): string;
+export declare function formatInstant(date: Date, format: InstantFormat, { timeZone, isTimezoneShown, timeZoneNameStyle, }?: FormatInstantOptions): string;
 //# sourceMappingURL=formatInstant.d.ts.map

package/dist/Timestamp/formatInstant.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"formatInstant.d.ts","sourceRoot":"","sources":["../../src/Timestamp/formatInstant.ts"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAMjD;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GACvB,OAAO,CAAC,eAAe,EAAE,UAAU,GAAG,gBAAgB,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,oBAAoB;IACnC;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6ED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,aAAa,EACrB,EAAC,QAAQ,EAAE,eAAuB,EAAC,GAAE,oBAAyB,GAC7D,MAAM,CAgER"}
+{"version":3,"file":"formatInstant.d.ts","sourceRoot":"","sources":["../../src/Timestamp/formatInstant.ts"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAMjD;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GACvB,OAAO,CAAC,eAAe,EAAE,UAAU,GAAG,gBAAgB,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;AAE5E,MAAM,WAAW,oBAAoB;IACnC;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;;;;;OAQG;IACH,iBAAiB,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;CACtC;AA6ED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,aAAa,EACrB,EACE,QAAQ,EACR,eAAuB,EACvB,iBAA2B,GAC5B,GAAE,oBAAyB,GAC3B,MAAM,CAiER"}

package/dist/Timestamp/formatInstant.js

@@ -117,7 +117,8 @@ function getWallClock(date, timeZone) {
  */
 export function formatInstant(date, format, {
   timeZone,
-  isTimezoneShown = false
+  isTimezoneShown = false,
+  timeZoneNameStyle = 'short'
 } = {}) {
   const zone = timeZone === undefined ? {} : {
     timeZone
@@ -129,6 +130,7 @@ export function formatInstant(date, format, {
     case 'full':
       return new Intl.DateTimeFormat(undefined, {
         ...FULL_OPTIONS,
+        timeZoneName: timeZoneNameStyle,
         ...zone
       }).format(date);
     case 'date':

package/dist/TopNav/TopNavMegaMenu.js

@@ -439,7 +439,7 @@ function DrawerMegaMenu({
       "aria-controls": `${menuId}-items`,
       ...mergeProps(themeProps('top-nav-mega-menu', {
         mode: 'drawer'
-      }), stylex.props(navItemStyles.item, styles.drawerHeader)),
+      }), focusOutlineProps.focusVisible(navItemStyles.item, styles.drawerHeader)),
       children: [label, /*#__PURE__*/_jsx(Icon, {
         icon: "chevronDown",
         size: "sm",

package/dist/TopNav/TopNavMegaMenuItem.js

@@ -126,7 +126,7 @@ export function TopNavMegaMenuItem({
       ...elementProps,
       ...mergeProps(themeProps('top-nav-mega-menu-item', {
         mode: 'drawer'
-      }), stylex.props(navItemStyles.item, styles.drawerItem)),
+      }), focusOutlineProps.focusVisible(navItemStyles.item, styles.drawerItem)),
       children: [icon && /*#__PURE__*/_jsx("div", {
         ...{
           className: "x78zum5 x6s0dn4 xl56j7k x1td3qas x10w6t97 xh6dtrn x17x4s8c x2lah0s xv9yike xjc2qm6"

package/dist/TopNav/TopNavMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8L5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,GAChB,EAAE,eAAe,4BAkOjB;yBAxOe,UAAU"}
+{"version":3,"file":"TopNavMenu.d.ts","sourceRoot":"","sources":["../../src/TopNav/TopNavMenu.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,EAAE,EAKZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAQf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA8L5C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAMD,MAAM,WAAW,eAAgB,SAAQ,SAAS,CAAC,iBAAiB,CAAC;IACnE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,kBAAkB,EAAE,CAAC;IAE5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AAEH,wBAAgB,UAAU,CAAC,EACzB,GAAG,EACH,KAAK,EACL,KAAK,EACL,KAAW,EACX,SAAe,GAChB,EAAE,eAAe,4BAwOjB;yBA9Oe,UAAU"}

package/dist/TopNav/TopNavMenu.js

@@ -272,7 +272,7 @@ export function TopNavMenu({
         onClick: () => setDrawerExpanded(v => !v),
         "aria-expanded": drawerExpanded,
         "aria-controls": `${menuId}-items`,
-        ...stylex.props(navItemStyles.item, drawerStyles.header),
+        ...focusOutlineProps.focusVisible(navItemStyles.item, drawerStyles.header),
         children: [label, /*#__PURE__*/_jsx(Icon, {
           icon: "chevronDown",
           size: "sm",
@@ -299,7 +299,7 @@ export function TopNavMenu({
               item.onClick?.();
               closeMobileNav();
             },
-            ...stylex.props(navItemStyles.item, drawerStyles.item),
+            ...focusOutlineProps.focusVisible(navItemStyles.item, drawerStyles.item),
             children: [item.icon && /*#__PURE__*/_jsx("span", {
               ...{
                 className: "x2lah0s xw4jnvo x1qx5ct2"

package/dist/VisuallyHidden/VisuallyHidden.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;;;;;GAMG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,WAAW,CAAC,EACtB,WAAW,GAAG,OAAO,CACtB;IACC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,EAAE,EAAE,OAAgB,EACpB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,0FAarB;yBAlBe,cAAc"}
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAEA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;;;;;GAMG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,WAAW,CAAC,EACtB,WAAW,GAAG,OAAO,CACtB;IACC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,EAAE,EAAE,OAAgB,EACpB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,0FAarB;yBAlBe,cAAc"}

package/dist/VisuallyHidden/VisuallyHidden.js

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file VisuallyHidden.tsx
  * @input Uses React createElement/ElementType, stylex
@@ -15,6 +13,7 @@
  * - /apps/storybook/stories/VisuallyHidden.stories.tsx
  * - /packages/cli/assets/templates/blocks/components/VisuallyHidden/ (showcase blocks)
  */
+
 import { createElement } from 'react';
 import * as stylex from '@stylexjs/stylex';
 

package/dist/VisuallyHidden/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/index.ts"],"names":[],"mappings":"AAEA;;;;;;;GAOG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC"}

package/dist/VisuallyHidden/index.js

@@ -1,7 +1,5 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 
-'use client';
-
 /**
  * @file index.ts
  * @input Imports from VisuallyHidden.tsx
@@ -10,4 +8,5 @@
  *
  * SYNC: When modified, update /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
  */
+
 export { VisuallyHidden } from "./VisuallyHidden.js";

package/dist/astryx.css

@@ -58,6 +58,7 @@
   :root, .xj0fimd{--color-accent:light-dark(#0064E0, #2694FE);--color-accent-muted:light-dark(#0082FB33, #0082FB3F);--color-on-accent:light-dark(#FFFFFF, #FFFFFF);--color-neutral:light-dark(rgba(5, 54, 89, 0.1), rgba(223, 226, 229, 0.2));--color-background-surface:light-dark(#FFFFFF, #1F1F22);--color-background-body:light-dark(#F1F4F7, #111112);--color-overlay:light-dark(#01122866, #11111299);--color-overlay-hover:light-dark(#0536590C, #FFFFFF0C);--color-overlay-pressed:light-dark(#05365919, #FFFFFF19);--color-background-muted:light-dark(#0536590C, #1111127F);--color-text-primary:light-dark(#0A1317, #DFE2E5);--color-text-secondary:light-dark(#4E606F, #AAAFB5);--color-text-disabled:light-dark(#A4B0BC, #6F747C);--color-text-accent:light-dark(#0064E0, #3E9EFB);--color-on-dark:light-dark(#FFFFFF, #FFFFFF);--color-on-light:light-dark(#000000, #000000);--color-icon-accent:light-dark(#0064E0, #2694FE);--color-icon-primary:light-dark(#0A1317, #DFE2E5);--color-icon-secondary:light-dark(#4E606F, #AAAFB5);--color-icon-disabled:light-dark(#A4B0BC, #6F747C);--color-background-card:light-dark(#FFFFFF, #1F1F22);--color-background-popover:light-dark(#FFFFFF, #28292C);--color-background-inverted:light-dark(#0A1317, #FFFFFF);--color-background-error-inverted:light-dark(#AA071E, #E3193B);--color-success:light-dark(#0D8626, #0D8626);--color-success-muted:light-dark(#0B991F33, #0B991F3F);--color-on-success:light-dark(#FFFFFF, #FFFFFF);--color-error:light-dark(#E3193B, #F5394F);--color-error-muted:light-dark(#E3193B33, #F5394F3F);--color-on-error:light-dark(#FFFFFF, #FFFFFF);--color-warning:light-dark(#E9AF08, #F2C00B);--color-warning-muted:light-dark(#E2A40033, #E2A4003F);--color-on-warning:light-dark(#0A1317, #0A1317);--color-border:light-dark(#05365919, #F2F4F619);--color-border-emphasized:light-dark(#CCD3DB, #494D53);--color-skeleton:light-dark(#CCD3DB, #5A5E66);--color-track:light-dark(#CCD3DB, #5A5E66);--color-shadow:light-dark(rgba(5, 54, 89, 0.1), rgba(0, 0, 0, 0.3));--color-tint-hover:light-dark(black, white);--color-background-blue:light-dark(#0171E333, #0171E333);--color-border-blue:light-dark(#0064E0, #2694FE);--color-icon-blue:light-dark(#0064E0, #2694FE);--color-text-blue:light-dark(#042F97, #AFD7FF);--color-background-cyan:light-dark(#03A7D733, #03A7D733);--color-border-cyan:light-dark(#089DD0, #0171A4);--color-icon-cyan:light-dark(#00ACC1, #26C6DA);--color-text-cyan:light-dark(#014975, #A1EEF9);--color-background-gray:light-dark(#0A131733, #666A724C);--color-border-gray:light-dark(#647685, #748695);--color-icon-gray:light-dark(#4E606F, #AAAFB5);--color-text-gray:light-dark(#0A1317, #E7EAED);--color-background-green:light-dark(#24BB5E33, #24BB5E33);--color-border-green:light-dark(#0D8626, #0B991F);--color-icon-green:light-dark(#0D8626, #26A756);--color-text-green:light-dark(#09441F, #A5F690);--color-background-orange:light-dark(#F2790233, #F2790233);--color-border-orange:light-dark(#EB6E00, #B34A01);--color-icon-orange:light-dark(#E9690B, #FB8C00);--color-text-orange:light-dark(#6B2203, #FDB876);--color-background-pink:light-dark(#E638B333, #E638B333);--color-border-pink:light-dark(#F351C0, #C02294);--color-icon-pink:light-dark(#C2185B, #EC407A);--color-text-pink:light-dark(#650053, #FEADE3);--color-background-purple:light-dark(#7952FF33, #7952FF33);--color-border-purple:light-dark(#9081FF, #7340FE);--color-icon-purple:light-dark(#5B08D8, #7952FF);--color-text-purple:light-dark(#3E0697, #B3B0FE);--color-background-red:light-dark(#E3193B33, #E3193B33);--color-border-red:light-dark(#E3193B, #F5394F);--color-icon-red:light-dark(#D31130, #E3193B);--color-text-red:light-dark(#7B0210, #FFB2B8);--color-background-teal:light-dark(#0DB7AF33, #0DB7AF33);--color-border-teal:light-dark(#08A3A3, #08767D);--color-icon-teal:light-dark(#009688, #26A69A);--color-text-teal:light-dark(#083943, #40DCCD);--color-background-yellow:light-dark(#E2A40033, #E2A40033);--color-border-yellow:light-dark(#C58600, #B47700);--color-icon-yellow:light-dark(#FBC02D, #FFEE58);--color-text-yellow:light-dark(#753F07, #FBCE03);}
   :root, .x14lkjui{--duration-fast-min:130ms;--duration-fast:175ms;--duration-fast-max:230ms;--duration-medium-min:310ms;--duration-medium:410ms;--duration-medium-max:550ms;--duration-slow-min:730ms;--duration-slow:975ms;--duration-slow-max:1300ms;}
   :root, .xf09i69{--ease-standard:cubic-bezier(0.24, 1, 0.4, 1);}
+  :root, .xzxs3qz{--focus-outline-width:2px;--focus-outline-style:solid;--focus-outline-color:var(--color-accent);--focus-outline-offset:3px;}
   :root, .x5tdzeq{--font-family-body:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-family-code:"SF Mono", Monaco, Consolas, monospace;--font-family-heading:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}
   :root, .x1q1ms06{--font-size-4xs:0.375rem;--font-size-3xs:0.4375rem;--font-size-2xs:0.5rem;--font-size-xs:0.625rem;--font-size-sm:0.75rem;--font-size-base:0.875rem;--font-size-lg:1.0625rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.8125rem;--font-size-4xl:2.1875rem;--font-size-5xl:2.625rem;}
   :root, .x1ccmotb{--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;}
@@ -119,7 +120,7 @@
   .xfb5lyl{--astryx-section-padding:var(--spacing-5)}
   .x1tig3w6{--astryx-section-padding:var(--spacing-6)}
   .x1szikzq{--astryx-section-padding:var(--spacing-8)}
-  .xkzo27j{--button-focus-offset:3px}
+  .x16bblx1{--button-focus-offset:var(--focus-outline-offset)}
   .x1v15ycx{--button-icon-only-aspect:1 / 1}
   .x1mtvhk1{--color-syntax-background:transparent}
   .x18nyedi{--container-max-height:var(--x---container-max-height)}
@@ -287,8 +288,8 @@
   .xkce8z9{--separator-display:flex}
   .xpa4xmd{--tree-list-indent:var(--spacing-4)}
   .x1xbi2jf{--tree-list-row-gap:var(--spacing-0-5)}
-  .x1tcr69y:focus-visible{--_focus-outline-offset:3px}
-  .x1bqhfga:focus-visible{--_focus-outline:2px solid var(--color-accent)}
+  .xqchwus:focus-visible{--_focus-outline-offset:var(--focus-outline-offset)}
+  .xqih627:focus-visible{--_focus-outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color)}
   .x1mjsb9v:focus-within{--_reveal-delay:0s,0s}
   .xi33vf3:focus-within{--_reveal-opacity:1}
   .xoa21yc:focus-within{--_reveal-position:static}
@@ -475,11 +476,9 @@
   .xk2sxw7:focus-within:not(#\#):not(#\#){border-color:var(--color-error)}
   .xyq33ac:focus-within:not(#\#):not(#\#){border-color:var(--color-success)}
   .xa1yw2k:focus-within:not(#\#):not(#\#){border-color:var(--color-warning)}
-  .x17nn4n9:focus-visible:not(#\#):not(#\#){outline:2px solid var(--color-accent)}
-  .x1gj1ihy.x1gj1ihy:where(.x1iwu4tg:has(:focus-visible) *):not(#\#):not(#\#){outline:2px solid var(--color-accent)}
-  .x1p25gnr:focus-visible:not(#\#):not(#\#){outline:var(--border-width) solid var(--color-accent)}
+  .xafswnp.xafswnp:where(.x1iwu4tg:has(:focus-visible) *):not(#\#):not(#\#){outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color)}
   .x1dordxg:focus-within:not(#\#):not(#\#){overflow:visible}
-  .x1irc7jg:has(:focus-visible):not(#\#):not(#\#){outline:2px solid var(--color-accent)}
+  .x16s19ga:has(:focus-visible):not(#\#):not(#\#){outline:var(--focus-outline-width) var(--focus-outline-style) var(--focus-outline-color)}
   .x64lkcz:focus:not(#\#):not(#\#){border-color:var(--color-error)}
   .x1lglk5v:focus:not(#\#):not(#\#){border-color:var(--color-success)}
   .x12sck4v:focus:not(#\#):not(#\#){border-color:var(--color-warning)}
@@ -945,7 +944,6 @@
   .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}
   .x1kvmbwa:not(#\#):not(#\#):not(#\#){outline-offset:var(--_focus-outline-offset,0)}
   .x1t137rt:not(#\#):not(#\#):not(#\#){outline-style:none}
   .x1k57tk5:not(#\#):not(#\#):not(#\#){outline-width:0}
@@ -1094,6 +1092,7 @@
   .x12zzom9:not(#\#):not(#\#):not(#\#){transition-property:border-color,box-shadow}
   .xshfolx:not(#\#):not(#\#):not(#\#){transition-property:border-color}
   .x16mfhj0:not(#\#):not(#\#):not(#\#){transition-property:box-shadow,border-color}
+  .xkdsq27:not(#\#):not(#\#):not(#\#){transition-property:box-shadow}
   .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}
@@ -1161,14 +1160,14 @@
   .x25t5g8:focus-visible:not(#\#):not(#\#):not(#\#){opacity:1}
   .xof6bs:is(th:hover *):not(#\#):not(#\#):not(#\#){opacity:1}
   .xofkqq2:popover-open:not(#\#):not(#\#):not(#\#){opacity:1}
-  .xzunyri:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--color-accent)}
   .x1e0x2sz:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--color-error)}
-  .x1edzap1.x1edzap1:where(.x1iwu4tg:has(:focus-visible) *):not(#\#):not(#\#):not(#\#){outline-offset:2px}
+  .xx47ajj:focus-visible:not(#\#):not(#\#):not(#\#){outline-color:var(--focus-outline-color)}
   .x7s97pk:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:2px}
-  .xj3ae5l:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:3px}
   .x13aywxo:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--button-focus-offset)}
-  .x9v5kkp:focus-visible:not(#\#):not(#\#):not(#\#){outline-style:solid}
-  .x784prv:focus-visible:not(#\#):not(#\#):not(#\#){outline-width:2px}
+  .x1vwwbsn:focus-visible:not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
+  .xwz5zln.xwz5zln:where(.x1iwu4tg:has(:focus-visible) *):not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
+  .x1jhp3zv:focus-visible:not(#\#):not(#\#):not(#\#){outline-style:var(--focus-outline-style)}
+  .x1vidyx5:focus-visible:not(#\#):not(#\#):not(#\#){outline-width:var(--focus-outline-width)}
   .xbt4iw:focus-within:not(#\#):not(#\#):not(#\#){pointer-events:auto}
   .x1mqgsch:is([data-astryx-scrolling]):not(#\#):not(#\#):not(#\#){scrollbar-width:none}
   .xaafvuh:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:scaleX(-1) rotate(0deg)}
@@ -1189,12 +1188,13 @@
   .xxd14kb:has(+ [popover]:last-child):not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
   .x1ir7nn6:has(+ [popover] + [popover]:last-child):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
   .xpufgd0:has(+ [popover]:last-child):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
+  .x1btxeh5:has(input:focus-visible):not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 2px var(--color-accent)}
   .x92e2el:has(> [data-astryx-edge-comp]:last-child):not(#\#):not(#\#):not(#\#){margin-inline-end:var(--x-4drmnv)}
   .x1kftj4p:has(> [data-astryx-edge-comp]:first-child):not(#\#):not(#\#):not(#\#){margin-inline-start:var(--x-126w13d)}
-  .xee0hk0:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-color:var(--color-accent)}
-  .xscfbxq:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-offset:3px}
-  .xnnj0qo:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-style:solid}
-  .x1odlxkb:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-width:2px}
+  .x1uy843r:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-color:var(--focus-outline-color)}
+  .x1jumodi:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-offset:var(--focus-outline-offset)}
+  .xciu248:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-style:var(--focus-outline-style)}
+  .x11j6mr8:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-width:var(--focus-outline-width)}
   .x1betex2:has(.astryx-navicon):not(#\#):not(#\#):not(#\#){padding-inline-start:0}
   .x1xrp5p4:first-child:not(#\#):not(#\#):not(#\#){border-end-start-radius:var(--radius-element)}
   .xyf0ibl:first-child:not(#\#):not(#\#):not(#\#){border-inline-start-style:none}
@@ -1283,6 +1283,8 @@
   @media (hover: hover){.x4z56r7.x4z56r7:hover:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-primary),var(--color-tint-hover) 15%)}}
   @media (hover: hover){.x7ruf5d.x7ruf5d:hover:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-secondary),var(--color-tint-hover) 15%)}}
   @media (hover: hover){.x140uwzg.x140uwzg:hover:not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}}
+  @media (forced-colors: active){.x1vo6n7o.x1vo6n7o:active:not(#\#):not(#\#):not(#\#){background-color:Highlight}}
+  @media (hover: hover){@media (forced-colors: active){.x1jawyga.x1jawyga.x1jawyga:hover:not(#\#):not(#\#):not(#\#){background-color:Highlight}}}
   .xib2hle:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border-emphasized)}
   .xw8gpjh:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border)}
   .x1q0q8m5:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-style:solid}
@@ -1442,6 +1444,7 @@
   .x1d77m7x:not(#\#):not(#\#):not(#\#):not(#\#){min-width:140px}
   .x5w4yej:not(#\#):not(#\#):not(#\#):not(#\#){min-width:160px}
   .xfb3i0g:not(#\#):not(#\#):not(#\#):not(#\#){min-width:180px}
+  .xgomdpo:not(#\#):not(#\#):not(#\#):not(#\#){min-width:1rem}
   .x1jzhcrs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:200px}
   .xt4ypqs:not(#\#):not(#\#):not(#\#):not(#\#){min-width:20px}
   .x12rczxh:not(#\#):not(#\#):not(#\#):not(#\#){min-width:220px}