@designsystem-se/af 35.0.2 → 35.2.0

package/dist/cjs/{typography-variation.enum-d6a04b47.js → typography-variation.enum-d803f3a6.js}

@@ -51,6 +51,33 @@ exports.DialogVariation = void 0;
     DialogVariation["SECONDARY"] = "secondary";
 })(exports.DialogVariation || (exports.DialogVariation = {}));
 
+exports.ExpandableAccordionHeaderLevel = void 0;
+(function (ExpandableAccordionHeaderLevel) {
+    ExpandableAccordionHeaderLevel["H1"] = "h1";
+    ExpandableAccordionHeaderLevel["H2"] = "h2";
+    ExpandableAccordionHeaderLevel["H3"] = "h3";
+    ExpandableAccordionHeaderLevel["H4"] = "h4";
+    ExpandableAccordionHeaderLevel["H5"] = "h5";
+    ExpandableAccordionHeaderLevel["H6"] = "h6";
+})(exports.ExpandableAccordionHeaderLevel || (exports.ExpandableAccordionHeaderLevel = {}));
+
+exports.ExpandableFaqItemHeadingLevel = void 0;
+(function (ExpandableFaqItemHeadingLevel) {
+    ExpandableFaqItemHeadingLevel["H1"] = "h1";
+    ExpandableFaqItemHeadingLevel["H2"] = "h2";
+    ExpandableFaqItemHeadingLevel["H3"] = "h3";
+    ExpandableFaqItemHeadingLevel["H4"] = "h4";
+    ExpandableFaqItemHeadingLevel["H5"] = "h5";
+    ExpandableFaqItemHeadingLevel["H6"] = "h6";
+})(exports.ExpandableFaqItemHeadingLevel || (exports.ExpandableFaqItemHeadingLevel = {}));
+
+exports.ExpandableFaqItemVariation = void 0;
+(function (ExpandableFaqItemVariation) {
+    ExpandableFaqItemVariation["PRIMARY"] = "primary";
+    ExpandableFaqItemVariation["SECONDARY"] = "secondary";
+    ExpandableFaqItemVariation["TERTIARY"] = "tertiary";
+})(exports.ExpandableFaqItemVariation || (exports.ExpandableFaqItemVariation = {}));
+
 exports.FooterVariation = void 0;
 (function (FooterVariation) {
     FooterVariation["LARGE"] = "large";
@@ -157,6 +184,38 @@ exports.InfoCardHeadingLevel = void 0;
     InfoCardHeadingLevel["H6"] = "h6";
 })(exports.InfoCardHeadingLevel || (exports.InfoCardHeadingLevel = {}));
 
+exports.LayoutBlockContainer = void 0;
+(function (LayoutBlockContainer) {
+    LayoutBlockContainer["STATIC"] = "static";
+    LayoutBlockContainer["FLUID"] = "fluid";
+    LayoutBlockContainer["NONE"] = "none";
+})(exports.LayoutBlockContainer || (exports.LayoutBlockContainer = {}));
+
+exports.LayoutContainerVariation = void 0;
+(function (LayoutContainerVariation) {
+    LayoutContainerVariation["STATIC"] = "static";
+    LayoutContainerVariation["FLUID"] = "fluid";
+    LayoutContainerVariation["NONE"] = "none";
+})(exports.LayoutContainerVariation || (exports.LayoutContainerVariation = {}));
+
+exports.LayoutContainerMaxWidth = void 0;
+(function (LayoutContainerMaxWidth) {
+    LayoutContainerMaxWidth["WIDTH_1200"] = "1200";
+    LayoutContainerMaxWidth["WIDTH_1400"] = "1400";
+})(exports.LayoutContainerMaxWidth || (exports.LayoutContainerMaxWidth = {}));
+
+exports.LogoColor = void 0;
+(function (LogoColor) {
+    LogoColor["PRIMARY"] = "primary";
+    LogoColor["SECONDARY"] = "secondary";
+})(exports.LogoColor || (exports.LogoColor = {}));
+
+exports.LogoVariation = void 0;
+(function (LogoVariation) {
+    LogoVariation["SMALL"] = "small";
+    LogoVariation["LARGE"] = "large";
+})(exports.LogoVariation || (exports.LogoVariation = {}));
+
 exports.NotificationAlertHeadingLevel = void 0;
 (function (NotificationAlertHeadingLevel) {
     NotificationAlertHeadingLevel["H1"] = "h1";
@@ -216,6 +275,22 @@ exports.FeedbackVariation = void 0;
     FeedbackVariation["SECONDARY"] = "secondary";
 })(exports.FeedbackVariation || (exports.FeedbackVariation = {}));
 
+exports.TypographyHeadingJumboLevel = void 0;
+(function (TypographyHeadingJumboLevel) {
+    TypographyHeadingJumboLevel["H1"] = "h1";
+    TypographyHeadingJumboLevel["H2"] = "h2";
+    TypographyHeadingJumboLevel["H3"] = "h3";
+    TypographyHeadingJumboLevel["H4"] = "h4";
+    TypographyHeadingJumboLevel["H5"] = "h5";
+    TypographyHeadingJumboLevel["H6"] = "h6";
+})(exports.TypographyHeadingJumboLevel || (exports.TypographyHeadingJumboLevel = {}));
+
+exports.TypographyHeadingJumboVariation = void 0;
+(function (TypographyHeadingJumboVariation) {
+    TypographyHeadingJumboVariation["PRIMARY"] = "primary";
+    TypographyHeadingJumboVariation["SECONDARY"] = "secondary";
+})(exports.TypographyHeadingJumboVariation || (exports.TypographyHeadingJumboVariation = {}));
+
 exports.TypographyVariation = void 0;
 (function (TypographyVariation) {
     TypographyVariation["SMALL"] = "small";

package/dist/collection/collection-manifest.json

@@ -235,7 +235,6 @@
     "components/_layout/layout-block/layout-block.js",
     "components/_layout/layout-columns/layout-columns.js",
     "components/_layout/layout-container/layout-container.js",
-    "components/_layout/layout-media-object/layout-media-object.js",
     "components/_link/link/link.js",
     "components/_link/link-button/link-button.js",
     "components/_link/link-external/link-external.js",

package/dist/collection/components/_button/button/button.css

@@ -236,16 +236,18 @@ License: none (public domain)
   --digi--icon--color: var(--COLOR--ICON--DEFAULT);
   min-height: 0;
 }
-:host .digi-button:hover {
-  background: var(--COLOR--BACKGROUND--HOVER);
-  border-radius: var(--BORDER-RADIUS--HOVER);
-  border-width: var(--BORDER-WIDTH--HOVER);
-  border-style: var(--BORDER-STYLE--HOVER);
-  border-color: var(--COLOR--BORDER--HOVER);
-  color: var(--COLOR--TEXT--HOVER);
-}
-:host .digi-button:hover ::slotted([slot^=icon]) {
-  --digi--icon--color: var(--COLOR--ICON--HOVER);
+@media (any-hover: hover) {
+  :host .digi-button:hover {
+    background: var(--COLOR--BACKGROUND--HOVER);
+    border-radius: var(--BORDER-RADIUS--HOVER);
+    border-width: var(--BORDER-WIDTH--HOVER);
+    border-style: var(--BORDER-STYLE--HOVER);
+    border-color: var(--COLOR--BORDER--HOVER);
+    color: var(--COLOR--TEXT--HOVER);
+  }
+  :host .digi-button:hover ::slotted([slot^=icon]) {
+    --digi--icon--color: var(--COLOR--ICON--HOVER);
+  }
 }
 :host .digi-button:focus-visible {
   background: var(--COLOR--BACKGROUND--FOCUS);

package/dist/collection/components/_calendar/calendar/calendar.css

@@ -96,13 +96,22 @@ License: none (public domain)
 :host .digi-calendar__header--month-step .digi-calendar__month-select-button:first-child {
   border-radius: 4px 0 0 0;
 }
-:host .digi-calendar__header--month-step .digi-calendar__month-select-button:focus:not(.digi-calendar__date--not-selectable), :host .digi-calendar__header--month-step .digi-calendar__month-select-button:hover:not(.digi-calendar__date--not-selectable) {
+:host .digi-calendar__header--month-step .digi-calendar__month-select-button:focus-visible:not(.digi-calendar__date--not-selectable), :host .digi-calendar__header--month-step .digi-calendar__month-select-button:active:not(.digi-calendar__date--not-selectable) {
   --digi--calendar--header--button--background: var(
     --digi--calendar--header--button--background--hover
   );
   text-decoration: underline;
   cursor: pointer;
 }
+@media (any-hover: hover) {
+  :host .digi-calendar__header--month-step .digi-calendar__month-select-button:hover:not(.digi-calendar__date--not-selectable) {
+    --digi--calendar--header--button--background: var(
+      --digi--calendar--header--button--background--hover
+    );
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
 :host .digi-calendar__header--month-step .digi-calendar__month-select-button:focus-visible {
   outline: 2px solid black;
   outline-offset: -3px;
@@ -174,32 +183,24 @@ License: none (public domain)
   border: var(--digi--calendar--date--today--circle-border);
   border-radius: 50%;
 }
-:host .digi-calendar__date:hover:not(.digi-calendar__date--not-selectable) {
-  cursor: pointer;
-}
-:host .digi-calendar__date:hover:not(.digi-calendar__date--not-selectable):not(.digi-calendar__date--selected) {
-  --digi--calendar--date--box-shadow: var(
-    --digi--calendar--date--box-shadow--hover
-  );
-  --digi--calendar--date--background-color: var(
-    --digi--calendar--date--background-color--hover
-  );
-}
-:host .digi-calendar__date:hover:not(.digi-calendar__date--not-selectable) span {
-  text-decoration: underline;
+@media (any-hover: hover) {
+  :host .digi-calendar__date:hover:not(.digi-calendar__date--not-selectable) {
+    cursor: pointer;
+  }
+  :host .digi-calendar__date:hover:not(.digi-calendar__date--not-selectable):not(.digi-calendar__date--selected) {
+    --digi--calendar--date--box-shadow: var(--digi--calendar--date--box-shadow--hover);
+    --digi--calendar--date--background-color: var(--digi--calendar--date--background-color--hover);
+  }
+  :host .digi-calendar__date:hover:not(.digi-calendar__date--not-selectable) span {
+    text-decoration: underline;
+  }
 }
 :host .digi-calendar__date--selected {
-  --digi--calendar--date--background-color: var(
-    --digi--calendar--date--selected--background-color
-  );
-  --digi--calendar--date--color: var(
-    --digi--calendar--date--selected--color
-  );
+  --digi--calendar--date--background-color: var(--digi--calendar--date--selected--background-color);
+  --digi--calendar--date--color: var(--digi--calendar--date--selected--color);
 }
 :host .digi-calendar__date--selected:hover {
-  --digi--calendar--date--background-color: var(
-    --digi--calendar--date--selected--background-color
-  );
+  --digi--calendar--date--background-color: var(--digi--calendar--date--selected--background-color);
 }
 :host .digi-calendar__date--selected:hover span {
   text-decoration: none;
@@ -224,9 +225,7 @@ License: none (public domain)
   left: 50%;
 }
 :host .digi-calendar__date--focused:focus-visible:not(.digi-calendar__date--selected):not(.digi-calendar__date--not-selectable) {
-  --digi--calendar--date--background-color: var(
-    --digi--calendar--date--focused--background-color
-  );
+  --digi--calendar--date--background-color: var(--digi--calendar--date--focused--background-color);
   outline: 2px solid black;
   outline-offset: -3px;
   box-shadow: 0px 0px 0px 5px inset white;

package/dist/collection/components/_chart/chart-line/chart-line.js

@@ -100,10 +100,7 @@ export class ChartLine {
             }
             this._yAxisHandle
                 .selectAll('line')
-                .attr('stroke', getComputedStyle(document.documentElement)
-                .getPropertyValue('--digi--global--color--neutral--grayscale--darker')
-                .trim()
-                .toLocaleLowerCase());
+                .attr('stroke', '#BDBDBD');
             this._yAxisHandle.select('.domain').attr('display', 'none');
             if (init)
                 this.leftSetAxis(init);
@@ -765,10 +762,7 @@ export class ChartLine {
             this._xAxisHandle
                 .selectAll('line')
                 .attr('stroke-linecap', this._lineCap)
-                .attr('stroke', getComputedStyle(document.documentElement)
-                .getPropertyValue('--digi--global--color--neutral--grayscale--darkest-3')
-                .trim()
-                .toLocaleLowerCase());
+                .attr('stroke', '#757575');
         };
         this.positionCircles = (point, transition) => {
             if (transition) {
@@ -1622,7 +1616,7 @@ export class ChartLine {
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}>`;
         else
             heading = `<${this.afHeadingLevel}>${this._chartData.title}</${this.afHeadingLevel}><p>${this._chartData.subTitle}</p>`;
-        return (h("host", { key: '81c9a82b54de8ed3ffab5e91ce54f897bb93540d', ref: (el) => (this._host = el) }, h("div", { key: '9d9f04205ebc0c96e503640f66bb045ec54930e6', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '832b4bad8e526443bae9b034087850f22e69948f', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'f6af1648ae04981e03b9e0adcebcdc2505e9d13d', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '3fbb40ee7e69bb2fa3ef6d0421359c9fc6052173', slot: "icon" }), "Visa tabell"), h("digi-button", { key: 'c1598d0a7fb415e73ff90fb27825b3eb45d8c5e2', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '5705100c1fb1781ab83f49e5d267d17fee72cc65', slot: "icon" }), "Visa diagram"), h("div", { key: '0faac4fd820e577dd80d0201c7f64ca58b999708', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: '763139851e7139dad00ac97eb0100cf97aa41812', class: "chartTooltip", id: this.afId }, h("div", { key: 'c6c1a49fd0761dfde4323ac82c2548ddc4ee1e4d', class: "tooltipHead" }, h("digi-icon-x", { key: 'd74a8c648eaacfe1a9be3fd9067599ed214784e4', class: "close" }), ' '), h("div", { key: '951072f7c6942b89e0df2c25b648e0b33b2a81ba', class: "tooltipBody" })), h("div", { key: 'c2342d0616ae3f24ae88e5072b41aa0cc98dedd2', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: '10383520bbb1a9b25008664654710147236cf543', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'a97820b1c13b69f73cf3794136f107c3d2999962', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
+        return (h("host", { key: '0aab34e11f412e3fea690e806cd2d9067bcafe09', ref: (el) => (this._host = el) }, h("div", { key: '941eef6b6e130641acec11ec4ee893611a811d75', class: "topWrapper", ref: (el) => (this._titleDiv = el) }, h("digi-typography", { key: '2f4a69e973def39e52ef01bea01d2c6fe9accc47', class: "chartTitle", innerHTML: heading }), h("digi-button", { key: 'e7b8e1e0a202b33b1a3a32af43d642fd925dff90', class: "buttonWrapper tableButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.activateTable, afAriaLabel: `Visa tabell ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-table", { key: '5dbedd2ceed7ef62100f610c57496675a2b2254b', slot: "icon" }), "Visa tabell"), h("digi-button", { key: '9a0d402143c1087582f88ec8b8a12152fe665a3d', style: { display: 'none' }, class: "buttonWrapper chartButton", "af-size": "medium", "af-variation": "function", "af-full-width": "false", onAfOnClick: this.reInitChart, afAriaLabel: `Visa diagram ${this._chartData.title ? this._chartData.title.toLowerCase() : ''}` }, h("digi-icon-chart", { key: '082bd94e92917727ed627cce01daf437f71fcf39', slot: "icon" }), "Visa diagram"), h("div", { key: 'e0c445ff5e9c6832831d45ee1e8bd1c37c8c6ecc', class: "scChartStatus", role: "status", ref: (el) => (this._status = el) })), h("div", { key: 'f012774817ee966de745cc20dd2410a44c7562d7', class: "chartTooltip", id: this.afId }, h("div", { key: 'da2b1f257ff3fb7b6b141af96fd85ebf3442accd', class: "tooltipHead" }, h("digi-icon-x", { key: 'a50f73e003c912a4123a83f4c64cd5cc03bf6c68', class: "close" }), ' '), h("div", { key: '25013c3bd2d261beed1bafce41d599b7625b5bbe', class: "tooltipBody" })), h("div", { key: '7d8ee22026572d3c6cdce7200c98c3b665ba948b', class: "chart", ref: (el) => (this._chartDiv = el) }), h("div", { key: 'bf0d27d67c1c86d701401828ec59bd6f873a96f7', class: "legend", ref: (el) => (this._legendDiv = el) }), h("div", { key: 'b3539e60f97683d40b50e91be789eb78ab6d7061', class: "table", ref: (el) => (this._tableDiv = el) }, ' ')));
     }
     static get is() { return "digi-chart-line"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_code/code/code.css

@@ -20,6 +20,7 @@ digi-code .digi-code--light code[class*=language-] {
   color: #545454;
   background: none;
   font-family: var(--digi--global--typography--font-family--mono);
+  font-size: 14px;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -36,6 +37,7 @@ digi-code .digi-code--light code[class*=language-] {
 }
 digi-code .digi-code--light code[class*=language-] {
   white-space: normal;
+  display: block;
 }
 digi-code .digi-code--light .token.comment,
 digi-code .digi-code--light .token.prolog,
@@ -144,6 +146,7 @@ digi-code .digi-code--dark code[class*=language-] {
   color: #f8f8f2;
   background: none;
   font-family: var(--digi--global--typography--font-family--mono);
+  font-size: 14px;
   text-align: left;
   white-space: pre;
   word-spacing: normal;
@@ -160,6 +163,7 @@ digi-code .digi-code--dark code[class*=language-] {
 }
 digi-code .digi-code--dark code[class*=language-] {
   white-space: normal;
+  display: block;
 }
 digi-code .digi-code--dark .token.comment,
 digi-code .digi-code--dark .token.prolog,

package/dist/collection/components/_expandable/expandable-accordion/expandable-accordion.css

@@ -24,6 +24,14 @@ License: none (public domain)
   border-bottom-style: solid;
   margin-top: calc(var(--digi--expandable-accordion--border-bottom-width) * -1);
 }
+:host .digi-expandable-accordion--fullwidth::after {
+  content: "";
+  display: block;
+  max-width: none;
+  border-bottom-width: var(--digi--expandable-accordion--border-bottom-width);
+  border-bottom-style: solid;
+  margin-top: calc(var(--digi--expandable-accordion--border-bottom-width) * -1);
+}
 
 .digi-expandable-accordion__header {
   display: flex;
@@ -35,6 +43,9 @@ License: none (public domain)
   border-bottom-color: var(--digi--expandable-accordion--border-bottom-color);
   border-bottom-style: solid;
 }
+.digi-expandable-accordion--fullwidth .digi-expandable-accordion__header {
+  max-width: none;
+}
 
 .digi-expandable-accordion__toggle-icon {
   transition: var(--digi--expandable-accordion--header--toggle-icon--transition);
@@ -47,6 +58,9 @@ License: none (public domain)
   margin: 0;
   flex: 1;
 }
+.digi-expandable-accordion__heading-text {
+  max-width: var(--digi--paragraph-width--medium);
+}
 
 .digi-expandable-accordion__button {
   font-family: var(--digi--global--typography--font-family--default);
@@ -78,6 +92,9 @@ License: none (public domain)
 .digi-expandable-accordion--variation-primary .digi-expandable-accordion__button:hover {
   text-decoration: underline;
 }
+.digi-expandable-accordion--fullwidth .digi-expandable-accordion__button {
+  max-width: none;
+}
 
 .digi-expandable-accordion__content {
   overflow-y: hidden;

package/dist/collection/components/_expandable/expandable-accordion/expandable-accordion.js

@@ -11,6 +11,7 @@ export class ExpandableAccordion {
     constructor() {
         this.afHeading = undefined;
         this.afHeadingLevel = ExpandableAccordionHeaderLevel.H2;
+        this.afFullWidth = false;
         this.afExpanded = false;
         this.afAnimation = true;
         this.afId = randomIdGenerator('digi-expandable-accordion');
@@ -21,7 +22,8 @@ export class ExpandableAccordion {
         return {
             [`digi-expandable-accordion--expanded-${!!this.afExpanded}`]: true,
             [`digi-expandable-accordion--animation-${!!this.afAnimation}`]: true,
-            [`digi-expandable-accordion--variation-primary`]: true
+            [`digi-expandable-accordion--variation-primary`]: true,
+            [`digi-expandable-accordion--fullwidth`]: this.afFullWidth
         };
     }
     /**
@@ -76,7 +78,7 @@ export class ExpandableAccordion {
         this.afOnClick.emit(e);
     }
     render() {
-        return (h("article", { key: '02340aea532ecb7415f74c39fc9d0105b3b3000c', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-accordion': true }, this.cssModifiers) }, h("header", { key: 'da98703b8a2fb69c202570255a525f513dd5e99e', class: "digi-expandable-accordion__header" }, h(this.afHeadingLevel, { key: 'a666f55b00e451ebdf75cb3675e5f8f07c12f887', class: "digi-expandable-accordion__heading" }, h("button", { key: '0b5668f4d32b0b31ac627b0b787eb2795e756cee', type: "button", class: "digi-expandable-accordion__button", onClick: (e) => this.clickToggleHandler(e), "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content`, ref: (el) => (this._button = el) }, h("digi-icon-chevron-down", { key: 'b2c63b1a5afe9dcc8c96b72856ac16ddfb61a38c', class: "digi-expandable-accordion__toggle-icon" }), this.afHeading))), h("section", { key: '7ee9a822e15da2212df6980c4b813730df44a90e', class: "digi-expandable-accordion__content", id: `${this.afId}-content` }, h("div", { key: 'f0b3eb9abff27c9ee4e06c6924654a8874ee247f' }, h("digi-typography", { key: '970ae11eebb5358ebae1457dcd1f8ac8996d8336' }, h("slot", { key: 'aa44a79ce9417911ad9974ed5d84f7b012a0aa5a' }))))));
+        return (h("article", { key: 'b08e4bbb4a2956b84516f66657d6325e734d48c2', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-accordion': true }, this.cssModifiers) }, h("header", { key: 'e41faee765bdd4102afeafdb4bc8d16968a68f32', class: "digi-expandable-accordion__header" }, h(this.afHeadingLevel, { key: 'f4d7007ac8251c13c4e04b57ac94bbe469bc7078', class: "digi-expandable-accordion__heading" }, h("button", { key: 'a2b7fb9290a255deaa4cf540f009f89f3718037c', type: "button", class: "digi-expandable-accordion__button", onClick: (e) => this.clickToggleHandler(e), "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content`, ref: (el) => (this._button = el) }, h("digi-icon-chevron-down", { key: 'efb0e571d1e6df737155c9b1ae981cc30454eb0e', class: "digi-expandable-accordion__toggle-icon" }), h("div", { key: 'c4af3ba7d8b96c9873e47efef07d008b3ae4f502', class: "digi-expandable-accordion__heading-text" }, this.afHeading)))), h("section", { key: '3d82589e8eb52b9bd7af94962f7c957b91523186', class: "digi-expandable-accordion__content", id: `${this.afId}-content` }, h("div", { key: '724a0623fbfc5ec5b8649c793cf3847616325930' }, h("digi-typography", { key: '25eb5ec621cf75bcbd3822e323092e101119dbbf' }, h("slot", { key: '29a9704d5e443f391483333be1b11822109dca44' }))))));
     }
     static get is() { return "digi-expandable-accordion"; }
     static get encapsulation() { return "scoped"; }
@@ -143,6 +145,29 @@ export class ExpandableAccordion {
                 "reflect": false,
                 "defaultValue": "ExpandableAccordionHeaderLevel.H2"
             },
+            "afFullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Makes the component take up 100% of the width of the surface it is in."
+                        }],
+                    "text": "G\u00F6r s\u00E5 att komponenten tar upp 100% i bredd av ytan den befinner sig i."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "afExpanded": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/_expandable/expandable-faq/expandable-faq.js

@@ -50,9 +50,9 @@ export class ExpandableFaq {
             });
     }
     render() {
-        return (h("div", { key: '1f3dcc55e6e60e2624a647817174a2dd1f8574e6', class: {
+        return (h("div", { key: 'd1351ff9e840ef3f2a93db7724ba5808fef5ebe3', class: {
                 'digi-expandable-faq': true
-            } }, h(this.afHeadingLevel, { key: 'b557cac87e08ff794989dc92d9e7c405859707f1' }, this.afHeading), h("slot", { key: '694f4df0a65c40eae1e4e260fad27377f31fd31d' })));
+            } }, h(this.afHeadingLevel, { key: '62ab39883256fa2b7544eb747497a19280e57909' }, this.afHeading), h("slot", { key: 'd72a84f027f5abb9dd32547606704c36f299759b' })));
     }
     static get is() { return "digi-expandable-faq"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_expandable/expandable-faq-item/expandable-faq-item.css

@@ -18,7 +18,6 @@ License: none (public domain)
   display: block;
 }
 :host .digi-expandable-faq-item {
-  max-width: calc(var(--digi--paragraph-width--medium) + var(--digi--padding--largest-2));
   margin-bottom: var(--digi--global--spacing--smallest-4);
   font-family: var(--digi--global--typography--font-family--default);
 }
@@ -39,6 +38,12 @@ License: none (public domain)
   width: 100%;
   max-width: calc(var(--digi--paragraph-width--medium) + var(--digi--padding--largest-2));
 }
+:host .digi-expandable-faq-item__header .digi-expandable-faq-item--fullwidth {
+  max-width: none;
+}
+:host .digi-expandable-faq-item__header-text {
+  max-width: var(--digi--paragraph-width--medium);
+}
 :host .digi-expandable-faq-item__header h1,
 :host .digi-expandable-faq-item__header h2,
 :host .digi-expandable-faq-item__header h3,
@@ -58,6 +63,9 @@ License: none (public domain)
   --digi--icon--width: var(--digi--expandable-faq-item--icon--size);
   --digi--icon--height: var(--digi--expandable-faq-item--icon--size);
 }
+:host .digi-expandable-faq-item--fullwidth .digi-expandable-faq-item__header {
+  max-width: none;
+}
 :host .digi-expandable-faq-item__button {
   color: var(--digi--color--text--primary);
   background-color: var(--BACKGROUND);

package/dist/collection/components/_expandable/expandable-faq-item/expandable-faq-item.js

@@ -11,6 +11,7 @@ export class ExpandableFaqItem {
     constructor() {
         this.afHeading = undefined;
         this.afHeadingLevel = ExpandableFaqItemHeadingLevel.H3;
+        this.afFullWidth = false;
         this.afExpanded = false;
         this.afVariation = ExpandableFaqItemVariation.PRIMARY;
         this.afAnimation = true;
@@ -19,6 +20,7 @@ export class ExpandableFaqItem {
     get cssModifiers() {
         return {
             'digi-expandable-faq-item--expanded': this.afExpanded,
+            'digi-expandable-faq-item--fullwidth': this.afFullWidth,
             'digi-expandable-faq-item--primary': this.afVariation === ExpandableFaqItemVariation.PRIMARY,
             'digi-expandable-faq-item--secondary': this.afVariation === ExpandableFaqItemVariation.SECONDARY,
             'digi-expandable-faq-item--tertiary': this.afVariation === ExpandableFaqItemVariation.TERTIARY
@@ -68,18 +70,18 @@ export class ExpandableFaqItem {
         }
     }
     render() {
-        return (h("article", { key: '586884d3f2c91a7597743198cdab5758735943ed', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-faq-item': true }, this.cssModifiers) }, h("header", { key: '51e944438c6ccf3ff713f838da0117436acdd88a', class: "digi-expandable-faq-item__header" }, h(this.afHeadingLevel, { key: '1e976960a26b0bab61886351c3ed4137c98ec06b' }, h("button", { key: 'e52835b2541c1ffc3a7becf76e59aef097240604', type: "button", class: "digi-expandable-faq-item__button", onClick: (e) => {
+        return (h("article", { key: 'e412b493af65f46ae29f328eddcb578b2541edd8', "aria-expanded": this.afExpanded ? 'true' : 'false', class: Object.assign({ 'digi-expandable-faq-item': true }, this.cssModifiers) }, h("header", { key: '145157d04dfdc71a3c97fa7aadf4e907407ad98d', class: "digi-expandable-faq-item__header" }, h(this.afHeadingLevel, { key: 'd756b0ebc4c2787eb6ccfc209332d5ab91bcd850' }, h("button", { key: '47ad4e697d1098e17e08f662ee8623b5cbdca1f7', type: "button", class: "digi-expandable-faq-item__button", onClick: (e) => {
                 e.preventDefault();
                 this.afExpanded = !this.afExpanded;
                 this.afOnClick.emit(e);
-            }, "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("digi-icon-chevron-down", { key: '36b8f9c563b9ef4417a21fbcba204b914ea96506', class: {
+            }, "aria-expanded": this.afExpanded ? 'true' : 'false', "aria-controls": `${this.afId}-content` }, h("digi-icon-chevron-down", { key: 'eea58e9001fbeac3d398de353c267b5e5a32ac9b', class: {
                 'digi-expandable-faq-item__header--toggle-icon': true,
                 'digi-expandable-faq-item__header--toggle-icon--expanded': this.afExpanded
-            } }), this.afHeading))), h("section", { key: '8f384f65f08a5d84649f40ad1c441ab3733fdc62', class: {
+            } }), h("div", { key: 'a5bd2b8c7a79543c3abc8dc4d8e287aad2b26712', class: "digi-expandable-faq-item__header-text" }, this.afHeading)))), h("section", { key: '535ff0e89a64e71ca8c8cbdd2f4492e71f46e374', class: {
                 'digi-expandable-faq-item__content': true,
                 'digi-expandable-faq-item__content--animation': this.afAnimation,
                 'digi-expandable-faq-item__content--hidden': !this.afExpanded
-            }, id: `${this.afId}-content` }, h("div", { key: '0af73c452462f4436ef90ca4c9d5b77dba1ee1d4' }, h("digi-typography", { key: 'f2079bf2c748440255eafc9052e6a0b671a662fc' }, h("slot", { key: 'bf723138101e6ab11cfe245089eea195e8950ee0' }))))));
+            }, id: `${this.afId}-content` }, h("div", { key: 'e8bf194e00157e1fead5927000024f7710ef8740' }, h("digi-typography", { key: 'a1fe6e46cc23cf0f6602d041499e04ff5952b119' }, h("slot", { key: '83a8cf8b3316a072b08202f9ba8ccaead336dfaf' }))))));
     }
     static get is() { return "digi-expandable-faq-item"; }
     static get encapsulation() { return "scoped"; }
@@ -146,6 +148,29 @@ export class ExpandableFaqItem {
                 "reflect": false,
                 "defaultValue": "ExpandableFaqItemHeadingLevel.H3"
             },
+            "afFullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Makes the component take up 100% of the width of the surface it is in."
+                        }],
+                    "text": "G\u00F6r s\u00E5 att komponenten tar upp 100% i bredd av ytan den befinner sig i."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-full-width",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "afExpanded": {
                 "type": "boolean",
                 "mutable": false,

package/dist/collection/components/_footer/footer/footer.js

@@ -22,7 +22,7 @@ export class FooterFooter {
         };
     }
     render() {
-        return (h(Host, { key: '27eaaeb6323b8eab2c9e676e52baff22e3931b59' }, h("footer", { key: 'a18d1fbd40129804018f9768db4f3aa27cd3ecdf', class: Object.assign({ 'digi-footer': true }, this.cssModifiers) }, h("digi-typography", { key: '87b429e38f0eb8d589b7522cff7130f0cbf30634' }, h("digi-layout-block", { key: 'd983d8d03811df520b946e701e50f8a7d88259aa', afVariation: LayoutBlockVariation.PROFILE }, h("digi-layout-container", { key: '3213388b3b270fedbb848c1d6d129d693f8876cd', "af-no-gutter": true }, h("div", { key: '4b8725eaead3c4b9ce57d7b77af3fcb3fa3522da', class: "digi-footer__content-top" }, h("slot", { key: 'c21f38065a406da56631f1f9345eb92e8d8f834d', name: "content-top" })), h("div", { key: 'b3fc3c7fc7f8f6ba18865c5e58b7cda17ccc38ca', class: "digi-footer__content-bottom" }, h("slot", { key: 'f16a990a7608e2f673b39e1bc7191024afdfaac4', name: "content-bottom-left" }), h("slot", { key: '848d34e8d04affe50fab869bba06fb03625db725', name: "content-bottom-right" }))))))));
+        return (h(Host, { key: 'ee4ea5865121a24c3c7101bfa8c05c2eb3435dd1' }, h("footer", { key: 'ce6d22b1e0e6cf7162618c74e55a0cbc87e88e15', class: Object.assign({ 'digi-footer': true }, this.cssModifiers) }, h("digi-typography", { key: '61d27159721343567f14badad6a856567b85448a' }, h("digi-layout-block", { key: '968df18f78b11b490b7e3ec2b2a474b47e18121f', afVariation: LayoutBlockVariation.PROFILE }, h("digi-layout-container", { key: '5a4b6b077e9778e8bc79f2607759e62c07f454f6', "af-no-gutter": true }, h("div", { key: '69d9448d50f5cf564e0c971da28f9cb1fa2321ea', class: "digi-footer__content-top" }, h("slot", { key: '5019f2a0590db884fe8aa7c6a2e8e97c30b067a1', name: "content-top" })), h("div", { key: '684f69689e98ca66403d1bd52ed36d4007024009', class: "digi-footer__content-bottom" }, h("slot", { key: '6a59e1787e2d9a52a83a01df7a69e84170c51975', name: "content-bottom-left" }), h("slot", { key: 'd3a16b9e1bd1220c252d11c0c318f1c7f7b2e0d0', name: "content-bottom-right" }))))))));
     }
     static get is() { return "digi-footer"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_footer/footer-card/footer-card.js

@@ -20,7 +20,7 @@ export class FooterFooterCard {
         };
     }
     render() {
-        return (h(Host, { key: 'fd1e970c930fad36d18c848db7325b02bacf1cee' }, h("div", { key: '3db638133e06a7c248679a8c0660637d1310e0ff', class: Object.assign({ 'digi-footer-card': true }, this.cssModifiers) }, h("div", { key: '15ab93d8bc71a42f9b65482d20294240c4cf777d', class: "digi-footer-card__content" }, h("slot", { key: '052855b6532d652dd380f5a40771ed03f9a47907' })))));
+        return (h(Host, { key: 'fa225634df0c6414c3949ba2e6828b7fc389d2df' }, h("div", { key: 'f1e422f341731f92616b787727fac43e806e95d4', class: Object.assign({ 'digi-footer-card': true }, this.cssModifiers) }, h("div", { key: '63c5b87358d98b2f4be80d59780d8cc2f315a102', class: "digi-footer-card__content" }, h("slot", { key: '246e9b9cd9b60eb9cc1b1f5bb0b81425ce0b863e' })))));
     }
     static get is() { return "digi-footer-card"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/_form/form-category-filter/form-category-filter.js

@@ -92,7 +92,7 @@ export class FormCategoryFilter {
         this.afHideToggle = !this.toggleHidden;
     }
     render() {
-        return (h(Host, { key: '546117d0885502aef20ee5e1c3027a14c038dd8b' }, h("div", { key: '1ebd8d6a3f18b0248556783f8b7cecd984dbcc8d', class: {
+        return (h(Host, { key: '3ac402f23844ae8c7dd1fd4ac3a5a5afa2ec8dc8' }, h("div", { key: '9afa72dd9be35e9d7bf12ef6aedf05c0c7dbc171', class: {
                 'digi-form-category-filter': true
             } }, this.displayCategories().map((category) => (h("digi-button", { class: {
                 'digi-form-category-filter--category': true,
@@ -100,7 +100,7 @@ export class FormCategoryFilter {
             }, afVariation: "primary", afAriaPressed: this.selectedCategories.includes(category.name), onAfOnClick: () => {
                 this.toggleCategory(category);
             } }, typeof category.hits === 'undefined' && category.name, typeof category.hits !== 'undefined' && (h("span", null, category.name, ' ', h("span", { class: "digi-form-category-filter--category--thin-text" }, "(", category.hits, ")")))))), this.afHideToggle === false &&
-            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: 'f0dae2df00b4c6484f54995352eb6411d4d568da' }, h("digi-button", { key: '1dc1028d7e7407ee724c294e02c52246f39e6025', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
+            this.afCategories.length > this.afVisibleCollapsed && (h("div", { key: '625315577e839617bfd3e6bba0af4b82e2a5ab73' }, h("digi-button", { key: 'bebf308e6427a4d37507b1c705e5583f7d620603', afVariation: "function", afAriaExpanded: !this.collapsed, onClick: () => {
                 this.toggleCollapsed();
             } }, this.collapsed ? 'Visa alla' : 'Visa färre', this.collapsed ? (h("digi-icon-plus", { slot: "icon", "aria-hidden": "true" })) : (h("digi-icon-minus", { slot: "icon", "aria-hidden": "true" }))))))));
     }