@boostdev/design-system-components 1.1.2 → 1.2.1

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-collapsible.js

@@ -1,6 +1,6 @@
 import {
   BdsCollapsible
-} from "../chunk-5IPHEONG.js";
+} from "../chunk-6I2DBFQ7.js";
 import "../chunk-LGEZYFUU.js";
 export {
   BdsCollapsible

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-OCODKRVZ.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-2FGATTGT.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.1",
   "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

@@ -1,43 +1,65 @@
 @layer component {
   .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;
+  }
+
+  .--side_left.drawer {
+    inset-inline: 0 auto;
+    translate: -100% 0;
+  }
+
+  .drawer[open] {
+    translate: 0 0;
+  }
+
+  @starting-style {
+    .drawer[open] {
+      translate: 100% 0;
+    }
+
+    .--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) var(--bds-animation_easing) allow-discrete,
+      overlay var(--bds-animation_transition-duration) var(--bds-animation_easing) 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);
-  }
-
-  .--side_right .panel {
-    inset-inline-end: 0;
+  .drawer[open]::backdrop {
+    opacity: 1;
   }
 
-  .--side_left .panel {
-    inset-inline-start: 0;
+  @starting-style {
+    .drawer[open]::backdrop {
+      opacity: 0;
+    }
   }
 
   .header {
@@ -86,7 +108,8 @@
   }
 
   @media (prefers-reduced-motion: reduce) {
-    .panel {
+    .drawer,
+    .drawer::backdrop {
       transition: none;
     }
   }

package/src/components/interaction/Drawer/Drawer.tsx

@@ -75,7 +75,13 @@ export function Drawer({
 
   // Close on backdrop click
   const handleClick = (e: React.MouseEvent<HTMLDialogElement>) => {
-    if (e.target === dialogRef.current) onClose();
+    const dialog = dialogRef.current;
+    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) onClose();
   };
 
   // Close on Escape (dialog handles it natively, but we sync state)
@@ -94,23 +100,21 @@ export function Drawer({
       onClick={handleClick}
       onCancel={handleCancel}
     >
-      <div className={css.panel}>
-        <div className={css.header}>
-          {!!title && title}
-          <button
-            type="button"
-            className={css.closeButton}
-            commandfor={id}
-            command="close"
-            aria-label="Close drawer"
-          >
-            <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-              <path strokeLinecap="round" strokeLinejoin="round" d="M18 6L6 18M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-        <div className={css.body}>{children}</div>
+      <div className={css.header}>
+        {!!title && title}
+        <button
+          type="button"
+          className={css.closeButton}
+          commandfor={id}
+          command="close"
+          aria-label="Close drawer"
+        >
+          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path strokeLinecap="round" strokeLinejoin="round" d="M18 6L6 18M6 6l12 12" />
+          </svg>
+        </button>
       </div>
+      <div className={css.body}>{children}</div>
     </dialog>
   );
 }

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;