@navikt/ds-css 5.3.5 → 5.4.1

package/form/error-summary.css

@@ -2,6 +2,7 @@
   background-color: var(--ac-error-summary-bg, var(--a-surface-default));
   padding: var(--a-spacing-5);
   border: 4px solid var(--ac-error-summary-border, var(--a-border-danger));
+  border-radius: var(--a-border-radius-large);
 }
 
 .navds-error-summary--small {

package/form/fieldset.css

@@ -1,5 +1,9 @@
 [data-theme="dark"] {
-  --ac-form-description: var(--a-text-on-inverted);
+  --__ac-form-description: var(--a-text-on-inverted);
+}
+
+[data-theme="light"] {
+  --__ac-form-description: initial;
 }
 
 .navds-fieldset {
@@ -14,7 +18,7 @@
 }
 
 .navds-fieldset__description {
-  color: var(--ac-form-description, var(--a-text-subtle));
+  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
 }
 
 .navds-fieldset > .navds-fieldset__description:not(:empty) {

package/form/form.css

@@ -1,5 +1,9 @@
 [data-theme="dark"] {
-  --ac-form-description: var(--a-text-on-inverted);
+  --__ac-form-description: var(--a-text-on-inverted);
+}
+
+[data-theme="light"] {
+  --__ac-form-description: initial;
 }
 
 .navds-form-field {
@@ -10,7 +14,7 @@
 
 .navds-form-field__description {
   margin-top: -0.375rem;
-  color: var(--ac-form-description, var(--a-text-subtle));
+  color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle)));
 }
 
 .navds-form-field .navds-error-message,

package/form/search.css

@@ -1,9 +1,17 @@
 [data-theme="dark"] {
-  --ac-search-button-border: var(--a-border-on-inverted);
-  --ac-search-button-border-hover: var(--a-blue-200);
-  --ac-search-clear-icon: var(--a-white);
-  --ac-search-clear-icon-hover: var(--a-blue-200);
-  --ac-search-error-border: var(--a-red-300);
+  --__ac-search-button-border: var(--a-border-on-inverted);
+  --__ac-search-button-border-hover: var(--a-blue-200);
+  --__ac-search-clear-icon: var(--a-white);
+  --__ac-search-clear-icon-hover: var(--a-blue-200);
+  --__ac-search-error-border: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-search-button-border: initial;
+  --__ac-search-button-border-hover: initial;
+  --__ac-search-clear-icon: initial;
+  --__ac-search-clear-icon-hover: initial;
+  --__ac-search-error-border: initial;
 }
 
 .navds-search {
@@ -65,7 +73,7 @@
   position: absolute;
   right: 0.75rem;
   border-radius: var(--a-border-radius-medium);
-  color: var(--ac-search-clear-icon, var(--a-text-default));
+  color: var(--ac-search-clear-icon, var(--__ac-search-clear-icon, var(--a-text-default)));
   height: 32px;
   width: 32px;
   top: 50%;
@@ -87,7 +95,7 @@
 }
 
 .navds-search__button-clear:hover {
-  color: var(--ac-search-clear-icon-hover, var(--a-text-action));
+  color: var(--ac-search-clear-icon-hover, var(--__ac-search-clear-icon-hover, var(--a-text-action)));
 }
 
 .navds-search__button-clear:focus-visible {
@@ -120,16 +128,17 @@
 }
 
 .navds-search__button-search.navds-button--secondary {
-  box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
-    0 1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset,
-    0 -1px 0 0 var(--ac-search-button-border, var(--a-border-default)) inset;
+  box-shadow: -1px 0 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    0 1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    0 -1px 0 0 var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset;
 }
 
 .navds-search__button-search.navds-button--secondary:hover {
-  box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
-    0 1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
-    0 -1px 0 0 var(--ac-search-button-border-hover, var(--a-border-action)) inset,
-    -1px 0 0 0 var(--ac-search-button-border-hover, var(--a-border-action));
+  box-shadow: -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
+      inset,
+    0 1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+    0 -1px 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+    -1px 0 0 0 var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)));
   z-index: 1;
 }
 
@@ -138,11 +147,13 @@
 }
 
 .navds-search__button-search.navds-button--secondary:focus-visible {
-  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+    var(--a-shadow-focus);
 }
 
 .navds-search__button-search.navds-button--secondary:focus-visible:hover {
-  box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
+  box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action))) inset,
+    var(--a-shadow-focus);
 }
 
 .navds-search__button-search.navds-button--secondary:focus-visible:active {
@@ -151,11 +162,14 @@
 
 @supports not selector(:focus-visible) {
   .navds-search__button-search.navds-button--secondary:focus {
-    box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--a-border-default)) inset, var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px var(--ac-search-button-border, var(--__ac-search-button-border, var(--a-border-default))) inset,
+      var(--a-shadow-focus);
   }
 
   .navds-search__button-search.navds-button--secondary:focus:hover {
-    box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--a-border-action)) inset, var(--a-shadow-focus);
+    box-shadow: 0 0 0 1px var(--ac-search-button-border-hover, var(--__ac-search-button-border-hover, var(--a-border-action)))
+        inset,
+      var(--a-shadow-focus);
   }
 
   .navds-search__button-search.navds-button--secondary:focus:active {
@@ -165,12 +179,13 @@
 
 /* Error-handling */
 .navds-search--error .navds-search__input:not(:hover):not(:disabled) {
-  border-color: var(--ac-search-error-border, var(--a-border-danger));
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger));
+  border-color: var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger)));
 }
 
 .navds-search--error .navds-search__input:focus-visible:not(:hover):not(:disabled) {
-  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+  box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+    var(--a-shadow-focus);
 }
 
 /* Focus layering */
@@ -182,7 +197,8 @@
 
 @supports not selector(:focus-visible) {
   .navds-search--error .navds-search__input:focus:not(:hover):not(:disabled) {
-    box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--a-border-danger)), var(--a-shadow-focus);
+    box-shadow: inset 0 0 0 1px var(--ac-search-error-border, var(--__ac-search-error-border, var(--a-border-danger))),
+      var(--a-shadow-focus);
   }
 
   .navds-search__input:focus,

package/form/text-field.css

@@ -1,21 +1,30 @@
 [data-theme="dark"] {
-  --ac-textfield-text: var(--a-text-on-inverted);
-  --ac-textfield-bg: var(--a-surface-inverted);
-  --ac-textfield-border: var(--a-border-on-inverted);
-  --ac-textfield-hover-border: var(--a-blue-200);
-  --ac-textfield-placeholder: var(--a-gray-500);
-  --ac-textfield-error-border: var(--a-red-300);
+  --__ac-textfield-text: var(--a-text-on-inverted);
+  --__ac-textfield-bg: var(--a-surface-inverted);
+  --__ac-textfield-border: var(--a-border-on-inverted);
+  --__ac-textfield-hover-border: var(--a-blue-200);
+  --__ac-textfield-placeholder: var(--a-gray-500);
+  --__ac-textfield-error-border: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textfield-text: initial;
+  --__ac-textfield-bg: initial;
+  --__ac-textfield-border: initial;
+  --__ac-textfield-hover-border: initial;
+  --__ac-textfield-placeholder: initial;
+  --__ac-textfield-error-border: initial;
 }
 
 .navds-text-field__input {
   appearance: none;
   padding: var(--a-spacing-2);
-  background-color: var(--ac-textfield-bg, var(--a-surface-default));
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
   border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textfield-border, var(--a-border-default));
+  border: 1px solid var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
   min-height: 3rem;
   width: 100%;
-  color: var(--ac-textfield-text, var(--a-text-default));
+  color: var(--ac-textfield-text, var(--__ac-textfield-text, var(--a-text-default)));
 }
 
 .navds-text-field__input[size] {
@@ -23,7 +32,7 @@
 }
 
 .navds-text-field__input::placeholder {
-  color: var(--ac-textfield-placeholder, var(--a-text-subtle));
+  color: var(--ac-textfield-placeholder, var(--__ac-textfield-placeholder, var(--a-text-subtle)));
 }
 
 .navds-form-field--small .navds-text-field__input {
@@ -32,7 +41,7 @@
 }
 
 .navds-text-field__input:hover {
-  border-color: var(--ac-textfield-hover-border, var(--a-border-action));
+  border-color: var(--ac-textfield-hover-border, var(--__ac-textfield-hover-border, var(--a-border-action)));
 }
 
 .navds-text-field__input:focus-visible {
@@ -51,8 +60,8 @@
   Error handling
 */
 .navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
-  border-color: var(--ac-textfield-error-border, var(--a-border-danger));
-  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--a-border-danger));
+  border-color: var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
+  box-shadow: 0 0 0 1px var(--ac-textfield-error-border, var(--__ac-textfield-error-border, var(--a-border-danger)));
 }
 
 .navds-text-field--error > .navds-text-field__input:focus-visible:not(:hover):not(:disabled) {
@@ -67,8 +76,8 @@
 
 /* Disabled handling */
 .navds-text-field__input:disabled {
-  background-color: var(--ac-textfield-bg, var(--a-surface-default));
-  border-color: var(--ac-textfield-border, var(--a-border-default));
+  background-color: var(--ac-textfield-bg, var(--__ac-textfield-bg, var(--a-surface-default)));
+  border-color: var(--ac-textfield-border, var(--__ac-textfield-border, var(--a-border-default)));
   box-shadow: none;
   cursor: not-allowed;
 }

package/form/textarea.css

@@ -1,12 +1,23 @@
 [data-theme="dark"] {
-  --ac-textarea-text: var(--a-text-on-inverted);
-  --ac-textarea-bg: var(--a-transparent);
-  --ac-textarea-border: var(--a-border-on-inverted);
-  --ac-textarea-hover-border: var(--a-blue-200);
-  --ac-textarea-placeholder: var(--a-gray-500);
-  --ac-textarea-error-border: var(--a-red-300);
-  --ac-textarea-counter-text: var(--a-gray-300);
-  --ac-textarea-counter-error-text: var(--a-red-300);
+  --__ac-textarea-text: var(--a-text-on-inverted);
+  --__ac-textarea-bg: var(--a-transparent);
+  --__ac-textarea-border: var(--a-border-on-inverted);
+  --__ac-textarea-hover-border: var(--a-blue-200);
+  --__ac-textarea-placeholder: var(--a-gray-500);
+  --__ac-textarea-error-border: var(--a-red-300);
+  --__ac-textarea-counter-text: var(--a-gray-300);
+  --__ac-textarea-counter-error-text: var(--a-red-300);
+}
+
+[data-theme="light"] {
+  --__ac-textarea-text: initial;
+  --__ac-textarea-bg: initial;
+  --__ac-textarea-border: initial;
+  --__ac-textarea-hover-border: initial;
+  --__ac-textarea-placeholder: initial;
+  --__ac-textarea-error-border: initial;
+  --__ac-textarea-counter-text: initial;
+  --__ac-textarea-counter-error-text: initial;
 }
 
 .navds-textarea__wrapper {
@@ -17,13 +28,13 @@
 .navds-textarea__input {
   appearance: none;
   padding: var(--a-spacing-2);
-  background-color: var(--ac-textarea-bg, var(--a-surface-default));
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
   border-radius: var(--a-border-radius-medium);
-  border: 1px solid var(--ac-textarea-border, var(--a-border-default));
+  border: 1px solid var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
   resize: none;
   width: 100%;
   display: block;
-  color: var(--ac-textarea-text, var(--a-text-default));
+  color: var(--ac-textarea-text, var(--__ac-textarea-text, var(--a-text-default)));
 }
 
 .navds-textarea--counter {
@@ -31,11 +42,11 @@
 }
 
 .navds-textarea__input::placeholder {
-  color: var(--ac-textarea-placeholder, var(--a-text-subtle));
+  color: var(--ac-textarea-placeholder, var(--__ac-textarea-placeholder, var(--a-text-subtle)));
 }
 
 .navds-textarea__input:hover {
-  border-color: var(--ac-textarea-hover-border, var(--a-border-action));
+  border-color: var(--ac-textarea-hover-border, var(--__ac-textarea-hover-border, var(--a-border-action)));
 }
 
 .navds-textarea__input:focus-visible {
@@ -60,7 +71,7 @@
 
 .navds-textarea__counter {
   pointer-events: none;
-  color: var(--ac-textarea-counter-text, var(--a-text-subtle));
+  color: var(--ac-textarea-counter-text, var(--__ac-textarea-counter-text, var(--a-text-subtle)));
   font-style: italic;
   position: absolute;
   text-align: left;
@@ -70,7 +81,7 @@
 }
 
 .navds-textarea__counter--error {
-  color: var(--ac-textarea-counter-error-text, var(--a-text-danger));
+  color: var(--ac-textarea-counter-error-text, var(--__ac-textarea-counter-error-text, var(--a-text-danger)));
 }
 
 .navds-textarea--resize .navds-textarea__input {
@@ -81,20 +92,20 @@
   Error handling
 */
 .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus-visible):not(:disabled) {
-  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
-  border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+  box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+  border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 
 @supports not selector(:focus-visible) {
   .navds-textarea--error .navds-textarea__input:not(:hover):not(:focus):not(:disabled) {
-    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--a-border-danger));
-    border-color: var(--ac-textarea-error-border, var(--a-border-danger));
+    box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
+    border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
   }
 }
 
 .navds-textarea__input:disabled {
-  background-color: var(--ac-textarea-bg, var(--a-surface-default));
-  border-color: var(--ac-textarea-border, var(--a-border-default));
+  background-color: var(--ac-textarea-bg, var(--__ac-textarea-bg, var(--a-surface-default)));
+  border-color: var(--ac-textarea-border, var(--__ac-textarea-border, var(--a-border-default)));
   box-shadow: none;
   cursor: not-allowed;
 }

package/index.css

@@ -1,6 +1,7 @@
 @charset "UTF-8";
 @import "baseline/index.css";
 @import "typography.css";
+@import "primitives/index.css";
 @import "grid.css";
 @import "accordion.css";
 @import "alert.css";
@@ -14,7 +15,6 @@
 @import "guide-panel.css";
 @import "form/index.css";
 @import "help-text.css";
-@import "hgrid.css";
 @import "internalheader.css";
 @import "link.css";
 @import "loader.css";
@@ -30,7 +30,6 @@
 @import "link-panel.css";
 @import "read-more.css";
 @import "skeleton.css";
-@import "stack.css";
 @import "stepper.css";
 @import "table.css";
 @import "tabs.css";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "5.3.5",
+  "version": "5.4.1",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -27,7 +27,7 @@
     "css:get-version": "node config/get-version.js"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^5.3.5",
+    "@navikt/ds-tokens": "^5.4.1",
     "cssnano": "6.0.0",
     "fast-glob": "3.2.11",
     "lodash": "4.17.21",

package/primitives/index.css

@@ -0,0 +1,3 @@
+@import "hgrid.css";
+@import "stack.css";
+@import "responsive.css";

package/primitives/responsive.css

@@ -0,0 +1,51 @@
+.navds-responsive {
+  display: none;
+}
+
+@media (min-width: 480px) {
+  .navds-responsive__above--sm {
+    display: revert;
+  }
+}
+
+@media (max-width: 479px) {
+  .navds-responsive__below--sm {
+    display: revert;
+  }
+}
+
+@media (min-width: 768px) {
+  .navds-responsive__above--md {
+    display: revert;
+  }
+}
+
+@media (max-width: 767px) {
+  .navds-responsive__below--md {
+    display: revert;
+  }
+}
+
+@media (min-width: 1024px) {
+  .navds-responsive__above--lg {
+    display: revert;
+  }
+}
+
+@media (max-width: 1023px) {
+  .navds-responsive__below--lg {
+    display: revert;
+  }
+}
+
+@media (min-width: 1280px) {
+  .navds-responsive__above--xl {
+    display: revert;
+  }
+}
+
+@media (max-width: 1279px) {
+  .navds-responsive__below--xl {
+    display: revert;
+  }
+}

package/typography.css

@@ -1,3 +1,13 @@
+[data-theme="dark"] {
+  --__ac-typo-error-text: var(--a-red-300);
+  --__ac-typo-text-subtle: var(--a-gray-300);
+}
+
+[data-theme="light"] {
+  --__ac-typo-error-text: initial;
+  --__ac-typo-text-subtle: initial;
+}
+
 /* Heading */
 .navds-heading {
   font-weight: var(--a-font-weight-bold);
@@ -202,13 +212,8 @@
   margin-bottom: var(--a-spacing-2);
 }
 
-[data-theme="dark"].navds-error-message,
-[data-theme="dark"] .navds-error-message {
-  --a-text-danger: var(--a-red-300);
-}
-
 .navds-error-message {
-  color: var(--ac-typo-error-text, var(--a-text-danger));
+  color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger)));
 }
 
 .navds-typo--truncate {
@@ -247,10 +252,5 @@
 }
 
 .navds-typo--color-subtle {
-  color: var(--a-text-subtle);
-}
-
-[data-theme="dark"].navds-typo--color-subtle,
-[data-theme="dark"] .navds-typo--color-subtle {
-  --a-text-subtle: var(--a-gray-300);
+  color: var(--__ac-typo-text-subtle, var(--a-text-subtle));
 }

package/dist/component/hgrid.min.css

@@ -1,7 +0,0 @@
-.navds-hgrid{--__ac-hgrid-columns-xs:initial;--__ac-hgrid-columns-sm:initial;--__ac-hgrid-columns-md:initial;--__ac-hgrid-columns-lg:initial;--__ac-hgrid-columns-xl:initial;--__ac-hgrid-columns:var(--__ac-hgrid-columns-xs);--__ac-hgrid-gap-xs:initial;--__ac-hgrid-gap-sm:initial;--__ac-hgrid-gap-md:initial;--__ac-hgrid-gap-lg:initial;--__ac-hgrid-gap-xl:initial;--__ac-hgrid-gap:var(--__ac-hgrid-gap-xs);--__ac-hgrid-align:initial;align-items:var(--__ac-hgrid-align);display:grid;gap:var(--__ac-hgrid-gap);grid-template-columns:var(--__ac-hgrid-columns)}@media (min-width:480px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs));--__ac-hgrid-gap:var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))}}@media (min-width:768px){.navds-hgrid{--__ac-hgrid-columns:var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs)));--__ac-hgrid-gap:var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs)))}}@media (min-width:1024px){.navds-hgrid{--__ac-hgrid-columns:var(
-      --__ac-hgrid-columns-lg,var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs)))
-    );--__ac-hgrid-gap:var(--__ac-hgrid-gap-lg,var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))))}}@media (min-width:1280px){.navds-hgrid{--__ac-hgrid-columns:var(
-      --__ac-hgrid-columns-xl,var(--__ac-hgrid-columns-lg,var(--__ac-hgrid-columns-md,var(--__ac-hgrid-columns-sm,var(--__ac-hgrid-columns-xs))))
-    );--__ac-hgrid-gap:var(
-      --__ac-hgrid-gap-xl,var(--__ac-hgrid-gap-lg,var(--__ac-hgrid-gap-md,var(--__ac-hgrid-gap-sm,var(--__ac-hgrid-gap-xs))))
-    )}}

package/dist/component/stack.min.css

@@ -1,3 +0,0 @@
-.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);align-items:var(--__ac-stack-align);display:flex;flex-flow:var(--__ac-stack-direction) var(--__ac-stack-wrap);gap:var(--__ac-stack-gap);justify-content:var(--__ac-stack-justify)}.navds-stack__spacer{align-self:stretch;flex:1;justify-self:stretch}.navds-stack>.navds-stack__spacer{-webkit-margin-before:calc(var(--__ac-stack-gap)*-1);margin-block-start:calc(var(--__ac-stack-gap)*-1)}.navds-hstack>.navds-stack__spacer{-webkit-margin-start:calc(var(--__ac-stack-gap)*-1);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))))
-    )}}

package/hgrid.css

@@ -1,57 +0,0 @@
-.navds-hgrid {
-  --__ac-hgrid-columns-xs: initial;
-  --__ac-hgrid-columns-sm: initial;
-  --__ac-hgrid-columns-md: initial;
-  --__ac-hgrid-columns-lg: initial;
-  --__ac-hgrid-columns-xl: initial;
-  --__ac-hgrid-columns: var(--__ac-hgrid-columns-xs);
-  --__ac-hgrid-gap-xs: initial;
-  --__ac-hgrid-gap-sm: initial;
-  --__ac-hgrid-gap-md: initial;
-  --__ac-hgrid-gap-lg: initial;
-  --__ac-hgrid-gap-xl: initial;
-  --__ac-hgrid-gap: var(--__ac-hgrid-gap-xs);
-  --__ac-hgrid-align: initial;
-
-  display: grid;
-  grid-template-columns: var(--__ac-hgrid-columns);
-  gap: var(--__ac-hgrid-gap);
-  align-items: var(--__ac-hgrid-align);
-}
-
-@media (min-width: 480px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs));
-  }
-}
-
-@media (min-width: 768px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)));
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs)));
-  }
-}
-
-@media (min-width: 1024px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-lg,
-      var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs)))
-    );
-    --__ac-hgrid-gap: var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))));
-  }
-}
-
-@media (min-width: 1280px) {
-  .navds-hgrid {
-    --__ac-hgrid-columns: var(
-      --__ac-hgrid-columns-xl,
-      var(--__ac-hgrid-columns-lg, var(--__ac-hgrid-columns-md, var(--__ac-hgrid-columns-sm, var(--__ac-hgrid-columns-xs))))
-    );
-    --__ac-hgrid-gap: var(
-      --__ac-hgrid-gap-xl,
-      var(--__ac-hgrid-gap-lg, var(--__ac-hgrid-gap-md, var(--__ac-hgrid-gap-sm, var(--__ac-hgrid-gap-xs))))
-    );
-  }
-}

package/stack.css

@@ -1,59 +0,0 @@
-.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))))
-    );
-  }
-}