@designsystem-se/af 35.3.1 → 35.4.0

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/_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,