@a-type/ui 5.0.8 → 5.0.9

package/dist/esm/uno/preflights/user.d.ts

@@ -14,5 +14,6 @@ export interface UserPreflightOptions {
     cornerScale?: number;
     shadowSpread?: number;
     fontSize?: number;
+    focusColor?: 'black' | 'primary' | 'accent' | 'gray';
 }
-export declare const userPreflight: ({ saturation, primaryHue, accentHue, spacingScale, borderScale, cornerScale, shadowSpread, namedHues, fontSize, }: UserPreflightOptions) => import("unocss").Preflight<object>;
+export declare const userPreflight: ({ saturation, primaryHue, accentHue, spacingScale, borderScale, cornerScale, shadowSpread, namedHues, fontSize, focusColor, }: UserPreflightOptions) => import("unocss").Preflight<object>;

package/dist/esm/uno/preflights/user.js

@@ -2,7 +2,7 @@
 import { defaultPresetHues } from '../defaults.js';
 import { PROPS } from '../logic/properties.js';
 import { preflight } from './_util.js';
-export const userPreflight = ({ saturation = 50, primaryHue = defaultPresetHues.lemon.sourceHue, accentHue = defaultPresetHues.leek.sourceHue, spacingScale = 1, borderScale = 1, cornerScale = 1, shadowSpread = 1, namedHues, fontSize = 16, }) => preflight({
+export const userPreflight = ({ saturation = 50, primaryHue = defaultPresetHues.lemon.sourceHue, accentHue = defaultPresetHues.leek.sourceHue, spacingScale = 1, borderScale = 1, cornerScale = 1, shadowSpread = 1, namedHues, fontSize = 16, focusColor = 'accent', }) => preflight({
     getCSS: () => {
         return `
 @layer preflightBase {
@@ -15,6 +15,7 @@ export const userPreflight = ({ saturation = 50, primaryHue = defaultPresetHues.
 
 		${PROPS.USER.COLOR.PRIMARY_HUE}: ${primaryHue};
 		${PROPS.USER.COLOR.ACCENT_HUE}: ${accentHue};
+		${PROPS.USER.FOCUS_COLOR}: var(${focusColors[focusColor]});
 		${namedHues
             ? Object.entries(namedHues)
                 .flatMap(([name, config]) => [
@@ -32,4 +33,10 @@ export const userPreflight = ({ saturation = 50, primaryHue = defaultPresetHues.
 `;
     },
 });
+const focusColors = {
+    black: PROPS.MODE.BLACK,
+    primary: PROPS.PALETTE.NAMED_SHADES('primary').DARK,
+    accent: PROPS.PALETTE.NAMED_SHADES('accent').MID,
+    gray: PROPS.PALETTE.GRAY_SHADES.DARK,
+};
 //# sourceMappingURL=user.js.map

package/dist/esm/uno/preflights/user.js.map

@@ -1 +1 @@
-{"version":3,"file":"user.js","sourceRoot":"","sources":["../../../../src/uno/preflights/user.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAoBvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC7B,UAAU,GAAG,EAAE,EACf,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,EAC9C,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAC5C,YAAY,GAAG,CAAC,EAChB,WAAW,GAAG,CAAC,EACf,WAAW,GAAG,CAAC,EACf,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,GAAG,EAAE,GACS,EAAE,EAAE,CAC1B,SAAS,CAAC;IACT,MAAM,EAAE,GAAG,EAAE;QACZ,OAAO;;;IAGN,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,GAAG;IAC1C,KAAK,CAAC,IAAI,CAAC,YAAY,KAAK,WAAW;IACvC,KAAK,CAAC,IAAI,CAAC,aAAa,KAAK,YAAY;IACzC,KAAK,CAAC,IAAI,CAAC,YAAY,KAAK,WAAW;IACvC,KAAK,CAAC,IAAI,CAAC,aAAa,KAAK,YAAY;;IAEzC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,UAAU;IAC3C,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS;IAE1C,SAAS;YACR,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;iBACxB,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;gBAC5B,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,SAAS,GAAG;gBAC3D,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,KACzC,MAAM,CAAC,SACR,GAAG;aACH,CAAC;iBACD,IAAI,CAAC,IAAI,CAAC;YACb,CAAC,CAAC,EACJ;;;;eAIa,QAAQ;;;CAGtB,CAAC;IACA,CAAC;CACD,CAAC,CAAC"}
+{"version":3,"file":"user.js","sourceRoot":"","sources":["../../../../src/uno/preflights/user.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAqBvC,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAC7B,UAAU,GAAG,EAAE,EACf,UAAU,GAAG,iBAAiB,CAAC,KAAK,CAAC,SAAS,EAC9C,SAAS,GAAG,iBAAiB,CAAC,IAAI,CAAC,SAAS,EAC5C,YAAY,GAAG,CAAC,EAChB,WAAW,GAAG,CAAC,EACf,WAAW,GAAG,CAAC,EACf,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,GAAG,EAAE,EACb,UAAU,GAAG,QAAQ,GACC,EAAE,EAAE,CAC1B,SAAS,CAAC;IACT,MAAM,EAAE,GAAG,EAAE;QACZ,OAAO;;;IAGN,KAAK,CAAC,IAAI,CAAC,UAAU,KAAK,UAAU,GAAG,GAAG;IAC1C,KAAK,CAAC,IAAI,CAAC,YAAY,KAAK,WAAW;IACvC,KAAK,CAAC,IAAI,CAAC,aAAa,KAAK,YAAY;IACzC,KAAK,CAAC,IAAI,CAAC,YAAY,KAAK,WAAW;IACvC,KAAK,CAAC,IAAI,CAAC,aAAa,KAAK,YAAY;;IAEzC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,KAAK,UAAU;IAC3C,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS;IACzC,KAAK,CAAC,IAAI,CAAC,WAAW,SAAS,WAAW,CAAC,UAAU,CAAC;IAEvD,SAAS;YACR,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,SAAS,CAAC;iBACxB,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,MAAM,CAAC,EAAE,EAAE,CAAC;gBAC5B,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,MAAM,CAAC,SAAS,GAAG;gBAC3D,GAAG,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,IAAI,CAAC,KACzC,MAAM,CAAC,SACR,GAAG;aACH,CAAC;iBACD,IAAI,CAAC,IAAI,CAAC;YACb,CAAC,CAAC,EACJ;;;;eAIa,QAAQ;;;CAGtB,CAAC;IACA,CAAC;CACD,CAAC,CAAC;AAEJ,MAAM,WAAW,GAGb;IACH,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,KAAK;IACvB,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,IAAI;IACnD,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,GAAG;IAChD,IAAI,EAAE,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI;CACpC,CAAC"}

package/dist/esm/uno/rules/focus.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@unocss/preset-mini';
+import { Rule } from 'unocss';
+export declare const focusRules: Rule<Theme>[];

package/dist/esm/uno/rules/focus.js

@@ -0,0 +1,43 @@
+// @unocss-include
+import { PROPS } from '../logic/properties.js';
+export const focusRules = [
+    [
+        /^foc(?:-effect)?(-lg)?$/,
+        function* ([, size], { symbols }) {
+            yield {
+                [symbols.selector]: (selector) => `${selector}:focus-visible:not([data-focus-clicked]), ${selector}[data-focus-visible]`,
+                [PROPS.BUILT_IN.RING_COLOR]: `var(${PROPS.USER.FOCUS_COLOR})`,
+                [PROPS.BUILT_IN.RING_WIDTH]: size === '-lg' ? '4px' : '2px',
+                [PROPS.BUILT_IN.RING_STYLE]: 'solid',
+                [PROPS.BUILT_IN
+                    .RING_SHADOW]: `var(${PROPS.BUILT_IN.RING_INSET}) 0 0 0 var(${PROPS.BUILT_IN.RING_WIDTH}) var(${PROPS.BUILT_IN.RING_COLOR})`,
+                outline: 'none',
+                'box-shadow': `var(${PROPS.BUILT_IN.RING_OFFSET_SHADOW}), var(${PROPS.BUILT_IN.RING_SHADOW}), var(${PROPS.BUILT_IN.SHADOW})`,
+            };
+            yield {
+                [symbols.selector]: (selector) => `${selector}:focus`,
+                outline: 'none',
+            };
+        },
+    ],
+    [
+        /^foc-contained(-lg)?$/,
+        function* ([, size], { symbols }) {
+            yield {
+                [symbols.selector]: (selector) => `${selector}:has(:focus-visible:not([data-focus-clicked])), ${selector}:has([data-focus-visible])`,
+                [PROPS.BUILT_IN.RING_COLOR]: `var(${PROPS.USER.FOCUS_COLOR})`,
+                [PROPS.BUILT_IN.RING_WIDTH]: size === '-lg' ? '4px' : '2px',
+                [PROPS.BUILT_IN.RING_STYLE]: 'solid',
+                [PROPS.BUILT_IN
+                    .RING_SHADOW]: `0 0 0 var(${PROPS.BUILT_IN.RING_WIDTH}) var(${PROPS.BUILT_IN.RING_COLOR})`,
+                outline: 'none',
+                'box-shadow': `var(${PROPS.BUILT_IN.RING_OFFSET_SHADOW}), var(${PROPS.BUILT_IN.RING_SHADOW})`,
+            };
+            yield {
+                [symbols.selector]: (selector) => `${selector}>*:focus`,
+                outline: 'none',
+            };
+        },
+    ],
+];
+//# sourceMappingURL=focus.js.map

package/dist/esm/uno/rules/focus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../../src/uno/rules/focus.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAkB;IACxC;QACC,yBAAyB;QACzB,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE;YAC/B,MAAM;gBACL,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,CAChC,GAAG,QAAQ,6CAA6C,QAAQ,sBAAsB;gBACvF,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,IAAI,CAAC,WAAW,GAAG;gBAC7D,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;gBAC3D,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO;gBACpC,CAAC,KAAK,CAAC,QAAQ;qBACb,WAAW,CAAC,EAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,UAAU,eAAe,KAAK,CAAC,QAAQ,CAAC,UAAU,SAAS,KAAK,CAAC,QAAQ,CAAC,UAAU,GAAG;gBAC7H,OAAO,EAAE,MAAM;gBACf,YAAY,EAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,kBAAkB,UAAU,KAAK,CAAC,QAAQ,CAAC,WAAW,UAAU,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG;aAC5H,CAAC;YACF,MAAM;gBACL,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,GAAG,QAAQ,QAAQ;gBACrD,OAAO,EAAE,MAAM;aACf,CAAC;QACH,CAAC;KACD;IACD;QACC,uBAAuB;QACvB,QAAQ,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE;YAC/B,MAAM;gBACL,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,CAChC,GAAG,QAAQ,mDAAmD,QAAQ,4BAA4B;gBACnG,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO,KAAK,CAAC,IAAI,CAAC,WAAW,GAAG;gBAC7D,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,IAAI,KAAK,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK;gBAC3D,CAAC,KAAK,CAAC,QAAQ,CAAC,UAAU,CAAC,EAAE,OAAO;gBACpC,CAAC,KAAK,CAAC,QAAQ;qBACb,WAAW,CAAC,EAAE,aAAa,KAAK,CAAC,QAAQ,CAAC,UAAU,SAAS,KAAK,CAAC,QAAQ,CAAC,UAAU,GAAG;gBAC3F,OAAO,EAAE,MAAM;gBACf,YAAY,EAAE,OAAO,KAAK,CAAC,QAAQ,CAAC,kBAAkB,UAAU,KAAK,CAAC,QAAQ,CAAC,WAAW,GAAG;aAC7F,CAAC;YACF,MAAM;gBACL,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,EAAE,CAAC,GAAG,QAAQ,UAAU;gBACvD,OAAO,EAAE,MAAM;aACf,CAAC;QACH,CAAC;KACD;CACD,CAAC"}

package/dist/esm/uno/rules/index.d.ts

@@ -1 +1 @@
-export declare const rules: import("unocss").Rule[];
+export declare const rules: (import("unocss").StaticRule | import("unocss").DynamicRule<object> | import("unocss").DynamicRule<import("unocss").PresetUnoTheme>)[];

package/dist/esm/uno/rules/index.js

@@ -3,6 +3,7 @@ import { anchorRules } from './anchor.js';
 import { clipPathRules } from './clipPath.js';
 import { colorRules } from './color.js';
 import { containerRules } from './container.js';
+import { focusRules } from './focus.js';
 import { overflowRules } from './overflow.js';
 import { shadowRules } from './shadow.js';
 import { utilRules } from './util.js';
@@ -19,5 +20,6 @@ export const rules = [
     ...utilRules,
     ...clipPathRules,
     ...containerRules,
+    ...focusRules,
 ];
 //# sourceMappingURL=index.js.map

package/dist/esm/uno/rules/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/uno/rules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,yCAAyC;AACzC,kBAAkB;AAClB,gFAAgF;AAChF,MAAM;AAEN,uEAAuE;AAEvE,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,GAAG,UAAU;IACb,GAAG,WAAW;IACd,GAAG,aAAa;IAChB,GAAG,WAAW;IACd,GAAG,SAAS;IACZ,GAAG,aAAa;IAChB,GAAG,cAAc;CACjB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/uno/rules/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,MAAM,WAAW,CAAC;AAEtC,yCAAyC;AACzC,kBAAkB;AAClB,gFAAgF;AAChF,MAAM;AAEN,uEAAuE;AAEvE,MAAM,CAAC,MAAM,KAAK,GAAG;IACpB,GAAG,UAAU;IACb,GAAG,WAAW;IACd,GAAG,aAAa;IAChB,GAAG,WAAW;IACd,GAAG,SAAS;IACZ,GAAG,aAAa;IAChB,GAAG,cAAc;IACjB,GAAG,UAAU;CACb,CAAC"}

package/dist/esm/uno/theme/colors.d.ts

@@ -1,3 +1,3 @@
 import { Theme } from '@unocss/preset-mini';
 import { PreflightConfig } from '../preflights/index.js';
-export declare function makeThemeColors(options: PreflightConfig): Theme['colors'];
+export declare function makeThemeColors({ namedHues, }: PreflightConfig): Theme['colors'];

package/dist/esm/uno/theme/colors.js

@@ -1,11 +1,11 @@
 // @unocss-include
 import { PROPS } from '../logic/properties.js';
 const contrastClamp = 'clamp(0, (0.36 / y - 1) * infinity, 1)';
-export function makeThemeColors(options) {
+export function makeThemeColors({ namedHues, }) {
     return Object.assign({ none: 'transparent', transparent: 'transparent', current: 'currentColor', black: `var(${PROPS.PALETTE.NAMED_SHADES('high-contrast').INK})`, white: `var(${PROPS.PALETTE.NAMED_SHADES('high-contrast').WASH})`, wash: `var(${PROPS.PALETTE.GRAY_SHADES.WASH})`, 
         // magic tokens
-        contrast: `color(from var(${PROPS.BACKGROUND_COLOR.CONTRAST},var(${PROPS.BACKGROUND_COLOR.FINAL},var(${PROPS.BACKGROUND_COLOR.INHERITED},var(${PROPS.MODE.WHITE})))) xyz-d65 ${contrastClamp} ${contrastClamp} ${contrastClamp})`, bg: `var(${PROPS.BACKGROUND_COLOR.FINAL}, var(${PROPS.BACKGROUND_COLOR.INHERITED}, transparent))`, fg: `var(${PROPS.COLOR.FINAL}, var(${PROPS.COLOR.INHERITED}, var(${PROPS.MODE.BLACK})))`, color: `var(${PROPS.COLOR.FINAL}, var(${PROPS.COLOR.INHERITED}, var(${PROPS.MODE.BLACK})))`, border: `var(${PROPS.BORDER_COLOR.ALL.FINAL}, var(${PROPS.BORDER_COLOR.ALL.INHERITED}, transparent))`, primary: shadesOf(PROPS.PALETTE.NAMED_SHADES('primary')), accent: shadesOf(PROPS.PALETTE.NAMED_SHADES('accent')), attention: shadesOf(PROPS.PALETTE.NAMED_SHADES('attention')), success: shadesOf(PROPS.PALETTE.NAMED_SHADES('success')), main: shadesOf(PROPS.PALETTE.SHADES), gray: shadesOf(PROPS.PALETTE.GRAY_SHADES) }, (options.namedHues
-        ? Object.fromEntries(Object.keys(options.namedHues).map(([name]) => [
+        contrast: `color(from var(${PROPS.BACKGROUND_COLOR.CONTRAST},var(${PROPS.BACKGROUND_COLOR.FINAL},var(${PROPS.BACKGROUND_COLOR.INHERITED},var(${PROPS.MODE.WHITE})))) xyz-d65 ${contrastClamp} ${contrastClamp} ${contrastClamp})`, bg: `var(${PROPS.BACKGROUND_COLOR.FINAL}, var(${PROPS.BACKGROUND_COLOR.INHERITED}, transparent))`, fg: `var(${PROPS.COLOR.FINAL}, var(${PROPS.COLOR.INHERITED}, var(${PROPS.MODE.BLACK})))`, color: `var(${PROPS.COLOR.FINAL}, var(${PROPS.COLOR.INHERITED}, var(${PROPS.MODE.BLACK})))`, border: `var(${PROPS.BORDER_COLOR.ALL.FINAL}, var(${PROPS.BORDER_COLOR.ALL.INHERITED}, transparent))`, primary: shadesOf(PROPS.PALETTE.NAMED_SHADES('primary')), accent: shadesOf(PROPS.PALETTE.NAMED_SHADES('accent')), attention: shadesOf(PROPS.PALETTE.NAMED_SHADES('attention')), success: shadesOf(PROPS.PALETTE.NAMED_SHADES('success')), focus: `var(${PROPS.USER.FOCUS_COLOR})`, main: shadesOf(PROPS.PALETTE.SHADES), gray: shadesOf(PROPS.PALETTE.GRAY_SHADES) }, (namedHues
+        ? Object.fromEntries(Object.keys(namedHues).map(([name]) => [
             name,
             shadesOf(PROPS.PALETTE.NAMED_SHADES(name)),
         ]))

package/dist/esm/uno/theme/colors.js.map

@@ -1 +1 @@
-{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../../src/uno/theme/colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAG/C,MAAM,aAAa,GAAG,wCAAwC,CAAC;AAE/D,MAAM,UAAU,eAAe,CAAC,OAAwB;IACvD,uBACC,IAAI,EAAE,aAAa,EACnB,WAAW,EAAE,aAAa,EAC1B,OAAO,EAAE,cAAc,EAEvB,KAAK,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,GAAG,GAAG,EAChE,KAAK,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,GAAG,EACjE,IAAI,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,GAAG;QAE9C,eAAe;QACf,QAAQ,EAAE,kBAAkB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,QAAQ,KAAK,CAAC,gBAAgB,CAAC,KAAK,QAAQ,KAAK,CAAC,gBAAgB,CAAC,SAAS,QAAQ,KAAK,CAAC,IAAI,CAAC,KAAK,gBAAgB,aAAa,IAAI,aAAa,IAAI,aAAa,GAAG,EACjO,EAAE,EAAE,OAAO,KAAK,CAAC,gBAAgB,CAAC,KAAK,SAAS,KAAK,CAAC,gBAAgB,CAAC,SAAS,iBAAiB,EACjG,EAAE,EAAE,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,SAAS,KAAK,CAAC,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,EACxF,KAAK,EAAE,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,SAAS,KAAK,CAAC,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,EAC3F,MAAM,EAAE,OAAO,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,SAAS,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,SAAS,iBAAiB,EAErG,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EACxD,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EACtD,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,EAC5D,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAExD,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EACpC,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,IAEtC,CAAC,OAAO,CAAC,SAAS;QACpB,CAAC,CAAC,MAAM,CAAC,WAAW,CAClB,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YAC9C,IAAI;YACJ,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SAC1C,CAAC,CACD;QACH,CAAC,CAAC,EAAE,CAAC,EACL;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,OAAoC;IACrD,OAAO;QACN,IAAI,EAAE,OAAO,OAAO,CAAC,IAAI,GAAG;QAC5B,KAAK,EAAE,OAAO,OAAO,CAAC,KAAK,GAAG;QAC9B,OAAO,EAAE,OAAO,OAAO,CAAC,GAAG,GAAG;QAC9B,IAAI,EAAE,OAAO,OAAO,CAAC,IAAI,GAAG;QAC5B,GAAG,EAAE,OAAO,OAAO,CAAC,GAAG,GAAG;KAC1B,CAAC;AACH,CAAC"}
+{"version":3,"file":"colors.js","sourceRoot":"","sources":["../../../../src/uno/theme/colors.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAG/C,MAAM,aAAa,GAAG,wCAAwC,CAAC;AAE/D,MAAM,UAAU,eAAe,CAAC,EAC/B,SAAS,GACQ;IACjB,uBACC,IAAI,EAAE,aAAa,EACnB,WAAW,EAAE,aAAa,EAC1B,OAAO,EAAE,cAAc,EAEvB,KAAK,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,GAAG,GAAG,EAChE,KAAK,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,eAAe,CAAC,CAAC,IAAI,GAAG,EACjE,IAAI,EAAE,OAAO,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,IAAI,GAAG;QAE9C,eAAe;QACf,QAAQ,EAAE,kBAAkB,KAAK,CAAC,gBAAgB,CAAC,QAAQ,QAAQ,KAAK,CAAC,gBAAgB,CAAC,KAAK,QAAQ,KAAK,CAAC,gBAAgB,CAAC,SAAS,QAAQ,KAAK,CAAC,IAAI,CAAC,KAAK,gBAAgB,aAAa,IAAI,aAAa,IAAI,aAAa,GAAG,EACjO,EAAE,EAAE,OAAO,KAAK,CAAC,gBAAgB,CAAC,KAAK,SAAS,KAAK,CAAC,gBAAgB,CAAC,SAAS,iBAAiB,EACjG,EAAE,EAAE,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,SAAS,KAAK,CAAC,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,EACxF,KAAK,EAAE,OAAO,KAAK,CAAC,KAAK,CAAC,KAAK,SAAS,KAAK,CAAC,KAAK,CAAC,SAAS,SAAS,KAAK,CAAC,IAAI,CAAC,KAAK,KAAK,EAC3F,MAAM,EAAE,OAAO,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,KAAK,SAAS,KAAK,CAAC,YAAY,CAAC,GAAG,CAAC,SAAS,iBAAiB,EAErG,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EACxD,MAAM,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,EACtD,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,WAAW,CAAC,CAAC,EAC5D,OAAO,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,EAExD,KAAK,EAAE,OAAO,KAAK,CAAC,IAAI,CAAC,WAAW,GAAG,EAEvC,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EACpC,IAAI,EAAE,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,IAEtC,CAAC,SAAS;QACZ,CAAC,CAAC,MAAM,CAAC,WAAW,CAClB,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;YACtC,IAAI;YACJ,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SAC1C,CAAC,CACD;QACH,CAAC,CAAC,EAAE,CAAC,EACL;AACH,CAAC;AAED,SAAS,QAAQ,CAAC,OAAoC;IACrD,OAAO;QACN,IAAI,EAAE,OAAO,OAAO,CAAC,IAAI,GAAG;QAC5B,KAAK,EAAE,OAAO,OAAO,CAAC,KAAK,GAAG;QAC9B,OAAO,EAAE,OAAO,OAAO,CAAC,GAAG,GAAG;QAC9B,IAAI,EAAE,OAAO,OAAO,CAAC,IAAI,GAAG;QAC5B,GAAG,EAAE,OAAO,OAAO,CAAC,GAAG,GAAG;KAC1B,CAAC;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-type/ui",
-  "version": "5.0.8",
+  "version": "5.0.9",
   "type": "module",
   "repository": {
     "url": "https://github.com/a-type/ui"

package/src/components/button/Button.tsx

@@ -93,7 +93,7 @@ export function ButtonRoot({
 		...props,
 		disabled: disabled || isLoading,
 		'data-disabled': visuallyDisabled,
-		'data-focus': visuallyFocused,
+		'data-focus-visible': visuallyFocused ? true : undefined,
 		'data-size': size,
 		'data-loading': isLoading,
 		'data-has-label': hasLabelChild,

package/src/components/button/classes.tsx

@@ -48,7 +48,8 @@ export function getButtonClassName({
 				emphasis === 'default',
 			'layer-components:(color-main-ink bg-transparent aria-pressed:bg-main-wash)':
 				emphasis === 'ghost',
-			'layer-components:bg-black': emphasis === 'contrast',
+			'layer-components:bg-black layer-variants:focus-visible:ring-gray-dark':
+				emphasis === 'contrast',
 		},
 
 		{
@@ -65,9 +66,7 @@ export function getButtonClassName({
 
 		'layer-components:hover:(ring-4 bg-main bg-lighten-2)',
 
-		'layer-components:focus:outline-off',
-		'layer-components:focus-visible:(outline-off ring-6 ring-accent)',
-		'layer-components:[&[data-focus=true]]:(outline-off ring-6 ring-accent)',
+		'layer-components:foc-effect-lg',
 
 		'layer-components:active:(ring-8 bg-darken-1)',
 

package/src/components/camera/Camera.tsx

@@ -214,11 +214,11 @@ export function CameraShutterButton({
 
 const StyledShutterButton = withClassName(
 	BaseButton,
-	'absolute bottom-3 left-1/2 -translate-x-1/2 w-16 h-16 bg-white rounded-full cursor-pointer border-2 border-black border-solid ring-2 ring-white opacity-80',
-	'hover:bg-gray-wash hover:opacity-100',
-	'focus-visible:bg-lighten-1',
-	'focus:ring-accent focus:outline-none focus:opacity-100',
-	'sm:w-8 sm:h-8',
+	'layer-components:(absolute bottom-3 left-1/2 h-16 w-16 cursor-pointer border-2 rounded-full border-solid opacity-80 ring-2 bg-white border-black ring-white -translate-x-1/2)',
+	'layer-components:(hover:opacity-100 hover:bg-gray-wash)',
+	'layer-components:focus-visible:bg-lighten-1',
+	'layer-components:(foc-effect focus:opacity-100)',
+	'layer-components:(sm:h-8 sm:w-8)',
 );
 
 export interface CameraDeviceSelectorProps {

package/src/components/card/Card.tsx

@@ -65,11 +65,11 @@ export function CardMain({
 				classNames(
 					'layer-components:cursor-pointer',
 					'layer-components:hover:(color-black bg-black/10)',
-					'layer-components:focus:outline-none',
-					'layer-components:focus-visible:(outline-none ring-4 ring-inset bg-black/10 ring-accent)',
-					'layer-components:data-[visually-focused]:(ring-4 ring-inset bg-black/10 ring-accent)',
+					'layer-components:foc-effect',
+					'layer-components:focus-visible:(ring-inset bg-black/10)',
+					'layer-components:data-[visually-focused]:(ring-inset bg-black/10)',
 					'layer-components:disabled:(cursor-default)',
-					'layer-components:data-[visually-disabled]:(cursor-default)',
+					'layer-components:data-[disabled]:(cursor-default)',
 				),
 			className,
 		),
@@ -85,8 +85,8 @@ export function CardMain({
 		state: {
 			interactive: !!isInteractive,
 			compact: !!compact,
-			visuallyFocused: !!visuallyFocused,
-			visuallyDisabled: !!visuallyDisabled,
+			focusVisible: !!visuallyFocused,
+			disabled: !!visuallyDisabled,
 		},
 	});
 

package/src/components/checkbox/Checkbox.tsx

@@ -30,13 +30,13 @@ export function CheckboxRoot({
 			{...props}
 			className={classNames(
 				'layer-components:(relative block h-28px w-28px flex-shrink-0 cursor-pointer border border-default rounded-lg shadow-sm transition-all bg-white)',
-				'layer-components:focus-visible:(outline-off ring-4 ring-accent)',
+				'layer-components:foc-effect',
 				checkedMode === 'faded'
 					? 'layer-components:data-[checked]:(animate-checkbox-fade animate-forwards bg-main)'
 					: 'layer-components:data-[checked]:(bg-main border-main-ink)',
 				'layer-components:[&:hover:not(:disabled)]:(ring-2 bg-lighten-2 ring-bg)',
 				'layer-components:[&:active:not(:disabled)]:(ring-4 bg-darken-1)',
-				'layer-components:[&:disabled]:(shadow-none bg-transparent border-gray-light)',
+				'layer-components:[&:disabled]:(bg-transparent border-gray-light shadow-none)',
 				className,
 			)}
 		/>

package/src/components/datePicker/Calendar.tsx

@@ -57,8 +57,8 @@ export const CalendarDay = withClassName(
 	BaseCalendarDay,
 	'layer-components:(relative mb--1px mr--1px border border-solid color-black bg-white border-transparent)',
 	'layer-components:(flex cursor-pointer items-center justify-center transition)',
-	'layer-components:data-[highlighted]:(z-1 ring-2 ring-accent)',
-	'layer-components:hover:(z-1 ring-2 ring-accent)',
+	'layer-components:data-[highlighted]:(z-1 outline-none ring-2 ring-focus)',
+	'layer-components:hover:ouline-none layer-components:hover:(z-1 ring-2 ring-focus)',
 	'layer-components:active:(rounded bg-main-light)',
 	'layer-components:[&[data-selected]]:(z-2 rounded bg-main)',
 	'layer-components:[&[data-in-range]]:(z-1 rounded-none bg-main-light)',

package/src/components/datePicker/DateRangePicker.tsx

@@ -14,9 +14,9 @@ import {
 
 const RangeLayout = withClassName(
 	'div',
-	'layer-components:(grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto])',
-	'layer-components:([grid-template-rows:auto_1fr] gap-2)',
-	'layer-components:sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]',
+	'layer-components:(grid grid-cols-[auto_1fr_auto] grid-areas-[prevMonth_leftMonth_nextMonth]-[leftGrid_leftGrid_leftGrid])',
+	'layer-components:(grid-rows-[auto_1fr] gap-2)',
+	'sm:grid-cols-[auto_1fr_1fr_auto] layer-components:sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid]',
 );
 
 function DateRangePickerMonthControls() {

package/src/components/editableText/EditableText.tsx

@@ -107,7 +107,8 @@ export function EditableText({
 				inputClassName,
 				'layer-variants:(w-auto inline-flex items-center gap-sm rounded-md px-md text-left font-size-inherit color-inherit bg-transparent border-transparent shadow-none)',
 				'layer-variants:hover:(bg-main-light/80)',
-				'layer-variants:focus-visible:(outline-none ring-2 bg-main-light/80 ring-accent)',
+				'foc-effect',
+				'layer-variants:focus-visible:(bg-main-light/80)',
 				'cursor-pointer',
 				className,
 			)}

package/src/components/horizontalList/HorizontalList.tsx

@@ -167,8 +167,9 @@ export function HorizontalList({
 							emphasis="ghost"
 							className={clsx(
 								'layer-variants:(sticky left-0 top-2 z-1 flex-shrink-0)',
+								'ring-inset foc',
 								!open &&
-									'layer-variants:(h-full border-r rounded-none border-r-solid border-r-gray)',
+									'layer-variants:(h-full border-r rounded-l-sm rounded-r-none border-r-solid border-r-gray)',
 							)}
 						>
 							<Icon

package/src/components/input/Input.tsx

@@ -20,10 +20,10 @@ export const inputClassName = clsx(
 );
 
 const inputBorderClassName = clsx(
-	'layer-components:(min-w-60px flex flex-row items-center gap-xs border-1 rounded-lg border-solid text-md shadow-sm shadow-inset transition-shadow color-black bg-white border-black)',
+	'layer-components:(min-w-60px flex flex-row items-center gap-xs border-1 border-thin rounded-lg border-solid text-md shadow-sm shadow-inset transition-shadow color-black bg-white border-black)',
 	'layer-components:(w-max-content overflow-clip)',
 	'layer-components:[&:has(input:disabled),&:has(textarea:disabled)]:(bg-transparent border-gray shadow-none placeholder-gray-dark)',
-	'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:(outline-none ring ring-4 ring-accent)',
+	'layer-components:foc-contained',
 	'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:(outline-none ring ring-4 bg-lighten-3 ring-main-light)',
 	'layer-components:[&:has(input:hover),&:has(textarea:hover)]:border-black',
 	'layer-components:[&>.icon]:mx-sm',

package/src/components/lightbox/Lightbox.tsx

@@ -16,7 +16,7 @@ export const LightboxRoot = Dialog.Root;
 export const LightboxTrigger = withClassName(
 	Dialog.Trigger,
 	'layer-components:cursor-pointer',
-	'layer-components:focus-visible:(outline-none ring ring-accent)',
+	'foc-effect',
 );
 export const LightboxPortal = Dialog.Portal;
 export const LightboxTitle = () => (

package/src/components/navBar/NavBar.tsx

@@ -1,101 +1,101 @@
-import { Button } from '@base-ui/react/button';
-import { UseRenderComponentProps } from '@base-ui/react/use-render';
-import classNames, { clsx } from 'clsx';
-import { ReactElement, ReactNode, Ref } from 'react';
-import { withClassName } from '../../hooks.js';
-import { Icon, IconProps } from '../icon/index.js';
-
-export const navBarItemClass = classNames(
-	'layer-components:(relative h-full flex flex-col cursor-pointer select-none items-center justify-center gap-6px whitespace-nowrap rounded-sm border-none px-3 py-1 text-sm transition-colors color-black bg-transparent)',
-	'layer-components:active:bg-darken-2',
-	'layer-components:hover:(bg-main-light)',
-	'layer-components:focus-visible:(outline-none ring-2 ring-accent)',
-	'layer-components:[&[data-active=true]]:(color-black color-lighten-2 bg-main-light/50)',
-	'layer-responsive:md:(h-auto flex-row-reverse justify-start gap-2 overflow-visible active:bg-darken-2)',
-);
-
-export interface NavBarItemProps extends UseRenderComponentProps<'button'> {
-	className?: string;
-	children?: ReactNode;
-	active?: boolean;
-	color?: 'primary' | 'gray';
-	render?: ReactElement | (() => ReactElement);
-}
-
-export const NavBarItem = function NavBarItem({
-	ref,
-	className,
-	active,
-	color = 'primary',
-	...rest
-}: NavBarItemProps & {
-	ref?: React.Ref<HTMLButtonElement>;
-}) {
-	return (
-		<Button
-			ref={ref}
-			className={classNames(navBarItemClass, `palette-${color}`, className)}
-			data-active={active}
-			{...rest}
-		/>
-	);
-};
-
-export const NavBarItemIconWrapper = withClassName(
-	'div',
-	'layer-components:(relative flex)',
-	'layer-components:md:(p-6px rounded-lg bg-gray-blend)',
-	'layer-variants:md:[*[data-active=true]_&]:bg-[var(--bg)]',
-);
-
-export const NavBarItemText = withClassName(
-	'span',
-	'layer-components:(overflow-hidden inline-block text-xxs whitespace-nowrap text-ellipsis) layer-components:md:(text-md leading-normal)',
-);
-
-interface NavBarItemIconProps extends Omit<IconProps, 'name'> {
-	name?: IconProps['name'];
-	className?: string;
-	children?: ReactNode;
-	ref?: Ref<any>;
-}
-export const NavBarItemIcon = function NavBarItemIcon({
-	ref,
-	className,
-	name = 'placeholder',
-	...rest
-}: NavBarItemIconProps) {
-	return (
-		<Icon
-			name={name}
-			className={clsx(
-				'layer-components:(relative z-1 flex color-inherit)',
-				'layer-variants:[*[data-active=true]_&]:fill-main',
-				className,
-			)}
-			{...rest}
-			ref={ref}
-		/>
-	);
-};
-
-export const NavBarItemPip = withClassName(
-	'div',
-	'palette-attention',
-	'layer-components:(absolute top-6px right-6px w-6px h-6px rounded-lg bg-main shadow-sm)',
-);
-
-export const NavBarRoot = withClassName(
-	'div',
-	'layer-components:(grid [grid-auto-columns:1fr] [grid-auto-flow:column] justify-items-center w-full rounded-none overflow-hidden z-50 p-1 h-auto)',
-	'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]',
-	'layer-components:md:(bg-transparent flex flex-col rounded-none border-none border-transparent shadow-none h-min-content overflow-y-auto overflow-x-hidden justify-start items-stretch gap-2 pb-10)',
-);
-
-export const NavBar = Object.assign(NavBarRoot, {
-	Item: NavBarItem,
-	ItemIcon: NavBarItemIcon,
-	ItemText: NavBarItemText,
-	ItemIconWrapper: NavBarItemIconWrapper,
-	ItemPip: NavBarItemPip,
-});
+import { Button } from '@base-ui/react/button';
+import { UseRenderComponentProps } from '@base-ui/react/use-render';
+import classNames, { clsx } from 'clsx';
+import { ReactElement, ReactNode, Ref } from 'react';
+import { withClassName } from '../../hooks.js';
+import { Icon, IconProps } from '../icon/index.js';
+
+export const navBarItemClass = classNames(
+	'layer-components:(relative h-full flex flex-col cursor-pointer select-none items-center justify-center gap-6px whitespace-nowrap rounded-sm border-none px-3 py-1 text-sm transition-colors color-black bg-transparent)',
+	'layer-components:active:bg-darken-2',
+	'layer-components:hover:(bg-main-light)',
+	'layer-components:foc-effect',
+	'layer-components:[&[data-active=true]]:(color-black color-lighten-2 bg-main-light/50)',
+	'layer-responsive:md:(h-auto flex-row-reverse justify-start gap-2 overflow-visible active:bg-darken-2)',
+);
+
+export interface NavBarItemProps extends UseRenderComponentProps<'button'> {
+	className?: string;
+	children?: ReactNode;
+	active?: boolean;
+	color?: 'primary' | 'gray';
+	render?: ReactElement | (() => ReactElement);
+}
+
+export const NavBarItem = function NavBarItem({
+	ref,
+	className,
+	active,
+	color = 'primary',
+	...rest
+}: NavBarItemProps & {
+	ref?: React.Ref<HTMLButtonElement>;
+}) {
+	return (
+		<Button
+			ref={ref}
+			className={classNames(navBarItemClass, `palette-${color}`, className)}
+			data-active={active}
+			{...rest}
+		/>
+	);
+};
+
+export const NavBarItemIconWrapper = withClassName(
+	'div',
+	'layer-components:(relative flex)',
+	'layer-components:md:bg-gray-blend layer-components:md:(rounded-lg p-6px)',
+	'layer-variants:md:[*[data-active=true]_&]:bg-[var(--bg)]',
+);
+
+export const NavBarItemText = withClassName(
+	'span',
+	'layer-components:(inline-block overflow-hidden text-ellipsis whitespace-nowrap text-xxs) layer-components:md:(text-md leading-normal)',
+);
+
+interface NavBarItemIconProps extends Omit<IconProps, 'name'> {
+	name?: IconProps['name'];
+	className?: string;
+	children?: ReactNode;
+	ref?: Ref<any>;
+}
+export const NavBarItemIcon = function NavBarItemIcon({
+	ref,
+	className,
+	name = 'placeholder',
+	...rest
+}: NavBarItemIconProps) {
+	return (
+		<Icon
+			name={name}
+			className={clsx(
+				'layer-components:(relative z-1 flex color-inherit)',
+				'layer-variants:[*[data-active=true]_&]:fill-main',
+				className,
+			)}
+			{...rest}
+			ref={ref}
+		/>
+	);
+};
+
+export const NavBarItemPip = withClassName(
+	'div',
+	'palette-attention',
+	'layer-components:(absolute right-6px top-6px h-6px w-6px rounded-lg shadow-sm bg-main)',
+);
+
+export const NavBarRoot = withClassName(
+	'div',
+	'layer-components:([grid-auto-columns:1fr] [grid-auto-flow:column] z-50 grid h-auto w-full justify-items-center overflow-hidden rounded-none p-1)',
+	'pb-[calc(0.25rem+env(safe-area-inset-bottom,0px))]',
+	'layer-components:md:(h-min-content flex flex-col items-stretch justify-start gap-2 overflow-x-hidden rounded-none border-none pb-10 bg-transparent border-transparent overflow-y-auto shadow-none)',
+);
+
+export const NavBar = Object.assign(NavBarRoot, {
+	Item: NavBarItem,
+	ItemIcon: NavBarItemIcon,
+	ItemText: NavBarItemText,
+	ItemIconWrapper: NavBarItemIconWrapper,
+	ItemPip: NavBarItemPip,
+});

package/src/components/note/Note.tsx

@@ -14,7 +14,7 @@ function NoteRoot({ className, color, children, ...rest }: NoteProps) {
 		<div
 			className={classNames(
 				color && `palette-${color}`,
-				'layer-components:[&:has(input:focus-visible),&:has(textarea:focus-visible)]:(ring ring-4 ring-accent)',
+				'foc-contained',
 				'layer-variants:[&:has(input:focus[data-focus-clicked]),&:has(textarea:focus[data-focus-clicked])]:(ring ring-4 bg-lighten-3 ring-main-light)',
 				className,
 			)}
@@ -34,7 +34,7 @@ function NoteRoot({ className, color, children, ...rest }: NoteProps) {
 					aria-hidden
 				>
 					{/* folded corner */}
-					<div className="layer-components:(relative h-[20px] w-[20px] flex-[0_0_20px] border-0 border-solid border-main-dark) layer-variants:(border-b-1px border-l-1px)">
+					<div className="layer-components:(relative h-[20px] w-[20px] flex-[0_0_20px] border-0 border-solid border-main-dark) layer-variants:(border-b border-l)">
 						{/* top corner */}
 						<div
 							className={`layer-components:(box-content h-0 w-0 transform-origin-br translate--7px rotate--45 border-13px border-solid border-transparent border-r-main-wash border-r-darken-1)`}
@@ -43,7 +43,7 @@ function NoteRoot({ className, color, children, ...rest }: NoteProps) {
 						<div className="layer-components:(absolute left-9px top--3px h-27px w-0.5px transform-origin-cc rotate--45 bg-main-dark)" />
 					</div>
 					{/* bottom right corner */}
-					<div className="layer-components:(flex-1 border-0 border-solid bg-main-wash bg-darken-1 border-main-dark) layer-variants:(border-b-1px border-r-1px)" />
+					<div className="layer-components:(flex-1 border-0 border-solid bg-main-wash bg-darken-1 border-main-dark) layer-variants:(border-b border-r)" />
 				</div>
 			</div>
 		</div>

package/src/components/primitives/menus.tsx

@@ -4,7 +4,7 @@ export const popupClassName = clsx(
 	'layer-primitives:(max-w-90vw min-w-120px border rounded-md shadow-lg transition bg-white border-black)',
 	'layer-primitives:transform-origin-[var(--transform-origin)]',
 	'layer-primitives:(max-h-[--available-height] max-w-[--available-width])',
-	'layer-primitives:focus-visible:(outline-none ring-2 ring-accent)',
+	'layer-primitives:foc',
 
 	'transform-origin-[--transform-origin] will-change-transform',
 	'important:motion-reduce:transition-none',