@boostdev/design-system-components 2.7.1 → 2.8.0

package/src/web-components/interaction/form/bds-slider.ts

@@ -41,44 +41,64 @@ export class BdsSlider extends LitElement {
     }
 
     .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;
+      }
     }
   `;
 

package/src/web-components/interaction/form/bds-switch.ts

@@ -31,7 +31,7 @@ export class BdsSwitch extends LitElement {
       cursor: pointer;
       font-size: var(--bds-font_size--body);
       font-family: var(--bds-font_family--body);
-      color: var(--bds-color_on-bg);
+      color: var(--switch_color, var(--bds-color_on-bg));
     }
 
     :host([disabled]) {
@@ -40,53 +40,87 @@ export class BdsSwitch extends LitElement {
       pointer-events: none;
     }
 
-    .track {
-      position: relative;
-      inline-size: 2.75rem;
-      block-size: 1.5rem;
-      border-radius: 999px;
-      background-color: var(--switch_color_bg, var(--bds-color_bg--subtle));
-      --bdc_color: var(--switch_border-color, currentcolor);
-
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
-      transition: background-color 0.2s ease;
-      flex-shrink: 0;
-    }
-
-    .thumb {
-      position: absolute;
-      inset-block-start: 0.2rem;
-      inset-inline-start: 0.2rem;
-      inline-size: 1.1rem;
-      block-size: 1.1rem;
-      border-radius: 50%;
-      background-color: var(--switch_thumb_color, var(--bds-color_interactive));
-      transition: inset-inline-start 0.2s ease;
+    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: 0;
-      block-size: 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_color-active, var(--bdc-color_active--subtle));
+      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 {
-      inset-inline-start: calc(100% - 1.3rem);
+      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));
     }
 
-    label {
-      cursor: pointer;
+    .input:disabled + .track {
+      opacity: 0.4;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .track,
+      .thumb {
+        transition: none;
+      }
     }
   `;
 
@@ -136,17 +170,17 @@ export class BdsSwitch extends LitElement {
   render() {
     const id = `bds-switch-${this._uid}`;
     return html`
-      <input
-        id=${id}
-        type="checkbox"
-        role="switch"
-        class="input"
-        .checked=${this.checked}
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        @change=${this._handleChange}
-      />
       <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>

package/src/web-components/interaction/form/bds-textarea.ts

@@ -42,7 +42,7 @@ export class BdsTextarea extends LitElement {
       padding: var(--bds-space_s);
       border: none;
       --bdc_color: var(--textarea_border-color, currentcolor);
-      --bdc-outline_radius: var(--bds-border_radius--xs);
+      --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/src/web-components/ui/bds-avatar.ts

@@ -23,7 +23,7 @@ export class BdsAvatar extends LitElement {
       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/src/web-components/ui/bds-carousel.ts

@@ -63,8 +63,8 @@ export class BdsCarousel extends LitElement {
       inline-size: 2.5rem;
       block-size: 2.5rem;
       border: none;
-      border-radius: var(--bds-border_radius--full, 9999px);
-      background-color: var(--bds-color_bg--subtle);
+      border-radius: var(--carousel_navBtn-radius, var(--bds-border_radius--circle));
+      background-color: var(--carousel_navBtn-bg, var(--bds-color_bg--subtle));
       color: var(--bds-color_on-bg);
       cursor: pointer;
       transition: var(--bds-animation_transition);
@@ -77,7 +77,7 @@ export class BdsCarousel extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .nav-btn:hover {
-        background-color: var(--bds-color_bg--strong);
+        background-color: var(--carousel_navBtn-bg--hover, var(--bds-color_bg--strong));
       }
     }
 
@@ -102,18 +102,18 @@ export class BdsCarousel extends LitElement {
     .dot {
       inline-size: 0.5rem;
       block-size: 0.5rem;
-      border-radius: 50%;
+      border-radius: var(--carousel_indicator-radius, var(--bds-border_radius--circle));
       border: none;
       padding: 0;
-      background-color: var(--bds-color_bg--strong);
+      background-color: var(--carousel_indicator-bg, var(--bds-color_bg--strong));
       cursor: pointer;
       transition: var(--bds-animation_transition);
     }
 
     .dot.--active {
-      background-color: var(--bds-color_interactive);
+      background-color: var(--carousel_indicator-bg--active, var(--bds-color_interactive));
       inline-size: 1rem;
-      border-radius: 0.25rem;
+      border-radius: var(--carousel_indicator-radius--active, var(--bds-border_radius--full));
     }
 
     .dot:focus-visible {

package/src/web-components/ui/bds-icon-wrapper.ts

@@ -26,14 +26,14 @@ export class BdsIconWrapper extends LitElement {
       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/src/web-components/ui/bds-loading.ts

@@ -23,7 +23,7 @@ export class BdsLoading extends LitElement {
       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/src/web-components/ui/bds-progress.ts

@@ -42,7 +42,7 @@ export class BdsProgress extends LitElement {
       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;
     }
 
@@ -53,7 +53,7 @@ export class BdsProgress extends LitElement {
     .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-Y3POAKGS.js

@@ -1,133 +0,0 @@
-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(--bds-color_on-bg);
-    }
-
-    :host([disabled]) {
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-    }
-
-    .track {
-      position: relative;
-      inline-size: 2.75rem;
-      block-size: 1.5rem;
-      border-radius: 999px;
-      background-color: var(--switch_color_bg, var(--bds-color_bg--subtle));
-      --bdc_color: var(--switch_border-color, currentcolor);
-
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
-      transition: background-color 0.2s ease;
-      flex-shrink: 0;
-    }
-
-    .thumb {
-      position: absolute;
-      inset-block-start: 0.2rem;
-      inset-inline-start: 0.2rem;
-      inline-size: 1.1rem;
-      block-size: 1.1rem;
-      border-radius: 50%;
-      background-color: var(--switch_thumb_color, var(--bds-color_interactive));
-      transition: inset-inline-start 0.2s ease;
-    }
-
-    .input {
-      position: absolute;
-      opacity: 0;
-      inline-size: 0;
-      block-size: 0;
-      margin: 0;
-    }
-
-    .input:checked + .track {
-      background-color: var(--switch_color-active, var(--bdc-color_active--subtle));
-    }
-
-    .input:checked + .track .thumb {
-      inset-inline-start: calc(100% - 1.3rem);
-    }
-
-    .input:focus-visible + .track {
-      outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
-    }
-
-    label {
-      cursor: pointer;
-    }
-  `;
-  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`
-      <input
-        id=${id}
-        type="checkbox"
-        role="switch"
-        class="input"
-        .checked=${this.checked}
-        ?required=${this.required}
-        ?disabled=${this.disabled}
-        @change=${this._handleChange}
-      />
-      <label for=${id}>
-        <span class="track">
-          <span class="thumb"></span>
-        </span>
-        <slot></slot>
-      </label>
-    `;
-  }
-};
-customElements.define("bds-switch", BdsSwitch);
-
-export {
-  BdsSwitch
-};