@kolkrabbi/kol-component 0.101.0 → 0.102.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.101.0",
+  "version": "0.102.1",
   "description": "KOL design-system components — atoms through organisms, emitting canonical kol-* classes. Pairs with @kolkrabbi/kol-theme for styling.",
   "license": "MIT",
   "type": "module",

package/src/index.js

@@ -137,7 +137,7 @@ export { default as LoaderOverlay } from './utilities/LoaderOverlay.jsx'
 export { default as MediaLibrary, MediaLibraryProvider, useMediaLibrary, MediaPicker, MediaBrowser } from './organisms/MediaLibrary.jsx'
 export { default as MediaTileGallery } from './organisms/MediaTileGallery.jsx'
 export { default as MediaViewer } from './organisms/MediaViewer.jsx'
-export { default as SettingsPanel, SettingsRow, SettingsSwitch, SettingsChoice, SettingsChipRow, SettingsFooter } from './organisms/SettingsPanel.jsx'
+export { default as SettingsPanel, SettingsSection, SettingsRow, SettingsSwitch, SettingsChoice, SettingsChipRow, SettingsFooter } from './organisms/SettingsPanel.jsx'
 export { default as SectionNewsletter } from './organisms/SectionNewsletter.jsx'
 export { default as NewsletterBand } from './organisms/NewsletterBand.jsx'
 export { default as ColumnBrowser } from './organisms/ColumnBrowser.jsx'

package/src/organisms/ContentCollection.jsx

@@ -107,7 +107,10 @@ export default function ContentCollection({
         gridTemplateColumns: colsCls
           ? undefined
           : form === 'list'
-            ? (listMin ? `repeat(auto-fill, minmax(${listMin}, 1fr))` : '1fr')
+            /* minmax(0, 1fr), never a bare 1fr (= minmax(auto, 1fr)): a truncated
+           * nowrap line handed its min-content width to the track and a /work row
+           * measured 3586px in a 1232px wall (CollectionItemMinWidth, 2026-08-27) */
+          ? (listMin ? `repeat(auto-fill, minmax(${listMin}, 1fr))` : 'minmax(0, 1fr)')
             : `repeat(auto-fill, minmax(${min}, 1fr))`,
         gap: g,
       }}
@@ -116,7 +119,10 @@ export default function ContentCollection({
         child == null ? null : (
           <li
             key={child.key ?? i}
-            className={animate ? 'kol-collection-item' : undefined}
+            /* min-w-0 on every item: a grid item's min-width is auto by default,
+             * and auto = min-content, which is exactly what a truncated line must
+             * not get to claim */
+            className={`min-w-0 ${animate ? 'kol-collection-item' : ''}`.trim()}
             style={animate ? { animationDelay: `${i * 40}ms` } : undefined}
           >
             {child}

package/src/organisms/SettingsPanel.jsx

@@ -1,5 +1,6 @@
 import Button from '../atoms/Button.jsx'
-import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
+import Dropdown from '../molecules/Dropdown.jsx'
+import SectionLabel from '../atoms/SectionLabel.jsx'
 import ToggleSwitch from '../atoms/ToggleSwitch.jsx'
 import ShellDrawer from '../molecules/ShellDrawer.jsx'
 import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
@@ -21,7 +22,7 @@ import FullscreenOverlay from '../utilities/FullscreenOverlay.jsx'
  * where the DS already owned one.
  *
  * The CONTROLS are the DS controls, not the source's word-buttons: a switch
- * row is `ToggleSwitch`, a choice row is `SegmentedToggle` — the source's
+ * row is `ToggleSwitch`, a choice row is a `Dropdown` (2026-08-27) — the source's
  * segmented variant was flagged by the user as the thing to fix here, not to
  * copy. Sections are the DS `Section` (pass `divided` on every one and the
  * hairline lands between siblings on its own).
@@ -129,11 +130,26 @@ export function SettingsSwitch({ on = false, onChange, disabled = false, disable
   )
 }
 
-/** SettingsChoice — the row's one-of-N control: the DS SegmentedToggle, sm.
- *  Options are values or `{ value, label }`. */
-export function SettingsChoice({ options = [], value, onChange, ariaLabel }) {
+/** SettingsSection — a section of the panel: the estate's section label (the DS
+ *  `SectionLabel`, sm — SettingsPanelEyebrowAndDropdowns, user 2026-08-27: "it's
+ *  literally SECTION LABEL, SUPER COMMON PATTERN") over its rows.
+ *  @param {string} label · @param {boolean} divided  a hairline above (between sections) */
+export function SettingsSection({ label, divided = false, children, className = '' }) {
+  return (
+    <div className={`flex flex-col gap-3 ${divided ? 'kol-section--divided' : ''} ${className}`.replace(/\s+/g, ' ').trim()}>
+      {label && <SectionLabel text={label} size="sm" />}
+      {children}
+    </div>
+  )
+}
+
+/** SettingsChoice — the row's one-of-N control: the DS Dropdown, sm · primary
+ *  (SettingsPanelEyebrowAndDropdowns — user: "put the toggles inside a dropdown,
+ *  because it's super messy like it is"). Options are values or `{ value, label }`;
+ *  width is the call site's (`className="w-40"`). */
+export function SettingsChoice({ options = [], value, onChange, ariaLabel, className = '' }) {
   const opts = options.map((o) => (o != null && typeof o === 'object' ? o : { value: o, label: String(o) }))
-  return <SegmentedToggle size="sm" value={value} onChange={onChange} options={opts} ariaLabel={ariaLabel} />
+  return <Dropdown size="sm" variant="primary" value={value} onChange={onChange} options={opts} className={className} aria-label={ariaLabel} />
 }
 
 /* THE CONTROL CHIP (SettingsPanelCompliance, user 2026-08-27: "WROOOONG" on the
@@ -146,15 +162,26 @@ export const chipCls = (on) => `${CHIP_CLS} ${on ? 'kol-control--filled' : 'text
 
 /**
  * SettingsChipRow — a wrap of toggle chips with optional counts (an
- * allow-list: every chip sets a default, never a gate).
+ * allow-list: every chip sets a default, never a gate). `allChip` puts an
+ * "all" chip first — the same control chip, filled when every option is on
+ * (SettingsPanelEyebrowAndDropdowns — user: "Show all in ghost mode? makes no
+ * sense"); `onAll(nextAllOn)` fires when it is clicked.
  * @param {Array}  options   [{ value, label, count? }]
  * @param {Array|Set} selected  the values that are on
  * @param {Function} onToggle  (value) => void
+ * @param {boolean|string} allChip  render the "all" chip (a string = its label)
+ * @param {Function} onAll     (nextAllOn: boolean) => void
  */
-export function SettingsChipRow({ options = [], selected = [], onToggle }) {
+export function SettingsChipRow({ options = [], selected = [], onToggle, allChip = false, onAll }) {
   const on = selected instanceof Set ? selected : new Set(selected)
+  const allOn = options.length > 0 && options.every((o) => on.has(o.value))
   return (
     <div className="flex flex-wrap gap-1">
+      {allChip && (
+        <button type="button" aria-pressed={allOn} onClick={() => onAll?.(!allOn)} className={chipCls(allOn)}>
+          {typeof allChip === 'string' ? allChip : 'all'}
+        </button>
+      )}
       {options.map((o) => (
         <button
           key={String(o.value)}