ui-style-kit-css 2.7.1 → 2.7.2

package/dist/visual/paper-editorial.css

@@ -1,5 +1,5 @@
 /*!
- * UI Style Kit CSS v2.7.1
+ * UI Style Kit CSS v2.7.2
  * CSS theme and UI style preset library.
  * License: MIT
  */
@@ -2860,6 +2860,25 @@
 }
 }
 
+/** Native select affordances survive component background shorthands in the preset layer. */
+@layer ui-style-kit.presets {
+/** Keep functional chrome above native defaults while leaving component surface colors intact. */
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+  background-image: var(--usk-native-select-indicator-image);
+  background-repeat: no-repeat;
+  background-position: var(--usk-native-select-indicator-position);
+  background-size: var(--usk-native-select-indicator-size);
+}
+}
+
+/** Preset density may tune other edges, but text must retain the native indicator gutter. */
+@layer ui-style-kit.clean_defaults {
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+}
+}
+
 
 /* styles/components.css */
 /* =========================================================

package/dist/visual/retro-glass.css

@@ -1,5 +1,5 @@
 /*!
- * UI Style Kit CSS v2.7.1
+ * UI Style Kit CSS v2.7.2
  * CSS theme and UI style preset library.
  * License: MIT
  */
@@ -2860,6 +2860,25 @@
 }
 }
 
+/** Native select affordances survive component background shorthands in the preset layer. */
+@layer ui-style-kit.presets {
+/** Keep functional chrome above native defaults while leaving component surface colors intact. */
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+  background-image: var(--usk-native-select-indicator-image);
+  background-repeat: no-repeat;
+  background-position: var(--usk-native-select-indicator-position);
+  background-size: var(--usk-native-select-indicator-size);
+}
+}
+
+/** Preset density may tune other edges, but text must retain the native indicator gutter. */
+@layer ui-style-kit.clean_defaults {
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+}
+}
+
 
 /* styles/components.css */
 /* =========================================================
@@ -6045,7 +6064,7 @@
     padding: 8px 11px;
   }
 
-  .rg-select, :where([data-ui="retro-glass"]) .usk-select, :where([data-ui="retro-glass"]) .ui-select {
+  .rg-select, [data-ui="retro-glass"][data-mode] :where(select:not([multiple])), :where([data-ui="retro-glass"]) .usk-select, :where([data-ui="retro-glass"]) .ui-select {
     background-image: var(--usk-native-select-indicator-image),linear-gradient(180deg,#0000001f,transparent 18%);
     background-size: var(--usk-native-select-indicator-size),auto;
     background-position: var(--usk-native-select-indicator-position),center;

package/dist/visual/retrofuturism.css

@@ -1,5 +1,5 @@
 /*!
- * UI Style Kit CSS v2.7.1
+ * UI Style Kit CSS v2.7.2
  * CSS theme and UI style preset library.
  * License: MIT
  */
@@ -2860,6 +2860,25 @@
 }
 }
 
+/** Native select affordances survive component background shorthands in the preset layer. */
+@layer ui-style-kit.presets {
+/** Keep functional chrome above native defaults while leaving component surface colors intact. */
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+  background-image: var(--usk-native-select-indicator-image);
+  background-repeat: no-repeat;
+  background-position: var(--usk-native-select-indicator-position);
+  background-size: var(--usk-native-select-indicator-size);
+}
+}
+
+/** Preset density may tune other edges, but text must retain the native indicator gutter. */
+@layer ui-style-kit.clean_defaults {
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+}
+}
+
 
 /* styles/components.css */
 /* =========================================================

package/dist/visual/tactile.css

@@ -1,5 +1,5 @@
 /*!
- * UI Style Kit CSS v2.7.1
+ * UI Style Kit CSS v2.7.2
  * CSS theme and UI style preset library.
  * License: MIT
  */
@@ -2860,6 +2860,25 @@
 }
 }
 
+/** Native select affordances survive component background shorthands in the preset layer. */
+@layer ui-style-kit.presets {
+/** Keep functional chrome above native defaults while leaving component surface colors intact. */
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+  background-image: var(--usk-native-select-indicator-image);
+  background-repeat: no-repeat;
+  background-position: var(--usk-native-select-indicator-position);
+  background-size: var(--usk-native-select-indicator-size);
+}
+}
+
+/** Preset density may tune other edges, but text must retain the native indicator gutter. */
+@layer ui-style-kit.clean_defaults {
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+}
+}
+
 
 /* styles/components.css */
 /* =========================================================

package/dist/visual/technical-blueprint.css

@@ -1,5 +1,5 @@
 /*!
- * UI Style Kit CSS v2.7.1
+ * UI Style Kit CSS v2.7.2
  * CSS theme and UI style preset library.
  * License: MIT
  */
@@ -2860,6 +2860,25 @@
 }
 }
 
+/** Native select affordances survive component background shorthands in the preset layer. */
+@layer ui-style-kit.presets {
+/** Keep functional chrome above native defaults while leaving component surface colors intact. */
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+  background-image: var(--usk-native-select-indicator-image);
+  background-repeat: no-repeat;
+  background-position: var(--usk-native-select-indicator-position);
+  background-size: var(--usk-native-select-indicator-size);
+}
+}
+
+/** Preset density may tune other edges, but text must retain the native indicator gutter. */
+@layer ui-style-kit.clean_defaults {
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+}
+}
+
 
 /* styles/components.css */
 /* =========================================================

package/dist/visual/y2k.css

@@ -1,5 +1,5 @@
 /*!
- * UI Style Kit CSS v2.7.1
+ * UI Style Kit CSS v2.7.2
  * CSS theme and UI style preset library.
  * License: MIT
  */
@@ -2860,6 +2860,25 @@
 }
 }
 
+/** Native select affordances survive component background shorthands in the preset layer. */
+@layer ui-style-kit.presets {
+/** Keep functional chrome above native defaults while leaving component surface colors intact. */
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+  background-image: var(--usk-native-select-indicator-image);
+  background-repeat: no-repeat;
+  background-position: var(--usk-native-select-indicator-position);
+  background-size: var(--usk-native-select-indicator-size);
+}
+}
+
+/** Preset density may tune other edges, but text must retain the native indicator gutter. */
+@layer ui-style-kit.clean_defaults {
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+}
+}
+
 
 /* styles/components.css */
 /* =========================================================

package/docs/ECOSYSTEM.md

@@ -14,11 +14,11 @@ Before a UI branch or pull request is expected to validate, verify the reviewed
 
 | Library | Current aligned version | Owns |
 |---|---:|---|
-| `ui-style-kit-css@2.7.1` | current UI version | visual identity, color themes, UI paint, native HTML styling, content wrapping, and bridge tokens |
+| `ui-style-kit-css@2.7.2` | current UI version | visual identity, color themes, UI paint, native HTML styling, content wrapping, and bridge tokens |
 | `interactive-surface-css@1.7.3` | compatible state release | interaction-state primitives, surface behavior, state layers, and input affordances |
 | `layout-style-css@3.2.3` | compatible structural release | structural wrappers, grids, sections, app shells, and layout recipes |
 
-The current combination is `ui-style-kit-css@2.7.1`, `interactive-surface-css@1.7.3`, and `layout-style-css@3.2.3`. UI Style Kit `2.7.1` is the current UI version. The companion versions are reviewed releases. Layout Style `3.2.3` is the compatible structural release. The validated minimum remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
+The current combination is `ui-style-kit-css@2.7.2`, `interactive-surface-css@1.7.3`, and `layout-style-css@3.2.3`. UI Style Kit `2.7.2` is the current UI version. The companion versions are reviewed releases. Layout Style `3.2.3` is the compatible structural release. The validated minimum remains `ui-style-kit-css@2.1.0`, `interactive-surface-css@1.5.0`, and `layout-style-css@3.0.0`.
 
 ## Layout-to-visual pairing matrix
 

package/docs/PUBLISHING.md

@@ -1,5 +1,9 @@
 # Publishing Guide
 
+## 2.7.2 focused patch route
+
+The owner authorized selected affected checks and prohibited CI/full suites for this repair. Follow [the 2.7.2 publication boundary](RELEASE-2.7.2.md) and the reviewed manual publish-select-patch.yml workflow. It requires signed exact source, the merged exact-head STE-Adam review, generated-asset reproduction, package admission and anonymous byte readback. It uses the existing npm publisher credential; no new secret or application deployment is included. Do not dispatch either legacy publisher for this patch. The 2.7.1 procedure below is historical and does not describe current 2.7.2 evidence.
+
 ## 2.7.1 release workflow
 
 This guide prepares version `2.7.1`. [Release preparation notes](RELEASE-2.7.1.md)

package/docs/RELEASE-2.7.2.md

@@ -0,0 +1,55 @@
+# v2.7.2 native select affordance patch
+
+This compatible patch restores dropdown cues while retaining the 20 presets,
+25 themes, public entrypoints, native popups and semantic namespaces.
+
+## Corrections
+
+Preset-layer semantic field background shorthands reset the native indicator's
+image, size, position and repetition. The shared fallback restores the existing
+public tokens above generic component paint. The reserved text gutter survives
+compact preset padding. Retro Glass keeps its indicator above its recessed
+material; Neo Noir keeps its browser-owned arrow without duplicate custom paint.
+Tactile hardware arrows and Clay texture layers remain preset-owned.
+
+## Focused evidence
+
+Two individually selected Chromium cases passed. The first visits all 20 presets
+in light, dark and contrast modes with native, canonical `.usk-select`, compatibility
+`.ui-select` and prefixed controls. The second checks keyboard selection, disabled
+and multiple-select semantics, and settled LTR/RTL positioning under reduced
+motion. The selected original single/multiple source contract and new publication
+authority case also passed. The three changed stylesheets pass focused lint.
+Named-theme, Firefox, WebKit and whole-suite results are not claimed here.
+
+The first shared fix exposed Y2K gutter reset and Retro Glass material precedence.
+Generated alias tracing identified Neo Noir's reduced root specificity. Test-only
+corrections distinguish repeating Clay texture from indicators, preserve Tactile's
+hardware end cap, and await computed CSS settlement in a standards-mode fixture.
+
+Gnomie visually inspected the candidate CSS on the retained actual installed SYS
+catalog DOM at desktop and phone widths. Both catalog page-size and language
+controls had bounded arrows without overflow. This diagnostic preview is separate
+from published-package consumer qualification and hosted acceptance.
+
+## Publication boundary
+
+The owner authorized selected affected checks and prohibited CI/full suites for
+this repair. The manual `publish-select-patch.yml` route is restricted to 2.7.2.
+It requires a verified exact source commit, merged PR and STE-Adam's latest
+approval of that head independently of the author. A trusted main controller is
+retained before candidate checkout. It reproduces tracked generated assets, checks
+package contents, packs without lifecycle hooks, uses the existing npm package-owner
+credential and compares anonymous public npm bytes to its SHA-256/SHA-512 receipt.
+The matching GitHub release includes that tarball and receipt. The built-in
+repository token creates its tag/release without starting legacy CI publishers.
+No tests, CI script, new secret, paid resource or application deployment is included.
+
+Default historical publishers and package hooks remain unchanged. This route does
+not assert their suites ran. This CSS repository has no configured jsdoc2md
+generator. The new publisher has a [granular jsdoc2md reference](api/publish-select-patch.md), generated using the existing SYS workspace tool. Professional JSDoc-compatible comments, maintained documentation and
+the normal build preserve the source/generated boundary. Tracked wiki changes do
+not publish the hosted Wiki. SYS must qualify the actual published stable package
+and its integrity before production.
+
+Interactive Surface CSS 1.7.3 and Layout Style CSS 3.2.3 remain aligned companions.

package/docs/api/publish-select-patch.md

@@ -0,0 +1,80 @@
+<!-- Generated with jsdoc2md from scripts/publish-select-patch.mjs; do not edit by hand. -->
+
+## Functions
+
+<dl>
+<dt><a href="#admitFocusedPatch">admitFocusedPatch(evidence)</a> ⇒ <code>string</code></dt>
+<dd><p>Admit only this patch&#39;s verified source and the latest exact-source STE-Adam review.</p>
+</dd>
+<dt><a href="#run">run(program, args)</a> ⇒ <code>string</code></dt>
+<dd><p>Execute a fixed program with argument-array boundaries and no credential output on failure.</p>
+</dd>
+<dt><a href="#api">api(endpoint)</a> ⇒ <code>object</code></dt>
+<dd><p>Read one bounded JSON result from the authenticated repository API.</p>
+</dd>
+<dt><a href="#receipt">receipt()</a> ⇒ <code>object</code></dt>
+<dd><p>Read the immutable checksum receipt produced before publication.</p>
+</dd>
+<dt><a href="#main">main(mode)</a> ⇒ <code>Promise.&lt;void&gt;</code></dt>
+<dd><p>Publish-support commands perform admission, artifact hashing and public byte readback only.
+The workflow owns the explicit npm publication; no tests or lifecycle hooks are dispatched here.</p>
+</dd>
+</dl>
+
+<a name="admitFocusedPatch"></a>
+
+## admitFocusedPatch(evidence) ⇒ <code>string</code>
+Admit only this patch's verified source and the latest exact-source STE-Adam review.
+
+**Kind**: global function  
+**Returns**: <code>string</code> - Exact admitted source commit.  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| evidence | <code>object</code> | Authoritative GitHub and checked-out package evidence. |
+
+<a name="run"></a>
+
+## run(program, args) ⇒ <code>string</code>
+Execute a fixed program with argument-array boundaries and no credential output on failure.
+
+**Kind**: global function  
+**Returns**: <code>string</code> - Successful standard output.  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| program | <code>string</code> | Fixed executable. |
+| args | <code>Array.&lt;string&gt;</code> | Literal arguments. |
+
+<a name="api"></a>
+
+## api(endpoint) ⇒ <code>object</code>
+Read one bounded JSON result from the authenticated repository API.
+
+**Kind**: global function  
+**Returns**: <code>object</code> - Parsed API result.  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| endpoint | <code>string</code> | Fixed repository endpoint with validated scope. |
+
+<a name="receipt"></a>
+
+## receipt() ⇒ <code>object</code>
+Read the immutable checksum receipt produced before publication.
+
+**Kind**: global function  
+**Returns**: <code>object</code> - Exact artifact identity.  
+<a name="main"></a>
+
+## main(mode) ⇒ <code>Promise.&lt;void&gt;</code>
+Publish-support commands perform admission, artifact hashing and public byte readback only.
+The workflow owns the explicit npm publication; no tests or lifecycle hooks are dispatched here.
+
+**Kind**: global function  
+**Returns**: <code>Promise.&lt;void&gt;</code> - Completion after the selected phase verifies its boundary.  
+
+| Param | Type | Description |
+| --- | --- | --- |
+| mode | <code>string</code> | Fixed workflow phase. |
+

package/manifest.json

@@ -5,7 +5,7 @@
     "breakingChange": "increment-schemaVersion-before-removing-or-renaming-fields"
   },
   "name": "ui-style-kit-css",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "cascadeLayers": [
     "ui-style-kit.theme_colors",
     "ui-style-kit.native_elements",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ui-style-kit-css",
-  "version": "2.7.1",
+  "version": "2.7.2",
   "description": "CSS theme and UI style preset library for accessible websites, dashboards, admin interfaces, and client-facing pages.",
   "style": "dist/ui-style-kit.css",
   "main": "dist/ui-style-kit.css",

package/styles/native-elements.css

@@ -856,3 +856,22 @@
   }
 }
 }
+
+/** Native select affordances survive component background shorthands in the preset layer. */
+@layer ui-style-kit.presets {
+/** Keep functional chrome above native defaults while leaving component surface colors intact. */
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+  background-image: var(--usk-native-select-indicator-image);
+  background-repeat: no-repeat;
+  background-position: var(--usk-native-select-indicator-position);
+  background-size: var(--usk-native-select-indicator-size);
+}
+}
+
+/** Preset density may tune other edges, but text must retain the native indicator gutter. */
+@layer ui-style-kit.clean_defaults {
+[data-ui][data-mode] :where(select:not([multiple])) {
+  padding-inline-end: var(--usk-native-select-padding-inline-end);
+}
+}

package/styles/neo-noir.css

@@ -1092,7 +1092,8 @@
   color: var(--noir-text); background: var(--noir-control-bg); border: 1px solid var(--noir-border);
   border-radius: 0; clip-path: none; box-shadow: none; font: 11px/1.4 var(--noir-font-mono);
 }
-.noir-select { appearance: auto; background-image: none; padding-right: .5rem; }
+/** Preserve the preset's browser-owned arrow when shared semantic fallback chrome is present. */
+.noir-select, [data-ui="neo-noir"][data-mode] .noir-select { appearance: auto; background-image: none; padding-right: .5rem; }
 .noir-input:focus, .noir-textarea:focus, .noir-select:focus, .noir-field-row[data-noir-state="focus"] :is(input,textarea) { border-color: var(--noir-focus); box-shadow: none; outline: 2px solid var(--noir-focus); outline-offset: 1px; }
 .noir-input[aria-invalid="true"], .noir-textarea[aria-invalid="true"] { border-color: var(--noir-danger); color: var(--noir-danger); box-shadow: none; }
 .noir-field-row[data-noir-state="success"] input { border-color: var(--noir-success); color: var(--noir-success); }

package/styles/retro-glass.css

@@ -1010,7 +1010,8 @@
 .rg-button:disabled, .rg-icon-button:disabled, .rg-button.is-disabled { opacity: .4; filter: saturate(.45); cursor: not-allowed; box-shadow: none; }
 .rg-field { display: block; min-inline-size: 0; }
 .rg-input, .rg-select, .rg-textarea { inline-size: 100%; min-block-size: var(--rg-control-height); padding: 8px 11px; background: var(--rg-glass-inset); color: var(--rg-text); border: 1px solid var(--rg-line-strong); border-radius: var(--rg-radius-sm); box-shadow: inset 0 1px 3px var(--rg-recess), 0 1px 0 var(--rg-highlight); font: 14px/1.3 var(--rg-font-body); }
-.rg-select { padding-inline-end: 32px; background-image: var(--usk-native-select-indicator-image), linear-gradient(180deg, rgb(0 0 0 / .12), transparent 18%); background-size: var(--usk-native-select-indicator-size), auto; background-position: var(--usk-native-select-indicator-position), center; background-repeat: no-repeat; }
+/** Native and semantic selects retain the same indicator above the recessed glass material. */
+.rg-select, [data-ui="retro-glass"][data-mode] :where(select:not([multiple])) { padding-inline-end: 32px; background-image: var(--usk-native-select-indicator-image), linear-gradient(180deg, rgb(0 0 0 / .12), transparent 18%); background-size: var(--usk-native-select-indicator-size), auto; background-position: var(--usk-native-select-indicator-position), center; background-repeat: no-repeat; }
 .rg-textarea { min-block-size: 64px; resize: vertical; }
 .rg-input::placeholder, .rg-textarea::placeholder { color: var(--rg-muted); opacity: 1; }
 .rg-input-wrap { display: flex; align-items: center; position: relative; }