@boostdev/design-system-components 1.1.1 → 1.2.0

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

@@ -0,0 +1,64 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-rating.ts
+var STAR_PATH = "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z";
+var BdsRating = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline-flex;
+    }
+
+    .rating {
+      display: inline-flex;
+      gap: var(--bds-space_xxxs);
+      color: var(--bds-color_bg);
+    }
+
+    .star {
+      inline-size: 1.5em;
+      block-size: 1.5em;
+    }
+
+    .star.--filled {
+      color: var(--bds-color_warning);
+    }
+  `;
+  static properties = {
+    value: { type: Number },
+    max: { type: Number }
+  };
+  constructor() {
+    super();
+    this.value = 0;
+    this.max = 5;
+  }
+  render() {
+    return T`
+      <div
+        class="rating"
+        role="img"
+        aria-label="${this.value} out of ${this.max} stars"
+      >
+        ${Array.from({ length: this.max }, (_, i3) => T`
+          <svg
+            class="star ${i3 < this.value ? "--filled" : ""}"
+            aria-hidden="true"
+            fill="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path d=${STAR_PATH} />
+          </svg>
+        `)}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-rating", BdsRating);
+
+export {
+  BdsRating
+};

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

@@ -0,0 +1,185 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-dialog.ts
+var FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+var BdsDialog = class extends i2 {
+  static styles = i`
+    :host {
+      display: contents;
+    }
+
+    .dialog {
+      font-size: var(--bds-font_size--body--s);
+      border: var(--dialog_border, none);
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: var(--bds-border_radius--m);
+
+      border-radius: var(--dialog_radius, var(--bdc-outline_radius));
+      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);
+      max-inline-size: 90svw;
+      max-block-size: 90svh;
+      overflow: visible;
+      position: relative;
+    }
+
+    .dialog-content {
+      display: grid;
+      gap: var(--bds-grid_gap);
+      overflow-block: auto;
+      min-block-size: 0;
+      flex: 1;
+    }
+
+    .close-button {
+      all: unset;
+      position: absolute;
+      inset-block-start: -1em;
+      inset-inline-end: -1em;
+      inline-size: 2em;
+      block-size: 2em;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background-color: var(--bds-color_bg);
+      color: currentcolor;
+      border: var(--dialog_close-border, none);
+      --bdc_color: currentcolor;
+
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+      cursor: pointer;
+    }
+
+    .close-button svg {
+      inline-size: 1.25em;
+      block-size: 1.25em;
+    }
+
+    .dialog::backdrop {
+      background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
+      backdrop-filter: blur(3px);
+    }
+  `;
+  static properties = {
+    open: { type: Boolean, reflect: true }
+  };
+  _triggerEl = null;
+  constructor() {
+    super();
+    this.open = false;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("command", this._onCommand);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener("command", this._onCommand);
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("open")) {
+      const dialog = this._dialog;
+      if (!dialog) return;
+      if (this.open && !dialog.open) {
+        this._triggerEl = document.activeElement;
+        dialog.showModal();
+        document.body.style.overflow = "hidden";
+      } else if (!this.open && dialog.open) {
+        dialog.close();
+        document.body.style.overflow = "";
+        this._triggerEl?.focus();
+        this._triggerEl = null;
+      }
+    }
+  }
+  get _dialog() {
+    return this.shadowRoot?.querySelector("dialog") ?? null;
+  }
+  _onCommand = (e) => {
+    const command = e.command;
+    if (command === "show-modal") this._openDialog();
+    else if (command === "close") this._closeDialog();
+  };
+  _openDialog() {
+    if (this.open) return;
+    this._triggerEl = document.activeElement;
+    this.open = true;
+    this.dispatchEvent(new CustomEvent("bds-open", { bubbles: true, composed: true }));
+  }
+  _closeDialog() {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("bds-close", { bubbles: true, composed: true }));
+  }
+  _handleBackdropClick(e) {
+    if (e.target === this._dialog) this._closeDialog();
+  }
+  _handleCancel(e) {
+    e.preventDefault();
+    this._closeDialog();
+  }
+  _handleKeydown(e) {
+    if (e.key !== "Tab") return;
+    const dialog = this._dialog;
+    if (!dialog) return;
+    const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE));
+    const slot = dialog.querySelector("slot");
+    const slottedFocusable = slot ? slot.assignedElements({ flatten: true }).flatMap((el) => [
+      ...el.matches(FOCUSABLE) ? [el] : [],
+      ...Array.from(el.querySelectorAll(FOCUSABLE))
+    ]) : [];
+    const all = [...focusable, ...slottedFocusable];
+    if (all.length === 0) return;
+    const first = all[0];
+    const last = all[all.length - 1];
+    if (e.shiftKey) {
+      if (document.activeElement === first) {
+        e.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (document.activeElement === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  }
+  render() {
+    return T`
+      <dialog
+        class="dialog"
+        aria-modal="true"
+        @click=${this._handleBackdropClick}
+        @cancel=${this._handleCancel}
+        @keydown=${this._handleKeydown}
+      >
+        <button
+          type="button"
+          class="close-button"
+          aria-label="Close dialog"
+          @click=${this._closeDialog}
+        >
+          <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>
+        <div class="dialog-content">
+          <slot></slot>
+        </div>
+      </dialog>
+    `;
+  }
+};
+customElements.define("bds-dialog", BdsDialog);
+
+export {
+  BdsDialog
+};

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

@@ -0,0 +1,69 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-badge.ts
+var BdsBadge = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline-flex;
+    }
+
+    .badge {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--bds-space_xxs) var(--bds-space_xs);
+      border-radius: var(--badge_radius, 2em);
+      font-size: var(--badge_font-size, var(--bds-font_size--body--s));
+      font-weight: var(--bds-font_weight--semibold);
+      line-height: 1;
+      white-space: nowrap;
+      background-color: var(--badge_bg, var(--bds-color_blue));
+      color: var(--badge_text, var(--bds-color_on-blue));
+    }
+
+    /* Variant overrides */
+    :host([variant='primary']) .badge {
+      --badge_bg:   var(--bds-color_interactive);
+      --badge_text: var(--bds-color_on-interactive);
+    }
+
+    :host([variant='secondary']) .badge {
+      --badge_bg:   var(--bds-color_bg);
+      --badge_text: var(--bds-color_on-bg);
+    }
+
+    :host([variant='success']) .badge {
+      --badge_bg:   var(--bds-color_success);
+      --badge_text: var(--bds-color_on-success);
+    }
+
+    :host([variant='error']) .badge {
+      --badge_bg:   var(--bds-color_error);
+      --badge_text: var(--bds-color_on-error);
+    }
+
+    :host([variant='warning']) .badge {
+      --badge_bg:   var(--bds-color_warning);
+      --badge_text: var(--bds-color_on-warning);
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.variant = "primary";
+  }
+  render() {
+    return T`<span class="badge"><slot></slot></span>`;
+  }
+};
+customElements.define("bds-badge", BdsBadge);
+
+export {
+  BdsBadge
+};

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

@@ -0,0 +1,27 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-tab-panel.ts
+var BdsTabPanel = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+      padding-block-start: var(--bds-space_m);
+    }
+
+    :host([hidden]) {
+      display: none;
+    }
+  `;
+  render() {
+    return T`<slot></slot>`;
+  }
+};
+customElements.define("bds-tab-panel", BdsTabPanel);
+
+export {
+  BdsTabPanel
+};

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

@@ -0,0 +1,179 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-file-input.ts
+var BdsFileInput = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .zone {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--bds-space_s);
+      padding: var(--bds-space_xl);
+      border-radius: var(--bds-border_radius--m);
+      border: 2px dashed var(--file-input_border-color, var(--bds-color_bg--subtle));
+      background-color: var(--file-input_color_bg, var(--bds-color_bg));
+      color: var(--bds-color_on-bg);
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      cursor: pointer;
+      text-align: center;
+      transition: var(--bds-animation_transition);
+    }
+
+    .zone.--dragging {
+      border-color: var(--bds-color_interactive);
+      background-color: var(--bds-color_bg--subtle);
+    }
+
+    .zone-input {
+      position: absolute;
+      opacity: 0;
+      inline-size: 0;
+      block-size: 0;
+      overflow: hidden;
+    }
+
+    .zone-label {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--bds-space_xs);
+      cursor: pointer;
+    }
+
+    .icon {
+      inline-size: 2.5rem;
+      block-size: 2.5rem;
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    .icon svg {
+      inline-size: 100%;
+      block-size: 100%;
+    }
+
+    .hint {
+      font-size: var(--bds-font_size--body--s);
+      color: var(--bds-color_on-bg--subtle);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .zone:hover {
+        border-color: var(--bds-color_interactive);
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    accept: { type: String },
+    multiple: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _internals;
+  _isDragging = false;
+  _uid = Math.random().toString(36).slice(2, 8);
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.accept = "";
+    this.multiple = false;
+    this.disabled = false;
+  }
+  formResetCallback() {
+    this._internals.setFormValue?.(null);
+    const input = this.shadowRoot?.querySelector("input");
+    if (input) input.value = "";
+  }
+  _handleFiles(files) {
+    if (!files || files.length === 0) return;
+    const formData = new FormData();
+    Array.from(files).forEach((file) => formData.append(this.name, file));
+    this._internals.setFormValue?.(formData);
+    this.dispatchEvent(new CustomEvent("bds-change", {
+      bubbles: true,
+      composed: true,
+      detail: files
+    }));
+  }
+  _handleInputChange(e) {
+    this._handleFiles(e.target.files);
+  }
+  _handleClick() {
+    this.shadowRoot?.querySelector("input")?.click();
+  }
+  _handleDragover(e) {
+    e.preventDefault();
+    if (!this._isDragging) {
+      this._isDragging = true;
+      this.requestUpdate();
+    }
+  }
+  _handleDragleave() {
+    this._isDragging = false;
+    this.requestUpdate();
+  }
+  _handleDrop(e) {
+    e.preventDefault();
+    this._isDragging = false;
+    this.requestUpdate();
+    this._handleFiles(e.dataTransfer?.files ?? null);
+  }
+  render() {
+    const id = `bds-file-${this._uid}`;
+    return T`
+      <input
+        id=${id}
+        type="file"
+        class="zone-input"
+        name=${this.name}
+        accept=${this.accept}
+        ?multiple=${this.multiple}
+        ?disabled=${this.disabled}
+        @change=${this._handleInputChange}
+      />
+      <div
+        class="zone ${this._isDragging ? "--dragging" : ""}"
+        role="button"
+        tabindex=${this.disabled ? "-1" : "0"}
+        aria-label="Upload file"
+        @click=${this._handleClick}
+        @keydown=${(e) => (e.key === "Enter" || e.key === " ") && this._handleClick()}
+        @dragover=${this._handleDragover}
+        @dragleave=${this._handleDragleave}
+        @drop=${this._handleDrop}
+      >
+        <span class="icon" aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 16.5V9.75m0 0-3 3m3-3 3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.338-2.329 3 3 0 013.83 3.849A3.75 3.75 0 0118 19.5H6.75z" />
+          </svg>
+        </span>
+        <span class="zone-label">
+          <slot>Drag &amp; drop or click to browse</slot>
+        </span>
+        <span class="hint">${this.accept ? `Accepted: ${this.accept}` : "Any file type"}</span>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-file-input", BdsFileInput);
+
+export {
+  BdsFileInput
+};

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

@@ -0,0 +1,94 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-breadcrumb.ts
+var BdsBreadcrumb = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .breadcrumb {
+      font-size: var(--bds-font_size--body--s);
+    }
+
+    .list {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: var(--bds-space_xxs);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    .item {
+      display: flex;
+      align-items: center;
+      gap: var(--bds-space_xxs);
+    }
+
+    .link {
+      color: var(--bds-color_interactive_on-bg);
+      text-decoration: none;
+      transition: var(--bds-animation_transition);
+    }
+
+    .link: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) {
+      .link:hover {
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+      }
+    }
+
+    .separator {
+      color: var(--bds-color_on-bg--subtle);
+      user-select: none;
+    }
+
+    .current {
+      color: var(--bds-color_on-bg--subtle);
+      font-weight: var(--bds-font_weight--semibold);
+    }
+  `;
+  static properties = {
+    items: { type: Array }
+  };
+  constructor() {
+    super();
+    this.items = [];
+  }
+  render() {
+    return T`
+      <nav class="breadcrumb" aria-label="Breadcrumb">
+        <ol class="list">
+          ${this.items.map((item, index) => {
+      const isLast = index === this.items.length - 1;
+      return T`
+              <li class="item">
+                ${isLast ? T`<span class="current" aria-current="page">${item.label}</span>` : T`
+                      <a class="link" href=${item.href ?? "#"}>${item.label}</a>
+                      <span class="separator" aria-hidden="true">›</span>
+                    `}
+              </li>
+            `;
+    })}
+        </ol>
+      </nav>
+    `;
+  }
+};
+customElements.define("bds-breadcrumb", BdsBreadcrumb);
+
+export {
+  BdsBreadcrumb
+};