@designsystem-se/af 39.1.0-beta.2 → 39.1.0-beta.3

package/dist/cjs/{typography-variation.enum-4snUBTF7.js → typography-variation.enum-BDSt7CVI.js}

@@ -67,34 +67,6 @@ exports.FormErrorListHeadingLevel = void 0;
     FormErrorListHeadingLevel["H6"] = "h6";
 })(exports.FormErrorListHeadingLevel || (exports.FormErrorListHeadingLevel = {}));
 
-exports.FormInputMode = void 0;
-(function (FormInputMode) {
-    FormInputMode["DEFAULT"] = "";
-    FormInputMode["NONE"] = "none";
-    FormInputMode["TEXT"] = "text";
-    FormInputMode["DECIMAL"] = "decimal";
-    FormInputMode["NUMERIC"] = "numeric";
-    FormInputMode["TEL"] = "tel";
-    FormInputMode["SEARCH"] = "search";
-    FormInputMode["EMAIL"] = "email";
-    FormInputMode["URL"] = "url";
-})(exports.FormInputMode || (exports.FormInputMode = {}));
-
-exports.FormInputValidation = void 0;
-(function (FormInputValidation) {
-    FormInputValidation["SUCCESS"] = "success";
-    FormInputValidation["ERROR"] = "error";
-    FormInputValidation["WARNING"] = "warning";
-    FormInputValidation["NEUTRAL"] = "neutral";
-})(exports.FormInputValidation || (exports.FormInputValidation = {}));
-
-exports.FormInputVariation = void 0;
-(function (FormInputVariation) {
-    FormInputVariation["SMALL"] = "small";
-    FormInputVariation["MEDIUM"] = "medium";
-    FormInputVariation["LARGE"] = "large";
-})(exports.FormInputVariation || (exports.FormInputVariation = {}));
-
 exports.FormFieldsetValidation = void 0;
 (function (FormFieldsetValidation) {
     FormFieldsetValidation["SUCCESS"] = "success";

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

@@ -1,7 +1,12 @@
+@charset "UTF-8";
 /* http://meyerweb.com/eric/tools/css/reset/
 v2.0 | 20110126
 License: none (public domain)
 */
+/*
+  Large-varianten används inte på fristående button-komponenter, 
+  men behålls här för att kunna använda large-varianten på form-input-search i large-variant.
+*/
 :host {
   --digi--button--color--background--primary--default: var(--digi--color--background--interactive--default--primary);
   --digi--button--color--background--primary--hover: var(--digi--color--background--interactive--hover--primary);
@@ -83,6 +88,11 @@ License: none (public domain)
   --digi--button--border-radius--function--active: initial;
   --digi--button--padding--small: var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);
   --digi--button--padding--medium: var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);
+  /*
+    Large-varianten används inte på fristående button-komponenter, 
+    men behålls här för att kunna använda large-varianten på form-input-search i large-variant.
+  */
+  --digi--button--padding--large: var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large);
   --digi--button--font-size--small: var(--digi--global--typography--font-size--interaction-small);
   --digi--button--font-size--medium: var(--digi--global--typography--font-size--interaction-medium);
   --digi--button--font-family: var(--digi--global--typography--font-family--default);
@@ -97,6 +107,7 @@ License: none (public domain)
   --digi--button--text-align--full-width: center;
   --digi--button--outline--default: initial;
   --digi--button--outline--focus: initial;
+  --digi--button--box-shadow: none;
   --digi--button--cursor: pointer;
   --digi--button--icon--spacing: var(--digi--gutter--large);
   --digi--button--min-height--small: unset;
@@ -210,6 +221,17 @@ License: none (public domain)
   --PADDING: var(--digi--button--padding--medium);
   --MIN-HEIGHT: var(--digi--button--min-height--small);
 }
+:host .digi-button {
+  /*
+    Large-varianten används inte på fristående button-komponenter, 
+    men behålls här för att kunna använda large-varianten på form-input-search i large-variant.
+  */
+}
+:host .digi-button--size-large {
+  --FONT-SIZE: var(--digi--button--font-size--large);
+  --PADDING: var(--digi--button--padding--large);
+  --MIN-HEIGHT: var(--digi--button--min-height--small);
+}
 :host .digi-button ::slotted([slot^=icon]) {
   --digi--icon--height: 1em;
   --digi--icon--width: 1em;
@@ -229,6 +251,7 @@ License: none (public domain)
   font-weight: var(--FONT-WEIGHT);
   font-size: var(--FONT-SIZE);
   outline: var(--digi--button--outline--default);
+  box-shadow: var(--digi--button--box-shadow);
   text-align: var(--digi--button--text-align--default);
   width: var(--digi--button--width);
   display: var(--digi--button--display);

package/dist/collection/components/_calendar/week-view/calendar-week-view.css

@@ -38,6 +38,7 @@ License: none (public domain)
   --digi--calendar-week-view--today-circle--fill--active: var(--digi--color--text--interactive--secondary);
   --digi--calendar-week-view--dates--margin: 0 0 var(--digi--gutter--smaller) 0;
   --digi--calendar-week-view--dates--gap: var(--digi--gutter--smaller);
+  display: block;
 }
 
 .digi-calendar-week-view__timepicker {
@@ -67,20 +68,35 @@ License: none (public domain)
   --digi--button--border-radius--secondary--default: var(--digi--calendar-week-view--button--week--previous-button--border-radius);
   --digi--button--border-radius--secondary--hover: var(--digi--calendar-week-view--button--week--previous-button--border-radius);
 }
+.digi-calendar-week-view__week-button--previous:hover::after, .digi-calendar-week-view__week-button--previous:focus-within::after {
+  content: "";
+  position: absolute;
+  width: 62px;
+  height: 2px;
+  top: 29px;
+  background-color: #00005a;
+  left: 50px;
+}
 .digi-calendar-week-view__week-button--next {
   margin-left: var(--digi--calendar-week-view--button--week--margin);
   --digi--button--border-radius--secondary--default: var(--digi--calendar-week-view--button--week--next-button--border-radius);
   --digi--button--border-radius--secondary--hover: var(--digi--calendar-week-view--button--week--next-button--border-radius);
 }
+.digi-calendar-week-view__week-button--next:hover::after, .digi-calendar-week-view__week-button--next:focus-within::after {
+  content: "";
+  position: absolute;
+  width: 62px;
+  height: 2px;
+  top: 29px;
+  background-color: #00005a;
+  left: 20px;
+}
 .digi-calendar-week-view__week-button--keep-left, .digi-calendar-week-view__week-button--keep-right {
   --digi--calendar-week-view--button--week--margin: var(--digi--calendar-week-view--button--week--keep-right--margin);
 }
 .digi-calendar-week-view__week-button--hidden {
   display: none;
 }
-.digi-calendar-week-view__week-button ::slotted([slot^=icon]) {
-  --digi--icon--width: var(--digi--calendar-week-view--button--icon--width);
-}
 
 .digi-calendar-week-view__dates {
   flex: 1 0 100%;
@@ -171,31 +187,9 @@ License: none (public domain)
   --digi--button--color--border--secondary--focus: var(--digi--calendar-week-view--button--date--border-color--active);
   --digi--button--color--border--secondary--active: var(--digi--calendar-week-view--button--date--border-color--active);
   --digi--calendar-week-view--today-circle--fill: var(--digi--calendar-week-view--today-circle--fill--active);
+  --digi--button--box-shadow: var(--digi--calendar-week-view--button--date--box-shadow--active);
 }
-.digi-calendar-week-view__date-button-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-transform: capitalize;
-}
-
-.digi-calendar-week-view__date-button-circle {
-  position: absolute;
-  height: var(--digi--calendar-week-view--today-circle--size);
-  width: var(--digi--calendar-week-view--today-circle--size);
-  background: var(--digi--calendar-week-view--today-circle--fill);
-  bottom: 0.875rem;
-  left: 50%;
-  transform: translateX(-50%);
-  border-radius: 50%;
-}
-
-::slotted(* .digi-calendar-week-view__date-button--active .digi-button) {
-  box-shadow: var(--digi--calendar-week-view--button--date--box-shadow--active);
-}
-
-::slotted(* .digi-calendar-week-view__date-button .digi-button):hover .digi-calendar-week-view__date-button-day::after, ::slotted(* .digi-calendar-week-view__date-button .digi-button):focus .digi-calendar-week-view__date-button-day::after {
+.digi-calendar-week-view__date-button:hover .digi-calendar-week-view__date-button-day::after, .digi-calendar-week-view__date-button:focus-within .digi-calendar-week-view__date-button-day::after {
   content: "";
   position: absolute;
   width: 30px;
@@ -204,7 +198,7 @@ License: none (public domain)
   background-color: var(--digi--calendar-week-view--button--date--color);
   left: 15px;
 }
-::slotted(* .digi-calendar-week-view__date-button .digi-button):hover .digi-calendar-week-view__date-button-day--active::after, ::slotted(* .digi-calendar-week-view__date-button .digi-button):focus .digi-calendar-week-view__date-button-day--active::after {
+.digi-calendar-week-view__date-button:hover .digi-calendar-week-view__date-button-day--active::after, .digi-calendar-week-view__date-button:focus-within .digi-calendar-week-view__date-button-day--active::after {
   content: "";
   position: absolute;
   width: 30px;
@@ -213,27 +207,22 @@ License: none (public domain)
   background-color: var(--digi--calendar-week-view--button--date--color--active);
   left: 15px;
 }
-
-::slotted(* .digi-calendar-week-view__date-button .digi-button__text) {
+.digi-calendar-week-view__date-button-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-transform: capitalize;
   width: 100%;
 }
 
-::slotted(* .digi-calendar-week-view__week-button--previous .digi-button):hover::after, ::slotted(* .digi-calendar-week-view__week-button--previous .digi-button):focus::after {
-  content: "";
-  position: absolute;
-  width: 62px;
-  height: 2px;
-  top: 29px;
-  background-color: #00005a;
-  left: 50px;
-}
-
-::slotted(* .digi-calendar-week-view__week-button--next .digi-button):hover::after, ::slotted(* .digi-calendar-week-view__week-button--next .digi-button):focus::after {
-  content: "";
+.digi-calendar-week-view__date-button-circle {
   position: absolute;
-  width: 62px;
-  height: 2px;
-  top: 29px;
-  background-color: #00005a;
-  left: 20px;
+  height: var(--digi--calendar-week-view--today-circle--size);
+  width: var(--digi--calendar-week-view--today-circle--size);
+  background: var(--digi--calendar-week-view--today-circle--fill);
+  bottom: 0.875rem;
+  left: 50%;
+  transform: translateX(-50%);
+  border-radius: 50%;
 }

package/dist/collection/components/_form/form-file-upload/form-file-upload.css

@@ -323,21 +323,17 @@ License: none (public domain)
   top: 4px;
   left: 0px;
   margin-right: 4px;
-  /* @container: Stencil omits .sc-* on nested custom-element hosts.
-     Same compilation as .hidden-desktop / __item-name in this file. */
-}
-@container (min-width: 0) {
-  :host .digi-form-file-upload__item-green-check-icon {
-    --digi--icon--height: 16px;
-    --digi--icon--width: 16px;
-    --digi--icon--color: var(--digi--color--icon--validation--success);
-    min-height: 0;
-    width: 16px;
-    height: 16px;
-    background-color: var(--digi--color--background--primary);
-    border-radius: 50%;
-    align-self: flex-start;
-  }
+}
+:host .digi-form-file-upload__item-green-check-icon {
+  --digi--icon--height: 16px;
+  --digi--icon--width: 16px;
+  --digi--icon--color: var(--digi--color--icon--validation--success);
+  min-height: 0;
+  width: 16px;
+  height: 16px;
+  background-color: var(--digi--color--background--primary);
+  border-radius: 50%;
+  align-self: flex-start;
 }
 :host .digi-form-file-upload__item-name {
   width: 100%;

package/dist/collection/components/_form/form-input-search/form-input-search.css

@@ -4,8 +4,4 @@
 }
 :host .digi-form-input-search__input {
   --digi--form-input--border-radius: var(--digi--form-input-search--input--border-radius--default);
-}
-:host .digi-form-input-search--large .digi-form-input-search__button button {
-  font-size: var(--digi--global--typography--font-size--interaction-large);
-  padding: var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large);
 }

package/dist/collection/components/_tools/tools-feedback-banner/tools-feedback-banner.js

@@ -70,8 +70,13 @@ export class FeedbackBanner {
         this.validateLinks();
         this.validateHeading();
     }
+    getSlottedLinks() {
+        const slotRoot = this.hostElement.querySelector('.digi-tools-feedback-banner__slot');
+        const root = slotRoot !== null && slotRoot !== void 0 ? slotRoot : this.hostElement;
+        return Array.from(root.querySelectorAll('a')).filter((el) => !el.closest('digi-link, digi-link-external'));
+    }
     validateLinks() {
-        const links = Array.from(this.hostElement.children).filter((el) => el.tagName.toLowerCase() === 'a');
+        const links = this.getSlottedLinks();
         if (links.length < 1 || links.length > 3) {
             logger.warn(`The slot contains no link elements or there are more than 3 links specified (only 3 can be showed)`, this.hostElement);
             return;
@@ -108,7 +113,7 @@ export class FeedbackBanner {
             }), h("div", { hidden: true, class: "digi-tools-feedback-banner__slot" }, h("slot", { onSlotchange: () => this.validateLinks() })))));
     }
     render() {
-        return (h("div", { key: 'effe0197ab17d3396bf34dc8e1baa7057181d2b4', class: Object.assign({ 'digi-tools-feedback-banner': true }, this.cssModifiers) }, this.afType === ToolsFeedbackBannerType.FULLWIDTH && (h("digi-layout-block", { key: '6e1c7312e120f3e7d76e6ecb3f01490cdca03408', afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)), this.afType !== ToolsFeedbackBannerType.FULLWIDTH && this.content));
+        return (h("div", { key: '739456a931baad879c5b7c99b9e3782d2056a161', class: Object.assign({ 'digi-tools-feedback-banner': true }, this.cssModifiers) }, this.afType === ToolsFeedbackBannerType.FULLWIDTH && (h("digi-layout-block", { key: 'b77c706fb75fcdc26d17f8fbb9e0e1fdbca397dd', afVariation: LayoutBlockVariation.TRANSPARENT }, this.content)), this.afType !== ToolsFeedbackBannerType.FULLWIDTH && this.content));
     }
     static get is() { return "digi-tools-feedback-banner"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/design-tokens/components/_button.variables.scss

@@ -92,6 +92,11 @@
 
   --digi--button--padding--small: var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);
   --digi--button--padding--medium: var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);
+  /*
+    Large-varianten används inte på fristående button-komponenter, 
+    men behålls här för att kunna använda large-varianten på form-input-search i large-variant.
+  */
+  --digi--button--padding--large: var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large);
   --digi--button--font-size--small: var(--digi--global--typography--font-size--interaction-small);
   --digi--button--font-size--medium: var(--digi--global--typography--font-size--interaction-medium);
   --digi--button--font-family: var(--digi--global--typography--font-family--default);
@@ -107,6 +112,7 @@
   --digi--button--text-align--full-width: center;
   --digi--button--outline--default: initial;
   --digi--button--outline--focus: initial;
+  --digi--button--box-shadow: none;
   --digi--button--cursor: pointer;
   --digi--button--icon--spacing: var(--digi--gutter--large);
   --digi--button--min-height--small: unset;

package/dist/collection/design-tokens/components/_logo.variables.scss

@@ -1,16 +1,18 @@
-@mixin digi-title-logo--variables() {
-  --digi--title-logo-text-color: var(--digi--color--text--primary);
-  --digi--title-logo-font-weight: var(--digi--global--typography--font-weight--bold);
-  --digi--title-logo-font-size: var(--digi--typography--title-logo--font-size--mobile);
-  --digi--title-logo-font-size-small: var(--digi--global--typography--font-size--large);
-  --digi--title-logo-line-height-small: 1.25rem;
-  --digi--title-logo-symbol-color: var(--digi--color--logotype--primary--symbol);
-  --digi--title-logo-symbol-width: 36px;
-  --digi--title-logo-symbol-height: 36px;
-  --digi--title-logo-symbol-width-mobile: 44px;
-  --digi--title-logo-symbol-height-mobile: 44px;
-  --digi--title-logo-text-height: 40px;
-  --digi--title-logo-border-width: var(--digi--global--border-width--base);
-  --digi--title-logo-vertical-padding: 1.375rem;
-  --digi--title-logo-gap: 9px;
+@use '../../../../../../styles/src/digi-styles.utils' as *;
+
+@mixin digi-logo--variables() {
+  --digi--logo--img--min-width: #{rem(256)};
+  --digi--logo--img--max-width:#{rem(292)};
+  --digi--logo--img--max-width--large: #{rem(368)};
+  --digi--logo--img--max-width--system: #{rem(44)};
+
+  --digi--logo--padding: 1.375rem;
+  --digi--logo--padding--wide: var(--digi--gutter--larger);
+  --digi--logo--padding--large: var(--digi--gutter--medium);
+  --digi--logo--padding--large--wide: var(--digi--gutter--larger);
+
+  --digi--logo--primary--symbol: var(--digi--color--logotype--primary--symbol);
+  --digi--logo--secondary--symbol: var(--digi--color--logotype--secondary--symbol);
+  --digi--logo--primary--text: var(--digi--color--logotype--primary--text);
+  --digi--logo--secondary--text: var(--digi--color--logotype--secondary--text);
 }

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

@@ -92,6 +92,11 @@
 
   --digi--button--padding--small: var(--digi--gutter--button-block-small) var(--digi--gutter--button-inline-small);
   --digi--button--padding--medium: var(--digi--gutter--button-block-medium) var(--digi--gutter--button-inline-medium);
+  /*
+    Large-varianten används inte på fristående button-komponenter, 
+    men behålls här för att kunna använda large-varianten på form-input-search i large-variant.
+  */
+  --digi--button--padding--large: var(--digi--gutter--button-block-large) var(--digi--gutter--button-inline-large);
   --digi--button--font-size--small: var(--digi--global--typography--font-size--interaction-small);
   --digi--button--font-size--medium: var(--digi--global--typography--font-size--interaction-medium);
   --digi--button--font-family: var(--digi--global--typography--font-family--default);
@@ -107,6 +112,7 @@
   --digi--button--text-align--full-width: center;
   --digi--button--outline--default: initial;
   --digi--button--outline--focus: initial;
+  --digi--button--box-shadow: none;
   --digi--button--cursor: pointer;
   --digi--button--icon--spacing: var(--digi--gutter--large);
   --digi--button--min-height--small: unset;