@santi020k/lumen 4.0.0 → 4.2.0

package/README.md

@@ -68,6 +68,10 @@ also want to import its framework-neutral registry or diagnostics APIs:
 pnpm add @santi020k/lumen
 ```
 
+Set direction with the `dir` attribute on `html` or a containing element. Select and NativeSelect
+place their chevron from the nearest `dir="rtl"` or `dir="ltr"` ancestor, so nested LTR regions
+inside RTL work even when a consumer CSS pipeline compiles `:dir()` into language selectors.
+
 ## Typography
 
 Lumen defaults `--ui-font` to the canonical Santi020k Montserrat family stack:

package/native-components.json

@@ -28,7 +28,7 @@
         "gradle": "9.8.0",
         "instrumentationApi": 35,
         "jdk": 21,
-        "kotlin": "2.4.20",
+        "kotlin": "2.4.21",
         "minSdk": 23
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@santi020k/lumen",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "publishConfig": {
     "access": "public"
   },
@@ -51,7 +51,7 @@
     "lumen": "./bin/lumen.mjs"
   },
   "dependencies": {
-    "@santi020k/lumen-core": "^4.0.0",
+    "@santi020k/lumen-core": "^4.1.0",
     "semver": "^7.8.5",
     "typescript": "~6.0.3"
   },

package/release-manifest.json

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

package/styles/critical.css

@@ -172,6 +172,17 @@
   }
 }
 
+@keyframes ui-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.55;
+  }
+}
+
 @keyframes ui-spin {
   to {
     transform: rotate(360deg);
@@ -790,15 +801,21 @@
   background-image:
     linear-gradient(45deg, transparent 50%, hsl(var(--ink-muted)) 50%),
     linear-gradient(135deg, hsl(var(--ink-muted)) 50%, transparent 50%);
-  background-position:
-    calc(100% - 1rem) 50%,
-    calc(100% - 0.72rem) 50%;
+  background-position: var(--_ui-select-chevron, calc(100% - 1rem) 50%, calc(100% - 0.72rem) 50%);
   background-size:
     0.32rem 0.32rem,
     0.32rem 0.32rem;
   background-repeat: no-repeat;
 }
 
+[dir="rtl"] {
+  --_ui-select-chevron: 0.72rem 50%, 1rem 50%;
+}
+
+[dir="ltr"] {
+  --_ui-select-chevron: calc(100% - 1rem) 50%, calc(100% - 0.72rem) 50%;
+}
+
 .ui-label {
   color: hsl(var(--ink));
   font-size: 0.875rem;
@@ -820,6 +837,10 @@
   width: min(100%, 34rem);
 }
 
+lumen-date-picker.ui-date-picker-field {
+  display: block;
+}
+
 .ui-combobox > .ui-input {
   width: 100%;
 }
@@ -1007,7 +1028,9 @@
 }
 
 .ui-skeleton {
-  min-height: 1rem;
+  /* A default height, not a minimum, lets explicit styles and classes size placeholders below 1rem. */
+  width: var(--ui-skeleton-width, auto);
+  height: var(--ui-skeleton-height, 1rem);
   border-radius: var(--ui-radius-sm);
   background: linear-gradient(
     90deg,
@@ -1019,6 +1042,42 @@
   animation: ui-shimmer 2.2s linear infinite;
 }
 
+.ui-skeleton:where(:not(:empty)) {
+  height: var(--ui-skeleton-height, auto);
+  min-height: 1rem;
+}
+
+lumen-skeleton.ui-skeleton,
+lumen-progress.ui-progress {
+  display: block;
+}
+
+.ui-skeleton--text {
+  height: var(--ui-skeleton-height, 0.75rem);
+}
+
+.ui-skeleton--circle {
+  flex: 0 0 auto;
+  width: var(--ui-skeleton-width, var(--ui-skeleton-height, 2.5rem));
+  height: var(--ui-skeleton-height, var(--ui-skeleton-width, 2.5rem));
+  border-radius: 50%;
+}
+
+.ui-skeleton--pulse {
+  background: hsl(var(--surface-strong));
+  animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+.ui-skeleton--static {
+  animation: none;
+}
+
+@media (prefers-reduced-motion: reduce) {
+.ui-skeleton {
+    animation: none;
+  }
+}
+
 .ui-spinner {
   box-sizing: border-box;
   display: inline-block;
@@ -1586,7 +1645,9 @@ lumen-dialog.ui-dialog:not([hidden]):has(> [data-slot="dialog-body"]) {
 
 .ui-input-otp__native[data-ui-enhanced="true"] {
   position: absolute;
-  width: 1px;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 100%;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);

package/styles.css

@@ -179,6 +179,17 @@
   }
 }
 
+@keyframes ui-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.55;
+  }
+}
+
 @keyframes ui-spin {
   to {
     transform: rotate(360deg);
@@ -1663,15 +1674,26 @@
   background-image:
     linear-gradient(45deg, transparent 50%, hsl(var(--ink-muted)) 50%),
     linear-gradient(135deg, hsl(var(--ink-muted)) 50%, transparent 50%);
-  background-position:
-    calc(100% - 1rem) 50%,
-    calc(100% - 0.72rem) 50%;
+  background-position: var(--_ui-select-chevron, calc(100% - 1rem) 50%, calc(100% - 0.72rem) 50%);
   background-size:
     0.32rem 0.32rem,
     0.32rem 0.32rem;
   background-repeat: no-repeat;
 }
 
+/*
+ * Keep the chevron inside the inline-end padding. The private property inherits from the nearest
+ * explicit `dir` attribute, so nested LTR regions inside RTL work and consumer CSS pipelines that
+ * rewrite `:dir()` into language selectors cannot misplace it.
+ */
+[dir="rtl"] {
+  --_ui-select-chevron: 0.72rem 50%, 1rem 50%;
+}
+
+[dir="ltr"] {
+  --_ui-select-chevron: calc(100% - 1rem) 50%, calc(100% - 0.72rem) 50%;
+}
+
 .ui-label {
   color: hsl(var(--ink));
   font-size: 0.875rem;
@@ -1693,6 +1715,10 @@
   width: min(100%, 34rem);
 }
 
+lumen-date-picker.ui-date-picker-field {
+  display: block;
+}
+
 .ui-combobox > .ui-input {
   width: 100%;
 }
@@ -1785,6 +1811,7 @@
 
 .ui-date-picker__popover {
   width: min(21rem, calc(100vw - 2rem));
+  color: inherit;
   max-height: none;
   overflow: visible;
   border-radius: var(--ui-radius-lg);
@@ -2126,7 +2153,9 @@
 }
 
 .ui-skeleton {
-  min-height: 1rem;
+  /* A default height, not a minimum, lets explicit styles and classes size placeholders below 1rem. */
+  width: var(--ui-skeleton-width, auto);
+  height: var(--ui-skeleton-height, 1rem);
   border-radius: var(--ui-radius-sm);
   background: linear-gradient(
     90deg,
@@ -2138,6 +2167,44 @@
   animation: ui-shimmer 2.2s linear infinite;
 }
 
+/* Skeletons that wrap text or elements keep growing with their content. */
+.ui-skeleton:where(:not(:empty)) {
+  height: var(--ui-skeleton-height, auto);
+  min-height: 1rem;
+}
+
+lumen-skeleton.ui-skeleton,
+lumen-progress.ui-progress {
+  display: block;
+}
+
+.ui-skeleton--text {
+  height: var(--ui-skeleton-height, 0.75rem);
+}
+
+.ui-skeleton--circle {
+  flex: 0 0 auto;
+  width: var(--ui-skeleton-width, var(--ui-skeleton-height, 2.5rem));
+  height: var(--ui-skeleton-height, var(--ui-skeleton-width, 2.5rem));
+  border-radius: 50%;
+}
+
+.ui-skeleton--pulse {
+  background: hsl(var(--surface-strong));
+  animation: ui-skeleton-pulse 1.6s ease-in-out infinite;
+}
+
+.ui-skeleton--static {
+  animation: none;
+}
+
+/* Critical CSS omits the universal reduction below, so Skeleton stops its own loop. */
+@media (prefers-reduced-motion: reduce) {
+  .ui-skeleton {
+    animation: none;
+  }
+}
+
 .ui-icon {
   --ui-icon-size: 1em;
   display: inline-flex;
@@ -4271,9 +4338,12 @@ lumen-dialog-close {
   text-align: center;
 }
 
+/* A 1px-wide text field makes Chromium apply maxlength to the old value when input replaces a selection. */
 .ui-input-otp__native[data-ui-enhanced="true"] {
   position: absolute;
-  width: 1px;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  width: 100%;
   height: 1px;
   overflow: hidden;
   clip-path: inset(50%);

package/v4-migration.json

@@ -437,11 +437,12 @@
   "approval": {
     "approver": "Santiago Molina (santi020k)",
     "date": "2026-10-07",
-    "decision": "Publish Lumen 4.0.0 and deploy the coordinated release; deliver playground 1.0.3 for Apple and Android review with current screenshots and listing metadata under the standing authorization, after all checks and reviews pass. Standing authorization is recorded by santi020k in PR #95 comment 6027959606.",
-    "reviewedRevision": "cdb28a38aca0071af35021341bb7fbbefd7730a6",
+    "decision": "Approve the independently reviewed Mac certificate extraction correction and real macOS tool regression under the standing authorization recorded by santi020k in PR #95 comment 6027959606. Delivery remains conditional on all required hosted checks and current Codex review passing before protected merge. Preserve immutable v4.0.0 artifacts and approved iOS and Android submissions and rollout holds; deliver the corrected Mac build from merged main.",
+    "reviewedRevision": "eea78c5a5d49f9f6610fbe23b75a8e721db03f7e",
     "evidence": [
-      "https://github.com/santi020k/lumen/commit/cdb28a38aca0071af35021341bb7fbbefd7730a6",
-      "https://github.com/santi020k/lumen/pull/95"
+      "https://github.com/santi020k/lumen/commit/eea78c5a5d49f9f6610fbe23b75a8e721db03f7e",
+      "https://github.com/santi020k/lumen/pull/95",
+      "https://github.com/santi020k/lumen/pull/101"
     ]
   }
 }