@kofile/gds-foundations 1.0.0-alpha.13 → 1.0.0-alpha.15

package/build/css/components/dialog.module.css

@@ -0,0 +1,56 @@
+.overlay {
+  background-color: var(
+    --dialog-light-elements-overlay-color-background-primary-default
+  );
+  position: fixed;
+  inset: 0;
+}
+
+.content {
+  background-color: var(
+    --dialog-light-elements-content-color-background-primary-default
+  );
+  border-radius: var(--dialog-elements-content-size-compact-border-radius);
+  box-shadow: var(--dialog-elements-content-size-compact-box-shadow);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--dialog-elements-content-size-compact-width);
+  padding-block: var(--dialog-elements-content-size-compact-padding-block);
+  padding-inline: var(--dialog-elements-content-size-compact-padding-inline);
+  animation: var(--dialog-content-animation);
+}
+.content:focus {
+  outline: none;
+}
+.content[data-size="spacious"] {
+  width: var(--dialog-elements-content-size-spacious-width);
+}
+.content[data-mode="dark"] {
+  background-color: var(
+    --dialog-dark-elements-content-color-background-primary-default
+  );
+}
+
+.title {
+  margin: var(--dialog-elements-title-margin);
+  margin-block-start: var(--dialog-elements-title-margin-block-start);
+  color: var(--dialog-light-elements-title-color-text-primary-default);
+  font: var(--dialog-elements-title-typography);
+  text-align: var(--dialog-elements-title-text-align);
+}
+.title[data-mode="dark"] {
+  color: var(--dialog-dark-elements-title-color-text-primary-default);
+}
+
+.description {
+  margin: var(--dialog-elements-description-margin);
+  margin-block-start: var(--dialog-elements-description-margin-block-start);
+  color: var(--dialog-light-elements-description-color-text-primary-default);
+  font: var(--dialog-elements-description-typography);
+  text-align: var(--dialog-elements-description-text-align);
+}
+.description[data-mode="dark"] {
+  color: var(--dialog-dark-elements-description-color-text-primary-default);
+}

package/build/css/components/loader.module.css

@@ -0,0 +1,19 @@
+.loader {
+  border: var(--loader-size-lg-border-width) solid
+    var(--loader-light-color-border-primary-default);
+  border-top: var(--loader-size-lg-border-width) solid
+    var(--loader-light-color-border-top-primary-default);
+  border-radius: var(--loader-size-lg-border-radius);
+  width: var(--loader-size-lg-width);
+  height: var(--loader-size-lg-height);
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/build/css/components/segmented-controller.module.css

@@ -123,6 +123,10 @@ input {
     var(
       --segmented-controller-light-elements-content-color-border-primary-default
     );
+  border-radius: var(
+    --segmented-controller-elements-content-size-lg-border-radius
+  );
+
   margin-top: var(
     --segmented-controller-elements-content-size-lg-margin-block-start
   );
@@ -137,3 +141,11 @@ input {
       --segmented-controller-light-elements-content-color-border-primary-default
     );
 }
+.content[data-mode="dark"] {
+  background-color: var(
+    --segmented-controller-dark-elements-content-color-background-primary-default
+  );
+  border-color: var(
+    --segmented-controller-dark-elements-content-color-border-primary-default
+  );
+}

package/build/css/components/tabs.module.css

@@ -68,6 +68,7 @@ input {
   flex-shrink: 1;
   border: var(--tabs-elements-content-size-lg-border-width) solid
     var(--tabs-light-elements-content-color-border-primary-default);
+  border-radius: var(--tabs-elements-content-size-lg-border-radius);
   margin-top: var(--tabs-elements-content-size-lg-margin-block-start);
   padding: var(--tabs-elements-content-size-lg-padding);
   outline: none;
@@ -77,3 +78,9 @@ input {
   border: var(--tabs-elements-content-size-lg-border-width) solid
     var(--tabs-light-elements-content-color-border-primary-default);
 }
+.content[data-mode="dark"] {
+  background-color: var(
+    --tabs-dark-elements-content-color-background-primary-default
+  );
+  border-color: var(--tabs-dark-elements-content-color-border-primary-default);
+}

package/build/css/themes/dialog/dark.css

@@ -0,0 +1,8 @@
+
+:root, 
+:host {
+--dialog-dark-elements-overlay-color-background-primary-default: rgba(0, 0, 0, 0.5);
+--dialog-dark-elements-content-color-background-primary-default: #121212;
+--dialog-dark-elements-title-color-text-primary-default: #ffffff;
+--dialog-dark-elements-description-color-text-primary-default: #b7bcc3;
+}

package/build/css/themes/dialog/light.css

@@ -0,0 +1,8 @@
+
+:root, 
+:host {
+--dialog-light-elements-overlay-color-background-primary-default: rgba(0, 0, 0, 0.5);
+--dialog-light-elements-content-color-background-primary-default: #ffffff;
+--dialog-light-elements-title-color-text-primary-default: #121212;
+--dialog-light-elements-description-color-text-primary-default: #6b7280;
+}

package/build/css/themes/global.css

@@ -442,6 +442,21 @@
 --card-size-md-width: 32rem;
 --card-size-lg-padding: 3rem;
 --card-size-lg-width: 64rem;
+--dialog-elements-content-size-compact-border-radius: 0.375rem;
+--dialog-elements-content-size-compact-border-width: 0.063rem;
+--dialog-elements-content-size-compact-padding-block: 1.5rem;
+--dialog-elements-content-size-compact-padding-inline: 1.25rem;
+--dialog-elements-content-size-compact-box-shadow: 0 0 12px 0 rgba(18, 18, 18, 0.24);
+--dialog-elements-content-size-compact-width: 16rem;
+--dialog-elements-content-size-spacious-width: 384px;
+--dialog-elements-title-typography: 700 1.25rem/1.75rem 'Source Sans 3';
+--dialog-elements-title-margin: 0rem;
+--dialog-elements-title-margin-block-start: 0.5rem;
+--dialog-elements-title-text-align: center;
+--dialog-elements-description-typography: 400 0.813rem/1.25rem 'Source Sans 3';
+--dialog-elements-description-margin: 0rem;
+--dialog-elements-description-margin-block-start: 0.5rem;
+--dialog-elements-description-text-align: center;
 --field-message-size-sm-typography: 400 0.75rem/1rem 'Source Sans 3';
 --field-message-size-md-margin-block-end: 0.375rem;
 --field-message-size-md-typography: 400 0.813rem/1.25rem 'Source Sans 3';
@@ -460,6 +475,10 @@
 --link-gap-default: 0.25rem;
 --link-opacity-disabled: 0.32;
 --link-weight-regular: 400;
+--loader-size-lg-border-radius: 100%;
+--loader-size-lg-border-width: 0.5rem;
+--loader-size-lg-height: 4rem;
+--loader-size-lg-width: 4rem;
 --radio-group-elements-indicator-size-sm-height: 0.375rem;
 --radio-group-elements-indicator-size-sm-width: 0.375rem;
 --radio-group-elements-indicator-size-md-border-radius: 50%;
@@ -495,6 +514,7 @@
 --segmented-controller-elements-trigger-size-lg-padding-block: 0.375rem;
 --segmented-controller-elements-trigger-size-lg-padding-inline: 0.75rem;
 --segmented-controller-elements-trigger-size-lg-typography: 600 0.938rem/1.25rem 'Source Sans 3';
+--segmented-controller-elements-content-size-lg-border-radius: 0.375rem;
 --segmented-controller-elements-content-size-lg-border-width: 0.063rem;
 --segmented-controller-elements-content-size-lg-margin-block-start: 0.5rem;
 --segmented-controller-elements-content-size-lg-padding: 1rem;
@@ -582,6 +602,7 @@
 --tabs-elements-trigger-size-lg-padding-block-end: 0rem;
 --tabs-elements-trigger-size-lg-typography: 700 1.125rem/1.5rem 'Source Sans 3';
 --tabs-elements-trigger-size-xl-typography: 700 1.5rem/2.25rem 'Source Sans 3';
+--tabs-elements-content-size-lg-border-radius: 0.375rem;
 --tabs-elements-content-size-lg-border-width: 0.063rem;
 --tabs-elements-content-size-lg-margin-block-start: 0.5rem;
 --tabs-elements-content-size-lg-padding: 1rem;

package/build/css/themes/index.css

@@ -8,6 +8,8 @@
 @import "./checkbox/dark.css";
 @import "./checkbox-tile/light.css";
 @import "./checkbox-tile/dark.css";
+@import "./dialog/light.css";
+@import "./dialog/dark.css";
 @import "./field-message/light.css";
 @import "./field-message/dark.css";
 @import "./form-label/light.css";
@@ -20,6 +22,8 @@
 @import "./link/dark.css";
 @import "./list-item/light.css";
 @import "./list-item/dark.css";
+@import "./loader/light.css";
+@import "./loader/dark.css";
 @import "./radio-group/light.css";
 @import "./radio-group/dark.css";
 @import "./radio-group-tile/light.css";

package/build/css/themes/loader/dark.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--loader-dark-color-border-primary-default: #abcffd;
+--loader-dark-color-border-top-primary-default: #063b99;
+}

package/build/css/themes/loader/light.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--loader-light-color-border-primary-default: #abcffd;
+--loader-light-color-border-top-primary-default: #063b99;
+}

package/build/css/themes/segmented-controller/dark.css

@@ -10,6 +10,6 @@
 --segmented-controller-dark-elements-trigger-color-text-primary-default: #ffffff;
 --segmented-controller-dark-elements-trigger-color-text-primary-active: #66a8fd;
 --segmented-controller-dark-elements-trigger-color-text-primary-hover: #abcffd;
---segmented-controller-dark-elements-content-color-background-primary-default: #ffffff;
---segmented-controller-dark-elements-content-color-border-primary-default: #d5d7db;
+--segmented-controller-dark-elements-content-color-background-primary-default: #121212;
+--segmented-controller-dark-elements-content-color-border-primary-default: #343944;
 }

package/build/css/themes/tabs/dark.css

@@ -8,4 +8,6 @@
 --tabs-dark-elements-trigger-color-text-primary-default: #ffffff;
 --tabs-dark-elements-trigger-color-text-primary-active: #66a8fd;
 --tabs-dark-elements-trigger-color-text-primary-hover: #abcffd;
+--tabs-dark-elements-content-color-background-primary-default: #121212;
+--tabs-dark-elements-content-color-border-primary-default: #343944;
 }

package/build/css/utilities/background-color.css

@@ -282,3 +282,164 @@
 .bg-teal-1000 {
   background-color: var(--primitive-teal-1000) !important;
 }
+
+.bg-neutral-100 {
+  background-color: var(--color-neutral-100) !important;
+}
+.bg-neutral-200 {
+  background-color: var(--color-neutral-200) !important;
+}
+.bg-neutral-300 {
+  background-color: var(--color-neutral-300) !important;
+}
+.bg-neutral-400 {
+  background-color: var(--color-neutral-400) !important;
+}
+.bg-neutral-500 {
+  background-color: var(--color-neutral-500) !important;
+}
+.bg-neutral-600 {
+  background-color: var(--color-neutral-600) !important;
+}
+.bg-neutral-700 {
+  background-color: var(--color-neutral-700) !important;
+}
+.bg-neutral-800 {
+  background-color: var(--color-neutral-800) !important;
+}
+.bg-neutral-900 {
+  background-color: var(--color-neutral-900) !important;
+}
+.bg-neutral-1000 {
+  background-color: var(--color-neutral-1000) !important;
+}
+.bg-neutral-black {
+  background-color: var(--color-neutral-black) !important;
+}
+.bg-neutral-white {
+  background-color: var(--color-neutral-white) !important;
+}
+
+.bg-success-100 {
+  background-color: var(--color-success-100) !important;
+}
+.bg-success-200 {
+  background-color: var(--color-success-200) !important;
+}
+.bg-success-300 {
+  background-color: var(--color-success-300) !important;
+}
+.bg-success-400 {
+  background-color: var(--color-success-400) !important;
+}
+.bg-success-500 {
+  background-color: var(--color-success-500) !important;
+}
+.bg-success-600 {
+  background-color: var(--color-success-600) !important;
+}
+.bg-success-700 {
+  background-color: var(--color-success-700) !important;
+}
+.bg-success-800 {
+  background-color: var(--color-success-800) !important;
+}
+.bg-success-900 {
+  background-color: var(--color-success-900) !important;
+}
+.bg-success-1000 {
+  background-color: var(--color-success-1000) !important;
+}
+
+.bg-danger-100 {
+  background-color: var(--color-danger-100) !important;
+}
+.bg-danger-200 {
+  background-color: var(--color-danger-200) !important;
+}
+.bg-danger-300 {
+  background-color: var(--color-danger-300) !important;
+}
+.bg-danger-400 {
+  background-color: var(--color-danger-400) !important;
+}
+.bg-danger-500 {
+  background-color: var(--color-danger-500) !important;
+}
+.bg-danger-600 {
+  background-color: var(--color-danger-600) !important;
+}
+.bg-danger-700 {
+  background-color: var(--color-danger-700) !important;
+}
+.bg-danger-800 {
+  background-color: var(--color-danger-800) !important;
+}
+.bg-danger-900 {
+  background-color: var(--color-danger-900) !important;
+}
+.bg-danger-1000 {
+  background-color: var(--color-danger-1000) !important;
+}
+
+.bg-warning-100 {
+  background-color: var(--color-warning-100) !important;
+}
+.bg-warning-200 {
+  background-color: var(--color-warning-200) !important;
+}
+.bg-warning-300 {
+  background-color: var(--color-warning-300) !important;
+}
+.bg-warning-400 {
+  background-color: var(--color-warning-400) !important;
+}
+.bg-warning-500 {
+  background-color: var(--color-warning-500) !important;
+}
+.bg-warning-600 {
+  background-color: var(--color-warning-600) !important;
+}
+.bg-warning-700 {
+  background-color: var(--color-warning-700) !important;
+}
+.bg-warning-800 {
+  background-color: var(--color-warning-800) !important;
+}
+.bg-warning-900 {
+  background-color: var(--color-warning-900) !important;
+}
+.bg-warning-1000 {
+  background-color: var(--color-warning-1000) !important;
+}
+
+.bg-highlight-100 {
+  background-color: var(--color-highlight-100) !important;
+}
+.bg-highlight-200 {
+  background-color: var(--color-highlight-200) !important;
+}
+.bg-highlight-300 {
+  background-color: var(--color-highlight-300) !important;
+}
+.bg-highlight-400 {
+  background-color: var(--color-highlight-400) !important;
+}
+.bg-highlight-500 {
+  background-color: var(--color-highlight-500) !important;
+}
+.bg-highlight-600 {
+  background-color: var(--color-highlight-600) !important;
+}
+.bg-highlight-700 {
+  background-color: var(--color-highlight-700) !important;
+}
+.bg-highlight-800 {
+  background-color: var(--color-highlight-800) !important;
+}
+.bg-highlight-900 {
+  background-color: var(--color-highlight-900) !important;
+}
+.bg-highlight-1000 {
+  background-color: var(--color-highlight-1000) !important;
+}

package/build/css/utilities/color.css

@@ -0,0 +1,290 @@
+.text-gray-100 {
+  color: var(--primitive-gray-100) !important;
+}
+.text-gray-200 {
+  color: var(--primitive-gray-200) !important;
+}
+.text-gray-300 {
+  color: var(--primitive-gray-300) !important;
+}
+.text-gray-400 {
+  color: var(--primitive-gray-400) !important;
+}
+.text-gray-500 {
+  color: var(--primitive-gray-500) !important;
+}
+.text-gray-600 {
+  color: var(--primitive-gray-600) !important;
+}
+.text-gray-700 {
+  color: var(--primitive-gray-700) !important;
+}
+.text-gray-800 {
+  color: var(--primitive-gray-800) !important;
+}
+.text-gray-900 {
+  color: var(--primitive-gray-900) !important;
+}
+.text-gray-1000 {
+  color: var(--primitive-gray-1000) !important;
+}
+.text-gray-black {
+  color: var(--primitive-gray-black) !important;
+}
+.text-gray-white {
+  color: var(--primitive-gray-white) !important;
+}
+.text-lightest {
+  color: var(--primitive-gray-white) !important;
+}
+.text-darkest {
+  color: var(--primitive-gray-black) !important;
+}
+
+.text-blue-100 {
+  color: var(--primitive-blue-100) !important;
+}
+.text-blue-200 {
+  color: var(--primitive-blue-200) !important;
+}
+.text-blue-300 {
+  color: var(--primitive-blue-300) !important;
+}
+.text-blue-400 {
+  color: var(--primitive-blue-400) !important;
+}
+.text-blue-500 {
+  color: var(--primitive-blue-500) !important;
+}
+.text-blue-600 {
+  color: var(--primitive-blue-600) !important;
+}
+.text-blue-700 {
+  color: var(--primitive-blue-700) !important;
+}
+.text-blue-800 {
+  color: var(--primitive-blue-800) !important;
+}
+.text-blue-900 {
+  color: var(--primitive-blue-900) !important;
+}
+.text-blue-1000 {
+  color: var(--primitive-blue-1000) !important;
+}
+
+.text-red-100 {
+  color: var(--primitive-red-100) !important;
+}
+.text-red-200 {
+  color: var(--primitive-red-200) !important;
+}
+.text-red-300 {
+  color: var(--primitive-red-300) !important;
+}
+.text-red-400 {
+  color: var(--primitive-red-400) !important;
+}
+.text-red-500 {
+  color: var(--primitive-red-500) !important;
+}
+.text-red-600 {
+  color: var(--primitive-red-600) !important;
+}
+.text-red-700 {
+  color: var(--primitive-red-700) !important;
+}
+.text-red-800 {
+  color: var(--primitive-red-800) !important;
+}
+.text-red-900 {
+  color: var(--primitive-red-900) !important;
+}
+.text-red-1000 {
+  color: var(--primitive-red-1000) !important;
+}
+
+.text-green-100 {
+  color: var(--primitive-green-100) !important;
+}
+.text-green-200 {
+  color: var(--primitive-green-200) !important;
+}
+.text-green-300 {
+  color: var(--primitive-green-300) !important;
+}
+.text-green-400 {
+  color: var(--primitive-green-400) !important;
+}
+.text-green-500 {
+  color: var(--primitive-green-500) !important;
+}
+.text-green-600 {
+  color: var(--primitive-green-600) !important;
+}
+.text-green-700 {
+  color: var(--primitive-green-700) !important;
+}
+.text-green-800 {
+  color: var(--primitive-green-800) !important;
+}
+.text-green-900 {
+  color: var(--primitive-green-900) !important;
+}
+.text-green-1000 {
+  color: var(--primitive-green-1000) !important;
+}
+
+.text-orange-100 {
+  color: var(--primitive-orange-100) !important;
+}
+.text-orange-200 {
+  color: var(--primitive-orange-200) !important;
+}
+.text-orange-300 {
+  color: var(--primitive-orange-300) !important;
+}
+.text-orange-400 {
+  color: var(--primitive-orange-400) !important;
+}
+.text-orange-500 {
+  color: var(--primitive-orange-500) !important;
+}
+.text-orange-600 {
+  color: var(--primitive-orange-600) !important;
+}
+.text-orange-700 {
+  color: var(--primitive-orange-700) !important;
+}
+.text-orange-800 {
+  color: var(--primitive-orange-800) !important;
+}
+.text-orange-900 {
+  color: var(--primitive-orange-900) !important;
+}
+.text-orange-1000 {
+  color: var(--primitive-orange-1000) !important;
+}
+
+.text-yellow-100 {
+  color: var(--primitive-yellow-100) !important;
+}
+.text-yellow-200 {
+  color: var(--primitive-yellow-200) !important;
+}
+.text-yellow-300 {
+  color: var(--primitive-yellow-300) !important;
+}
+.text-yellow-400 {
+  color: var(--primitive-yellow-400) !important;
+}
+.text-yellow-500 {
+  color: var(--primitive-yellow-500) !important;
+}
+.text-yellow-600 {
+  color: var(--primitive-yellow-600) !important;
+}
+.text-yellow-700 {
+  color: var(--primitive-yellow-700) !important;
+}
+.text-yellow-800 {
+  color: var(--primitive-yellow-800) !important;
+}
+.text-yellow-900 {
+  color: var(--primitive-yellow-900) !important;
+}
+.text-yellow-1000 {
+  color: var(--primitive-yellow-1000) !important;
+}
+
+.text-purple-100 {
+  color: var(--primitive-purple-100) !important;
+}
+.text-purple-200 {
+  color: var(--primitive-purple-200) !important;
+}
+.text-purple-300 {
+  color: var(--primitive-purple-300) !important;
+}
+.text-purple-400 {
+  color: var(--primitive-purple-400) !important;
+}
+.text-purple-500 {
+  color: var(--primitive-purple-500) !important;
+}
+.text-purple-600 {
+  color: var(--primitive-purple-600) !important;
+}
+.text-purple-700 {
+  color: var(--primitive-purple-700) !important;
+}
+.text-purple-800 {
+  color: var(--primitive-purple-800) !important;
+}
+.text-purple-900 {
+  color: var(--primitive-purple-900) !important;
+}
+.text-purple-1000 {
+  color: var(--primitive-purple-1000) !important;
+}
+
+.text-magenta-100 {
+  color: var(--primitive-magenta-100) !important;
+}
+.text-magenta-200 {
+  color: var(--primitive-magenta-200) !important;
+}
+.text-magenta-300 {
+  color: var(--primitive-magenta-300) !important;
+}
+.text-magenta-400 {
+  color: var(--primitive-magenta-400) !important;
+}
+.text-magenta-500 {
+  color: var(--primitive-magenta-500) !important;
+}
+.text-magenta-600 {
+  color: var(--primitive-magenta-600) !important;
+}
+.text-magenta-700 {
+  color: var(--primitive-magenta-700) !important;
+}
+.text-magenta-800 {
+  color: var(--primitive-magenta-800) !important;
+}
+.text-magenta-900 {
+  color: var(--primitive-magenta-900) !important;
+}
+.text-magenta-1000 {
+  color: var(--primitive-magenta-1000) !important;
+}
+
+.text-teal-100 {
+  color: var(--primitive-teal-100) !important;
+}
+.text-teal-200 {
+  color: var(--primitive-teal-200) !important;
+}
+.text-teal-300 {
+  color: var(--primitive-teal-300) !important;
+}
+.text-teal-400 {
+  color: var(--primitive-teal-400) !important;
+}
+.text-teal-500 {
+  color: var(--primitive-teal-500) !important;
+}
+.text-teal-600 {
+  color: var(--primitive-teal-600) !important;
+}
+.text-teal-700 {
+  color: var(--primitive-teal-700) !important;
+}
+.text-teal-800 {
+  color: var(--primitive-teal-800) !important;
+}
+.text-teal-900 {
+  color: var(--primitive-teal-900) !important;
+}
+.text-teal-1000 {
+  color: var(--primitive-teal-1000) !important;
+}

package/build/css/utilities/index.css

@@ -4,6 +4,7 @@
 @import "./border-style.css";
 @import "./box-sizing.css";
 @import "./border-width.css";
+@import "./color.css";
 @import "./cursor.css";
 @import "./display.css";
 @import "./flex.css";
@@ -23,6 +24,8 @@
 @import "./overflow.css";
 @import "./position.css";
 @import "./padding.css";
+@import "./shadow.css";
+@import "./text-align.css";
 @import "./text-overflow.css";
 @import "./text-transform.css";
 @import "./vertical-align.css";

package/build/css/utilities/shadow.css

@@ -0,0 +1,15 @@
+.shadow-xs {
+  box-shadow: 0 0 12px 0 rgba(18, 18, 18, 0.08) !important;
+}
+.shadow-sm {
+  box-shadow: 0 0 12px 0 rgba(18, 18, 18, 0.16) !important;
+}
+.shadow-md {
+  box-shadow: 0 0 12px 0 rgba(18, 18, 18, 0.24) !important;
+}
+.shadow-lg {
+  box-shadow: 0 0 12px 0 rgba(18, 18, 18, 0.72) !important;
+}
+.shadow-xl {
+  box-shadow: 0 0 16px 0 rgba(18, 18, 18, 0.96) !important;
+}

package/build/css/utilities/text-align.css

@@ -0,0 +1,18 @@
+.text-left {
+  text-align: left !important;
+}
+.text-center {
+  text-align: center !important;
+}
+.text-right {
+  text-align: right !important;
+}
+.text-justify {
+  text-align: justify !important;
+}
+.text-start {
+  text-align: start !important;
+}
+.text-end {
+  text-align: end !important;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kofile/gds-foundations",
-  "version": "1.0.0-alpha.13",
+  "version": "1.0.0-alpha.15",
   "description": "",
   "main": "build/css/index.css",
   "exports": {
@@ -68,6 +68,10 @@
       "import": "./build/css/components/checkbox.module.css",
       "require": "./build/css/components/checkbox.module.css"
     },
+    "./components/dialog.module.css": {
+      "import": "./build/css/components/dialog.module.css",
+      "require": "./build/css/components/dialog.module.css"
+    },
     "./components/field-message.module.css": {
       "import": "./build/css/components/field-message.module.css",
       "require": "./build/css/components/field-message.module.css"
@@ -104,6 +108,10 @@
       "import": "./build/css/components/list-item.module.css",
       "require": "./build/css/components/list-item.module.css"
     },
+    "./components/loader.module.css": {
+      "import": "./build/css/components/loader.module.css",
+      "require": "./build/css/components/loader.module.css"
+    },
     "./components/radio-group.module.css": {
       "import": "./build/css/components/radio-group.module.css",
       "require": "./build/css/components/radio-group.module.css"