@kolkrabbi/kol-theme 0.44.0 → 0.45.0

package/kol-components-molecules.css

@@ -936,3 +936,31 @@
   transition: background-color 300ms var(--kol-ease-house),
               border-color     300ms var(--kol-ease-house);
 }
+
+/* ─────────────────────────────────────────────────────────────────────
+ * The house expand — molecules/SearchInput.jsx · organisms/ContentFilters.jsx
+ *
+ * A collapsed control that opens to its field: the search glyph widening
+ * into an input. Two components hand-wrote the same three declarations
+ * inline (`width 600ms`, `background 400ms`, `opacity 300ms`, all on the
+ * house curve), which is how the curve came to be hardcoded in seven
+ * places to begin with.
+ *
+ * Durations are STAGGERED on purpose and that is the whole character of
+ * the move: the box travels longest (600), its fill settles sooner (400),
+ * and the content inside arrives last and quickest (300) so it does not
+ * smear across the widening box.
+ *
+ * The width VALUE stays inline — it is per-instance data (a consumer's
+ * expanded width), not chrome. Only the motion lives here.
+ * ───────────────────────────────────────────────────────────────────── */
+.kol-expand {
+  transition: width      600ms var(--kol-ease-house),
+              background 400ms var(--kol-ease-house),
+              border-color 400ms var(--kol-ease-house);
+}
+
+/* the content that rides inside an expanding box */
+.kol-expand-content {
+  transition: opacity 300ms var(--kol-ease-house);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.44.0",
+  "version": "0.45.0",
   "description": "KOL (Kolkrabbi) design-system tokens + base CSS — brand-neutral. The canonical token/cascade layer every other KOL package and consumer builds on.",
   "license": "MIT",
   "type": "module",