@boostdev/design-system-components 1.1.0 → 1.1.2

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

@@ -0,0 +1,168 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-alert.ts
+var BdsAlert = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .alert {
+      display: flex;
+      align-items: flex-start;
+      gap: var(--bds-space_s);
+      padding: var(--bds-space_m);
+      border-radius: var(--bds-border_radius--s);
+      border-inline-start: var(--bds-space_s) solid var(--alert_border, var(--bds-color_blue));
+      background-color: var(--alert_bg, var(--bds-color_blue--subtle));
+      color: var(--alert_text, var(--bds-color_on-blue--subtle));
+      font-size: var(--bds-font_size--body);
+      line-height: var(--bds-font_line-height--body);
+    }
+
+    /* Variant colours */
+    :host([variant='info']) .alert {
+      --alert_bg:     var(--bds-color_blue--subtle);
+      --alert_text:   var(--bds-color_on-blue--subtle);
+      --alert_border: var(--bds-color_blue);
+    }
+
+    :host([variant='success']) .alert {
+      --alert_bg:     var(--bds-color_success--subtle);
+      --alert_text:   var(--bds-color_on-success--subtle);
+      --alert_border: var(--bds-color_success);
+    }
+
+    :host([variant='warning']) .alert {
+      --alert_bg:     var(--bds-color_orange--subtle);
+      --alert_text:   var(--bds-color_on-orange--subtle);
+      --alert_border: var(--bds-color_warning);
+    }
+
+    :host([variant='error']) .alert {
+      --alert_bg:     rgb(from var(--bds-color_error) r g b / 12%);
+      --alert_text:   var(--bds-color_on-bg);
+      --alert_border: var(--bds-color_error);
+    }
+
+    /* Icon slot wrapper — hidden unless slot has content */
+    .icon {
+      display: none;
+      align-items: center;
+      flex-shrink: 0;
+      margin-block-start: 0.1em;
+    }
+
+    .icon.has-content {
+      display: flex;
+    }
+
+    /* Content area */
+    .content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: var(--bds-space_xxs);
+    }
+
+    .title {
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--bds-font_size--body);
+    }
+
+    /* Dismiss button */
+    .dismiss {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      cursor: pointer;
+      color: currentcolor;
+      transition: var(--bds-animation_transition);
+      border-radius: 50%;
+      --bdc_color: currentcolor;
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+    }
+
+    .dismiss svg {
+      width: 1rem;
+      height: 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 },
+    title: { type: String },
+    dismissible: { type: Boolean, reflect: true },
+    _iconFilled: { state: true }
+  };
+  constructor() {
+    super();
+    this.variant = "info";
+    this.title = "";
+    this.dismissible = false;
+    this._iconFilled = false;
+  }
+  _onIconSlotChange(e) {
+    const slot = e.target;
+    this._iconFilled = 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="alert"
+        role=${this._isUrgent ? "alert" : "status"}
+        aria-live=${this._isUrgent ? "assertive" : "polite"}
+        aria-atomic="true"
+      >
+        <span class="icon ${this._iconFilled ? "has-content" : ""}" aria-hidden="true">
+          <slot name="icon" @slotchange=${this._onIconSlotChange}></slot>
+        </span>
+        <div class="content">
+          ${this.title ? T`<strong class="title">${this.title}</strong>` : A}
+          <div><slot></slot></div>
+        </div>
+        ${this.dismissible ? T`
+              <button
+                type="button"
+                class="dismiss"
+                @click=${this._handleDismiss}
+                aria-label="Dismiss alert"
+              >
+                <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-alert", BdsAlert);
+
+export {
+  BdsAlert
+};

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-O4UFI2RX.js

@@ -0,0 +1,244 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-button.ts
+var BdsButton = class extends i2 {
+  static styles = i`
+    @keyframes fadeZoom {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50%       { opacity: 0.75; transform: scale(1.15); }
+    }
+
+    @keyframes pulse {
+      0%   { transform: scale(1);    box-shadow: 0 0 0 0    rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 50%); }
+      70%  { transform: scale(1.01); box-shadow: 0 0 0 var(--bds-space_m) rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%); }
+      100% { transform: scale(1);    box-shadow: 0 0 0 0    rgb(from var(--button_pulse-color, var(--button_color, var(--bds-color_green))) r g b / 0%); }
+    }
+
+    :host {
+      display: inline-flex;
+    }
+
+    .button,
+    .button[href] {
+      all: unset;
+      position: relative;
+      font: inherit;
+      padding-inline: var(--bds-space_l);
+      display: inline-flex;
+      gap: var(--bds-space_xs);
+      border-radius: var(--button_border_radius--s, var(--bds-border_radius--s));
+      align-items: center;
+      cursor: pointer;
+      justify-content: center;
+      height: var(--button_height, 3em);
+      font-size: var(--button_font-size, inherit);
+      white-space: nowrap;
+      line-height: 1;
+
+      --button_color:    var(--bds-color_green);
+      --button_on-color: var(--bds-color_on-green);
+
+      background-color: var(--button_bg, var(--button_color));
+      color: var(--button_text, var(--button_on-color));
+      border: var(--button_border, none);
+      --bdc_color: transparent;
+
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      transition: var(--bds-animation_transition),
+                  --bdc_color var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .button[href] {
+      text-decoration: none;
+    }
+
+    /* Variants */
+    .button.ghost {
+      --button_bg:   transparent;
+      --button_text: var(--button_color);
+      --bdc_color:   var(--button_color);
+    }
+
+    /* Sizes */
+    .button.small {
+      --button_height:    2.25em;
+      --button_font-size: var(--bds-font_size--body--s);
+      --button_border_radius--s: var(--bds-border_radius--xs);
+      padding-inline: var(--bds-space_m);
+    }
+
+    .button.medium {
+      --button_height: 3em;
+      padding-inline: var(--bds-space_l);
+    }
+
+    .button.large {
+      --button_font-size: var(--bds-font_size--heading-3);
+      --button_border_radius--s: var(--bds-border_radius--m);
+      padding-inline: var(--bds-space_xl);
+    }
+
+    /* Pulse */
+    .button.has-pulse {
+      animation: pulse 3s infinite;
+    }
+
+    /* SVG icon colour */
+    .button svg {
+      --icon__stroke: currentcolor;
+      fill: currentcolor;
+      color: currentcolor;
+      flex-shrink: 0;
+    }
+
+    /* Icon slots — hidden by default, shown when slot has content */
+    .icon-start,
+    .icon-end {
+      display: none;
+      align-items: center;
+    }
+
+    .icon-start.has-content {
+      display: flex;
+      margin-inline-start: calc(var(--bds-space_s) * -1);
+      transition: var(--bds-animation_transition);
+    }
+
+    .icon-end.has-content {
+      display: flex;
+      margin-inline-end: calc(var(--bds-space_s) * -1);
+      transition: var(--bds-animation_transition);
+    }
+
+    /* Hover icon animation */
+    @media (hover: hover) and (pointer: fine) {
+      .button:hover .icon-start svg,
+      .button:hover .icon-end svg {
+        animation: fadeZoom 2s ease-out infinite;
+      }
+
+      /* Default hover */
+      .button.default:hover {
+        --button_bg:          var(--bds-color_bg);
+        --button_text:        var(--bds-color_interactive);
+        --button_pulse-color: var(--bds-color_interactive);
+        --bdc_color:          currentcolor;
+      }
+
+      /* Ghost hover */
+      .button.ghost:hover {
+        --button_bg:   var(--button_color);
+        --button_text: var(--button_on-color);
+        --bdc_color:   transparent;
+      }
+    }
+
+    /* Focus visible */
+    .button:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+      border-radius: var(--bds-border_radius--s);
+    }
+
+    /* Disabled */
+    .button:disabled,
+    .button[aria-disabled='true'] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    }
+  `;
+  static properties = {
+    variant: { type: String, reflect: true },
+    size: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    href: { type: String },
+    target: { type: String },
+    rel: { type: String },
+    hasPulse: { type: Boolean, attribute: "has-pulse", reflect: true },
+    type: { type: String },
+    ariaLabel: { type: String, attribute: "aria-label" },
+    // Internal state
+    _iconStartFilled: { state: true },
+    _iconEndFilled: { state: true }
+  };
+  constructor() {
+    super();
+    this.variant = "default";
+    this.size = "medium";
+    this.disabled = false;
+    this.hasPulse = false;
+    this.type = "button";
+    this.ariaLabel = null;
+    this._iconStartFilled = false;
+    this._iconEndFilled = false;
+  }
+  _onIconSlotChange(e, position) {
+    const slot = e.target;
+    const filled = slot.assignedNodes({ flatten: true }).length > 0;
+    if (position === "start") {
+      this._iconStartFilled = filled;
+    } else {
+      this._iconEndFilled = filled;
+    }
+  }
+  get _classes() {
+    return `button ${this.variant} ${this.size}${this.hasPulse ? " has-pulse" : ""}`;
+  }
+  _handleAnchorClick(e) {
+    if (this.disabled) {
+      e.preventDefault();
+    }
+  }
+  _iconSlot(position) {
+    const filled = position === "start" ? this._iconStartFilled : this._iconEndFilled;
+    return T`
+      <span class="icon-${position} ${filled ? "has-content" : ""}">
+        <slot name="icon-${position}" @slotchange=${(e) => this._onIconSlotChange(e, position)}></slot>
+      </span>
+    `;
+  }
+  render() {
+    if (this.href) {
+      return T`
+        <a
+          class=${this._classes}
+          href=${this.disabled ? A : this.href}
+          target=${this.target ?? A}
+          rel=${this.rel ?? A}
+          aria-disabled=${this.disabled ? "true" : A}
+          tabindex=${this.disabled ? "-1" : A}
+          aria-label=${this.ariaLabel ?? A}
+          @click=${this._handleAnchorClick}
+        >
+          ${this._iconSlot("start")}
+          <slot></slot>
+          ${this._iconSlot("end")}
+        </a>
+      `;
+    }
+    return T`
+      <button
+        class=${this._classes}
+        type=${this.type}
+        ?disabled=${this.disabled}
+        aria-label=${this.ariaLabel ?? A}
+      >
+        ${this._iconSlot("start")}
+        <slot></slot>
+        ${this._iconSlot("end")}
+      </button>
+    `;
+  }
+};
+customElements.define("bds-button", BdsButton);
+
+export {
+  BdsButton
+};

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

@@ -0,0 +1,124 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-radio.ts
+var BdsRadio = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: inline-flex;
+      align-items: flex-start;
+      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;
+    }
+
+    .input {
+      --inputSize: calc(var(--bds-space_s) * 2);
+      margin-block-start: 0.25em;
+      inline-size: var(--inputSize);
+      block-size: var(--inputSize);
+      flex-shrink: 0;
+      --bdc_color: currentcolor;
+      --bdc-outline_radius: 50%;
+
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      border-radius: 50%;
+      box-shadow: var(--radio_shadow, var(--bdc-outline_shadow));
+      border: none;
+      appearance: none;
+      background-color: var(--radio_color_bg, var(--bds-color_bg));
+      cursor: pointer;
+      position: relative;
+      transition: --bdc_color 0.3s ease, background-color 0.3s ease;
+    }
+
+    .input:checked {
+      background-color: var(--radio_color-active, var(--bdc-color_active));
+      --bdc_color: var(--radio_color-active, var(--bdc-color_active));
+    }
+
+    .input:checked::after {
+      content: '';
+      position: absolute;
+      inset: 25%;
+      border-radius: 50%;
+      background-color: var(--radio_color-on-active, var(--bdc-color_on-active));
+    }
+
+    .input:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    label {
+      cursor: pointer;
+      flex: 1;
+    }
+  `;
+  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 = "";
+    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-radio-${this._uid}`;
+    return T`
+      <input
+        id=${id}
+        type="radio"
+        class="input"
+        name=${this.name}
+        value=${this.value}
+        .checked=${this.checked}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        @change=${this._handleChange}
+      />
+      <label for=${id}><slot></slot></label>
+    `;
+  }
+};
+customElements.define("bds-radio", BdsRadio);
+
+export {
+  BdsRadio
+};

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
+};