@boostdev/design-system-components 1.1.1 → 1.2.0

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

@@ -0,0 +1,167 @@
+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;
+      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color);
+    }
+
+    .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-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-DI46Q2EA.js

@@ -0,0 +1,278 @@
+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;
+      transition:
+        display var(--bds-animation_transition-duration) allow-discrete,
+        overlay var(--bds-animation_transition-duration) allow-discrete;
+    }
+
+    .drawer::backdrop {
+      background-color: var(--color_backdrop, rgb(0 0 0 / 50%));
+      backdrop-filter: blur(3px);
+      transition:
+        display var(--bds-animation_transition-duration) allow-discrete,
+        overlay var(--bds-animation_transition-duration) allow-discrete,
+        background-color var(--bds-animation_transition-duration) var(--bds-animation_easing),
+        backdrop-filter var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    @starting-style {
+      .drawer[open]::backdrop {
+        background-color: transparent;
+        backdrop-filter: blur(0);
+      }
+    }
+
+    .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;
+      translate: 100% 0;
+      transition: translate var(--bds-animation_transition-duration) var(--bds-animation_easing);
+    }
+
+    :host([side='right']) .panel {
+      inset-inline-end: 0;
+      translate: 100% 0;
+    }
+
+    :host([side='left']) .panel,
+    :host(:not([side])) .panel {
+      inset-inline-start: 0;
+      translate: -100% 0;
+    }
+
+    .drawer[open] .panel {
+      translate: 0 0;
+    }
+
+    :host([side='right']) .drawer[open] .panel,
+    :host(:not([side])) .drawer[open] .panel {
+      animation: bds-drawer-slide-right var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+    }
+
+    :host([side='left']) .drawer[open] .panel {
+      animation: bds-drawer-slide-left var(--bds-animation_transition-duration) var(--bds-animation_easing) both;
+    }
+
+    @keyframes bds-drawer-slide-right {
+      from { translate: 100% 0; }
+      to { translate: 0 0; }
+    }
+
+    @keyframes bds-drawer-slide-left {
+      from { translate: -100% 0; }
+      to { translate: 0 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) {
+      .drawer,
+      .drawer::backdrop,
+      .panel {
+        transition: none;
+      }
+
+      :host([side='right']) .drawer[open] .panel,
+      :host(:not([side])) .drawer[open] .panel,
+      :host([side='left']) .drawer[open] .panel {
+        animation: 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
+};

package/dist/web-components/chunk-DZRSJGPB.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: 0 0 0 0 transparent;
+  }
+
+  @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; /* available for consumer use; bdc borders now use inset box-shadow */
+      --bdc-outline_radius: var(--bds-border_radius--xs);
+      --bdc-outline_shadow: 0 0 0 0 transparent;
+    }
+  }
+`;
+if (!("__bdcInjected" in document)) {
+  Object.defineProperty(document, "__bdcInjected", { value: true });
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(bdcCss);
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+}