@boostdev/design-system-components 1.1.2 → 1.2.1

package/dist/native/index.cjs

@@ -737,22 +737,23 @@ function Button({
 }) {
   const { colors: colors2 } = useTheme();
   const { height, px, fontSize, radius } = sizeTokens[size];
-  const primaryColor = colors2.colorGreen;
-  const onPrimaryColor = colors2.colorOnGreen;
-  const ghostTextColor = colors2.colorGreenStrong;
+  const primaryColor = colors2.colorInteractive;
+  const onPrimaryColor = colors2.colorOnInteractive;
+  const outlineTextColor = colors2.colorInteractiveOnBg;
+  const isOutline = variant === "outline" || variant === "ghost";
   const containerStyle = {
     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 /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     import_react_native15.Pressable,
     {
@@ -855,8 +856,8 @@ function Switch({
           accessibilityLabel: label,
           accessibilityRole: "switch",
           accessibilityState: { checked: value, disabled },
-          thumbColor: value ? colors2.colorOnInteractive : colors2.colorOnBg,
-          trackColor: { false: colors2.colorBgSubtle, true: colors2.colorInteractive }
+          thumbColor: colors2.colorInteractive,
+          trackColor: { false: colors2.colorBgSubtle, true: colors2.colorBlueSubtle }
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { label })

package/dist/native/index.d.cts

@@ -141,7 +141,7 @@ interface ButtonGroupProps {
 }
 declare function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
-type ButtonVariant = 'default' | 'ghost';
+type ButtonVariant = 'default' | 'outline' | 'ghost';
 type ButtonSize = 'small' | 'medium' | 'large';
 interface ButtonProps {
     children?: ReactNode;

package/dist/native/index.d.ts

@@ -141,7 +141,7 @@ interface ButtonGroupProps {
 }
 declare function ButtonGroup({ children, variant, accessibilityLabel, style }: ButtonGroupProps): react_jsx_runtime.JSX.Element;
 
-type ButtonVariant = 'default' | 'ghost';
+type ButtonVariant = 'default' | 'outline' | 'ghost';
 type ButtonSize = 'small' | 'medium' | 'large';
 interface ButtonProps {
     children?: ReactNode;

package/dist/native/index.js

@@ -684,22 +684,23 @@ function Button({
 }) {
   const { colors: colors2 } = useTheme();
   const { height, px, fontSize, radius } = sizeTokens[size];
-  const primaryColor = colors2.colorGreen;
-  const onPrimaryColor = colors2.colorOnGreen;
-  const ghostTextColor = colors2.colorGreenStrong;
+  const primaryColor = colors2.colorInteractive;
+  const onPrimaryColor = colors2.colorOnInteractive;
+  const outlineTextColor = colors2.colorInteractiveOnBg;
+  const isOutline = variant === "outline" || variant === "ghost";
   const containerStyle = {
     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 /* @__PURE__ */ jsxs5(
     Pressable4,
     {
@@ -802,8 +803,8 @@ function Switch({
           accessibilityLabel: label,
           accessibilityRole: "switch",
           accessibilityState: { checked: value, disabled },
-          thumbColor: value ? colors2.colorOnInteractive : colors2.colorOnBg,
-          trackColor: { false: colors2.colorBgSubtle, true: colors2.colorInteractive }
+          thumbColor: colors2.colorInteractive,
+          trackColor: { false: colors2.colorBgSubtle, true: colors2.colorBlueSubtle }
         }
       ),
       /* @__PURE__ */ jsx18(Label, { label })

package/dist/web-components/{chunk-K5CE6HSB.js → chunk-2FGATTGT.js}

@@ -1,4 +1,5 @@
 import {
+  A,
   T,
   i,
   i2
@@ -31,7 +32,7 @@ var BdsSegmentedControl = class extends i2 {
       position: absolute;
       inset-block: 0.25rem;
       border-radius: calc(var(--bds-border_radius--s) - 2px);
-      background-color: var(--segmented_thumb-color, var(--bds-color_bg));
+      background-color: var(--segmented_thumb-color, var(--bds-color_interactive));
       box-shadow: var(--bds-shadow_m);
       transition: inset-inline-start var(--bds-animation_transition-duration) var(--bds-animation_easing),
                   inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
@@ -62,10 +63,11 @@ var BdsSegmentedControl = class extends i2 {
       transition: color var(--bds-animation_transition-duration) var(--bds-animation_easing);
       user-select: none;
       white-space: nowrap;
+      text-decoration: none;
     }
 
     .item.--active {
-      color: var(--segmented_color--active, var(--bds-color_interactive_on-bg));
+      color: var(--segmented_color--active, var(--bds-color_on-interactive));
     }
 
     .item.--disabled {
@@ -77,12 +79,51 @@ var BdsSegmentedControl = class extends i2 {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
     }
+
+    /* Outline variant: sliding inset-border indicator (positioned via JS like .thumb) */
+    .indicator {
+      position: absolute;
+      inset-block: 0.25rem;
+      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      pointer-events: none;
+      z-index: 2;
+      display: none;
+      transition: inset-inline-start var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    /* Outline variant — no thumb, sliding inset-border indicator, interactive active color */
+    :host([variant='outline']) .thumb {
+      display: none;
+    }
+
+    :host([variant='outline']) .item {
+      background-color: var(--segmented_item-bg, transparent);
+    }
+
+    :host([variant='outline']) .item.--active {
+      color: var(--segmented_color--active, var(--bds-color_interactive));
+      background-color: var(--segmented_item-bg--active, var(--bds-color_bg));
+    }
+
+    :host([variant='outline']) .indicator {
+      display: block;
+      box-shadow: inset 0 0 0 2px var(--bds-color_interactive);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .thumb,
+      .indicator {
+        transition: none;
+      }
+    }
   `;
   static properties = {
     name: { type: String, reflect: true },
     value: { type: String },
     options: { type: String },
-    disabled: { type: Boolean, reflect: true }
+    disabled: { type: Boolean, reflect: true },
+    variant: { type: String, reflect: true }
   };
   _internals;
   _uid = Math.random().toString(36).slice(2, 8);
@@ -93,6 +134,7 @@ var BdsSegmentedControl = class extends i2 {
     this.value = "";
     this.options = "[]";
     this.disabled = false;
+    this.variant = "outline";
   }
   get _options() {
     try {
@@ -105,21 +147,32 @@ var BdsSegmentedControl = class extends i2 {
     super.updated(changed);
     if (changed.has("value") || changed.has("options")) {
       this._internals.setFormValue?.(this.value || null);
-      this._updateThumb();
+      if (this.variant === "filled") this._updateThumb();
+      if (this.variant === "outline") this._updateIndicator();
+    }
+    if (changed.has("variant")) {
+      if (this.variant === "filled") this._updateThumb();
+      if (this.variant === "outline") this._updateIndicator();
     }
   }
-  _updateThumb() {
-    const opts = this._options;
-    const selectedIndex = Math.max(0, opts.findIndex((o) => o.value === this.value));
-    const items = this.shadowRoot?.querySelectorAll(".item");
-    const thumb = this.shadowRoot?.querySelector(".thumb");
-    if (!items || !thumb || items.length === 0) return;
+  _positionSlider(el, items, selectedIndex) {
+    if (!el || items.length === 0) return;
     const item = items[selectedIndex];
     if (!item) return;
     const controlRect = item.parentElement.getBoundingClientRect();
     const itemRect = item.getBoundingClientRect();
-    thumb.style.insetInlineStart = `${itemRect.left - controlRect.left}px`;
-    thumb.style.inlineSize = `${itemRect.width}px`;
+    el.style.insetInlineStart = `${itemRect.left - controlRect.left}px`;
+    el.style.inlineSize = `${itemRect.width}px`;
+  }
+  _updateThumb() {
+    const selectedIndex = Math.max(0, this._options.findIndex((o) => o.value === this.value));
+    const items = this.shadowRoot?.querySelectorAll(".item");
+    this._positionSlider(this.shadowRoot?.querySelector(".thumb"), items, selectedIndex);
+  }
+  _updateIndicator() {
+    const selectedIndex = Math.max(0, this._options.findIndex((o) => o.value === this.value));
+    const items = this.shadowRoot?.querySelectorAll(".item");
+    this._positionSlider(this.shadowRoot?.querySelector(".indicator"), items, selectedIndex);
   }
   formResetCallback() {
     const firstOption = this._options[0];
@@ -135,15 +188,24 @@ var BdsSegmentedControl = class extends i2 {
     return T`
       <div class="control" role="group">
         <span class="thumb" aria-hidden="true"></span>
+        <span class="indicator" aria-hidden="true"></span>
         ${opts.map((opt, i3) => {
-      const id = `bds-seg-${this._uid}-${i3}`;
       const isActive = opt.value === this.value;
       const isDisabled = this.disabled || opt.disabled;
+      const itemClass = `item ${isActive ? "--active" : ""} ${isDisabled ? "--disabled" : ""}`.trim();
+      if (opt.href) {
+        return T`
+              <a
+                class=${itemClass}
+                href=${isDisabled ? A : opt.href}
+                aria-current=${isActive ? "page" : A}
+                ?aria-disabled=${isDisabled}
+              >${opt.label}</a>
+            `;
+      }
+      const id = `bds-seg-${this._uid}-${i3}`;
       return T`
-            <label
-              class="item ${isActive ? "--active" : ""} ${isDisabled ? "--disabled" : ""}"
-              for=${id}
-            >
+            <label class=${itemClass} for=${id}>
               <input
                 id=${id}
                 type="radio"

package/dist/web-components/{chunk-O4UFI2RX.js → chunk-3REOIRDW.js}

@@ -14,9 +14,9 @@ var BdsButton = class extends i2 {
     }
 
     @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%); }
-      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%); }
-      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%); }
+      0%   { transform: scale(1);    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_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_interactive))) r g b / 0%); }
     }
 
     :host {
@@ -40,16 +40,16 @@ var BdsButton = class extends i2 {
       white-space: nowrap;
       line-height: 1;
 
-      --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);
+      --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);
     }
@@ -59,10 +59,11 @@ var BdsButton = class extends i2 {
     }
 
     /* Variants */
-    .button.ghost {
+    .button.outline,
+    .button.ghost /* deprecated — use variant="outline" */ {
       --button_bg:   transparent;
-      --button_text: var(--button_color);
-      --bdc_color:   var(--button_color);
+      --button_text: var(--button_color--on-bg);
+      --bdc_color:   var(--button_color--on-bg);
     }
 
     /* Sizes */
@@ -131,7 +132,8 @@ var BdsButton = class extends i2 {
         --bdc_color:          currentcolor;
       }
 
-      /* Ghost hover */
+      /* Outline hover */
+      .button.outline:hover,
       .button.ghost:hover {
         --button_bg:   var(--button_color);
         --button_text: var(--button_on-color);

package/dist/web-components/{chunk-5IPHEONG.js → chunk-6I2DBFQ7.js}

@@ -72,6 +72,7 @@ var BdsCollapsible = class extends i2 {
 
     .content {
       padding: var(--bds-space_m);
+      background-color: var(--collapsible_content-bg, var(--bds-color_bg));
       color: var(--collapsible_on-color, var(--bds-color_on-bg));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);

package/dist/web-components/{chunk-VM3YHGQ2.js → chunk-AJSXNDAP.js}

@@ -74,8 +74,7 @@ var BdsNotificationBanner = class extends i2 {
       border-radius: 50%;
       transition: var(--bds-animation_transition);
       --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);
     }
 
     .dismiss svg {

package/dist/web-components/{chunk-LSC4N56Q.js → chunk-BX3IPVOB.js}

@@ -87,8 +87,7 @@ var BdsAlert = class extends i2 {
       transition: var(--bds-animation_transition);
       border-radius: 50%;
       --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);
     }
 
     .dismiss svg {

package/dist/web-components/{chunk-CAPI25CU.js → chunk-DZRSJGPB.js}

@@ -27,7 +27,7 @@ var bdcCss = `
   @property --bdc-outline_shadow {
     syntax: '*';
     inherits: false;
-    initial-value: none;
+    initial-value: 0 0 0 0 transparent;
   }
 
   @layer component {
@@ -39,9 +39,9 @@ var bdcCss = `
       --bdc_color--error: var(--bds-color_error);
 
       --bdc-outline_width:  1px;
-      --bdc-outline_offset: -1px;
+      --bdc-outline_offset: -1px; /* available for consumer use; bdc borders now use inset box-shadow */
       --bdc-outline_radius: var(--bds-border_radius--xs);
-      --bdc-outline_shadow: none;
+      --bdc-outline_shadow: 0 0 0 0 transparent;
     }
   }
 `;

package/dist/web-components/{chunk-VSS5ITNE.js → chunk-EBJM3VD4.js}

@@ -27,10 +27,8 @@ var BdsTextarea = class extends i2 {
       --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(--textarea_radius, var(--bdc-outline_radius));
-      box-shadow: var(--textarea_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--textarea_shadow, var(--bdc-outline_shadow));
       background-color: var(--textarea_color_bg, var(--bds-color_bg));
       color: var(--textarea_color, var(--bds-color_on-bg));
       resize: vertical;

package/dist/web-components/{chunk-O7I63SQX.js → chunk-HHHRF2PS.js}

@@ -33,10 +33,8 @@ var BdsRadio = class extends i2 {
       --bdc_color: currentcolor;
       --bdc-outline_radius: 50%;
 
-      outline: var(--bdc-outline_width) solid var(--bdc_color);
-      outline-offset: var(--bdc-outline_offset);
       border-radius: 50%;
-      box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--radio_shadow, var(--bdc-outline_shadow));
       border: none;
       appearance: none;
       background-color: var(--radio_color_bg, var(--bds-color_bg));
@@ -46,18 +44,14 @@ var BdsRadio = class extends i2 {
     }
 
     .input:checked {
-      background-color: var(--radio_color-active, var(--bdc-color_active));
+      background: radial-gradient(
+        circle,
+        var(--radio_color-active, var(--bdc-color_active)) 35%,
+        var(--radio_color_bg, var(--bds-color_bg)) 42%
+      );
       --bdc_color: var(--radio_color-active, var(--bdc-color_active));
     }
 
-    .input:checked::after {
-      content: '';
-      position: absolute;
-      inset: 25%;
-      border-radius: 50%;
-      background-color: var(--radio_color-on-active, var(--bdc-color_on-active));
-    }
-
     .input:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);

package/dist/web-components/{chunk-OTX4COSV.js → chunk-JUKB3BUP.js}

@@ -31,10 +31,8 @@ var BdsNumberInput = class extends i2 {
       --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(--number-input_radius, var(--bdc-outline_radius));
-      box-shadow: var(--number-input_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--number-input_shadow, var(--bdc-outline_shadow));
       background-color: var(--number-input_color_bg, var(--bds-color_bg));
       color: var(--number-input_color, var(--bds-color_on-bg));
       text-align: center;
@@ -62,12 +60,13 @@ var BdsNumberInput = class extends i2 {
       display: flex;
       align-items: center;
       justify-content: center;
+      margin: 1px;
       inline-size: 2rem;
       block-size: 2rem;
       border-radius: var(--bds-border_radius--xs);
       cursor: pointer;
       flex-shrink: 0;
-      color: var(--bds-color_on-bg);
+      color: var(--bds-color_interactive);
       transition: var(--bds-animation_transition);
     }
 

package/dist/web-components/{chunk-IQGLIQSO.js → chunk-N6IMUOY4.js}

@@ -18,10 +18,8 @@ var BdsDialog = class extends i2 {
       --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);
@@ -55,8 +53,7 @@ var BdsDialog = class extends i2 {
       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;
     }
 

package/dist/web-components/{chunk-CJ5ZOO42.js → chunk-OCODKRVZ.js}

@@ -14,44 +14,65 @@ var BdsDrawer = class extends i2 {
 
     .drawer {
       position: fixed;
-      inset: 0;
+      inset-block: 0;
+      inset-inline: auto 0;
+      inline-size: min(28rem, 90vw);
+      max-inline-size: 100vw;
+      block-size: 100dvh;
+      max-block-size: 100dvh;
       margin: 0;
       padding: 0;
-      inline-size: 100%;
-      max-inline-size: 100%;
-      block-size: 100%;
-      max-block-size: 100%;
+      display: flex;
+      flex-direction: column;
+      background-color: var(--drawer_color, var(--bds-color_bg));
+      color: var(--drawer_on-color, var(--bds-color_on-bg));
       border: none;
-      background: transparent;
+      box-shadow: var(--bds-shadow_xl);
       overflow: hidden;
+      translate: 100% 0;
+      transition:
+        translate var(--bds-animation_transition-duration) var(--bds-animation_easing),
+        display var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete,
+        overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) allow-discrete;
+    }
+
+    :host([side='left']) .drawer {
+      inset-inline: 0 auto;
+      translate: -100% 0;
+    }
+
+    .drawer[open] {
+      translate: 0 0;
+    }
+
+    @starting-style {
+      .drawer[open] {
+        translate: 100% 0;
+      }
+
+      :host([side='left']) .drawer[open] {
+        translate: -100% 0;
+      }
     }
 
     .drawer::backdrop {
       background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
       backdrop-filter: blur(3px);
+      opacity: 0;
+      transition:
+        opacity var(--bds-animation_transition-duration) var(--bds-animation_easing),
+        display var(--bds-animation_transition-duration) allow-discrete,
+        overlay var(--bds-animation_transition-duration) allow-discrete;
     }
 
-    .panel {
-      position: absolute;
-      inset-block: 0;
-      display: flex;
-      flex-direction: column;
-      inline-size: min(28rem, 90vw);
-      block-size: 100%;
-      background-color: var(--drawer_color, var(--bds-color_bg));
-      color: var(--drawer_on-color, var(--bds-color_on-bg));
-      box-shadow: var(--bds-shadow_xl);
-      overflow: hidden;
-      transition: var(--bds-animation_transition);
-    }
-
-    :host([side='right']) .panel {
-      inset-inline-end: 0;
+    .drawer[open]::backdrop {
+      opacity: 1;
     }
 
-    :host([side='left']) .panel,
-    :host(:not([side])) .panel {
-      inset-inline-start: 0;
+    @starting-style {
+      .drawer[open]::backdrop {
+        opacity: 0;
+      }
     }
 
     .header {
@@ -105,7 +126,8 @@ var BdsDrawer = class extends i2 {
     }
 
     @media (prefers-reduced-motion: reduce) {
-      .panel {
+      .drawer,
+      .drawer::backdrop {
         transition: none;
       }
     }
@@ -165,7 +187,11 @@ var BdsDrawer = class extends i2 {
     this.dispatchEvent(new CustomEvent("bds-close", { bubbles: true, composed: true }));
   }
   _handleBackdropClick(e) {
-    if (e.target === this._dialog) this._closeDrawer();
+    const dialog = this._dialog;
+    if (!dialog) return;
+    const rect = dialog.getBoundingClientRect();
+    const outside = e.clientX < rect.left || e.clientX > rect.right || e.clientY < rect.top || e.clientY > rect.bottom;
+    if (outside) this._closeDrawer();
   }
   _handleCancel(e) {
     e.preventDefault();
@@ -200,23 +226,21 @@ var BdsDrawer = class extends i2 {
         @cancel=${this._handleCancel}
         @keydown=${this._handleKeydown}
       >
-        <div class="panel">
-          <div class="header">
-            <span class="title"><slot name="title"></slot></span>
-            <button
-              type="button"
-              class="close-button"
-              aria-label="Close drawer"
-              @click=${this._closeDrawer}
-            >
-              <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-          <div class="body">
-            <slot></slot>
-          </div>
+        <div class="header">
+          <span class="title"><slot name="title"></slot></span>
+          <button
+            type="button"
+            class="close-button"
+            aria-label="Close drawer"
+            @click=${this._closeDrawer}
+          >
+            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+        <div class="body">
+          <slot></slot>
         </div>
       </dialog>
     `;

package/dist/web-components/{chunk-QDRH46TF.js → chunk-QLZ2362S.js}

@@ -32,10 +32,8 @@ var BdsCombobox = class extends i2 {
       --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(--combobox_radius, var(--bdc-outline_radius));
-      box-shadow: var(--combobox_shadow, var(--bdc-outline_shadow));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_shadow, var(--bdc-outline_shadow));
       background-color: var(--combobox_color_bg, var(--bds-color_bg));
       color: var(--combobox_color, var(--bds-color_on-bg));
       box-sizing: border-box;

package/dist/web-components/{chunk-IK3PTFZ4.js → chunk-T6AETZRP.js}

@@ -33,10 +33,8 @@ var BdsCheckbox = class extends i2 {
       --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));
       border: none;
       appearance: none;
       background-color: var(--checkbox_color_bg, var(--bds-color_bg));