@duyluonganduin/acl-web-components 0.0.70 → 0.0.72

package/dist/tailwind-preset.cjs

@@ -1 +1 @@
-"use strict";const r={content:[],theme:{extend:{colors:{gray:{0:"var(--color-gray-0)",1:"var(--color-gray-1)",2:"var(--color-gray-2)",3:"var(--color-gray-3)",4:"var(--color-gray-4)",5:"var(--color-gray-5)",6:"var(--color-gray-6)",7:"var(--color-gray-7)",8:"var(--color-gray-8)",9:"var(--color-gray-9)"},purple:{50:"var(--color-purple-50)",100:"var(--color-purple-100)",200:"var(--color-purple-200)",300:"var(--color-purple-300)",400:"var(--color-purple-400)",500:"var(--color-purple-500)",600:"var(--color-purple-600)",700:"var(--color-purple-700)",800:"var(--color-purple-800)",900:"var(--color-purple-900)",950:"var(--color-purple-950)"},primary:{1:"var(--color-primary-1)",2:"var(--color-primary-2)",3:"var(--color-primary-3)",4:"var(--color-primary-4)",5:"var(--color-primary-5)",DEFAULT:"var(--color-primary)",foreground:"var(--color-primary-foreground)",hover:"var(--color-primary-hover)",active:"var(--color-primary-active)",subtle:"var(--color-primary-subtle)","subtle-foreground":"var(--color-primary-subtle-foreground)","subtle-active":"var(--color-primary-subtle-active)",border:"var(--color-primary-border)",icon:"var(--color-primary-icon)",text:"var(--color-primary-text)"},danger:{1:"var(--color-danger-1)",2:"var(--color-danger-2)",3:"var(--color-danger-3)",4:"var(--color-danger-4)",5:"var(--color-danger-5)"},success:{1:"var(--color-success-1)",2:"var(--color-success-2)",3:"var(--color-success-3)",4:"var(--color-success-4)",5:"var(--color-success-5)",DEFAULT:"var(--color-success)",foreground:"var(--color-success-foreground)",hover:"var(--color-success-hover)",active:"var(--color-success-active)",subtle:"var(--color-success-subtle)","subtle-foreground":"var(--color-success-subtle-foreground)","subtle-active":"var(--color-success-subtle-active)",border:"var(--color-success-border)",icon:"var(--color-success-icon)",text:"var(--color-success-text)"},warning:{1:"var(--color-warning-1)",2:"var(--color-warning-2)",3:"var(--color-warning-3)",4:"var(--color-warning-4)",5:"var(--color-warning-5)",DEFAULT:"var(--color-warning)",foreground:"var(--color-warning-foreground)",hover:"var(--color-warning-hover)",active:"var(--color-warning-active)",subtle:"var(--color-warning-subtle)","subtle-foreground":"var(--color-warning-subtle-foreground)","subtle-active":"var(--color-warning-subtle-active)",border:"var(--color-warning-border)",icon:"var(--color-warning-icon)",text:"var(--color-warning-text)"},semantic:{gray:{0:"var(--color-semantic-gray-0)",1:"var(--color-semantic-gray-1)",2:"var(--color-semantic-gray-2)",3:"var(--color-semantic-gray-3)",4:"var(--color-semantic-gray-4)",5:"var(--color-semantic-gray-5)",6:"var(--color-semantic-gray-6)",7:"var(--color-semantic-gray-7)",8:"var(--color-semantic-gray-8)",9:"var(--color-semantic-gray-9)"},primary:{1:"var(--color-semantic-primary-1)",2:"var(--color-semantic-primary-2)",3:"var(--color-semantic-primary-3)",4:"var(--color-semantic-primary-4)",5:"var(--color-semantic-primary-5)"},danger:{1:"var(--color-semantic-danger-1)",2:"var(--color-semantic-danger-2)",3:"var(--color-semantic-danger-3)",4:"var(--color-semantic-danger-4)",5:"var(--color-semantic-danger-5)"},success:{1:"var(--color-semantic-success-1)",2:"var(--color-semantic-success-2)",3:"var(--color-semantic-success-3)",4:"var(--color-semantic-success-4)",5:"var(--color-semantic-success-5)"},warning:{1:"var(--color-semantic-warning-1)",2:"var(--color-semantic-warning-2)",3:"var(--color-semantic-warning-3)",4:"var(--color-semantic-warning-4)",5:"var(--color-semantic-warning-5)"}},background:"var(--color-background)",foreground:"var(--color-foreground)",card:{DEFAULT:"var(--color-card)",foreground:"var(--color-card-foreground)"},popover:{DEFAULT:"var(--color-popover)",foreground:"var(--color-popover-foreground)",border:"var(--color-popover-border)"},secondary:{DEFAULT:"var(--color-secondary)",foreground:"var(--color-secondary-foreground)"},muted:{DEFAULT:"var(--color-muted)",foreground:"var(--color-muted-foreground)"},subtle:{foreground:"var(--color-subtle-foreground)"},placeholder:"var(--color-placeholder)",canvas:"var(--color-canvas)","table-header":"var(--color-table-header)",highlight:"var(--color-highlight)",accent:{DEFAULT:"var(--color-accent)",subtle:"var(--color-accent-subtle)",foreground:"var(--color-accent-foreground)",active:"var(--color-accent-active)",strong:"var(--color-accent-strong)"},neutral:{DEFAULT:"var(--color-neutral)",foreground:"var(--color-neutral-foreground)",hover:"var(--color-neutral-hover)",active:"var(--color-neutral-active)",subtle:"var(--color-neutral-subtle)","subtle-foreground":"var(--color-neutral-subtle-foreground)",icon:"var(--color-neutral-icon)"},destructive:{DEFAULT:"var(--color-destructive)",foreground:"var(--color-destructive-foreground)",hover:"var(--color-destructive-hover)",active:"var(--color-destructive-active)",subtle:"var(--color-destructive-subtle)","subtle-foreground":"var(--color-destructive-subtle-foreground)","subtle-active":"var(--color-destructive-subtle-active)",border:"var(--color-destructive-border)",icon:"var(--color-destructive-icon)",text:"var(--color-destructive-text)"},ai:{DEFAULT:"var(--color-ai)",foreground:"var(--color-ai-foreground)",hover:"var(--color-ai-hover)",active:"var(--color-ai-active)",subtle:"var(--color-ai-subtle)","subtle-foreground":"var(--color-ai-subtle-foreground)","subtle-active":"var(--color-ai-subtle-active)",border:"var(--color-ai-border)",icon:"var(--color-ai-icon)",text:"var(--color-ai-text)",glow:"var(--color-ai-glow)"},border:{DEFAULT:"var(--color-border)",subtle:"var(--color-border-subtle)",muted:"var(--color-border-muted)"},input:"var(--color-input)",ring:{DEFAULT:"var(--color-ring)",subtle:"var(--color-ring-subtle)",outline:"var(--color-ring-outline)"},disabled:{DEFAULT:"var(--color-disabled)",foreground:"var(--color-disabled-foreground)"},inverse:{DEFAULT:"var(--color-inverse)",foreground:"var(--color-inverse-foreground)"},overlay:"var(--color-overlay)",shadow:"var(--color-shadow)",white:"var(--color-white)"},fontFamily:{sans:"var(--font-sans)",mono:"var(--font-mono)"},fontSize:{9:["var(--text-9)",{lineHeight:"var(--leading-16)"}],10:["var(--text-10)",{lineHeight:"var(--leading-16)"}],11:["var(--text-11)",{lineHeight:"var(--leading-16)"}],12:["var(--text-12)",{lineHeight:"var(--leading-16)"}],13:["var(--text-13)",{lineHeight:"var(--leading-20)"}],15:["var(--text-15)",{lineHeight:"var(--leading-24)"}],17:["var(--text-17)",{lineHeight:"var(--leading-24)"}],20:["var(--text-20)",{lineHeight:"var(--leading-28)"}],23:["var(--text-23)",{lineHeight:"var(--leading-32)"}],26:["var(--text-26)",{lineHeight:"var(--leading-32)"}],30:["var(--text-30)",{lineHeight:"var(--leading-40)"}],35:["var(--text-35)",{lineHeight:"var(--leading-44)"}]},fontWeight:{normal:"var(--font-weight-normal)",medium:"var(--font-weight-medium)",semibold:"var(--font-weight-semibold)",bold:"var(--font-weight-bold)"},lineHeight:{16:"var(--leading-16)",20:"var(--leading-20)",24:"var(--leading-24)",28:"var(--leading-28)",32:"var(--leading-32)",40:"var(--leading-40)",44:"var(--leading-44)",r1p5:"var(--leading-r1p5)"},borderRadius:{none:"var(--radius-0)",sm:"var(--radius-2)",3:"var(--radius-3)",DEFAULT:"var(--radius-4)",md:"var(--radius-6)",lg:"var(--radius-8)",xl:"var(--radius-12)","2xl":"var(--radius-16)","3xl":"var(--radius-20)","4xl":"var(--radius-24)",full:"var(--radius-full)"},boxShadow:{1:"var(--shadow-1)",2:"var(--shadow-2)",3:"var(--shadow-3)",4:"var(--shadow-4)"},spacing:{px:"var(--spacing-px)",0:"var(--spacing-0)",2:"var(--spacing-2)",4:"var(--spacing-4)",6:"var(--spacing-6)",8:"var(--spacing-8)",12:"var(--spacing-12)",16:"var(--spacing-16)",20:"var(--spacing-20)",24:"var(--spacing-24)",28:"var(--spacing-28)",32:"var(--spacing-32)",40:"var(--spacing-40)",48:"var(--spacing-48)",56:"var(--spacing-56)",64:"var(--spacing-64)",128:"var(--spacing-128)",256:"var(--spacing-256)"},zIndex:{0:"var(--z-0)",1:"var(--z-1)",2:"var(--z-2)",3:"var(--z-3)",4:"var(--z-4)",5:"var(--z-5)",999:"var(--z-999)",9999:"var(--z-9999)"}}}};module.exports=r;
+"use strict";const r={content:[],theme:{extend:{colors:{gray:{0:"var(--color-gray-0)",1:"var(--color-gray-1)",2:"var(--color-gray-2)",3:"var(--color-gray-3)",4:"var(--color-gray-4)",5:"var(--color-gray-5)",6:"var(--color-gray-6)",7:"var(--color-gray-7)",8:"var(--color-gray-8)",9:"var(--color-gray-9)"},purple:{50:"var(--color-purple-50)",100:"var(--color-purple-100)",200:"var(--color-purple-200)",300:"var(--color-purple-300)",400:"var(--color-purple-400)",500:"var(--color-purple-500)",600:"var(--color-purple-600)",700:"var(--color-purple-700)",800:"var(--color-purple-800)",900:"var(--color-purple-900)",950:"var(--color-purple-950)"},primary:{1:"var(--color-primary-1)",2:"var(--color-primary-2)",3:"var(--color-primary-3)",4:"var(--color-primary-4)",5:"var(--color-primary-5)",DEFAULT:"var(--color-primary)",foreground:"var(--color-primary-foreground)",hover:"var(--color-primary-hover)",active:"var(--color-primary-active)",subtle:"var(--color-primary-subtle)","subtle-foreground":"var(--color-primary-subtle-foreground)","subtle-active":"var(--color-primary-subtle-active)",border:"var(--color-primary-border)",icon:"var(--color-primary-icon)",text:"var(--color-primary-text)"},danger:{1:"var(--color-danger-1)",2:"var(--color-danger-2)",3:"var(--color-danger-3)",4:"var(--color-danger-4)",5:"var(--color-danger-5)"},success:{1:"var(--color-success-1)",2:"var(--color-success-2)",3:"var(--color-success-3)",4:"var(--color-success-4)",5:"var(--color-success-5)",DEFAULT:"var(--color-success)",foreground:"var(--color-success-foreground)",hover:"var(--color-success-hover)",active:"var(--color-success-active)",subtle:"var(--color-success-subtle)","subtle-foreground":"var(--color-success-subtle-foreground)","subtle-active":"var(--color-success-subtle-active)",border:"var(--color-success-border)",icon:"var(--color-success-icon)",text:"var(--color-success-text)"},warning:{1:"var(--color-warning-1)",2:"var(--color-warning-2)",3:"var(--color-warning-3)",4:"var(--color-warning-4)",5:"var(--color-warning-5)",DEFAULT:"var(--color-warning)",foreground:"var(--color-warning-foreground)",hover:"var(--color-warning-hover)",active:"var(--color-warning-active)",subtle:"var(--color-warning-subtle)","subtle-foreground":"var(--color-warning-subtle-foreground)","subtle-active":"var(--color-warning-subtle-active)",border:"var(--color-warning-border)",icon:"var(--color-warning-icon)",text:"var(--color-warning-text)"},semantic:{gray:{0:"var(--color-semantic-gray-0)",1:"var(--color-semantic-gray-1)",2:"var(--color-semantic-gray-2)",3:"var(--color-semantic-gray-3)",4:"var(--color-semantic-gray-4)",5:"var(--color-semantic-gray-5)",6:"var(--color-semantic-gray-6)",7:"var(--color-semantic-gray-7)",8:"var(--color-semantic-gray-8)",9:"var(--color-semantic-gray-9)"},primary:{1:"var(--color-semantic-primary-1)",2:"var(--color-semantic-primary-2)",3:"var(--color-semantic-primary-3)",4:"var(--color-semantic-primary-4)",5:"var(--color-semantic-primary-5)"},danger:{1:"var(--color-semantic-danger-1)",2:"var(--color-semantic-danger-2)",3:"var(--color-semantic-danger-3)",4:"var(--color-semantic-danger-4)",5:"var(--color-semantic-danger-5)"},success:{1:"var(--color-semantic-success-1)",2:"var(--color-semantic-success-2)",3:"var(--color-semantic-success-3)",4:"var(--color-semantic-success-4)",5:"var(--color-semantic-success-5)"},warning:{1:"var(--color-semantic-warning-1)",2:"var(--color-semantic-warning-2)",3:"var(--color-semantic-warning-3)",4:"var(--color-semantic-warning-4)",5:"var(--color-semantic-warning-5)"}},background:"var(--color-background)",foreground:"var(--color-foreground)",card:{DEFAULT:"var(--color-card)",foreground:"var(--color-card-foreground)"},popover:{DEFAULT:"var(--color-popover)",foreground:"var(--color-popover-foreground)",border:"var(--color-popover-border)"},secondary:{DEFAULT:"var(--color-secondary)",foreground:"var(--color-secondary-foreground)"},muted:{DEFAULT:"var(--color-muted)",foreground:"var(--color-muted-foreground)"},subtle:{foreground:"var(--color-subtle-foreground)"},placeholder:"var(--color-placeholder)",canvas:"var(--color-canvas)","table-header":"var(--color-table-header)",highlight:"var(--color-highlight)",accent:{DEFAULT:"var(--color-accent)",subtle:"var(--color-accent-subtle)",foreground:"var(--color-accent-foreground)",active:"var(--color-accent-active)",strong:"var(--color-accent-strong)"},neutral:{DEFAULT:"var(--color-neutral)",foreground:"var(--color-neutral-foreground)",hover:"var(--color-neutral-hover)",active:"var(--color-neutral-active)",subtle:"var(--color-neutral-subtle)","subtle-foreground":"var(--color-neutral-subtle-foreground)",icon:"var(--color-neutral-icon)"},destructive:{DEFAULT:"var(--color-destructive)",foreground:"var(--color-destructive-foreground)",hover:"var(--color-destructive-hover)",active:"var(--color-destructive-active)",subtle:"var(--color-destructive-subtle)","subtle-foreground":"var(--color-destructive-subtle-foreground)","subtle-active":"var(--color-destructive-subtle-active)",border:"var(--color-destructive-border)",icon:"var(--color-destructive-icon)",text:"var(--color-destructive-text)"},ai:{DEFAULT:"var(--color-ai)",foreground:"var(--color-ai-foreground)",hover:"var(--color-ai-hover)",active:"var(--color-ai-active)",subtle:"var(--color-ai-subtle)","subtle-foreground":"var(--color-ai-subtle-foreground)","subtle-active":"var(--color-ai-subtle-active)",border:"var(--color-ai-border)",icon:"var(--color-ai-icon)",text:"var(--color-ai-text)","text-icon":"var(--color-ai-text-icon)",glow:"var(--color-ai-glow)"},border:{DEFAULT:"var(--color-border)",subtle:"var(--color-border-subtle)",muted:"var(--color-border-muted)"},input:"var(--color-input)",ring:{DEFAULT:"var(--color-ring)",subtle:"var(--color-ring-subtle)",outline:"var(--color-ring-outline)"},disabled:{DEFAULT:"var(--color-disabled)",foreground:"var(--color-disabled-foreground)"},inverse:{DEFAULT:"var(--color-inverse)",foreground:"var(--color-inverse-foreground)"},overlay:"var(--color-overlay)",shadow:"var(--color-shadow)",white:"var(--color-white)"},fontFamily:{sans:"var(--font-sans)",mono:"var(--font-mono)"},fontSize:{9:["var(--text-9)",{lineHeight:"var(--leading-16)"}],10:["var(--text-10)",{lineHeight:"var(--leading-16)"}],11:["var(--text-11)",{lineHeight:"var(--leading-16)"}],12:["var(--text-12)",{lineHeight:"var(--leading-16)"}],13:["var(--text-13)",{lineHeight:"var(--leading-20)"}],15:["var(--text-15)",{lineHeight:"var(--leading-24)"}],17:["var(--text-17)",{lineHeight:"var(--leading-24)"}],20:["var(--text-20)",{lineHeight:"var(--leading-28)"}],23:["var(--text-23)",{lineHeight:"var(--leading-32)"}],26:["var(--text-26)",{lineHeight:"var(--leading-32)"}],30:["var(--text-30)",{lineHeight:"var(--leading-40)"}],35:["var(--text-35)",{lineHeight:"var(--leading-44)"}]},fontWeight:{normal:"var(--font-weight-normal)",medium:"var(--font-weight-medium)",semibold:"var(--font-weight-semibold)",bold:"var(--font-weight-bold)"},lineHeight:{16:"var(--leading-16)",20:"var(--leading-20)",24:"var(--leading-24)",28:"var(--leading-28)",32:"var(--leading-32)",40:"var(--leading-40)",44:"var(--leading-44)",r1p5:"var(--leading-r1p5)"},borderRadius:{none:"var(--radius-0)",sm:"var(--radius-2)",3:"var(--radius-3)",DEFAULT:"var(--radius-4)",md:"var(--radius-6)",lg:"var(--radius-8)",xl:"var(--radius-12)","2xl":"var(--radius-16)","3xl":"var(--radius-20)","4xl":"var(--radius-24)",full:"var(--radius-full)"},boxShadow:{1:"var(--shadow-1)",2:"var(--shadow-2)",3:"var(--shadow-3)",4:"var(--shadow-4)"},spacing:{px:"var(--spacing-px)",0:"var(--spacing-0)",2:"var(--spacing-2)",4:"var(--spacing-4)",6:"var(--spacing-6)",8:"var(--spacing-8)",12:"var(--spacing-12)",16:"var(--spacing-16)",20:"var(--spacing-20)",24:"var(--spacing-24)",28:"var(--spacing-28)",32:"var(--spacing-32)",40:"var(--spacing-40)",48:"var(--spacing-48)",56:"var(--spacing-56)",64:"var(--spacing-64)",128:"var(--spacing-128)",256:"var(--spacing-256)"},zIndex:{0:"var(--z-0)",1:"var(--z-1)",2:"var(--z-2)",3:"var(--z-3)",4:"var(--z-4)",5:"var(--z-5)",999:"var(--z-999)",9999:"var(--z-9999)"}}}};module.exports=r;

package/dist/tailwind-preset.js

@@ -197,6 +197,7 @@ const r = {
           border: "var(--color-ai-border)",
           icon: "var(--color-ai-icon)",
           text: "var(--color-ai-text)",
+          "text-icon": "var(--color-ai-text-icon)",
           glow: "var(--color-ai-glow)"
         },
         border: {

package/dist/tailwind-theme.css

@@ -274,4 +274,6 @@
   --color-success-text: var(--color-success-text);
   --color-warning-text: var(--color-warning-text);
   --color-ai-text: var(--color-ai-text);
+  /* The icon beside AI text (0.0.72) */
+  --color-ai-text-icon: var(--color-ai-text-icon);
 }

package/dist/tokens.css

@@ -333,6 +333,11 @@
   --color-success-text: var(--color-success-5);
   --color-warning-text: var(--color-warning-5);
   --color-ai-text: var(--color-purple-600);
+  /* `ai-text-icon` (0.0.72): the icon beside AI text, as in an outlined purple
+     button. In light it is the text's own purple-600, which the icon has drawn
+     since the button had one, so nothing moves; `ai-icon` is purple-500 here and
+     would lighten it. In dark it is `ai-icon`: see @semantic-dark for why. */
+  --color-ai-text-icon: var(--color-ai-text);
   /* The AI spinner's halo: none on a light page, a faint blue glow on a dark one */
   --color-ai-glow: transparent;
 }
@@ -521,6 +526,10 @@
   --color-success-text: var(--color-success-2);      /* 10.0 / 7.5 / 8.1 */
   --color-warning-text: var(--color-warning-2);      /* 11.3 / 8.5 / 8.7 */
   --color-ai-text: var(--color-purple-200);          /* 10.6 / 8.0 / 9.4 / 8.5 */
+  /* purple-200's chroma is so low that on gray-9 an outlined purple button read
+     as a white one with only its 60% border saying AI. The label keeps purple-200
+     for contrast; the glyph beside it carries the purple, at the icon step. */
+  --color-ai-text-icon: var(--color-ai-icon);
   --color-ai-glow: oklch(from var(--color-primary-3) l c h / 0.25);
 
   /* The design's shadows: the light alphas, tinted black. They barely show on

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duyluonganduin/acl-web-components",
-  "version": "0.0.70",
+  "version": "0.0.72",
   "type": "module",
   "repository": {
     "type": "git",
@@ -59,6 +59,7 @@
   "scripts": {
     "prepare": "tsc -p tsconfig.build.json && vite build && vite build --config vite.iife.config.ts && cp src/styles/tokens.css dist/tokens.css && cp src/styles/tailwind-theme.css dist/tailwind-theme.css && cp src/jsx.d.ts dist/jsx.d.ts",
     "build": "tsc -p tsconfig.build.json && vite build && vite build --config vite.iife.config.ts && cp src/styles/tokens.css dist/tokens.css && cp src/styles/tailwind-theme.css dist/tailwind-theme.css && cp src/jsx.d.ts dist/jsx.d.ts",
+    "test": "vitest run",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -68,13 +69,16 @@
     "@storybook/web-components-vite": "^8.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitest/browser-playwright": "^4.1.12",
     "lit": "^3.3.2",
+    "playwright": "^1.63.0",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
     "storybook": "^8.5.0",
     "typescript": "^5.7.0",
     "vite": "^6.1.0",
-    "vite-plugin-dts": "^4.4.0"
+    "vite-plugin-dts": "^4.4.0",
+    "vitest": "^4.1.12"
   },
   "dependencies": {
     "@lit/react": "^1.0.8"