@kofile/gds-foundations 1.0.0-alpha.10 → 1.0.0-alpha.12

package/build/css/components/card.module.css

@@ -0,0 +1,23 @@
+.card {
+  background-color: var(--card-light-color-background-primary-default);
+  border: var(--card-size-sm-border-width) solid
+    var(--card-light-color-border-primary-default);
+  border-radius: var(--card-size-sm-border-radius);
+  min-height: var(--card-size-sm-min-height);
+  padding: var(--card-size-sm-padding);
+  width: var(--card-size-sm-width);
+}
+.card[data-size="md"] {
+  padding: var(--card-size-sm-padding);
+  width: var(--card-size-md-width);
+}
+.card[data-size="lg"] {
+  padding: var(--card-size-sm-padding);
+  width: var(--card-size-lg-width);
+}
+
+.card[data-mode="dark"] {
+  background-color: var(--card-dark-color-background-primary-default);
+  border: var(--card-size-sm-border-width) solid
+    var(--card-dark-color-border-primary-default);
+}

package/build/css/components/list-callout-group.module.css

@@ -0,0 +1,3 @@
+.ul {
+  all: unset;
+}

package/build/css/components/list-callout.module.css

@@ -0,0 +1,11 @@
+.li {
+  all: unset;
+}
+
+.li {
+  color: var(--list-item-light-color-text-primary-default);
+}
+
+.li[data-mode="dark"] {
+  color: var(--list-item-dark-color-text-primary-default);
+}

package/build/css/components/list-group.module.css

@@ -0,0 +1,3 @@
+.ul {
+  all: unset;
+}

package/build/css/components/list-item.module.css

@@ -0,0 +1,11 @@
+.li {
+  all: unset;
+}
+
+.li {
+  color: var(--list-item-light-color-text-primary-default);
+}
+
+.li[data-mode="dark"] {
+  color: var(--list-item-dark-color-text-primary-default);
+}

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

@@ -0,0 +1,139 @@
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+.list {
+  box-sizing: border-box;
+  display: flex;
+  column-gap: 1px;
+  border: var(--segmented-controller-elements-list-size-lg-border-width) solid
+    var(--segmented-controller-light-elements-list-color-border-primary-default);
+  border-radius: var(
+    --segmented-controller-elements-list-size-lg-border-radius
+  );
+  width: fit-content;
+}
+.trigger {
+  background-color: var(
+    --segmented-controller-light-elements-trigger-color-background-primary-default
+  );
+  padding-block: var(
+    --segmented-controller-elements-trigger-size-lg-padding-block
+  );
+  padding-inline: var(
+    --segmented-controller-elements-trigger-size-lg-padding-inline
+  );
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font: var(--segmented-controller-elements-trigger-size-lg-typography);
+  color: var(--segmented-controller-trigger-color);
+}
+.trigger:hover {
+  color: var(
+    --segmented-controller-light-elements-trigger-color-text-primary-hover
+  );
+}
+.trigger:first-child {
+  border-top-left-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+  border-bottom-left-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+}
+.trigger:last-child {
+  border-top-right-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+  border-bottom-right-radius: var(
+    --segmented-controller-elements-trigger-size-lg-border-radius
+  );
+}
+
+.trigger[data-state="active"] {
+  box-sizing: border-box;
+  background-color: var(
+    --segmented-controller-light-elements-trigger-color-background-primary-active
+  );
+  color: var(
+    --segmented-controller-light-elements-trigger-color-text-primary-active
+  );
+  /* border-color: var(
+    --segmented-controller-light-elements-trigger-color-border-primary-active
+  ); */
+
+  border: 1px solid var(--color-primary-300);
+  border-radius: 6px;
+
+  margin: -1px;
+}
+.trigger[data-size="md"] {
+  font: var(--segmented-controller-elements-trigger-size-md-typography);
+}
+.list[data-mode="dark"] {
+  border: var(--segmented-controller-elements-list-size-lg-border-width) solid
+    var(--segmented-controller-dark-elements-list-color-border-primary-default);
+  background-color: var(
+    --segmented-controller-dark-elements-list-color-background-primary-default
+  );
+}
+
+.trigger[data-mode="dark"] {
+  border-color: var(
+    --segmented-controller-dark-elements-trigger-color-border-primary-default
+  );
+
+  background-color: var(
+    --segmented-controller-dark-elements-trigger-color-background-primary-default
+  );
+  color: var(
+    --segmented-controller-dark-elements-trigger-color-text-primary-default
+  );
+}
+.trigger[data-mode="dark"]:hover {
+  color: var(
+    --segmented-controller-dark-elements-trigger-color-text-primary-hover
+  );
+}
+.trigger[data-mode="dark"][data-state="active"] {
+  color: var(
+    --segmented-controller-dark-elements-trigger-color-text-primary-active
+  );
+  background-color: var(
+    --segmented-controller-dark-elements-trigger-color-background-primary-active
+  );
+  border-color: var(
+    --segmented-controller-dark-elements-trigger-color-border-primary-active
+  );
+}
+
+.content {
+  flex-shrink: 1;
+  border: var(--segmented-controller-elements-content-size-lg-border-width)
+    solid
+    var(
+      --segmented-controller-light-elements-content-color-border-primary-default
+    );
+  margin-top: var(
+    --segmented-controller-elements-content-size-lg-margin-block-start
+  );
+  padding: var(--segmented-controller-elements-content-size-lg-padding);
+  outline: none;
+  width: auto;
+}
+.content:focus {
+  border: var(--segmented-controller-elements-content-size-lg-border-width)
+    solid
+    var(
+      --segmented-controller-light-elements-content-color-border-primary-default
+    );
+}

package/build/css/themes/card/dark.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--card-dark-color-background-primary-default: #121212;
+--card-dark-color-border-primary-default: #343944;
+}

package/build/css/themes/card/light.css

@@ -0,0 +1,6 @@
+
+:root, 
+:host {
+--card-light-color-background-primary-default: #ffffff;
+--card-light-color-border-primary-default: #d5d7db;
+}

package/build/css/themes/global.css

@@ -432,6 +432,16 @@
 --input-elements-addon-size-xl-height: 3rem;
 --input-elements-addon-size-xl-padding-inline: 1rem;
 --input-disabled-opacity: 0.32;
+--card-size-sm-border-radius: 0.5rem;
+--card-size-sm-border-width: 0.063rem;
+--card-size-sm-border-style: solid;
+--card-size-sm-min-height: 16rem;
+--card-size-sm-padding: 1rem;
+--card-size-sm-width: 288px;
+--card-size-md-padding: 1.5rem;
+--card-size-md-width: 32rem;
+--card-size-lg-padding: 3rem;
+--card-size-lg-width: 64rem;
 --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';
@@ -475,6 +485,19 @@
 --radio-group-tile-size-md-padding-block: 1rem;
 --radio-group-tile-size-md-padding-inline: 1rem;
 --radio-group-tile-size-md-width: auto;
+--segmented-controller-elements-list-size-lg-border-radius: 0.375rem;
+--segmented-controller-elements-list-size-lg-border-width: 0.063rem;
+--segmented-controller-elements-trigger-size-md-padding-block: 0.125rem;
+--segmented-controller-elements-trigger-size-md-padding-inline: 0.5rem;
+--segmented-controller-elements-trigger-size-md-typography: 600 0.813rem/1.25rem 'Source Sans 3';
+--segmented-controller-elements-trigger-size-lg-border-radius: 0.375rem;
+--segmented-controller-elements-trigger-size-lg-border-width: 0.125rem;
+--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-width: 0.063rem;
+--segmented-controller-elements-content-size-lg-margin-block-start: 0.5rem;
+--segmented-controller-elements-content-size-lg-padding: 1rem;
 --select-elements-trigger-size-md-max-height: 1.5rem;
 --select-elements-trigger-size-md-padding-block: 0.25rem;
 --select-elements-trigger-size-md-padding-inline: 0.5rem;

package/build/css/themes/index.css

@@ -2,6 +2,8 @@
 @import "./badge";
 @import "./button/light.css";
 @import "./button/dark.css";
+@import "./card/light.css";
+@import "./card/dark.css";
 @import "./checkbox/light.css";
 @import "./checkbox/dark.css";
 @import "./checkbox-tile/light.css";
@@ -16,10 +18,14 @@
 @import "./label/dark.css";
 @import "./link/light.css";
 @import "./link/dark.css";
+@import "./list-item/light.css";
+@import "./list-item/dark.css";
 @import "./radio-group/light.css";
 @import "./radio-group/dark.css";
 @import "./radio-group-tile/light.css";
 @import "./radio-group-tile/dark.css";
+@import "./segmented-controller/light.css";
+@import "./segmented-controller/dark.css";
 @import "./select/light.css";
 @import "./select/dark.css";
 @import "./switch/light.css";

package/build/css/themes/list-item/dark.css

@@ -0,0 +1,5 @@
+
+:root, 
+:host {
+--list-item-dark-color-text-primary-default: #ffffff;
+}

package/build/css/themes/list-item/light.css

@@ -0,0 +1,5 @@
+
+:root, 
+:host {
+--list-item-light-color-text-primary-default: #121212;
+}

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

@@ -0,0 +1,15 @@
+
+:root, 
+:host {
+--segmented-controller-dark-elements-list-color-background-primary-default: #191b22;
+--segmented-controller-dark-elements-list-color-border-primary-default: #343944;
+--segmented-controller-dark-elements-trigger-color-background-primary-default: #121212;
+--segmented-controller-dark-elements-trigger-color-background-primary-active: #03122f;
+--segmented-controller-dark-elements-trigger-color-border-primary-default: transparent;
+--segmented-controller-dark-elements-trigger-color-border-primary-active: #052b74;
+--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;
+}

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

@@ -0,0 +1,14 @@
+
+:root, 
+:host {
+--segmented-controller-light-elements-list-color-border-primary-default: #d5d7db;
+--segmented-controller-light-elements-trigger-color-background-primary-default: #ffffff;
+--segmented-controller-light-elements-trigger-color-background-primary-active: #f0f7ff;
+--segmented-controller-light-elements-trigger-color-border-primary-default: transparent;
+--segmented-controller-light-elements-trigger-color-border-primary-active: #abcffd;
+--segmented-controller-light-elements-trigger-color-text-primary-default: #121212;
+--segmented-controller-light-elements-trigger-color-text-primary-active: #0c57cd;
+--segmented-controller-light-elements-trigger-color-text-primary-hover: #063b99;
+--segmented-controller-light-elements-content-color-background-primary-default: #ffffff;
+--segmented-controller-light-elements-content-color-border-primary-default: #d5d7db;
+}

package/build/css/utilities/flex.css

@@ -22,7 +22,7 @@
   flex-wrap: wrap-reverse !important;
 }
 /* justify-content*/
-.justify-normal: {
+.justify-normal {
   justify-content: normal !important;
 }
 .justify-start {

package/build/css/utilities/height.css

@@ -4,27 +4,27 @@
 .h-px {
   height: 1px !important;
 }
-/* .h-0.5 {
+.h-0.5 {
   height: var(--primitive-2) !important;
-} */
+}
 .h-1 {
   height: var(--primitive-4) !important;
 }
-/* .h-1.5 {
+.h-1.5 {
   height: var(--primitive-6) !important;
-} */
+}
 .h-2 {
   height: var(--primitive-8) !important;
 }
-/* .h-2.5 {
+.h-2.5 {
   height: var(--primitive-10) !important;
-} */
+}
 .h-3 {
   height: var(--primitive-12) !important;
 }
-/* .h-3.5 {
+.h-3.5 {
   height: var(--primitive-14) !important;
-} */
+}
 .h-4 {
   height: var(--primitive-16) !important;
 }
@@ -106,6 +106,51 @@
 .h-auto {
   height: auto !important;
 }
+/* .h-1/2 {
+  height: 50% !important;
+}
+.h-1/3 {
+  height: 33.333333% !important;
+}
+.h-2/3 {
+  height: 66.666667% !important;
+}
+.h-1/4 {
+  height: 25% !important;
+}
+.h-2/4 {
+  height: 50% !important;
+}
+.h-3/4 {
+  height: 75% !important;
+}
+.h-1/5 {
+  height: 20% !important;
+}
+.h-2/5 {
+  height: 40% !important;
+}
+.h-3/5 {
+  height: 60% !important;
+}
+.h-4/5 {
+  height: 80% !important;
+}
+.h-1/6 {
+  height: 16.666667% !important;
+}
+.h-2/6 {
+  height: 33.333333% !important;
+}
+.h-3/6 {
+  height: 50% !important;
+}
+.h-4/6 {
+  height: 66.666667% !important;
+}
+.h-5/6 {
+  height: 83.333333% !important;
+} */
 .h-full {
   height: 100% !important;
 }

package/build/css/utilities/index.css

@@ -6,25 +6,25 @@
 @import "./border-width.css";
 @import "./cursor.css";
 @import "./display.css";
-/* @import "./flex.css"; */
-/* @import "./flex-shrink.css"; */
-/* @import "./font.css"; */
-/* @import "./gap.css"; */
-/* @import "./grid-auto-columns.css"; */
-/* @import "./grid-template-columns.css"; */
-/* @import "./height.css"; */
-/* @import "./margin.css"; */
-/* @import "./max-height.css"; */
-/* @import "./max-width.css"; */
-/* @import "./min-height.css"; */
-/* @import "./min-width.css"; */
-/* @import "./object-fit.css"; */
-/* @import "./object-position.css"; */
-/* @import "./overflow.css"; */
-/* @import "./position.css"; */
-/* @import "./padding.css"; */
-/* @import "./text-overflow.css"; */
-/* @import "./text-transform.css"; */
-/* @import "./vertical-align.css"; */
-/* @import "./white-space.css"; */
-/* @import "./width.css"; */
+@import "./flex.css";
+@import "./flex-shrink.css";
+@import "./font.css";
+@import "./gap.css";
+@import "./grid-auto-columns.css";
+@import "./grid-template-columns.css";
+@import "./height.css";
+@import "./margin.css";
+@import "./max-height.css";
+@import "./max-width.css";
+@import "./min-height.css";
+@import "./min-width.css";
+@import "./object-fit.css";
+@import "./object-position.css";
+@import "./overflow.css";
+@import "./position.css";
+@import "./padding.css";
+@import "./text-overflow.css";
+@import "./text-transform.css";
+@import "./vertical-align.css";
+@import "./white-space.css";
+@import "./width.css";

package/build/css/utilities/max-height.css

@@ -4,27 +4,27 @@
 .max-h-px {
   max-height: 1px !important;
 }
-/* .max-h-0.5 {
+.max-h-0.5 {
   max-height: var(--primitive-2) !important;
-} */
+}
 .max-h-1 {
   max-height: var(--primitive-4) !important;
 }
-/* .max-h-1.5 {
+.max-h-1.5 {
   max-height: var(--primitive-6) !important;
-} */
+}
 .max-h-2 {
   max-height: var(--primitive-8) !important;
 }
-/* .max-h-2.5 {
+.max-h-2.5 {
   max-height: var(--primitive-10) !important;
-} */
+}
 .max-h-3 {
   max-height: var(--primitive-12) !important;
 }
-/* .max-h-3.5 {
+.max-h-3.5 {
   max-height: var(--primitive-14) !important;
-} */
+}
 .max-h-4 {
   max-height: var(--primitive-16) !important;
 }

package/build/css/utilities/position.css

@@ -1059,13 +1059,114 @@
 .inset-auto {
   inset: auto !important;
 }
+/* .inset-1/2 {
+  inset: 50% !important;
+}
+.inset-1/3 {
+  inset: 33.333333% !important;
+}
+.inset-2/3 {
+  inset: 66.666667% !important;
+}
+.inset-1/4 {
+  inset: 25% !important;
+}
+.inset-2/4 {
+  inset: 50% !important;
+}
+.inset-3/4 {
+  inset: 75% !important;
+}
+.inset-full {
+  inset: 100% !important;
+}
+
+.inset-x-auto {
+  left: auto !important;
+  right: auto !important;
+}
+.inset-x-1/2 {
+  left: 50% !important;
+  right: 50% !important;
+}
+.inset-x-1/3 {
+  left: 33.333333% !important;
+  right: 33.333333% !important;
+}
+.inset-x-2/3 {
+  left: 66.666667% !important;
+  right: 66.666667% !important;
+}
+.inset-x-1/4 {
+  left: 25% !important;
+  right: 25% !important;
+}
+.inset-x-2/4 {
+  left: 50% !important;
+  right: 50% !important;
+}
+.inset-x-3/4 {
+  left: 75% !important;
+  right: 75% !important;
+}
+.inset-x-full {
+  left: 100% !important;
+  right: 100% !important;
+}
+.inset-y-auto {
+  top: auto !important;
+  bottom: auto !important;
+}
+.inset-y-1/2 {
+  top: 50% !important;
+  bottom: 50% !important;
+}
+.inset-y-1/3 {
+  top: 33.333333% !important;
+  bottom: 33.333333% !important;
+}
+.inset-y-2/3 {
+  top: 66.666667% !important;
+  bottom: 66.666667% !important;
+}
+.inset-y-1/4 {
+  top: 25% !important;
+  bottom: 25% !important;
+}
+.inset-y-2/4 {
+  top: 50% !important;
+  bottom: 50% !important;
+}
+.inset-y-3/4 {
+  top: 75% !important;
+  bottom: 75% !important;
+} */
 .inset-y-full {
   top: 100% !important;
   bottom: 100% !important;
 }
+
 .start-auto {
   inset-inline-start: auto !important;
 }
+/* .start-1/2 {
+  inset-inline-start: 50% !important;
+}
+.start-1/3 {
+  inset-inline-start: 33.333333% !important;
+}
+.start-2/3 {
+  inset-inline-start: 66.666667% !important;
+}
+.start-1/4 {
+  inset-inline-start: 25% !important;
+}
+.start-2/4 {
+  inset-inline-start: 50% !important;
+}
+.start-3/4 {
+  inset-inline-start: 75% !important;
+} */
 .start-full {
   inset-inline-start: 100% !important;
 }
@@ -1073,6 +1174,24 @@
 .end-auto {
   inset-inline-end: auto !important;
 }
+/* .end-1/2 {
+  inset-inline-end: 50% !important;
+}
+.end-1/3 {
+  inset-inline-end: 33.333333% !important;
+}
+.end-2/3 {
+  inset-inline-end: 66.666667% !important;
+}
+.end-1/4 {
+  inset-inline-end: 25% !important;
+}
+.end-2/4 {
+  inset-inline-end: 50% !important;
+}
+.end-3/4 {
+  inset-inline-end: 75% !important;
+} */
 .end-full {
   inset-inline-end: 100% !important;
 }
@@ -1080,6 +1199,24 @@
 .top-auto {
   top: auto !important;
 }
+/* .top-1/2 {
+  top: 50% !important;
+}
+.top-1/3 {
+  top: 33.333333% !important;
+}
+.top-2/3 {
+  top: 66.666667% !important;
+}
+.top-1/4 {
+  top: 25% !important;
+}
+.top-2/4 {
+  top: 50% !important;
+}
+.top-3/4 {
+  top: 75% !important;
+} */
 .top-full {
   top: 100% !important;
 }
@@ -1087,6 +1224,24 @@
 .right-auto {
   right: auto !important;
 }
+/* .right-1/2 {
+  right: 50% !important;
+}
+.right-1/3 {
+  right: 33.333333% !important;
+}
+.right-2/3 {
+  right: 66.666667% !important;
+}
+.right-1/4 {
+  right: 25% !important;
+}
+.right-2/4 {
+  right: 50% !important;
+}
+.right-3/4 {
+  right: 75% !important;
+} */
 .right-full {
   right: 100% !important;
 }
@@ -1094,6 +1249,24 @@
 .bottom-auto {
   bottom: auto !important;
 }
+/* .bottom-1/2 {
+  bottom: 50% !important;
+}
+.bottom-1/3 {
+  bottom: 33.333333% !important;
+}
+.bottom-2/3 {
+  bottom: 66.666667% !important;
+}
+.bottom-1/4 {
+  bottom: 25% !important;
+}
+.bottom-2/4 {
+  bottom: 50% !important;
+}
+.bottom-3/4 {
+  bottom: 75% !important;
+} */
 .bottom-full {
   bottom: 100% !important;
 }
@@ -1101,6 +1274,24 @@
 .left-auto {
   left: auto !important;
 }
+/* .left-1/2 {
+  left: 50% !important;
+}
+.left-1/3 {
+  left: 33.333333% !important;
+}
+.left-2/3 {
+  left: 66.666667% !important;
+}
+.left-1/4 {
+  left: 25% !important;
+}
+.left-2/4 {
+  left: 50% !important;
+}
+.left-3/4 {
+  left: 75% !important;
+} */
 .left-full {
   left: 100% !important;
 }

package/build/css/utilities/width.css

@@ -4,27 +4,27 @@
 .w-px {
   width: 1px !important;
 }
-/* .w-0.5 {
+.w-0.5 {
   width: var(--primitive-2) !important;
-} */
+}
 .w-1 {
   width: var(--primitive-4) !important;
 }
-/* .w-1.5 {
+.w-1.5 {
   width: var(--primitive-6) !important;
-} */
+}
 .w-2 {
   width: var(--primitive-8) !important;
 }
-/* .w-2.5 {
+.w-2.5 {
   width: var(--primitive-10) !important;
-} */
+}
 .w-3 {
   width: var(--primitive-12) !important;
 }
-/* .w-3.5 {
+.w-3.5 {
   width: var(--primitive-14) !important;
-} */
+}
 .w-4 {
   width: var(--primitive-16) !important;
 }
@@ -106,6 +106,84 @@
 .w-auto {
   width: auto !important;
 }
+/* .w-1\/2 {
+  width: 50% !important;
+}
+.w-1\/3 {
+  width: 33.333333% !important;
+}
+.w-2\/3 {
+  width: 66.666667% !important;
+}
+.w-1\/4 {
+  width: 25% !important;
+}
+.w-2\/4 {
+  width: 50% !important;
+}
+.w-3\/4 {
+  width: 75% !important;
+}
+.w-1\/5 {
+  width: 20% !important;
+}
+.w-2\/5 {
+  width: 40% !important;
+}
+.w-3\/5 {
+  width: 60% !important;
+}
+.w-4\/5 {
+  width: 80% !important;
+}
+.w-1\/6 {
+  width: 16.666667% !important;
+}
+.w-2\/6 {
+  width: 33.333333% !important;
+}
+.w-3\/6 {
+  width: 50% !important;
+}
+.w-4\/6 {
+  width: 66.666667% !important;
+}
+.w-5\/6 {
+  width: 83.333333% !important;
+}
+.w-1\/12 {
+  width: 8.333333% !important;
+}
+.w-2\/12 {
+  width: 16.666667% !important;
+}
+.w-3\/12 {
+  width: 25% !important;
+}
+.w-4\/12 {
+  width: 33.333333% !important;
+}
+.w-5\/12 {
+  width: 41.666667% !important;
+}
+.w-6\/12 {
+  width: 50% !important;
+}
+.w-7\/12 {
+  width: 58.333333% !important;
+}
+.w-8\/12 {
+  width: 66.666667% !important;
+}
+.w-9\/12 {
+  width: 75% !important;
+}
+.w-10\/12 {
+  width: 83.333333% !important;
+}
+.w-11\/12 {
+  width: 91.666667% !important;
+} */
 .w-full {
   width: 100% !important;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kofile/gds-foundations",
-  "version": "1.0.0-alpha.10",
+  "version": "1.0.0-alpha.12",
   "description": "",
   "main": "build/css/index.css",
   "exports": {
@@ -60,6 +60,10 @@
       "import": "./build/css/components/button.module.css",
       "require": "./build/css/components/button.module.css"
     },
+    "./components/card.module.css": {
+      "import": "./build/css/components/card.module.css",
+      "require": "./build/css/components/card.module.css"
+    },
     "./components/checkbox.module.css": {
       "import": "./build/css/components/checkbox.module.css",
       "require": "./build/css/components/checkbox.module.css"
@@ -84,10 +88,30 @@
       "import": "./build/css/components/link.module.css",
       "require": "./build/css/components/link.module.css"
     },
+    "./components/list-callout.module.css": {
+      "import": "./build/css/components/list-callout.module.css",
+      "require": "./build/css/components/list-callout.module.css"
+    },
+    "./components/list-callout-group.module.css": {
+      "import": "./build/css/components/list-callout-group.module.css",
+      "require": "./build/css/components/list-callout-group.module.css"
+    },
+    "./components/list-group.module.css": {
+      "import": "./build/css/components/list-group.module.css",
+      "require": "./build/css/components/list-group.module.css"
+    },
+    "./components/list-item.module.css": {
+      "import": "./build/css/components/list-item.module.css",
+      "require": "./build/css/components/list-item.module.css"
+    },
     "./components/radio-group.module.css": {
       "import": "./build/css/components/radio-group.module.css",
       "require": "./build/css/components/radio-group.module.css"
     },
+    "./components/segmented-controller.module.css": {
+      "import": "./build/css/components/segmented-controller.module.css",
+      "require": "./build/css/components/segmented-controller.module.css"
+    },
     "./components/select.module.css": {
       "import": "./build/css/components/select.module.css",
       "require": "./build/css/components/select.module.css"