@navikt/ds-css 4.7.4 → 4.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 4.8.0
+
+### Minor Changes
+
+- Nye komponenter `VStack`, `HStack` og `Spacer` for å enklere kunne lage layout med flexbox og spacing-variabler. ([#2040](https://github.com/navikt/aksel/pull/2040))
+
 ## 4.7.4
 
 ### Patch Changes

package/config/_mappings.js

@@ -57,7 +57,7 @@ const StyleMappings = {
     {
       component: "UNSAFE_Combobox",
       main: "combobox.css",
-      dependencies: [typoCss],
+      dependencies: [typoCss, "chips.css"],
     },
     {
       component: "ConfirmationPanel",
@@ -134,6 +134,18 @@ const StyleMappings = {
     { component: "Select", main: formCss, dependencies: [typoCss] },
     { component: "Skeleton", main: "skeleton.css", dependencies: [] },
     { component: "Stepper", main: "stepper.css", dependencies: [typoCss] },
+    {
+      component: "HStack",
+      main: "stack.css",
+    },
+    {
+      component: "VStack",
+      main: "stack.css",
+    },
+    {
+      component: "Spacer",
+      main: "stack.css",
+    },
     { component: "Switch", main: formCss, dependencies: [typoCss] },
     { component: "Table", main: "table.css", dependencies: [typoCss] },
     { component: "Tabs", main: "tabs.css", dependencies: [typoCss] },

package/dist/component/index.css

@@ -1,7 +1,7 @@
 @charset "UTF-8";
 /**
  * Do not edit directly
- * Generated on Fri, 04 Aug 2023 10:36:53 GMT
+ * Generated on Fri, 04 Aug 2023 11:46:26 GMT
  */
 :root, :host {
   --a-spacing-05: 0.125rem;
@@ -5008,6 +5008,60 @@ button.navds-internalheader__title:active,
     opacity: 0.4;
   }
 }
+/* stylelint-disable csstools/value-no-unknown-custom-properties */
+/* stylelint-disable aksel/design-token-exists */
+.navds-stack {
+  --ac-stack-align: initial;
+  --ac-stack-justify: initial;
+  --ac-stack-direction: initial;
+  --ac-stack-wrap: initial;
+  --ac-stack-gap-xs: initial;
+  --ac-stack-gap-sm: initial;
+  --ac-stack-gap-md: initial;
+  --ac-stack-gap-lg: initial;
+  --ac-stack-gap-xl: initial;
+  --__ac-stack-gap: var(--ac-stack-gap-xs);
+
+  gap: var(--__ac-stack-gap);
+  display: flex;
+  align-items: var(--ac-stack-align);
+  justify-content: var(--ac-stack-justify);
+  flex-flow: var(--ac-stack-direction) var(--ac-stack-wrap);
+}
+.navds-stack__spacer {
+  flex: 1;
+  justify-self: stretch;
+  align-self: stretch;
+}
+.navds-stack > .navds-stack__spacer {
+  margin-block-start: calc(var(--__ac-stack-gap) * -1);
+}
+.navds-hstack > .navds-stack__spacer {
+  margin-inline-start: calc(var(--__ac-stack-gap) * -1);
+}
+@media (min-width: 480px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--ac-stack-gap-sm, var(--ac-stack-gap-xs));
+  }
+}
+@media (min-width: 768px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs)));
+  }
+}
+@media (min-width: 1024px) {
+  .navds-stack {
+    --__ac-stack-gap: var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))));
+  }
+}
+@media (min-width: 1280px) {
+  .navds-stack {
+    --__ac-stack-gap: var(
+      --ac-stack-gap-xl,
+      var(--ac-stack-gap-lg, var(--ac-stack-gap-md, var(--ac-stack-gap-sm, var(--ac-stack-gap-xs))))
+    );
+  }
+}
 .navds-stepper {
   --navds-stepper-circle-size: 1.75rem;
   --navds-stepper-border-width: 2px;