@hgdc/ui 0.32.0 → 0.34.0

package/README.md

@@ -48,7 +48,7 @@ Primitives déjà là : `avatar` `badge` `button` `dialog` `drawer` `dropdown-me
 | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `app-shell`        | `<AppShell product="mail" organization={<OrgSwitcher …/>} nav={<SidebarNav label="Projet">…</SidebarNav>} links={{ documentation: "/docs", settings: { render: <Link to="/settings" /> } }} account={<AccountMenu …/>} onSearch={() => setOpen(true)} assistant={{ open, onOpenChange: setOpen, panel: <Conversation /> }}>` : Documentation, Réglages et État du service (la page de statut par défaut) juste au-dessus du compte ; bouton Assistant à côté de la recherche, panneau dans une colonne à droite (la page se rétrécit, vue dédiée sous 1280 px, Échap ferme, `shortcut: "j"` facultatif). `sidebarFooter` est déprécié |
 |                    | `<SidebarNavItem icon={Rocket01Icon} label="Déploiements" render={<Link to="/deployments" />} />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
-|                    | Navigation imbriquée (l'espace d'une page, d'un projet) : `<SidebarNavBack label="Retour aux pages" render={<Link to="/pages" />} />` en tête, puis `<SidebarNavGroup label="Réglages">…</SidebarNavGroup>` (titre muet, trait en rail)                                                                                                                                                                                                                                                                                                                                                                                               |
+|                    | Navigation imbriquée (l'espace d'une page, d'un projet) : `<SidebarNavBack label="Retour aux pages" render={<Link to="/pages" />} />` en tête, puis `<SidebarNavGroup label="Suivi">…</SidebarNavGroup>` (titre muet, trait en rail), ou `<SidebarNavGroup label="Réglages" collapsible icon={…} active={…}>` (entrée à flèche qui déroule ses rubriques, fermée par défaut, ouverte sur une rubrique active, mémorisée par navigateur)                                                                                                                                                                                               |
 | `org-switcher`     | `<OrgSwitcher organizations={orgs} activeId={org.id} onSelect={go} createHref="/organisations/nouvelle" />`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | `project-switcher` | `<ProjectSwitcher projects={projects} activeId={project?.id} activeName={params.project} allHref="/o/acme" createHref="/o/acme/new" renderLink={(href) => <Link to={href} />} />` : projet actif ou « Tous les projets », marque du projet (`ProjectMark`), « Nouveau projet »                                                                                                                                                                                                                                                                                                                                                        |
 | `account-menu`     | `<AccountMenu user={user} onProfile={…} onSecurity={…} onSignOut={signOut} product="Mail" />` : Account et les produits ouverts du catalogue, Mail coché. Dans l'ordre : identité, Profil, Sécurité, Thème (Système, Clair, Sombre, `ThemeSwitch`), entrées du produit, Se déconnecter. Ni « État du service » ni raccourcis : la coque pose le premier au-dessus du compte, l'aide garde sa touche `?`                                                                                                                                                                                                                               |
@@ -75,12 +75,12 @@ Une seule règle dans les sept produits, posée par la coque :
 
 ## Identité H Collection
 
-| Import                                  | Rôle                                                                                                                                                                                                                                                                                                                                                             |
-| --------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `product-badge`                         | `<ProductBadge product="host" className="size-8" />` (carré blanc arrondi, la même forme partout), `<FamilyMark />` (le H « Double », clair et sombre selon le thème), `PRODUCT_GRADIENT`                                                                                                                                                                        |
-| `@hgdc/ui/family/<mot>.svg`             | Pictogrammes des produits (`account`, `host`, `mail`, `portal`, `status`, `analytics`, `docs`), originaux du site ; `family/tile/<mot>.svg` (carré blanc arrondi) ; `family/app/<mot>/` : favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, icon-maskable-512.png, posés dans `public/` au build par `hgdc-brand sync <mot>` (jamais versionnés) |
-| `@hgdc/ui/family/hcollection-icon*.svg` | Le H « Double », marque de la H Collection, sur fond clair (`hcollection-icon.svg`) ou sombre (`-dark`), jamais recoloré                                                                                                                                                                                                                                         |
-| `styles.css`                            | `--product-<mot>-from` / `--product-<mot>-to` (dégradé de chaque icône sur fond clair), `--glow-blue`, `--glow-violet`, `--glow-pink`, `--glow-orange`                                                                                                                                                                                                           |
+| Import                                  | Rôle                                                                                                                                                                                                                                                                                                                                                                                         |
+| --------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `product-badge`                         | `<ProductBadge product="host" className="size-8" />` (pictogramme seul, sans fond), `<FamilyMark />` (le H « Double », clair et sombre selon le thème), `PRODUCT_GRADIENT`                                                                                                                                                                                                                   |
+| `@hgdc/ui/family/<mot>.svg`             | Pictogrammes des produits (`account`, `host`, `mail`, `portal`, `status`, `analytics`, `docs`), originaux du site ; `family/tile/<mot>.svg` (le même dessin, sans fond, à la taille du cadre) ; `family/app/<mot>/` : favicon.svg, favicon.ico, apple-touch-icon.png, icon-192/512.png, icon-maskable-512.png, posés dans `public/` au build par `hgdc-brand sync <mot>` (jamais versionnés) |
+| `@hgdc/ui/family/hcollection-icon*.svg` | Le H « Double », marque de la H Collection, sur fond clair (`hcollection-icon.svg`) ou sombre (`-dark`), jamais recoloré                                                                                                                                                                                                                                                                     |
+| `styles.css`                            | `--product-<mot>-from` / `--product-<mot>-to` (dégradé de chaque icône sur fond clair), `--glow-blue`, `--glow-violet`, `--glow-pink`, `--glow-orange`                                                                                                                                                                                                                                       |
 
 Couleurs pleines ; pour éclaircir, mélanger au blanc `color-mix(in oklab, …)`, jamais `in oklch`. Une icône de produit se pose toujours sur son fond blanc, en clair comme en sombre, sans bordure ni ombre : carré arrondi 22 % partout, pictogramme à 12 % de marge (barre, menu, « Propulsé par », e-mails, icône d'app), plein cadre pour apple-touch et maskable. Le favicon est sans fond et suit le thème du système (ADR 0017). Le H reste sans fond. Les originaux vivent dans le dépôt du site hgdc.ch : les recopier dans `packages/ui/family/`, puis `bun scripts/family.ts && bun run format` (SVG embarqués, PNG des e-mails, icônes d'application). Geste complet : `docs/runbooks/changer-une-icone.md`.
 

package/dist/app-shell.d.ts

@@ -52,10 +52,33 @@ export declare function SidebarNavBack({ label, href, render, }: {
 /**
  * Un groupe titré de la barre : « Suivi », « Réglages ». Ses `SidebarNavItem` en enfants. Le titre
  * nomme la liste pour les lecteurs d'écran ; en rail, il cède la place à un trait.
+ *
+ * Avec `collapsible`, le titre devient une entrée à flèche qui déroule ses rubriques : fermé par
+ * défaut, ouvert dès qu'une de ses rubriques est la page ouverte, puis tel que la personne l'a
+ * laissé (mémorisé par navigateur). En rail, ses rubriques restent visibles, sous un trait.
  */
-export declare function SidebarNavGroup({ label, children }: {
+export declare function SidebarNavGroup(props: {
     label: string;
     children: ReactNode;
+    /** Le titre déroule ou replie le groupe. */
+    collapsible?: false;
+}): React.JSX.Element;
+export declare function SidebarNavGroup(props: {
+    label: string;
+    children: ReactNode;
+    collapsible: true;
+    /** Icône de l'entrée qui déroule le groupe, comme une rubrique. */
+    icon?: IconSvgElement;
+    /**
+     * Une rubrique du groupe est la page ouverte : le groupe s'ouvre, dès le rendu serveur. Sans cette
+     * valeur, la coque le lit dans les liens (`aria-current="page"`, `data-status="active"`) après
+     * l'hydratation.
+     */
+    active?: boolean;
+    /** Ouvert tant que la personne n'a rien choisi. Fermé par défaut. */
+    defaultOpen?: boolean;
+    /** Clé de mémorisation, par défaut le titre : à donner quand deux groupes portent le même. */
+    storageKey?: string;
 }): React.JSX.Element;
 /**
  * Un accès commun de la barre : une adresse, ou un lien du routeur (`{ render: <Link to="/settings" /> }`,

package/dist/app-shell.js

@@ -2,6 +2,7 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import Activity01Icon from "@hugeicons/core-free-icons/Activity01Icon";
 import AiMagicIcon from "@hugeicons/core-free-icons/AiMagicIcon";
 import ArrowLeft01Icon from "@hugeicons/core-free-icons/ArrowLeft01Icon";
+import ArrowRight01Icon from "@hugeicons/core-free-icons/ArrowRight01Icon";
 import BookOpen01Icon from "@hugeicons/core-free-icons/BookOpen01Icon";
 import Cancel01Icon from "@hugeicons/core-free-icons/Cancel01Icon";
 import Menu01Icon from "@hugeicons/core-free-icons/Menu01Icon";
@@ -133,11 +134,99 @@ export function SidebarNavBack({ label, href, render, }) {
     });
     return (_jsx("li", { className: "pb-2", children: _jsxs(Tooltip, { disabled: !rail, children: [_jsx(TooltipTrigger, { render: link }), _jsx(TooltipContent, { side: "right", children: label })] }) }));
 }
-/**
- * Un groupe titré de la barre : « Suivi », « Réglages ». Ses `SidebarNavItem` en enfants. Le titre
- * nomme la liste pour les lecteurs d'écran ; en rail, il cède la place à un trait.
- */
-export function SidebarNavGroup({ label, children }) {
+// ── Groupes repliables : ouverts ou fermés par la personne, mémorisés par navigateur ──────
+const GROUP_KEY_PREFIX = "sidebar-group:";
+const GROUP_EVENT = "sidebargroupchange";
+function subscribeGroups(onChange) {
+    window.addEventListener(GROUP_EVENT, onChange);
+    window.addEventListener("storage", onChange);
+    return () => {
+        window.removeEventListener(GROUP_EVENT, onChange);
+        window.removeEventListener("storage", onChange);
+    };
+}
+function readGroup(key) {
+    try {
+        const value = localStorage.getItem(GROUP_KEY_PREFIX + key);
+        return value === "open" ? true : value === "closed" ? false : null;
+    }
+    catch {
+        return null;
+    }
+}
+function writeGroup(key, open) {
+    try {
+        localStorage.setItem(GROUP_KEY_PREFIX + key, open ? "open" : "closed");
+    }
+    catch {
+        // Stockage bloqué : le choix vaut pour cette page seulement.
+    }
+    window.dispatchEvent(new Event(GROUP_EVENT));
+}
+/** Une entrée de la liste est-elle la page ouverte ? Suit les attributs que pose le routeur. */
+function useActiveDescendant(ref) {
+    const [active, setActive] = useState(false);
+    useLayoutEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        const read = () => setActive(element.querySelector('[aria-current="page"], [data-status="active"]') !== null);
+        read();
+        const observer = new MutationObserver(read);
+        observer.observe(element, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["aria-current", "data-status"],
+        });
+        return () => observer.disconnect();
+    }, [ref]);
+    return active;
+}
+export function SidebarNavGroup(props) {
+    if (props.collapsible)
+        return _jsx(CollapsibleNavGroup, { ...props });
+    return _jsx(TitledNavGroup, { label: props.label, children: props.children });
+}
+function CollapsibleNavGroup({ label, children, icon, active, defaultOpen = false, storageKey, }) {
+    const key = storageKey ?? label;
+    const buttonId = useId();
+    const listId = useId();
+    const listRef = useRef(null);
+    const stored = useSyncExternalStore(subscribeGroups, () => readGroup(key), () => null);
+    const activeInDom = useActiveDescendant(listRef);
+    const current = active ?? activeInDom;
+    // Refermé par la personne alors qu'une de ses rubriques est ouverte : il le reste jusqu'à ce
+    // qu'elle en sorte. La navigation suivante vers une rubrique du groupe le rouvre.
+    const [dismissed, setDismissed] = useState(false);
+    const [wasCurrent, setWasCurrent] = useState(current);
+    if (wasCurrent !== current) {
+        setWasCurrent(current);
+        setDismissed(false);
+    }
+    const open = current ? !dismissed : (stored ?? defaultOpen);
+    // Pas d'animation au premier rendu : l'état lu dans le navigateur s'applique sans glisser.
+    const [ready, setReady] = useState(false);
+    useEffect(() => {
+        const frame = requestAnimationFrame(() => setReady(true));
+        return () => cancelAnimationFrame(frame);
+    }, []);
+    const toggle = () => {
+        const next = !open;
+        if (current)
+            setDismissed(!next);
+        writeGroup(key, next);
+    };
+    return (_jsxs("li", { "data-slot": "sidebar-nav-group", "data-collapsible": "", "data-open": open ? "" : undefined, className: "pt-1 first:pt-0", children: [_jsx("span", { "aria-hidden": true, className: "mx-auto mt-3 mb-2 hidden h-px w-6 bg-border lg:rail:block" }), _jsxs("button", { type: "button", id: buttonId, "aria-expanded": open, "aria-controls": listId, onClick: toggle, className: cn("group/disclosure flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-left text-sm font-medium whitespace-nowrap text-muted-foreground outline-none transition-colors duration-(--duration-fast) ease-out", "hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring/50", "min-h-11 lg:min-h-9 coarse:min-h-11 lg:gap-2.5 lg:py-2 lg:text-shell-muted lg:hover:bg-shell-hover lg:hover:text-shell-foreground", 
+                // Une rubrique du groupe est ouverte et le groupe est replié : l'entrée le dit, sans fond.
+                current && !open && "text-foreground lg:text-shell-foreground", "lg:rail:hidden"), children: [icon ? (_jsx(HugeiconsIcon, { icon: icon, strokeWidth: 1.8, "aria-hidden": true, className: "size-5 shrink-0 lg:size-[1.125rem]" })) : null, _jsx("span", { className: "truncate", children: label }), _jsx(HugeiconsIcon, { icon: ArrowRight01Icon, strokeWidth: 2, "aria-hidden": true, className: cn("ml-auto size-4 shrink-0 opacity-70 transition-transform duration-(--duration-base) ease-ios motion-reduce:transition-none lg:size-3.5", open && "rotate-90") })] }), _jsx("div", { "data-slot": "sidebar-nav-group-panel", className: cn("grid", open ? "visible grid-rows-[1fr]" : "invisible grid-rows-[0fr]", ready &&
+                    "transition-[grid-template-rows,visibility] duration-(--duration-base) ease-ios motion-reduce:transition-none", 
+                // En rail, les rubriques restent là, sous le trait : seules leurs icônes se voient.
+                "lg:rail:visible lg:rail:grid-rows-[1fr]"), children: _jsx("ul", { ref: listRef, id: listId, "aria-labelledby": buttonId, className: cn("grid min-h-0 gap-0.5 overflow-hidden", 
+                    // Rubriques en retrait, sous un filet aligné sur l'icône du titre.
+                    icon ? "ml-[1.375rem] border-l border-border pl-2 lg:ml-5" : "pl-2", "pt-0.5 lg:rail:ml-0 lg:rail:border-l-0 lg:rail:pt-0 lg:rail:pl-0"), children: children }) })] }));
+}
+function TitledNavGroup({ label, children }) {
     const id = useId();
     return (_jsxs("li", { "data-slot": "sidebar-nav-group", className: "pt-4 first:pt-0", children: [_jsx("p", { id: id, className: "px-3 pb-1.5 text-xs font-medium text-muted-foreground lg:text-shell-muted lg:rail:sr-only", children: label }), _jsx("span", { "aria-hidden": true, className: "mx-auto mb-2 hidden h-px w-6 bg-border lg:rail:block" }), _jsx("ul", { "aria-labelledby": id, className: "grid gap-0.5", children: children })] }));
 }

package/dist/family-svg.d.ts

@@ -9,8 +9,8 @@ export type ThemedSvg = Readonly<{
     dark: string;
 }>;
 /**
- * SVG de l'icône de chaque produit sur son carré blanc arrondi, toujours le même en clair et en
- * sombre (`family/tile/<mot>.svg`).
+ * SVG de l'icône de chaque produit : le pictogramme clair seul, sans fond
+ * (`family/tile/<mot>.svg`).
  */
 export declare const PRODUCT_BADGE_SVG: Readonly<Record<FamilyProduct, string>>;
 /**

package/dist/family-svg.js

@@ -6,30 +6,30 @@ export function isFamilyProduct(word) {
     return FAMILY_PRODUCTS.includes(word);
 }
 /**
- * SVG de l'icône de chaque produit sur son carré blanc arrondi, toujours le même en clair et en
- * sombre (`family/tile/<mot>.svg`).
+ * SVG de l'icône de chaque produit : le pictogramme clair seul, sans fond
+ * (`family/tile/<mot>.svg`).
  */
 export const PRODUCT_BADGE_SVG = {
-    account: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="12 12.5 40 40"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#fc582e"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V40A5 5 0 0 1 42 45H22A5 5 0 0 1 17 40V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.28" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM20.5 30.9A3.5 3.5 0 1 0 27.5 30.9A3.5 3.5 0 1 0 20.5 30.9ZM17.6 40.6C17.6 37.6 20.5 35.6 24 35.6C27.5 35.6 30.4 37.6 30.4 40.6ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
-    host: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="14 14 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#2b63f2"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
-    mail: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="14 13 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fa3a58"/><stop offset="1" stop-color="#ec3052"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.25" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
-    portal: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="13 13 38 38"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#7b4bf7"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.28" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
-    status: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="14 14 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#11ce8b"/><stop offset="1" stop-color="#09b077"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
-    analytics: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="15 15 34 34"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#e58309"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
-    docs: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="14 13 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0ec1dc"/><stop offset="1" stop-color="#0aa3c1"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/></svg></svg>',
+    account: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="12 12.5 40 40"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#fc582e"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V40A5 5 0 0 1 42 45H22A5 5 0 0 1 17 40V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.28" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM20.5 30.9A3.5 3.5 0 1 0 27.5 30.9A3.5 3.5 0 1 0 20.5 30.9ZM17.6 40.6C17.6 37.6 20.5 35.6 24 35.6C27.5 35.6 30.4 37.6 30.4 40.6ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
+    host: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="14 14 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#2b63f2"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
+    mail: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="14 13 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fa3a58"/><stop offset="1" stop-color="#ec3052"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.25" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
+    portal: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="13 13 38 38"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#7b4bf7"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.28" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
+    status: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="14 14 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#11ce8b"/><stop offset="1" stop-color="#09b077"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
+    analytics: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="15 15 34 34"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#e58309"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>',
+    docs: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="14 13 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0ec1dc"/><stop offset="1" stop-color="#0aa3c1"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/></svg></svg>',
 };
 /**
  * Empreinte de chaque icône d'e-mail (`email-icons/<mot>.png`), ajoutée à son adresse : un client
  * mail qui garde l'ancienne image en cache (proxy d'images de Gmail) charge la nouvelle.
  */
 export const EMAIL_ICON_VERSION = {
-    account: "2263211d",
-    host: "ceb0451c",
-    mail: "5c18df41",
-    portal: "e18dd184",
-    status: "3f91af62",
-    analytics: "be693909",
-    docs: "4f1fb8a0",
+    account: "3585e697",
+    host: "b501c9a8",
+    mail: "c3a003ef",
+    portal: "493abbd5",
+    status: "90f70c05",
+    analytics: "83add9fb",
+    docs: "77f11f0b",
 };
 /** SVG du H « Double », la marque de la H Collection, sans fond (`family/hcollection-icon(-dark).svg`). */
 export const FAMILY_MARK_SVG = {

package/dist/product-badge.d.ts

@@ -14,9 +14,8 @@ type MarkProps = {
     label?: string;
 };
 /**
- * Icône d'un produit : le pictogramme dans le dégradé du produit, sur son carré blanc arrondi, le
- * même en clair et en sombre et dans tous les contextes, sans bordure ni ombre. `size-4` par
- * défaut, à agrandir par `className`.
+ * Icône d'un produit : le pictogramme clair seul, sans fond, le même dans tous les contextes.
+ * Il remplit le cadre (`size-4` par défaut, à agrandir par `className`).
  */
 export declare function ProductBadge({ product, className, label }: MarkProps & {
     product: FamilyProduct;

package/dist/product-badge.js

@@ -28,9 +28,8 @@ function ThemedMark({ svg, slot, className, label }) {
     return (_jsxs("span", { "data-slot": slot, ...(label ? { role: "img", "aria-label": label } : { "aria-hidden": true }), className: cn("inline-block size-4 shrink-0 select-none", className), children: [_jsx("img", { src: dataUri(svg.light), alt: "", width: 16, height: 16, draggable: false, "data-mark-theme": "light", className: "block size-full" }), _jsx("img", { src: dataUri(svg.dark), alt: "", width: 16, height: 16, draggable: false, "data-mark-theme": "dark", className: "block size-full" })] }));
 }
 /**
- * Icône d'un produit : le pictogramme dans le dégradé du produit, sur son carré blanc arrondi, le
- * même en clair et en sombre et dans tous les contextes, sans bordure ni ombre. `size-4` par
- * défaut, à agrandir par `className`.
+ * Icône d'un produit : le pictogramme clair seul, sans fond, le même dans tous les contextes.
+ * Il remplit le cadre (`size-4` par défaut, à agrandir par `className`).
  */
 export function ProductBadge({ product, className, label }) {
     return (_jsx("img", { src: dataUri(PRODUCT_BADGE_SVG[product]), alt: label ?? "", "aria-hidden": label ? undefined : true, width: 16, height: 16, draggable: false, "data-slot": "product-badge", className: cn("size-4 shrink-0 select-none", className) }));

package/family/tile/account.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="12 12.5 40 40"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#fc582e"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V40A5 5 0 0 1 42 45H22A5 5 0 0 1 17 40V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.28" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM20.5 30.9A3.5 3.5 0 1 0 27.5 30.9A3.5 3.5 0 1 0 20.5 30.9ZM17.6 40.6C17.6 37.6 20.5 35.6 24 35.6C27.5 35.6 30.4 37.6 30.4 40.6ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="12 12.5 40 40"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ff6a3d"/><stop offset="1" stop-color="#fc582e"/></linearGradient></defs><path d="M22 17H42A5 5 0 0 1 47 22V40A5 5 0 0 1 42 45H22A5 5 0 0 1 17 40V22A5 5 0 0 1 22 17Z" fill="url(#g)" fill-opacity="0.28" fill-rule="evenodd"/><path d="M17.5 21H46.5A5.5 5.5 0 0 1 52 26.5V42.5A5.5 5.5 0 0 1 46.5 48H17.5A5.5 5.5 0 0 1 12 42.5V26.5A5.5 5.5 0 0 1 17.5 21ZM20.5 30.9A3.5 3.5 0 1 0 27.5 30.9A3.5 3.5 0 1 0 20.5 30.9ZM17.6 40.6C17.6 37.6 20.5 35.6 24 35.6C27.5 35.6 30.4 37.6 30.4 40.6ZM35.5 30H44.5A1.5 1.5 0 0 1 46 31.5V31.5A1.5 1.5 0 0 1 44.5 33H35.5A1.5 1.5 0 0 1 34 31.5V31.5A1.5 1.5 0 0 1 35.5 30ZM35.5 36H40.5A1.5 1.5 0 0 1 42 37.5V37.5A1.5 1.5 0 0 1 40.5 39H35.5A1.5 1.5 0 0 1 34 37.5V37.5A1.5 1.5 0 0 1 35.5 36Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>

package/family/tile/analytics.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="15 15 34 34"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#e58309"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="15 15 34 34"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffb020"/><stop offset="1" stop-color="#e58309"/></linearGradient></defs><path d="M18.3 34H21.7A2.8 2.8 0 0 1 24.5 36.8V46.2A2.8 2.8 0 0 1 21.7 49H18.3A2.8 2.8 0 0 1 15.5 46.2V36.8A2.8 2.8 0 0 1 18.3 34Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M30.3 25H33.7A2.8 2.8 0 0 1 36.5 27.8V46.2A2.8 2.8 0 0 1 33.7 49H30.3A2.8 2.8 0 0 1 27.5 46.2V27.8A2.8 2.8 0 0 1 30.3 25Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M42.3 15H45.7A2.8 2.8 0 0 1 48.5 17.8V46.2A2.8 2.8 0 0 1 45.7 49H42.3A2.8 2.8 0 0 1 39.5 46.2V17.8A2.8 2.8 0 0 1 42.3 15Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>

package/family/tile/docs.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="14 13 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0ec1dc"/><stop offset="1" stop-color="#0aa3c1"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/></svg></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="14 13 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0ec1dc"/><stop offset="1" stop-color="#0aa3c1"/></linearGradient></defs><path d="M26 13H46A3 3 0 0 1 49 16V43A3 3 0 0 1 46 46H26A3 3 0 0 1 23 43V16A3 3 0 0 1 26 13Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M18 18H32V24.5A2.5 2.5 0 0 0 34.5 27H41V46A3 3 0 0 1 38 49H18A3 3 0 0 1 15 46V21A3 3 0 0 1 18 18ZM21.3 33H34.7A1.3 1.3 0 0 1 36 34.3V34.300000000000004A1.3 1.3 0 0 1 34.7 35.6H21.3A1.3 1.3 0 0 1 20 34.300000000000004V34.3A1.3 1.3 0 0 1 21.3 33ZM21.3 39H29.7A1.3 1.3 0 0 1 31 40.3V40.300000000000004A1.3 1.3 0 0 1 29.7 41.6H21.3A1.3 1.3 0 0 1 20 40.300000000000004V40.3A1.3 1.3 0 0 1 21.3 39Z" fill="url(#g)" fill-rule="evenodd"/><path d="M32 18L41 27H34.5A2.5 2.5 0 0 1 32 24.5Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/></svg></svg>

package/family/tile/host.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="14 14 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#2b63f2"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="14 14 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#3b7bff"/><stop offset="1" stop-color="#2b63f2"/></linearGradient></defs><path d="M20 14H44A3 3 0 0 1 47 17V20A3 3 0 0 1 44 23H20A3 3 0 0 1 17 20V17A3 3 0 0 1 20 14ZM39.8 18.5A1.7 1.7 0 1 0 43.2 18.5A1.7 1.7 0 1 0 39.8 18.5Z" fill="url(#g)" fill-opacity="0.4" fill-rule="evenodd"/><path d="M20 26.5H44A3 3 0 0 1 47 29.5V32.5A3 3 0 0 1 44 35.5H20A3 3 0 0 1 17 32.5V29.5A3 3 0 0 1 20 26.5ZM39.8 31A1.7 1.7 0 1 0 43.2 31A1.7 1.7 0 1 0 39.8 31Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M20.5 39H43.5A3.5 3.5 0 0 1 47 42.5V46.5A3.5 3.5 0 0 1 43.5 50H20.5A3.5 3.5 0 0 1 17 46.5V42.5A3.5 3.5 0 0 1 20.5 39ZM39.6 44.5A1.9 1.9 0 1 0 43.4 44.5A1.9 1.9 0 1 0 39.6 44.5ZM22.7 43.3H29.3A1.2 1.2 0 0 1 30.5 44.5V44.49999999999999A1.2 1.2 0 0 1 29.3 45.699999999999996H22.7A1.2 1.2 0 0 1 21.5 44.49999999999999V44.5A1.2 1.2 0 0 1 22.7 43.3Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>

package/family/tile/mail.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="14 13 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fa3a58"/><stop offset="1" stop-color="#ec3052"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.25" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="14 13 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#fa3a58"/><stop offset="1" stop-color="#ec3052"/></linearGradient></defs><path d="M17.5 25H46.5A3.5 3.5 0 0 1 50 28.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5V28.5A3.5 3.5 0 0 1 17.5 25Z" fill="url(#g)" fill-opacity="0.25" fill-rule="evenodd"/><path d="M22.5 13H41.5A2.5 2.5 0 0 1 44 15.5V44.5A2.5 2.5 0 0 1 41.5 47H22.5A2.5 2.5 0 0 1 20 44.5V15.5A2.5 2.5 0 0 1 22.5 13ZM25.2 18H38.8A1.2 1.2 0 0 1 40 19.2V19.2A1.2 1.2 0 0 1 38.8 20.4H25.2A1.2 1.2 0 0 1 24 19.2V19.2A1.2 1.2 0 0 1 25.2 18ZM25.2 23H33.8A1.2 1.2 0 0 1 35 24.2V24.2A1.2 1.2 0 0 1 33.8 25.4H25.2A1.2 1.2 0 0 1 24 24.2V24.2A1.2 1.2 0 0 1 25.2 23Z" fill="url(#g)" fill-opacity="0.7" fill-rule="evenodd"/><path d="M14 29.5L32 40.5L50 29.5V45.5A3.5 3.5 0 0 1 46.5 49H17.5A3.5 3.5 0 0 1 14 45.5Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>

package/family/tile/portal.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="13 13 38 38"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#7b4bf7"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.28" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="13 13 38 38"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#8b5cff"/><stop offset="1" stop-color="#7b4bf7"/></linearGradient></defs><path d="M21 13H43A3 3 0 0 1 46 16V47A3 3 0 0 1 43 50H21A3 3 0 0 1 18 47V16A3 3 0 0 1 21 13Z" fill="url(#g)" fill-opacity="0.28" fill-rule="evenodd"/><path d="M20.6 13.3L32.6 16.5A2 2 0 0 1 34 18.4V45.6A2 2 0 0 1 32.6 47.5L20.6 50.7A2 2 0 0 1 18 48.8V15.2A2 2 0 0 1 20.6 13.3ZM28.2 32A1.8 1.8 0 1 0 31.8 32A1.8 1.8 0 1 0 28.2 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>

package/family/tile/status.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="14" fill="#fff"/><svg x="7.68" y="7.68" width="48.64" height="48.64" viewBox="14 14 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#11ce8b"/><stop offset="1" stop-color="#09b077"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><svg x="0" y="0" width="64" height="64" viewBox="14 14 36 36"><defs><linearGradient id="g" x1="14" y1="14" x2="50" y2="50" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#11ce8b"/><stop offset="1" stop-color="#09b077"/></linearGradient></defs><path d="M14 32A18 18 0 1 0 50 32A18 18 0 1 0 14 32Z" fill="url(#g)" fill-opacity="0.22" fill-rule="evenodd"/><path d="M19.5 32A12.5 12.5 0 1 0 44.5 32A12.5 12.5 0 1 0 19.5 32Z" fill="url(#g)" fill-opacity="0.45" fill-rule="evenodd"/><path d="M25 32A7 7 0 1 0 39 32A7 7 0 1 0 25 32Z" fill="url(#g)" fill-rule="evenodd"/></svg></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hgdc/ui",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "description": "Interface de la H Collection : jetons de la DA, thèmes, polices et composants.",
   "license": "UNLICENSED",
   "homepage": "https://github.com/hugogebel-boop/hgdc-kit/tree/main/packages/ui#readme",