@kolkrabbi/kol-component 0.100.0 → 0.100.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kolkrabbi/kol-component",
-  "version": "0.100.0",
+  "version": "0.100.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/organisms/SettingsPanel.jsx

@@ -1,5 +1,4 @@
 import Button from '../atoms/Button.jsx'
-import Tag from '../atoms/Tag.jsx'
 import SegmentedToggle from '../atoms/SegmentedToggle.jsx'
 import ToggleSwitch from '../atoms/ToggleSwitch.jsx'
 import ShellDrawer from '../molecules/ShellDrawer.jsx'
@@ -137,10 +136,11 @@ export function SettingsChoice({ options = [], value, onChange, ariaLabel }) {
   return <SegmentedToggle size="sm" value={value} onChange={onChange} options={opts} ariaLabel={ariaLabel} />
 }
 
-/* The chips are the DS `Tag` ("the tag ticket" — SettingsPanelChromeAndColumnPreview,
- * user 2026-08-27: same chrome as Tag everywhere else, not a third look): `md`
- * (helper-12), `inverse` when on, `secondary` when off, as a button. The old
- * `.kol-control` string stays exported for consumers that typed it. */
+/* THE CONTROL CHIP (SettingsPanelCompliance, user 2026-08-27: "WROOOONG" on the
+ * 0.98.0 Tag pills): `.kol-control` sm on kol-mono-12, filled when on, meta ink
+ * when off, the count in meta after the label — the SAME string ContentFilters'
+ * kind chips, ViewToggle's text variant and the SELECT / FLAT strip wear. No
+ * Tag, no uppercase, no inverse. */
 export const CHIP_CLS = 'kol-control kol-control-sm kol-mono-12'
 export const chipCls = (on) => `${CHIP_CLS} ${on ? 'kol-control--filled' : 'text-meta hover:text-emphasis'}`
 
@@ -156,18 +156,16 @@ export function SettingsChipRow({ options = [], selected = [], onToggle }) {
   return (
     <div className="flex flex-wrap gap-1">
       {options.map((o) => (
-        <Tag
+        <button
           key={String(o.value)}
-          size="md"
-          hash={false}
-          variant={on.has(o.value) ? 'inverse' : 'secondary'}
-          active={on.has(o.value)}
+          type="button"
           aria-pressed={on.has(o.value)}
           onClick={() => onToggle?.(o.value)}
+          className={chipCls(on.has(o.value))}
         >
           {o.label ?? String(o.value)}
           {o.count > 0 && <span className="text-meta"> {o.count}</span>}
-        </Tag>
+        </button>
       ))}
     </div>
   )