@boostdev/design-system-components 2.7.0 → 2.8.0

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-notification-banner.ts

@@ -34,9 +34,9 @@ export class BdsNotificationBanner extends LitElement {
       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%;
@@ -44,27 +44,27 @@ export class BdsNotificationBanner extends LitElement {
     }
 
     :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 {
@@ -88,9 +88,10 @@ export class BdsNotificationBanner extends LitElement {
       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);
     }
 
@@ -106,7 +107,7 @@ export class BdsNotificationBanner extends LitElement {
 
     @media (hover: hover) and (pointer: fine) {
       .dismiss:hover {
-        opacity: 0.7;
+        opacity: var(--banner_dismiss-opacity--hover, 0.7);
       }
     }
   `;

package/src/web-components/ui/bds-pagination.ts

@@ -65,7 +65,7 @@ export class BdsPagination extends LitElement {
       cursor: pointer;
       color: var(--bds-color_on-bg);
       transition: var(--bds-animation_transition);
-      --bdc_color: transparent;
+      --bdc_color: var(--pagination_border-color, transparent);
       --bdc-outline_radius: var(--bds-border_radius--xs);
       box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--bdc-outline_shadow);
     }

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/src/web-components/ui/bds-table.ts

@@ -29,6 +29,10 @@ export class BdsTable extends LitElement {
     .wrapper {
       overflow-inline: auto;
       -webkit-overflow-scrolling: touch;
+      border: var(--table_border, none);
+      border-radius: var(--table_radius, var(--bds-border_radius--s));
+      --bdc_color: var(--bds-color_bg--subtle);
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
     }
 
     ::slotted(table) {

package/dist/web-components/chunk-XNA6WTXG.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: 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
-};