@santi020k/lumen 4.1.0 → 4.3.0

package/README.md

@@ -352,3 +352,20 @@ media loading, selection, adjustment algorithms, processing, export and persiste
 
 Part of [Lumen UI](https://lumen.santi020k.com), created by [Santiago Molina](https://santi020k.com).
 Licensed under [MIT](https://github.com/santi020k/lumen/blob/main/LICENSE); third-party artwork retains its own notices.
+
+## Tailwind CSS v4 complement
+
+Tailwind is optional. For utility-based customization, load these imports once in your global CSS:
+
+```css
+@import "@santi020k/lumen/layers.css";
+@import "tailwindcss";
+@import "@santi020k/lumen/styles.css";
+@import "@santi020k/lumen/tailwind.css";
+```
+
+The optional `tailwind.css` bridge (Lumen 4.3+) maps semantic colors to utilities such as
+`bg-surface`, `text-ink`, and `border-line`. Inline aliases follow root and nested Lumen themes.
+Use component props for behavior and utilities for local presentation. The standalone stylesheet
+does not require Tailwind. See the [Tailwind guide](https://lumen.santi020k.com/docs/web/tailwind)
+for framework examples, source detection, and Preflight choices.

package/dist/integration-diagnostics.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"integration-diagnostics.d.ts","sourceRoot":"","sources":["../src/integration-diagnostics.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG,OAAO,CAAA;AAE1D,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,uBAAuB,CAAA;CAClC;AAED,MAAM,WAAW,qBAAqB;IACpC,kBAAkB,EAAE,MAAM,CAAA;IAC1B,QAAQ,EAAE,sBAAsB,EAAE,CAAA;IAClC,UAAU,EAAE,CAAC,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC,EAAE,CAAA;IAC9C,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,EAAE,MAAM,EAAE,CAAA;CAC5B;AA6/BD,eAAO,MAAM,uBAAuB,GAAU,YAAY,MAAM,KAAG,OAAO,CAAC,qBAAqB,CA4D/F,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,QAAQ,qBAAqB,KAAG,MAWtE,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAW,OAAO,GAAG,UAAU,GAAG,OAAO,EAAE,kBAAgB,KAAG,MAsC9F,CAAA"}
+{"version":3,"file":"integration-diagnostics.d.ts","sourceRoot":"","sources":["../src/integration-diagnostics.ts"],"names":[],"mappings":"AAgBA,MAAM,MAAM,uBAAuB,GAAG,UAAU,GAAG,OAAO,CAAA;AAE1D,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,EAAE,MAAM,CAAA;IACf,WAAW,EAAE,MAAM,CAAA;IACnB,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,EAAE,uBAAuB,CAAA;CAClC;AAED,MAAM,WAAW,qBAAqB;IACpC,kBAAkB,EAAE,MAAM,CAAA;IAC1B,QAAQ,EAAE,sBAAsB,EAAE,CAAA;IAClC,UAAU,EAAE,CAAC,OAAO,GAAG,UAAU,GAAG,OAAO,CAAC,EAAE,CAAA;IAC9C,WAAW,EAAE,MAAM,CAAA;IACnB,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,MAAM,CAAA;IAClB,iBAAiB,EAAE,MAAM,EAAE,CAAA;CAC5B;AA6/BD,eAAO,MAAM,uBAAuB,GAAU,YAAY,MAAM,KAAG,OAAO,CAAC,qBAAqB,CA4D/F,CAAA;AAED,eAAO,MAAM,sBAAsB,GAAI,QAAQ,qBAAqB,KAAG,MAWtE,CAAA;AAED,eAAO,MAAM,gBAAgB,GAAI,WAAW,OAAO,GAAG,UAAU,GAAG,OAAO,EAAE,kBAAgB,KAAG,MAyC9F,CAAA"}

package/dist/integration-diagnostics.js

@@ -709,19 +709,22 @@ export const createLumenSetup = (framework, tailwind = false) => {
             styles: '@import "@santi020k/lumen-astro/styles.css";',
             tailwind: '@import "@santi020k/lumen-astro/layers.css";\n' +
                 '@import "tailwindcss";\n' +
-                '@import "@santi020k/lumen-astro/styles.css";'
+                '@import "@santi020k/lumen-astro/styles.css";\n' +
+                '@import "@santi020k/lumen-astro/tailwind.css";'
         },
         elements: {
             styles: '@import "@santi020k/lumen-elements/styles.css";',
             tailwind: '@import "@santi020k/lumen-elements/layers.css";\n' +
                 '@import "tailwindcss";\n' +
-                '@import "@santi020k/lumen-elements/styles.css";'
+                '@import "@santi020k/lumen-elements/styles.css";\n' +
+                '@import "@santi020k/lumen-elements/tailwind.css";'
         },
         react: {
             styles: '@import "@santi020k/lumen-react/styles.css";',
             tailwind: '@import "@santi020k/lumen-react/layers.css";\n' +
                 '@import "tailwindcss";\n' +
-                '@import "@santi020k/lumen-react/styles.css";'
+                '@import "@santi020k/lumen-react/styles.css";\n' +
+                '@import "@santi020k/lumen-react/tailwind.css";'
         }
     };
     const styles = tailwind ? setupByFramework[framework].tailwind : setupByFramework[framework].styles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen",
-  "version": "4.1.0",
+  "version": "4.3.0",
   "publishConfig": {
     "access": "public"
   },
@@ -11,7 +11,8 @@
     "./styles.css",
     "./styles/critical.css",
     "./styles/motion.css",
-    "./styles/world-map.css"
+    "./styles/world-map.css",
+    "./tailwind.css"
   ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -32,7 +33,8 @@
     "./layers.css": "./layers.css",
     "./package.json": "./package.json",
     "./styles/motion.css": "./styles/motion.css",
-    "./styles/world-map.css": "./styles/world-map.css"
+    "./styles/world-map.css": "./styles/world-map.css",
+    "./tailwind.css": "./tailwind.css"
   },
   "files": [
     "bin",
@@ -45,13 +47,14 @@
     "templates",
     "README.md",
     "LICENSE",
-    "v4-migration.json"
+    "v4-migration.json",
+    "tailwind.css"
   ],
   "bin": {
     "lumen": "./bin/lumen.mjs"
   },
   "dependencies": {
-    "@santi020k/lumen-core": "^4.1.0",
+    "@santi020k/lumen-core": "^4.3.0",
     "semver": "^7.8.5",
     "typescript": "~6.0.3"
   },

package/release-manifest.json

@@ -6,7 +6,7 @@
         "com.santi020k:lumen-compose",
         "com.santi020k:lumen-compose-wear"
       ],
-      "version": "4.0.0"
+      "version": "4.0.1"
     },
     "npm": {
       "packages": {
@@ -14,17 +14,17 @@
           "peerDependencies": {
             "astro": ">=5"
           },
-          "version": "4.1.0"
+          "version": "4.3.0"
         },
         "@santi020k/lumen-core": {
           "peerDependencies": {
             "@rive-app/canvas": "^2.44.0"
           },
-          "version": "4.1.0"
+          "version": "4.3.0"
         },
         "@santi020k/lumen-elements": {
           "peerDependencies": {},
-          "version": "4.1.0"
+          "version": "4.3.0"
         },
         "@santi020k/lumen-icons-brand": {
           "peerDependencies": {},
@@ -34,18 +34,18 @@
           "peerDependencies": {
             "react": ">=19"
           },
-          "version": "4.1.0"
+          "version": "4.3.0"
         },
         "@santi020k/lumen-mcp": {
           "peerDependencies": {},
-          "version": "4.1.0"
+          "version": "4.3.0"
         },
         "@santi020k/lumen-react": {
           "peerDependencies": {
             "react": ">=19",
             "motion": "^14.0.0"
           },
-          "version": "4.1.0"
+          "version": "4.3.0"
         },
         "@santi020k/lumen-react-hook-form": {
           "peerDependencies": {
@@ -62,7 +62,7 @@
             "react-native": ">=0.86.2",
             "react-native-svg": ">=12 <16"
           },
-          "version": "4.0.1"
+          "version": "4.0.2"
         },
         "@santi020k/lumen-tokens": {
           "peerDependencies": {},
@@ -73,9 +73,9 @@
     "swift": {
       "package": "https://github.com/santi020k/lumen.git",
       "revision": null,
-      "tag": "v4.1.0"
+      "tag": "v4.3.0"
     },
-    "version": "4.1.0"
+    "version": "4.3.0"
   },
   "migration": {
     "codemod": null,

package/styles/critical.css

@@ -837,6 +837,10 @@
   width: min(100%, 34rem);
 }
 
+lumen-date-picker.ui-date-picker-field {
+  display: block;
+}
+
 .ui-combobox > .ui-input {
   width: 100%;
 }

package/styles.css

@@ -1715,6 +1715,10 @@
   width: min(100%, 34rem);
 }
 
+lumen-date-picker.ui-date-picker-field {
+  display: block;
+}
+
 .ui-combobox > .ui-input {
   width: 100%;
 }
@@ -6670,18 +6674,20 @@ lumen-dialog-close {
 
 .ui-pill {
   display: inline-flex;
+  min-width: 0;
   min-height: 1.75rem;
   max-width: 100%;
   align-items: center;
   border: var(--ui-border-width, 1px) solid hsl(var(--line));
-  border-radius: 999px;
+  border-radius: 1.5rem;
   padding: 0.3rem 0.75rem;
   background: hsl(var(--surface-muted));
   color: hsl(var(--ink-soft));
   font-size: 0.875rem;
   font-weight: 600;
-  line-height: 1;
-  white-space: nowrap;
+  line-height: 1.25;
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 
 .ui-pill--brand {
@@ -6696,12 +6702,14 @@ lumen-dialog-close {
 }
 
 .ui-pill__count {
+  flex: none;
+  white-space: nowrap;
   margin-left: 0.5rem;
   padding-left: 0.5rem;
   border-left: var(--ui-border-width, 1px) solid hsl(var(--line));
   font-size: 0.75rem;
   line-height: 1;
-  color: hsl(var(--ink-muted));
+  color: inherit;
   font-variant-numeric: tabular-nums;
 }
 
@@ -6713,13 +6721,13 @@ a.ui-pill {
 
 a.ui-pill:hover {
   border-color: hsl(var(--brand) / 0.42);
-  color: hsl(var(--brand-solid));
+  color: hsl(var(--brand));
 }
 
 a.ui-pill--brand:hover {
   border-color: hsl(var(--brand) / 0.6);
   background: hsl(var(--brand-solid));
-  color: hsl(var(--canvas));
+  color: hsl(var(--on-brand));
 }
 
 a.ui-pill:focus-visible {
@@ -7089,7 +7097,7 @@ a.ui-pill:focus-visible {
   padding: 0.25rem 0.75rem;
   margin-left: -2px;
   border-left: 2px solid transparent;
-  color: hsl(var(--ink-muted));
+  color: hsl(var(--ink-soft));
   text-decoration: none;
   font-size: 0.875rem;
 }
@@ -7099,7 +7107,7 @@ a.ui-pill:focus-visible {
 }
 .ui-anchor__index,
 .ui-anchor__description {
-  color: hsl(var(--ink-muted));
+  color: hsl(var(--ink-soft));
   font-size: var(--ui-text-xs);
 }
 .ui-anchor__index {

package/tailwind.css

@@ -0,0 +1,23 @@
+/* Optional Tailwind CSS v4 theme bridge. Import after Tailwind and Lumen styles.
+ * Inline aliases resolve at the utility element so nested Lumen themes stay in sync.
+ * This file does not load Tailwind, Preflight, or Lumen component styles.
+ */
+@theme inline {
+  --color-canvas: hsl(var(--canvas));
+  --color-surface: hsl(var(--surface));
+  --color-surface-muted: hsl(var(--surface-muted));
+  --color-surface-strong: hsl(var(--surface-strong));
+  --color-line: hsl(var(--line));
+  --color-ink: hsl(var(--ink));
+  --color-ink-soft: hsl(var(--ink-soft));
+  --color-ink-muted: hsl(var(--ink-muted));
+  --color-brand: hsl(var(--brand));
+  --color-brand-solid: hsl(var(--brand-solid));
+  --color-brand-soft: hsl(var(--brand-soft));
+  --color-on-brand: hsl(var(--on-brand));
+  --color-accent: hsl(var(--accent));
+  --color-success: hsl(var(--success));
+  --color-warning: hsl(var(--warning));
+  --color-danger: hsl(var(--danger));
+  --color-on-danger: hsl(var(--on-danger));
+}