@ceebee/ui 1.4.0 → 1.4.2

package/dist/styles.css

@@ -1919,13 +1919,21 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
    the ones Ant already puts in the server-rendered markup, including its variant and size classes,
    so a first paint can respect them. */
 
+/* Sizes below are Ant's own derived values, read out of a rendered control and then expressed in
+   Tokens rather than guessed: Ant lands on a spacing Token less its own border width, so
+   `space-4 - border-width` is 15px and `space-3 - border-width` is 11px. Where a variant's geometry
+   has not been measured that way, this layer states no size for it — a wrong size flickers as badly
+   as no size, and pretends to be right. */
+
 :where(.ant-btn) {
+  box-sizing: border-box;
   display: inline-flex;
-  min-height: var(--cb-control-height-md);
+  height: var(--cb-control-height-md);
   align-items: center;
   justify-content: center;
   gap: var(--cb-space-2);
-  padding-inline: var(--cb-space-4);
+  padding-block: var(--cb-space-0);
+  padding-inline: calc(var(--cb-space-4) - var(--cb-border-width));
   border: var(--cb-border-width) solid var(--cb-border-strong);
   border-radius: var(--cb-radius-sm);
   background: var(--cb-surface);
@@ -1934,20 +1942,20 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   font-size: var(--cb-text-sm);
 }
 
+/* Height and type scale come straight from the Tokens the bridge already hands Ant, so they agree.
+   The inline padding of these two sizes has not been measured, so it is left to Ant. */
 :where(.ant-btn-sm) {
-  min-height: var(--cb-control-height-sm);
-  padding-inline: var(--cb-space-3);
+  height: var(--cb-control-height-sm);
   font-size: var(--cb-text-xs);
 }
 
 :where(.ant-btn-lg) {
-  min-height: var(--cb-control-height-lg);
-  padding-inline: var(--cb-space-5);
+  height: var(--cb-control-height-lg);
   font-size: var(--cb-text-md);
 }
 
 :where(.ant-btn-icon-only) {
-  min-width: var(--cb-control-height-md);
+  width: var(--cb-control-height-md);
   padding-inline: var(--cb-space-0);
 }
 
@@ -1968,12 +1976,15 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   color: var(--cb-fg-on-brand);
 }
 
-:where(.ant-input, .ant-input-affix-wrapper, .ant-select .ant-select-selector) {
+/* The framed text controls. `.ant-select` carries its own box in this runtime — the inner element is
+   `.ant-select-content`, not a selector class this layer needs to name. */
+:where(.ant-input, .ant-input-affix-wrapper, .ant-select) {
+  box-sizing: border-box;
   display: flex;
-  min-height: var(--cb-control-height-md);
+  height: var(--cb-control-height-md);
   align-items: center;
-  gap: var(--cb-space-2);
-  padding-inline: var(--cb-space-3);
+  padding-block: var(--cb-space-2);
+  padding-inline: calc(var(--cb-space-3) - var(--cb-border-width));
   border: var(--cb-border-width) solid var(--cb-border-strong);
   border-radius: var(--cb-radius-sm);
   background: var(--cb-surface);
@@ -1982,12 +1993,57 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   font-size: var(--cb-text-sm);
 }
 
-/* An input inside an affix wrapper is already framed by the wrapper. */
+:where(.ant-input-lg, .ant-input-affix-wrapper-lg, .ant-select-lg) {
+  height: var(--cb-control-height-lg);
+  padding-block: calc(var(--cb-space-3) - var(--cb-border-width));
+  border-radius: var(--cb-radius-md);
+  font-size: var(--cb-text-md);
+}
+
+:where(.ant-input-sm, .ant-input-affix-wrapper-sm, .ant-select-sm) {
+  height: var(--cb-control-height-sm);
+  font-size: var(--cb-text-xs);
+}
+
+/* An input inside an affix wrapper is framed by the wrapper, so it states no box of its own. */
 :where(.ant-input-affix-wrapper .ant-input) {
-  min-height: auto;
-  padding-inline: var(--cb-space-0);
+  width: 100%;
+  height: auto;
+  padding: var(--cb-space-0);
   border: none;
+  border-radius: var(--cb-radius-none);
   background: transparent;
+  font-size: inherit;
+  line-height: var(--cb-leading-normal);
+}
+
+/* The prefix sets the text's starting position, so leaving its spacing out moved the placeholder
+   sideways when Ant landed. Measured: Ant states `margin-inline-end` here, and its value is one
+   space step, mirrored on the suffix, which Ant spaces the same way. */
+:where(.ant-input-prefix, .ant-input-suffix) {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
+:where(.ant-input-prefix) {
+  margin-inline-end: var(--cb-space-1);
+}
+
+:where(.ant-input-suffix) {
+  margin-inline-start: var(--cb-space-1);
+}
+
+/* `allowClear` renders its clear control on an empty field and hides it from JavaScript-built CSS.
+   Without that rule a stray clear icon is painted in every input until hydration, so the hidden
+   state is stated here too. */
+:where(.ant-input-clear-icon) {
+  font-size: var(--cb-text-xs);
+  color: var(--cb-fg-subtle);
+}
+
+:where(.ant-input-clear-icon-hidden) {
+  visibility: hidden;
 }
 
 /* A pseudo-element cannot live inside `:where()` — the rule would be dropped — so it sits outside
@@ -1997,20 +2053,23 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
   color: var(--cb-fg-muted);
 }
 
+/* Segmented is measured at a 6px radius and 2px of inline padding, and no Token carries either
+   value — Ant derives them through its own algorithm from tokens the bridge does not feed. So this
+   states no size or radius for it, only the axis it lays out on, which it otherwise loses entirely
+   and stacks vertically, and the colours, which are Tokens. */
 :where(.ant-segmented) {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--cb-space-1);
-  padding: var(--cb-space-1);
-  border-radius: var(--cb-radius-sm);
   background: var(--cb-bg-subtle);
   font-family: var(--cb-font-sans);
-  font-size: var(--cb-text-xs);
+  font-size: var(--cb-text-sm);
+}
+
+/* The options are laid out by an inner group, not by the root, so without this the control paints
+   as a vertical stack of labels. */
+:where(.ant-segmented-group) {
+  display: flex;
 }
 
 :where(.ant-segmented-item) {
-  padding-inline: var(--cb-space-3);
-  border-radius: var(--cb-radius-sm);
   color: var(--cb-fg-muted);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ceebee/ui",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "description": "Ceebee's design system: tokens, themed primitives, motion, and onboarding.",
   "license": "MIT",
   "repository": {