@boostdev/design-system-components 1.1.0 → 1.1.2

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

@@ -0,0 +1,109 @@
+import {
+  A,
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/ui/bds-link.ts
+var BdsLink = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline;
+    }
+
+    .link {
+      color: var(--link_color, var(--bds-color_interactive_on-bg));
+      text-decoration: underline;
+      text-underline-offset: 0.2em;
+      transition: var(--bds-animation_transition);
+      cursor: pointer;
+    }
+
+    .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 {
+        --link_color: var(--link_color-hover, var(--bds-color_blue--strong));
+      }
+    }
+
+    .link.--variant_default {
+      --link_color:       var(--bds-color_interactive_on-bg);
+      --link_color-hover: var(--bds-color_blue--strong);
+    }
+
+    .link.--variant_subtle {
+      --link_color:       var(--bds-color_on-bg);
+      --link_color-hover: var(--bds-color_interactive_on-bg);
+    }
+
+    .link.--variant_standalone {
+      --link_color:       var(--bds-color_interactive_on-bg);
+      --link_color-hover: var(--bds-color_blue--strong);
+      display: inline-flex;
+      align-items: center;
+      gap: var(--bds-space_xxs);
+      font-weight: var(--bds-font_weight--semibold);
+      text-decoration: none;
+    }
+
+    @media (hover: hover) and (pointer: fine) {
+      .link.--variant_standalone:hover {
+        text-decoration: underline;
+        text-underline-offset: 0.2em;
+      }
+    }
+
+    .external-label {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border-width: 0;
+    }
+  `;
+  static properties = {
+    href: { type: String },
+    target: { type: String },
+    variant: { type: String, reflect: true },
+    external: { type: Boolean, reflect: true },
+    externalLabel: { type: String, attribute: "external-label" }
+  };
+  constructor() {
+    super();
+    this.href = "";
+    this.target = "";
+    this.variant = "default";
+    this.external = false;
+    this.externalLabel = "(opens in new tab)";
+  }
+  render() {
+    const rel = this.external ? "noreferrer noopener" : A;
+    const target = this.external ? "_blank" : this.target || A;
+    return T`
+      <a
+        class="link --variant_${this.variant}"
+        href=${this.href || A}
+        target=${target}
+        rel=${rel}
+      >
+        <slot></slot>
+        ${this.external ? T`<span class="external-label">${this.externalLabel}</span>` : A}
+      </a>
+    `;
+  }
+};
+customElements.define("bds-link", BdsLink);
+
+export {
+  BdsLink
+};

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

@@ -0,0 +1,185 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-popover.ts
+var BdsPopover = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline-flex;
+      position: relative;
+    }
+
+    /* The wrapper IS the CSS anchor — anchor-name resolves via the custom
+       property injected on :host in connectedCallback(), so each instance
+       gets its own unique name without colliding with siblings. */
+    .wrapper {
+      display: inline-flex;
+      anchor-name: var(--bds-popover-anchor);
+    }
+
+    .panel {
+      display: none;
+      position: absolute;
+      position-anchor: var(--bds-popover-anchor);
+      margin: 0;
+      overflow-y: auto;
+      z-index: var(--popover_z-index, 100);
+      min-width: 12rem;
+      padding: var(--bds-space_m);
+      border-radius: var(--bds-border_radius--s);
+      background-color: var(--popover_color, var(--bds-color_bg));
+      box-shadow: var(--popover_shadow, var(--bds-shadow_m));
+      color: var(--popover_on-color, var(--bds-color_on-bg));
+      font-size: var(--bds-font_size--body);
+    }
+
+    .panel.open {
+      display: block;
+    }
+
+    /* Primary placements */
+
+    .panel[data-placement='bottom'] {
+      top: anchor(bottom);
+      left: anchor(left);
+      margin-top: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --bds-popover-top, --bds-popover-right, --bds-popover-left;
+    }
+
+    .panel[data-placement='top'] {
+      bottom: anchor(top);
+      left: anchor(left);
+      margin-bottom: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --bds-popover-bottom, --bds-popover-right, --bds-popover-left;
+    }
+
+    .panel[data-placement='right'] {
+      top: anchor(top);
+      left: anchor(right);
+      margin-left: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --bds-popover-left, --bds-popover-bottom, --bds-popover-top;
+    }
+
+    .panel[data-placement='left'] {
+      top: anchor(top);
+      right: anchor(left);
+      margin-right: var(--bds-space_xs, 8px);
+      position-try-fallbacks: --bds-popover-right, --bds-popover-bottom, --bds-popover-top;
+    }
+
+    /* Fallback placements */
+
+    @position-try --bds-popover-bottom {
+      top: anchor(bottom);
+      right: unset;
+      bottom: unset;
+      left: anchor(left);
+      margin: 0;
+      margin-top: var(--bds-space_xs, 8px);
+    }
+
+    @position-try --bds-popover-top {
+      top: unset;
+      right: unset;
+      bottom: anchor(top);
+      left: anchor(left);
+      margin: 0;
+      margin-bottom: var(--bds-space_xs, 8px);
+    }
+
+    @position-try --bds-popover-right {
+      top: anchor(top);
+      right: unset;
+      bottom: unset;
+      left: anchor(right);
+      margin: 0;
+      margin-left: var(--bds-space_xs, 8px);
+    }
+
+    @position-try --bds-popover-left {
+      top: anchor(top);
+      right: anchor(left);
+      bottom: unset;
+      left: unset;
+      margin: 0;
+      margin-right: var(--bds-space_xs, 8px);
+    }
+  `;
+  static properties = {
+    placement: { type: String, reflect: true },
+    open: { type: Boolean, reflect: true }
+  };
+  _anchorName;
+  constructor() {
+    super();
+    this.placement = "bottom";
+    this.open = false;
+    const uid = Math.random().toString(36).slice(2, 8);
+    this._anchorName = `--bds-popover-${uid}`;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.style.setProperty("--bds-popover-anchor", this._anchorName);
+    document.addEventListener("keydown", this._onKeydown);
+    document.addEventListener("mousedown", this._onOutsideClick);
+    this.addEventListener("command", this._onCommand);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("keydown", this._onKeydown);
+    document.removeEventListener("mousedown", this._onOutsideClick);
+    this.removeEventListener("command", this._onCommand);
+  }
+  _onKeydown = (e) => {
+    if (this.open && e.key === "Escape") this._close();
+  };
+  _onCommand = (e) => {
+    const command = e.command;
+    if (command === "--toggle") this._toggle();
+    else if (command === "--open") this._open();
+    else if (command === "--close") this._close();
+  };
+  _onOutsideClick = (e) => {
+    if (this.open && !this.contains(e.target)) this._close();
+  };
+  _toggle() {
+    if (this.open) {
+      this._close();
+    } else {
+      this._open();
+    }
+  }
+  _open() {
+    if (this.open) return;
+    this.open = true;
+    this.dispatchEvent(new CustomEvent("bds-open", { bubbles: true, composed: true }));
+  }
+  _close() {
+    if (!this.open) return;
+    this.open = false;
+    this.dispatchEvent(new CustomEvent("bds-close", { bubbles: true, composed: true }));
+  }
+  render() {
+    return T`
+      <span class="wrapper">
+        <slot name="trigger" @click=${this._toggle}></slot>
+      </span>
+      <div
+        class="panel ${this.open ? "open" : ""}"
+        data-placement=${this.placement}
+        role="region"
+        aria-label="Popover"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+};
+customElements.define("bds-popover", BdsPopover);
+
+export {
+  BdsPopover
+};

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

@@ -0,0 +1,98 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/bds-tooltip.ts
+var BdsTooltip = class extends i2 {
+  static styles = i`
+    :host {
+      display: inline-flex;
+      align-items: center;
+      position: relative;
+    }
+
+    .tooltip {
+      position: absolute;
+      z-index: var(--bds-z-index_popover, 200);
+      padding: var(--bds-space_xxs) var(--bds-space_xs);
+      border-radius: var(--bds-border_radius--xs);
+      background-color: var(--tooltip_bg, var(--bds-color_on-bg));
+      color: var(--tooltip_text, var(--bds-color_bg));
+      font-size: var(--bds-font_size--body--s);
+      line-height: var(--bds-font_line-height--body);
+      white-space: nowrap;
+      pointer-events: none;
+
+      /* Hidden by default */
+      visibility: hidden;
+      opacity: 0;
+      transition: opacity var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    /* Show on hover and keyboard focus */
+    :host(:hover) .tooltip,
+    :host(:focus-within) .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+
+    /* Placement: top (default) */
+    .tooltip.--placement_top {
+      inset-block-end: calc(100% + var(--bds-space_xs));
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Placement: bottom */
+    .tooltip.--placement_bottom {
+      inset-block-start: calc(100% + var(--bds-space_xs));
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+    }
+
+    /* Placement: left */
+    .tooltip.--placement_left {
+      inset-inline-end: calc(100% + var(--bds-space_xs));
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    /* Placement: right */
+    .tooltip.--placement_right {
+      inset-inline-start: calc(100% + var(--bds-space_xs));
+      inset-block-start: 50%;
+      transform: translateY(-50%);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+      .tooltip {
+        transition: none;
+      }
+    }
+  `;
+  static properties = {
+    content: { type: String },
+    placement: { type: String, reflect: true }
+  };
+  constructor() {
+    super();
+    this.content = "";
+    this.placement = "top";
+  }
+  render() {
+    return T`
+      <slot></slot>
+      <span
+        class="tooltip --placement_${this.placement}"
+        role="tooltip"
+      >${this.content}</span>
+    `;
+  }
+};
+customElements.define("bds-tooltip", BdsTooltip);
+
+export {
+  BdsTooltip
+};

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

@@ -0,0 +1,133 @@
+import {
+  T,
+  i,
+  i2
+} from "./chunk-LGEZYFUU.js";
+
+// src/web-components/interaction/form/bds-checkbox.ts
+var BdsCheckbox = 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: var(--bds-border_radius--xs);
+
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      border-radius: var(--checkbox_radius, var(--bdc-outline_radius));
+      box-shadow: var(--checkbox_shadow, var(--bdc-outline_shadow));
+      border: none;
+      appearance: none;
+      background-color: var(--checkbox_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(--checkbox_color-active, var(--bdc-color_active));
+      --bdc_color: var(--checkbox_color-active, var(--bdc-color_active));
+    }
+
+    .input:checked::after {
+      content: '';
+      position: absolute;
+      inset-inline-start: 0.6em;
+      inset-block-start: 0.2em;
+      inline-size: 0.5em;
+      block-size: 1em;
+      border: solid var(--checkbox_color-on-active, var(--bdc-color_on-active));
+      border-width: 0 2px 2px 0;
+      transform: rotate(45deg);
+    }
+
+    .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 = "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);
+    }
+    if (changed.has("required")) {
+      if (this.required && !this.checked) {
+        this._internals.setValidity?.({ valueMissing: true }, "Required");
+      } else {
+        this._internals.setValidity?.({});
+      }
+    }
+  }
+  formResetCallback() {
+    this.checked = false;
+    this._internals.setFormValue?.(null);
+  }
+  _handleChange(e) {
+    this.checked = e.target.checked;
+  }
+  render() {
+    const id = `bds-checkbox-${this._uid}`;
+    return T`
+      <input
+        id=${id}
+        type="checkbox"
+        class="input"
+        .checked=${this.checked}
+        ?required=${this.required}
+        ?disabled=${this.disabled}
+        @change=${this._handleChange}
+      />
+      <label for=${id}><slot></slot></label>
+    `;
+  }
+};
+customElements.define("bds-checkbox", BdsCheckbox);
+
+export {
+  BdsCheckbox
+};

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

@@ -0,0 +1,188 @@
+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);
+
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      border-radius: var(--dialog_radius, var(--bdc-outline_radius));
+      box-shadow: 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;
+
+      outline: var(--bdc-outline_width) solid var(--bdc_color);
+      outline-offset: var(--bdc-outline_offset);
+      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
+};