@apliteni/apliteni-ui 0.75.0 → 0.75.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.75.0",
+  "version": "0.75.2",
   "workspaces": [
     "react"
   ],

package/react/README.md

@@ -29,6 +29,9 @@ import '@apliteni/apliteni-ui/react/css';  // React components' shell styles (mo
 import { DataTable, Modal, Button } from '@apliteni/apliteni-ui/react';
 ```
 
+Both stylesheets. The React one adds what React's own components need — it carries no tokens, no
+reset and none of the kit's control CSS, so it cannot stand in for the first import.
+
 Components: `Success`, `SuccessPanel`, `SuccessCheck`, `Checkbox`, `Switch`, `SearchField`, `EmptyState`, `DataTable`, `Pagination`, `StatBand`, `Modal`, `Confirm`, `Drawer`, `CommandPalette`, `Dropdown`, `BackLink`, `Tooltip`, `Snippet`, `Tabs`, `Button`, `Badge`, `Pill`, `StatusDot`, `Card`, `Callout`, `Icon`.
 
 `Pill` renders metadata with the existing pill spacing. Omit `variant` for neutral

package/react/dist/index.css

@@ -109,260 +109,6 @@
   }
 }
 
-/* ../src/styles/input.css */
-.ui-field {
-  display: block;
-}
-.ui-field__label {
-  display: block;
-  color: var(--strong);
-  font-size: var(--text-base);
-  font-weight: var(--weight-medium);
-  margin-bottom: 8px;
-}
-.ui-field__req {
-  color: var(--pink);
-  margin-left: 4px;
-}
-.ui-field__hint {
-  color: var(--text);
-  font-size: var(--text-sm);
-  margin-top: 7px;
-  line-height: 1.5;
-}
-.ui-field__error {
-  color: var(--pink);
-  font-size: var(--text-sm);
-  margin-top: 7px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.ui-field__error svg {
-  width: 16px;
-  height: 16px;
-  flex: none;
-  stroke-width: 2.4;
-}
-.ui-input,
-.ui-textarea,
-.ui-select {
-  font-family: var(--font-sans);
-  font-size: var(--text-base);
-  color: var(--strong);
-  background: var(--field-bg);
-  border: 1px solid var(--field-edge);
-  border-radius: var(--radius-md);
-  padding: 12px 15px;
-  width: 100%;
-  transition: border-color var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease);
-}
-.ui-textarea {
-  resize: vertical;
-  min-height: 96px;
-  line-height: 1.55;
-}
-.ui-input:hover,
-.ui-textarea:hover,
-.ui-select:hover {
-  border-color: var(--field-edge-hover);
-}
-.ui-input:focus-visible,
-.ui-textarea:focus-visible,
-.ui-select:focus-visible {
-  outline: 2px solid transparent;
-  border-color: var(--accent);
-  box-shadow: var(--ring);
-}
-.ui-input::placeholder,
-.ui-textarea::placeholder {
-  color: var(--muted);
-  opacity: 0.9;
-}
-.ui-input:disabled,
-.ui-select:disabled,
-.ui-textarea:disabled {
-  background: var(--disabled-surface);
-  border-color: var(--disabled-border);
-  color: var(--disabled-ink);
-  cursor: not-allowed;
-}
-.ui-input.is-invalid,
-.ui-select.is-invalid,
-.ui-textarea.is-invalid {
-  border-color: var(--pink);
-}
-.ui-input[type=search]::-webkit-search-cancel-button {
-  appearance: none;
-  display: none;
-}
-.ui-input-group {
-  position: relative;
-  display: flex;
-  align-items: center;
-}
-.ui-input-group .ui-input {
-  padding-left: 42px;
-}
-.ui-input-group__icon {
-  position: absolute;
-  left: 14px;
-  width: 17px;
-  height: 17px;
-  color: var(--muted);
-  pointer-events: none;
-}
-.ui-input-group__icon svg {
-  width: 100%;
-  height: 100%;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 2.2;
-}
-.ui-select {
-  appearance: none;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a29db6' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 15px center;
-  padding-right: 40px;
-  cursor: pointer;
-}
-:root[data-theme=light] .ui-select {
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235c6270' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
-}
-.ui-check {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: 11px;
-  cursor: pointer;
-  font-size: var(--text-base);
-  color: var(--text);
-  line-height: 1.5;
-}
-.ui-check input {
-  appearance: none;
-  width: 19px;
-  height: 19px;
-  flex: none;
-  margin-top: 1px;
-  border: 1.5px solid var(--border-strong);
-  border-radius: var(--radius-xs);
-  background: var(--surface-2);
-  cursor: pointer;
-  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
-  position: relative;
-}
-.ui-check input::before {
-  content: "";
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 24px;
-  height: 24px;
-  transform: translate(-50%, -50%);
-}
-.ui-check input[type=radio] {
-  border-radius: 50%;
-}
-.ui-check input:enabled:hover {
-  border-color: var(--accent);
-}
-.ui-check input:checked {
-  background: var(--accent);
-  border-color: var(--accent);
-}
-.ui-check input[type=checkbox]:checked::after {
-  content: "";
-  position: absolute;
-  left: 5px;
-  top: 1.5px;
-  width: 5px;
-  height: 10px;
-  border: solid var(--accent-contrast);
-  border-width: 0 2px 2px 0;
-  transform: rotate(45deg);
-}
-.ui-check input[type=radio]:checked::after {
-  content: "";
-  position: absolute;
-  inset: 4px;
-  border-radius: 50%;
-  background: var(--accent-contrast);
-}
-.ui-check input:focus-visible {
-  outline: 2px solid transparent;
-  box-shadow: var(--ring);
-}
-.ui-check input:disabled {
-  background: var(--disabled-surface);
-  border-color: var(--disabled-border);
-  cursor: not-allowed;
-}
-.ui-check input:disabled:checked {
-  background: var(--disabled-ink);
-  border-color: var(--disabled-ink);
-}
-.ui-check input[type=checkbox]:disabled:checked::after {
-  border-color: var(--disabled-surface);
-}
-.ui-check input[type=radio]:disabled:checked::after {
-  background: var(--disabled-surface);
-}
-.ui-check:has(input:disabled) {
-  color: var(--disabled-ink);
-  cursor: not-allowed;
-}
-.ui-switch {
-  --sw-w: 44px;
-  --sw-h: 26px;
-  position: relative;
-  display: inline-block;
-  width: var(--sw-w);
-  height: var(--sw-h);
-  flex: none;
-}
-.ui-switch input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-.ui-switch__track {
-  position: absolute;
-  inset: 0;
-  background: var(--surface-3);
-  border-radius: var(--radius-pill);
-  cursor: pointer;
-  transition: background var(--dur-med) var(--ease);
-}
-.ui-switch__track::before {
-  content: "";
-  position: absolute;
-  top: 3px;
-  left: 3px;
-  width: calc(var(--sw-h) - 6px);
-  height: calc(var(--sw-h) - 6px);
-  background: var(--control-knob);
-  border: 1px solid var(--border-strong);
-  box-sizing: border-box;
-  border-radius: 50%;
-  transition: transform var(--dur-med) var(--ease);
-}
-.ui-switch input:checked + .ui-switch__track {
-  background: var(--accent);
-}
-.ui-switch input:checked + .ui-switch__track::before {
-  transform: translateX(calc(var(--sw-w) - var(--sw-h)));
-}
-.ui-switch input:focus-visible + .ui-switch__track {
-  outline: 2px solid transparent;
-  box-shadow: var(--ring);
-}
-.ui-switch input:disabled + .ui-switch__track {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
 /* ../src/styles/tooltip.css */
 .ui-tip-host {
   position: relative;

package/src/styles/input.css

@@ -50,16 +50,16 @@
 .ui-textarea::placeholder { /* muted-ink: placeholder — empty form field */ color: var(--muted); opacity: 0.9; }
 
 /* The value a reader typed is still the value; it goes quiet, it does not fade
-   into the field under it the way an opacity would take both down together. #220 */
-/* `.ui-select` joins these two in #273. It had no disabled rule at all, and it
-   sets `background: var(--surface-2)` as an author declaration — which outranks
-   the UA's own grey-out — so a disabled select rendered pixel-identical to a live
-   one. A pager marked busy showed every button and the jump input visibly off
-   beside a size control that still looked available. */
+   into the field under it the way an opacity would take both down together. #220
+   `.ui-select` joined the pair in #273: it paints its own field, which outranks the
+   UA's grey-out, so a disabled one had looked exactly like a live one.
+   `background-color`, not `background` — the shorthand also resets the three
+   longhands the chevron is drawn with (#511). Held by stories/select-chevron.test.js.
+   why: docs/specification.md#icons-and-glyphs */
 .ui-input:disabled,
 .ui-select:disabled,
 .ui-textarea:disabled {
-  background: var(--disabled-surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
+  background-color: var(--disabled-surface); /* ring-gap: inherit — control paint; its focus indicator uses the containing surface. */
   border-color: var(--disabled-border);
   /* muted-ink: state — unavailable control */ color: var(--disabled-ink);
   cursor: not-allowed;