@boostdev/design-system-components 1.1.1 → 1.1.2

package/dist/web-components/chunk-4BX6AWXX.js

@@ -0,0 +1,146 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-select.ts
+var BdsSelect = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .wrapper {
+      position: relative;
+      display: block;
+    }
+
+    .select {
+      inline-size: 100%;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      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);
+
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      border-radius: var(--select_radius, var(--bdc-outline_radius));
+      box-shadow: var(--select_shadow, var(--bdc-outline_shadow));
+      background-color: var(--select_color_bg, var(--bds-color_bg));
+      color: var(--select_color, var(--bds-color_on-bg));
+      appearance: none;
+      cursor: pointer;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .select:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    .select:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    .chevron {
+      position: absolute;
+      inset-inline-end: var(--bds-space_s);
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+      pointer-events: none;
+      inline-size: 1rem;
+      block-size: 1rem;
+      color: currentcolor;
+    }
+
+    .chevron svg {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String },
+    options: { type: String },
+    placeholder: { type: String },
+    required: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _internals;
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.options = "[]";
+    this.placeholder = "";
+    this.required = false;
+    this.disabled = false;
+  }
+  get _options() {
+    try {
+      return JSON.parse(this.options);
+    } catch {
+      return [];
+    }
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value") || changed.has("name")) {
+      this._internals.setFormValue?.(this.value || null);
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue?.(null);
+  }
+  _handleChange(e) {
+    this.value = e.target.value;
+  }
+  render() {
+    const opts = this._options;
+    return T`
+      <div class="wrapper">
+        <select
+          class="select"
+          name=${this.name}
+          .value=${this.value}
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this._handleChange}
+        >
+          ${this.placeholder ? T`
+            <option value="" disabled ?selected=${!this.value}>${this.placeholder}</option>
+          ` : ""}
+          ${opts.map((opt) => T`
+            <option
+              value=${opt.value}
+              ?disabled=${opt.disabled}
+              ?selected=${opt.value === this.value}
+            >${opt.label}</option>
+          `)}
+        </select>
+        <span class="chevron" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M6 9l6 6 6-6" />
+          </svg>
+        </span>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-select", BdsSelect);
+
+export {
+  BdsSelect
+};

package/dist/web-components/chunk-57TRNCWQ.js

@@ -0,0 +1,93 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-avatar.ts
+var BdsAvatar = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: var(--avatar_size, 3em);
+      block-size: var(--avatar_size, 3em);
+      border-radius: 50%;
+      overflow: hidden;
+      flex-shrink: 0;
+    }
+
+    :host([size='small'])  { --avatar_size: 2em; }
+    :host([size='medium']) { --avatar_size: 3em; }
+    :host([size='large'])  { --avatar_size: 4.5em; }
+
+    .fallback {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 100%;
+      block-size: 100%;
+      background-color: var(--avatar_bg, var(--bds-color_blue));
+      color: var(--avatar_text, var(--bds-color_on-blue));
+      font-weight: var(--bds-font_weight--semibold);
+    }
+
+    .initials {
+      line-height: 1;
+      user-select: none;
+      font-size: var(--bds-font_size--body);
+    }
+
+    :host([size='small'])  .initials { font-size: var(--bds-font_size--body--s); }
+    :host([size='large'])  .initials { font-size: var(--bds-font_size--heading-3); }
+
+    .image {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+      display: block;
+    }
+  `;
+  static properties = {
+    src: { type: String },
+    alt: { type: String },
+    name: { type: String },
+    size: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.src = "";
+    this.alt = "";
+    this.name = "";
+    this.size = "medium";
+  }
+  get _initials() {
+    if (!this.name) return "";
+    return this.name.split(" ").filter(Boolean).slice(0, 2).map((word) => word[0].toUpperCase()).join("");
+  }
+  render() {
+    if (this.src) {
+      return T`<img
+        class="image"
+        src=${this.src}
+        alt=${this.alt || this.name || "User avatar"}
+      />`;
+    }
+    return T`
+      <span
+        class="fallback"
+        role="img"
+        aria-label=${this.name || "User avatar"}
+      >
+        ${this._initials ? T`<span class="initials" aria-hidden="true">${this._initials}</span>` : A}
+      </span>
+    `;
+  }
+};
+customElements.define("bds-avatar", BdsAvatar);
+
+export {
+  BdsAvatar
+};

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

@@ -0,0 +1,139 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-collapsible.ts
+var BdsCollapsible = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .collapsible {
+      border: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
+      border-radius: var(--collapsible_border-radius, var(--bds-border_radius--m));
+      overflow: hidden;
+    }
+
+    .summary {
+      list-style: none;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--bds-space_m);
+      padding: var(--bds-space_m);
+      cursor: pointer;
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--bds-font_size--body);
+      color: var(--collapsible_color, var(--bds-color_on-bg));
+      background-color: var(--collapsible_bg, var(--bds-color_bg));
+      user-select: none;
+      transition: var(--bds-animation_transition);
+    }
+
+    .summary::-webkit-details-marker {
+      display: none;
+    }
+
+    .summary:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: calc(var(--bds-outline_offset) * -1);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .summary:hover {
+        background-color: var(--collapsible_bg--hover, var(--bds-color_bg--subtle));
+      }
+    }
+
+    .collapsible[open] > .summary {
+      border-block-end: var(--collapsible_border-width, 1px) solid var(--collapsible_border-color, var(--bds-color_bg--subtle));
+    }
+
+    .summary-content {
+      flex: 1;
+    }
+
+    .icon {
+      inline-size: 0.5rem;
+      block-size: 0.5rem;
+      border-inline-end: 2px solid currentcolor;
+      border-block-end: 2px solid currentcolor;
+      transform: rotate(45deg);
+      flex-shrink: 0;
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .collapsible[open] > .summary .icon {
+      transform: rotate(-135deg);
+    }
+
+    .content {
+      padding: var(--bds-space_m);
+      color: var(--collapsible_on-color, var(--bds-color_on-bg));
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .icon {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    name: { type: String }
+  };
+  constructor() {
+    super();
+    this.open = false;
+    this.name = "";
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("name")) {
+      const details = this.shadowRoot?.querySelector("details");
+      if (details) {
+        if (this.name) {
+          details.setAttribute("name", this.name);
+        } else {
+          details.removeAttribute("name");
+        }
+      }
+    }
+  }
+  _onToggle(e) {
+    const details = e.currentTarget;
+    this.open = details.open;
+    this.dispatchEvent(
+      new CustomEvent("bds-toggle", {
+        bubbles: true,
+        composed: true,
+        detail: { open: this.open }
+      })
+    );
+  }
+  render() {
+    return T`
+      <details
+        class="collapsible"
+        ?open=${this.open}
+        @toggle=${this._onToggle}
+      >
+        <summary class="summary">
+          <span class="summary-content"><slot name="summary"></slot></span>
+          <span class="icon" aria-hidden="true"></span>
+        </summary>
+        <div class="content"><slot></slot></div>
+      </details>
+    `;
+  }
+};
+customElements.define("bds-collapsible", BdsCollapsible);
+
+export {
+  BdsCollapsible
+};

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

@@ -0,0 +1,63 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-loading.ts
+var BdsLoading = class extends i2 {
+  static styles = i`
+    :host {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .spinner {
+      inline-size: 2.5em;
+      block-size: 2.5em;
+      border: 4px solid var(--bds-color_bg);
+      border-block-start: 4px solid var(--bds-color_interactive);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    :host([size='small']) .spinner {
+      inline-size: 1.5em;
+      block-size: 1.5em;
+      border-width: 2px;
+    }
+
+    :host([size='large']) .spinner {
+      inline-size: 4em;
+      block-size: 4em;
+      border-width: 6px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .spinner {
+        animation: none;
+      }
+    }
+  `;
+  static properties = {
+    size: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.size = "medium";
+  }
+  render() {
+    return T`<div class="spinner" role="status" aria-label="Loading"></div>`;
+  }
+};
+customElements.define("bds-loading", BdsLoading);
+
+export {
+  BdsLoading
+};

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-6T3RKUKG.js

@@ -0,0 +1,65 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-accordion.ts
+var BdsAccordion = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+      --bdc_color: var(--bds-color_bg--subtle);
+      --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(--accordion_radius, var(--bdc-outline_radius));
+      overflow: hidden;
+    }
+  `;
+  static properties = {
+    allowMultiple: { type: Boolean, attribute: "allow-multiple", reflect: true }
+  };
+  _mo = null;
+  constructor() {
+    super();
+    this.allowMultiple = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("bds-accordion-item-toggle", this._handleItemToggle);
+    this._mo = new MutationObserver(() => this._discoverItems());
+    this._mo.observe(this, { childList: true, subtree: false });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("bds-accordion-item-toggle", this._handleItemToggle);
+    this._mo?.disconnect();
+    this._mo = null;
+  }
+  get _items() {
+    return [...this.querySelectorAll("bds-accordion-item")];
+  }
+  _discoverItems() {
+    this.requestUpdate();
+  }
+  _handleItemToggle = (e) => {
+    const toggled = e.target;
+    const items = this._items;
+    const wasOpen = toggled.open;
+    if (!this.allowMultiple) {
+      items.forEach((item) => {
+        item.open = false;
+      });
+    }
+    toggled.open = !wasOpen;
+  };
+  render() {
+    return T`<slot></slot>`;
+  }
+};
+customElements.define("bds-accordion", BdsAccordion);
+
+export {
+  BdsAccordion
+};