@designsystem-se/af 35.3.0 → 35.4.0

package/dist/cjs/{typography-variation.enum-6a934f5b.js → typography-variation.enum-9f56fd50.js}

@@ -51,13 +51,6 @@ exports.DialogVariation = void 0;
     DialogVariation["SECONDARY"] = "secondary";
 })(exports.DialogVariation || (exports.DialogVariation = {}));
 
-exports.FooterCardVariation = void 0;
-(function (FooterCardVariation) {
-    FooterCardVariation["NONE"] = "none";
-    FooterCardVariation["ICON"] = "icon";
-    FooterCardVariation["BORDER"] = "border";
-})(exports.FooterCardVariation || (exports.FooterCardVariation = {}));
-
 exports.FooterVariation = void 0;
 (function (FooterVariation) {
     FooterVariation["LARGE"] = "large";
@@ -74,6 +67,23 @@ exports.FormErrorListHeadingLevel = void 0;
     FormErrorListHeadingLevel["H6"] = "h6";
 })(exports.FormErrorListHeadingLevel || (exports.FormErrorListHeadingLevel = {}));
 
+exports.FormRadiobuttonLayout = void 0;
+(function (FormRadiobuttonLayout) {
+    FormRadiobuttonLayout["INLINE"] = "inline";
+    FormRadiobuttonLayout["BLOCK"] = "block";
+})(exports.FormRadiobuttonLayout || (exports.FormRadiobuttonLayout = {}));
+
+exports.FormRadiobuttonValidation = void 0;
+(function (FormRadiobuttonValidation) {
+    FormRadiobuttonValidation["ERROR"] = "error";
+})(exports.FormRadiobuttonValidation || (exports.FormRadiobuttonValidation = {}));
+
+exports.FormRadiobuttonVariation = void 0;
+(function (FormRadiobuttonVariation) {
+    FormRadiobuttonVariation["PRIMARY"] = "primary";
+    FormRadiobuttonVariation["SECONDARY"] = "secondary";
+})(exports.FormRadiobuttonVariation || (exports.FormRadiobuttonVariation = {}));
+
 exports.FormReceiptHeadingLevel = void 0;
 (function (FormReceiptHeadingLevel) {
     FormReceiptHeadingLevel["H1"] = "h1";
@@ -174,17 +184,17 @@ exports.LayoutContainerMaxWidth = void 0;
     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.NavigationVerticalMenuActiveIndicatorSize = void 0;
+(function (NavigationVerticalMenuActiveIndicatorSize) {
+    NavigationVerticalMenuActiveIndicatorSize["PRIMARY"] = "primary";
+    NavigationVerticalMenuActiveIndicatorSize["SECONDARY"] = "secondary";
+})(exports.NavigationVerticalMenuActiveIndicatorSize || (exports.NavigationVerticalMenuActiveIndicatorSize = {}));
+
+exports.NavigationVerticalMenuVariation = void 0;
+(function (NavigationVerticalMenuVariation) {
+    NavigationVerticalMenuVariation["PRIMARY"] = "primary";
+    NavigationVerticalMenuVariation["SECONDARY"] = "secondary";
+})(exports.NavigationVerticalMenuVariation || (exports.NavigationVerticalMenuVariation = {}));
 
 exports.NotificationAlertHeadingLevel = void 0;
 (function (NotificationAlertHeadingLevel) {

package/dist/collection/components/_chart/bar-chart/bar-chart.css

@@ -3,20 +3,21 @@
 :host .digi-bar-chart {
   font-family: var(--digi--global--typography--font-family--default);
 }
-:host .chartTitle {
-  --digi--typography--h2--margin: 0.5rem;
-  --digi--typography--h3--margin: 0.5rem;
-  --digi--typography--h4--margin: 0.5rem;
-  --digi--typography--h5--margin: 0.5rem;
-  --digi--typography--h6--margin: 0.5rem;
+:host .topWrapper,
+:host .chartTitle .digi-typography {
   display: flex;
-  justify-content: flex-start;
   flex-direction: column;
-  align-items: left;
-  text-align: left;
-  padding-bottom: 1rem;
-  margin-right: 0.5rem;
-  flex-grow: 2;
+  gap: 0.75rem;
+}
+:host .topWrapper {
+  margin-bottom: 0.75rem;
+}
+:host .chartTitle {
+  --MARGIN--HEADING-2: 0;
+  --MARGIN--HEADING-3: 0;
+  --MARGIN--HEADING-4: 0;
+  --MARGIN--HEADING-5: 0;
+  --MARGIN--HEADING-6: 0;
 }
 :host .buttonWrapper {
   --digi--button--padding--medium: 4px 4px 0.8125rem 0;
@@ -79,11 +80,4 @@
   background-repeat: no-repeat;
   background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
   background-attachment: local, local, scroll, scroll;
-}
-:host .topWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: space-between;
-  flex-wrap: wrap;
 }

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

@@ -13,28 +13,32 @@
   min-height: fit-content;
 }
 
-.buttonWrapper {
-  --digi--button--padding--medium: 0 0 0.75rem 0;
-}
-
 .chart {
   box-sizing: content-box;
   width: auto;
 }
 
-.chartTitle {
-  --digi--typography--h2--margin: 0.5rem;
-  --digi--typography--h3--margin: 0.5rem;
-  --digi--typography--h4--margin: 0.5rem;
-  --digi--typography--h5--margin: 0.5rem;
-  --digi--typography--h6--margin: 0.5rem;
+.topWrapper,
+.chartTitle .digi-typography {
   display: flex;
-  justify-content: flex-start;
   flex-direction: column;
-  align-items: left;
-  text-align: left;
-  padding-bottom: 1rem;
-  flex-grow: 2;
+  gap: 0.75rem;
+}
+
+.topWrapper {
+  margin-bottom: 0.75rem;
+}
+
+.chartTitle {
+  --MARGIN--HEADING-2: 0;
+  --MARGIN--HEADING-3: 0;
+  --MARGIN--HEADING-4: 0;
+  --MARGIN--HEADING-5: 0;
+  --MARGIN--HEADING-6: 0;
+}
+
+.buttonWrapper {
+  --digi--button--padding--medium: 0 0 0.75rem 0;
 }
 
 .close {
@@ -150,12 +154,4 @@
   overflow-y: auto;
   scrollbar-width: thin;
   scrollbar-color: rgb(245, 245, 245) transparent;
-}
-
-.topWrapper {
-  display: flex;
-  flex-direction: row;
-  align-items: flex-end;
-  justify-content: space-between;
-  flex-wrap: wrap;
 }

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

@@ -30,7 +30,7 @@ digi-code-block .digi-code-block--light pre[class*=language-] {
   text-align: left;
   white-space: pre-wrap;
   word-spacing: normal;
-  word-break: normal;
+  word-break: break-word;
   word-wrap: normal;
   line-height: 1.5;
   -moz-tab-size: 4;
@@ -174,7 +174,7 @@ digi-code-block .digi-code-block--dark pre[class*=language-] {
   text-align: left;
   white-space: pre-wrap;
   word-spacing: normal;
-  word-break: normal;
+  word-break: break-word;
   word-wrap: normal;
   line-height: 1.5;
   -moz-tab-size: 4;

package/dist/collection/components/_header/header/header.css

@@ -60,40 +60,7 @@ License: none (public domain)
 :host .digi-header ::slotted(div[slot=header-content]) .digi-header-avatar {
   --digi--header-avatar--margin: 0;
 }
-:host .digi-header--af-centered ::slotted([slot=header-logo]) {
-  padding-left: 0;
-}
 :host .digi-header--af-centered .digi-header__wrapper {
   --digi--header--padding-right: 0;
   --digi--header--padding-left: 0;
-}
-@media (min-width: 47.9375rem) {
-  :host {
-    --digi--header--padding-left: var(--digi--global--spacing--large);
-    --digi--header--padding-right: var(--digi--global--spacing--large);
-  }
-}
-@media (min-width: 48rem) {
-  :host {
-    --digi--header--padding-left: var(--digi--global--spacing--largest-2);
-    --digi--header--padding-right: var(--digi--global--spacing--largest-2);
-  }
-}
-@media (min-width: 61.9375rem) {
-  :host {
-    --digi--header--padding-left: var(--digi--global--spacing--base);
-    --digi--header--padding-right: var(--digi--global--spacing--base);
-  }
-}
-@media (min-width: 75rem) {
-  :host {
-    --digi--header--padding-left: var(--digi--global--spacing--largest-3-5);
-    --digi--header--padding-right: var(--digi--global--spacing--largest-3-5);
-  }
-}
-@media (min-width: 87.5rem) {
-  :host {
-    --digi--header--padding-left: var(--digi--global--spacing--largest-5);
-    --digi--header--padding-right: var(--digi--global--spacing--largest-5);
-  }
 }

package/dist/collection/components/_header/header/header.js

@@ -83,7 +83,7 @@ export class Header {
         }
     }
     renderContent() {
-        return (h("div", { class: "digi-header__wrapper" }, h("slot", { name: "header-logo" }), h("div", { class: "digi-header__content" }, h("slot", { name: "header-content" }), this.hasNavigation && this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText })))));
+        return (h("div", { class: "digi-header__wrapper" }, h("slot", { name: "header-logo" }), h("div", { class: "digi-header__content" }, h("slot", { name: "header-content" })), this.hasNavigation && this.isMobile && (h("digi-navigation-sidebar-button", { "aria-hidden": this.afActive ? 'true' : 'false', "af-text": this.afMenuButtonText }))));
     }
     render() {
         return (h("header", { key: '541675d708db44efd16a09721b27dcbbe44e2724', "aria-label": this.ariaLabel, class: Object.assign({ 'digi-header': true }, this.cssModifiers) }, h("digi-util-breakpoint-observer", { key: '419fba070dc583e81ad3ce29a88581ca736fe656', onAfOnChange: (e) => this.handleBreakpointObserver(e) }), h("digi-layout-block", { key: '679370ad7ccfde35f14549e63cbdc35b35024ac0', afContainer: LayoutBlockContainer.NONE }, this.afCentered !== HeaderCenterContentWidth.DEFAULT ? (h("digi-layout-container", { "af-max-width": this.afCentered }, this.renderContent())) : (this.renderContent()), h("div", { key: '072768a2e0754f294fa2617828c533f8c426fb40', class: "digi-header__border" }), h("slot", { key: 'ecf54055fbee49802ecf188a36a4868416e948f2', name: "header-navigation" }))));

package/dist/collection/components/_header/header-navigation/header-navigation.css

@@ -5,7 +5,6 @@ License: none (public domain)
 :host {
   --digi--header--border-color: var(--digi--color--divider--secondary);
   --digi--header--close-button--padding: var(--digi--padding--smaller);
-  --digi--header-navigation--horizontal-padding: var(--digi--padding--smaller);
   display: block;
 }
 :host .digi-header-navigation {
@@ -24,27 +23,6 @@ License: none (public domain)
   grid-area: nav;
   background-color: var(--digi--color--background--secondary-muted);
   border-bottom: var(--digi--header--border-width) solid var(--digi--header--border-color);
-  padding: 0 var(--digi--header-navigation--horizontal-padding);
-}
-@media (min-width: 47.9375rem) {
-  :host .digi-header-navigation__wrapper {
-    --digi--header-navigation--horizontal-padding: var(--digi--global--spacing--smallest-2);
-  }
-}
-@media (min-width: 61.9375rem) {
-  :host .digi-header-navigation__wrapper {
-    --digi--header-navigation--horizontal-padding: 0;
-  }
-}
-@media (min-width: 75rem) {
-  :host .digi-header-navigation__wrapper {
-    --digi--header-navigation--horizontal-padding: var(--digi--global--spacing--small);
-  }
-}
-@media (min-width: 87.5rem) {
-  :host .digi-header-navigation__wrapper {
-    --digi--header-navigation--horizontal-padding: var(--digi--global--spacing--largest-2);
-  }
 }
 :host .digi-header-navigation--visible .digi-header-navigation__wrapper {
   display: block;

package/dist/collection/components/_info-card/info-card/info-card.js

@@ -67,7 +67,7 @@ export class InfoCard {
         };
     }
     render() {
-        return (h("div", { key: '599ab94c2cd57bf47b9aa9d4ef1d4872b765a4ee', class: Object.assign({ 'digi-info-card': true }, this.cssModifiers) }, h("div", { key: '8c03931edf08190044429cc784a78c795705c3ef', class: "digi-info-card__content" }, h("div", { key: 'e17ff930b2e0185e2f1fcbac57c1a7d7fea72e6d', class: "digi-info-card__icon" }, this.hasListIcon && (h("span", { key: '6229283bf582298ca6979f2815effd21281e9b29', class: "digi-info-card__icon" }, h("slot", { key: 'c474cc478505c1408d3a642da71d188e9e377748', name: "icon" })))), h(this.afHeadingLevel, { key: 'a24efa82b07245240cd8b2f309b600c29077f449', class: "digi-info-card__heading" }, this.afHeading), h("digi-typography", { key: '538428ecae3c6f2228bf7b431d62582927ea4c56' }, h("slot", { key: '6b6a2864991d9411da62185ab27e8d73c0163650' })), this.shouldRenderInternalLink && (h("digi-link-internal", { key: 'f4079d2efed0e0f0a38428049b1773260a184e2a', class: "digi-info-card__link", afHref: this.afLinkHref, onAfOnClick: (e) => this.clickLinkHandler(e), hideVisitedColor: this.hideVisitedColor }, this.afLinkText)))));
+        return (h("div", { key: 'b87aaf790c4736075233c8cf0d15e16e757e67f1', class: Object.assign({ 'digi-info-card': true }, this.cssModifiers) }, h("div", { key: '4f645a39d73a782d44ce58d6027805daa07ce6b6', class: "digi-info-card__content" }, h("div", { key: '3c0e7f91e3ac681c051eb24688c88fb28a1cf6bf', class: "digi-info-card__icon" }, this.hasListIcon && (h("span", { key: '53ddc991ebbd95b6a2076f491187a4c8de274b58', class: "digi-info-card__icon" }, h("slot", { key: '182ee887c37e7dea4a4ab98189ea08af15418944', name: "icon" })))), h(this.afHeadingLevel, { key: '8a2b1fbd4cf78cc706daf2fc74157587c16e43b8', class: "digi-info-card__heading" }, this.afHeading), h("digi-typography", { key: '6c0ccbf7115dd68e2f7e6e0b55daac41d9285c2d' }, h("slot", { key: '34f5f0b4526721271edd8095ae78e8812142ea10' })), this.shouldRenderInternalLink && (h("digi-link-internal", { key: 'c4f3442b1b6c22ecc6d0cd12f37af5f4707244b1', class: "digi-info-card__link", afHref: this.afLinkHref, onAfOnClick: (e) => this.clickLinkHandler(e), hideVisitedColor: this.hideVisitedColor }, this.afLinkText)))));
     }
     static get is() { return "digi-info-card"; }
     static get encapsulation() { return "scoped"; }
@@ -181,9 +181,9 @@ export class InfoCard {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set info card variation. Can be 'Standar'."
+                            "text": "Set info card size. Can be 'Standard'."
                         }],
-                    "text": "S\u00E4tter storlek p\u00E5 kortet. Kan vara 'Standar'."
+                    "text": "S\u00E4tter storlek p\u00E5 kortet. Kan vara 'Standard'."
                 },
                 "getter": false,
                 "setter": false,
@@ -210,9 +210,9 @@ export class InfoCard {
                 "docs": {
                     "tags": [{
                             "name": "en",
-                            "text": "Set info card variation. Can be 'Standard'."
+                            "text": "Set border position. Can be 'top' or 'left'. This only applies if 'af-type' is 'related'."
                         }],
-                    "text": "S\u00E4tter storlek p\u00E5 kortet. Kan vara 'Standard'."
+                    "text": "S\u00E4tter position f\u00F6r kantlinjen. Kan vara 'top' eller 'left'. Detta har endast genomslag om 'af-type' \u00E4r 'related'."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/_link/link-button/link-button.js

@@ -9,6 +9,7 @@ import { LinkButtonVariation } from "./link-button-variation.enum";
 export class LinkButton {
     constructor() {
         this.afHref = undefined;
+        this.afAriaLabel = undefined;
         this.afVariation = LinkButtonVariation.PRIMARY;
         this.afOverrideLink = false;
         this.afLinkContainer = false;
@@ -52,7 +53,7 @@ export class LinkButton {
         };
     }
     render() {
-        return (h(Host, { key: '47bd90f3a28cd160127bed656601647eb961d593', class: Object.assign({ 'digi-link-button': true }, this.cssModifiers) }, !this.afLinkContainer && (h("a", { key: 'e225399fc3dcb16132bb712eb1ab8e15346627f9', href: this.afHref, onClick: (e) => this.clickLinkHandler(e), ref: (el) => (this._link = el) }, h("span", { key: '1bf49b13c27a8efe57c6a5d8ddea2be1fbf9139e', class: "digi-link-button__text" }, h("slot", { key: '4853cc7ab7c86847e7e0a8e8398515224421e6bc' })), this.hasNotification && h("slot", { key: 'e449a5df64ce139a5d2a9ebf0f3b8fe1577e9b17', name: "notification" }), h("digi-icon-chevron-right", { key: '6a19dfb52f554f11656a5eee7d5ed09c3107558c', class: "digi-link-button__icon" }))), this.afLinkContainer && (h(Fragment, { key: '7552862a798a80d2aaf3c91518b3231a5ce31cd3' }, h("slot", { key: 'a8b01e225c599aae4d312c174e40d11c675a753e' }), this.hasNotification && h("slot", { key: '100a3bc36bf4e5c2bb2e5cb35893aa3303e938b5', name: "notification" })))));
+        return (h(Host, { key: '75f43380c8844ae0337b29691feed99b0acba6ed', class: Object.assign({ 'digi-link-button': true }, this.cssModifiers) }, !this.afLinkContainer && (h("a", { key: '384b103cdda3806ceebf6c3d0c3e2e35b1979fce', href: this.afHref, "aria-label": this.afAriaLabel, onClick: (e) => this.clickLinkHandler(e), ref: (el) => (this._link = el) }, h("span", { key: '55c1523b696faef38a4b4e00f2b9d64bd52cd2f1', class: "digi-link-button__text" }, h("slot", { key: 'e516eadc702eca45be24e04d5f9d0c436dd6ef9a' })), this.hasNotification && h("slot", { key: '0d4fc47c6a63ef621f0e5b06a5704f78a6988835', name: "notification" }), h("digi-icon-chevron-right", { key: 'b7c058a116d956771ef1f992a82cf2735c1230e4', class: "digi-link-button__icon" }))), this.afLinkContainer && (h(Fragment, { key: 'f8483003f9702cb3fe573079bedda82267e710fb' }, h("slot", { key: '04f83d58576061d3db853e4bb678ffd6177ba871' }), this.hasNotification && h("slot", { key: 'b4629a7a5e7c491c6c1dc9704aaab949370cc801', name: "notification" })))));
     }
     static get is() { return "digi-link-button"; }
     static get encapsulation() { return "scoped"; }
@@ -90,6 +91,28 @@ export class LinkButton {
                 "attribute": "af-href",
                 "reflect": false
             },
+            "afAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "en",
+                            "text": "Sets 'aria-label' attribute."
+                        }],
+                    "text": "S\u00E4tter attributet 'aria-label'."
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "af-aria-label",
+                "reflect": false
+            },
             "afVariation": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/design-tokens/components/_header-navigation.variables.scss

@@ -1,5 +1,4 @@
 @mixin digi-header--variables() {
   --digi--header--border-color: var(--digi--color--divider--secondary);
   --digi--header--close-button--padding: var(--digi--padding--smaller);
-  --digi--header-navigation--horizontal-padding: var(--digi--padding--smaller);
 }

package/dist/digi-arbetsformedlingen/design-tokens/components/_header-navigation.variables.scss

@@ -1,5 +1,4 @@
 @mixin digi-header--variables() {
   --digi--header--border-color: var(--digi--color--divider--secondary);
   --digi--header--close-button--padding: var(--digi--padding--smaller);
-  --digi--header-navigation--horizontal-padding: var(--digi--padding--smaller);
 }