@kbach/react 0.6.48 → 0.6.49

package/dist/{chunk-CFUH3CUD.mjs → chunk-KRRGLJLA.mjs}

@@ -2868,7 +2868,16 @@ var BASE_RESET = [
   // plain text. Text-like inputs, textarea, and button don't have that problem
   // (their native chrome is just a skin around content utilities can fully
   // restyle), so they keep the blank-canvas treatment.
-  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   // Native checkbox/radio/range still get typography + spacing normalized, and
   // accent-color re-themes their native indicator to the current text color
   // instead of the browser/OS default blue, so they stay on-brand without
@@ -3837,14 +3846,14 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
-var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
 var _placeholderRuleInjected = false;
 function ensurePlaceholderColorRuleInjected() {
   if (_placeholderRuleInjected || typeof document === "undefined") return;
   _placeholderRuleInjected = true;
   const style = document.createElement("style");
   style.setAttribute("data-kbach-placeholder", "");
-  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
   document.head.appendChild(style);
 }
 function transformToWebProps(originalName, tag, props) {
@@ -3854,7 +3863,6 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
-  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -3889,7 +3897,7 @@ function transformToWebProps(originalName, tag, props) {
       if (k === "placeholderTextColor") {
         if (v) {
           ensurePlaceholderColorRuleInjected();
-          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          out[PLACEHOLDER_RULE_ATTR] = "";
           pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
         }
         continue;
@@ -3955,9 +3963,6 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
-  if (pendingClassName) {
-    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
-  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;

package/dist/{chunk-YI75WFHE.mjs → chunk-LIUJPOTS.mjs}

@@ -26,7 +26,7 @@ import {
   transformToWebProps,
   useConditionalGlobalDarkMode,
   useConditionalWidth
-} from "./chunk-CFUH3CUD.mjs";
+} from "./chunk-KRRGLJLA.mjs";
 
 // src/jsx-runtime.tsx
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";

package/dist/core/index.js

@@ -2956,7 +2956,16 @@ var BASE_RESET = [
   // plain text. Text-like inputs, textarea, and button don't have that problem
   // (their native chrome is just a skin around content utilities can fully
   // restyle), so they keep the blank-canvas treatment.
-  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   // Native checkbox/radio/range still get typography + spacing normalized, and
   // accent-color re-themes their native indicator to the current text color
   // instead of the browser/OS default blue, so they stay on-brand without

package/dist/index.js

@@ -716,14 +716,14 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
-var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
 var _placeholderRuleInjected = false;
 function ensurePlaceholderColorRuleInjected() {
   if (_placeholderRuleInjected || typeof document === "undefined") return;
   _placeholderRuleInjected = true;
   const style = document.createElement("style");
   style.setAttribute("data-kbach-placeholder", "");
-  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
   document.head.appendChild(style);
 }
 function transformToWebProps(originalName, tag, props) {
@@ -733,7 +733,6 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
-  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -768,7 +767,7 @@ function transformToWebProps(originalName, tag, props) {
       if (k === "placeholderTextColor") {
         if (v) {
           ensurePlaceholderColorRuleInjected();
-          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          out[PLACEHOLDER_RULE_ATTR] = "";
           pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
         }
         continue;
@@ -834,9 +833,6 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
-  if (pendingClassName) {
-    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
-  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;

package/dist/index.mjs

@@ -48,7 +48,7 @@ import {
   useGlobalDarkMode,
   useGlobalWidth,
   useSyncExternalStore
-} from "./chunk-CFUH3CUD.mjs";
+} from "./chunk-KRRGLJLA.mjs";
 
 // src/context.tsx
 import { createContext, useContext } from "react";

package/dist/jsx-dev-runtime.js

@@ -500,14 +500,14 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
-var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
 var _placeholderRuleInjected = false;
 function ensurePlaceholderColorRuleInjected() {
   if (_placeholderRuleInjected || typeof document === "undefined") return;
   _placeholderRuleInjected = true;
   const style = document.createElement("style");
   style.setAttribute("data-kbach-placeholder", "");
-  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
   document.head.appendChild(style);
 }
 function transformToWebProps(originalName, tag, props) {
@@ -517,7 +517,6 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
-  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -552,7 +551,7 @@ function transformToWebProps(originalName, tag, props) {
       if (k === "placeholderTextColor") {
         if (v) {
           ensurePlaceholderColorRuleInjected();
-          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          out[PLACEHOLDER_RULE_ATTR] = "";
           pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
         }
         continue;
@@ -618,9 +617,6 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
-  if (pendingClassName) {
-    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
-  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;

package/dist/jsx-dev-runtime.mjs

@@ -3,8 +3,8 @@ import {
   Fragment,
   jsx,
   jsxs
-} from "./chunk-YI75WFHE.mjs";
-import "./chunk-CFUH3CUD.mjs";
+} from "./chunk-LIUJPOTS.mjs";
+import "./chunk-KRRGLJLA.mjs";
 
 // src/jsx-dev-runtime.tsx
 function jsxDEV(type, props, key, isStaticChildren, source, self) {

package/dist/jsx-runtime.js

@@ -506,14 +506,14 @@ var _resizeModeMap = {
   "center": "none",
   "repeat": "none"
 };
-var PLACEHOLDER_RULE_CLASS = "kbach-ph";
+var PLACEHOLDER_RULE_ATTR = "data-kbach-ph";
 var _placeholderRuleInjected = false;
 function ensurePlaceholderColorRuleInjected() {
   if (_placeholderRuleInjected || typeof document === "undefined") return;
   _placeholderRuleInjected = true;
   const style = document.createElement("style");
   style.setAttribute("data-kbach-placeholder", "");
-  style.textContent = `.${PLACEHOLDER_RULE_CLASS}::placeholder{color:var(--kbach-ph-color)}`;
+  style.textContent = `[${PLACEHOLDER_RULE_ATTR}]::placeholder{color:var(--kbach-ph-color)}`;
   document.head.appendChild(style);
 }
 function transformToWebProps(originalName, tag, props) {
@@ -523,7 +523,6 @@ function transformToWebProps(originalName, tag, props) {
   const isImage = originalName === "Image" || originalName === "ImageBackground";
   const isScrollable = originalName === "ScrollView" || originalName === "FlatList" || originalName === "SectionList";
   let pendingStyle = null;
-  let pendingClassName = null;
   for (const [k, v] of Object.entries(props)) {
     if (_rnOnlyProps.has(k)) continue;
     if (k === "onPress") {
@@ -558,7 +557,7 @@ function transformToWebProps(originalName, tag, props) {
       if (k === "placeholderTextColor") {
         if (v) {
           ensurePlaceholderColorRuleInjected();
-          pendingClassName = PLACEHOLDER_RULE_CLASS;
+          out[PLACEHOLDER_RULE_ATTR] = "";
           pendingStyle = { ...pendingStyle ?? {}, "--kbach-ph-color": v };
         }
         continue;
@@ -624,9 +623,6 @@ function transformToWebProps(originalName, tag, props) {
   if (pendingStyle) {
     out.style = out.style ? { ...pendingStyle, ...out.style } : pendingStyle;
   }
-  if (pendingClassName) {
-    out.className = out.className ? `${out.className} ${pendingClassName}` : pendingClassName;
-  }
   if (isPressable && !out.role) out.role = "button";
   if (isImage && tag === "img" && out.alt == null) out.alt = "";
   return out;

package/dist/jsx-runtime.mjs

@@ -4,10 +4,10 @@ import {
   _invalidateDefaultFontCache,
   jsx,
   jsxs
-} from "./chunk-YI75WFHE.mjs";
+} from "./chunk-LIUJPOTS.mjs";
 import {
   registerWebElement
-} from "./chunk-CFUH3CUD.mjs";
+} from "./chunk-KRRGLJLA.mjs";
 export {
   Fragment,
   _invalidateDefaultFontCache,

package/dist/vite-plugin.js

@@ -78,7 +78,16 @@ var BASE_RESET = [
   // plain text. Text-like inputs, textarea, and button don't have that problem
   // (their native chrome is just a skin around content utilities can fully
   // restyle), so they keep the blank-canvas treatment.
-  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   // Native checkbox/radio/range still get typography + spacing normalized, and
   // accent-color re-themes their native indicator to the current text color
   // instead of the browser/OS default blue, so they stay on-brand without

package/dist/vite-plugin.mjs

@@ -43,7 +43,16 @@ var BASE_RESET = [
   // plain text. Text-like inputs, textarea, and button don't have that problem
   // (their native chrome is just a skin around content utilities can fully
   // restyle), so they keep the blank-canvas treatment.
-  "input:not([type='checkbox']):not([type='radio']), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
+  // :where() wraps the :not() exclusions so they contribute ZERO specificity
+  // (unlike a bare `input:not([type='checkbox']):not([type='radio'])`, whose
+  // two :not([attr]) clauses each add a class-level specificity point — (0,2,1)
+  // total, MORE than any single utility class (0,1,0)). Without :where(), this
+  // reset's `color: inherit` always won the cascade over a text-* color
+  // utility applied directly to a <input>/<textarea> regardless of source
+  // order, since author rules only override on a tie or higher specificity —
+  // confirmed on a real app: a TextInput's own text color utility resolved
+  // and injected correctly, class and all, but silently never painted.
+  "input:where(:not([type='checkbox']):not([type='radio'])), textarea { appearance: none; -webkit-appearance: none; background: transparent; padding: 0; margin: 0; font: inherit; color: inherit; line-height: inherit; }",
   // Native checkbox/radio/range still get typography + spacing normalized, and
   // accent-color re-themes their native indicator to the current text color
   // instead of the browser/OS default blue, so they stay on-brand without

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/react",
-  "version": "0.6.48",
+  "version": "0.6.49",
   "description": "React / React Native components and hooks for the Kbach framework",
   "license": "MIT",
   "repository": {