@cyberskill/design 2.6.0 → 2.8.0

package/dist/esm/chunks/{chunk-FF5D53IP.mjs.map → chunk-SA7L22XE.mjs.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../components/forms/ColorPicker.jsx"],
-  "sourcesContent": ["import { useFloatingPanel } from \"../_utils/floating-panel.js\";\nimport { useComposedRefs } from \"../_utils/refs.js\";\nimport React from \"react\";\nimport { useFieldAssociation, mergeTargetProps, fieldMessages } from \"../_utils/field-association.js\";\n\nimport { makeT, useLang } from \"../_i18n/i18n.js\";\nimport { useOverlayLayer, overlayScopeContext } from \"../overlays/OverlayManager.jsx\";\nimport { cx } from \"../_utils/cx.js\";\nconst SWATCHES = [\"#F4BA17\", \"#C77B4A\", \"#E0632B\", \"#C43D1F\", \"#7A9B57\", \"#3E5A2E\", \"#4E8E9B\", \"#2E5E7E\", \"#BFB29B\", \"#45210E\"];\n\n/** CyberSkill ColorPicker — curated brand swatches + custom hex input. */\nexport const ColorPicker = React.forwardRef(function ColorPicker({ portal = true, placement, controlRef, value = \"#F4BA17\", onChange, swatches = SWATCHES, label, \"aria-labelledby\": ariaLabelledBy, lang, className, id, description, error, required = false, rootProps, controlProps }, forwardedRef) {\n  const floatingRef = React.useRef(null);\n  const mergedControlRef = useComposedRefs(controlRef);\n  const [open, setOpen] = React.useState(false);\n  const [hex, setHex] = React.useState(value);\n  const wrap = React.useRef(null);\n  const [ref, L, localeMessages] = useLang(lang);\n  const mergedNativeRef = useComposedRefs(wrap, ref, forwardedRef);\n  const t = makeT(\"ColorPicker\", L, localeMessages);\n  const requiredDescription = required ? makeT(\"Form\", L, localeMessages)(\"required\") : undefined;\n  const control = useFieldAssociation({ id: controlProps?.id ?? id,\n    \"aria-label\": controlProps?.[\"aria-label\"] ?? (controlProps?.[\"aria-labelledby\"] || ariaLabelledBy ? undefined : (label ? label + \": \" + value : undefined)),\n    \"aria-labelledby\": controlProps?.[\"aria-labelledby\"] ?? ariaLabelledBy,\n    \"aria-describedby\": controlProps?.[\"aria-describedby\"], \"aria-invalid\": controlProps?.[\"aria-invalid\"] },\n    { fallbackLabel: (label || t(\"label\")) + \": \" + value, description, error, requiredDescription });\n  React.useEffect(() => setHex(value), [value]);\n  const floating = useFloatingPanel({ open: open, anchorRef: wrap, panelRef: floatingRef, portal, placement: placement ?? \"bottom-start\", gap: 6, getAnchor: ()=>wrap.current?.querySelector(\":scope > button\"), lang });\n  const { scope } = useOverlayLayer({ open: (open) && floating.ready, kind: \"popover\", panelRef: floatingRef, surfaceKey: floating.surfaceKey, onEscape: () => setOpen(false) });\n  React.useEffect(() => {\n    if (!open) return;\n    const d = (e) => { if (!floating.contains(e.target)) setOpen(false); };\n    document.addEventListener(\"mousedown\", d);\n    return () => { document.removeEventListener(\"mousedown\", d); };\n  }, [open]);\n  const commit = (v) => { if (/^#[0-9a-fA-F]{6}$/.test(v)) { onChange && onChange(v); } };\n  return (\n    <overlayScopeContext.Provider value={scope}>\n    <span ref={mergedNativeRef} {...mergeTargetProps({ className: cx(\"cs-colorpicker\", className) }, rootProps)}>\n      <button {...mergeTargetProps({ ...control, type: \"button\", className: \"cs-colorpicker__field\", \"aria-expanded\": open, onClick: () => setOpen(o => !o) }, controlProps, [\"id\", \"role\", \"type\", \"name\", \"value\", \"defaultValue\", \"disabled\", \"required\", \"aria-required\", \"aria-label\", \"aria-labelledby\", \"aria-describedby\", \"aria-invalid\", \"aria-haspopup\", \"aria-expanded\", \"aria-controls\", \"aria-activedescendant\"])} ref={mergedControlRef} >\n        <i style={{ background: value }} /><code>{value}</code>\n      </button>\n      {open ? (\n        floating.render(<span ref={floatingRef} className=\"cs-colorpicker__pop\" role=\"dialog\" aria-label={control[\"aria-labelledby\"] ? undefined : (controlProps?.[\"aria-label\"] || label || t(\"label\"))} aria-labelledby={control[\"aria-labelledby\"]}>\n          <span className=\"cs-colorpicker__grid\">\n            {swatches.map((s) => (\n              <button key={s} type=\"button\" aria-label={s} aria-pressed={s.toLowerCase() === String(value).toLowerCase()} style={{ background: s }} className={s.toLowerCase() === String(value).toLowerCase() ? \"on\" : undefined}\n                onClick={() => { onChange && onChange(s); setOpen(false); }} />\n            ))}\n          </span>\n          <span className=\"cs-colorpicker__hex\">\n            <input value={hex} aria-label={t(\"hex\")} onChange={(e) => setHex(e.target.value)}\n              onKeyDown={(e) => { if (e.nativeEvent.isComposing || e.keyCode === 229) return; if (e.key === \"Enter\") { e.preventDefault(); commit(hex); setOpen(false); } }} onBlur={() => commit(hex)} />\n          </span>\n        </span>)\n      ) : null}\n      {fieldMessages(control, description, error, requiredDescription)}\n    </span>\n    </overlayScopeContext.Provider>\n  );\n});\nColorPicker.displayName = \"ColorPicker\";\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useFloatingPanel } from \"../_utils/floating-panel.js\";\nimport { useComposedRefs } from \"../_utils/refs.js\";\nimport React from \"react\";\nimport { useFieldAssociation, mergeTargetProps, fieldMessages } from \"../_utils/field-association.js\";\n\nimport { makeT, useLang } from \"../_i18n/i18n.js\";\nimport { useOverlayLayer, overlayScopeContext } from \"../overlays/OverlayManager.jsx\";\nimport { cx } from \"../_utils/cx.js\";\nconst SWATCHES = [\"#F4BA17\", \"#C77B4A\", \"#E0632B\", \"#C43D1F\", \"#7A9B57\", \"#3E5A2E\", \"#4E8E9B\", \"#2E5E7E\", \"#BFB29B\", \"#45210E\"];\n\n/** CyberSkill ColorPicker — curated brand swatches + custom hex input. */\nexport const ColorPicker = React.forwardRef(function ColorPicker({ portal = true, placement, controlRef, value = \"#F4BA17\", onChange, swatches = SWATCHES, label, \"aria-labelledby\": ariaLabelledBy, lang, className, id, description, error, required = false, rootProps, controlProps }, forwardedRef) {\n  const floatingRef = React.useRef(null);\n  const mergedControlRef = useComposedRefs(controlRef);\n  const [open, setOpen] = React.useState(false);\n  const [hex, setHex] = React.useState(value);\n  const wrap = React.useRef(null);\n  const [ref, L, localeMessages] = useLang(lang);\n  const mergedNativeRef = useComposedRefs(wrap, ref, forwardedRef);\n  const t = makeT(\"ColorPicker\", L, localeMessages);\n  const requiredDescription = required ? makeT(\"Form\", L, localeMessages)(\"required\") : undefined;\n  const control = useFieldAssociation({ id: controlProps?.id ?? id,\n    \"aria-label\": controlProps?.[\"aria-label\"] ?? (controlProps?.[\"aria-labelledby\"] || ariaLabelledBy ? undefined : (label ? label + \": \" + value : undefined)),\n    \"aria-labelledby\": controlProps?.[\"aria-labelledby\"] ?? ariaLabelledBy,\n    \"aria-describedby\": controlProps?.[\"aria-describedby\"], \"aria-invalid\": controlProps?.[\"aria-invalid\"] },\n    { fallbackLabel: (label || t(\"label\")) + \": \" + value, description, error, requiredDescription });\n  React.useEffect(() => setHex(value), [value]);\n  const floating = useFloatingPanel({ open: open, anchorRef: wrap, panelRef: floatingRef, portal, placement: placement ?? \"bottom-start\", gap: 6, getAnchor: ()=>wrap.current?.querySelector(\":scope > button\"), lang });\n  const { scope } = useOverlayLayer({ open: (open) && floating.ready, kind: \"popover\", panelRef: floatingRef, surfaceKey: floating.surfaceKey, onEscape: () => setOpen(false) });\n  React.useEffect(() => {\n    if (!open) return;\n    const d = (e) => { if (!floating.contains(e.target)) setOpen(false); };\n    document.addEventListener(\"mousedown\", d);\n    return () => { document.removeEventListener(\"mousedown\", d); };\n  }, [open]);\n  const commit = (v) => { if (/^#[0-9a-fA-F]{6}$/.test(v)) { onChange && onChange(v); } };\n  return (\n    <overlayScopeContext.Provider value={scope}>\n    <span ref={mergedNativeRef} {...mergeTargetProps({ className: cx(\"cs-colorpicker\", className) }, rootProps)}>\n      <button {...mergeTargetProps({ ...control, type: \"button\", className: \"cs-colorpicker__field\", \"aria-expanded\": open, onClick: event => { if (!open) event.currentTarget.focus(); setOpen(o => !o); } }, controlProps, [\"id\", \"role\", \"type\", \"name\", \"value\", \"defaultValue\", \"disabled\", \"required\", \"aria-required\", \"aria-label\", \"aria-labelledby\", \"aria-describedby\", \"aria-invalid\", \"aria-haspopup\", \"aria-expanded\", \"aria-controls\", \"aria-activedescendant\"])} ref={mergedControlRef} >\n        <i style={{ background: value }} /><code>{value}</code>\n      </button>\n      {open ? (\n        floating.render(<span ref={floatingRef} className=\"cs-colorpicker__pop\" role=\"dialog\" aria-label={control[\"aria-labelledby\"] ? undefined : (controlProps?.[\"aria-label\"] || label || t(\"label\"))} aria-labelledby={control[\"aria-labelledby\"]}>\n          <span className=\"cs-colorpicker__grid\">\n            {swatches.map((s) => (\n              <button key={s} type=\"button\" aria-label={s} aria-pressed={s.toLowerCase() === String(value).toLowerCase()} style={{ background: s }} className={s.toLowerCase() === String(value).toLowerCase() ? \"on\" : undefined}\n                onClick={() => { onChange && onChange(s); setOpen(false); }} />\n            ))}\n          </span>\n          <span className=\"cs-colorpicker__hex\">\n            <input value={hex} aria-label={t(\"hex\")} onChange={(e) => setHex(e.target.value)}\n              onKeyDown={(e) => { if (e.nativeEvent.isComposing || e.keyCode === 229) return; if (e.key === \"Enter\") { e.preventDefault(); commit(hex); setOpen(false); } }} onBlur={() => commit(hex)} />\n          </span>\n        </span>)\n      ) : null}\n      {fieldMessages(control, description, error, requiredDescription)}\n    </span>\n    </overlayScopeContext.Provider>\n  );\n});\nColorPicker.displayName = \"ColorPicker\";\n"],
+  "mappings": "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",
   "names": ["ColorPicker"]
 }

package/dist/esm/components/forms/Cascader.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   Cascader
-} from "../../chunks/chunk-D7A4ZCMJ.mjs";
+} from "../../chunks/chunk-RUB6XN27.mjs";
 import "../../chunks/chunk-52SZC6SY.mjs";
 import "../../chunks/chunk-6AEW6SXI.mjs";
 import "../../chunks/chunk-JZYRXWPD.mjs";

package/dist/esm/components/forms/ColorPicker.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   ColorPicker
-} from "../../chunks/chunk-FF5D53IP.mjs";
+} from "../../chunks/chunk-SA7L22XE.mjs";
 import "../../chunks/chunk-52SZC6SY.mjs";
 import "../../chunks/chunk-6AEW6SXI.mjs";
 import "../../chunks/chunk-JZYRXWPD.mjs";

package/dist/esm/components/forms/InlineEdit.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   InlineEdit
-} from "../../chunks/chunk-GLPQBE2J.mjs";
+} from "../../chunks/chunk-4D7SFITE.mjs";
 import "../../chunks/chunk-6AEW6SXI.mjs";
 import "../../chunks/chunk-JZYRXWPD.mjs";
 import "../../chunks/chunk-CQQ2JOJD.mjs";

package/dist/esm/components/forms/SearchField.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   SearchField
-} from "../../chunks/chunk-5FQGNCKS.mjs";
+} from "../../chunks/chunk-LU45KTWU.mjs";
 import "../../chunks/chunk-JZYRXWPD.mjs";
 import "../../chunks/chunk-CQQ2JOJD.mjs";
 import "../../chunks/chunk-5LXHLKXS.mjs";

package/dist/esm/components/forms/TreeSelect.mjs

@@ -1,7 +1,7 @@
 "use client";
 import {
   TreeSelect
-} from "../../chunks/chunk-MRXEJSQQ.mjs";
+} from "../../chunks/chunk-B5V7HN5G.mjs";
 import "../../chunks/chunk-RQQH7VWW.mjs";
 import "../../chunks/chunk-52SZC6SY.mjs";
 import "../../chunks/chunk-6AEW6SXI.mjs";

package/dist/styles.css

@@ -1,4 +1,4 @@
-/* CyberSkill Design System v2.6.0 — flattened build of ../styles.css (same closure, same order, no @import chain).
+/* CyberSkill Design System v2.8.0 — flattened build of ../styles.css (same closure, same order, no @import chain).
  * Link THIS file from cards, kits and templates; keep editing the modular sources under tokens/ and base/ and
  * regenerate this file after any change. url() paths are already relative to dist/ (../fonts, ../assets). */
 
@@ -2197,10 +2197,10 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 .cs-cal__grid button.sel { background: var(--cs-accent-bright); color: var(--cs-color-brand-umber); font-weight: 700; box-shadow: inset 0 0 0 2px var(--cs-accent-strong); }
 .cs-cal__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-datepicker { position: relative; display: inline-block; max-inline-size: 100%; }
-.cs-datepicker__field { display: inline-flex; align-items: center; gap: var(--cs-space-2); min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: var(--cs-space-2) var(--cs-space-3); cursor: pointer; }
-.cs-datepicker.is-invalid .cs-datepicker__field, .is-invalid .cs-datepicker__field, .cs-datepicker__field.is-invalid, .cs-datepicker__field[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
-.cs-datepicker__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
-.cs-datepicker__field .ph { color: var(--cs-color-text-muted); }
+.cs-datepicker__field, .cs-datepicker__trigger { display: inline-flex; align-items: center; gap: var(--cs-space-2); min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: var(--cs-space-2) var(--cs-space-3); cursor: pointer; }
+.cs-datepicker.is-invalid .cs-datepicker__field, .cs-datepicker.is-invalid .cs-datepicker__trigger, .is-invalid .cs-datepicker__field, .is-invalid .cs-datepicker__trigger, .cs-datepicker__field.is-invalid, .cs-datepicker__trigger.is-invalid, .cs-datepicker__field[aria-invalid="true"], .cs-datepicker__trigger[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
+.cs-datepicker__field:focus-visible, .cs-datepicker__trigger:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
+.cs-datepicker__field .ph, .cs-datepicker__trigger .ph { color: var(--cs-color-text-muted); }
 .cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: max-content; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); }
 .cs-datepicker__pop .cs-cal { min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; overflow-x: auto; }
 .cs-timepicker { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 0 10px; min-block-size: 44px; color: var(--cs-color-text-muted); }
@@ -2337,10 +2337,10 @@ a.cs-citation:hover .cs-citation__text { color: var(--cs-color-text-accent); }
 
 /* ---- v3 Batch 6b (Jul 2026): TreeSelect · Cascader · Transfer · Mentions ---- */
 .cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }
-.cs-treeselect__field { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }
-.cs-treeselect.is-invalid .cs-treeselect__field, .cs-cascader.is-invalid .cs-treeselect__field, .is-invalid .cs-treeselect__field, .cs-treeselect__field.is-invalid, .cs-treeselect__field[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
-.cs-treeselect__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
-.cs-treeselect__field .ph { color: var(--cs-color-text-muted); }
+.cs-treeselect__field, .cs-treeselect__trigger, .cs-cascader__field, .cs-cascader__trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }
+.cs-treeselect.is-invalid :is(.cs-treeselect__field, .cs-treeselect__trigger), .cs-cascader.is-invalid :is(.cs-treeselect__field, .cs-cascader__field, .cs-cascader__trigger), .is-invalid :is(.cs-treeselect__field, .cs-treeselect__trigger, .cs-cascader__field, .cs-cascader__trigger), :is(.cs-treeselect__field, .cs-treeselect__trigger, .cs-cascader__field, .cs-cascader__trigger).is-invalid, :is(.cs-treeselect__field, .cs-treeselect__trigger, .cs-cascader__field, .cs-cascader__trigger)[aria-invalid="true"] { border-color: var(--cs-color-semantic-danger); }
+.cs-treeselect__field:focus-visible, .cs-treeselect__trigger:focus-visible, .cs-cascader__field:focus-visible, .cs-cascader__trigger:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
+.cs-treeselect__field .ph, .cs-treeselect__trigger .ph, .cs-cascader__field .ph, .cs-cascader__trigger .ph { color: var(--cs-color-text-muted); }
 .cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }
 .cs-cascader__pop { display: flex; padding: 0; overflow: hidden; }
 .cs-cascader__col { list-style: none; margin: 0; padding: 6px; min-inline-size: 150px; max-block-size: 240px; overflow: auto; }
@@ -2480,6 +2480,7 @@ button.cs-item--interactive { border: 1px solid transparent; background: var(--c
 }
 .cs-item--interactive:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }
 .cs-item.is-selected { border-color: var(--cs-color-text-accent); background: color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel)); }
+.cs-item.is-selected .cs-item__description { color: var(--_cs-light, var(--cs-color-text-muted))var(--_cs-dark, var(--cs-color-text-primary)); }
 .cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
 /* Static Item text remains information, rather than an inactive control. */
 div.cs-item.is-disabled { opacity: 1; }