@bluevolt-tech/lumen 1.5.1 → 2.0.0

package/dist/components/bv-segmented-control/bv-segmented-control.js

@@ -0,0 +1,128 @@
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-segmented-control/bv-segmented-control.css
+var bv_segmented_control_default = ":host {\n  display: block;\n  font-family: var(--bv-font-family-base);\n}\n\n.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  line-height: 20px;\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: 6px;\n}\n\n.field-label[hidden] {\n  display: none;\n}\n\n.required-mark {\n  color: var(--bv-color-danger);\n  margin-left: 2px;\n}\n\n.container {\n  display: flex;\n  align-items: center;\n  height: 44px;\n  box-sizing: border-box;\n  background: var(--bv-color-neutral-100);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  padding: 3px;\n  gap: 2px;\n}\n\n.pill {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 var(--bv-spacing-md);\n  border: none;\n  border-radius: calc(var(--bv-radius-lg) - 3px);\n  background: transparent;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-500);\n  cursor: pointer;\n  white-space: nowrap;\n  user-select: none;\n  transition:\n    color var(--bv-transition-fast),\n    background var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.pill:hover:not(.selected) {\n  color: var(--bv-color-neutral-800);\n}\n\n.pill.selected {\n  background: var(--bv-color-neutral-0);\n  color: var(--bv-color-neutral-900);\n  box-shadow: var(--bv-shadow-sm);\n}\n";
+
+// components/bv-segmented-control/bv-segmented-control.ts
+var _sheet = null;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync(bv_segmented_control_default);
+  }
+  return _sheet;
+}
+var BvSegmentedControl = class extends HTMLElement {
+  static observedAttributes = ["options", "value", "label", "required"];
+  _rendered = false;
+  _labelEl = null;
+  _containerEl = null;
+  _options = [];
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet()];
+    }
+  }
+  get value() {
+    return this.getAttribute("value") ?? "";
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  get required() {
+    return this.hasAttribute("required");
+  }
+  set required(v) {
+    if (v) this.setAttribute("required", "");
+    else this.removeAttribute("required");
+  }
+  connectedCallback() {
+    this._render();
+  }
+  attributeChangedCallback(name, _old, _val) {
+    if (!this._rendered) return;
+    if (name === "options") this._syncOptions();
+    if (name === "value") this._syncSelected();
+    if (name === "label" || name === "required") this._syncLabel();
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_segmented_control_default;
+      shadow.appendChild(s);
+    }
+    const labelEl = document.createElement("span");
+    labelEl.className = "field-label";
+    this._labelEl = labelEl;
+    const container = document.createElement("div");
+    container.className = "container";
+    container.setAttribute("role", "group");
+    this._containerEl = container;
+    shadow.append(labelEl, container);
+    this._syncLabel();
+    this._syncOptions();
+  }
+  _syncLabel() {
+    if (!this._labelEl || !this._containerEl) return;
+    const text = this.getAttribute("label") ?? "";
+    this._labelEl.textContent = text;
+    if (this.hasAttribute("required")) {
+      const mark = document.createElement("span");
+      mark.className = "required-mark";
+      mark.setAttribute("aria-hidden", "true");
+      mark.textContent = "*";
+      this._labelEl.appendChild(mark);
+    }
+    this._labelEl.hidden = !text;
+    if (text) this._containerEl.setAttribute("aria-label", text);
+    else this._containerEl.removeAttribute("aria-label");
+  }
+  _syncOptions() {
+    if (!this._containerEl) return;
+    try {
+      this._options = JSON.parse(this.getAttribute("options") ?? "[]");
+    } catch {
+      this._options = [];
+    }
+    this._containerEl.innerHTML = "";
+    for (const opt of this._options) {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      btn.className = "pill";
+      btn.dataset["value"] = opt.value;
+      btn.textContent = opt.label;
+      btn.setAttribute("aria-pressed", "false");
+      btn.addEventListener("click", () => {
+        if (this.value === opt.value) return;
+        this.value = opt.value;
+        this.dispatchEvent(
+          new CustomEvent("bv-change", {
+            bubbles: true,
+            composed: true,
+            detail: { value: opt.value, label: opt.label }
+          })
+        );
+      });
+      this._containerEl.appendChild(btn);
+    }
+    this._syncSelected();
+  }
+  _syncSelected() {
+    if (!this._containerEl) return;
+    const current = this.value;
+    for (const btn of this._containerEl.querySelectorAll(".pill")) {
+      const isSelected = btn.dataset["value"] === current;
+      btn.classList.toggle("selected", isSelected);
+      btn.setAttribute("aria-pressed", isSelected ? "true" : "false");
+    }
+  }
+};
+if (!customElements.get("bv-segmented-control")) {
+  customElements.define("bv-segmented-control", BvSegmentedControl);
+}
+export {
+  BvSegmentedControl
+};

package/dist/components/bv-select/bv-select.d.ts

@@ -0,0 +1,41 @@
+export interface SelectOption {
+    label: string;
+    value: string;
+}
+export interface SelectChangeDetail {
+    value: string;
+    label: string;
+}
+export declare class BvSelect extends HTMLElement {
+    static readonly observedAttributes: readonly ["label", "options", "value", "placeholder", "error", "required", "disabled"];
+    private _rendered;
+    private _labelEl;
+    private _triggerEl;
+    private _triggerLabelEl;
+    private _panelEl;
+    private _errorEl;
+    private _options;
+    private _value;
+    private _offClick;
+    constructor();
+    get value(): string;
+    set value(v: string);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get required(): boolean;
+    set required(v: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
+    private _render;
+    private _toggle;
+    private _open;
+    private _close;
+    private _syncLabel;
+    private _syncTriggerLabel;
+    private _renderOptions;
+    private _syncSelected;
+    private _syncError;
+    private _syncDisabled;
+    private _select;
+}

package/dist/components/bv-select/bv-select.js

@@ -0,0 +1,240 @@
+// css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-select/bv-select.css
+var bv_select_default = ":host {\n  display: block;\n  position: relative;\n  font-family: var(--bv-font-family-base);\n}\n\n/* \u2500\u2500 Label \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.field-label {\n  display: block;\n  font-size: var(--bv-font-size-sm);\n  font-weight: var(--bv-font-weight-semibold);\n  color: var(--bv-color-neutral-800);\n  margin-bottom: 6px;\n}\n\n.required-mark {\n  color: var(--bv-color-danger);\n  margin-left: 2px;\n}\n\n/* \u2500\u2500 Trigger \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.trigger {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 44px;\n  padding: 0 var(--bv-spacing-md);\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-300);\n  border-radius: var(--bv-radius-lg);\n  cursor: pointer;\n  font-family: inherit;\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-800);\n  text-align: left;\n  transition:\n    border-color var(--bv-transition-fast),\n    box-shadow var(--bv-transition-fast);\n}\n\n.trigger:focus-visible {\n  outline: none;\n  border-color: var(--bv-color-primary);\n  box-shadow:\n    0 0 0 3px var(--bv-color-primary-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\n}\n\n:host([open]) .trigger {\n  border-color: var(--bv-color-primary);\n  box-shadow:\n    0 0 0 3px var(--bv-color-primary-light),\n    0 1px 2px 0 rgba(16, 24, 40, 0.05);\n}\n\n:host([error]:not([error=''])) .trigger {\n  border-color: var(--bv-color-danger);\n}\n\n.trigger:disabled {\n  background: var(--bv-color-neutral-100);\n  color: var(--bv-color-neutral-400);\n  cursor: not-allowed;\n}\n\n.trigger-label {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.trigger-label.is-placeholder {\n  color: var(--bv-color-neutral-400);\n}\n\n.trigger-chevron {\n  display: flex;\n  color: var(--bv-color-neutral-500);\n  flex-shrink: 0;\n  margin-left: var(--bv-spacing-sm);\n  transition: transform var(--bv-transition-fast);\n}\n\n:host([open]) .trigger-chevron {\n  transform: rotate(180deg);\n}\n\n/* \u2500\u2500 Dropdown panel \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.panel {\n  display: none;\n  position: absolute;\n  top: calc(100% + 4px);\n  left: 0;\n  right: 0;\n  background: var(--bv-color-neutral-0);\n  border: 1px solid var(--bv-color-neutral-200);\n  border-radius: var(--bv-radius-lg);\n  box-shadow: var(--bv-shadow-md);\n  z-index: 200;\n  overflow: hidden;\n  padding: var(--bv-spacing-xs) 0;\n}\n\n:host([open]) .panel {\n  display: block;\n}\n\n/* \u2500\u2500 Options \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.option {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--bv-spacing-sm);\n  padding: 10px var(--bv-spacing-md);\n  font-size: var(--bv-font-size-sm);\n  color: var(--bv-color-neutral-700);\n  cursor: pointer;\n  transition: background var(--bv-transition-fast);\n}\n\n.option:hover {\n  background: var(--bv-color-secondary);\n}\n\n.option[aria-selected='true'] {\n  font-weight: var(--bv-font-weight-medium);\n  color: var(--bv-color-neutral-900);\n  background: var(--bv-color-secondary-light);\n}\n\n.option-text {\n  flex: 1;\n}\n\n.option-check {\n  display: none;\n  color: var(--bv-color-primary);\n  flex-shrink: 0;\n}\n\n.option[aria-selected='true'] .option-check {\n  display: flex;\n}\n\n/* \u2500\u2500 Error message \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n\n.field-error {\n  display: block;\n  font-size: var(--bv-font-size-xs);\n  color: var(--bv-color-danger);\n  margin-top: var(--bv-spacing-xs);\n}\n";
+
+// components/bv-select/bv-select.ts
+var CHEVRON_DOWN = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>`;
+var CHECK = `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>`;
+var _sheet = null;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync(bv_select_default);
+  }
+  return _sheet;
+}
+var BvSelect = class extends HTMLElement {
+  static observedAttributes = [
+    "label",
+    "options",
+    "value",
+    "placeholder",
+    "error",
+    "required",
+    "disabled"
+  ];
+  _rendered = false;
+  _labelEl = null;
+  _triggerEl = null;
+  _triggerLabelEl = null;
+  _panelEl = null;
+  _errorEl = null;
+  _options = [];
+  _value = "";
+  _offClick = null;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    if ("adoptedStyleSheets" in ShadowRoot.prototype) {
+      shadow.adoptedStyleSheets = [getSheet()];
+    }
+  }
+  get value() {
+    return this._value;
+  }
+  set value(v) {
+    this.setAttribute("value", v);
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(v) {
+    if (v) this.setAttribute("disabled", "");
+    else this.removeAttribute("disabled");
+  }
+  get required() {
+    return this.hasAttribute("required");
+  }
+  set required(v) {
+    if (v) this.setAttribute("required", "");
+    else this.removeAttribute("required");
+  }
+  connectedCallback() {
+    this._render();
+  }
+  disconnectedCallback() {
+    if (this._offClick) document.removeEventListener("click", this._offClick);
+  }
+  attributeChangedCallback(name, _old, val) {
+    if (name === "options") {
+      try {
+        this._options = JSON.parse(val ?? "[]");
+      } catch {
+        this._options = [];
+      }
+      if (this._rendered) this._renderOptions();
+    }
+    if (name === "value") {
+      this._value = val ?? "";
+      if (this._rendered) {
+        this._syncTriggerLabel();
+        this._syncSelected();
+      }
+    }
+    if (!this._rendered) return;
+    if (name === "label" || name === "required") this._syncLabel();
+    if (name === "error") this._syncError();
+    if (name === "disabled") this._syncDisabled();
+    if (name === "placeholder") this._syncTriggerLabel();
+  }
+  _render() {
+    if (this._rendered) return;
+    this._rendered = true;
+    try {
+      this._options = JSON.parse(this.getAttribute("options") ?? "[]");
+    } catch {
+      this._options = [];
+    }
+    this._value = this.getAttribute("value") ?? "";
+    const shadow = this.shadowRoot;
+    if (!shadow.adoptedStyleSheets.length) {
+      const s = document.createElement("style");
+      s.textContent = bv_select_default;
+      shadow.appendChild(s);
+    }
+    const label = document.createElement("label");
+    label.className = "field-label";
+    this._labelEl = label;
+    const trigger = document.createElement("button");
+    trigger.type = "button";
+    trigger.className = "trigger";
+    trigger.setAttribute("aria-haspopup", "listbox");
+    trigger.setAttribute("aria-expanded", "false");
+    trigger.setAttribute("part", "trigger");
+    this._triggerEl = trigger;
+    const triggerLabel = document.createElement("span");
+    triggerLabel.className = "trigger-label";
+    this._triggerLabelEl = triggerLabel;
+    const chevron = document.createElement("span");
+    chevron.className = "trigger-chevron";
+    chevron.innerHTML = CHEVRON_DOWN;
+    trigger.append(triggerLabel, chevron);
+    trigger.addEventListener("click", (e) => {
+      e.stopPropagation();
+      if (!this.hasAttribute("disabled")) this._toggle();
+    });
+    const panel = document.createElement("div");
+    panel.className = "panel";
+    panel.setAttribute("role", "listbox");
+    this._panelEl = panel;
+    const errorEl = document.createElement("span");
+    errorEl.className = "field-error";
+    errorEl.setAttribute("aria-live", "polite");
+    this._errorEl = errorEl;
+    shadow.append(label, trigger, panel, errorEl);
+    this._syncLabel();
+    this._syncTriggerLabel();
+    this._renderOptions();
+    this._syncError();
+    this._syncDisabled();
+    this._offClick = (e) => {
+      if (!this.contains(e.target) && !shadow.contains(e.target)) {
+        this._close();
+      }
+    };
+    document.addEventListener("click", this._offClick);
+    this.addEventListener("keydown", (e) => {
+      if (e.key === "Escape") this._close();
+    });
+  }
+  _toggle() {
+    if (this.hasAttribute("open")) this._close();
+    else this._open();
+  }
+  _open() {
+    var _a;
+    this.setAttribute("open", "");
+    (_a = this._triggerEl) == null ? void 0 : _a.setAttribute("aria-expanded", "true");
+  }
+  _close() {
+    var _a;
+    this.removeAttribute("open");
+    (_a = this._triggerEl) == null ? void 0 : _a.setAttribute("aria-expanded", "false");
+  }
+  _syncLabel() {
+    if (!this._labelEl) return;
+    const labelText = this.getAttribute("label") ?? "";
+    this._labelEl.textContent = labelText;
+    if (this.hasAttribute("required")) {
+      const mark = document.createElement("span");
+      mark.className = "required-mark";
+      mark.setAttribute("aria-hidden", "true");
+      mark.textContent = "*";
+      this._labelEl.appendChild(mark);
+    }
+    this._labelEl.hidden = !labelText;
+  }
+  _syncTriggerLabel() {
+    if (!this._triggerLabelEl) return;
+    const match = this._options.find((o) => o.value === this._value);
+    const placeholder = this.getAttribute("placeholder") ?? "Select";
+    this._triggerLabelEl.textContent = (match == null ? void 0 : match.label) ?? placeholder;
+    this._triggerLabelEl.classList.toggle("is-placeholder", !match);
+  }
+  _renderOptions() {
+    if (!this._panelEl) return;
+    this._panelEl.innerHTML = "";
+    for (const opt of this._options) {
+      const item = document.createElement("div");
+      item.className = "option";
+      item.setAttribute("role", "option");
+      item.setAttribute("aria-selected", opt.value === this._value ? "true" : "false");
+      const text = document.createElement("span");
+      text.className = "option-text";
+      text.textContent = opt.label;
+      const check = document.createElement("span");
+      check.className = "option-check";
+      check.innerHTML = CHECK;
+      item.append(text, check);
+      item.addEventListener("click", () => this._select(opt));
+      this._panelEl.appendChild(item);
+    }
+  }
+  _syncSelected() {
+    var _a;
+    (_a = this._panelEl) == null ? void 0 : _a.querySelectorAll(".option").forEach((el, i) => {
+      const opt = this._options[i];
+      el.setAttribute("aria-selected", (opt == null ? void 0 : opt.value) === this._value ? "true" : "false");
+    });
+    this._syncTriggerLabel();
+  }
+  _syncError() {
+    if (!this._errorEl) return;
+    const msg = this.getAttribute("error") ?? "";
+    this._errorEl.textContent = msg;
+    this._errorEl.hidden = !msg;
+  }
+  _syncDisabled() {
+    if (!this._triggerEl) return;
+    this._triggerEl.disabled = this.hasAttribute("disabled");
+  }
+  _select(opt) {
+    this._value = opt.value;
+    this.setAttribute("value", opt.value);
+    this._syncTriggerLabel();
+    this._syncSelected();
+    this._close();
+    this.dispatchEvent(
+      new CustomEvent("bv-change", {
+        bubbles: true,
+        composed: true,
+        detail: { value: opt.value, label: opt.label }
+      })
+    );
+  }
+};
+if (!customElements.get("bv-select")) {
+  customElements.define("bv-select", BvSelect);
+}
+export {
+  BvSelect
+};

package/dist/components/bv-split-button/bv-split-button.d.ts

@@ -0,0 +1,37 @@
+export type SplitButtonVariant = 'primary' | 'secondary' | 'outline' | 'outline-secondary';
+export interface SplitButtonOption {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: string;
+}
+export interface SplitButtonSelectDetail {
+    value: string;
+}
+export declare class BvSplitButton extends HTMLElement {
+    static readonly observedAttributes: readonly ["label", "variant", "disabled", "options", "open"];
+    private _rendered;
+    private _mainBtn;
+    private _toggleBtn;
+    private _labelEl;
+    private _panelEl;
+    private _offClick;
+    constructor();
+    get label(): string;
+    set label(v: string);
+    get variant(): SplitButtonVariant;
+    set variant(v: SplitButtonVariant);
+    get disabled(): boolean;
+    set disabled(v: boolean);
+    get options(): SplitButtonOption[];
+    set options(v: SplitButtonOption[]);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
+    private _render;
+    private _toggle;
+    private _open;
+    private _close;
+    private _syncDisabled;
+    private _syncPanel;
+}