@bluevolt-tech/lumen 2.1.0 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,12 +2,14 @@ export type SegmentedControlOption = {
2
2
  label: string;
3
3
  value: string;
4
4
  };
5
+ export type SegmentedControlSize = 'sm' | 'md';
6
+ export type SegmentedControlVariant = 'default' | 'primary';
5
7
  export interface SegmentedControlChangeDetail {
6
8
  value: string;
7
9
  label: string;
8
10
  }
9
11
  export declare class BvSegmentedControl extends HTMLElement {
10
- static readonly observedAttributes: readonly ["options", "value", "label", "required"];
12
+ static readonly observedAttributes: readonly ["options", "value", "label", "required", "size", "variant"];
11
13
  private _rendered;
12
14
  private _labelEl;
13
15
  private _containerEl;
@@ -17,6 +19,10 @@ export declare class BvSegmentedControl extends HTMLElement {
17
19
  set value(v: string);
18
20
  get required(): boolean;
19
21
  set required(v: boolean);
22
+ get size(): SegmentedControlSize;
23
+ set size(v: SegmentedControlSize);
24
+ get variant(): SegmentedControlVariant;
25
+ set variant(v: SegmentedControlVariant);
20
26
  connectedCallback(): void;
21
27
  attributeChangedCallback(name: string, _old: string | null, _val: string | null): void;
22
28
  private _render;
@@ -1,5 +1,5 @@
1
1
  // css-inline:/home/runner/work/BV_lumen/BV_lumen/components/bv-segmented-control/bv-segmented-control.css
2
- 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";
2
+ 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:host([size='sm']) .container {\n height: var(--bv-control-height-md);\n border-radius: var(--bv-radius-md);\n padding: 3px;\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:host([size='sm']) .pill {\n padding: 0 var(--bv-spacing-md-minus);\n font-size: var(--bv-font-size-sm);\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\n/* Filled variant \u2014 selected pill uses the primary color instead of white */\n:host([variant='primary']) .pill.selected {\n background: var(--bv-color-primary);\n color: var(--bv-color-neutral-0);\n}\n";
3
3
 
4
4
  // components/_shared/adopt-styles.ts
5
5
  var _sheetCache = /* @__PURE__ */ new Map();
@@ -21,7 +21,14 @@ function adoptStyles(shadow, css) {
21
21
 
22
22
  // components/bv-segmented-control/bv-segmented-control.ts
23
23
  var BvSegmentedControl = class extends HTMLElement {
24
- static observedAttributes = ["options", "value", "label", "required"];
24
+ static observedAttributes = [
25
+ "options",
26
+ "value",
27
+ "label",
28
+ "required",
29
+ "size",
30
+ "variant"
31
+ ];
25
32
  _rendered = false;
26
33
  _labelEl = null;
27
34
  _containerEl = null;
@@ -43,6 +50,18 @@ var BvSegmentedControl = class extends HTMLElement {
43
50
  if (v) this.setAttribute("required", "");
44
51
  else this.removeAttribute("required");
45
52
  }
53
+ get size() {
54
+ return this.getAttribute("size") ?? "md";
55
+ }
56
+ set size(v) {
57
+ this.setAttribute("size", v);
58
+ }
59
+ get variant() {
60
+ return this.getAttribute("variant") ?? "default";
61
+ }
62
+ set variant(v) {
63
+ this.setAttribute("variant", v);
64
+ }
46
65
  connectedCallback() {
47
66
  this._render();
48
67
  }
@@ -21,8 +21,7 @@ function adoptStyles(shadow, css) {
21
21
 
22
22
  // components/_shared/dropdown-controller.ts
23
23
  function bindDropdownController(host, options = {}) {
24
- const shadow = host.shadowRoot;
25
- if (!shadow) {
24
+ if (!host.shadowRoot) {
26
25
  throw new Error("bindDropdownController requires the host to have an open shadow root.");
27
26
  }
28
27
  const syncExpanded = () => {
@@ -37,24 +36,34 @@ function bindDropdownController(host, options = {}) {
37
36
  syncExpanded();
38
37
  host.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
39
38
  };
40
- const close = () => {
39
+ const closeWithReason = (reason) => {
40
+ var _a;
41
41
  if (!host.hasAttribute("open")) return;
42
+ if (options.canClose && !options.canClose(reason)) return;
42
43
  host.removeAttribute("open");
43
44
  syncExpanded();
45
+ host.dispatchEvent(
46
+ new CustomEvent("bv-dropdown-close", {
47
+ bubbles: true,
48
+ composed: true,
49
+ detail: { reason }
50
+ })
51
+ );
52
+ (_a = options.onAfterClose) == null ? void 0 : _a.call(options);
44
53
  };
54
+ const close = () => closeWithReason("programmatic");
45
55
  const toggle = () => {
46
- if (host.hasAttribute("open")) close();
56
+ if (host.hasAttribute("open")) closeWithReason("programmatic");
47
57
  else open();
48
58
  };
49
59
  const offClick = (e) => {
50
60
  if (!host.hasAttribute("open")) return;
51
- const target = e.target;
52
- if (host.contains(target) || shadow.contains(target)) return;
53
- close();
61
+ if (e.composedPath().includes(host)) return;
62
+ closeWithReason("outside-click");
54
63
  };
55
64
  document.addEventListener("click", offClick);
56
65
  const onKeyDown = (e) => {
57
- if (e.key === "Escape") close();
66
+ if (e.key === "Escape") closeWithReason("escape");
58
67
  };
59
68
  host.addEventListener("keydown", onKeyDown);
60
69
  const observer = new MutationObserver(syncExpanded);
@@ -170,9 +179,8 @@ var BvSelect = class extends HTMLElement {
170
179
  chevron.className = "trigger-chevron";
171
180
  chevron.innerHTML = CHEVRON_DOWN;
172
181
  trigger.append(triggerLabel, chevron);
173
- trigger.addEventListener("click", (e) => {
182
+ trigger.addEventListener("click", () => {
174
183
  var _a;
175
- e.stopPropagation();
176
184
  if (!this.hasAttribute("disabled")) (_a = this._dropdown) == null ? void 0 : _a.toggle();
177
185
  });
178
186
  const panel = document.createElement("div");
@@ -21,8 +21,7 @@ function adoptStyles(shadow, css) {
21
21
 
22
22
  // components/_shared/dropdown-controller.ts
23
23
  function bindDropdownController(host, options = {}) {
24
- const shadow = host.shadowRoot;
25
- if (!shadow) {
24
+ if (!host.shadowRoot) {
26
25
  throw new Error("bindDropdownController requires the host to have an open shadow root.");
27
26
  }
28
27
  const syncExpanded = () => {
@@ -37,24 +36,34 @@ function bindDropdownController(host, options = {}) {
37
36
  syncExpanded();
38
37
  host.dispatchEvent(new CustomEvent("bv-open", { bubbles: true, composed: true }));
39
38
  };
40
- const close = () => {
39
+ const closeWithReason = (reason) => {
40
+ var _a;
41
41
  if (!host.hasAttribute("open")) return;
42
+ if (options.canClose && !options.canClose(reason)) return;
42
43
  host.removeAttribute("open");
43
44
  syncExpanded();
45
+ host.dispatchEvent(
46
+ new CustomEvent("bv-dropdown-close", {
47
+ bubbles: true,
48
+ composed: true,
49
+ detail: { reason }
50
+ })
51
+ );
52
+ (_a = options.onAfterClose) == null ? void 0 : _a.call(options);
44
53
  };
54
+ const close = () => closeWithReason("programmatic");
45
55
  const toggle = () => {
46
- if (host.hasAttribute("open")) close();
56
+ if (host.hasAttribute("open")) closeWithReason("programmatic");
47
57
  else open();
48
58
  };
49
59
  const offClick = (e) => {
50
60
  if (!host.hasAttribute("open")) return;
51
- const target = e.target;
52
- if (host.contains(target) || shadow.contains(target)) return;
53
- close();
61
+ if (e.composedPath().includes(host)) return;
62
+ closeWithReason("outside-click");
54
63
  };
55
64
  document.addEventListener("click", offClick);
56
65
  const onKeyDown = (e) => {
57
- if (e.key === "Escape") close();
66
+ if (e.key === "Escape") closeWithReason("escape");
58
67
  };
59
68
  host.addEventListener("keydown", onKeyDown);
60
69
  const observer = new MutationObserver(syncExpanded);
@@ -227,9 +236,8 @@ var BvSplitButton = class extends HTMLElement {
227
236
  toggleBtn.setAttribute("aria-expanded", "false");
228
237
  toggleBtn.setAttribute("aria-label", "More options");
229
238
  toggleBtn.innerHTML = CHEVRON_DOWN;
230
- toggleBtn.addEventListener("click", (e) => {
239
+ toggleBtn.addEventListener("click", () => {
231
240
  var _a;
232
- e.stopPropagation();
233
241
  if (!this.disabled) (_a = this._dropdown) == null ? void 0 : _a.toggle();
234
242
  });
235
243
  this._toggleBtn = toggleBtn;
@@ -100,6 +100,7 @@ var BvTooltip = class extends HTMLElement {
100
100
  popup.style.transform = "none";
101
101
  popup.style.display = "block";
102
102
  popup.style.visibility = "hidden";
103
+ void popup.offsetHeight;
103
104
  const tRect = trigger.getBoundingClientRect();
104
105
  const pRect = popup.getBoundingClientRect();
105
106
  const vw = window.innerWidth;
@@ -97,6 +97,7 @@ var BvTooltip = class extends HTMLElement {
97
97
  popup.style.transform = "none";
98
98
  popup.style.display = "block";
99
99
  popup.style.visibility = "hidden";
100
+ void popup.offsetHeight;
100
101
  const tRect = trigger.getBoundingClientRect();
101
102
  const pRect = popup.getBoundingClientRect();
102
103
  const vw = window.innerWidth;