srcdev-nuxt-components 9.3.1 → 9.3.2

package/app/components/05.forms/input-select/CONSUMER-STYLING.md

@@ -0,0 +1,42 @@
+# InputSelectCore — Consumer Styling Guide
+
+## Two override paths
+
+Same public/private split as `InputTextCore` (see that component's `CONSUMER-STYLING.md` for the
+full rationale) — `.input-select-wrapper` now exposes local tokens, one indirection step below the
+global `--theme-*` ones they default from:
+
+```css
+--_input-select-surface: var(--theme-input-surface);
+--_input-select-surface-hover: var(--theme-input-surface-hover);
+--_input-select-border: var(--theme-border);
+--_input-select-border-focus: var(--theme-border-focus);
+--_input-select-outline-color: var(--_input-select-border-focus);
+```
+
+- **Global override**: redeclare `--theme-input-surface` / `--theme-border` / `--theme-border-focus`
+  / `--theme-input-surface-hover` wherever you'd normally set theme tokens.
+- **Local override** (this component only, guaranteed to win):
+
+```css
+.input-select-wrapper {
+  --_input-select-border: var(--slate-06);
+  --_input-select-border-focus: var(--slate-04);
+  --_input-select-surface: var(--slate-01);
+}
+```
+
+## Note on `--_input-select-outline-color`
+
+Before 2026-08-22 this was referenced (on the open-picker outline) but never declared anywhere —
+a dangling private token that silently resolved to the property's initial value (same failure mode
+as the `--theme-button-surface` typo documented in the layer's `CLAUDE.md`, pitfall list). It's now
+properly defined, defaulting to `--_input-select-border-focus`.
+
+---
+
+## Other tokens
+
+Generic form-geometry tokens (`--input-padding-inline`, `--input-min-height`, `--input-font-size`,
+`--form-element-border-width`, `--form-input-border-radius`, etc.) are shared across every
+`05.forms` component and declared in `setup/04.elements/forms/*.css` — not component-local.

package/app/components/05.forms/input-select/InputSelectCore.vue

@@ -73,7 +73,17 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 <style lang="css">
 @layer components {
 .input-select-wrapper {
-  background-color: var(--theme-input-surface);
+  /* Local overrides, one indirection step below the global --theme-* tokens they default from —
+     a consumer can target `.input-select-wrapper { --_input-select-border: ...; }` directly for
+     a guaranteed-specific override, instead of relying solely on redefining the global token.
+     See CONSUMER-STYLING.md. */
+  --_input-select-surface: var(--theme-input-surface);
+  --_input-select-surface-hover: var(--theme-input-surface-hover);
+  --_input-select-border: var(--theme-border);
+  --_input-select-border-focus: var(--theme-border-focus);
+  --_input-select-outline-color: var(--_input-select-border-focus);
+
+  background-color: var(--_input-select-surface);
   overflow: hidden;
 
   z-index: 2;
@@ -81,31 +91,33 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
   transition: all var(--theme-form-transition-duration) ease-in-out;
 
   &.normal {
-    border: var(--form-element-border-width) solid var(--theme-border);
+    border: var(--form-element-border-width) solid var(--_input-select-border);
     border-radius: var(--form-input-border-radius);
     outline: var(--form-element-outline-width) solid transparent;
   }
 
   &.underlined {
-    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-border);
-    background-color: var(--theme-input-surface);
+    border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_input-select-border);
+    background-color: var(--_input-select-surface);
   }
 
   &:has(select:focus-visible, :hover) {
-    outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+    outline: var(--form-element-outline-width-focus) solid var(--_input-select-border-focus);
     outline-offset: var(--form-element-outline-offset-focus);
   }
 
   .input-select-core {
     appearance: none;
     background-color: transparent;
+    display: flex;
+    align-items: center;
 
     /* For legacy support - eg, Safari */
     /* &::after {
       content: '';
       width: 0.8em;
       height: 0.5em;
-      background-color: var(--theme-border);
+      background-color: var(--_input-select-border);
       clip-path: polygon(100% 0%, 0 0%, 50% 100%);
     } */
 
@@ -128,7 +140,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 
     &:open::picker(select) {
       opacity: 1;
-      border: var(--form-element-border-width) solid var(--theme-border);
+      border: var(--form-element-border-width) solid var(--_input-select-border);
       outline: var(--form-element-outline-width) solid var(--_input-select-outline-color);
 
       @starting-style {
@@ -145,7 +157,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
 
     font-family: var(--font-family);
     font-size: var(--input-font-size);
-    line-height: var(--input-element-line-height);
+    /* line-height: var(--input-element-line-height); */
     padding-block: var(--input-padding-block);
     padding-inline: var(--input-padding-inline);
     min-height: var(--input-min-height);
@@ -156,7 +168,7 @@ const fieldData = defineModel("fieldData") as Ref<IFormMultipleOptions>;
       transition: all var(--theme-form-transition-duration) ease-in-out;
 
       &:hover {
-        background-color: var(--theme-input-surface-hover);
+        background-color: var(--_input-select-surface-hover);
       }
 
       .input-select-core-option-decorator-icon {

package/app/components/05.forms/input-text/CONSUMER-STYLING.md

@@ -0,0 +1,60 @@
+# InputTextCore — Consumer Styling Guide
+
+## Two override paths
+
+Before 2026-08-22, `.input-text-wrapper` read the global `--theme-*` tokens directly
+(`--theme-input-surface`, `--theme-border`, `--theme-border-focus`, `--theme-input-surface-hover`).
+Overriding those globally (e.g. in a consumer app's unlayered `:root` block) should always have
+worked on pure CSS-cascade grounds — an unlayered `:root` declaration (specificity `0,1,0`) beats
+the layer's own `:where(html, [data-theme], [data-invalid])` declaration (specificity `0`)
+regardless of source/import order — but a consumer app hit a case where a global override wasn't
+visibly landing and the root cause wasn't pinned down (see `nuxt-components`'s own git history
+around the same date for a *different*, confirmed bug in a sibling app: wrapping consumer CSS in
+`@layer consumer` broke in production because SSR-inlined per-chunk `<style>` tags fix layer
+priority by first-reference document order, not the app's intended `@layer` statement order — sic
+that isn't what was happening here, since the consumer app's CSS was already unlayered, but it's
+the same class of "cascade behaves differently than a clean mental model predicts" issue).
+
+Rather than leave global-token overrides as the only lever, `.input-text-wrapper` now also
+exposes its own local tokens, one indirection step below the global ones:
+
+```css
+--_input-text-surface: var(--theme-input-surface);
+--_input-text-surface-hover: var(--theme-input-surface-hover);
+--_input-text-border: var(--theme-border);
+--_input-text-border-focus: var(--theme-border-focus);
+```
+
+- **Global override** (affects every themed component, not just this one): redeclare
+  `--theme-input-surface` / `--theme-border` / `--theme-border-focus` / `--theme-input-surface-hover`
+  at whatever scope you'd normally set theme tokens (`:root`, `[data-theme]`, a page wrapper).
+- **Local override** (this component only, guaranteed to win — it's the last declaration before
+  the property that consumes it, no global-token indirection to reason about):
+
+```css
+/* Unscoped consumer CSS, no :deep() needed */
+.input-text-wrapper {
+  --_input-text-border: var(--slate-06);
+  --_input-text-border-focus: var(--slate-04);
+  --_input-text-surface: var(--slate-01);
+}
+```
+
+Prefer the local override when you only want to change this one component's look, or when you've
+hit a case (like the one above) where a global-token change isn't landing and you don't have time
+to dig into why — the local path is a strictly simpler cascade to reason about.
+
+---
+
+## Other tokens
+
+- `--input-icon-slot-gap`, `--input-padding-inline`, `--input-padding-block`, `--input-min-height`,
+  `--input-font-size`, `--form-element-border-width`, `--form-input-border-radius`,
+  `--form-element-border-bottom-width-underlined`, `--form-element-outline-width(-focus)`,
+  `--form-element-outline-offset-focus` — all generic form-geometry tokens shared across every
+  `05.forms` component, declared in `setup/04.elements/forms/*.css`. Not component-local, so
+  overriding one affects every form element, not just `InputTextCore`.
+- `--theme-input-text-color-normal`, `--theme-input-placeholder`,
+  `--theme-input-placeholder-font-size` — still read directly from the global theme tokens, no
+  local indirection yet. Follow the same pattern above (`--_input-text-*`) if a future consumer
+  needs a local override for these.

package/app/components/05.forms/input-text/InputTextCore.vue

@@ -127,10 +127,19 @@ onMounted(() => {
 <style lang="css">
 @layer components {
   .input-text-wrapper {
+    /* Local overrides, one indirection step below the global --theme-* tokens they default from
+       — a consumer can target `.input-text-wrapper { --_input-text-border: ...; }` directly for
+       a guaranteed-specific override, instead of relying solely on redefining the global token.
+       See CONSUMER-STYLING.md. */
+    --_input-text-surface: var(--theme-input-surface);
+    --_input-text-surface-hover: var(--theme-input-surface-hover);
+    --_input-text-border: var(--theme-border);
+    --_input-text-border-focus: var(--theme-border-focus);
+
     display: flex;
     align-items: center;
     gap: var(--input-icon-slot-gap);
-    background-color: var(--theme-input-surface);
+    background-color: var(--_input-text-surface);
     overflow: hidden;
     transition: all var(--theme-form-transition-duration) ease-in-out;
 
@@ -138,25 +147,25 @@ onMounted(() => {
     position: relative;
 
     &.normal {
-      border: var(--form-element-border-width) solid var(--theme-border);
+      border: var(--form-element-border-width) solid var(--_input-text-border);
       border-radius: var(--form-input-border-radius);
       outline: var(--form-element-outline-width) solid transparent;
 
       padding-inline: var(--input-padding-inline);
 
       &:has(input:is(:hover), button:is(:hover)) {
-        outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+        outline: var(--form-element-outline-width-focus) solid var(--_input-text-border-focus);
         outline-offset: var(--form-element-outline-offset-focus);
       }
 
       &:has(input:focus-visible, button:focus-visible) {
-        outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+        outline: var(--form-element-outline-width-focus) solid var(--_input-text-border-focus);
         outline-offset: var(--form-element-outline-offset-focus);
       }
     }
 
     &.underlined {
-      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--theme-border);
+      border-bottom: var(--form-element-border-bottom-width-underlined) solid var(--_input-text-border);
       padding-inline: var(--input-padding-inline);
     }
 
@@ -171,17 +180,17 @@ onMounted(() => {
       box-sizing: content-box;
 
       .input-button-core {
-        background-color: var(--theme-input-surface);
+        background-color: var(--_input-text-surface);
         aspect-ratio: 1;
         border-radius: 0;
         width: var(--input-min-height);
 
         &:hover {
-          background-color: var(--theme-input-surface-hover);
+          background-color: var(--_input-text-surface-hover);
         }
 
         &:is(:focus-visible) {
-          outline: var(--form-element-outline-width-focus) solid var(--theme-border-focus);
+          outline: var(--form-element-outline-width-focus) solid var(--_input-text-border-focus);
           outline-offset: -4px;
         }
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "9.3.1",
+  "version": "9.3.2",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
   "license": "MIT",