@brandsync/wc 1.19.0 → 1.20.1

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; }
+}