@boostdev/design-system-components 2.7.0 → 2.8.0

package/dist/web-components/{chunk-7FMR53BW.js → chunk-7YURXHTS.js}

@@ -24,44 +24,64 @@ var BdsSlider = class extends i2 {
     }
 
     .input {
+      --slider_track-height: var(--bds-space_xxs);
+      --slider_thumb-size: calc(var(--bds-space_s) * 2);
+
+      color: var(--slider_color, var(--bds-color_on-bg));
       inline-size: 100%;
       appearance: none;
-      block-size: 0.25rem;
-      border-radius: 999px;
+      block-size: var(--slider_track-height);
+      border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
       background: linear-gradient(
         to right,
-        var(--slider_fill-color, var(--bds-color_interactive)) var(--slider_fill, 0%),
-        var(--slider_track-color, var(--bds-color_bg--subtle)) var(--slider_fill, 0%)
+        var(--slider_color-active, var(--bdc-color_active)) 0%,
+        var(--slider_color-active, var(--bdc-color_active)) var(--slider_fill, 0%),
+        var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill, 0%),
+        var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%
       );
       outline: none;
       cursor: pointer;
+      transition: var(--bds-animation_transition);
     }
 
     .input::-webkit-slider-thumb {
       appearance: none;
-      inline-size: 1.25rem;
-      block-size: 1.25rem;
-      border-radius: 50%;
-      background-color: var(--slider_thumb-color, var(--bds-color_interactive));
-      box-shadow: var(--bds-shadow_m);
+      inline-size: var(--slider_thumb-size);
+      block-size: var(--slider_thumb-size);
+      border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
+      background-color: var(--slider_color-active, var(--bdc-color_active));
+      box-shadow: var(--bds-shadow_s);
       cursor: pointer;
       transition: var(--bds-animation_transition);
     }
 
     .input::-moz-range-thumb {
-      inline-size: 1.25rem;
-      block-size: 1.25rem;
-      border-radius: 50%;
+      inline-size: var(--slider_thumb-size);
+      block-size: var(--slider_thumb-size);
       border: none;
-      background-color: var(--slider_thumb-color, var(--bds-color_interactive));
-      box-shadow: var(--bds-shadow_m);
+      border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
+      background-color: var(--slider_color-active, var(--bdc-color_active));
+      box-shadow: var(--bds-shadow_s);
       cursor: pointer;
     }
 
+    .input:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
     .input:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
-      border-radius: 999px;
+      border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .input,
+      .input::-webkit-slider-thumb,
+      .input::-moz-range-thumb {
+        transition: none;
+      }
     }
   `;
   static properties = {

package/dist/web-components/{chunk-5TFWOPLH.js → chunk-A3RLT3AS.js}

@@ -15,14 +15,14 @@ var BdsIconWrapper = class extends i2 {
       inline-size: 2em;
       block-size: 2em;
       font-size: 3em;
-      border-radius: 50%;
+      border-radius: var(--icon-wrapper-radius, var(--bds-border_radius--circle));
       display: flex;
       align-items: center;
       justify-content: center;
       margin: var(--bds-space_l) auto var(--bds-space_m);
       background: var(--icon-wrapper-color, var(--bds-color_bg));
-      color: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
-      fill: var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg));
+      color: var(--icon-wrapper_on-color, var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg)));
+      fill: currentcolor;
       position: relative;
       transition: var(--bds-animation_transition);
     }

package/dist/web-components/{chunk-X3FKVHLK.js → chunk-ARMKC4BQ.js}

@@ -29,8 +29,8 @@ var BdsSelect = class extends i2 {
       padding: var(--bds-space_s);
       padding-inline-end: var(--bds-space_xl);
       border: none;
-      --bdc_color: currentcolor;
-      --bdc-outline_radius: var(--bds-border_radius--xs);
+      --bdc_color: var(--select_border-color, currentcolor);
+      --bdc-outline_radius: var(--bds-border_radius--full);
 
       border-radius: var(--select_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--select_shadow, var(--bdc-outline_shadow));

package/dist/web-components/{chunk-ZTC6GRP7.js → chunk-BKIHQYJR.js}

@@ -9,6 +9,7 @@ var BdsAccordion = class extends i2 {
   static styles = i`
     :host {
       display: block;
+      border: var(--accordion_border, none);
       --bdc_color: var(--bds-color_bg--subtle);
       --bdc-outline_radius: var(--bds-border_radius--s);
       border-radius: var(--accordion_radius, var(--bdc-outline_radius));

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

@@ -24,8 +24,8 @@ var BdsTextarea = class extends i2 {
       line-height: var(--bds-font_line-height--body);
       padding: var(--bds-space_s);
       border: none;
-      --bdc_color: currentcolor;
-      --bdc-outline_radius: var(--bds-border_radius--xs);
+      --bdc_color: var(--textarea_border-color, currentcolor);
+      --bdc-outline_radius: var(--bdc-outline_radius--l);
 
       border-radius: var(--textarea_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--textarea_shadow, var(--bdc-outline_shadow));

package/dist/web-components/{chunk-57TRNCWQ.js → chunk-FSZRP43R.js}

@@ -14,7 +14,7 @@ var BdsAvatar = class extends i2 {
       justify-content: center;
       inline-size: var(--avatar_size, 3em);
       block-size: var(--avatar_size, 3em);
-      border-radius: 50%;
+      border-radius: var(--avatar_radius, var(--bds-border_radius--circle));
       overflow: hidden;
       flex-shrink: 0;
     }

package/dist/web-components/{chunk-UFFCKVZE.js → chunk-FXURM6D5.js}

@@ -49,7 +49,7 @@ var BdsAccordionItem = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .trigger:not(:disabled):hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--accordion_trigger-bg--hover, var(--bds-color_bg--subtle));
       }
     }
 

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

@@ -30,10 +30,10 @@ var BdsRadio = class extends i2 {
       inline-size: var(--inputSize);
       block-size: var(--inputSize);
       flex-shrink: 0;
-      --bdc_color: currentcolor;
-      --bdc-outline_radius: 50%;
+      --bdc_color: var(--radio_border-color, currentcolor);
+      --bdc-outline_radius: var(--bds-border_radius--circle);
 
-      border-radius: 50%;
+      border-radius: var(--radio_radius, var(--bds-border_radius--circle));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--radio_shadow, var(--bdc-outline_shadow));
       border: none;
       appearance: none;

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

@@ -96,7 +96,7 @@ var BdsDrawer = class extends i2 {
       justify-content: center;
       inline-size: 2rem;
       block-size: 2rem;
-      border-radius: 50%;
+      border-radius: var(--drawer_close-radius, var(--bds-border_radius--circle));
       cursor: pointer;
       transition: var(--bds-animation_transition);
     }
@@ -113,7 +113,7 @@ var BdsDrawer = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .close-button:hover {
-        background-color: var(--bds-color_bg--subtle);
+        background-color: var(--drawer_close-bg--hover, var(--bds-color_bg--subtle));
       }
     }
 

package/dist/web-components/{chunk-ZNKEZIYE.js → chunk-NCPQ7AF3.js}

@@ -89,7 +89,8 @@ var BdsAlert = class extends i2 {
       cursor: pointer;
       color: currentcolor;
       transition: var(--bds-animation_transition);
-      border-radius: 50%;
+      border: var(--alert_dismiss-border, none);
+      border-radius: var(--alert_dismiss-radius, var(--bds-border_radius--circle));
       --bdc_color: currentcolor;
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
@@ -106,7 +107,7 @@ var BdsAlert = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .dismiss:hover {
-        opacity: 0.7;
+        opacity: var(--alert_dismiss-opacity--hover, 0.7);
       }
     }
   `;

package/dist/web-components/chunk-OF6FFGOT.js

@@ -0,0 +1,167 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-switch.ts
+var BdsSwitch = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--bds-space_xs);
+      cursor: pointer;
+      font-size: var(--bds-font_size--body);
+      font-family: var(--bds-font_family--body);
+      color: var(--switch_color, var(--bds-color_on-bg));
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+
+    label {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--bds-space_xs);
+      cursor: pointer;
+    }
+
+    .input {
+      position: absolute;
+      inset: 0;
+      appearance: none;
+      opacity: 0;
+      inline-size: 100%;
+      block-size: 100%;
+      margin: 0;
+      cursor: pointer;
+      z-index: 1;
+    }
+
+    .input:disabled {
+      cursor: not-allowed;
+    }
+
+    .track {
+      --switch_thumb-size: 1.25em;
+      --switch_track-pad: var(--bds-space_xxxs);
+      --switch_track-height: calc(var(--switch_thumb-size) + var(--switch_track-pad) * 2);
+      --switch_track-width: calc(var(--switch_thumb-size) * 2 + var(--switch_track-pad) * 2);
+
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      inline-size: var(--switch_track-width);
+      block-size: var(--switch_track-height);
+      border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
+      background-color: var(--switch_track-bg, var(--bds-color_grey--subtle));
+      padding-inline: var(--switch_track-pad);
+      --bdc_color: var(--switch_thumb-bg, var(--bds-color_interactive));
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--switch_shadow, var(--bdc-outline_shadow));
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+      flex-shrink: 0;
+      pointer-events: none;
+    }
+
+    .thumb {
+      display: block;
+      inline-size: var(--switch_thumb-size);
+      block-size: var(--switch_thumb-size);
+      border-radius: var(--switch_thumb-radius, var(--bds-border_radius--circle));
+      background-color: var(--switch_thumb-bg, var(--bds-color_interactive));
+      box-shadow: var(--bds-shadow_s);
+      transition: var(--bds-animation_transition);
+      transform: translateX(0);
+    }
+
+    .input:checked + .track {
+      background-color: var(--switch_track-bg--active, var(--bdc-color_active--subtle));
+      --bdc_color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
+    }
+
+    .input:checked + .track .thumb {
+      background-color: var(--switch_thumb-bg--active, var(--bds-color_interactive));
+      transform: translateX(var(--switch_thumb-size));
+    }
+
+    .input:focus-visible + .track {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      border-radius: var(--switch_track-radius, var(--bds-border_radius--full));
+    }
+
+    .input:disabled + .track {
+      opacity: 0.4;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .track,
+      .thumb {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String },
+    checked: { type: Boolean, reflect: true },
+    required: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "on";
+    this.checked = false;
+    this.required = false;
+    this.disabled = false;
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("checked") || changed.has("value")) {
+      this._internals.setFormValue?.(this.checked ? this.value : null);
+    }
+  }
+  formResetCallback() {
+    this.checked = false;
+    this._internals.setFormValue?.(null);
+  }
+  _handleChange(e) {
+    this.checked = e.target.checked;
+  }
+  render() {
+    const id = `bds-switch-${this._uid}`;
+    return T`
+      <label for=${id}>
+        <input
+          id=${id}
+          type="checkbox"
+          role="switch"
+          class="input"
+          .checked=${this.checked}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+        />
+        <span class="track">
+          <span class="thumb"></span>
+        </span>
+        <slot></slot>
+      </label>
+    `;
+  }
+};
+customElements.define("bds-switch", BdsSwitch);
+
+export {
+  BdsSwitch
+};

package/dist/web-components/{chunk-GER5UJOF.js → chunk-ORC56MDY.js}

@@ -31,14 +31,15 @@ var BdsButton = class extends i2 {
       padding-inline: var(--bds-space_l);
       display: inline-flex;
       gap: var(--bds-space_xs);
-      border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
+      border-radius: var(--button_radius, var(--bds-border_radius--full));
       align-items: center;
       cursor: pointer;
       justify-content: center;
-      height: var(--button_height, 3em);
+      block-size: var(--button_height, 3em);
       font-size: var(--button_font-size, inherit);
       white-space: nowrap;
       line-height: 1;
+      scroll-padding-block-end: var(--bds-space_l);
 
       /* Identity tokens — override --button_color + --button_on-color to re-theme */
       --button_color:        var(--bds-color_interactive);
@@ -77,7 +78,6 @@ var BdsButton = class extends i2 {
     .button.small {
       --button_height:    2.25em;
       --button_font-size: var(--bds-font_size--body--s);
-      --button_border_radius--s: var(--bds-border_radius--xs);
       padding-inline: var(--bds-space_m);
     }
 
@@ -88,7 +88,6 @@ var BdsButton = class extends i2 {
 
     .button.large {
       --button_font-size: var(--bds-font_size--heading-3);
-      --button_border_radius--s: var(--bds-border_radius--m);
       padding-inline: var(--bds-space_xl);
     }
 
@@ -106,7 +105,7 @@ var BdsButton = class extends i2 {
     .button.is-icon-only {
       aspect-ratio: 1;
       box-sizing: border-box;
-      padding: var(--bds-space_xs);
+      padding: var(--bds-space_xxs);
     }
 
     :host([is-icon-only]) ::slotted(*) {
@@ -157,9 +156,9 @@ var BdsButton = class extends i2 {
       /* Default hover */
       .button.default:hover {
         --button_bg--variant:     var(--button_bg--hover, var(--bds-color_bg));
-        --button_text--variant:   var(--button_text--hover, var(--bds-color_interactive));
+        --button_text--variant:   var(--button_text--hover, var(--bds-color_interactive_on-bg));
         --button_border--variant: var(--button_border--hover, currentcolor);
-        --button_pulse-color:     var(--button_pulse-color--hover, var(--bds-color_interactive));
+        --button_pulse-color:     var(--button_pulse-color--hover, var(--bds-color_interactive_on-bg));
       }
 
       /* Outline hover */
@@ -175,7 +174,6 @@ var BdsButton = class extends i2 {
     .button:focus-visible {
       outline: var(--bds-outline_default);
       outline-offset: var(--bds-outline_offset);
-      border-radius: var(--bds-border_radius--s);
     }
 
     /* Disabled */

package/dist/web-components/{chunk-RTOS7LLG.js → chunk-PC3IOQAH.js}

@@ -20,9 +20,11 @@ var BdsCard = class extends i2 {
       position: relative;
       box-sizing: border-box;
       inline-size: 100%;
+      block-size: 100%;
       text-align: inherit;
       font: inherit;
       border: none;
+      padding: var(--card_padding, var(--bds-space_m));
     }
 
     /* Resting shadows — consumers can override per-variant via
@@ -31,15 +33,11 @@ var BdsCard = class extends i2 {
     .card.--elevated { box-shadow: var(--card_shadow--elevated, var(--bds-shadow_m)); }
 
     .card.--outlined {
+      border: var(--card_border, none);
       --bdc_color: currentcolor;
       box-shadow: var(--card_shadow--outlined, inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bds-shadow_s));
     }
 
-    .card.--padding-none   { padding: 0; }
-    .card.--padding-small  { padding: var(--bds-space_s); }
-    .card.--padding-medium { padding: var(--bds-space_m); }
-    .card.--padding-large  { padding: var(--bds-space_l); }
-
     .card.--text-start  { text-align: start; }
     .card.--text-center { text-align: center; }
     .card.--text-end    { text-align: end; }
@@ -72,7 +70,6 @@ var BdsCard = class extends i2 {
   `;
   static properties = {
     variant: { type: String, reflect: true },
-    padding: { type: String, reflect: true },
     textAlign: { type: String, attribute: "text-align", reflect: true },
     clickable: { type: Boolean, reflect: true },
     ariaLabel: { type: String, attribute: "aria-label" }
@@ -80,7 +77,6 @@ var BdsCard = class extends i2 {
   constructor() {
     super();
     this.variant = "default";
-    this.padding = "medium";
     this.textAlign = "start";
     this.clickable = false;
     this.ariaLabel = "";
@@ -92,7 +88,6 @@ var BdsCard = class extends i2 {
     const classes = [
       "card",
       `--${this.variant}`,
-      `--padding-${this.padding}`,
       `--text-${this.textAlign}`,
       this.clickable ? "--clickable" : ""
     ].filter(Boolean).join(" ");

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

@@ -28,7 +28,7 @@ var BdsNumberInput = class extends i2 {
       font-size: var(--bds-font_size--body);
       padding: var(--bds-space_s);
       border: none;
-      --bdc_color: currentcolor;
+      --bdc_color: var(--number-input_border-color, currentcolor);
       --bdc-outline_radius: var(--bds-border_radius--xs);
 
       border-radius: var(--number-input_radius, var(--bdc-outline_radius));

package/dist/web-components/{chunk-5R6IFELV.js → chunk-QLT6MTZF.js}

@@ -18,7 +18,7 @@ var BdsLoading = class extends i2 {
       block-size: 2.5em;
       border: 4px solid var(--bds-color_bg);
       border-block-start: 4px solid var(--bds-color_interactive);
-      border-radius: 50%;
+      border-radius: var(--loading_radius, var(--bds-border_radius--circle));
       animation: spin 1s linear infinite;
     }
 

package/dist/web-components/{chunk-ECW3HHWA.js → chunk-TQ7IQ4GZ.js}

@@ -28,10 +28,15 @@ var BdsPopover = class extends i2 {
       overflow-y: auto;
       z-index: var(--popover_z-index, 100);
       min-width: 12rem;
+      max-width: var(--popover_max-width, 20rem);
+      max-height: var(--popover_max-height, 80dvh);
       padding: var(--bds-space_m);
-      border-radius: var(--bds-border_radius--s);
+      border: var(--popover_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--s);
+      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/dist/web-components/{chunk-QLZ2362S.js → chunk-UUKSDCYS.js}

@@ -29,8 +29,8 @@ var BdsCombobox = class extends i2 {
       padding: var(--bds-space_s);
       padding-inline-end: var(--bds-space_xl);
       border: none;
-      --bdc_color: currentcolor;
-      --bdc-outline_radius: var(--bds-border_radius--xs);
+      --bdc_color: var(--combobox_border-color, currentcolor);
+      --bdc-outline_radius: var(--bds-border_radius--full);
 
       border-radius: var(--combobox_radius, var(--bdc-outline_radius));
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--combobox_shadow, var(--bdc-outline_shadow));

package/dist/web-components/{chunk-ITHLKR7Q.js → chunk-X3NQMBAQ.js}

@@ -35,7 +35,7 @@ var BdsProgress = class extends i2 {
       inline-size: 100%;
       block-size: var(--progress_height, var(--bds-space_xs));
       background-color: var(--bds-color_bg--subtle);
-      border-radius: 999px;
+      border-radius: var(--progress_radius, var(--bds-border_radius--full));
       overflow: hidden;
     }
 
@@ -46,7 +46,7 @@ var BdsProgress = class extends i2 {
     .fill {
       block-size: 100%;
       background-color: var(--progress_color-active, var(--bdc-color_active));
-      border-radius: 999px;
+      border-radius: var(--progress_radius, var(--bds-border_radius--full));
       transition: inline-size var(--bds-animation_transition-duration) var(--bds-animation_easing);
     }
 

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

@@ -17,9 +17,9 @@ var BdsNotificationBanner = class extends i2 {
       align-items: center;
       gap: var(--bds-space_m);
       padding: var(--bds-space_s) var(--bds-space_m);
-      background-color: var(--banner_bg, var(--bds-color_blue--subtle));
-      color: var(--banner_text, var(--bds-color_on-blue--subtle));
-      border-block-end: 3px solid var(--banner_border, var(--bds-color_blue));
+      background-color: var(--banner_bg, var(--banner_bg--variant, var(--bds-color_blue--subtle)));
+      color: var(--banner_text, var(--banner_text--variant, var(--bds-color_on-blue--subtle)));
+      border-block-end: 3px solid var(--banner_border, var(--banner_border--variant, var(--bds-color_blue)));
       font-size: var(--bds-font_size--body);
       line-height: var(--bds-font_line-height--body);
       inline-size: 100%;
@@ -27,27 +27,27 @@ var BdsNotificationBanner = class extends i2 {
     }
 
     :host([variant='info']) .banner {
-      --banner_bg:     var(--bds-color_blue--subtle);
-      --banner_text:   var(--bds-color_on-blue--subtle);
-      --banner_border: var(--bds-color_blue);
+      --banner_bg--variant:     var(--banner_bg--info, var(--bds-color_blue--subtle));
+      --banner_text--variant:   var(--banner_text--info, var(--bds-color_on-blue--subtle));
+      --banner_border--variant: var(--banner_border--info, var(--bds-color_blue));
     }
 
     :host([variant='success']) .banner {
-      --banner_bg:     var(--bds-color_success--subtle);
-      --banner_text:   var(--bds-color_on-success--subtle);
-      --banner_border: var(--bds-color_success);
+      --banner_bg--variant:     var(--banner_bg--success, var(--bds-color_success--subtle));
+      --banner_text--variant:   var(--banner_text--success, var(--bds-color_on-success--subtle));
+      --banner_border--variant: var(--banner_border--success, var(--bds-color_success));
     }
 
     :host([variant='warning']) .banner {
-      --banner_bg:     var(--bds-color_orange--subtle);
-      --banner_text:   var(--bds-color_on-orange--subtle);
-      --banner_border: var(--bds-color_warning);
+      --banner_bg--variant:     var(--banner_bg--warning, var(--bds-color_orange--subtle));
+      --banner_text--variant:   var(--banner_text--warning, var(--bds-color_on-orange--subtle));
+      --banner_border--variant: var(--banner_border--warning, var(--bds-color_warning));
     }
 
     :host([variant='error']) .banner {
-      --banner_bg:     rgb(from var(--bds-color_error) r g b / 12%);
-      --banner_text:   var(--bds-color_on-bg);
-      --banner_border: var(--bds-color_error);
+      --banner_bg--variant:     var(--banner_bg--error, rgb(from var(--bds-color_error) r g b / 12%));
+      --banner_text--variant:   var(--banner_text--error, var(--bds-color_on-bg));
+      --banner_border--variant: var(--banner_border--error, var(--bds-color_error));
     }
 
     .content {
@@ -71,9 +71,10 @@ var BdsNotificationBanner = class extends i2 {
       flex-shrink: 0;
       cursor: pointer;
       color: currentcolor;
-      border-radius: 50%;
+      border-radius: var(--banner_dismiss-radius, var(--bds-border_radius--circle));
+      border: var(--banner_dismiss-border, none);
       transition: var(--bds-animation_transition);
-      --bdc_color: currentcolor;
+      --bdc_color: var(--notification-banner_dismiss-border-color, currentcolor);
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
 
@@ -89,7 +90,7 @@ var BdsNotificationBanner = class extends i2 {
 
     @media (hover: hover) and (pointer: fine) {
       .dismiss:hover {
-        opacity: 0.7;
+        opacity: var(--banner_dismiss-opacity--hover, 0.7);
       }
     }
   `;

package/dist/web-components/{chunk-HGBNDR22.js → chunk-Y7V7LM6R.js}

@@ -17,7 +17,7 @@ var BdsTooltip = class extends i2 {
       position: absolute;
       z-index: var(--bds-z-index_popover, 200);
       padding: var(--bds-space_xxs) var(--bds-space_xs);
-      border-radius: var(--bds-border_radius--xs);
+      border-radius: var(--tooltip_radius, var(--bds-border_radius--full));
       background-color: var(--tooltip_bg, var(--bds-color_on-bg));
       color: var(--tooltip_text, var(--bds-color_bg));
       font-size: var(--bds-font_size--body--s);