@brandsync/wc 1.7.0 → 1.9.0

package/dist/collection/components/forms/forms.stories.js

@@ -0,0 +1,63 @@
+import { html } from "lit";
+// Live examples for the Forms guide (forms.mdx). Not a component -- it shows how the
+// form-associated controls behave inside a plain native <form>.
+// Prints exactly what the browser would send, so the story shows the real FormData rather than a
+// mocked-up result.
+const showFormData = (ev) => {
+    ev.preventDefault();
+    const form = ev.currentTarget;
+    const out = form.parentElement?.querySelector('pre');
+    if (!out)
+        return;
+    const lines = [];
+    new FormData(form).forEach((value, key) => lines.push(`${key} = ${JSON.stringify(value)}`));
+    out.textContent = lines.length ? lines.join('\n') : '(no entries)';
+};
+const meta = {
+    title: 'Guides/Forms',
+    parameters: { layout: 'padded' },
+};
+export default meta;
+const output = html `<pre style="margin: 16px 0 0; padding: 12px; background: #f4f4f4; color: #111; border-radius: 4px; min-height: 3em;">
+Submit to see the FormData…</pre
+>`;
+export const Default = {
+    render: () => html `
+    <div style="max-width: 420px;">
+      <form @submit=${showFormData} style="display: flex; flex-direction: column; gap: 16px;">
+        <bs-input name="email" type="email" label="Email" required></bs-input>
+        <bs-input name="notes" type="textarea" label="Notes"></bs-input>
+        <div role="radiogroup" aria-label="Plan" style="display: flex; flex-direction: column; gap: 8px;">
+          <bs-radio name="plan" value="free" checked>Free</bs-radio>
+          <bs-radio name="plan" value="pro">Pro</bs-radio>
+        </div>
+        <bs-checkbox name="terms" value="accepted" required>I accept the terms</bs-checkbox>
+        <bs-switch name="alerts" checked>Email alerts</bs-switch>
+        <bs-slider name="volume" label="Volume" value="40" aria-label="Volume"></bs-slider>
+        <div style="display: flex; gap: 8px;">
+          <bs-button type="submit">Submit</bs-button>
+          <bs-button type="reset" variant="outlined">Reset</bs-button>
+        </div>
+      </form>
+      ${output}
+    </div>
+  `,
+};
+// Required fields: submitting with an empty required bs-input or an unchecked required bs-checkbox is
+// blocked by the browser (requestSubmit runs validation), and the form reports invalid.
+export const Validation = {
+    render: () => html `
+    <div style="max-width: 420px;">
+      <form
+        @submit=${showFormData}
+        @invalid=${(ev) => ev.preventDefault()}
+        style="display: flex; flex-direction: column; gap: 16px;"
+      >
+        <bs-input name="name" label="Name" required></bs-input>
+        <bs-checkbox name="terms" required>I accept the terms</bs-checkbox>
+        <bs-button type="submit">Submit (blocked until valid)</bs-button>
+      </form>
+      ${output}
+    </div>
+  `,
+};

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.cmp.test.js

@@ -1,5 +1,21 @@
 import { render, h, describe, it, expect } from "@stencil/vitest";
+import { afterEach, beforeEach } from "vitest";
 import { page } from "vitest/browser";
+import { runAxeCheck } from "../../../../test/helpers/conventions";
+// The test browser (and its viewport) is shared across test files, so every test here starts from a
+// known viewport and restores whatever it found. The default 414px viewport is inside the drawer's
+// small-screen (<= 768px) overlay mode, so the original tests -- written for the desktop drawer --
+// run at 1024px; the overlay has its own describe at 390px below.
+const previousViewport = { w: 0, h: 0 };
+beforeEach(async () => {
+    previousViewport.w = window.innerWidth;
+    previousViewport.h = window.innerHeight;
+    await page.viewport(1024, 768);
+});
+afterEach(async () => {
+    await page.viewport(previousViewport.w, previousViewport.h);
+    document.body.style.overflow = '';
+});
 describe('bs-navigation-drawer', () => {
     it('renders a <nav> landmark with the logo', async () => {
         const { root } = await render(h("bs-navigation-drawer", null));
@@ -110,11 +126,8 @@ describe('bs-navigation-drawer', () => {
             expect(searchClickSpy).toHaveReceivedEventTimes(1);
         });
         it('hides the search-trigger button when not collapsed', async () => {
-            // The default test viewport (414px) is inside this component's own <= 768px small-screen
-            // breakpoint (see bs-navigation-drawer.css), which forces the same visual treatment as
-            // `collapsed` regardless of the prop -- widen the viewport here so this test is isolated to
-            // the `collapsed` *prop*'s own behavior, not the viewport-driven treatment.
-            await page.viewport(1024, 768);
+            // Desktop viewport (set for the whole file above), so this is isolated to the `collapsed`
+            // *prop*'s own behavior, not the small-screen overlay.
             const { root } = await render(h("bs-navigation-drawer", null));
             const trigger = root.shadowRoot.querySelector('[part="search-trigger"]');
             expect(getComputedStyle(trigger).display).toBe('none');
@@ -147,3 +160,158 @@ describe('bs-navigation-drawer', () => {
         });
     });
 });
+describe('bs-navigation-drawer: small-screen overlay (<= 768px)', () => {
+    const frame = () => new Promise(r => requestAnimationFrame(() => requestAnimationFrame(() => r())));
+    const nav = (root) => root.shadowRoot.querySelector('nav');
+    const backdrop = (root) => root.shadowRoot.querySelector('[part="backdrop"]');
+    const css = (el) => getComputedStyle(el);
+    const renderDrawer = async (props = {}) => {
+        await page.viewport(390, 800);
+        const result = await render(h("bs-navigation-drawer", { ...props }, h("bs-navigation-drawer-item", null, "Home"), h("bs-navigation-drawer-item", { expandable: true, expanded: true }, "Reports", h("bs-navigation-drawer-item", { slot: "children", nested: true }, "Sales"))));
+        await result.waitForChanges();
+        return result;
+    };
+    it('is closed by default: off-canvas, hidden from the tab order and the accessibility tree', async () => {
+        const { root } = await renderDrawer();
+        expect(css(nav(root)).visibility).toBe('hidden');
+        expect(nav(root)).not.toHaveClass('bs-navigation-drawer--open');
+        expect(nav(root).getAttribute('role')).toBeNull();
+        expect(css(backdrop(root)).visibility).toBe('hidden');
+    });
+    it('takes no space in the page flow (position: fixed)', async () => {
+        const { root } = await renderDrawer();
+        expect(css(nav(root)).position).toBe('fixed');
+    });
+    it('open shows the drawer fully expanded over a backdrop', async () => {
+        const { root, waitForChanges } = await renderDrawer();
+        root.open = true;
+        await waitForChanges();
+        await new Promise(r => setTimeout(r, 350)); // let the slide-in finish
+        expect(css(nav(root)).visibility).toBe('visible');
+        expect(Math.round(nav(root).getBoundingClientRect().left)).toBe(0);
+        expect(Math.round(nav(root).getBoundingClientRect().width)).toBe(280);
+        // still the plain nav landmark: ARIA does not allow role="dialog" on <nav>
+        expect(nav(root).getAttribute('role')).toBeNull();
+        expect(css(backdrop(root)).visibility).toBe('visible');
+        // full wordmark + title, not the rail's mark; no collapse toggle or compact search trigger
+        expect(css(root.shadowRoot.querySelector('.bs-navigation-drawer__logo--full')).display).not.toBe('none');
+        expect(css(root.shadowRoot.querySelector('.bs-navigation-drawer__logo--mark')).display).toBe('none');
+        expect(css(root.shadowRoot.querySelector('[part="title"]')).display).not.toBe('none');
+        expect(css(root.shadowRoot.querySelector('[part="collapse"]')).display).toBe('none');
+        expect(css(root.shadowRoot.querySelector('[part="search-trigger"]')).display).toBe('none');
+    });
+    it('forces the items to their expanded layout, even when the drawer has collapsed set', async () => {
+        const { root, waitForChanges } = await renderDrawer({ collapsed: true });
+        root.open = true;
+        await waitForChanges();
+        const topLevel = Array.from(root.querySelectorAll(':scope > bs-navigation-drawer-item'));
+        expect(topLevel.map(i => i.collapsed)).toEqual([false, false]);
+        // the expandable item's children are reachable (its children wrapper is shown)
+        const children = topLevel[1].shadowRoot.querySelector('[part="children"]');
+        expect(children).not.toBeNull();
+        expect(css(children).display).not.toBe('none');
+    });
+    it('Escape closes the overlay, sets open back to false and emits bsClose once', async () => {
+        const { root, waitForChanges, spyOnEvent } = await renderDrawer();
+        const spy = spyOnEvent('bsClose');
+        root.open = true;
+        await waitForChanges();
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        await waitForChanges();
+        expect(root.open).toBe(false);
+        expect(root.hasAttribute('open')).toBe(false);
+        expect(spy).toHaveReceivedEventTimes(1);
+    });
+    it('clicking the backdrop closes the overlay and emits bsClose', async () => {
+        const { root, waitForChanges, spyOnEvent } = await renderDrawer();
+        const spy = spyOnEvent('bsClose');
+        root.open = true;
+        await waitForChanges();
+        backdrop(root).click();
+        await waitForChanges();
+        expect(root.open).toBe(false);
+        expect(spy).toHaveReceivedEventTimes(1);
+    });
+    it('setting open = false from code does not emit bsClose', async () => {
+        const { root, waitForChanges, spyOnEvent } = await renderDrawer({ open: true });
+        const spy = spyOnEvent('bsClose');
+        root.open = false;
+        await waitForChanges();
+        expect(spy).not.toHaveReceivedEvent();
+    });
+    it('Escape does nothing while the overlay is closed', async () => {
+        const { waitForChanges, spyOnEvent } = await renderDrawer();
+        const spy = spyOnEvent('bsClose');
+        document.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape', bubbles: true }));
+        await waitForChanges();
+        expect(spy).not.toHaveReceivedEvent();
+    });
+    it('moves focus into the overlay on open and returns it to the trigger on close', async () => {
+        await page.viewport(390, 800);
+        const { root, waitForChanges } = await render(h("div", null, h("button", { id: "hamburger" }, "Menu"), h("bs-navigation-drawer", null, h("bs-navigation-drawer-item", null, "Home"))));
+        const trigger = root.querySelector('#hamburger');
+        const drawer = root.querySelector('bs-navigation-drawer');
+        trigger.focus();
+        drawer.open = true;
+        await waitForChanges();
+        await frame();
+        expect(drawer.shadowRoot.activeElement).toBe(nav(drawer));
+        drawer.open = false;
+        await waitForChanges();
+        expect(document.activeElement).toBe(trigger);
+    });
+    it('keeps focus inside the open overlay: focus that lands outside is pulled back in', async () => {
+        await page.viewport(390, 800);
+        const { root, waitForChanges } = await render(h("div", null, h("button", { id: "outside" }, "Outside"), h("bs-navigation-drawer", { open: true }, h("bs-navigation-drawer-item", null, "Home"))));
+        await waitForChanges();
+        await frame();
+        const drawer = root.querySelector('bs-navigation-drawer');
+        root.querySelector('#outside').focus();
+        await frame();
+        expect(drawer.shadowRoot.activeElement).toBe(nav(drawer));
+    });
+    it('locks page scroll while open and restores it on close', async () => {
+        const { root, waitForChanges } = await renderDrawer();
+        expect(document.body.style.overflow).toBe('');
+        root.open = true;
+        await waitForChanges();
+        expect(document.body.style.overflow).toBe('hidden');
+        root.open = false;
+        await waitForChanges();
+        expect(document.body.style.overflow).toBe('');
+    });
+    it('on wider screens open is ignored: in the page flow, no backdrop, no scroll lock', async () => {
+        await page.viewport(1024, 768);
+        const { root, waitForChanges } = await render(h("bs-navigation-drawer", { open: true }));
+        await waitForChanges();
+        expect(css(nav(root)).position).not.toBe('fixed');
+        expect(css(nav(root)).visibility).toBe('visible');
+        expect(backdrop(root)).toBeNull();
+        expect(document.body.style.overflow).toBe('');
+        expect(nav(root).getAttribute('role')).toBeNull();
+    });
+    it('widening the viewport while the overlay is open returns to the normal drawer and releases scroll', async () => {
+        const { root, waitForChanges } = await renderDrawer({ open: true });
+        expect(document.body.style.overflow).toBe('hidden');
+        await page.viewport(1024, 768);
+        await new Promise(r => setTimeout(r, 150));
+        await waitForChanges();
+        expect(css(nav(root)).position).not.toBe('fixed');
+        expect(document.body.style.overflow).toBe('');
+        expect(backdrop(root)).toBeNull();
+    });
+    it('is off-canvas on the inline-end side in RTL', async () => {
+        await page.viewport(390, 800);
+        const { root, waitForChanges } = await render(h("div", { dir: "rtl" }, h("bs-navigation-drawer", null)));
+        await waitForChanges();
+        const drawer = root.querySelector('bs-navigation-drawer');
+        // closed: translated by +100% of its width (to the right, off-screen) rather than -100%
+        expect(new DOMMatrix(css(nav(drawer)).transform).m41).toBeGreaterThan(0);
+    });
+    it('has no axe-core violations while open', async () => {
+        const { root, waitForChanges } = await renderDrawer({ open: true });
+        await waitForChanges();
+        await new Promise(r => setTimeout(r, 350));
+        await runAxeCheck(root);
+    });
+});

package/dist/collection/components/ui-shell/bs-navigation-drawer/bs-navigation-drawer/bs-navigation-drawer.css

@@ -12,10 +12,9 @@
  *   rhythm) -- bumped up from the originally Figma-measured --bs-spacing-150 (12px) at the user's
  *   request after seeing it rendered (felt cramped in practice), not a Figma re-measurement.
  * @prop --bs-navigation-drawer-width: Default width of the drawer. 280px, matching Figma's own
- *   frame -- overridable by a consumer that needs a different fixed width. Below a 768px viewport
- *   width, this is overridden by a `@media (max-width: 768px)` rule that forces the existing
- *   `collapsed` 96px icon-only rail treatment instead (see --bs-navigation-drawer-collapsed-width
- *   below), so the drawer stops reserving a permanent 280px of layout width on small screens.
+ *   frame -- overridable by a consumer that needs a different fixed width. At 768px and below the
+ *   drawer is an off-canvas overlay (see `open`) of this same width (capped at the viewport
+ *   width), so it stops reserving a permanent 280px of layout width on small screens.
  * @prop --bs-navigation-drawer-title-font-family: Title text font family. Aliased to
  *   --bs-typography-font-family-heading.
  * @prop --bs-navigation-drawer-title-font-weight: Title text font weight. Aliased to
@@ -50,6 +49,14 @@
  *   --bs-border-neutral-container (same border color as the drawer's own right edge).
  * @prop --bs-navigation-drawer-search-trigger-icon: Search-trigger icon color. Aliased to
  *   --bs-icon-default.
+ * @prop --bs-navigation-drawer-backdrop: Scrim behind the small-screen overlay. Aliased to
+ *   --bs-surface-overlay-level-2.
+ * @prop --bs-navigation-drawer-overlay-shadow: Shadow of the small-screen overlay panel. Aliased
+ *   to --bs-shadow-lg.
+ * @prop --bs-navigation-drawer-overlay-z-index: Stacking order of the small-screen overlay (the
+ *   panel sits one above its backdrop). Aliased to --bs-z-index-modal.
+ * @prop --bs-navigation-drawer-overlay-duration: Slide/fade duration of the small-screen overlay.
+ *   Aliased to --bs-duration-default.
  */
 :host {
   display: block;
@@ -82,6 +89,11 @@
   --bs-navigation-drawer-search-trigger-bg: var(--bs-color-neutral-container);
   --bs-navigation-drawer-search-trigger-border: var(--bs-border-neutral-container);
   --bs-navigation-drawer-search-trigger-icon: var(--bs-icon-default);
+
+  --bs-navigation-drawer-backdrop: var(--bs-surface-overlay-level-2);
+  --bs-navigation-drawer-overlay-shadow: var(--bs-shadow-lg);
+  --bs-navigation-drawer-overlay-z-index: var(--bs-z-index-modal);
+  --bs-navigation-drawer-overlay-duration: var(--bs-duration-default);
 }
 
 .bs-navigation-drawer {
@@ -259,41 +271,101 @@
   display: none;
 }
 
-/* Below 768px (a standard tablet/small-screen breakpoint, and the narrow end of this component's
-   normal tablet-and-up usage) a permanently-reserved 280px-wide drawer pushes page content down to
-   an unusably narrow remainder on real small-screen viewports (e.g. 390px). This library has no
-   existing width-based @media breakpoint convention to follow (grepping every other component's
-   CSS only turns up `@media (prefers-reduced-motion: reduce)`), so rather than inventing new
-   open/closed overlay API, this reuses the drawer's own existing `collapsed` 96px icon-only rail
-   treatment (see the `:host([collapsed])` rules above) and applies it unconditionally at this
-   width -- same rail, now driven by viewport instead of only by the `collapsed` prop/toggle. Placed
-   last in this file so it wins over the unscoped `.bs-navigation-drawer`/`__title`/etc. rules above
-   on specificity ties, regardless of whether `collapsed` happens to be reflected on the host. */
-@media (max-width: 768px) {
-  .bs-navigation-drawer {
-    width: var(--bs-navigation-drawer-collapsed-width);
-    padding-left: 0;
-    padding-right: 0;
-    align-items: center;
-  }
+/* Small screens (768px and below, tracked in bs-navigation-drawer.tsx with matchMedia, which sets
+   the `data-overlay` attribute on the host): instead of a permanent rail the drawer becomes an
+   off-canvas overlay -- hidden until `open`, then sliding in over the page with a backdrop. A rail
+   clipped item labels inside 96px and offered no way to reach nested items, so the overlay shows the
+   drawer fully expanded (the items are switched to their expanded layout in the component). The
+   overrides below intentionally come after, and match the specificity of, the `:host([collapsed])`
+   rules above, so a `collapsed` set for desktop never leaks into the overlay. */
+.bs-navigation-drawer:focus {
+  outline: none; /* programmatic focus target only (tabindex="-1"), see the component */
+}
 
-  .bs-navigation-drawer__logo--full {
-    display: none;
-  }
+:host([data-overlay]) .bs-navigation-drawer {
+  position: fixed;
+  inset-block: 0;
+  inset-inline-start: 0;
+  z-index: calc(var(--bs-navigation-drawer-overlay-z-index) + 1);
+  width: var(--bs-navigation-drawer-width);
+  max-width: 100vw;
+  padding: var(--bs-navigation-drawer-padding-y) var(--bs-navigation-drawer-padding-right) var(--bs-navigation-drawer-padding-y)
+    var(--bs-navigation-drawer-padding-left);
+  align-items: stretch;
+  box-shadow: var(--bs-navigation-drawer-overlay-shadow);
+  /* Closed: off-canvas and hidden from the tab order / accessibility tree. `visibility` flips after
+     the slide-out finishes (delayed transition) so the exit is still seen. */
+  transform: translateX(-100%);
+  visibility: hidden;
+  transition:
+    transform var(--bs-navigation-drawer-overlay-duration) var(--bs-easing-standard),
+    visibility 0s linear var(--bs-navigation-drawer-overlay-duration);
+}
 
-  .bs-navigation-drawer__logo--mark {
-    display: flex;
-  }
+:host([data-overlay]:dir(rtl)) .bs-navigation-drawer {
+  transform: translateX(100%);
+}
 
-  .bs-navigation-drawer__title {
-    display: none;
-  }
+:host([data-overlay]) .bs-navigation-drawer.bs-navigation-drawer--open {
+  transform: none;
+  visibility: visible;
+  transition:
+    transform var(--bs-navigation-drawer-overlay-duration) var(--bs-easing-standard),
+    visibility 0s;
+}
+
+/* Fully expanded inside the overlay, whatever `collapsed` says. Nothing sits behind the collapse
+   toggle or the compact search trigger here, so neither is shown. */
+:host([data-overlay]) .bs-navigation-drawer__logo--full {
+  display: flex;
+}
+
+:host([data-overlay]) .bs-navigation-drawer__logo--mark {
+  display: none;
+}
+
+:host([data-overlay]) .bs-navigation-drawer__title {
+  display: block;
+}
+
+:host([data-overlay]) .bs-navigation-drawer__search {
+  display: block;
+}
+
+:host([data-overlay]) .bs-navigation-drawer__search-trigger,
+:host([data-overlay]) .bs-navigation-drawer__collapse {
+  display: none;
+}
+
+.bs-navigation-drawer__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--bs-navigation-drawer-overlay-z-index);
+  background: var(--bs-navigation-drawer-backdrop);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity var(--bs-navigation-drawer-overlay-duration) var(--bs-easing-standard),
+    visibility 0s linear var(--bs-navigation-drawer-overlay-duration);
+}
 
-  .bs-navigation-drawer__search {
-    display: none;
+:host([open]) .bs-navigation-drawer__backdrop {
+  opacity: 1;
+  visibility: visible;
+  transition:
+    opacity var(--bs-navigation-drawer-overlay-duration) var(--bs-easing-standard),
+    visibility 0s;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host([data-overlay]) .bs-navigation-drawer,
+  .bs-navigation-drawer__backdrop {
+    transition: none;
   }
+}
 
-  .bs-navigation-drawer__search-trigger {
-    display: inline-flex;
+@media (forced-colors: active) {
+  :host([data-overlay]) .bs-navigation-drawer {
+    border: 1px solid CanvasText;
   }
 }