@boostdev/design-system-components 1.1.2 → 1.2.0

package/dist/web-components/index.js

@@ -1,36 +1,36 @@
 import {
   BdsSwitch
-} from "./chunk-A67LCT7C.js";
+} from "./chunk-XNA6WTXG.js";
 import {
   BdsTextarea
-} from "./chunk-VSS5ITNE.js";
+} from "./chunk-EBJM3VD4.js";
 import {
   BdsCheckbox
-} from "./chunk-IK3PTFZ4.js";
+} from "./chunk-T6AETZRP.js";
 import {
   BdsCombobox
-} from "./chunk-QDRH46TF.js";
+} from "./chunk-QLZ2362S.js";
 import {
   BdsFileInput
 } from "./chunk-PY62FTRW.js";
 import {
   BdsNumberInput
-} from "./chunk-OTX4COSV.js";
+} from "./chunk-JUKB3BUP.js";
 import {
   BdsRadio
-} from "./chunk-O7I63SQX.js";
+} from "./chunk-HHHRF2PS.js";
 import {
   BdsSegmentedControl
-} from "./chunk-K5CE6HSB.js";
+} from "./chunk-6MH5UWUD.js";
 import {
   BdsSelect
-} from "./chunk-4BX6AWXX.js";
+} from "./chunk-X3FKVHLK.js";
 import {
   BdsSlider
 } from "./chunk-7FMR53BW.js";
 import {
   BdsDrawer
-} from "./chunk-CJ5ZOO42.js";
+} from "./chunk-DI46Q2EA.js";
 import {
   BdsPopover
 } from "./chunk-ECW3HHWA.js";
@@ -63,19 +63,19 @@ import {
 } from "./chunk-SOQQ7RVJ.js";
 import {
   BdsAccordion
-} from "./chunk-6T3RKUKG.js";
+} from "./chunk-ZTC6GRP7.js";
 import {
   BdsAccordionItem
 } from "./chunk-UFFCKVZE.js";
 import {
   BdsButton
-} from "./chunk-O4UFI2RX.js";
+} from "./chunk-3REOIRDW.js";
 import {
   BdsCollapsible
 } from "./chunk-5IPHEONG.js";
 import {
   BdsDialog
-} from "./chunk-IQGLIQSO.js";
+} from "./chunk-N6IMUOY4.js";
 import {
   BdsIconWrapper
 } from "./chunk-5TFWOPLH.js";
@@ -87,7 +87,7 @@ import {
 } from "./chunk-5R6IFELV.js";
 import {
   BdsNotificationBanner
-} from "./chunk-VM3YHGQ2.js";
+} from "./chunk-AJSXNDAP.js";
 import {
   BdsProgress
 } from "./chunk-ITHLKR7Q.js";
@@ -101,10 +101,10 @@ import {
   BdsSectionHeader
 } from "./chunk-Y4MAXTMA.js";
 import "./chunk-QPOKHLMQ.js";
-import "./chunk-CAPI25CU.js";
+import "./chunk-DZRSJGPB.js";
 import {
   BdsAlert
-} from "./chunk-LSC4N56Q.js";
+} from "./chunk-BX3IPVOB.js";
 import {
   BdsAvatar
 } from "./chunk-57TRNCWQ.js";
@@ -116,7 +116,7 @@ import {
 } from "./chunk-Q4T5BJT6.js";
 import {
   BdsCard
-} from "./chunk-XIENXR7H.js";
+} from "./chunk-YRXCVKHV.js";
 import {
   BdsDescriptionList
 } from "./chunk-AGKJTMJI.js";

package/dist/web-components/interaction/bds-accordion.js

@@ -1,6 +1,6 @@
 import {
   BdsAccordion
-} from "../chunk-6T3RKUKG.js";
+} from "../chunk-ZTC6GRP7.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAccordion

package/dist/web-components/interaction/bds-button.d.ts

@@ -1,13 +1,13 @@
 import * as lit from 'lit';
 import { LitElement } from 'lit';
 
-type ButtonVariant = 'default' | 'ghost';
+type ButtonVariant = 'default' | 'outline' | 'ghost';
 type ButtonSize = 'small' | 'medium' | 'large';
 /**
  * `<bds-button>` — framework-agnostic Button custom element.
  *
  * Attributes:
- *   variant   — "default" (filled, default) | "ghost" (transparent + outlined)
+ *   variant   — "default" (filled, default) | "outline" (transparent + outlined) | "ghost" (deprecated alias for "outline")
  *   size      — "small" | "medium" (default) | "large"
  *   disabled  — boolean
  *   href      — renders an <a> tag instead of <button>

package/dist/web-components/interaction/bds-button.js

@@ -1,6 +1,6 @@
 import {
   BdsButton
-} from "../chunk-O4UFI2RX.js";
+} from "../chunk-3REOIRDW.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsButton

package/dist/web-components/interaction/bds-dialog.js

@@ -1,6 +1,6 @@
 import {
   BdsDialog
-} from "../chunk-IQGLIQSO.js";
+} from "../chunk-N6IMUOY4.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDialog

package/dist/web-components/interaction/bds-drawer.js

@@ -1,6 +1,6 @@
 import {
   BdsDrawer
-} from "../chunk-CJ5ZOO42.js";
+} from "../chunk-DI46Q2EA.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsDrawer

package/dist/web-components/interaction/form/bds-checkbox.js

@@ -1,6 +1,6 @@
 import {
   BdsCheckbox
-} from "../../chunk-IK3PTFZ4.js";
+} from "../../chunk-T6AETZRP.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCheckbox

package/dist/web-components/interaction/form/bds-combobox.js

@@ -1,6 +1,6 @@
 import {
   BdsCombobox
-} from "../../chunk-QDRH46TF.js";
+} from "../../chunk-QLZ2362S.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsCombobox

package/dist/web-components/interaction/form/bds-number-input.js

@@ -1,6 +1,6 @@
 import {
   BdsNumberInput
-} from "../../chunk-OTX4COSV.js";
+} from "../../chunk-JUKB3BUP.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsNumberInput

package/dist/web-components/interaction/form/bds-radio.js

@@ -1,6 +1,6 @@
 import {
   BdsRadio
-} from "../../chunk-O7I63SQX.js";
+} from "../../chunk-HHHRF2PS.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsRadio

package/dist/web-components/interaction/form/bds-segmented-control.d.ts

@@ -5,22 +5,25 @@ interface SegmentedOption {
     value: string;
     label: string;
     disabled?: boolean;
+    /** When set, renders the option as an <a> link instead of a radio button */
+    href?: string;
 }
 /**
  * `<bds-segmented-control>` — form-associated Segmented Control custom element.
  *
- * Renders a group of radio buttons styled as a unified segmented control.
+ * Renders a group of radio buttons (or links) styled as a unified segmented control.
  * Passes a JSON `options` attribute because reactive slot content can't be
  * easily converted to radio groups.
  *
  * Attributes:
  *   name     — form field name (also used for the internal radio group)
  *   value    — currently selected value
- *   options  — JSON array of `{ value, label, disabled? }` option objects
+ *   options  — JSON array of `{ value, label, disabled?, href? }` option objects
  *   disabled — boolean; disables all options
+ *   variant  — "outline" (inset border on active item, default) | "filled" (sliding thumb)
  *
  * Events:
- *   change — fired when a new segment is selected
+ *   change — fired when a new segment is selected (radio mode only)
  *
  * @example
  * <bds-segmented-control
@@ -28,6 +31,13 @@ interface SegmentedOption {
  *   value="list"
  *   options='[{"value":"list","label":"List"},{"value":"grid","label":"Grid"}]'
  * ></bds-segmented-control>
+ *
+ * @example Outline variant with links
+ * <bds-segmented-control
+ *   variant="outline"
+ *   value="home"
+ *   options='[{"value":"home","label":"Home","href":"/"},{"value":"about","label":"About","href":"/about"}]'
+ * ></bds-segmented-control>
  */
 declare class BdsSegmentedControl extends LitElement {
     static formAssociated: boolean;
@@ -47,17 +57,24 @@ declare class BdsSegmentedControl extends LitElement {
             type: BooleanConstructor;
             reflect: boolean;
         };
+        variant: {
+            type: StringConstructor;
+            reflect: boolean;
+        };
     };
     name: string;
     value: string;
     options: string;
     disabled: boolean;
+    variant: 'outline' | 'filled';
     private _internals;
     private readonly _uid;
     constructor();
     private get _options();
     updated(changed: Map<string, unknown>): void;
+    private _positionSlider;
     private _updateThumb;
+    private _updateIndicator;
     formResetCallback(): void;
     private _handleChange;
     render(): lit.TemplateResult<1>;

package/dist/web-components/interaction/form/bds-segmented-control.js

@@ -1,6 +1,6 @@
 import {
   BdsSegmentedControl
-} from "../../chunk-K5CE6HSB.js";
+} from "../../chunk-6MH5UWUD.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSegmentedControl

package/dist/web-components/interaction/form/bds-select.js

@@ -1,6 +1,6 @@
 import {
   BdsSelect
-} from "../../chunk-4BX6AWXX.js";
+} from "../../chunk-X3FKVHLK.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSelect

package/dist/web-components/interaction/form/bds-switch.js

@@ -1,6 +1,6 @@
 import {
   BdsSwitch
-} from "../../chunk-A67LCT7C.js";
+} from "../../chunk-XNA6WTXG.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsSwitch

package/dist/web-components/interaction/form/bds-textarea.js

@@ -1,6 +1,6 @@
 import {
   BdsTextarea
-} from "../../chunk-VSS5ITNE.js";
+} from "../../chunk-EBJM3VD4.js";
 import "../../chunk-LGEZYFUU.js";
 export {
   BdsTextarea

package/dist/web-components/ui/bds-alert.js

@@ -1,6 +1,6 @@
 import {
   BdsAlert
-} from "../chunk-LSC4N56Q.js";
+} from "../chunk-BX3IPVOB.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsAlert

package/dist/web-components/ui/bds-card.js

@@ -1,6 +1,6 @@
 import {
   BdsCard
-} from "../chunk-XIENXR7H.js";
+} from "../chunk-YRXCVKHV.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsCard

package/dist/web-components/ui/bds-notification-banner.js

@@ -1,6 +1,6 @@
 import {
   BdsNotificationBanner
-} from "../chunk-VM3YHGQ2.js";
+} from "../chunk-AJSXNDAP.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsNotificationBanner

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@boostdev/design-system-components",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "BoostDev React component library: accessible, token-driven components built on @boostdev/design-system-foundation",
   "keywords": [
     "React",
@@ -271,7 +271,7 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint src",
     "lint:css": "stylelint \"src/**/*.css\"",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006 --no-manager-cache",
     "build-storybook": "storybook build",
     "test": "vitest run",
     "test:watch": "vitest",

package/src/components/interaction/Button/Button.module.css

@@ -13,17 +13,17 @@
 @keyframes pulse {
   0% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 50%);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 50%);
   }
 
   70% {
     transform: scale(1.01);
-    box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%);
+    box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
   }
 
   100% {
     transform: scale(1);
-    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%);
+    box-shadow: 0 0 0 0 rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_interactive))) r g b / 0%);
   }
 }
 
@@ -47,27 +47,27 @@
     line-height: 1;
 
     /* Colour model: override --button_color + --button_on-color to re-theme */
-    --button_color:        var(--bds-color_green);
-    --button_on-color:     var(--bds-color_on-green);
+    --button_color:        var(--bds-color_interactive);
+    --button_on-color:     var(--bds-color_on-interactive);
 
     /* Text-safe variant of --button_color for use on page background (ghost text/border) */
-    --button_color--on-bg: var(--bds-color_green--strong);
+    --button_color--on-bg: var(--bds-color_interactive_on-bg);
 
     background-color: var(--button_bg, var(--button_color));
     color: var(--button_text, var(--button_on-color));
     border: var(--button_border, none);
     --bdc_color: transparent;
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     transition: var(--bds-animation_transition), --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   /* Default: filled with --button_color, no visible border */
   .button.--default { /* inherits base — no overrides needed */ }
 
-  /* Ghost: transparent background, border and text use text-safe --button_color--on-bg */
-  .button.--ghost {
+  /* Outline: transparent background, border and text use text-safe --button_color--on-bg */
+  .button.--outline,
+  .button.--ghost /* @deprecated — use variant="outline" */ {
     --button_bg:   transparent;
     --button_text: var(--button_color--on-bg);
     --bdc_color:   var(--button_color--on-bg);
@@ -150,8 +150,9 @@
     }
   }
 
-  /* Ghost hover: fills with --button_color */
+  /* Outline hover: fills with --button_color */
   @media (hover: hover) and (pointer: fine) {
+    .button.--outline:hover,
     .button.--ghost:hover {
       --button_bg:   var(--button_color);
       --button_text: var(--button_on-color);

package/src/components/interaction/Button/Button.native.tsx

@@ -3,7 +3,7 @@ import { StyleSheet, Pressable, Text, View, StyleProp, ViewStyle } from 'react-n
 import { spacing, font, border } from '../../../native/tokens';
 import { useTheme } from '../../../native/ThemeContext';
 
-type ButtonVariant = 'default' | 'ghost';
+type ButtonVariant = 'default' | 'outline' | 'ghost'; // 'ghost' is deprecated, use 'outline'
 type ButtonSize = 'small' | 'medium' | 'large';
 
 export interface ButtonProps {
@@ -53,26 +53,27 @@ export function Button({
   const { colors } = useTheme();
   const { height, px, fontSize, radius } = sizeTokens[size];
 
-  // Color model: filled = green bg, ghost = transparent bg + darker green border/text
-  const primaryColor = colors.colorGreen;
-  const onPrimaryColor = colors.colorOnGreen;
-  // Ghost uses colorGreenStrong for text/border — colorGreen (#00c950) fails 3:1 on white (2.15:1)
-  const ghostTextColor = colors.colorGreenStrong;
+  // Color model: filled = interactive bg, outline = transparent bg + interactive_on-bg border/text
+  const primaryColor = colors.colorInteractive;
+  const onPrimaryColor = colors.colorOnInteractive;
+  // Outline uses colorInteractiveOnBg for text/border — colorInteractive may not meet 3:1 on white
+  const outlineTextColor = colors.colorInteractiveOnBg;
 
+  const isOutline = variant === 'outline' || variant === 'ghost';
   const containerStyle: ViewStyle = {
     height,
     paddingHorizontal: px,
     borderRadius: radius,
     opacity: disabled ? 0.4 : 1,
     ...(variant === 'default' && { backgroundColor: primaryColor }),
-    ...(variant === 'ghost' && {
+    ...(isOutline && {
       backgroundColor: 'transparent',
       borderWidth: 1,
-      borderColor: ghostTextColor,
+      borderColor: outlineTextColor,
     }),
   };
 
-  const textColor = variant === 'default' ? onPrimaryColor : ghostTextColor;
+  const textColor = variant === 'default' ? onPrimaryColor : outlineTextColor;
 
   return (
     <Pressable

package/src/components/interaction/Button/Button.tsx

@@ -5,7 +5,7 @@ import type { WithClassName } from '../../../types';
 
 export interface ButtonProps extends WithClassName, ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> {
   href?: string;
-  variant?: 'default' | 'ghost';
+  variant?: 'default' | 'outline' | /** @deprecated Use "outline" instead */ 'ghost';
   type?: 'button' | 'submit' | 'reset';
   size?: 'small' | 'medium' | 'large';
   iconStart?: ReactNode;

package/src/components/interaction/Command/Command.module.css

@@ -21,15 +21,13 @@
     background-color: var(--command_color, var(--bds-color_bg));
     color: var(--command_on-color, var(--bds-color_on-bg));
     border-radius: var(--bds-border_radius--m);
-    box-shadow: var(--command_shadow, var(--bds-shadow_xl));
     overflow: hidden;
     max-block-size: 70vh;
     border: var(--command_border, none);
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--m);
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--command_shadow, var(--bds-shadow_xl));
   }
 
   .searchRow {
@@ -73,8 +71,7 @@
     --bdc_color: currentcolor;
 
     border: none;
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
 
   .list {
@@ -132,8 +129,7 @@
     --bdc_color: currentcolor;
 
     border: none;
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
   }
 
   .empty {

package/src/components/interaction/Dialog/Dialog.module.css

@@ -5,10 +5,8 @@
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--m);
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
     border-radius: var(--dialog_radius, var(--bdc-outline_radius));
-    box-shadow: var(--dialog_shadow, var(--bdc-outline_shadow));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dialog_shadow, var(--bdc-outline_shadow));
     background-color: var(--dialog_color ,var(--bds-color_grey--subtle));
     color: var(--dialog_on-color, var(--bds-color_on-grey--subtle));
     padding: var(--bds-space_l);
@@ -41,11 +39,15 @@
     border: var(--dialog_close-border, none);
     --bdc_color: currentcolor;
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     cursor: pointer;
   }
 
+  .closeButton:focus-visible {
+    outline: var(--bds-outline_default);
+    outline-offset: var(--bds-outline_offset);
+  }
+
   .closeButton svg {
     inline-size: 1.25em;
     block-size: 1.25em;

package/src/components/interaction/Drawer/Drawer.module.css

@@ -11,16 +11,32 @@
     border: none;
     background: transparent;
     overflow: hidden;
+    transition:
+      display var(--bds-animation_transition-duration) allow-discrete,
+      overlay var(--bds-animation_transition-duration) allow-discrete;
   }
 
   .drawer::backdrop {
     background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
     backdrop-filter: blur(3px);
+    transition:
+      display var(--bds-animation_transition-duration) allow-discrete,
+      overlay var(--bds-animation_transition-duration) allow-discrete,
+      background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+      backdrop-filter var(--bds-animation_transition-duration) var(--bds-animation_easing);
+  }
+
+  @starting-style {
+    .drawer[open]::backdrop {
+      background-color: transparent;
+      backdrop-filter: blur(0);
+    }
   }
 
   .panel {
     position: absolute;
     inset-block: 0;
+    inset-inline: auto;
     display: flex;
     flex-direction: column;
     inline-size: min(28rem, 90vw);
@@ -29,15 +45,40 @@
     color: var(--drawer_on-color, var(--bds-color_on-bg));
     box-shadow: var(--bds-shadow_xl);
     overflow: hidden;
-    transition: var(--bds-animation_transition);
+    translate: 100% 0;
+    transition: translate var(--bds-animation_transition-duration) var(--bds-animation_easing);
   }
 
   .--side_right .panel {
     inset-inline-end: 0;
+    translate: 100% 0;
   }
 
   .--side_left .panel {
     inset-inline-start: 0;
+    translate: -100% 0;
+  }
+
+  .drawer[open] .panel {
+    translate: 0 0;
+  }
+
+  .drawer[open].--side_right .panel {
+    animation: bdc-drawer-slide-right var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+  }
+
+  .drawer[open].--side_left .panel {
+    animation: bdc-drawer-slide-left var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+  }
+
+  @keyframes bdc-drawer-slide-right {
+    from { translate: 100% 0; }
+    to { translate: 0 0; }
+  }
+
+  @keyframes bdc-drawer-slide-left {
+    from { translate: -100% 0; }
+    to { translate: 0 0; }
   }
 
   .header {
@@ -86,8 +127,15 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
+    .drawer,
+    .drawer::backdrop,
     .panel {
       transition: none;
     }
+
+    .drawer[open].--side_right .panel,
+    .drawer[open].--side_left .panel {
+      animation: none;
+    }
   }
 }

package/src/components/interaction/DropdownMenu/DropdownMenu.module.css

@@ -14,12 +14,10 @@
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--s);
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
     border-radius: var(--dropdown_radius, var(--bdc-outline_radius));
     background-color: var(--dropdown_color, var(--bds-color_bg));
     color: var(--dropdown_on-color, var(--bds-color_on-bg));
-    box-shadow: var(--dropdown_shadow, var(--bds-shadow_m));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--dropdown_shadow, var(--bds-shadow_m));
     list-style: none;
     margin: 0;
   }

package/src/components/interaction/Popover/Popover.module.css

@@ -25,11 +25,9 @@
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--s);
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
     border-radius: var(--popover_radius, var(--bdc-outline_radius));
     background-color: var(--popover_color, var(--bds-color_bg));
-    box-shadow: var(--popover_shadow, var(--bds-shadow_m));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--popover_shadow, var(--bds-shadow_m));
     color: var(--popover_on-color, var(--bds-color_on-bg));
     font-size: var(--bds-font_size--body);
   }

package/src/components/interaction/form/Checkbox/Checkbox.module.css

@@ -21,10 +21,8 @@
     --bdc_color: currentcolor;
     --bdc-outline_radius: var(--bds-border_radius--xs);
 
-    outline: var(--bdc-outline_width) solid var(--bdc_color);
-    outline-offset: var(--bdc-outline_offset);
     border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
-    box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--checkbox_shadow, var(--bdc-outline_shadow));
     appearance: none;
     background-color: var(--checkbox_color_bg, var(--bds-color_bg));
     cursor: pointer;