@ceebee/ui 1.3.3 → 1.4.1

package/dist/styles.css

@@ -774,6 +774,19 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 }
 .cb-palette__input::placeholder { color: var(--cb-fg-subtle); }
 
+/* The `outline: none` above states the intent, but a consumer's global `:focus-visible` reset
+   matches this input at the same weight and, imported after this stylesheet, wins on order — which
+   draws a hard box around a deliberately borderless field. Restating it against `:focus-visible`
+   settles it by weight instead. Focus stays visible: the search row takes the brand colour, and the
+   active command is highlighted the moment the palette opens. */
+.cb-palette__input:focus-visible {
+  outline: none;
+}
+
+.cb-palette__search:focus-within {
+  border-bottom-color: var(--cb-tone-brand);
+}
+
 .cb-palette__list { overflow-y: auto; padding: var(--cb-space-2); }
 .cb-palette__group + .cb-palette__group { margin-top: var(--cb-space-2); }
 .cb-palette__group-label {
@@ -1889,3 +1902,106 @@ html, body { background: var(--cb-bg); color: var(--cb-fg); }
 .cb-checklist__description { font-size: var(--cb-text-xs); color: var(--cb-fg-subtle); }
 .cb-checklist__chevron { flex: none; color: var(--cb-fg-subtle); align-self: center; }
 .cb-checklist__complete { padding: var(--cb-space-2) 0; }
+
+/* theme/ant-prepaint.css */
+/* Ant builds its stylesheet in JavaScript, so a server-rendered document carries Ant's class names
+   and none of the rules behind them. Until hydration its controls paint with the browser's native
+   appearance: a square grey button on a Ceebee surface, in both colour modes.
+
+   Extracting Ant's rules on the server does not fix this. Ant derives its seed from live CSS Tokens,
+   which a server cannot read, so extracted rules carry Ant's default light palette and a dark reader
+   gets a white control instead of a tonally correct one — measured, and worse than the native
+   appearance, which at least follows `color-scheme`.
+
+   These declarations give Ant's primitives a token-correct first paint instead. Every selector is
+   wrapped in `:where()`, which contributes no specificity, so each real Ant rule wins the instant it
+   arrives and nothing here competes with the runtime that owns these components. The class names are
+   the ones Ant already puts in the server-rendered markup, including its variant and size classes,
+   so a first paint can respect them. */
+
+:where(.ant-btn) {
+  display: inline-flex;
+  height: var(--cb-control-height-md);
+  align-items: center;
+  justify-content: center;
+  gap: var(--cb-space-2);
+  padding-inline: var(--cb-space-4);
+  border: var(--cb-border-width) solid var(--cb-border-strong);
+  border-radius: var(--cb-radius-sm);
+  background: var(--cb-surface);
+  color: var(--cb-fg);
+  font-family: var(--cb-font-sans);
+  font-size: var(--cb-text-sm);
+}
+
+:where(.ant-btn-sm) {
+  height: var(--cb-control-height-sm);
+  padding-inline: var(--cb-space-3);
+  font-size: var(--cb-text-xs);
+}
+
+:where(.ant-btn-lg) {
+  height: var(--cb-control-height-lg);
+  padding-inline: var(--cb-space-5);
+  font-size: var(--cb-text-md);
+}
+
+:where(.ant-btn-icon-only) {
+  padding-inline: var(--cb-space-2);
+}
+
+:where(.ant-btn-block) {
+  width: 100%;
+}
+
+/* A text or link button carries no chrome of its own, so borrowing the surface would make one look
+   like an outlined button for as long as the first paint lasts. */
+:where(.ant-btn-variant-text, .ant-btn-variant-link) {
+  border-color: transparent;
+  background: transparent;
+}
+
+:where(.ant-btn-variant-solid) {
+  border-color: transparent;
+  background: var(--cb-tone-brand);
+  color: var(--cb-fg-on-brand);
+}
+
+:where(.ant-input, .ant-input-affix-wrapper, .ant-select .ant-select-selector) {
+  border: var(--cb-border-width) solid var(--cb-border-strong);
+  border-radius: var(--cb-radius-sm);
+  background: var(--cb-surface);
+  color: var(--cb-fg);
+  font-family: var(--cb-font-sans);
+  font-size: var(--cb-text-sm);
+}
+
+/* An input inside an affix wrapper is already framed by the wrapper. */
+:where(.ant-input-affix-wrapper .ant-input) {
+  border: none;
+  background: transparent;
+}
+
+/* A pseudo-element cannot live inside `:where()` — the rule would be dropped — so it sits outside
+   it and carries only its own element-level weight, which Ant's `.ant-input::placeholder` outranks. */
+:where(.ant-input)::placeholder,
+:where(.ant-select-placeholder) {
+  color: var(--cb-fg-muted);
+}
+
+:where(.ant-segmented) {
+  border-radius: var(--cb-radius-sm);
+  background: var(--cb-bg-subtle);
+  font-family: var(--cb-font-sans);
+  font-size: var(--cb-text-xs);
+}
+
+:where(.ant-segmented-item) {
+  border-radius: var(--cb-radius-sm);
+  color: var(--cb-fg-muted);
+}
+
+:where(.ant-segmented-item-selected) {
+  background: var(--cb-surface);
+  color: var(--cb-fg);
+}

package/package.json

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