@boostdev/design-system-components 1.1.0 → 1.1.2

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

@@ -0,0 +1,152 @@
+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;
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+    }
+
+    .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
+};

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

@@ -0,0 +1,53 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-separator.ts
+var BdsSeparator = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    :host([orientation='vertical']) {
+      display: inline-block;
+      align-self: stretch;
+    }
+
+    .separator {
+      border: none;
+      background-color: var(--separator_color, var(--bds-color_on-bg));
+      display: block;
+      inline-size: 100%;
+      block-size: var(--separator_thickness, 1px);
+    }
+
+    :host([orientation='vertical']) .separator {
+      inline-size: var(--separator_thickness, 1px);
+      block-size: 100%;
+    }
+  `;
+  static properties = {
+    orientation: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.orientation = "horizontal";
+  }
+  render() {
+    return T`
+      <div
+        class="separator"
+        role="separator"
+        aria-orientation=${this.orientation}
+      ></div>
+    `;
+  }
+};
+customElements.define("bds-separator", BdsSeparator);
+
+export {
+  BdsSeparator
+};

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

@@ -0,0 +1,109 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-textarea.ts
+var BdsTextarea = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    :host([disabled]) {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .textarea {
+      inline-size: 100%;
+      font-family: var(--bds-font_family--body);
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+      padding: var(--bds-space_s);
+      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(--textarea_radius, var(--bdc-outline_radius));
+      box-shadow: var(--textarea_shadow, var(--bdc-outline_shadow));
+      background-color: var(--textarea_color_bg, var(--bds-color_bg));
+      color: var(--textarea_color, var(--bds-color_on-bg));
+      resize: vertical;
+      min-block-size: calc(var(--bds-space_m) * 5);
+      box-sizing: border-box;
+      transition: --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+                  background-color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .textarea:focus {
+      --bdc_color: var(--bdc_color--focus);
+    }
+
+    .textarea:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    .textarea:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      resize: none;
+    }
+  `;
+  static properties = {
+    name: { type: String, reflect: true },
+    value: { type: String },
+    placeholder: { type: String },
+    rows: { type: Number },
+    required: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true }
+  };
+  _internals;
+  constructor() {
+    super();
+    this._internals = this.attachInternals();
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.rows = 4;
+    this.required = false;
+    this.disabled = false;
+  }
+  updated(changed) {
+    super.updated(changed);
+    if (changed.has("value")) {
+      this._internals.setFormValue?.(this.value || null);
+    }
+  }
+  formResetCallback() {
+    this.value = "";
+    this._internals.setFormValue?.(null);
+  }
+  _handleInput(e) {
+    this.value = e.target.value;
+  }
+  render() {
+    return T`
+      <textarea
+        class="textarea"
+        name=${this.name}
+        .value=${this.value}
+        placeholder=${this.placeholder}
+        rows=${this.rows}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        @input=${this._handleInput}
+      ></textarea>
+    `;
+  }
+};
+customElements.define("bds-textarea", BdsTextarea);
+
+export {
+  BdsTextarea
+};

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

@@ -0,0 +1,118 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-card.ts
+var BdsCard = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .card {
+      background-color: var(--card_color, var(--bds-color_bg));
+      color: var(--card_on-color, var(--bds-color_on-bg));
+      border-radius: var(--bds-border_radius--m);
+      transition: all 0.3s ease;
+      position: relative;
+      box-sizing: border-box;
+      inline-size: 100%;
+      text-align: inherit;
+      font: inherit;
+      border: none;
+    }
+
+    .card.--default  { box-shadow: var(--bds-shadow_s); }
+    .card.--elevated { box-shadow: var(--bds-shadow_m); }
+
+    .card.--outlined {
+      --bdc_color: currentcolor;
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      box-shadow: var(--bds-shadow_s);
+    }
+
+    .card.--padding-none   { padding: 0; }
+    .card.--padding-small  { padding: var(--bds-space_s); }
+    .card.--padding-medium { padding: var(--bds-space_m); }
+    .card.--padding-large  { padding: var(--bds-space_l); }
+
+    .card.--text-start  { text-align: start; }
+    .card.--text-center { text-align: center; }
+    .card.--text-end    { text-align: end; }
+
+    .card.--clickable {
+      cursor: pointer;
+      display: block;
+    }
+
+    .card.--clickable:focus-visible {
+      outline: 2px solid var(--color_focus, currentcolor);
+      outline-offset: 2px;
+    }
+
+    .card.--clickable:active {
+      transform: translateY(0);
+      box-shadow: var(--bds-shadow_s);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .card.--clickable:hover {
+        transform: translateY(-2px);
+        box-shadow: var(--bds-shadow_xl);
+      }
+
+      .card.--default:hover  { box-shadow: var(--bds-shadow_m); }
+      .card.--elevated:hover { box-shadow: var(--bds-shadow_2xl); }
+      .card.--outlined:hover { box-shadow: var(--bds-shadow_s); }
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true },
+    padding: { type: String, reflect: true },
+    textAlign: { type: String, attribute: "text-align", reflect: true },
+    clickable: { type: Boolean, reflect: true },
+    ariaLabel: { type: String, attribute: "aria-label" }
+  };
+  constructor() {
+    super();
+    this.variant = "default";
+    this.padding = "medium";
+    this.textAlign = "start";
+    this.clickable = false;
+    this.ariaLabel = "";
+  }
+  _handleClick() {
+    this.dispatchEvent(new CustomEvent("bds-click", { bubbles: true, composed: true }));
+  }
+  render() {
+    const classes = [
+      "card",
+      `--${this.variant}`,
+      `--padding-${this.padding}`,
+      `--text-${this.textAlign}`,
+      this.clickable ? "--clickable" : ""
+    ].filter(Boolean).join(" ");
+    if (this.clickable) {
+      return T`
+        <button
+          type="button"
+          class=${classes}
+          @click=${this._handleClick}
+          aria-label=${this.ariaLabel || A}
+        >
+          <slot></slot>
+        </button>
+      `;
+    }
+    return T`<div class=${classes}><slot></slot></div>`;
+  }
+};
+customElements.define("bds-card", BdsCard);
+
+export {
+  BdsCard
+};

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

@@ -0,0 +1,80 @@
+import {
+  s,
+  u
+} from "./chunk-QPOKHLMQ.js";
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-section-header.ts
+var BdsSectionHeader = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .header {
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_m);
+    }
+
+    .title {
+      color: var(--sectionHeader-title-color, var(--bds-color_on-bg));
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+    }
+
+    .subtitle {
+      color: var(--sectionHeader_subtitle-color, var(--bds-color_grey--strong));
+      margin: 0;
+      font-family: var(--bds-font_family--body);
+      font-weight: var(--bds-font_weight--medium);
+    }
+
+    .header.--start  { align-items: flex-start; text-align: start; }
+    .header.--center { align-items: center;      text-align: center; }
+    .header.--end    { align-items: flex-end;    text-align: end; }
+
+    .header.--small  .title { font-size: var(--bds-font_size--heading-1); line-height: var(--bds-font_line-height--heading); font-weight: var(--bds-font_weight--bold); }
+    .header.--small  .subtitle { font-size: var(--bds-font_size--body); line-height: 1.4; }
+
+    .header.--medium .title { font-size: var(--bds-font_size--display); line-height: var(--bds-font_line-height--display); font-weight: var(--bds-font_weight--bold); }
+    .header.--medium .subtitle { font-size: var(--bds-font_size--heading-3); line-height: 1.3; }
+
+    .header.--large  .title { font-size: var(--bds-font_size--display); line-height: var(--bds-font_line-height--display); font-weight: var(--bds-font_weight--bold); letter-spacing: var(--bds-font_tracking--tight); }
+    .header.--large  .subtitle { font-size: var(--bds-font_size--heading-2); line-height: 1.3; font-weight: var(--bds-font_weight--medium); }
+  `;
+  static properties = {
+    title: { type: String },
+    subtitle: { type: String },
+    alignment: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    titleAs: { type: String, attribute: "title-as" }
+  };
+  constructor() {
+    super();
+    this.title = "";
+    this.subtitle = "";
+    this.alignment = "start";
+    this.size = "medium";
+    this.titleAs = "h2";
+  }
+  render() {
+    const tag = s(this.titleAs || "h2");
+    return T`
+      <div class="header --${this.alignment} --${this.size}">
+        ${u`<${tag} class="title">${this.title}</${tag}>`}
+        ${this.subtitle ? T`<p class="subtitle">${this.subtitle}</p>` : A}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-section-header", BdsSectionHeader);
+
+export {
+  BdsSectionHeader
+};

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

@@ -0,0 +1,165 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-toast-provider.ts
+var BdsToastProvider = class extends i2 {
+  static styles = i`
+    :host {
+      display: contents;
+    }
+
+    .container {
+      /* Reset UA popover defaults */
+      position: fixed;
+      inset: unset;
+      bottom: var(--bds-space_xl, 2rem);
+      right: var(--bds-space_xl, 2rem);
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_m, 1rem);
+      border: none;
+      padding: 0;
+      background: transparent;
+    }
+
+    .toast {
+      padding: var(--bds-space_m) var(--bds-space_l);
+      background-color: var(--toast_color, var(--bds-color_bg));
+      color: var(--toast_on-color, var(--bds-color_on-bg));
+      border-radius: var(--bds-border_radius--s);
+      box-shadow: var(--bds-shadow_s);
+      display: flex;
+      align-items: center;
+      gap: var(--bds-space_m);
+      min-width: 300px;
+    }
+
+    .toast.--variant_success {
+      --toast_color:    var(--bds-color_success);
+      --toast_on-color: var(--bds-color_on-success);
+    }
+
+    .toast.--variant_warning {
+      --toast_color:    var(--bds-color_warning);
+      --toast_on-color: var(--bds-color_on-warning);
+    }
+
+    .toast.--variant_info {
+      --toast_color:    var(--bds-color_bg--subtle);
+      --toast_on-color: var(--bds-color_on-bg--subtle);
+    }
+
+    .toast.--variant_error {
+      --toast_color:    var(--bds-color_error);
+      --toast_on-color: var(--bds-color_on-error);
+    }
+
+    .message {
+      flex: 1;
+    }
+
+    .close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      width: 1.25rem;
+      height: 1.25rem;
+      padding: 0;
+      background: none;
+      border: none;
+      cursor: pointer;
+      color: var(--toast_on-color);
+    }
+
+    .close svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  `;
+  static properties = {
+    _toasts: { state: true }
+  };
+  constructor() {
+    super();
+    this._toasts = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("bds-show-toast", this._onShowToastEvent);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("bds-show-toast", this._onShowToastEvent);
+  }
+  // Sync the popover's top-layer visibility with the toast queue —
+  // mirrors Toast.tsx's useEffect([toasts.length]).
+  updated() {
+    const container = this.shadowRoot?.querySelector("[popover]");
+    if (!container) return;
+    if (this._toasts.length > 0) {
+      container.showPopover?.();
+    } else {
+      try {
+        container.hidePopover?.();
+      } catch {
+      }
+    }
+  }
+  showToast(message, variant = "info") {
+    const id = Math.random().toString(36).slice(2, 9);
+    this._toasts = [...this._toasts, { id, message, variant }];
+    setTimeout(() => this._removeToast(id), 5e3);
+  }
+  _removeToast(id) {
+    this._toasts = this._toasts.filter((t) => t.id !== id);
+  }
+  _onShowToastEvent = (e) => {
+    const { message, variant } = e.detail ?? {};
+    if (message) this.showToast(message, variant);
+  };
+  static show(message, variant) {
+    const provider = document.querySelector("bds-toast-provider");
+    provider?.showToast(message, variant ?? "info");
+  }
+  render() {
+    return T`
+      <slot></slot>
+      <div
+        popover="manual"
+        role="region"
+        aria-label="Notifications"
+        class="container"
+      >
+        ${this._toasts.map((t) => T`
+          <div
+            class="toast --variant_${t.variant}"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true"
+          >
+            <span class="message">${t.message}</span>
+            <button
+              type="button"
+              class="close"
+              @click=${() => this._removeToast(t.id)}
+              aria-label="Dismiss"
+            >
+              <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>
+        `)}
+      </div>
+    `;
+  }
+};
+customElements.define("bds-toast-provider", BdsToastProvider);
+
+export {
+  BdsToastProvider
+};

package/dist/web-components/globals.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/web-components/globals.js

@@ -0,0 +1 @@
+import "./chunk-CAPI25CU.js";