@kolkrabbi/kol-theme 0.52.1 → 0.54.0

package/kol-components-atoms.css

@@ -533,6 +533,14 @@
 }
 
 /* track scales with size */
+/* disabled (SettingsPanel, 2026-08-26): the switch had no disabled treatment
+ * at all — a control that cannot act in this context read exactly like one
+ * that can. Same pair .kol-control:disabled wears. */
+.toggle-switch:disabled {
+  opacity: var(--kol-opacity-disabled);
+  cursor: not-allowed;
+}
+
 .toggle-switch--sm .toggle-switch-indicator { width: 16px; height: 10px; }
 .toggle-switch--sm .toggle-switch-indicator::after { width: 6px; height: 6px; }
 .toggle-switch--lg .toggle-switch-indicator { width: 24px; height: 14px; }

package/kol-components-organisms.css

@@ -262,15 +262,22 @@
  */
 
 /* =============================================================================
- * FeatureSplit
+ * SectionSplit + SectionText (the section family, SectionSet 2026-08-26)
+ *
+ * `.kol-section-text-{label,pull,body}` are the text block's classes and
+ * `.kol-section-split-*` the split's; every `.kol-feature-split-*` selector
+ * below is the same rule under the old name, kept ONE release for a consumer's
+ * own CSS still pointing at it — dropped at the next major.
  * ============================================================================= */
 
-.kol-feature-split {
+.kol-feature-split,
+.kol-section-split {
   background: var(--kol-surface-primary);
   color: var(--kol-surface-on-primary);
 }
 
-.kol-feature-split-kicker {
+.kol-feature-split-kicker,
+.kol-section-text-label {
   font-family: var(--kol-font-family-mono, monospace);
   font-size: 18px;
   font-weight: 600;
@@ -278,7 +285,8 @@
   color: var(--kol-accent-primary);
 }
 
-.kol-feature-split-pull {
+.kol-feature-split-pull,
+.kol-section-text-pull {
   margin: 0;
   font-family: var(--kol-font-family-sans);
   font-weight: 700;
@@ -288,7 +296,8 @@
   color: var(--kol-surface-on-primary);
 }
 
-.kol-feature-split-pull em {
+.kol-feature-split-pull em,
+.kol-section-text-pull em {
   font-family: var(--kol-font-family-sans);
   font-feature-settings: "liga", "dlig";
   font-weight: 700;
@@ -296,7 +305,8 @@
   color: var(--kol-accent-primary);
 }
 
-.kol-feature-split-body {
+.kol-feature-split-body,
+.kol-section-text-body {
   margin: 0;
   font-family: var(--kol-font-family-sans);
   font-weight: 400;
@@ -305,11 +315,13 @@
   color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
 }
 
-.kol-feature-split-meta {
+.kol-feature-split-meta,
+.kol-section-split-meta {
   border-top: 1px solid color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
 }
 
-.kol-feature-split-meta-num {
+.kol-feature-split-meta-num,
+.kol-section-split-meta-num {
   font-family: var(--kol-font-family-sans);
   font-weight: 900;
   font-size: 32px;
@@ -318,7 +330,8 @@
   color: var(--kol-surface-on-primary);
 }
 
-.kol-feature-split-meta-label {
+.kol-feature-split-meta-label,
+.kol-section-split-meta-label {
   font-family: var(--kol-font-family-mono, monospace);
   font-size: 10px;
   font-weight: 600;
@@ -326,7 +339,8 @@
   color: color-mix(in srgb, var(--kol-surface-on-primary) 48%, transparent);
 }
 
-.kol-feature-split-visual img {
+.kol-feature-split-visual img,
+.kol-section-split-visual img {
   width: 100%;
   height: 100%;
   object-fit: cover;
@@ -341,20 +355,25 @@
  * 2026-08-12) — one motion vocabulary, not two. Motion chrome is DS CSS, never
  * a JSX utility (the ComponentTailwindSourceTrap law). The frame's own
  * overflow-hidden + radius clip the scale. */
-.kol-feature-split-visual.is-hoverable > :first-child {
+.kol-feature-split-visual.is-hoverable > :first-child,
+.kol-section-split-visual.is-hoverable > :first-child {
   transition: transform 300ms ease;
 }
 
-.kol-feature-split-visual.is-hoverable:hover > :first-child {
+.kol-feature-split-visual.is-hoverable:hover > :first-child,
+.kol-section-split-visual.is-hoverable:hover > :first-child {
   transform: scale(1.03);
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .kol-feature-split-visual.is-hoverable > :first-child { transition: none; }
-  .kol-feature-split-visual.is-hoverable:hover > :first-child { transform: none; }
+  .kol-feature-split-visual.is-hoverable > :first-child,
+  .kol-section-split-visual.is-hoverable > :first-child { transition: none; }
+  .kol-feature-split-visual.is-hoverable:hover > :first-child,
+  .kol-section-split-visual.is-hoverable:hover > :first-child { transform: none; }
 }
 
-.kol-feature-split-visual-veil {
+.kol-feature-split-visual-veil,
+.kol-section-split-visual-veil {
   position: absolute;
   inset: 0;
   background: linear-gradient(
@@ -366,7 +385,8 @@
   pointer-events: none;
 }
 
-.kol-feature-split-visual-caption {
+.kol-feature-split-visual-caption,
+.kol-section-split-visual-caption {
   position: absolute;
   left: 24px;
   bottom: 24px;
@@ -480,19 +500,20 @@
   background: var(--kol-surface-primary);
 }
 
-/* The browser is the same body with no card around it — it fills whatever
- * box the consumer gives it, so a page can host it full-bleed. */
+/* The browser is the same body with no card around it — in flow, it takes the
+ * width the consumer gives it. Tiles at 260 (MediaLibraryReconcile, kol-r2b2
+ * 2026-08-26 — FileList's `minmax(260px, 1fr)`; the picker keeps 10rem
+ * because its card is 64rem wide). */
 .kol-media-browser {
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 100%;
-  --kol-media-tile-min: 10rem;
+  --kol-media-tile-min: 16.25rem;
 }
 
 .kol-media-grid {
   display: grid;
-  gap: var(--kol-spacing-4);
+  gap: var(--kol-spacing-3);
   grid-template-columns: repeat(auto-fill, minmax(var(--kol-media-tile-min), 1fr));
   list-style: none;
   margin: 0;
@@ -507,25 +528,26 @@
   padding: 0;
 }
 
-/* One folder row in the tree. Finder's list model: the chevron discloses in
- * place, so the parent never leaves the screen and there is no breadcrumb
- * stacked above a divider. Same row idiom as the rails — a drill-down and a
- * nav row are the same gesture. */
+/* One folder row — CLICK-TO-ENTER (MediaLibraryReconcile, 2026-08-26): the
+ * row is FileList's — icon box · name · trailing chevron-right over a
+ * hairline — and clicking it enters the prefix; the breadcrumb steps back.
+ * Finder's disclose-in-place chevron (2026-08-01) is gone, not a variant. */
 .kol-media-folder {
   display: flex;
   align-items: center;
-  gap: var(--kol-spacing-2);
-  padding-block: var(--kol-pad-rail-row-y);
+  gap: var(--kol-spacing-3);
+  padding: var(--kol-spacing-2) var(--kol-spacing-1);
+  border-bottom: 1px solid var(--kol-fg-08);
   border-radius: var(--kol-radius-sm);
   cursor: pointer;
   transition: background-color var(--kol-transition-fast);
 }
 
 .kol-media-folder:hover {
-  background: var(--kol-oq-04);
+  background: var(--kol-fg-04);
 }
 
-/* The path bar rides the FOOT, where Finder puts it. */
+/* The picker's path bar rides the FOOT of its card. */
 .kol-media-pathbar {
   display: flex;
   align-items: center;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-theme",
-  "version": "0.52.1",
+  "version": "0.54.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",