@boostdev/design-system-components 1.1.0 → 1.1.2

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

@@ -0,0 +1,134 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-switch.ts
+var BdsSwitch = class extends i2 {
+  static formAssociated = true;
+  static styles = i`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      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;
+    }
+
+    .track {
+      position: relative;
+      inline-size: 2.75rem;
+      block-size: 1.5rem;
+      border-radius: 999px;
+      background-color: var(--switch_color_bg, var(--bds-color_bg--subtle));
+      --bdc_color: currentcolor;
+
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      transition: background-color 0.2s ease;
+      flex-shrink: 0;
+    }
+
+    .thumb {
+      position: absolute;
+      inset-block-start: 0.2rem;
+      inset-inline-start: 0.2rem;
+      inline-size: 1.1rem;
+      block-size: 1.1rem;
+      border-radius: 50%;
+      background-color: var(--switch_thumb_color, var(--bds-color_bg));
+      transition: inset-inline-start 0.2s ease;
+    }
+
+    .input {
+      position: absolute;
+      opacity: 0;
+      inline-size: 0;
+      block-size: 0;
+      margin: 0;
+    }
+
+    .input:checked + .track {
+      background-color: var(--switch_color-active, var(--bdc-color_active));
+    }
+
+    .input:checked + .track .thumb {
+      inset-inline-start: calc(100% - 1.3rem);
+    }
+
+    .input:focus-visible + .track {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    label {
+      cursor: pointer;
+    }
+  `;
+  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 = "on";
+    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-switch-${this._uid}`;
+    return T`
+      <input
+        id=${id}
+        type="checkbox"
+        role="switch"
+        class="input"
+        .checked=${this.checked}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        @change=${this._handleChange}
+      />
+      <label for=${id}>
+        <span class="track">
+          <span class="thumb"></span>
+        </span>
+        <slot></slot>
+      </label>
+    `;
+  }
+};
+customElements.define("bds-switch", BdsSwitch);
+
+export {
+  BdsSwitch
+};

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

@@ -0,0 +1,56 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-skip-link.ts
+var BdsSkipLink = class extends i2 {
+  static styles = i`
+    :host {
+      display: block;
+    }
+
+    .skip-link {
+      position: absolute;
+      inset-block-start: var(--bds-space_s);
+      inset-inline-start: var(--bds-space_s);
+      z-index: 9999;
+      padding: var(--bds-space_xs) var(--bds-space_m);
+      background-color: var(--bds-color_bg);
+      color: var(--bds-color_on-bg);
+      border-radius: var(--bds-border_radius--s);
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--bds-font_size--body);
+      text-decoration: none;
+      box-shadow: var(--bds-shadow_m);
+      transform: translateY(calc(-100% - var(--bds-space_s)));
+      transition: transform var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    .skip-link:focus-visible {
+      transform: translateY(0);
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+  `;
+  static properties = {
+    href: { type: String }
+  };
+  constructor() {
+    super();
+    this.href = "#main";
+  }
+  render() {
+    return T`
+      <a class="skip-link" href=${this.href}>
+        <slot>Skip to main content</slot>
+      </a>
+    `;
+  }
+};
+customElements.define("bds-skip-link", BdsSkipLink);
+
+export {
+  BdsSkipLink
+};

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

@@ -0,0 +1,53 @@
+// src/web-components/globals.ts
+var bdcCss = `
+  @property --bdc_color {
+    syntax: '<color>';
+    inherits: false;
+    initial-value: currentcolor;
+  }
+
+  @property --bdc-outline_width {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: 1px;
+  }
+
+  @property --bdc-outline_offset {
+    syntax: '<length>';
+    inherits: false;
+    initial-value: -1px;
+  }
+
+  @property --bdc-outline_radius {
+    syntax: '<length-percentage>';
+    inherits: false;
+    initial-value: 0;
+  }
+
+  @property --bdc-outline_shadow {
+    syntax: '*';
+    inherits: false;
+    initial-value: none;
+  }
+
+  @layer component {
+    :root {
+      --bdc-outline_border: none;
+
+      --bdc_color:        currentcolor;
+      --bdc_color--focus: var(--bds-color_interactive);
+      --bdc_color--error: var(--bds-color_error);
+
+      --bdc-outline_width:  1px;
+      --bdc-outline_offset: -1px;
+      --bdc-outline_radius: var(--bds-border_radius--xs);
+      --bdc-outline_shadow: none;
+    }
+  }
+`;
+if (!("__bdcInjected" in document)) {
+  Object.defineProperty(document, "__bdcInjected", { value: true });
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(bdcCss);
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}

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

@@ -0,0 +1,229 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-drawer.ts
+var FOCUSABLE = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+var BdsDrawer = class extends i2 {
+  static styles = i`
+    :host {
+      display: contents;
+    }
+
+    .drawer {
+      position: fixed;
+      inset: 0;
+      margin: 0;
+      padding: 0;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      block-size: 100%;
+      max-block-size: 100%;
+      border: none;
+      background: transparent;
+      overflow: hidden;
+    }
+
+    .drawer::backdrop {
+      background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
+      backdrop-filter: blur(3px);
+    }
+
+    .panel {
+      position: absolute;
+      inset-block: 0;
+      display: flex;
+      flex-direction: column;
+      inline-size: min(28rem, 90vw);
+      block-size: 100%;
+      background-color: var(--drawer_color, var(--bds-color_bg));
+      color: var(--drawer_on-color, var(--bds-color_on-bg));
+      box-shadow: var(--bds-shadow_xl);
+      overflow: hidden;
+      transition: var(--bds-animation_transition);
+    }
+
+    :host([side='right']) .panel {
+      inset-inline-end: 0;
+    }
+
+    :host([side='left']) .panel,
+    :host(:not([side])) .panel {
+      inset-inline-start: 0;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: var(--bds-space_m) var(--bds-space_l);
+      border-block-end: 1px solid currentcolor;
+      flex-shrink: 0;
+    }
+
+    .title {
+      font-weight: var(--bds-font_weight--semibold);
+      font-size: var(--bds-font_size--body);
+    }
+
+    .close-button {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      inline-size: 2rem;
+      block-size: 2rem;
+      border-radius: 50%;
+      cursor: pointer;
+      transition: var(--bds-animation_transition);
+    }
+
+    .close-button svg {
+      inline-size: 1.25rem;
+      block-size: 1.25rem;
+    }
+
+    .close-button:focus-visible {
+      outline: var(--bds-outline_default);
+      outline-offset: var(--bds-outline_offset);
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .close-button:hover {
+        background-color: var(--bds-color_bg--subtle);
+      }
+    }
+
+    .body {
+      flex: 1;
+      overflow-block: auto;
+      padding: var(--bds-space_l);
+      display: flex;
+      flex-direction: column;
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .panel {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    open: { type: Boolean, reflect: true },
+    side: { type: String, reflect: true }
+  };
+  _triggerEl = null;
+  constructor() {
+    super();
+    this.open = false;
+    this.side = "right";
+  }
+  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._openDrawer();
+    else if (command === "close") this._closeDrawer();
+  };
+  _openDrawer() {
+    if (this.open) return;
+    this._triggerEl = document.activeElement;
+    this.open = true;
+    this.dispatchEvent(new CustomEvent("bds-open", { bubbles: true, composed: true }));
+  }
+  _closeDrawer() {
+    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._closeDrawer();
+  }
+  _handleCancel(e) {
+    e.preventDefault();
+    this._closeDrawer();
+  }
+  _handleKeydown(e) {
+    if (e.key !== "Tab") return;
+    const dialog = this._dialog;
+    if (!dialog) return;
+    const focusable = Array.from(dialog.querySelectorAll(FOCUSABLE));
+    if (focusable.length === 0) return;
+    const first = focusable[0];
+    const last = focusable[focusable.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="drawer"
+        aria-modal="true"
+        @click=${this._handleBackdropClick}
+        @cancel=${this._handleCancel}
+        @keydown=${this._handleKeydown}
+      >
+        <div class="panel">
+          <div class="header">
+            <span class="title"><slot name="title"></slot></span>
+            <button
+              type="button"
+              class="close-button"
+              aria-label="Close drawer"
+              @click=${this._closeDrawer}
+            >
+              <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 class="body">
+            <slot></slot>
+          </div>
+        </div>
+      </dialog>
+    `;
+  }
+};
+customElements.define("bds-drawer", BdsDrawer);
+
+export {
+  BdsDrawer
+};