@momentum-design/components 0.140.0 → 0.141.0

package/dist/custom-elements.json

@@ -173,8 +173,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "components/accordionbutton/accordionbutton.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -493,8 +493,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
@@ -4661,6 +4661,15 @@
             }
           ],
           "members": [
+            {
+              "kind": "field",
+              "name": "abortController",
+              "type": {
+                "text": "AbortController | undefined"
+              },
+              "privacy": "private",
+              "default": "new AbortController()"
+            },
             {
               "kind": "field",
               "name": "altText",
@@ -4671,6 +4680,25 @@
               "attribute": "alt-text",
               "reflects": true
             },
+            {
+              "kind": "method",
+              "name": "applyAltText",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "Element | TemplateResult"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "brandVisual",
+                  "type": {
+                    "text": "Element | TemplateResult"
+                  }
+                }
+              ],
+              "description": "Labels the brandvisual with the alt text, if it has anything to label.\n\nThe dynamic import hands back a lit `TemplateResult`, whose markup has to be parsed before an\n`img` can be found in it, while both provider branches already produce an `Element` - so the\ntwo need different treatment. Only raster visuals have an `img` to label; vector ones are\n`aria-hidden` by design and are returned untouched."
+            },
             {
               "kind": "field",
               "name": "brandVisualData",
@@ -4679,10 +4707,31 @@
               },
               "privacy": "private"
             },
+            {
+              "kind": "field",
+              "name": "brandVisualProviderContext",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "fetchBrandVisual",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "{\n    url,\n    fileExtension,\n    cacheName,\n    cacheStrategy,\n  }",
+                  "type": {
+                    "text": "{\n    url: string;\n    fileExtension: string;\n    cacheName?: string;\n    cacheStrategy?: CacheStrategy;\n  }"
+                  }
+                }
+              ],
+              "description": "Fetches a vector brandvisual over HTTP and inlines it.\n\nThis method uses abortController.signal to cancel the fetch request when the component is\ndisconnected or updated. If the request is aborted after the fetch() call has been fulfilled\nbut before the response body has been read, then attempting to read the response body will\nreject with an AbortError exception."
+            },
             {
               "kind": "method",
               "name": "getBrandVisualData",
-              "privacy": "private"
+              "privacy": "private",
+              "description": "Resolves the brandvisual, either over HTTP through a `BrandVisualProvider` or through a\ndynamic import of the lit template shipped in the `@momentum-design/brand-visuals` package.\n\nThe dynamic import is the fallback for every case that is not a fully configured custom set:\nno provider at all, the momentum set, or a custom set that is missing a url or file extension.\nKeeping it reachable without a provider is what makes this backwards compatible - a bare\n`<mdc-brandvisual name=\"…\">` behaves exactly as it did before the provider existed."
             },
             {
               "kind": "method",
@@ -4706,9 +4755,9 @@
                 {
                   "name": "brandVisualHtml",
                   "type": {
-                    "text": "TemplateResult"
+                    "text": "Element | TemplateResult"
                   },
-                  "description": "The brandvisual html element which has been fetched from the brandvisual provider."
+                  "description": "The brandvisual which has been resolved, either as the lit template\nfrom the dynamic import or as an element built from the provider url."
                 }
               ],
               "description": "Sets the brandVisualData state to the fetched brandvisual.\nDispatches a 'load' event on the component once the brandvisual has been successfully loaded."
@@ -4767,6 +4816,26 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "loadBrandVisualImage",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "fileExtension",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "Points an `img` at the raster brandvisual and resolves once the browser has loaded it.\n\nThere is nothing to fetch here - assigning `src` starts the load even while the element is\ndetached - but we still wait for it so that `load` and `error` keep meaning the same thing\nthey do on the other two branches."
+            },
             {
               "kind": "field",
               "name": "name",
@@ -4776,6 +4845,26 @@
               "description": "Name of the brandVisual (= filename)",
               "attribute": "name",
               "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "prepareBrandVisualElement",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              },
+              "parameters": [
+                {
+                  "name": "brandVisualData",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "The brandvisual string to be parsed"
+                }
+              ],
+              "description": "Parse the fetched brandvisual string to an html element and set the attributes the\npackaged lit templates would otherwise carry."
             }
           ],
           "events": [
@@ -4828,6 +4917,162 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/brandvisualprovider/brandvisualprovider.component.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "BrandVisualProvider",
+          "slots": [
+            {
+              "description": "children",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "brandVisualSet",
+              "type": {
+                "text": "BrandVisualSet | undefined"
+              },
+              "description": "Brand visual set to be used\n\nIf `momentum-brand-visuals` is selected, the brand visuals will be fetched from the\nMomentum Design System brand visual set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-design/brand-visuals` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-brand-visuals` is selected, the brand visuals will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the brand visuals will be fetched and\nthe consumer needs to make sure to bundle the brand visuals in the application.",
+              "default": "momentum-brand-visuals",
+              "attribute": "brand-visual-set",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "cacheName",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Brand visuals Cache Name to use (cache strategy must be provided)\n\nIf provided, Brand visuals inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nBrand visuals cache name must be unique, independent from other asset caches.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the brand visuals will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-name"
+            },
+            {
+              "kind": "field",
+              "name": "cacheStrategy",
+              "type": {
+                "text": "CacheStrategy | undefined"
+              },
+              "description": "Brand visuals Cache Strategy to use\n\n**Can only be used if Brand visual set is `custom-brand-visuals` and the file extension is `svg`**\n(`png` visuals are loaded by the browser through an `img` element and are subject to the\nregular HTTP cache instead).\n\nChoose `in-memory-cache` to cache brand visuals in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache brand visuals using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the brand visuals will not be cached.",
+              "default": "undefined",
+              "attribute": "cache-strategy"
+            },
+            {
+              "kind": "field",
+              "name": "Context",
+              "privacy": "public",
+              "static": true,
+              "description": "Context object of the BrandVisualProviderContext, to be consumed by child components",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "fileExtension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of brand visuals\n(if Brand visual set is `custom-brand-visuals`, this will be the file extension for brand visuals)\n\n`svg` visuals are fetched and inlined, `png` visuals are set as the `src` of an `img` element.\nNote that the two sets are not interchangeable: the device visuals only ship as `png`,\nevery other visual only ships as `svg`.",
+              "default": "svg",
+              "attribute": "file-extension",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "updateContext",
+              "privacy": "protected",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateValuesInContext",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where brand visuals will be fetched from\n(if Brand visual set is `custom-brand-visuals`, this will be the base url)",
+              "attribute": "url"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "brand-visual-set",
+              "type": {
+                "text": "BrandVisualSet | undefined"
+              },
+              "description": "Brand visual set to be used\n\nIf `momentum-brand-visuals` is selected, the brand visuals will be fetched from the\nMomentum Design System brand visual set per a dynamic JS Import (no need to provide a URL).\nThis requires the consumer to have the `@momentum-design/brand-visuals` package installed and the\nbuild tooling needs to support dynamic imports.\n\nIf `custom-brand-visuals` is selected, the brand visuals will be fetched from the provided URL.\nThis requires the consumer to provide a URL from which the brand visuals will be fetched and\nthe consumer needs to make sure to bundle the brand visuals in the application.",
+              "default": "momentum-brand-visuals",
+              "fieldName": "brandVisualSet"
+            },
+            {
+              "name": "url",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Url of where brand visuals will be fetched from\n(if Brand visual set is `custom-brand-visuals`, this will be the base url)",
+              "fieldName": "url"
+            },
+            {
+              "name": "file-extension",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "File extension of brand visuals\n(if Brand visual set is `custom-brand-visuals`, this will be the file extension for brand visuals)\n\n`svg` visuals are fetched and inlined, `png` visuals are set as the `src` of an `img` element.\nNote that the two sets are not interchangeable: the device visuals only ship as `png`,\nevery other visual only ships as `svg`.",
+              "default": "svg",
+              "fieldName": "fileExtension"
+            },
+            {
+              "name": "cache-strategy",
+              "type": {
+                "text": "CacheStrategy | undefined"
+              },
+              "description": "Brand visuals Cache Strategy to use\n\n**Can only be used if Brand visual set is `custom-brand-visuals` and the file extension is `svg`**\n(`png` visuals are loaded by the browser through an `img` element and are subject to the\nregular HTTP cache instead).\n\nChoose `in-memory-cache` to cache brand visuals in a JS cache (in-memory cache).\nChoose `web-cache-api` to cache brand visuals using the Web Cache API.\n\nNOTE: `cache-name` must be provided if `cache-strategy` is provided.\n\nIf not provided or invalid value provided, the brand visuals will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheStrategy"
+            },
+            {
+              "name": "cache-name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Brand visuals Cache Name to use (cache strategy must be provided)\n\nIf provided, Brand visuals inside the provider will be cached in the\ncache (determined by `cache-strategy`) with the provided name.\n\nBrand visuals cache name must be unique, independent from other asset caches.\n\nNOTE: `cache-name` requires `cache-strategy` to be set.\n\nIf not provided, the brand visuals will not be cached.",
+              "default": "undefined",
+              "fieldName": "cacheName"
+            }
+          ],
+          "superclass": {
+            "name": "Provider",
+            "module": "/src/models"
+          },
+          "tagName": "mdc-brandvisualprovider",
+          "jsDoc": "/**\n * @tagname mdc-brandvisualprovider\n *\n * @slot - children\n */",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "BrandVisualProvider",
+            "module": "components/brandvisualprovider/brandvisualprovider.component.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/bullet/bullet.component.js",

package/dist/index.d.ts

@@ -9,6 +9,7 @@ import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
 import Badge from './components/badge';
 import Brandvisual from './components/brandvisual';
+import BrandVisualProvider from './components/brandvisualprovider';
 import Bullet from './components/bullet';
 import Button from './components/button';
 import ButtonGroup from './components/buttongroup';
@@ -124,6 +125,6 @@ import type { TimePickerChangeEvent, TimePickerInputEvent } from './components/t
 import type { DatePickerChangeEvent, DatePickerInputEvent } from './components/datepicker/datepicker.types';
 import type { CalendarDateSelectedEvent, CalendarMonthChangedEvent } from './components/calendar/calendar.types';
 import type { ListBoxChangeEvent } from './components/listbox/listbox.types';
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, NumberInput, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, CheckboxTree, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, BrandVisualProvider, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, NumberInput, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, CheckboxTree, };
 export type { AvatarSize, BadgeType, ChipColorType, ButtonColor, ButtonVariant, IconButtonSize, MenuPopoverActionEvent, MenuPopoverChangeEvent, MenuSectionChangeEvent, PillButtonSize, PopoverPlacement, PresenceType, SkeletonVariant, SelectChangeEvent, SelectInputEvent, SpinnerSize, SpinnerVariant, SliderChangeEvent, StatusMessageSeverity, TextType, TypewriterType, InputInputEvent, InputChangeEvent, InputFocusEvent, InputBlurEvent, InputClearEvent, VirtualizedListScrollEvent, TablistChangeEvent, TextareaInputEvent, TextareaChangeEvent, TextareaFocusEvent, TextareaBlurEvent, TextareaLimitExceededEvent, ToggleOnChangeEvent, CheckboxOnChangeEvent, LinkButtonSize, TimePickerChangeEvent, TimePickerInputEvent, DatePickerChangeEvent, DatePickerInputEvent, CalendarDateSelectedEvent, CalendarMonthChangedEvent, VerticaltablistChangeEvent, ListBoxChangeEvent, };
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/index.js

@@ -11,6 +11,7 @@ import Avatar from './components/avatar';
 import AvatarButton from './components/avatarbutton';
 import Badge from './components/badge';
 import Brandvisual from './components/brandvisual';
+import BrandVisualProvider from './components/brandvisualprovider';
 import Bullet from './components/bullet';
 import Button from './components/button';
 import ButtonGroup from './components/buttongroup';
@@ -101,6 +102,6 @@ import { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, PILL_BUTTON_SIZES, }
 import { SKELETON_VARIANTS } from './components/skeleton/skeleton.constants';
 import { inMemoryCache, webAPIAssetsCache } from './utils/assets-cache';
 // Components Exports
-export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, NumberInput, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, CheckboxTree, };
+export { Accordion, AccordionButton, AccordionGroup, AlertChip, Animation, AnnouncementDialog, Appheader, Avatar, AvatarButton, Badge, Brandvisual, BrandVisualProvider, Bullet, Button, ButtonGroup, ButtonLink, Calendar, Card, CardButton, CardCheckbox, CardRadio, Checkbox, Chip, Coachmark, ControlTypeProvider, DatePicker, Dialog, Divider, FilterChip, FormfieldGroup, Icon, IconProvider, Illustration, IllustrationProvider, Input, InputChip, Link, LinkButton, Linksimple, List, Listheader, ListItem, Marker, MenuBar, MenuItem, MenuItemCheckbox, MenuItemRadio, MenuPopover, MenuSection, NavMenuItem, NumberInput, OptGroup, Option, Password, Popover, Presence, Progressbar, Progressspinner, Radio, RadioGroup, ResponsiveSettingsProvider, ScreenreaderAnnouncer, Searchfield, Searchpopover, Select, SelectListbox, SideNavigation, Skeleton, Spinner, StaticChip, StaticCheckbox, StaticRadio, StaticToggle, Stepper, StepperConnector, StepperItem, Tab, TabList, Text, Textarea, TimePicker, ThemeProvider, Toast, Toggle, Typewriter, ToggleTip, Tooltip, VirtualizedList, Combobox, Slider, ListBox, Banner, Buttonsimple, Verticaltablist, StatusMessage, FocusTrap, CheckboxTree, };
 // Constants / Utils Exports
 export { BUTTON_COLORS, BUTTON_VARIANTS, ICON_BUTTON_SIZES, inMemoryCache, PILL_BUTTON_SIZES, SKELETON_VARIANTS, webAPIAssetsCache, };

package/dist/react/brandvisualprovider/index.d.ts

@@ -0,0 +1,24 @@
+import Component from '../../components/brandvisualprovider';
+/**
+ * The brandvisualprovider is the context provider for `mdc-brandvisual`. It lets an application configure where brand visuals come from and how they are cached in one place, so every nested brand visual stays consistent without repeating that setup at each usage.
+ * 
+ * Without a provider, `mdc-brandvisual` resolves its asset through a dynamic import of the lit template shipped in `@momentum-design/brand-visuals`. That import is not statically analysable, so bundlers have to account for every asset in the package. Pointing the provider at a URL replaces that import with an HTTP fetch, which lets an application serve the brand visual set itself and keep it out of the bundle entirely.
+ * 
+ * **When to use**
+ * 
+ * - Use `mdc-brandvisualprovider` to configure the brand visual source once for every nested `mdc-brandvisual` in a subtree.
+ * - Use `mdc-brandvisualprovider` with `brand-visual-set="custom-brand-visuals"` when brand visuals should be served over HTTP rather than bundled — for example in a host framework that cannot afford to bundle the full asset set.
+ * - Use `mdc-brandvisualprovider` when brand visuals should be cached across re-renders or navigations to avoid repeated network fetches.
+ * 
+ * **When not to use**
+ * 
+ * - Do not expect one provider to cover every brand visual when fetching over HTTP. The set is split across an `svg` and a `png` folder and a provider points at one of them, so a page using artwork from both needs one provider for each — see **Content guidance** below. Outside that case, prefer a single provider near the root and nest only when a subtree genuinely needs a different source.
+ * - Do not reach for `mdc-brandvisualprovider` to render a logo — it has no visible UI. Use `mdc-brandvisual` for the visual itself.
+ * - Do not add a provider purely to keep the existing behaviour. `mdc-brandvisual` works without one.
+ * 
+ * @tagname mdc-brandvisualprovider
+ * 
+ * @slot - children
+ */
+declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {}>;
+export default reactWrapper;

package/dist/react/brandvisualprovider/index.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { createComponent } from '@lit/react';
+import Component from '../../components/brandvisualprovider';
+import { TAG_NAME } from '../../components/brandvisualprovider/brandvisualprovider.constants';
+/**
+ * @tagname mdc-brandvisualprovider
+ *
+ * @slot - children
+ */
+const reactWrapper = createComponent({
+    tagName: TAG_NAME,
+    elementClass: Component,
+    react: React,
+    events: {},
+    displayName: 'BrandVisualProvider',
+});
+export default reactWrapper;

package/dist/react/index.d.ts

@@ -10,6 +10,7 @@ export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Banner } from './banner';
 export { default as Brandvisual } from './brandvisual';
+export { default as BrandVisualProvider } from './brandvisualprovider';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';

package/dist/react/index.js

@@ -10,6 +10,7 @@ export { default as AvatarButton } from './avatarbutton';
 export { default as Badge } from './badge';
 export { default as Banner } from './banner';
 export { default as Brandvisual } from './brandvisual';
+export { default as BrandVisualProvider } from './brandvisualprovider';
 export { default as Bullet } from './bullet';
 export { default as Button } from './button';
 export { default as ButtonGroup } from './buttongroup';

package/dist/utils/asset-fetch/index.d.ts

@@ -0,0 +1,42 @@
+import type { CacheStrategy } from '../assets-cache';
+interface Args {
+    url: string;
+    name: string;
+    fileExtension: string;
+    cacheStrategy?: CacheStrategy;
+    cacheName?: string;
+    renewSignal: () => AbortSignal;
+    /**
+     * The kind of asset being fetched (e.g. `icon`, `illustration`, `brand visual`).
+     * Used in error messages and to namespace the in-flight request map, so that two
+     * asset kinds resolving the same url never share a pending request.
+     */
+    assetType: string;
+}
+/**
+ * Fetches a dynamic asset based on the provided `url`, `name` and `fileExtension`.
+ * The fetch is aborted if the signal is aborted.
+ *
+ * This function also includes the logic to cache the fetched asset using the In Memory Cache or Web Cache API.
+ * If the `cacheStrategy` is set to `web-cache-api` or `in-memory-cache` and `cacheName` is provided,
+ * the fetched asset will be cached using the respective cache.
+ *
+ * It will throw an error if the response is not ok.
+ *
+ * Shared by `mdc-icon`, `mdc-illustration` and `mdc-brandvisual`, all of which resolve assets
+ * the same way when their provider is configured with a custom set and a url.
+ *
+ * @param url - The base url of the asset
+ * @param name - The name of the asset
+ * @param fileExtension - The file extension of the asset
+ * @param signal - The signal to abort the fetch.
+ * It is used to cancel the fetch when the component is disconnected or updated.
+ * @param cacheStrategy - The cache strategy to use.
+ * @param cacheName - The cache name to use.
+ * @param assetType - The kind of asset being fetched.
+ *
+ * @returns Response string from the fetch
+ * @throws Error if the response is not ok
+ */
+declare const assetFetch: ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, assetType, }: Args) => Promise<string>;
+export { assetFetch };

package/dist/utils/asset-fetch/index.js

@@ -0,0 +1,101 @@
+import { assetsCache } from '../assets-cache';
+/**
+ * Utility function for fetching an asset from the provided `request`.
+ * It will throw an error if the response is not ok.
+ * @param request - The request object to fetch the asset
+ * @param assetType - The kind of asset being fetched, used in the error message
+ * @returns Promise<Response> - The response from the fetch
+ * @throws Error if the response is not ok
+ */
+const requestAsset = async (request, assetType) => fetch(request).then(response => {
+    if (!response.ok) {
+        throw new Error(`There was a problem while fetching the ${assetType}!`);
+    }
+    return response;
+});
+// Map of in-flight fetch promises used to deduplicate concurrent requests.
+// The key is namespaced by asset type, since this map is shared by every asset kind and
+// two of them may legitimately resolve to the same url.
+const pendingFetches = new Map();
+/**
+ * Fetches a dynamic asset based on the provided `url`, `name` and `fileExtension`.
+ * The fetch is aborted if the signal is aborted.
+ *
+ * This function also includes the logic to cache the fetched asset using the In Memory Cache or Web Cache API.
+ * If the `cacheStrategy` is set to `web-cache-api` or `in-memory-cache` and `cacheName` is provided,
+ * the fetched asset will be cached using the respective cache.
+ *
+ * It will throw an error if the response is not ok.
+ *
+ * Shared by `mdc-icon`, `mdc-illustration` and `mdc-brandvisual`, all of which resolve assets
+ * the same way when their provider is configured with a custom set and a url.
+ *
+ * @param url - The base url of the asset
+ * @param name - The name of the asset
+ * @param fileExtension - The file extension of the asset
+ * @param signal - The signal to abort the fetch.
+ * It is used to cancel the fetch when the component is disconnected or updated.
+ * @param cacheStrategy - The cache strategy to use.
+ * @param cacheName - The cache name to use.
+ * @param assetType - The kind of asset being fetched.
+ *
+ * @returns Response string from the fetch
+ * @throws Error if the response is not ok
+ */
+const assetFetch = async ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal, assetType, }) => {
+    // abort the previous fetch request if it is still pending
+    // and create a new signal
+    const signal = renewSignal();
+    const assetUrl = `${url}/${name}.${fileExtension}`;
+    const pendingKey = `${assetType}:${assetUrl}`;
+    const request = new Request(assetUrl, {
+        signal,
+    });
+    // if there is no cache defined (cacheName and cacheStrategy properly set),
+    // fetch the asset and return the response
+    if (!cacheName || !cacheStrategy || !['in-memory-cache', 'web-cache-api'].includes(cacheStrategy)) {
+        return requestAsset(request, assetType).then(response => response.text());
+    }
+    return assetsCache(cacheName, cacheStrategy).then(cache => cache
+        .get(request)
+        .then(responseFromCache => {
+        // **If entry in cache, return**
+        if (responseFromCache) {
+            return responseFromCache;
+        }
+        // **Check for in-flight fetch for the same asset**
+        const pending = pendingFetches.get(pendingKey);
+        if (pending) {
+            return pending;
+        }
+        // **Otherwise, fetch and cache if successful**
+        // Both requestAsset() and cache.set() "consume" the request,
+        // so we need to make a copy.
+        // (see https://developer.mozilla.org/en-US/docs/Web/API/Request/clone)
+        const fetchPromise = requestAsset(new Request(assetUrl), assetType)
+            .then(response => {
+            var _a;
+            // This avoids caching responses that we know are errors
+            // (i.e. HTTP status code of 4xx or 5xx).
+            if (response.status < 400 && response.headers.has('content-type')) {
+                // Call .clone() on the response to save copy to cache.
+                // https://developer.mozilla.org/en-US/docs/Web/API/Request/clone
+                return (_a = cache.set) === null || _a === void 0 ? void 0 : _a.call(cache, request, response.clone()).then(() => response.text());
+            }
+            return response.text();
+        })
+            .finally(() => {
+            pendingFetches.delete(pendingKey);
+        });
+        pendingFetches.set(pendingKey, fetchPromise);
+        return fetchPromise;
+    })
+        .catch(error => {
+        // Note that a HTTP error response (e.g. 404) will NOT trigger
+        // an exception.
+        // It will return a normal response object that has the appropriate
+        // error code set.
+        throw new Error(`Error in caching the ${assetType} ${name}, ${error}`);
+    }));
+};
+export { assetFetch };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.140.0",
+  "version": "0.141.0",
   "engines": {
     "node": ">=24.0.0",
     "npm": ">=8.0.0"

package/dist/components/icon/icon.utils.d.ts

@@ -1,32 +0,0 @@
-import type { CacheStrategy } from '../../utils/assets-cache';
-interface Args {
-    url: string;
-    name: string;
-    fileExtension: string;
-    cacheStrategy?: CacheStrategy;
-    cacheName?: string;
-    renewSignal: () => AbortSignal;
-}
-/**
- * Fetches a dynamic SVG icon based on the provided `url`, `name` and `fileExtension`.
- * The fetch is aborted if the signal is aborted.
- *
- * This function also includes the logic to cache the fetched icon using the In Memory Cache or Web Cache API.
- * If the `cacheStrategy` is set to `web-cache-api` or `in-memory-cache` and `cacheName` is provided,
- * the fetched icon will be cached using the respective cache.
- *
- * It will throw an error if the response is not ok.
- *
- * @param url - The base url of the icon
- * @param name - The name of the icon
- * @param fileExtension - The file extension of the icon
- * @param signal - The signal to abort the fetch.
- * It is used to cancel the fetch when the component is disconnected or updated.
- * @param cacheStrategy - The cache strategy to use.
- * @param cacheName - The cache name to use.
- *
- * @returns Response string from the fetch
- * @throws Error if the response is not ok
- */
-declare const svgFetch: ({ url, name, fileExtension, cacheStrategy, cacheName, renewSignal }: Args) => Promise<string>;
-export { svgFetch };