@boostdev/design-system-components 2.8.0 → 2.11.0

package/src/web-components/ui/calendar-styles.ts

@@ -0,0 +1,94 @@
+import { css } from 'lit';
+
+/** Shared shadow-DOM styles for <bds-calendar> and <bds-calendar-range>. */
+export const calendarStyles = css`
+  :host, *, *::before, *::after { box-sizing: border-box; }
+
+  :host {
+    display: inline-block;
+    font-family: var(--bds-font_family--body);
+    font-size: var(--bds-font_size--body);
+  }
+  :host([disabled]) { opacity: 0.5; pointer-events: none; }
+
+  .calendar {
+    background-color: var(--bds-color_bg);
+    border: var(--calendar_border, none);
+    --bdc_color: var(--bds-color_bg--subtle);
+    --bdc-outline_radius: var(--bds-border_radius--m);
+    border-radius: var(--calendar_radius, var(--bdc-outline_radius));
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_shadow, var(--bds-shadow_s));
+    padding: var(--bds-space_s);
+    inline-size: fit-content;
+  }
+
+  .months { display: flex; flex-wrap: wrap; gap: var(--bds-space_l); }
+  .month { display: flex; flex-direction: column; }
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--bds-space_xs);
+    margin-block-end: var(--bds-space_s);
+  }
+  .nav-slot { display: inline-flex; inline-size: 2rem; block-size: 2rem; flex: none; }
+  .month-label { font-weight: var(--bds-font_weight--semibold); color: var(--bds-color_on-bg); }
+
+  .nav-btn {
+    display: inline-flex; align-items: center; justify-content: center;
+    inline-size: 2rem; block-size: 2rem; border: none;
+    border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
+    background: none; color: var(--bds-color_on-bg); cursor: pointer;
+    transition: var(--bds-animation_transition);
+  }
+  @media (hover: hover) and (pointer: fine) {
+    .nav-btn:hover { background-color: var(--calendar_navBtn-bg--hover, var(--bds-color_bg--subtle)); }
+  }
+  .nav-btn:focus-visible { outline: var(--bds-outline_default); outline-offset: var(--bds-outline_offset); }
+  .nav-btn svg { inline-size: 1rem; block-size: 1rem; }
+
+  .grid { display: grid; grid-template-columns: repeat(7, 2.25rem); gap: var(--bds-space_xxxs); }
+  .row { display: contents; }
+
+  .weekday {
+    display: flex; align-items: center; justify-content: center; block-size: 2rem;
+    font-size: var(--bds-font_size--body--s); font-weight: var(--bds-font_weight--semibold);
+    color: var(--bds-color_on-bg--subtle); user-select: none;
+  }
+  .cell { display: flex; inline-size: 2.25rem; block-size: 2.25rem; }
+
+  .day {
+    all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center;
+    inline-size: 100%; block-size: 100%;
+    border-radius: var(--calendar_button-radius, var(--bds-border_radius--circle));
+    color: var(--bds-color_on-bg); cursor: pointer;
+    font-size: var(--bds-font_size--body--s); font-family: inherit;
+    transition: var(--bds-animation_transition);
+  }
+  .day:focus-visible { outline: var(--bds-outline_default); outline-offset: var(--bds-outline_offset); }
+  @media (hover: hover) and (pointer: fine) {
+    .day:not(.--selected):not(.--range-start):not(.--range-end):not(.--outside):not([disabled]):hover {
+      background-color: var(--calendar_day-bg--hover, var(--bds-color_bg--subtle));
+    }
+  }
+
+  .day.--today {
+    font-weight: var(--bds-font_weight--semibold);
+    --bdc_color: var(--calendar_today-color, var(--bds-color_interactive));
+    border: var(--calendar_today-border, none);
+    box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), var(--calendar_today-shadow, var(--bdc-outline_shadow));
+  }
+  .day.--selected, .day.--range-start, .day.--range-end {
+    background-color: var(--calendar_day-bg--selected, var(--bds-color_interactive));
+    color: var(--calendar_day-color--selected, var(--bds-color_on-interactive));
+    font-weight: var(--bds-font_weight--semibold);
+  }
+  .day.--in-range { background-color: var(--calendar_day-bg--in-range, var(--bds-color_blue--subtle)); border-radius: 0; }
+  .day.--outside { color: var(--bds-color_on-bg--subtle); opacity: 0.4; }
+  .day[disabled] { opacity: 0.3; cursor: not-allowed; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .day, .nav-btn { transition: none; }
+  }
+`;

package/dist/web-components/chunk-7YURXHTS.js

@@ -1,147 +0,0 @@
-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 {
-      --slider_track-height: var(--bds-space_xxs);
-      --slider_thumb-size: calc(var(--bds-space_s) * 2);
-
-      color: var(--slider_color, var(--bds-color_on-bg));
-      inline-size: 100%;
-      appearance: none;
-      block-size: var(--slider_track-height);
-      border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
-      background: linear-gradient(
-        to right,
-        var(--slider_color-active, var(--bdc-color_active)) 0%,
-        var(--slider_color-active, var(--bdc-color_active)) var(--slider_fill, 0%),
-        var(--slider_track-bg, var(--bds-color_bg--subtle)) var(--slider_fill, 0%),
-        var(--slider_track-bg, var(--bds-color_bg--subtle)) 100%
-      );
-      outline: none;
-      cursor: pointer;
-      transition: var(--bds-animation_transition);
-    }
-
-    .input::-webkit-slider-thumb {
-      appearance: none;
-      inline-size: var(--slider_thumb-size);
-      block-size: var(--slider_thumb-size);
-      border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
-      background-color: var(--slider_color-active, var(--bdc-color_active));
-      box-shadow: var(--bds-shadow_s);
-      cursor: pointer;
-      transition: var(--bds-animation_transition);
-    }
-
-    .input::-moz-range-thumb {
-      inline-size: var(--slider_thumb-size);
-      block-size: var(--slider_thumb-size);
-      border: none;
-      border-radius: var(--slider_thumb-radius, var(--bds-border_radius--circle));
-      background-color: var(--slider_color-active, var(--bdc-color_active));
-      box-shadow: var(--bds-shadow_s);
-      cursor: pointer;
-    }
-
-    .input:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-    }
-
-    .input:focus-visible {
-      outline: var(--bds-outline_default);
-      outline-offset: var(--bds-outline_offset);
-      border-radius: var(--slider_track-radius, var(--bds-border_radius--full));
-    }
-
-    @media (prefers-reduced-motion: reduce) {
-      .input,
-      .input::-webkit-slider-thumb,
-      .input::-moz-range-thumb {
-        transition: none;
-      }
-    }
-  `;
-  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-A3RLT3AS.js

@@ -1,49 +0,0 @@
-import {
-  T,
-  i,
-  i2
-} from "./chunk-LGEZYFUU.js";
-
-// src/web-components/ui/bds-icon-wrapper.ts
-var BdsIconWrapper = class extends i2 {
-  static styles = i`
-    :host {
-      display: inline-flex;
-    }
-
-    .wrapper {
-      inline-size: 2em;
-      block-size: 2em;
-      font-size: 3em;
-      border-radius: var(--icon-wrapper-radius, var(--bds-border_radius--circle));
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: var(--bds-space_l) auto var(--bds-space_m);
-      background: var(--icon-wrapper-color, var(--bds-color_bg));
-      color: var(--icon-wrapper_on-color, var(--bds-on-icon-wrapper-color, var(--bds-color_on-bg)));
-      fill: currentcolor;
-      position: relative;
-      transition: var(--bds-animation_transition);
-    }
-
-    .wrapper svg {
-      fill: currentcolor;
-    }
-  `;
-  static properties = {
-    ariaHidden: { type: String, attribute: "aria-hidden", reflect: true }
-  };
-  constructor() {
-    super();
-    this.ariaHidden = "";
-  }
-  render() {
-    return T`<div class="wrapper"><slot></slot></div>`;
-  }
-};
-customElements.define("bds-icon-wrapper", BdsIconWrapper);
-
-export {
-  BdsIconWrapper
-};

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

@@ -1,56 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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-DZOEPVFT.js

@@ -1,107 +0,0 @@
-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: var(--textarea_border-color, currentcolor);
-      --bdc-outline_radius: var(--bdc-outline_radius--l);
-
-      border-radius: var(--textarea_radius, var(--bdc-outline_radius));
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), 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-JYYRJS2D.js

@@ -1,118 +0,0 @@
-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: var(--radio_border-color, currentcolor);
-      --bdc-outline_radius: var(--bds-border_radius--circle);
-
-      border-radius: var(--radio_radius, var(--bds-border_radius--circle));
-      box-shadow: inset 0 0 0 var(--bdc-outline_width) var(--bdc_color), 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: radial-gradient(
-        circle,
-        var(--radio_color-active, var(--bdc-color_active)) 35%,
-        var(--radio_color_bg, var(--bds-color_bg)) 42%
-      );
-      --bdc_color: var(--radio_color-active, var(--bdc-color_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-Y4MAXTMA.js

@@ -1,80 +0,0 @@
-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
-};