@scalewing/react 1.59.0 → 1.59.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @scalewing/react
 
+## 1.59.1
+
+### Patch Changes
+
+- 3f78164: An xs `Field`'s own text input (`input` of a typed kind, or `textarea`) now draws at the xs size: the document canvas's `[data-theme]` typed-input rule outranked `.sw-field-xs`, so the control kept the md min-height (44 px) and the inherited font size beside a 28 px xs `Select`. The xs rule now matches it under `[data-theme]` (caption type, xs min-height and padding), and on a coarse pointer the control is the 44 px touch target. Adorned and search inputs keep their frames' rules. No API change.
+
 ## 1.59.0
 
 ### Minor Changes

package/dist/css/css-chrome.js

@@ -1,5 +1,6 @@
 import { typographyVariants } from '@scalewing/tokens';
 import { appHeaderBarClassCatalog, cssAppHeaderBarClasses, } from './css-app-header-bar.js';
+import { typedInputs } from './css-document.js';
 import { cssNavWordsClasses, navWordsClassCatalog } from './css-nav-words.js';
 import { zIndex } from './stacking.js';
 import { coarsePointerQuery, touchTarget } from './touch-target.js';
@@ -71,6 +72,26 @@ ${cssNavWordsClasses()}
   padding-inline-end: calc(
     var(--sw-control-xs-padding-inline) + var(--sw-space-5)
   );
+}
+
+/*
+ * The document canvas sizes every typed input under [data-theme] (0,2,1),
+ * which outranks the xs rule above, so an xs field's own text control
+ * matches it there. Adorned and search inputs sit one level deeper and keep
+ * their frames' rules. On a coarse pointer it is the 44 px touch target.
+ */
+[data-theme] .sw-field-xs > :is(${typedInputs}) {
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+@media ${coarsePointerQuery} {
+  [data-theme] .sw-field-xs > :is(${typedInputs}) {
+    min-height: ${touchTarget};
+  }
 }`;
 }
 export function chromeClassCatalog() {

package/dist/styles.css

@@ -5045,6 +5045,26 @@ button.sw-date-toggle-day[aria-disabled='true'] {
   );
 }
 
+/*
+ * The document canvas sizes every typed input under [data-theme] (0,2,1),
+ * which outranks the xs rule above, so an xs field's own text control
+ * matches it there. Adorned and search inputs sit one level deeper and keep
+ * their frames' rules. On a coarse pointer it is the 44 px touch target.
+ */
+[data-theme] .sw-field-xs > :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea) {
+  font-size: 13px;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+@media (pointer: coarse) {
+  [data-theme] .sw-field-xs > :is(input[type='text'], input[type='email'], input[type='number'], input[type='search'], input[type='url'], input[type='password'], input:not([type]), textarea) {
+    min-height: var(--sw-control-md-min-height);
+  }
+}
+
 .sw-section-nav-list {
   border-bottom: 1px solid var(--sw-color-border);
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.59.0",
+  "version": "1.59.1",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",