@ds-autonomie/web-components 2.9.1 → 2.11.0

package/dist/internal/tabbable.js

@@ -1,31 +1,78 @@
+// Cached compute style calls. This is specifically for browsers that dont support `checkVisibility()`.
+// computedStyle calls are "live" so they only need to be retrieved once for an element.
+const computedStyleMap = new WeakMap();
+function getCachedComputedStyle(el) {
+    let computedStyle = computedStyleMap.get(el);
+    if (!computedStyle) {
+        computedStyle = window.getComputedStyle(el, null);
+        computedStyleMap.set(el, computedStyle);
+    }
+    return computedStyle;
+}
+function isVisible(el) {
+    // This is the fastest check, but isn't supported in Safari.
+    if (typeof el.checkVisibility === 'function') {
+        // Opacity is focusable, visibility is not.
+        return el.checkVisibility({
+            checkOpacity: false,
+            checkVisibilityCSS: true,
+        });
+    }
+    // Fallback "polyfill" for "checkVisibility"
+    const computedStyle = getCachedComputedStyle(el);
+    return (computedStyle.visibility !== 'hidden' && computedStyle.display !== 'none');
+}
+// While this behavior isn't standard in Safari / Chrome yet, I think it's the most reasonable
+// way of handling tabbable overflow areas. Browser sniffing seems gross, and it's the most
+// accessible way of handling overflow areas. [Konnor]
+function isOverflowingAndTabbable(el) {
+    const computedStyle = getCachedComputedStyle(el);
+    const { overflowY, overflowX } = computedStyle;
+    if (overflowY === 'scroll' || overflowX === 'scroll') {
+        return true;
+    }
+    if (overflowY !== 'auto' || overflowX !== 'auto') {
+        return false;
+    }
+    // Always overflow === "auto" by this point
+    const isOverflowingY = el.scrollHeight > el.clientHeight;
+    if (isOverflowingY && overflowY === 'auto') {
+        return true;
+    }
+    const isOverflowingX = el.scrollWidth > el.clientWidth;
+    if (isOverflowingX && overflowX === 'auto') {
+        return true;
+    }
+    return false;
+}
 /** Determines if the specified element is tabbable using heuristics inspired by https://github.com/focus-trap/tabbable */
 function isTabbable(el) {
     const tag = el.tagName.toLowerCase();
-    // Elements with a -1 tab index are not tabbable
-    if (el.getAttribute('tabindex') === '-1') {
+    const tabindex = Number(el.getAttribute('tabindex'));
+    const hasTabindex = el.hasAttribute('tabindex');
+    // elements with a tabindex attribute that is either NaN or <= -1 are not tabbable
+    if (hasTabindex && (isNaN(tabindex) || tabindex <= -1)) {
         return false;
     }
     // Elements with a disabled attribute are not tabbable
     if (el.hasAttribute('disabled')) {
         return false;
     }
-    // Elements with aria-disabled are not tabbable
-    if (el.hasAttribute('aria-disabled') &&
-        el.getAttribute('aria-disabled') !== 'false') {
-        return false;
-    }
-    // Radios without a checked attribute are not tabbable
-    if (tag === 'input' &&
-        el.getAttribute('type') === 'radio' &&
-        !el.hasAttribute('checked')) {
+    // If any parents have "inert", we aren't "tabbable"
+    if (el.closest('[inert]')) {
         return false;
     }
-    // Elements that are hidden have no offsetParent and are not tabbable
-    if (el.offsetParent === null) {
-        return false;
+    if (tag === 'input' && el.getAttribute('type') === 'radio') {
+        const rootNode = el.getRootNode();
+        const findRadios = `input[type='radio'][name="${el.getAttribute('name')}"]`;
+        const firstChecked = rootNode.querySelector(`${findRadios}:checked`);
+        if (firstChecked) {
+            return firstChecked === el;
+        }
+        const firstRadio = rootNode.querySelector(findRadios);
+        return firstRadio === el;
     }
-    // Elements without visibility are not tabbable
-    if (window.getComputedStyle(el).visibility === 'hidden') {
+    if (!isVisible(el)) {
         return false;
     }
     // Audio and video elements with the controls attribute are tabbable
@@ -42,7 +89,7 @@ function isTabbable(el) {
         return true;
     }
     // At this point, the following elements are considered tabbable
-    return [
+    const isNativelyTabbable = [
         'button',
         'input',
         'select',
@@ -51,7 +98,13 @@ function isTabbable(el) {
         'audio',
         'video',
         'summary',
+        'iframe',
     ].includes(tag);
+    if (isNativelyTabbable) {
+        return true;
+    }
+    // We save the overflow checks for last, because they're the most expensive
+    return isOverflowingAndTabbable(el);
 }
 /**
  * Returns the first and last bounding elements that are tabbable. This is more performant than checking every single
@@ -59,21 +112,60 @@ function isTabbable(el) {
  */
 export function getTabbableBoundary(root) {
     var _a, _b;
-    const allElements = [];
+    const tabbableElements = getTabbableElements(root);
+    // Find the first and last tabbable elements
+    const start = (_a = tabbableElements[0]) !== null && _a !== void 0 ? _a : null;
+    const end = (_b = tabbableElements[tabbableElements.length - 1]) !== null && _b !== void 0 ? _b : null;
+    return { start, end };
+}
+/**
+ * This looks funky. Basically a slot's children will always be picked up *if* they're within the `root` element.
+ * However, there is an edge case when, if the `root` is wrapped by another shadow DOM, it won't grab the children.
+ * This fixes that fun edge case.
+ */
+function getSlottedChildrenOutsideRootElement(slotElement, root) {
+    var _a;
+    return (((_a = slotElement.getRootNode({ composed: true })) === null || _a === void 0 ? void 0 : _a.host) !==
+        root);
+}
+export function getTabbableElements(root) {
+    const walkedEls = new WeakMap();
+    const tabbableElements = [];
     function walk(el) {
-        if (el instanceof HTMLElement) {
-            allElements.push(el);
+        if (el instanceof Element) {
+            // if the element has "inert" we can just no-op it.
+            if (el.hasAttribute('inert') || el.closest('[inert]')) {
+                return;
+            }
+            if (walkedEls.has(el)) {
+                return;
+            }
+            walkedEls.set(el, true);
+            if (!tabbableElements.includes(el) && isTabbable(el)) {
+                tabbableElements.push(el);
+            }
+            if (el instanceof HTMLSlotElement &&
+                getSlottedChildrenOutsideRootElement(el, root)) {
+                el.assignedElements({ flatten: true }).forEach((assignedEl) => {
+                    walk(assignedEl);
+                });
+            }
             if (el.shadowRoot !== null && el.shadowRoot.mode === 'open') {
                 walk(el.shadowRoot);
             }
         }
-        // @ts-expect-error cleanup upon implementation
-        [...el.children].forEach((e) => walk(e));
+        for (const e of el.children) {
+            walk(e);
+        }
     }
     // Collect all elements including the root
     walk(root);
-    // Find the first and last tabbable elements
-    const start = (_a = allElements.find((el) => isTabbable(el))) !== null && _a !== void 0 ? _a : null;
-    const end = (_b = allElements.reverse().find((el) => isTabbable(el))) !== null && _b !== void 0 ? _b : null;
-    return { start, end };
+    // Is this worth having? Most sorts will always add increased overhead. And positive tabindexes shouldn't really be used.
+    // So is it worth being right? Or fast?
+    return tabbableElements.sort((a, b) => {
+        // Make sure we sort by tabindex.
+        const aTabindex = Number(a.getAttribute('tabindex')) || 0;
+        const bTabindex = Number(b.getAttribute('tabindex')) || 0;
+        return bTabindex - aTabindex;
+    });
 }

package/dist/templates/utilities/decorator.d.ts

@@ -0,0 +1,6 @@
+import '../../components/footer-sitemap-item/footer-sitemap-item';
+import '../../components/footer-sitemap/footer-sitemap';
+import '../../components/footer/footer';
+import '../../components/header/header';
+import { Decorator } from '@storybook/web-components-vite';
+export declare const withPageTemplate: Decorator;

package/dist/templates/{decorator.js → utilities/decorator.js}

@@ -1,8 +1,8 @@
 import { html } from 'lit';
-import '../components/footer-sitemap-item/footer-sitemap-item';
-import '../components/footer-sitemap/footer-sitemap';
-import '../components/footer/footer';
-import '../components/header/header';
+import '../../components/footer-sitemap-item/footer-sitemap-item';
+import '../../components/footer-sitemap/footer-sitemap';
+import '../../components/footer/footer';
+import '../../components/header/header';
 export const withPageTemplate = (story) => html `
   <style>
     /** CSS Reset */

package/dist/templates/utilities/header.d.ts

@@ -0,0 +1,8 @@
+import '../../components/breadcrumb-item/breadcrumb-item';
+import '../../components/breadcrumb/breadcrumb';
+import '../../components/button/button';
+import '../../components/dropdown/dropdown';
+import '../../components/icon/icon';
+import '../../components/menu-item/menu-item';
+import '../../components/menu-navigation/menu-navigation';
+export declare const templatePageHeader: (title: string, withActions?: boolean) => import("lit").TemplateResult<1>;

package/dist/templates/utilities/header.js

@@ -0,0 +1,114 @@
+import { html } from 'lit';
+import '../../components/breadcrumb-item/breadcrumb-item';
+import '../../components/breadcrumb/breadcrumb';
+import '../../components/button/button';
+import '../../components/dropdown/dropdown';
+import '../../components/icon/icon';
+import '../../components/menu-item/menu-item';
+import '../../components/menu-navigation/menu-navigation';
+export const templatePageHeader = (title, withActions = false) => {
+    return html `
+    <style>
+      /** Header */
+      .page-header {
+        display: contents;
+      }
+      .title-and-actions {
+        display: flex;
+        flex-direction: column;
+        gap: var(--dsa-spacing-24);
+      }
+      .title-1 {
+        font: var(--dsa-font-x-large-bold);
+      }
+      .action-bar {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 1rem;
+      }
+
+      /** Media queries */
+      @media screen and (min-width: 600px) {
+        .title-and-actions {
+          gap: var(--dsa-spacing-32);
+        }
+        .title-1 {
+          font: var(--dsa-font-2x-large-bold);
+        }
+      }
+    </style>
+    <header class="page-header">
+      <dsa-breadcrumb>
+        <dsa-breadcrumb-item href="#">
+          <dsa-icon slot="prefix" name="home"></dsa-icon>
+          Accueil
+        </dsa-breadcrumb-item>
+        <dsa-breadcrumb-item href="#">${title}</dsa-breadcrumb-item>
+      </dsa-breadcrumb>
+      <div class="title-and-actions">
+        <h1 class="title-1">${title}</h1>
+        ${withActions
+        ? html `
+              <div class="action-bar">
+                <dsa-button variant="secondary" id="printButton"
+                  ><dsa-icon name="print" slot="prefix"></dsa-icon
+                  >Imprimer</dsa-button
+                >
+                <dsa-button variant="secondary" href="mailto:test@test.com"
+                  ><dsa-icon name="email" slot="prefix"></dsa-icon
+                  >Envoyer</dsa-button
+                >
+                <dsa-dropdown>
+                  <dsa-button slot="trigger" variant="secondary" caret
+                    ><dsa-icon name="send" slot="prefix"></dsa-icon
+                    >Partager</dsa-button
+                  >
+                  <dsa-menu-navigation>
+                    <dsa-menu-item
+                      type="link"
+                      target="_blank"
+                      href="https://twitter.com/intent/tweet?url=https://dsa.service-public-autonomie.fr/latest/demarrer/design-system-de-l-autonomie/presentation-A6ygvnwd&text=Documentation%20du%20Design%20System%20de%20l'autonomie"
+                    >
+                      <svg
+                        slot="prefix"
+                        viewBox="0 0 128 128"
+                        aria-hidden="true"
+                      >
+                        <path
+                          d="M75.916 54.2 122.542 0h-11.05L71.008 47.06 38.672 0H1.376l48.898 71.164L1.376 128h11.05L55.18 78.303 89.328 128h37.296L75.913 54.2ZM60.782 71.79l-4.955-7.086-39.42-56.386h16.972L65.19 53.824l4.954 7.086 41.353 59.15h-16.97L60.782 71.793Z"
+                          fill="#000"
+                          style="stroke-width:.104373"
+                        ></path>
+                      </svg>
+                      X / Twitter</dsa-menu-item
+                    >
+                    <dsa-menu-item
+                      type="link"
+                      target="_blank"
+                      href="https://www.linkedin.com/sharing/share-offsite/?url=https://dsa.service-public-autonomie.fr/latest/demarrer/design-system-de-l-autonomie/presentation-A6ygvnwd"
+                    >
+                      <svg
+                        slot="prefix"
+                        viewBox="0 0 128 128"
+                        aria-hidden="true"
+                      >
+                        <path
+                          fill="#0076b2"
+                          d="M116 3H12a8.91 8.91 0 00-9 8.8v104.42a8.91 8.91 0 009 8.78h104a8.93 8.93 0 009-8.81V11.77A8.93 8.93 0 00116 3z"
+                        ></path>
+                        <path
+                          fill="#fff"
+                          d="M21.06 48.73h18.11V107H21.06zm9.06-29a10.5 10.5 0 11-10.5 10.49 10.5 10.5 0 0110.5-10.49M50.53 48.73h17.36v8h.24c2.42-4.58 8.32-9.41 17.13-9.41C103.6 47.28 107 59.35 107 75v32H88.89V78.65c0-6.75-.12-15.44-9.41-15.44s-10.87 7.36-10.87 15V107H50.53z"
+                        ></path>
+                      </svg>
+                      Linkedin</dsa-menu-item
+                    >
+                  </dsa-menu-navigation>
+                </dsa-dropdown>
+              </div>
+            `
+        : ''}
+      </div>
+    </header>
+  `;
+};

package/dist/templates/utilities/template-story-config.d.ts

@@ -0,0 +1,16 @@
+import { ArgTypes } from '@storybook/web-components-vite';
+export declare const templateStoryConfig: {
+    parameters: {
+        layout: string;
+    };
+    globals: {
+        viewport: {
+            value: string;
+        };
+    };
+    decorators: import("@storybook/web-components-vite").Decorator[];
+    args: {
+        story_actions: boolean;
+    };
+    argTypes: ArgTypes;
+};

package/dist/templates/utilities/template-story-config.js

@@ -0,0 +1,20 @@
+import { withPageTemplate } from './decorator';
+export const templateStoryConfig = {
+    parameters: {
+        layout: 'fullscreen',
+    },
+    globals: {
+        viewport: { value: 'reset' },
+    },
+    decorators: [withPageTemplate],
+    args: {
+        story_actions: true,
+    },
+    argTypes: {
+        story_actions: {
+            name: 'actions',
+            description: '(Story) Add actions below main title',
+            control: { type: 'boolean' },
+        },
+    },
+};