@dbcdk/react-components 0.0.189 → 0.0.191

package/dist/client.cjs

@@ -48,6 +48,7 @@ var TreeView = require('./components/tree-view/TreeView');
 var nestedFiltering = require('./utils/arrays/nested-filtering');
 var MultiSelect = require('./components/forms/multi-select/MultiSelect');
 var useViewportFill = require('./hooks/useViewportFill');
+var useStickyLayout = require('./hooks/useStickyLayout');
 var formatDate = require('./utils/date/formatDate');
 var FilterField = require('./components/filter-field/FilterField');
 var Select = require('./components/forms/select/Select');
@@ -386,6 +387,12 @@ Object.keys(useViewportFill).forEach(function (k) {
 		get: function () { return useViewportFill[k]; }
 	});
 });
+Object.keys(useStickyLayout).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return useStickyLayout[k]; }
+	});
+});
 Object.keys(formatDate).forEach(function (k) {
 	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
 		enumerable: true,

package/dist/client.d.ts

@@ -45,6 +45,7 @@ export * from './components/tree-view/TreeView';
 export * from './utils/arrays/nested-filtering';
 export * from './components/forms/multi-select/MultiSelect';
 export * from './hooks/useViewportFill';
+export * from './hooks/useStickyLayout';
 export * from './utils/date/formatDate';
 export * from './components/filter-field/FilterField';
 export * from './components/forms/select/Select';

package/dist/client.js

@@ -46,6 +46,7 @@ export * from './components/tree-view/TreeView';
 export * from './utils/arrays/nested-filtering';
 export * from './components/forms/multi-select/MultiSelect';
 export * from './hooks/useViewportFill';
+export * from './hooks/useStickyLayout';
 export * from './utils/date/formatDate';
 export * from './components/filter-field/FilterField';
 export * from './components/forms/select/Select';

package/dist/components/accordion/Accordion.cjs

@@ -23,7 +23,7 @@ function Accordion({
   items,
   mode = "single",
   size = "md",
-  variant = "default",
+  variant = "filled",
   renderMode = "lazy",
   defaultOpenIndex = null,
   defaultOpenIndexes = [],
@@ -35,6 +35,7 @@ function Accordion({
   ...rest
 }) {
   const uid = react.useId();
+  const resolvedVariant = variant === "default" ? "filled" : variant;
   const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
   const [hasMounted, setHasMounted] = react.useState(false);
   react.useEffect(() => {
@@ -96,12 +97,7 @@ function Accordion({
     "div",
     {
       ...rest,
-      className: [
-        styles__default.default.container,
-        styles__default.default[size],
-        variant !== "default" ? styles__default.default[variant] : "",
-        className
-      ].filter(Boolean).join(" "),
+      className: [styles__default.default.container, styles__default.default[size], styles__default.default[resolvedVariant], className].filter(Boolean).join(" "),
       children: items.map((item, i) => {
         var _a;
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -114,7 +110,7 @@ function Accordion({
             onToggle: toggle,
             shouldAnimate: hasMounted,
             headlineSize: size === "sm" ? 4 : 3,
-            variant,
+            variant: resolvedVariant,
             renderMode
           },
           (_a = item.id) != null ? _a : i

package/dist/components/accordion/Accordion.d.ts

@@ -13,7 +13,7 @@ export interface AccordionItem {
 }
 type Size = 'sm' | 'md' | 'lg';
 type Mode = 'single' | 'multiple';
-type Variant = 'default' | 'outlined';
+type Variant = 'filled' | 'outlined' | 'default';
 type OpenIndexes = number[] | 'all';
 type RenderMode = 'lazy' | 'eager';
 export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {

package/dist/components/accordion/Accordion.js

@@ -17,7 +17,7 @@ function Accordion({
   items,
   mode = "single",
   size = "md",
-  variant = "default",
+  variant = "filled",
   renderMode = "lazy",
   defaultOpenIndex = null,
   defaultOpenIndexes = [],
@@ -29,6 +29,7 @@ function Accordion({
   ...rest
 }) {
   const uid = useId();
+  const resolvedVariant = variant === "default" ? "filled" : variant;
   const isControlled = mode === "single" ? openIndex !== void 0 : openIndexes !== void 0;
   const [hasMounted, setHasMounted] = useState(false);
   useEffect(() => {
@@ -90,12 +91,7 @@ function Accordion({
     "div",
     {
       ...rest,
-      className: [
-        styles.container,
-        styles[size],
-        variant !== "default" ? styles[variant] : "",
-        className
-      ].filter(Boolean).join(" "),
+      className: [styles.container, styles[size], styles[resolvedVariant], className].filter(Boolean).join(" "),
       children: items.map((item, i) => {
         var _a;
         return /* @__PURE__ */ jsx(
@@ -108,7 +104,7 @@ function Accordion({
             onToggle: toggle,
             shouldAnimate: hasMounted,
             headlineSize: size === "sm" ? 4 : 3,
-            variant,
+            variant: resolvedVariant,
             renderMode
           },
           (_a = item.id) != null ? _a : i

package/dist/components/accordion/Accordion.module.css

@@ -1,41 +1,90 @@
 .container {
   border-radius: var(--border-radius-default);
-  background-color: var(--color-bg-surface);
+  background-color: transparent;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  gap: var(--spacing-xs);
+  gap: 0;
+}
+
+.filled {
+  --acc-item-bg: transparent;
+  --acc-trigger-bg: color-mix(
+    in srgb,
+    var(--color-bg-contextual-subtle) 66%,
+    var(--color-bg-surface)
+  );
+  --acc-trigger-bg-hover: color-mix(
+    in srgb,
+    var(--color-bg-contextual-subtle) 74%,
+    var(--color-bg-surface)
+  );
+  --acc-content-bg: var(--color-bg-surface);
+  --acc-item-separator: none;
+  --acc-item-gap: calc((var(--spacing-xxs) + var(--spacing-xs)) / 2);
+  --acc-item-radius: var(--border-radius-sm);
+  --acc-content-px: var(--acc-trigger-px);
+  --acc-content-open-pt: var(--spacing-2xs);
 }
 
 .outlined {
-  background-color: transparent;
+  background-color: var(--color-bg-surface);
   border: 1px solid var(--color-border-subtle);
   border-radius: var(--border-radius-md);
   gap: 0;
+  --acc-item-bg: transparent;
+  --acc-content-bg: transparent;
+  --acc-item-gap: 0;
+  --acc-item-radius: 0;
   --acc-trigger-bg: transparent;
+  --acc-trigger-bg-hover: transparent;
   --acc-content-px: var(--acc-trigger-px);
   --acc-item-separator: 1px solid var(--color-border-subtle);
 }
 
 /* Size variables (consumed by AccordionRow) */
 .sm {
-  --acc-trigger-py: var(--spacing-xs);
+  --acc-trigger-py: var(--spacing-xxs);
   --acc-trigger-px: var(--spacing-sm);
   --acc-content-py: var(--spacing-sm);
   --acc-font-size: var(--font-size-sm);
 }
 
 .md {
-  --acc-trigger-py: var(--spacing-sm);
+  --acc-trigger-py: var(--spacing-xs);
   --acc-trigger-px: var(--spacing-md);
   --acc-content-py: var(--spacing-md);
   --acc-font-size: var(--font-size-md);
 }
 
 .lg {
-  --acc-trigger-py: var(--spacing-md);
+  --acc-trigger-py: var(--spacing-sm);
   --acc-trigger-px: var(--spacing-md);
   --acc-content-py: var(--spacing-md);
   --acc-font-size: var(--font-size-md);
 }
+
+.filled.sm {
+  --acc-trigger-py: var(--spacing-2xs);
+}
+
+.filled.md {
+  --acc-trigger-py: calc((var(--spacing-xs) + var(--spacing-xxs)) / 2);
+}
+
+.filled.lg {
+  --acc-trigger-py: calc((var(--spacing-sm) + var(--spacing-xs)) / 2);
+}
+
+.outlined.sm {
+  --acc-trigger-py: var(--spacing-xs);
+}
+
+.outlined.md {
+  --acc-trigger-py: var(--spacing-sm);
+}
+
+.outlined.lg {
+  --acc-trigger-py: var(--spacing-md);
+}

package/dist/components/accordion/components/AccordionRow.cjs

@@ -19,11 +19,11 @@ function AccordionRow({
   onToggle,
   shouldAnimate = true,
   headlineSize = 4,
-  variant = "default",
+  variant: _variant = "filled",
   renderMode = "lazy"
 }) {
   const isDisabled = !!item.disabled;
-  const headlineWeight = variant === "outlined" ? 400 : 500;
+  const headlineWeight = 400;
   const buttonId = `${uid}-acc-btn-${index}`;
   const panelId = `${uid}-acc-panel-${index}`;
   const { innerRef, height, onTransitionEnd } = useCollapsibleHeight.useCollapsibleHeight(isOpen, shouldAnimate);

package/dist/components/accordion/components/AccordionRow.d.ts

@@ -8,7 +8,7 @@ export type AccordionRowProps = {
     onToggle: (index: number) => void;
     shouldAnimate?: boolean;
     headlineSize?: 1 | 2 | 3 | 4 | 5 | 6;
-    variant?: 'default' | 'outlined';
+    variant?: 'filled' | 'outlined' | 'default';
     renderMode?: 'lazy' | 'eager';
 };
-export declare function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate, headlineSize, variant, renderMode, }: AccordionRowProps): JSX.Element;
+export declare function AccordionRow({ uid, index, item, isOpen, onToggle, shouldAnimate, headlineSize, variant: _variant, renderMode, }: AccordionRowProps): JSX.Element;

package/dist/components/accordion/components/AccordionRow.js

@@ -13,11 +13,11 @@ function AccordionRow({
   onToggle,
   shouldAnimate = true,
   headlineSize = 4,
-  variant = "default",
+  variant: _variant = "filled",
   renderMode = "lazy"
 }) {
   const isDisabled = !!item.disabled;
-  const headlineWeight = variant === "outlined" ? 400 : 500;
+  const headlineWeight = 400;
   const buttonId = `${uid}-acc-btn-${index}`;
   const panelId = `${uid}-acc-panel-${index}`;
   const { innerRef, height, onTransitionEnd } = useCollapsibleHeight(isOpen, shouldAnimate);

package/dist/components/accordion/components/AccordionRow.module.css

@@ -5,6 +5,15 @@
   background: var(--acc-trigger-bg, var(--color-bg-contextual-subtle));
 }
 
+.item:not(.disabled):hover .headerRow {
+  background: var(--acc-trigger-bg-hover, var(--acc-trigger-bg, var(--color-bg-contextual-subtle)));
+}
+
+.item:not(.disabled):hover .title,
+.item:not(.disabled):hover .chevron {
+  color: var(--color-fg-default);
+}
+
 .trigger {
   all: unset;
   box-sizing: border-box;
@@ -75,9 +84,10 @@
 }
 
 .chevron {
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
+  width: var(--icon-size-sm);
+  height: var(--icon-size-sm);
   flex: 0 0 auto;
+  color: var(--color-fg-muted);
   transition: transform var(--transition-normal) var(--ease-standard);
 }
 
@@ -108,12 +118,24 @@
 
 .content {
   padding: var(--acc-content-py) var(--acc-content-px, 0);
+  background: var(--acc-content-bg, transparent);
+}
+
+.item[data-state='open'] .content {
+  padding-top: var(--acc-content-open-pt, var(--acc-content-py));
 }
 
 .item {
+  background: var(--acc-item-bg, transparent);
+  border-radius: var(--acc-item-radius, 0);
+  overflow: hidden;
   border-bottom: var(--acc-item-separator, none);
 }
 
+.item + .item {
+  margin-top: var(--acc-item-gap, 0);
+}
+
 :global(.outlined) .item[data-state='open'] .headerRow {
   box-shadow: inset 3px 0 0 var(--color-border-selected);
 }

package/dist/components/breadcrumbs/Breadcrumbs.cjs

@@ -12,13 +12,16 @@ function Breadcrumbs({
   items,
   ...navProps
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: styles__default.default.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("li", { children: [
-      item.icon && item.icon,
-      item.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
-    ] }),
-    index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, children: "/" })
-  ] }, `breadcrumbItem-${item.label}-${index}`)) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { className: styles__default.default.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsxRuntime.jsx("ul", { children: items.map((item, index) => {
+    const isCurrent = index === items.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("li", { "aria-current": isCurrent ? "page" : void 0, children: [
+        item.icon && item.icon,
+        item.onClick ? /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx("span", { children: item.label })
+      ] }),
+      index < items.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.separator, children: "/" })
+    ] }, `breadcrumbItem-${item.label}-${index}`);
+  }) }) });
 }
 
 exports.Breadcrumbs = Breadcrumbs;

package/dist/components/breadcrumbs/Breadcrumbs.js

@@ -6,13 +6,16 @@ function Breadcrumbs({
   items,
   ...navProps
 }) {
-  return /* @__PURE__ */ jsx("nav", { className: styles.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsx("ul", { children: items.map((item, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs("li", { children: [
-      item.icon && item.icon,
-      item.onClick ? /* @__PURE__ */ jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsx("span", { children: item.label })
-    ] }),
-    index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: styles.separator, children: "/" })
-  ] }, `breadcrumbItem-${item.label}-${index}`)) }) });
+  return /* @__PURE__ */ jsx("nav", { className: styles.breadcrumbs, "aria-label": "breadcrumb", ...navProps, children: /* @__PURE__ */ jsx("ul", { children: items.map((item, index) => {
+    const isCurrent = index === items.length - 1;
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("li", { "aria-current": isCurrent ? "page" : void 0, children: [
+        item.icon && item.icon,
+        item.onClick ? /* @__PURE__ */ jsx("button", { onClick: item.onClick, children: item.label }) : /* @__PURE__ */ jsx("span", { children: item.label })
+      ] }),
+      index < items.length - 1 && /* @__PURE__ */ jsx("span", { className: styles.separator, children: "/" })
+    ] }, `breadcrumbItem-${item.label}-${index}`);
+  }) }) });
 }
 
 export { Breadcrumbs };

package/dist/components/breadcrumbs/Breadcrumbs.module.css

@@ -34,12 +34,8 @@
 .breadcrumbs li[aria-current='page'],
 .breadcrumbs li:last-of-type {
   color: var(--color-fg-default);
-  cursor: default;
-}
-
-.breadcrumbs li[aria-current='page'] button,
-.breadcrumbs li:last-of-type button {
   font-weight: var(--font-weight-medium);
+  cursor: default;
 }
 
 .separator {

package/dist/components/button/Button.module.css

@@ -259,7 +259,8 @@
 }
 
 .header:hover {
-  background-color: color-mix(in srgb, var(--color-navbar-fg) 12%, transparent);
+  background-color: transparent;
+  border-color: var(--color-navbar-fg);
 }
 
 .header:focus-visible {
@@ -275,7 +276,8 @@
 }
 
 .header.active:hover {
-  background-color: color-mix(in srgb, var(--color-navbar-fg) 22%, transparent);
+  background-color: color-mix(in srgb, var(--color-navbar-fg) 16%, transparent);
+  border-color: var(--color-navbar-fg);
 }
 
 .button.xs {

package/dist/components/button-select/ButtonSelect.cjs

@@ -10,7 +10,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 function ButtonSelect(props) {
-  const { options, size = "md", disabled } = props;
+  const { options, size = "md", disabled, modified = false } = props;
   const selectedValues = Array.isArray(props.value) ? props.value : [props.value];
   function handleSelect(optionValue) {
     if (props.multiple) {
@@ -20,7 +20,7 @@ function ButtonSelect(props) {
     }
     props.onChange(optionValue);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.group, role: "group", children: options.map((option) => {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.group, role: "group", "data-modified": modified ? "true" : void 0, children: options.map((option) => {
     const isSelected = selectedValues.includes(option.value);
     return /* @__PURE__ */ jsxRuntime.jsx(
       Button.Button,

package/dist/components/button-select/ButtonSelect.d.ts

@@ -10,6 +10,7 @@ interface ButtonSelectBaseProps<T extends string = string> {
     options: ButtonSelectOption<T>[];
     size?: ButtonSize;
     disabled?: boolean;
+    modified?: boolean;
 }
 export interface ButtonSelectSingleProps<T extends string = string> extends ButtonSelectBaseProps<T> {
     value: T;

package/dist/components/button-select/ButtonSelect.js

@@ -4,7 +4,7 @@ import { Button } from '../../components/button/Button';
 import styles from './ButtonSelect.module.css';
 
 function ButtonSelect(props) {
-  const { options, size = "md", disabled } = props;
+  const { options, size = "md", disabled, modified = false } = props;
   const selectedValues = Array.isArray(props.value) ? props.value : [props.value];
   function handleSelect(optionValue) {
     if (props.multiple) {
@@ -14,7 +14,7 @@ function ButtonSelect(props) {
     }
     props.onChange(optionValue);
   }
-  return /* @__PURE__ */ jsx("div", { className: styles.group, role: "group", children: options.map((option) => {
+  return /* @__PURE__ */ jsx("div", { className: styles.group, role: "group", "data-modified": modified ? "true" : void 0, children: options.map((option) => {
     const isSelected = selectedValues.includes(option.value);
     return /* @__PURE__ */ jsx(
       Button,

package/dist/components/button-select/ButtonSelect.module.css

@@ -3,6 +3,20 @@
   flex-wrap: nowrap;
 }
 
+.group[data-modified='true'] {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
+  border-radius: var(--border-radius-default);
+  padding: 0;
+}
+
+.group[data-modified='true'] .btn {
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 60%,
+    var(--color-border-default)
+  );
+}
+
 /* Collapse the doubled border between adjacent buttons */
 .group .btn:not(:first-child) {
   margin-left: -1px;

package/dist/components/chip/Chip.module.css

@@ -24,6 +24,10 @@
     transform var(--transition-fast) var(--ease-standard);
 }
 
+.hasClose {
+  gap: var(--spacing-2xs);
+}
+
 .container:focus-visible {
   outline: none;
 }
@@ -39,14 +43,14 @@
 /* Types */
 
 .outlined {
-  --chip-bg: var(--color-bg-surface);
+  --chip-bg: transparent;
   --chip-border: var(--chip-outlined-border, var(--color-border-subtle));
   --chip-fg: var(--chip-outlined-fg, var(--color-fg-muted));
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
 }
 
 .outlined:hover {
-  background-color: var(--color-bg-surface);
+  background-color: transparent;
   border-color: var(--chip-outlined-border-hover, var(--color-border-default));
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
   color: var(--chip-outlined-fg-hover, var(--color-fg-default));
@@ -120,6 +124,25 @@
   box-shadow: none;
 }
 
+.outlined.neutral {
+  --chip-bg: transparent;
+  --chip-border: var(--chip-outlined-border, var(--color-border-subtle));
+}
+
+.outlined.neutral:hover,
+.outlined.neutral:focus-visible {
+  --chip-bg: transparent;
+}
+
+.neutral .close {
+  color: var(--color-fg-subtle);
+}
+
+.neutral .close:hover,
+.neutral .close:focus-visible {
+  color: var(--color-fg-default);
+}
+
 .success {
   --chip-bg: var(--color-status-success-bg);
   --chip-fg: var(--color-status-success-fg);
@@ -195,6 +218,19 @@
   box-shadow: inset 0 0 0 1px var(--color-border-selected);
 }
 
+.outlined.selected,
+.outlined.selected:hover,
+.outlined.selected:focus-visible {
+  background: color-mix(in srgb, var(--color-bg-selected) 65%, var(--color-bg-surface));
+  border-color: var(--color-border-selected);
+  box-shadow: inset 0 0 0 1px var(--color-border-selected);
+  color: var(--color-brand);
+}
+
+.outlined.selected:hover {
+  background: color-mix(in srgb, var(--color-bg-selected-hover) 65%, var(--color-bg-surface));
+}
+
 .selected:hover {
   background-color: var(--color-bg-selected);
   border-color: var(--color-border-selected);

package/dist/components/forms/checkbox/Checkbox.cjs

@@ -49,7 +49,11 @@ function Checkbox({
   const content = /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: [styles__default.default.container, size === "sm" ? styles__default.default.containerSm : ""].filter(Boolean).join(" "),
+      className: [
+        styles__default.default.container,
+        size === "sm" ? styles__default.default.containerSm : "",
+        modified ? styles__default.default.modified : ""
+      ].filter(Boolean).join(" "),
       "data-cy": dataCy,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Tooltip.Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -65,6 +69,7 @@ function Checkbox({
             onClick: toggle,
             className: [
               styles__default.default.checkbox,
+              disabled ? "disabled" : "",
               isChecked ? styles__default.default.checked : "",
               styles__default.default[variant],
               styles__default.default[size]

package/dist/components/forms/checkbox/Checkbox.js

@@ -43,7 +43,11 @@ function Checkbox({
   const content = /* @__PURE__ */ jsxs(
     "span",
     {
-      className: [styles.container, size === "sm" ? styles.containerSm : ""].filter(Boolean).join(" "),
+      className: [
+        styles.container,
+        size === "sm" ? styles.containerSm : "",
+        modified ? styles.modified : ""
+      ].filter(Boolean).join(" "),
       "data-cy": dataCy,
       children: [
         /* @__PURE__ */ jsx(Tooltip, { content: tooltip, placement: tooltipPlacement, children: /* @__PURE__ */ jsx(
@@ -59,6 +63,7 @@ function Checkbox({
             onClick: toggle,
             className: [
               styles.checkbox,
+              disabled ? "disabled" : "",
               isChecked ? styles.checked : "",
               styles[variant],
               styles[size]

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -7,6 +7,13 @@
   color: var(--color-fg-default);
 }
 
+.container.modified {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 75%, transparent);
+  border-radius: var(--border-radius-default);
+  padding: 0;
+  display: inline-flex;
+}
+
 .containerSm {
   gap: var(--spacing-xs);
 }
@@ -28,6 +35,12 @@
     box-shadow var(--transition-fast) var(--ease-standard);
 }
 
+.checkbox:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+  filter: grayscale(0.2);
+}
+
 .checkbox.sm {
   width: var(--component-size-xs);
   height: var(--component-size-xs);
@@ -54,11 +67,24 @@
   border-color: var(--color-fg-default);
 }
 
+.checkbox:disabled:hover {
+  border-color: var(--color-border-default);
+}
+
 .checked {
   background-color: var(--color-brand);
   border-color: var(--color-brand);
 }
 
+.checkbox:disabled.checked {
+  background-color: var(--color-bg-subtle);
+  border-color: var(--color-border-muted);
+}
+
+.checkbox:disabled.checked .icon {
+  color: var(--color-fg-muted);
+}
+
 .icon {
   width: var(--icon-size-md);
   height: var(--icon-size-md);

package/dist/components/forms/input/Input.module.css

@@ -191,7 +191,8 @@
 }
 
 .header:hover:not([aria-disabled='true']) {
-  background-color: color-mix(in srgb, var(--color-navbar-fg) 8%, transparent);
+  background-color: transparent;
+  border-color: var(--color-navbar-fg);
 }
 
 .header:focus-within:not([aria-disabled='true']) {