@designsystem-se/af 39.4.0 → 39.5.0

package/dist/types/components/_expandable/expandable-faq/expandable-faq.d.ts

@@ -27,6 +27,7 @@ export declare class ExpandableFaq {
     listItems: any[];
     componentWillLoad(): void;
     componentWillUpdate(): void;
+    get safeHeadingLevel(): ExpandableFaqHeadingLevel;
     getListItems(): void;
     setFaqItemProps(): void;
     render(): any;

package/dist/types/components/_media/media-svg/interfaces/svg-source.interface.d.ts

@@ -0,0 +1,18 @@
+export interface SvgSource {
+    src: string;
+    /**
+     * Component width, in CSS pixels, from which this source is used.
+     * The source with the highest matching minWidth wins.
+     */
+    minWidth?: number;
+    /**
+     * Om sann (true), rensas SVG:ns inbyggda mått så att den skalar flytande till 100%.
+     * Om falsk (false), behåller SVG:n måtten från Figma-exporten.
+     */
+    responsive?: boolean;
+    /**
+     * Alternativtext för just denna källa. Utelämnad används afAlt.
+     * Tom sträng gör grafiken dekorativ.
+     */
+    altText?: string;
+}

package/dist/types/components/_media/media-svg/media-svg.d.ts

@@ -0,0 +1,87 @@
+import { SvgSource } from './interfaces/svg-source.interface';
+/**
+ * Visar en SVG-fil som kod så att designtokens i filen kan användas.
+ * Brytpunkter jämförs med komponentens egen bredd.
+ * @slot loading - Visas medan grafiken hämtas
+ * @slot error - Visas om grafiken inte kan hämtas
+ * @swedishName SVG-visare
+ */
+export declare class MediaSvg {
+    el: HTMLElement;
+    /**
+     * SVG-fil som används när ingen brytpunkt matchar.
+     * @en SVG file used when no breakpoint matches.
+     */
+    afDefaultSource: string;
+    /**
+     * Minsta bredd i CSS-pixlar för standardkällan. Är komponenten smalare, och ingen källa i afSrcset matchar, visas ingen grafik. Om värdet utelämnas tillåts standardkällan oavsett bredd.
+     * @en Minimum width in CSS pixels for the default source. When the component is narrower, and no source in afSrcset matches, no graphic is shown. Omit to allow the default source at any width.
+     */
+    afDefaultMinWidth?: number;
+    /**
+     * Sätter standardkällan till bredd 100% och höjd auto. Annars behåller filen sina egna mått.
+     * @en Sets the default source to width 100% and height auto. Otherwise the file keeps its own dimensions.
+     */
+    afDefaultResponsive: boolean;
+    /**
+     * Källor som matchas mot komponentens egen bredd i CSS-pixlar. Källan med högst minWidth som bredden fortfarande uppfyller vinner. Skicka en array, eller en JSON-sträng när attributet sätts i HTML.
+     * @en Sources matched against this component's own width, in CSS pixels. The source with the highest minWidth that the width still satisfies wins. Pass an array, or a JSON string when setting the attribute in HTML.
+     */
+    afSrcset: SvgSource[] | string;
+    /**
+     * Fördröjning i millisekunder innan komponentens bredd matchas mot brytpunkterna.
+     * @en Delay in milliseconds before the component width is matched against the breakpoints.
+     */
+    afDebounceMs: number;
+    /**
+     * Alternativtext för grafiken. Utelämnad eller tom text gör grafiken dekorativ.
+     * Används också när en källa i afSrcset saknar altText.
+     * @en Alternative text for the graphic. Omitted or empty text treats the graphic as decorative.
+     * Also used when a source in afSrcset has no altText.
+     */
+    afAlt: string;
+    svgContent: string;
+    hasError: boolean;
+    activeSrc: string;
+    isResponsive: boolean;
+    /**
+     * Hämta källan som visas. Tom sträng betyder att ingen grafik visas, även under hämtning och vid fel.
+     * @en Get the source currently shown. An empty string means no graphic is shown, including while loading and on error.
+     */
+    afGetActiveSource(): Promise<string>;
+    private currentMatchedSource;
+    private parsedSources;
+    private renderedSrc;
+    private resizeObserver;
+    private debounceTimeoutId;
+    private internalId;
+    componentWillLoad(): Promise<void>;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    handleSourceChanges(): void;
+    handlePresentationChanges(): void;
+    private parseSources;
+    private parseSrcsetJson;
+    private setupContainerObserver;
+    private disconnectObserver;
+    private defaultMinWidth;
+    private isBelowDefaultMinWidth;
+    private evaluateContainerBreakpoints;
+    private prepareSignature;
+    private activeLabel;
+    private resumeSvgLoad;
+    private fetchSvg;
+    private applyFetchedSvg;
+    private reprepareActiveSvg;
+    private applyActiveSvg;
+    private prepareSvg;
+    private isActiveSourceResponsive;
+    private syncResponsiveState;
+    private scopeInsertedSvg;
+    get cssModifiers(): {
+        'digi-media-svg--responsive': boolean;
+    };
+    render(): any;
+}

package/dist/types/components/_media/media-svg/prepare-svg-markup.d.ts

@@ -0,0 +1,6 @@
+export interface PrepareSvgOptions {
+    label: string;
+    idPrefix: string;
+    responsive: boolean;
+}
+export declare function prepareSvgMarkup(raw: string, options: PrepareSvgOptions): string | null;

package/dist/types/components/_util/util-mutation-observer/util-mutation-observer.d.ts

@@ -2,6 +2,7 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 /**
  * @componentType utility
  * @slot default - Kan innehålla vad som helst
+ * @deprecated  Denna komponent kommer tas bort från Designsystemet i januari 2027.
  * @swedishName Mutation Observer
  */
 export declare class UtilMutationObserver {

package/dist/types/components.d.ts

@@ -89,6 +89,7 @@ import { LoaderSkeletonVariation } from "./components/_loader/loader-skeleton/lo
 import { LoaderSpinnerSize } from "./components/_loader/loader-spinner/loader-spinner-size.enum";
 import { LogoColor } from "./components/_logo/logo/logo-color.enum";
 import { MediaFigureAlignment } from "./components/_media/media-figure/media-figure-alignment.enum";
+import { SvgSource } from "./components/_media/media-svg/interfaces/svg-source.interface";
 import { NavigationSidebarPosition } from "./components/_navigation/navigation-sidebar/navigation-sidebar-position.enum";
 import { NavigationSidebarVariation } from "./components/_navigation/navigation-sidebar/navigation-sidebar-variation.enum";
 import { NavigationSidebarMobilePosition } from "./components/_navigation/navigation-sidebar/navigation-sidebar-mobile-position.enum";
@@ -220,6 +221,7 @@ export { LoaderSkeletonVariation } from "./components/_loader/loader-skeleton/lo
 export { LoaderSpinnerSize } from "./components/_loader/loader-spinner/loader-spinner-size.enum";
 export { LogoColor } from "./components/_logo/logo/logo-color.enum";
 export { MediaFigureAlignment } from "./components/_media/media-figure/media-figure-alignment.enum";
+export { SvgSource } from "./components/_media/media-svg/interfaces/svg-source.interface";
 export { NavigationSidebarPosition } from "./components/_navigation/navigation-sidebar/navigation-sidebar-position.enum";
 export { NavigationSidebarVariation } from "./components/_navigation/navigation-sidebar/navigation-sidebar-variation.enum";
 export { NavigationSidebarMobilePosition } from "./components/_navigation/navigation-sidebar/navigation-sidebar-mobile-position.enum";
@@ -7670,6 +7672,52 @@ export namespace Components {
          */
         "afWidth": string;
     }
+    /**
+     * Visar en SVG-fil som kod så att designtokens i filen kan användas.
+     * Brytpunkter jämförs med komponentens egen bredd.
+     * @swedishName SVG-visare
+     */
+    interface DigiMediaSvg {
+        /**
+          * Alternativtext för grafiken. Utelämnad eller tom text gör grafiken dekorativ. Används också när en källa i afSrcset saknar altText.
+          * @en Alternative text for the graphic. Omitted or empty text treats the graphic as decorative. Also used when a source in afSrcset has no altText.
+          * @default ''
+         */
+        "afAlt": string;
+        /**
+          * Fördröjning i millisekunder innan komponentens bredd matchas mot brytpunkterna.
+          * @en Delay in milliseconds before the component width is matched against the breakpoints.
+          * @default 150
+         */
+        "afDebounceMs": number;
+        /**
+          * Minsta bredd i CSS-pixlar för standardkällan. Är komponenten smalare, och ingen källa i afSrcset matchar, visas ingen grafik. Om värdet utelämnas tillåts standardkällan oavsett bredd.
+          * @en Minimum width in CSS pixels for the default source. When the component is narrower, and no source in afSrcset matches, no graphic is shown. Omit to allow the default source at any width.
+         */
+        "afDefaultMinWidth"?: number;
+        /**
+          * Sätter standardkällan till bredd 100% och höjd auto. Annars behåller filen sina egna mått.
+          * @en Sets the default source to width 100% and height auto. Otherwise the file keeps its own dimensions.
+          * @default false
+         */
+        "afDefaultResponsive": boolean;
+        /**
+          * SVG-fil som används när ingen brytpunkt matchar.
+          * @en SVG file used when no breakpoint matches.
+         */
+        "afDefaultSource": string;
+        /**
+          * Hämta källan som visas. Tom sträng betyder att ingen grafik visas, även under hämtning och vid fel.
+          * @en Get the source currently shown. An empty string means no graphic is shown, including while loading and on error.
+         */
+        "afGetActiveSource": () => Promise<string>;
+        /**
+          * Källor som matchas mot komponentens egen bredd i CSS-pixlar. Källan med högst minWidth som bredden fortfarande uppfyller vinner. Skicka en array, eller en JSON-sträng när attributet sätts i HTML.
+          * @en Sources matched against this component's own width, in CSS pixels. The source with the highest minWidth that the width still satisfies wins. Pass an array, or a JSON string when setting the attribute in HTML.
+          * @default []
+         */
+        "afSrcset": SvgSource[] | string;
+    }
     /**
      * @swedishName Brödsmulor
      */
@@ -8979,6 +9027,7 @@ export namespace Components {
     }
     /**
      * @componentType utility
+     * @deprecated Denna komponent kommer tas bort från Designsystemet i januari 2027.
      * @swedishName Mutation Observer
      */
     interface DigiUtilMutationObserver {
@@ -11331,6 +11380,17 @@ declare global {
         prototype: HTMLDigiMediaImageElement;
         new (): HTMLDigiMediaImageElement;
     };
+    /**
+     * Visar en SVG-fil som kod så att designtokens i filen kan användas.
+     * Brytpunkter jämförs med komponentens egen bredd.
+     * @swedishName SVG-visare
+     */
+    interface HTMLDigiMediaSvgElement extends Components.DigiMediaSvg, HTMLStencilElement {
+    }
+    var HTMLDigiMediaSvgElement: {
+        prototype: HTMLDigiMediaSvgElement;
+        new (): HTMLDigiMediaSvgElement;
+    };
     interface HTMLDigiNavigationBreadcrumbsElementEventMap {
         "afOnClick": any;
     }
@@ -11958,6 +12018,7 @@ declare global {
     }
     /**
      * @componentType utility
+     * @deprecated Denna komponent kommer tas bort från Designsystemet i januari 2027.
      * @swedishName Mutation Observer
      */
     interface HTMLDigiUtilMutationObserverElement extends Components.DigiUtilMutationObserver, HTMLStencilElement {
@@ -12244,6 +12305,7 @@ declare global {
         "digi-logo": HTMLDigiLogoElement;
         "digi-media-figure": HTMLDigiMediaFigureElement;
         "digi-media-image": HTMLDigiMediaImageElement;
+        "digi-media-svg": HTMLDigiMediaSvgElement;
         "digi-navigation-breadcrumbs": HTMLDigiNavigationBreadcrumbsElement;
         "digi-navigation-pagination": HTMLDigiNavigationPaginationElement;
         "digi-navigation-sidebar": HTMLDigiNavigationSidebarElement;
@@ -20127,6 +20189,47 @@ declare namespace LocalJSX {
          */
         "onAfOnLoad"?: (event: DigiMediaImageCustomEvent<any>) => void;
     }
+    /**
+     * Visar en SVG-fil som kod så att designtokens i filen kan användas.
+     * Brytpunkter jämförs med komponentens egen bredd.
+     * @swedishName SVG-visare
+     */
+    interface DigiMediaSvg {
+        /**
+          * Alternativtext för grafiken. Utelämnad eller tom text gör grafiken dekorativ. Används också när en källa i afSrcset saknar altText.
+          * @en Alternative text for the graphic. Omitted or empty text treats the graphic as decorative. Also used when a source in afSrcset has no altText.
+          * @default ''
+         */
+        "afAlt"?: string;
+        /**
+          * Fördröjning i millisekunder innan komponentens bredd matchas mot brytpunkterna.
+          * @en Delay in milliseconds before the component width is matched against the breakpoints.
+          * @default 150
+         */
+        "afDebounceMs"?: number;
+        /**
+          * Minsta bredd i CSS-pixlar för standardkällan. Är komponenten smalare, och ingen källa i afSrcset matchar, visas ingen grafik. Om värdet utelämnas tillåts standardkällan oavsett bredd.
+          * @en Minimum width in CSS pixels for the default source. When the component is narrower, and no source in afSrcset matches, no graphic is shown. Omit to allow the default source at any width.
+         */
+        "afDefaultMinWidth"?: number;
+        /**
+          * Sätter standardkällan till bredd 100% och höjd auto. Annars behåller filen sina egna mått.
+          * @en Sets the default source to width 100% and height auto. Otherwise the file keeps its own dimensions.
+          * @default false
+         */
+        "afDefaultResponsive"?: boolean;
+        /**
+          * SVG-fil som används när ingen brytpunkt matchar.
+          * @en SVG file used when no breakpoint matches.
+         */
+        "afDefaultSource"?: string;
+        /**
+          * Källor som matchas mot komponentens egen bredd i CSS-pixlar. Källan med högst minWidth som bredden fortfarande uppfyller vinner. Skicka en array, eller en JSON-sträng när attributet sätts i HTML.
+          * @en Sources matched against this component's own width, in CSS pixels. The source with the highest minWidth that the width still satisfies wins. Pass an array, or a JSON string when setting the attribute in HTML.
+          * @default []
+         */
+        "afSrcset"?: SvgSource[] | string;
+    }
     /**
      * @swedishName Brödsmulor
      */
@@ -21680,6 +21783,7 @@ declare namespace LocalJSX {
     }
     /**
      * @componentType utility
+     * @deprecated Denna komponent kommer tas bort från Designsystemet i januari 2027.
      * @swedishName Mutation Observer
      */
     interface DigiUtilMutationObserver {
@@ -23435,6 +23539,14 @@ declare namespace LocalJSX {
         "afFullwidth": boolean;
         "afUnlazy": boolean;
     }
+    interface DigiMediaSvgAttributes {
+        "afDefaultSource": string;
+        "afDefaultMinWidth": number;
+        "afDefaultResponsive": boolean;
+        "afSrcset": SvgSource[] | string;
+        "afDebounceMs": number;
+        "afAlt": string;
+    }
     interface DigiNavigationBreadcrumbsAttributes {
         "afAriaLabel": string;
         "afId": string;
@@ -23938,6 +24050,7 @@ declare namespace LocalJSX {
         "digi-logo": Omit<DigiLogo, keyof DigiLogoAttributes> & { [K in keyof DigiLogo & keyof DigiLogoAttributes]?: DigiLogo[K] } & { [K in keyof DigiLogo & keyof DigiLogoAttributes as `attr:${K}`]?: DigiLogoAttributes[K] } & { [K in keyof DigiLogo & keyof DigiLogoAttributes as `prop:${K}`]?: DigiLogo[K] };
         "digi-media-figure": Omit<DigiMediaFigure, keyof DigiMediaFigureAttributes> & { [K in keyof DigiMediaFigure & keyof DigiMediaFigureAttributes]?: DigiMediaFigure[K] } & { [K in keyof DigiMediaFigure & keyof DigiMediaFigureAttributes as `attr:${K}`]?: DigiMediaFigureAttributes[K] } & { [K in keyof DigiMediaFigure & keyof DigiMediaFigureAttributes as `prop:${K}`]?: DigiMediaFigure[K] };
         "digi-media-image": Omit<DigiMediaImage, keyof DigiMediaImageAttributes> & { [K in keyof DigiMediaImage & keyof DigiMediaImageAttributes]?: DigiMediaImage[K] } & { [K in keyof DigiMediaImage & keyof DigiMediaImageAttributes as `attr:${K}`]?: DigiMediaImageAttributes[K] } & { [K in keyof DigiMediaImage & keyof DigiMediaImageAttributes as `prop:${K}`]?: DigiMediaImage[K] } & OneOf<"afAlt", DigiMediaImage["afAlt"], DigiMediaImageAttributes["afAlt"]>;
+        "digi-media-svg": Omit<DigiMediaSvg, keyof DigiMediaSvgAttributes> & { [K in keyof DigiMediaSvg & keyof DigiMediaSvgAttributes]?: DigiMediaSvg[K] } & { [K in keyof DigiMediaSvg & keyof DigiMediaSvgAttributes as `attr:${K}`]?: DigiMediaSvgAttributes[K] } & { [K in keyof DigiMediaSvg & keyof DigiMediaSvgAttributes as `prop:${K}`]?: DigiMediaSvg[K] };
         "digi-navigation-breadcrumbs": Omit<DigiNavigationBreadcrumbs, keyof DigiNavigationBreadcrumbsAttributes> & { [K in keyof DigiNavigationBreadcrumbs & keyof DigiNavigationBreadcrumbsAttributes]?: DigiNavigationBreadcrumbs[K] } & { [K in keyof DigiNavigationBreadcrumbs & keyof DigiNavigationBreadcrumbsAttributes as `attr:${K}`]?: DigiNavigationBreadcrumbsAttributes[K] } & { [K in keyof DigiNavigationBreadcrumbs & keyof DigiNavigationBreadcrumbsAttributes as `prop:${K}`]?: DigiNavigationBreadcrumbs[K] } & OneOf<"afCurrentPage", DigiNavigationBreadcrumbs["afCurrentPage"], DigiNavigationBreadcrumbsAttributes["afCurrentPage"]>;
         "digi-navigation-pagination": Omit<DigiNavigationPagination, keyof DigiNavigationPaginationAttributes> & { [K in keyof DigiNavigationPagination & keyof DigiNavigationPaginationAttributes]?: DigiNavigationPagination[K] } & { [K in keyof DigiNavigationPagination & keyof DigiNavigationPaginationAttributes as `attr:${K}`]?: DigiNavigationPaginationAttributes[K] } & { [K in keyof DigiNavigationPagination & keyof DigiNavigationPaginationAttributes as `prop:${K}`]?: DigiNavigationPagination[K] };
         "digi-navigation-sidebar": Omit<DigiNavigationSidebar, keyof DigiNavigationSidebarAttributes> & { [K in keyof DigiNavigationSidebar & keyof DigiNavigationSidebarAttributes]?: DigiNavigationSidebar[K] } & { [K in keyof DigiNavigationSidebar & keyof DigiNavigationSidebarAttributes as `attr:${K}`]?: DigiNavigationSidebarAttributes[K] } & { [K in keyof DigiNavigationSidebar & keyof DigiNavigationSidebarAttributes as `prop:${K}`]?: DigiNavigationSidebar[K] };
@@ -24484,6 +24597,12 @@ declare module "@stencil/core" {
              * @swedishName Mediebild
              */
             "digi-media-image": LocalJSX.IntrinsicElements["digi-media-image"] & JSXBase.HTMLAttributes<HTMLDigiMediaImageElement>;
+            /**
+             * Visar en SVG-fil som kod så att designtokens i filen kan användas.
+             * Brytpunkter jämförs med komponentens egen bredd.
+             * @swedishName SVG-visare
+             */
+            "digi-media-svg": LocalJSX.IntrinsicElements["digi-media-svg"] & JSXBase.HTMLAttributes<HTMLDigiMediaSvgElement>;
             /**
              * @swedishName Brödsmulor
              */
@@ -24686,6 +24805,7 @@ declare module "@stencil/core" {
             "digi-util-keyup-handler": LocalJSX.IntrinsicElements["digi-util-keyup-handler"] & JSXBase.HTMLAttributes<HTMLDigiUtilKeyupHandlerElement>;
             /**
              * @componentType utility
+             * @deprecated Denna komponent kommer tas bort från Designsystemet i januari 2027.
              * @swedishName Mutation Observer
              */
             "digi-util-mutation-observer": LocalJSX.IntrinsicElements["digi-util-mutation-observer"] & JSXBase.HTMLAttributes<HTMLDigiUtilMutationObserverElement>;