@boostdev/design-system-components 1.1.1 → 1.2.0

package/dist/web-components/chunk-5TFWOPLH.js

@@ -0,0 +1,49 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-icon-wrapper.ts
+var BdsIconWrapper = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline-flex;
+    }
+
+    .wrapper {
+      inline-size: 2em;
+      block-size: 2em;
+      font-size: 3em;
+      border-radius: 50%;
+      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));
+      position: relative;
+      transition: var(--bds-animation_transition);
+    }
+
+    .wrapper svg {
+      fill: currentcolor;
+    }
+  `;
+  static properties = {
+    ariaHidden: { type: String, attribute: "aria-hidden", reflect: true }
+  };
+  constructor() {
+    super();
+    this.ariaHidden = "";
+  }
+  render() {
+    return T`<div class="wrapper"><slot></slot></div>`;
+  }
+};
+customElements.define("bds-icon-wrapper", BdsIconWrapper);
+
+export {
+  BdsIconWrapper
+};

package/dist/web-components/chunk-6I3CFC26.js

@@ -0,0 +1,89 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-tab.ts
+var BdsTab = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline-flex;
+    }
+
+    .tab {
+      all: unset;
+      display: inline-flex;
+      align-items: center;
+      padding: var(--bds-space_s) var(--bds-space_m);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--tab_color, var(--bds-color_on-bg));
+      border-block-end: 2px solid var(--tab_border-color, transparent);
+      margin-block-end: -1px;
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+      white-space: nowrap;
+    }
+
+    :host([selected]) .tab {
+      --tab_color:        var(--bds-color_interactive_on-bg);
+      --tab_border-color: var(--bds-color_interactive);
+    }
+
+    .tab:disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .tab:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      border-radius: var(--bds-border_radius--xs);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .tab:not(:disabled, [aria-selected='true']):hover {
+        --tab_color: var(--bds-color_interactive_on-bg);
+      }
+    }
+  `;
+  static properties = {
+    selected: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true }
+  };
+  constructor() {
+    super();
+    this.selected = false;
+    this.disabled = false;
+  }
+  /** Called by `bds-tabs` to focus the inner button for keyboard navigation. */
+  focusButton() {
+    this.shadowRoot?.querySelector("button")?.focus();
+  }
+  _handleClick() {
+    if (this.disabled) return;
+    this.dispatchEvent(new CustomEvent("bds-tab-select", { bubbles: true, composed: true }));
+  }
+  render() {
+    return T`
+      <button
+        type="button"
+        class="tab"
+        role="tab"
+        aria-selected=${this.selected}
+        tabindex=${this.selected ? 0 : -1}
+        ?disabled=${this.disabled}
+        @click=${this._handleClick}
+      >
+        <slot></slot>
+      </button>
+    `;
+  }
+};
+customElements.define("bds-tab", BdsTab);
+
+export {
+  BdsTab
+};

package/dist/web-components/chunk-6MH5UWUD.js

@@ -0,0 +1,226 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-segmented-control.ts
+var BdsSegmentedControl = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: inline-flex;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .control {
+      display: inline-flex;
+      position: relative;
+      border-radius: var(--bds-border_radius--s);
+      background-color: var(--segmented_color_bg, var(--bds-color_bg--subtle));
+      padding: 0.25rem;
+      gap: 0;
+    }
+
+    /* Sliding thumb */
+    .thumb {
+      position: absolute;
+      inset-block: 0.25rem;
+      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      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);
+      pointer-events: none;
+      /* Position set via JS in updated() */
+    }
+
+    .radio {
+      position: absolute;
+      opacity: 0;
+      inline-size: 0;
+      block-size: 0;
+      margin: 0;
+    }
+
+    .item {
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--bds-space_xs) var(--bds-space_m);
+      font-size: var(--bds-font_size--body--s);
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--segmented_color, var(--bds-color_on-bg));
+      cursor: pointer;
+      border-radius: calc(var(--bds-border_radius--s) - 2px);
+      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_on-interactive));
+    }
+
+    .item.--disabled {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    .radio:focus-visible + .item-label {
+      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.--active {
+      color: var(--segmented_color--active, var(--bds-color_interactive));
+    }
+
+    :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 },
+    variant: { type: String, reflect: true }
+  };
+  _internals;
+  _uid = Math.random().toString(36).slice(2, 8);
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.options = "[]";
+    this.disabled = false;
+    this.variant = "outline";
+  }
+  get _options() {
+    try {
+      return JSON.parse(this.options);
+    } catch {
+      return [];
+    }
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value") || changed.has("options")) {
+      this._internals.setFormValue?.(this.value || null);
+      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();
+    }
+  }
+  _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();
+    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];
+    this.value = firstOption?.value ?? "";
+    this._internals.setFormValue?.(this.value || null);
+  }
+  _handleChange(optionValue) {
+    this.value = optionValue;
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  render() {
+    const opts = this._options;
+    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 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=${itemClass} for=${id}>
+              <input
+                id=${id}
+                type="radio"
+                class="radio"
+                name=${this.name || this._uid}
+                value=${opt.value}
+                .checked=${isActive}
+                ?disabled=${isDisabled}
+                @change=${() => this._handleChange(opt.value)}
+              />
+              ${opt.label}
+            </label>
+          `;
+    })}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-segmented-control", BdsSegmentedControl);
+
+export {
+  BdsSegmentedControl
+};

package/dist/web-components/chunk-7FMR53BW.js

@@ -0,0 +1,127 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-slider.ts
+var BdsSlider = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .track-wrapper {
+      position: relative;
+      display: flex;
+      align-items: center;
+    }
+
+    .input {
+      inline-size: 100%;
+      appearance: none;
+      block-size: 0.25rem;
+      border-radius: 999px;
+      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%)
+      );
+      outline: none;
+      cursor: pointer;
+    }
+
+    .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);
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+    }
+
+    .input::-moz-range-thumb {
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+      border-radius: 50%;
+      border: none;
+      background-color: var(--slider_thumb-color, var(--bds-color_interactive));
+      box-shadow: var(--bds-shadow_m);
+      cursor: pointer;
+    }
+
+    .input:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      border-radius: 999px;
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: Number },
+    min: { type: Number },
+    max: { type: Number },
+    step: { type: Number },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _internals;
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = 0;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this.disabled = false;
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) {
+      this._internals.setFormValue?.(String(this.value));
+    }
+  }
+  formResetCallback() {
+    this.value = 0;
+    this._internals.setFormValue?.("0");
+  }
+  get _fillPct() {
+    const range = this.max - this.min;
+    if (range === 0) return 0;
+    return (this.value - this.min) / range * 100;
+  }
+  _handleInput(e) {
+    this.value = parseFloat(e.target.value);
+  }
+  render() {
+    return T`
+      <div class="track-wrapper">
+        <input
+          type="range"
+          class="input"
+          name=${this.name}
+          .value=${String(this.value)}
+          min=${this.min}
+          max=${this.max}
+          step=${this.step}
+          ?disabled=${this.disabled}
+          style="--slider_fill: ${this._fillPct}%"
+          @input=${this._handleInput}
+        />
+      </div>
+    `;
+  }
+};
+customElements.define("bds-slider", BdsSlider);
+
+export {
+  BdsSlider
+};

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

@@ -0,0 +1,56 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-description-list.ts
+var BdsDescriptionList = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_s);
+      margin: 0;
+      padding: 0;
+      font-size: var(--bds-font_size--body);
+      color: var(--bds-color_on-bg);
+    }
+
+    /* Style slotted dt/dd elements */
+    ::slotted(dt) {
+      font-weight: var(--bds-font_weight--semibold);
+      color: var(--bds-color_on-bg);
+      margin: 0;
+    }
+
+    ::slotted(dd) {
+      margin: 0;
+      color: var(--bds-color_on-bg);
+    }
+
+    /* Inline layout: pair each dt/dd side by side */
+    :host([layout='inline']) .list {
+      gap: var(--bds-space_xs);
+    }
+  `;
+  static properties = {
+    layout: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.layout = "stacked";
+  }
+  render() {
+    return T`<dl class="list"><slot></slot></dl>`;
+  }
+};
+customElements.define("bds-description-list", BdsDescriptionList);
+
+export {
+  BdsDescriptionList
+};

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

@@ -0,0 +1,151 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-notification-banner.ts
+var BdsNotificationBanner = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .banner {
+      display: flex;
+      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));
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+      inline-size: 100%;
+      box-sizing: border-box;
+    }
+
+    :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);
+    }
+
+    :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);
+    }
+
+    :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);
+    }
+
+    :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);
+    }
+
+    .content {
+      flex: 1;
+    }
+
+    .action {
+      flex-shrink: 0;
+      display: none;
+    }
+
+    .action.has-content {
+      display: block;
+    }
+
+    .dismiss {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      cursor: pointer;
+      color: currentcolor;
+      border-radius: 50%;
+      transition: var(--bds-animation_transition);
+      --bdc_color: currentcolor;
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+    }
+
+    .dismiss svg {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+
+    .dismiss:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .dismiss:hover {
+        opacity: 0.7;
+      }
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true },
+    dismissible: { type: Boolean, reflect: true },
+    dismissLabel: { type: String, attribute: "dismiss-label" },
+    _actionFilled: { state: true }
+  };
+  constructor() {
+    super();
+    this.variant = "info";
+    this.dismissible = false;
+    this.dismissLabel = "Dismiss notification";
+    this._actionFilled = false;
+  }
+  _onActionSlotChange(e) {
+    const slot = e.target;
+    this._actionFilled = slot.assignedNodes({ flatten: true }).length > 0;
+  }
+  get _isUrgent() {
+    return this.variant === "error" || this.variant === "warning";
+  }
+  _handleDismiss() {
+    this.dispatchEvent(new CustomEvent("bds-dismiss", { bubbles: true, composed: true }));
+  }
+  render() {
+    return T`
+      <div
+        class="banner"
+        role=${this._isUrgent ? "alert" : "status"}
+        aria-live=${this._isUrgent ? "assertive" : "polite"}
+        aria-atomic="true"
+      >
+        <div class="content"><slot></slot></div>
+        <div class="action ${this._actionFilled ? "has-content" : ""}">
+          <slot name="action" @slotchange=${this._onActionSlotChange}></slot>
+        </div>
+        ${this.dismissible ? T`
+              <button
+                type="button"
+                class="dismiss"
+                @click=${this._handleDismiss}
+                aria-label=${this.dismissLabel}
+              >
+                <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>
+            ` : A}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-notification-banner", BdsNotificationBanner);
+
+export {
+  BdsNotificationBanner
+};