@brandsync/wc 1.18.0 → 1.20.0

package/dist/collection/components/bs-search-item/bs-search-item.js

@@ -36,6 +36,7 @@ import { h } from "@stencil/core";
  * @prop --bs-search-item-color-muted - Description and trailing text. Aliased to `--bs-text-muted`.
  * @prop --bs-search-item-color-disabled - Aliased to `--bs-text-on-disabled`.
  * @prop --bs-search-item-icon-color - Aliased to `--bs-icon-default`.
+ * @part ripple - The press-ripple layer (a `bs-ripple`). Tune it with `::part(ripple) { --bs-ripple-color: ...; }`.
  */
 export class BsSearchItem {
     el;
@@ -68,7 +69,7 @@ export class BsSearchItem {
     slotFilled = (set) => (ev) => set(ev.target.assignedNodes().length > 0);
     render() {
         const role = this.selectionRole ?? undefined;
-        return (h("div", { key: 'ff15a6983c32e576c3a1475b058b8b98c7b26906', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": role && this.disabled ? 'true' : undefined }, h("span", { key: 'a7d9ce608a6354301292b3a5581b598459d1e748', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: '842835090311c9139a58058db8b813dd08cefe63', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: '49593768f387d0c6c551a02c5a45c7f9907d48cc', part: "content", class: "bs-search-item__content" }, h("span", { key: '88f041e7c4ff60001c3b29beb0b60272ac8f5ab8', part: "label", class: "bs-search-item__label" }, h("slot", { key: 'd987b5809b3aa4acafe7d3fe99e477adf3ef94c1' })), h("span", { key: '54be04f167f1b95b0930755f33a827fe6b0be69d', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: '1f5557fe80ba24b69d9b8879be119edb4602c881', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: '5a6a5fc58a12cc02f8ab4555bc580f63af137232', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: '89514db103242c48b2d062340558aa6ded0d157b', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
+        return (h("div", { key: '4e02263a2d377be0989f3469555f19f9b4933840', part: "container", class: "bs-search-item", role: role, "aria-selected": role ? String(this.active) : undefined, "aria-disabled": role && this.disabled ? 'true' : undefined }, !this.disabled && h("bs-ripple", { key: '00523f734a7d994cf448df045a73d4588da1c00c', part: "ripple" }), h("span", { key: '2d030afeec12e555c72d1659f0ac7d2ecb4df70a', part: "icon", class: { 'bs-search-item__icon': true, 'bs-search-item__icon--hidden': !this.hasIcon } }, h("slot", { key: 'ab14918cfcb5425b33c1489232ea18bf940dc49d', name: "icon", onSlotchange: this.slotFilled(v => (this.hasIcon = v)) })), h("span", { key: 'eee1f17e15fa4195f3a65fa7bc7f3ad12d839b7c', part: "content", class: "bs-search-item__content" }, h("span", { key: '75cd5ada24d085dce96331782c4e71317d0d8ed4', part: "label", class: "bs-search-item__label" }, h("slot", { key: '47fbf5d269d2a23eb824ba32084886efdad2aa96' })), h("span", { key: 'b2e4154147a02059d08505bc9f452931bbcff2bf', part: "description", class: { 'bs-search-item__description': true, 'bs-search-item__description--hidden': !this.hasDescription } }, h("slot", { key: '8b72f89b59fa15c21c0d02b3db88b3e291d72f81', name: "description", onSlotchange: this.slotFilled(v => (this.hasDescription = v)) }))), h("span", { key: 'e0b5675b2d71fe5e740fd90ff2aea5eecca2f9eb', part: "trailing", class: { 'bs-search-item__trailing': true, 'bs-search-item__trailing--hidden': !this.hasTrailingSlot && !this.trailing } }, h("slot", { key: 'c0dc999d7b4da6b670690b72071f5b844b86b35b', name: "trailing", onSlotchange: this.slotFilled(v => (this.hasTrailingSlot = v)) }, this.trailing))));
     }
     static get is() { return "bs-search-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/bs-select/bs-select.cmp.test.js

@@ -0,0 +1,108 @@
+import { render, h, describe, it, expect } from "@stencil/vitest";
+const options = [
+    { label: 'Apple', value: 'apple' },
+    { label: 'Banana', value: 'banana' },
+    { label: 'Blueberry', value: 'blueberry', disabled: true },
+    { label: 'Cherry', value: 'cherry' },
+];
+const setup = async (props = {}) => {
+    const r = await render(h("bs-select", { label: "Fruit", options: options, ...props }));
+    const field = r.root.shadowRoot.querySelector('[role="combobox"]');
+    const key = async (k) => {
+        field.dispatchEvent(new KeyboardEvent('keydown', { key: k, bubbles: true, composed: true, cancelable: true }));
+        await r.waitForChanges();
+    };
+    return { ...r, field, key };
+};
+describe('bs-select', () => {
+    it('renders a labelled combobox with a hidden listbox and options', async () => {
+        const { root, field } = await setup();
+        expect(field.getAttribute('aria-expanded')).toBe('false');
+        expect(field.getAttribute('aria-haspopup')).toBe('listbox');
+        const labelId = root.shadowRoot.querySelector('[part="label"]').id;
+        expect(field.getAttribute('aria-labelledby')).toBe(labelId);
+        const list = root.shadowRoot.querySelector('[role="listbox"]');
+        expect(list.hidden).toBe(true);
+        expect(field.getAttribute('aria-controls')).toBe(list.id);
+        expect(list.querySelectorAll('[role="option"]').length).toBe(4);
+    });
+    it('shows the placeholder, then the selected label', async () => {
+        const { root } = await setup({ placeholder: 'Pick one', value: 'cherry' });
+        expect(root.shadowRoot.querySelector('[part="value"]').textContent).toBe('Cherry');
+        const r2 = await setup({ placeholder: 'Pick one' });
+        expect(r2.root.shadowRoot.querySelector('[part="value"]').textContent).toBe('Pick one');
+    });
+    it('opens on click and selects an option, emitting bsChange', async () => {
+        const { root, field, waitForChanges, spyOnEvent } = await setup();
+        const spy = spyOnEvent('bsChange');
+        field.click();
+        await waitForChanges();
+        expect(field.getAttribute('aria-expanded')).toBe('true');
+        root.shadowRoot.querySelectorAll('[role="option"]')[3].click();
+        await waitForChanges();
+        expect(root.value).toBe('cherry');
+        expect(root.open).toBe(false);
+        expect(spy).toHaveReceivedEventDetail('cherry');
+        expect(root.shadowRoot.querySelector('[aria-selected="true"]').textContent).toContain('Cherry');
+    });
+    it('does not select a disabled option', async () => {
+        const { root, field, waitForChanges } = await setup();
+        field.click();
+        await waitForChanges();
+        root.shadowRoot.querySelectorAll('[role="option"]')[2].click();
+        await waitForChanges();
+        expect(root.value).toBe('');
+    });
+    it('keyboard: arrows skip disabled, Enter selects, Home/End, Esc closes', async () => {
+        const { root, field, key } = await setup();
+        await key('ArrowDown');
+        expect(root.open).toBe(true);
+        expect(field.getAttribute('aria-activedescendant')).toContain('-0');
+        await key('ArrowDown');
+        await key('ArrowDown');
+        expect(field.getAttribute('aria-activedescendant')).toContain('-3');
+        await key('Home');
+        expect(field.getAttribute('aria-activedescendant')).toContain('-0');
+        await key('End');
+        expect(field.getAttribute('aria-activedescendant')).toContain('-3');
+        await key('Escape');
+        expect(root.open).toBe(false);
+        await key('Enter');
+        await key('ArrowDown');
+        await key('Enter');
+        expect(root.value).toBe('banana');
+    });
+    it('type-ahead jumps to the matching option', async () => {
+        const { root, key } = await setup();
+        await key('c');
+        expect(root.value).toBe('cherry');
+    });
+    it('reflects error, description, required and disabled', async () => {
+        const { root, field } = await setup({ error: 'Required', required: true });
+        expect(field.getAttribute('aria-invalid')).toBe('true');
+        expect(field.getAttribute('aria-required')).toBe('true');
+        expect(root.shadowRoot.querySelector('[part="error"]').textContent).toBe('Required');
+        const d = await setup({ disabled: true, description: 'Help' });
+        expect(d.field.getAttribute('aria-disabled')).toBe('true');
+        expect(d.field.getAttribute('tabindex')).toBe('-1');
+        d.field.click();
+        await d.waitForChanges();
+        expect(d.root.open).toBe(false);
+        expect(d.root.shadowRoot.querySelector('[part="description"]').textContent).toBe('Help');
+    });
+    it('submits its value with a form', async () => {
+        const { root, waitForChanges } = await render(h("form", null, h("bs-select", { name: "fruit", value: "apple", options: options })));
+        await waitForChanges();
+        const fd = new FormData(root);
+        expect(fd.get('fruit')).toBe('apple');
+    });
+    it('long lists scroll inside the listbox', async () => {
+        const many = Array.from({ length: 50 }, (_, i) => ({ label: `Option ${i}`, value: `${i}` }));
+        const { root, field, waitForChanges } = await setup({ options: many });
+        field.click();
+        await waitForChanges();
+        const list = root.shadowRoot.querySelector('[role="listbox"]');
+        expect(getComputedStyle(list).overflowY).toBe('auto');
+        expect(list.scrollHeight).toBeGreaterThan(list.clientHeight);
+    });
+});

package/dist/collection/components/bs-select/bs-select.css

@@ -0,0 +1,231 @@
+/**
+ * @prop --bs-select-radius: Corner radius of the field. Aliased to --bs-border-radius-100.
+ * @prop --bs-select-height: Height of the field. Aliased to --bs-spacing-550 (44px).
+ * @prop --bs-select-padding-x: Horizontal padding of the field. Aliased to --bs-spacing-150.
+ * @prop --bs-select-stack-gap: Vertical gap between label, field and helper text. Aliased to --bs-spacing-50.
+ * @prop --bs-select-icon-size: Chevron / check size. Aliased to --bs-spacing-300.
+ * @prop --bs-select-field-bg: Field background. Aliased to --bs-input-bg-default.
+ * @prop --bs-select-field-bg-disabled: Field background, disabled. Aliased to --bs-input-bg-disabled.
+ * @prop --bs-select-field-border: Field border color. Aliased to --bs-input-border-default.
+ * @prop --bs-select-field-border-hover: Field border color on hover. Aliased to --bs-input-border-hover.
+ * @prop --bs-select-field-border-focus: Field border color when focused or open. Aliased to --bs-input-border-focus.
+ * @prop --bs-select-field-border-error: Field border color in the error state. Aliased to --bs-input-border-error.
+ * @prop --bs-select-field-text: Selected value color. Aliased to --bs-input-text.
+ * @prop --bs-select-field-text-disabled: Value color, disabled. Aliased to --bs-input-text-disabled.
+ * @prop --bs-select-placeholder-color: Placeholder color. Aliased to --bs-input-placeholder.
+ * @prop --bs-select-icon-color: Chevron color. Aliased to --bs-icon-muted.
+ * @prop --bs-select-label-color: Label color. Aliased to --bs-input-label.
+ * @prop --bs-select-description-color: Helper text color. Aliased to --bs-input-description.
+ * @prop --bs-select-error-color: Error text color. Aliased to --bs-input-error.
+ * @prop --bs-select-listbox-bg: Listbox background. Aliased to --bs-surface-raised.
+ * @prop --bs-select-listbox-radius: Listbox corner radius. Aliased to --bs-border-radius-100.
+ * @prop --bs-select-listbox-shadow: Listbox shadow. Aliased to --bs-shadow-md.
+ * @prop --bs-select-listbox-max-height: Height at which a long list starts to scroll. Aliased to --bs-scale-3200.
+ * @prop --bs-select-listbox-z-index: Listbox stacking order. Aliased to --bs-z-index-popover.
+ * @prop --bs-select-option-height: Minimum option row height. Aliased to --bs-spacing-550.
+ * @prop --bs-select-option-hover: Option background when highlighted. Aliased to --bs-color-neutral-container-hover.
+ * @prop --bs-select-option-selected: Option background when selected. Aliased to --bs-surface-selected.
+ * @prop --bs-select-option-color: Option text color. Aliased to --bs-text-default.
+ * @prop --bs-select-option-color-disabled: Disabled option text color. Aliased to --bs-text-on-disabled.
+ * @prop --bs-select-check-color: Selected check mark color. Aliased to --bs-icon-action.
+ * @prop --bs-select-focus-ring-color: Keyboard focus ring. Aliased to --bs-border-neutral-focus.
+ */
+:host {
+  display: block;
+  position: relative;
+
+  --bs-select-radius: var(--bs-border-radius-100);
+  --bs-select-height: var(--bs-spacing-550);
+  --bs-select-padding-x: var(--bs-spacing-150);
+  --bs-select-stack-gap: var(--bs-spacing-50);
+  --bs-select-icon-size: var(--bs-spacing-300);
+
+  --bs-select-field-bg: var(--bs-input-bg-default);
+  --bs-select-field-bg-disabled: var(--bs-input-bg-disabled);
+  --bs-select-field-border: var(--bs-input-border-default);
+  --bs-select-field-border-hover: var(--bs-input-border-hover);
+  --bs-select-field-border-focus: var(--bs-input-border-focus);
+  --bs-select-field-border-error: var(--bs-input-border-error);
+  --bs-select-field-text: var(--bs-input-text);
+  --bs-select-field-text-disabled: var(--bs-input-text-disabled);
+  --bs-select-placeholder-color: var(--bs-input-placeholder);
+  --bs-select-icon-color: var(--bs-icon-muted);
+  --bs-select-label-color: var(--bs-input-label);
+  --bs-select-description-color: var(--bs-input-description);
+  --bs-select-error-color: var(--bs-input-error);
+
+  --bs-select-listbox-bg: var(--bs-surface-raised);
+  --bs-select-listbox-radius: var(--bs-border-radius-100);
+  --bs-select-listbox-shadow: var(--bs-shadow-md);
+  --bs-select-listbox-max-height: var(--bs-scale-3200);
+  --bs-select-listbox-z-index: var(--bs-z-index-popover);
+  --bs-select-option-height: var(--bs-spacing-550);
+  --bs-select-option-hover: var(--bs-color-neutral-container-hover);
+  --bs-select-option-selected: var(--bs-surface-selected);
+  --bs-select-option-color: var(--bs-text-default);
+  --bs-select-option-color-disabled: var(--bs-text-on-disabled);
+  --bs-select-check-color: var(--bs-icon-action);
+  --bs-select-focus-ring-color: var(--bs-border-neutral-focus);
+}
+
+.bs-select {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bs-select-stack-gap);
+  font-family: inherit;
+}
+
+.bs-select__label {
+  font-size: var(--bs-font-size-sm);
+  font-weight: var(--bs-font-weight-medium);
+  color: var(--bs-select-label-color);
+}
+
+.bs-select__required {
+  color: var(--bs-select-error-color);
+  margin-inline-start: 2px;
+}
+
+.bs-select__wrapper {
+  position: relative;
+}
+
+.bs-select__field {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  height: var(--bs-select-height);
+  padding: 0 var(--bs-select-padding-x);
+  border: 1px solid var(--bs-select-field-border);
+  border-radius: var(--bs-select-radius);
+  background: var(--bs-select-field-bg);
+  color: var(--bs-select-field-text);
+  font-size: var(--bs-font-size-md);
+  cursor: pointer;
+  outline: none;
+}
+
+.bs-select__field:hover:not(.bs-select__field--disabled) {
+  border-color: var(--bs-select-field-border-hover);
+}
+
+.bs-select__field:focus-visible,
+.bs-select__field--open {
+  border-color: var(--bs-select-field-border-focus);
+}
+
+.bs-select__field:focus-visible {
+  outline: 2px solid var(--bs-select-focus-ring-color);
+  outline-offset: 2px;
+}
+
+.bs-select__field--error {
+  border-color: var(--bs-select-field-border-error);
+}
+
+.bs-select__field--disabled {
+  background: var(--bs-select-field-bg-disabled);
+  color: var(--bs-select-field-text-disabled);
+  cursor: not-allowed;
+}
+
+.bs-select__value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bs-select__value--placeholder {
+  color: var(--bs-select-placeholder-color);
+}
+
+.bs-select__chevron {
+  flex-shrink: 0;
+  width: var(--bs-select-icon-size);
+  height: var(--bs-select-icon-size);
+  color: var(--bs-select-icon-color);
+  transition: transform 0.15s ease;
+}
+
+.bs-select__field--open .bs-select__chevron {
+  transform: rotate(180deg);
+}
+
+.bs-select__listbox {
+  box-sizing: border-box;
+  position: absolute;
+  inset-inline: 0;
+  top: calc(100% + var(--bs-spacing-50));
+  z-index: var(--bs-select-listbox-z-index);
+  margin: 0;
+  padding: var(--bs-spacing-50) 0;
+  list-style: none;
+  max-height: var(--bs-select-listbox-max-height);
+  overflow-y: auto;
+  background: var(--bs-select-listbox-bg);
+  border-radius: var(--bs-select-listbox-radius);
+  box-shadow: var(--bs-select-listbox-shadow);
+}
+
+.bs-select__listbox[hidden] {
+  display: none;
+}
+
+.bs-select__option {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--bs-spacing-100);
+  min-height: var(--bs-select-option-height);
+  padding: var(--bs-spacing-100) var(--bs-select-padding-x);
+  color: var(--bs-select-option-color);
+  font-size: var(--bs-font-size-md);
+  cursor: pointer;
+}
+
+.bs-select__option--active {
+  background: var(--bs-select-option-hover);
+}
+
+.bs-select__option--selected {
+  background: var(--bs-select-option-selected);
+  font-weight: var(--bs-font-weight-semibold);
+}
+
+.bs-select__option--selected.bs-select__option--active {
+  background: var(--bs-select-option-hover);
+}
+
+.bs-select__option--disabled {
+  color: var(--bs-select-option-color-disabled);
+  cursor: not-allowed;
+}
+
+.bs-select__check {
+  flex-shrink: 0;
+  width: var(--bs-select-icon-size);
+  height: var(--bs-select-icon-size);
+  color: var(--bs-select-check-color);
+}
+
+.bs-select__description,
+.bs-select__error {
+  font-size: var(--bs-font-size-sm);
+}
+
+.bs-select__description {
+  color: var(--bs-select-description-color);
+}
+
+.bs-select__error {
+  color: var(--bs-select-error-color);
+}
+
+@media (forced-colors: active) {
+  .bs-select__field { border-color: ButtonText; }
+  .bs-select__option--active { background: Highlight; color: HighlightText; }
+}