@cyberskill/design 1.0.0 → 1.1.1

package/_esm/cs.mjs

@@ -1,8 +1,8 @@
-// CyberSkill Design System — ESM entry point (GENERATED from _ds_manifest.json at v3.6.0).
-// No build step: import this module directly in a browser. It ensures React 18.3.1 (pinned,
-// skipped when window.React already exists), side-loads ../_ds_bundle.js once, resolves the
-// compiler-assigned namespace BY PREFIX (never a hardcoded suffix), and re-exports every component.
-// Styles are NOT injected — link styles.css yourself (same contract as the UMD path).
+// CyberSkill Design System — ESM entry point (GENERATED from _ds_manifest.json at v1.1.1).
+// No build step: import this module directly in a browser. It ensures React 19.2.8 via umd-react
+// (official React 19 dropped UMD; pinned + SRI; skipped when window.React already exists), side-loads
+// ../_ds_bundle.js once, resolves the compiler-assigned namespace BY PREFIX (never a hardcoded suffix),
+// and re-exports every component. Styles are NOT injected — link styles.css yourself.
 // Regenerate when exports change — the esm-smoke gate fails on export/manifest drift.
 const g = typeof window !== "undefined" ? window : globalThis;
 async function ensureScript(src, integrity){
@@ -12,18 +12,20 @@ async function ensureScript(src, integrity){
     if (integrity) { s.integrity = integrity; s.crossOrigin = "anonymous"; }
     s.onload = res; s.onerror = () => rej(new Error("cs.js: failed to load " + href)); document.head.appendChild(s); });
 }
-if (!g.React) await ensureScript("https://unpkg.com/react@18.3.1/umd/react.development.js", "sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L");
-if (!g.ReactDOM) await ensureScript("https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js", "sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm");
+if (!g.React) await ensureScript("https://unpkg.com/umd-react@19.2.8/dist/react.production.min.js", "sha384-/nh8CKeV7Pk42Gpda6L4DM1JtZ2bwPOi+eh9O7+a1Y22UkGs8+mw3aW1shQ9FV30");
+if (!g.ReactDOM) await ensureScript("https://unpkg.com/umd-react@19.2.8/dist/react-dom.production.min.js", "sha384-rhLCB72qrpcezgY2QW0panvW9IeO32m94nvuDVRD/iEGHXoUbjtijL6Xi/Z5/mzu");
 const found = () => Object.keys(g).find(k => /^CyberSkillDesignSystem_/.test(k));
 if (!found()) await ensureScript("../_ds_bundle.js");
 export const CS = g[found()];
 if (!CS) throw new Error("cs.js: bundle loaded but no CyberSkillDesignSystem_* namespace found");
 export default CS;
-export const VERSION = "3.6.0";
+export const VERSION = "1.1.1";
 export const AIDisclosureBadge = CS.AIDisclosureBadge;
 export const Accordion = CS.Accordion;
 export const Alert = CS.Alert;
+export const AlertDialog = CS.AlertDialog;
 export const Anchor = CS.Anchor;
+export const AspectRatio = CS.AspectRatio;
 export const Avatar = CS.Avatar;
 export const AvatarGroup = CS.AvatarGroup;
 export const BackTop = CS.BackTop;
@@ -46,6 +48,7 @@ export const ChatMessage = CS.ChatMessage;
 export const Checkbox = CS.Checkbox;
 export const CitationList = CS.CitationList;
 export const CodeBlock = CS.CodeBlock;
+export const Collapsible = CS.Collapsible;
 export const ColorPicker = CS.ColorPicker;
 export const Combobox = CS.Combobox;
 export const CommandPalette = CS.CommandPalette;
@@ -76,6 +79,7 @@ export const Image = CS.Image;
 export const InlineEdit = CS.InlineEdit;
 export const InputGroup = CS.InputGroup;
 export const InputOTP = CS.InputOTP;
+export const Item = CS.Item;
 export const Kbd = CS.Kbd;
 export const Link = CS.Link;
 export const List = CS.List;
@@ -87,6 +91,7 @@ export const Mentions = CS.Mentions;
 export const Menu = CS.Menu;
 export const MenuItem = CS.MenuItem;
 export const Menubar = CS.Menubar;
+export const NativeSelect = CS.NativeSelect;
 export const NavItem = CS.NavItem;
 export const NavigationMenu = CS.NavigationMenu;
 export const NumberField = CS.NumberField;
@@ -101,6 +106,7 @@ export const Radio = CS.Radio;
 export const RadioGroup = CS.RadioGroup;
 export const Rating = CS.Rating;
 export const Result = CS.Result;
+export const ScrollArea = CS.ScrollArea;
 export const SearchField = CS.SearchField;
 export const SegmentedControl = CS.SegmentedControl;
 export const Select = CS.Select;

package/_esm/react.d.ts

@@ -0,0 +1,216 @@
+// CyberSkill Design System — bundler-native React types (GENERATED).
+// Mirrors `_esm/react.mjs`. Regenerate: node scripts/generate-react-entry.mjs
+
+export { AIDisclosureBadge } from "../components/ai/AIDisclosureBadge";
+export type * from "../components/ai/AIDisclosureBadge";
+export { ChatMessage } from "../components/ai/ChatMessage";
+export type * from "../components/ai/ChatMessage";
+export { CitationList } from "../components/ai/CitationList";
+export type * from "../components/ai/CitationList";
+export { ConfidenceMeter } from "../components/ai/ConfidenceMeter";
+export type * from "../components/ai/ConfidenceMeter";
+export { HumanReviewGate } from "../components/ai/HumanReviewGate";
+export type * from "../components/ai/HumanReviewGate";
+export { PromptInput } from "../components/ai/PromptInput";
+export type * from "../components/ai/PromptInput";
+export { PromptSuggestions } from "../components/ai/PromptSuggestions";
+export type * from "../components/ai/PromptSuggestions";
+export { TypingIndicator } from "../components/ai/TypingIndicator";
+export type * from "../components/ai/TypingIndicator";
+export { LumiAvatar } from "../components/brand/LumiAvatar";
+export type * from "../components/brand/LumiAvatar";
+export { Button } from "../components/button/Button";
+export type * from "../components/button/Button";
+export { ButtonGroup } from "../components/button/ButtonGroup";
+export type * from "../components/button/ButtonGroup";
+export { FloatingActionButton } from "../components/button/FloatingActionButton";
+export type * from "../components/button/FloatingActionButton";
+export { Accordion } from "../components/data/Accordion";
+export type * from "../components/data/Accordion";
+export { AspectRatio } from "../components/data/AspectRatio";
+export type * from "../components/data/AspectRatio";
+export { Avatar, AvatarGroup } from "../components/data/Avatar";
+export type * from "../components/data/Avatar";
+export { Card, CardHeader, CardBody, CardFooter } from "../components/data/Card";
+export type * from "../components/data/Card";
+export { Carousel } from "../components/data/Carousel";
+export type * from "../components/data/Carousel";
+export { Chart } from "../components/data/Chart";
+export type * from "../components/data/Chart";
+export { CodeBlock } from "../components/data/CodeBlock";
+export type * from "../components/data/CodeBlock";
+export { Collapsible } from "../components/data/Collapsible";
+export type * from "../components/data/Collapsible";
+export { Comment } from "../components/data/Comment";
+export type * from "../components/data/Comment";
+export { DescriptionList } from "../components/data/DescriptionList";
+export type * from "../components/data/DescriptionList";
+export { Divider } from "../components/data/Divider";
+export type * from "../components/data/Divider";
+export { Image } from "../components/data/Image";
+export type * from "../components/data/Image";
+export { Item } from "../components/data/Item";
+export type * from "../components/data/Item";
+export { Kbd } from "../components/data/Kbd";
+export type * from "../components/data/Kbd";
+export { List, ListItem } from "../components/data/List";
+export type * from "../components/data/List";
+export { Masonry } from "../components/data/Masonry";
+export type * from "../components/data/Masonry";
+export { QRCode } from "../components/data/QRCode";
+export type * from "../components/data/QRCode";
+export { ScrollArea } from "../components/data/ScrollArea";
+export type * from "../components/data/ScrollArea";
+export { Sortable } from "../components/data/Sortable";
+export type * from "../components/data/Sortable";
+export { Splitter } from "../components/data/Splitter";
+export type * from "../components/data/Splitter";
+export { Stat } from "../components/data/Stat";
+export type * from "../components/data/Stat";
+export { Terminal } from "../components/data/Terminal";
+export type * from "../components/data/Terminal";
+export { Timeline } from "../components/data/Timeline";
+export type * from "../components/data/Timeline";
+export { Tooltip } from "../components/data/Tooltip";
+export type * from "../components/data/Tooltip";
+export { Tree } from "../components/data/Tree";
+export type * from "../components/data/Tree";
+export { Watermark } from "../components/data/Watermark";
+export type * from "../components/data/Watermark";
+export { DataGrid } from "../components/datatable/DataGrid";
+export type * from "../components/datatable/DataGrid";
+export { DataTable } from "../components/datatable/DataTable";
+export type * from "../components/datatable/DataTable";
+export { TreeTable } from "../components/datatable/TreeTable";
+export type * from "../components/datatable/TreeTable";
+export { Dialog } from "../components/dialog/Dialog";
+export type * from "../components/dialog/Dialog";
+export { Alert } from "../components/feedback/Alert";
+export type * from "../components/feedback/Alert";
+export { Badge } from "../components/feedback/Badge";
+export type * from "../components/feedback/Badge";
+export { EmptyState } from "../components/feedback/EmptyState";
+export type * from "../components/feedback/EmptyState";
+export { ProgressBar } from "../components/feedback/ProgressBar";
+export type * from "../components/feedback/ProgressBar";
+export { Result } from "../components/feedback/Result";
+export type * from "../components/feedback/Result";
+export { Skeleton } from "../components/feedback/Skeleton";
+export type * from "../components/feedback/Skeleton";
+export { Spinner } from "../components/feedback/Spinner";
+export type * from "../components/feedback/Spinner";
+export { StatusIndicator } from "../components/feedback/StatusIndicator";
+export type * from "../components/feedback/StatusIndicator";
+export { Tag } from "../components/feedback/Tag";
+export type * from "../components/feedback/Tag";
+export { ToastStack, Toast } from "../components/feedback/Toast";
+export type * from "../components/feedback/Toast";
+export { Calendar } from "../components/forms/Calendar";
+export type * from "../components/forms/Calendar";
+export { Cascader } from "../components/forms/Cascader";
+export type * from "../components/forms/Cascader";
+export { Checkbox } from "../components/forms/Checkbox";
+export type * from "../components/forms/Checkbox";
+export { ColorPicker } from "../components/forms/ColorPicker";
+export type * from "../components/forms/ColorPicker";
+export { Combobox } from "../components/forms/Combobox";
+export type * from "../components/forms/Combobox";
+export { DatePicker } from "../components/forms/DatePicker";
+export type * from "../components/forms/DatePicker";
+export { Editor } from "../components/forms/Editor";
+export type * from "../components/forms/Editor";
+export { FileUpload } from "../components/forms/FileUpload";
+export type * from "../components/forms/FileUpload";
+export { Form, FormField, FormFieldArray, FormWizard } from "../components/forms/Form";
+export type * from "../components/forms/Form";
+export { InlineEdit } from "../components/forms/InlineEdit";
+export type * from "../components/forms/InlineEdit";
+export { InputGroup } from "../components/forms/InputGroup";
+export type * from "../components/forms/InputGroup";
+export { InputOTP } from "../components/forms/InputOTP";
+export type * from "../components/forms/InputOTP";
+export { Mentions } from "../components/forms/Mentions";
+export type * from "../components/forms/Mentions";
+export { NativeSelect } from "../components/forms/NativeSelect";
+export type * from "../components/forms/NativeSelect";
+export { NumberField } from "../components/forms/NumberField";
+export type * from "../components/forms/NumberField";
+export { Radio, RadioGroup } from "../components/forms/RadioGroup";
+export type * from "../components/forms/RadioGroup";
+export { Rating } from "../components/forms/Rating";
+export type * from "../components/forms/Rating";
+export { SearchField } from "../components/forms/SearchField";
+export type * from "../components/forms/SearchField";
+export { SegmentedControl } from "../components/forms/SegmentedControl";
+export type * from "../components/forms/SegmentedControl";
+export { Select } from "../components/forms/Select";
+export type * from "../components/forms/Select";
+export { Slider } from "../components/forms/Slider";
+export type * from "../components/forms/Slider";
+export { Switch } from "../components/forms/Switch";
+export type * from "../components/forms/Switch";
+export { TagInput } from "../components/forms/TagInput";
+export type * from "../components/forms/TagInput";
+export { Textarea } from "../components/forms/Textarea";
+export type * from "../components/forms/Textarea";
+export { TimePicker } from "../components/forms/TimePicker";
+export type * from "../components/forms/TimePicker";
+export { Toggle } from "../components/forms/Toggle";
+export type * from "../components/forms/Toggle";
+export { Transfer } from "../components/forms/Transfer";
+export type * from "../components/forms/Transfer";
+export { TreeSelect } from "../components/forms/TreeSelect";
+export type * from "../components/forms/TreeSelect";
+export { Icon } from "../components/icon/Icon";
+export type * from "../components/icon/Icon";
+export declare const CS_ICONS: Readonly<Record<string, string>>;
+export { Logo } from "../components/logo/Logo";
+export type * from "../components/logo/Logo";
+export declare const CS_LOGO_VIEWBOX: string;
+export declare const CS_LOGO_MARK_INNER: string;
+export { Anchor } from "../components/navigation/Anchor";
+export type * from "../components/navigation/Anchor";
+export { BackTop } from "../components/navigation/BackTop";
+export type * from "../components/navigation/BackTop";
+export { Breadcrumb } from "../components/navigation/Breadcrumb";
+export type * from "../components/navigation/Breadcrumb";
+export { CommandPalette } from "../components/navigation/CommandPalette";
+export type * from "../components/navigation/CommandPalette";
+export { Dock } from "../components/navigation/Dock";
+export type * from "../components/navigation/Dock";
+export { HotKeys } from "../components/navigation/HotKeys";
+export type * from "../components/navigation/HotKeys";
+export { Link } from "../components/navigation/Link";
+export type * from "../components/navigation/Link";
+export { Menu, MenuItem } from "../components/navigation/Menu";
+export type * from "../components/navigation/Menu";
+export { Menubar } from "../components/navigation/Menubar";
+export type * from "../components/navigation/Menubar";
+export { NavigationMenu } from "../components/navigation/NavigationMenu";
+export type * from "../components/navigation/NavigationMenu";
+export { Pagination } from "../components/navigation/Pagination";
+export type * from "../components/navigation/Pagination";
+export { Sidebar, NavItem } from "../components/navigation/Sidebar";
+export type * from "../components/navigation/Sidebar";
+export { Steps } from "../components/navigation/Steps";
+export type * from "../components/navigation/Steps";
+export { Tabs, Tab } from "../components/navigation/Tabs";
+export type * from "../components/navigation/Tabs";
+export { Toolbar } from "../components/navigation/Toolbar";
+export type * from "../components/navigation/Toolbar";
+export { AlertDialog } from "../components/overlays/AlertDialog";
+export type * from "../components/overlays/AlertDialog";
+export { ContextMenu } from "../components/overlays/ContextMenu";
+export type * from "../components/overlays/ContextMenu";
+export { Drawer } from "../components/overlays/Drawer";
+export type * from "../components/overlays/Drawer";
+export { HoverCard } from "../components/overlays/HoverCard";
+export type * from "../components/overlays/HoverCard";
+export { Popconfirm } from "../components/overlays/Popconfirm";
+export type * from "../components/overlays/Popconfirm";
+export { Popover } from "../components/overlays/Popover";
+export type * from "../components/overlays/Popover";
+export { Tour } from "../components/overlays/Tour";
+export type * from "../components/overlays/Tour";
+export { TextField } from "../components/textfield/TextField";
+export type * from "../components/textfield/TextField";

package/_esm/react.mjs

@@ -0,0 +1,114 @@
+// CyberSkill Design System — bundler-native React entry (GENERATED).
+// Re-exports every public component from source. React / react-dom are
+// peerDependencies (external) — do not use this entry without a bundler
+// that can transpile JSX (Next transpilePackages, Vite, etc.).
+// Browser / no-build consumers: import from `@cyberskill/design/legacy`
+// (`_esm/cs.mjs`) instead. Styles are NOT injected — link styles.css.
+// Regenerate: node scripts/generate-react-entry.mjs
+
+export { AIDisclosureBadge } from "../components/ai/AIDisclosureBadge.jsx";
+export { ChatMessage } from "../components/ai/ChatMessage.jsx";
+export { CitationList } from "../components/ai/CitationList.jsx";
+export { ConfidenceMeter } from "../components/ai/ConfidenceMeter.jsx";
+export { HumanReviewGate } from "../components/ai/HumanReviewGate.jsx";
+export { PromptInput } from "../components/ai/PromptInput.jsx";
+export { PromptSuggestions } from "../components/ai/PromptSuggestions.jsx";
+export { TypingIndicator } from "../components/ai/TypingIndicator.jsx";
+export { LumiAvatar } from "../components/brand/LumiAvatar.jsx";
+export { Button } from "../components/button/Button.jsx";
+export { ButtonGroup } from "../components/button/ButtonGroup.jsx";
+export { FloatingActionButton } from "../components/button/FloatingActionButton.jsx";
+export { Accordion } from "../components/data/Accordion.jsx";
+export { AspectRatio } from "../components/data/AspectRatio.jsx";
+export { Avatar, AvatarGroup } from "../components/data/Avatar.jsx";
+export { Card, CardHeader, CardBody, CardFooter } from "../components/data/Card.jsx";
+export { Carousel } from "../components/data/Carousel.jsx";
+export { Chart } from "../components/data/Chart.jsx";
+export { CodeBlock } from "../components/data/CodeBlock.jsx";
+export { Collapsible } from "../components/data/Collapsible.jsx";
+export { Comment } from "../components/data/Comment.jsx";
+export { DescriptionList } from "../components/data/DescriptionList.jsx";
+export { Divider } from "../components/data/Divider.jsx";
+export { Image } from "../components/data/Image.jsx";
+export { Item } from "../components/data/Item.jsx";
+export { Kbd } from "../components/data/Kbd.jsx";
+export { List, ListItem } from "../components/data/List.jsx";
+export { Masonry } from "../components/data/Masonry.jsx";
+export { QRCode } from "../components/data/QRCode.jsx";
+export { ScrollArea } from "../components/data/ScrollArea.jsx";
+export { Sortable } from "../components/data/Sortable.jsx";
+export { Splitter } from "../components/data/Splitter.jsx";
+export { Stat } from "../components/data/Stat.jsx";
+export { Terminal } from "../components/data/Terminal.jsx";
+export { Timeline } from "../components/data/Timeline.jsx";
+export { Tooltip } from "../components/data/Tooltip.jsx";
+export { Tree } from "../components/data/Tree.jsx";
+export { Watermark } from "../components/data/Watermark.jsx";
+export { DataGrid } from "../components/datatable/DataGrid.jsx";
+export { DataTable } from "../components/datatable/DataTable.jsx";
+export { TreeTable } from "../components/datatable/TreeTable.jsx";
+export { Dialog } from "../components/dialog/Dialog.jsx";
+export { Alert } from "../components/feedback/Alert.jsx";
+export { Badge } from "../components/feedback/Badge.jsx";
+export { EmptyState } from "../components/feedback/EmptyState.jsx";
+export { ProgressBar } from "../components/feedback/ProgressBar.jsx";
+export { Result } from "../components/feedback/Result.jsx";
+export { Skeleton } from "../components/feedback/Skeleton.jsx";
+export { Spinner } from "../components/feedback/Spinner.jsx";
+export { StatusIndicator } from "../components/feedback/StatusIndicator.jsx";
+export { Tag } from "../components/feedback/Tag.jsx";
+export { ToastStack, Toast } from "../components/feedback/Toast.jsx";
+export { Calendar } from "../components/forms/Calendar.jsx";
+export { Cascader } from "../components/forms/Cascader.jsx";
+export { Checkbox } from "../components/forms/Checkbox.jsx";
+export { ColorPicker } from "../components/forms/ColorPicker.jsx";
+export { Combobox } from "../components/forms/Combobox.jsx";
+export { DatePicker } from "../components/forms/DatePicker.jsx";
+export { Editor } from "../components/forms/Editor.jsx";
+export { FileUpload } from "../components/forms/FileUpload.jsx";
+export { Form, FormField, FormFieldArray, FormWizard } from "../components/forms/Form.jsx";
+export { InlineEdit } from "../components/forms/InlineEdit.jsx";
+export { InputGroup } from "../components/forms/InputGroup.jsx";
+export { InputOTP } from "../components/forms/InputOTP.jsx";
+export { Mentions } from "../components/forms/Mentions.jsx";
+export { NativeSelect } from "../components/forms/NativeSelect.jsx";
+export { NumberField } from "../components/forms/NumberField.jsx";
+export { Radio, RadioGroup } from "../components/forms/RadioGroup.jsx";
+export { Rating } from "../components/forms/Rating.jsx";
+export { SearchField } from "../components/forms/SearchField.jsx";
+export { SegmentedControl } from "../components/forms/SegmentedControl.jsx";
+export { Select } from "../components/forms/Select.jsx";
+export { Slider } from "../components/forms/Slider.jsx";
+export { Switch } from "../components/forms/Switch.jsx";
+export { TagInput } from "../components/forms/TagInput.jsx";
+export { Textarea } from "../components/forms/Textarea.jsx";
+export { TimePicker } from "../components/forms/TimePicker.jsx";
+export { Toggle } from "../components/forms/Toggle.jsx";
+export { Transfer } from "../components/forms/Transfer.jsx";
+export { TreeSelect } from "../components/forms/TreeSelect.jsx";
+export { CS_ICONS, Icon } from "../components/icon/Icon.jsx";
+export { Logo } from "../components/logo/Logo.jsx";
+export { CS_LOGO_VIEWBOX, CS_LOGO_MARK_INNER } from "../components/logo/logo-data.js";
+export { Anchor } from "../components/navigation/Anchor.jsx";
+export { BackTop } from "../components/navigation/BackTop.jsx";
+export { Breadcrumb } from "../components/navigation/Breadcrumb.jsx";
+export { CommandPalette } from "../components/navigation/CommandPalette.jsx";
+export { Dock } from "../components/navigation/Dock.jsx";
+export { HotKeys } from "../components/navigation/HotKeys.jsx";
+export { Link } from "../components/navigation/Link.jsx";
+export { Menu, MenuItem } from "../components/navigation/Menu.jsx";
+export { Menubar } from "../components/navigation/Menubar.jsx";
+export { NavigationMenu } from "../components/navigation/NavigationMenu.jsx";
+export { Pagination } from "../components/navigation/Pagination.jsx";
+export { Sidebar, NavItem } from "../components/navigation/Sidebar.jsx";
+export { Steps } from "../components/navigation/Steps.jsx";
+export { Tabs, Tab } from "../components/navigation/Tabs.jsx";
+export { Toolbar } from "../components/navigation/Toolbar.jsx";
+export { AlertDialog } from "../components/overlays/AlertDialog.jsx";
+export { ContextMenu } from "../components/overlays/ContextMenu.jsx";
+export { Drawer } from "../components/overlays/Drawer.jsx";
+export { HoverCard } from "../components/overlays/HoverCard.jsx";
+export { Popconfirm } from "../components/overlays/Popconfirm.jsx";
+export { Popover } from "../components/overlays/Popover.jsx";
+export { Tour } from "../components/overlays/Tour.jsx";
+export { TextField } from "../components/textfield/TextField.jsx";

package/base/collections.css

@@ -11,6 +11,26 @@
 .cs-list__sub { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }
 .cs-list__trail { flex: none; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
 
+/* Item — settings / nav / list row chrome (sibling of ListItem, first-class) */
+.cs-item {
+  display: flex; align-items: center; gap: 14px;
+  padding: 12px 14px; border-radius: var(--cs-radius-md);
+  color: var(--cs-color-text-primary); text-align: start;
+  text-decoration: none; border: 1px solid transparent;
+  background: var(--cs-color-surface-panel);
+}
+.cs-item--interactive { cursor: pointer; font: inherit; inline-size: 100%; }
+button.cs-item--interactive { border: 1px solid transparent; background: var(--cs-color-surface-panel); }
+.cs-item--interactive:hover { background: var(--cs-color-surface-raised); border-color: var(--cs-color-border-default); }
+.cs-item--interactive:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; }
+.cs-item.is-selected { border-color: var(--cs-color-brand-ochre); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }
+.cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
+.cs-item__leading { flex: none; display: grid; place-items: center; color: var(--cs-color-text-accent); }
+.cs-item__main { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }
+.cs-item__title { font-weight: 600; font-size: var(--cs-font-size-sm); line-height: 1.35; }
+.cs-item__description { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); line-height: 1.4; }
+.cs-item__trailing { flex: none; display: grid; place-items: center; color: var(--cs-color-text-muted); }
+
 /* DescriptionList */
 .cs-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 24px; margin: 0; }
 .cs-dl dt { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }
@@ -36,6 +56,17 @@
 .cs-accordion__trigger[aria-expanded="true"] .cs-accordion__chevron { transform: rotate(180deg); }
 .cs-accordion__panel { padding: 0 18px 16px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
 
+/* Collapsible — light single-panel expand (no Accordion chrome) */
+.cs-collapsible { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); overflow: hidden; }
+.cs-collapsible__trigger { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; text-align: start; }
+.cs-collapsible__trigger:hover { background: var(--cs-color-surface-raised); }
+.cs-collapsible__label { flex: 1; min-inline-size: 0; }
+.cs-collapsible__chevron { flex: none; color: var(--cs-color-text-muted); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }
+.cs-collapsible__trigger[aria-expanded="true"] .cs-collapsible__chevron { transform: rotate(180deg); }
+.cs-collapsible__panel { padding: 0 16px 14px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }
+.cs-collapsible__panel > :first-child { margin-block-start: 0; }
+.cs-collapsible__panel > :last-child { margin-block-end: 0; }
+
 /* CodeBlock */
 .cs-code { position: relative; background: #2b1e14; color: #f5ead9; border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid #4a3a2c; }
 .cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid #4a3a2c; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: #c9b7a3; }

package/base/components.css

@@ -153,6 +153,9 @@
 .cs-dialog__actions { justify-content: flex-end; }
 .cs-dialog__title { font-size: 1.25rem; line-height: 1.35; margin: 0; }
 .cs-dialog__body { margin-block: 1rem; }
+/* AlertDialog — confirm/destructive modal (shares dialog layer; tighter panel) */
+.cs-alert-dialog { max-inline-size: min(28rem, calc(100vw - 2rem)); }
+.cs-alert-dialog--destructive .cs-dialog__title { color: var(--cs-color-semantic-danger, #b42318); }
 @media (max-width: 640px) {
   .cs-dialog { max-inline-size: calc(100vw - 1rem); top: 4vh; padding: var(--cs-space-4, 16px); }
   .cs-dialog__actions .cs-button, .cs-review-gate__actions .cs-button { flex: 1 1 auto; }

package/base/data.css

@@ -46,3 +46,36 @@
 .cs-divider--label { display: flex; align-items: center; gap: 12px; background: none; block-size: auto; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }
 .cs-divider--label::before, .cs-divider--label::after { content: ""; flex: 1; block-size: 1px; background: var(--cs-color-border-default); }
 .cs-divider--vertical { inline-size: 1px; block-size: auto; align-self: stretch; margin-inline: var(--cs-space-4); margin-block: 0; }
+
+/* ScrollArea — focusable overflow for dense panels */
+.cs-scroll-area {
+  overflow: auto;
+  overscroll-behavior: contain;
+  outline: none;
+  border-radius: var(--cs-radius-md);
+  scrollbar-color: color-mix(in oklab, var(--cs-color-brand-umber) 35%, transparent) transparent;
+  scrollbar-width: thin;
+}
+.cs-scroll-area:focus-visible {
+  box-shadow: 0 0 0 3px var(--cs-color-brand-ochre);
+}
+
+/* AspectRatio — CSS aspect-ratio lock for media */
+.cs-aspect-ratio {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  overflow: hidden;
+  border-radius: var(--cs-radius-md);
+}
+.cs-aspect-ratio > * {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+}
+.cs-aspect-ratio > img,
+.cs-aspect-ratio > video {
+  object-fit: cover;
+  display: block;
+}

package/base/forms.css

@@ -7,6 +7,14 @@
 .cs-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
 .cs-select select.cs-field__control:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
 
+/* NativeSelect — lean progressive-enhancement companion beside Select */
+.cs-native-select { position: relative; display: block; }
+.cs-native-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }
+.cs-native-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }
+.cs-native-select select.cs-field__control:focus-visible { outline: 3px solid var(--cs-color-accent-ochre); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); }
+.cs-native-select--sm select.cs-field__control { min-block-size: 36px; padding-block: 6px; font-size: var(--cs-font-size-sm); }
+.cs-native-select--md select.cs-field__control { min-block-size: 44px; }
+
 /* Checkbox + Radio — native, brand accent */
 .cs-check, .cs-radio { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); line-height: 1.4; }
 .cs-check input, .cs-radio input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--cs-color-brand-umber); cursor: pointer; }

package/base/interaction.css

@@ -26,6 +26,7 @@
 .cs-button:focus-visible,
 .cs-field__control:focus-visible,
 .cs-select select.cs-field__control:focus-visible,
+.cs-native-select select.cs-field__control:focus-visible,
 .cs-search:focus-within,
 .cs-ai-disclosure__badge:focus-visible,
 .cs-switch input:focus-visible + .cs-switch__track {

package/base/typography.css

@@ -12,3 +12,9 @@
 .cs-caption { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-caption); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }
 .cs-eyebrow { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-eyebrow); font-weight: var(--cs-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-accent); }
 .cs-mono { font-family: var(--cs-font-family-mono); }
+/* Opt in to the display face for a subtree — retargets --cs-heading-family so
+ * .cs-display/.cs-h1…h4 and bare headings follow, body copy stays on the UI
+ * face. Space Grotesk tops out at 700, so --cs-heading-weight-strong (800)
+ * clamps to 700 within that family (CSS does not hop to Be Vietnam Pro for a
+ * missing weight). Sanctioned path for cyberskill.world / Lumi headline face. */
+.cs-display-face { --cs-heading-family: var(--cs-font-family-display); }

package/components/_i18n/strings.js

@@ -25,8 +25,8 @@ export const strings = {
     vi: { placeholder: "Tìm kiếm…", clear: "Xóa tìm kiếm" },
   },
   NumberField: {
-    en: { decrease: "Decrease", increase: "Increase" },
-    vi: { decrease: "Giảm", increase: "Tăng" },
+    en: { decrease: "Decrease", increase: "Increase", value: "Value" },
+    vi: { decrease: "Giảm", increase: "Tăng", value: "Giá trị" },
   },
   FileUpload: {
     en: { title: "Drop files here or browse", hint: "PNG, JPG, or PDF up to 10MB" },
@@ -36,6 +36,10 @@ export const strings = {
     en: { close: "Close", confirm: "Confirm", cancel: "Cancel" },
     vi: { close: "Đóng", confirm: "Xác nhận", cancel: "Hủy" },
   },
+  AlertDialog: {
+    en: { confirm: "Confirm", cancel: "Cancel" },
+    vi: { confirm: "Xác nhận", cancel: "Hủy" },
+  },
   Drawer: {
     en: { close: "Close", panel: "Panel" },
     vi: { close: "Đóng", panel: "Bảng" },
@@ -161,8 +165,8 @@ export const strings = {
     vi: { placeholder: "Chọn hoặc nhập…", empty: "Không có kết quả phù hợp" },
   },
   InputGroup: {
-    en: { clear: "Clear", show: "Show password", hide: "Hide password" },
-    vi: { clear: "Xóa", show: "Hiện mật khẩu", hide: "Ẩn mật khẩu" },
+    en: { clear: "Clear", show: "Show password", hide: "Hide password", input: "Input" },
+    vi: { clear: "Xóa", show: "Hiện mật khẩu", hide: "Ẩn mật khẩu", input: "Ô nhập" },
   },
   TagInput: {
     en: { placeholder: "Add a tag…", remove: "Remove" },

package/components/ai/ai-conversation.card.html

@@ -10,8 +10,8 @@
   .grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; max-width: 660px; align-items: start; }
   .lbl { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 10px; }
 </style>
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>

package/components/ai/ai-lumi.card.html

@@ -9,8 +9,8 @@
   .lbl { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 10px; }
   .blk { margin-bottom: 20px; }
 </style>
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>

package/components/ai/ai.card.html

@@ -10,8 +10,8 @@
   .stack { display: grid; gap: 18px; max-width: 560px; }
   .lbl { font: 600 11px/1 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .09em; color: var(--cs-color-text-muted); margin-bottom: 8px; }
 </style>
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>

package/components/brand/brand.card.html

@@ -9,8 +9,8 @@
   .row { display: flex; align-items: center; gap: 24px; }
   .cap { font: 500 12px/1.4 var(--cs-font-family-ui); color: var(--cs-color-text-muted); margin-top: 8px; }
 </style>
-<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
-<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react.development.js" integrity="sha384-r22tQd8qRIHDPIkmdXZcVtvPi1Tj2x1QaW2tmFQHEvHscATUnHQ5siTyxWw5PMUs" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/umd-react@19.2.8/dist/react-dom.development.js" integrity="sha384-gJZYmumEmwqVmX3JVsLZq+4QrxoPGh/BW47Rk7SqNPCPFpTGnRtvmeRPJ7//ZDPk" crossorigin="anonymous"></script>
 <script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
 <script src="../../_ds_bundle.js"></script>
 </head>