@digdir/designsystemet-css 0.9.1-alpha.2 → 0.10.0-alpha.0

package/dist/tabs.css

@@ -1 +1 @@
-@layer fds.tabs{.fds-tabs__tab{--dsc-tabs__tab-bottom-border-color:transparent;align-items:center;background-color:initial;border:none;border-radius:0;box-sizing:border-box;color:var(--ds-color-neutral-text-subtle);cursor:pointer;display:flex;flex-direction:row;gap:var(--ds-spacing-1);justify-content:center;padding:var(--ds-spacing-2) var(--ds-spacing-3);position:relative;text-align:center}.fds-tabs__content{padding:var(--ds-spacing-5)}.fds-tabs--sm .fds-tabs__content,.fds-tabs--sm .fds-tabs__tab{font:var(--ds-typography-paragraph-short-sm)}.fds-tabs--md .fds-tabs__content,.fds-tabs--md .fds-tabs__tab{font:var(--ds-typography-paragraph-short-md)}.fds-tabs--lg .fds-tabs__content,.fds-tabs--lg .fds-tabs__tab{font:var(--ds-typography-paragraph-short-lg)}.fds-tabs--sm .fds-tabs__tab{padding:var(--ds-spacing-2) var(--ds-spacing-4)}.fds-tabs--md .fds-tabs__tab{padding:var(--ds-spacing-3) var(--ds-spacing-5)}.fds-tabs--lg .fds-tabs__tab{padding:var(--ds-spacing-4) var(--ds-spacing-6)}.fds-tabs--sm .fds-tabs__content{padding:var(--ds-spacing-4)}.fds-tabs--md .fds-tabs__content{padding:var(--ds-spacing-5)}.fds-tabs--lg .fds-tabs__content{padding:var(--ds-spacing-6)}@media (hover:hover) and (pointer:fine){.fds-tabs__tab:hover:not([aria-selected=true]){--dsc-tabs__tab-bottom-border-color:var(--ds-color-neutral-border-subtle);color:var(--ds-color-neutral-text-default)}}.fds-tabs__tab[aria-selected=true]{--dsc-tabs__tab-bottom-border-color:var(--ds-color-accent-base-default);color:var(--ds-color-accent-base-default)}.fds-tabs__tab:after{background-color:var(--dsc-tabs__tab-bottom-border-color);border-radius:var(--ds-border-radius-full);bottom:0;content:"";display:block;height:3px;left:0;position:absolute;width:100%}.fds-tabs__tablist{border-bottom:var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);display:flex;flex-direction:row}}
+@layer ds.tabs{.fds-tabs__tab{--dsc-tabs__tab-bottom-border-color:transparent;align-items:center;background-color:initial;border:none;border-radius:0;box-sizing:border-box;color:var(--ds-color-neutral-text-subtle);cursor:pointer;display:flex;flex-direction:row;gap:var(--ds-spacing-1);justify-content:center;padding:var(--ds-spacing-2) var(--ds-spacing-3);position:relative;text-align:center}.fds-tabs__content{padding:var(--ds-spacing-5)}.fds-tabs--sm .fds-tabs__content,.fds-tabs--sm .fds-tabs__tab{font:var(--ds-typography-paragraph-short-sm)}.fds-tabs--md .fds-tabs__content,.fds-tabs--md .fds-tabs__tab{font:var(--ds-typography-paragraph-short-md)}.fds-tabs--lg .fds-tabs__content,.fds-tabs--lg .fds-tabs__tab{font:var(--ds-typography-paragraph-short-lg)}.fds-tabs--sm .fds-tabs__tab{padding:var(--ds-spacing-2) var(--ds-spacing-4)}.fds-tabs--md .fds-tabs__tab{padding:var(--ds-spacing-3) var(--ds-spacing-5)}.fds-tabs--lg .fds-tabs__tab{padding:var(--ds-spacing-4) var(--ds-spacing-6)}.fds-tabs--sm .fds-tabs__content{padding:var(--ds-spacing-4)}.fds-tabs--md .fds-tabs__content{padding:var(--ds-spacing-5)}.fds-tabs--lg .fds-tabs__content{padding:var(--ds-spacing-6)}@media (hover:hover) and (pointer:fine){.fds-tabs__tab:hover:not([aria-selected=true]){--dsc-tabs__tab-bottom-border-color:var(--ds-color-neutral-border-subtle);color:var(--ds-color-neutral-text-default)}}.fds-tabs__tab[aria-selected=true]{--dsc-tabs__tab-bottom-border-color:var(--ds-color-accent-base-default);color:var(--ds-color-accent-text-subtle)}.fds-tabs__tab:focus{z-index:2}.fds-tabs__tab:after{background-color:var(--dsc-tabs__tab-bottom-border-color);border-radius:var(--ds-border-radius-full);bottom:0;content:"";display:block;height:3px;left:0;position:absolute;width:100%}.fds-tabs__tablist{border-bottom:var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);display:flex;flex-direction:row;position:relative}}

package/dist/tag.css

@@ -1 +1 @@
-@layer fds.tag{.fds-tag{--dsc-tag-background:var(--ds-color-neutral-background-subtle);--dsc-tag-color:var(--ds-color-neutral-text-default);align-items:center;background-color:var(--dsc-tag-background);border-radius:var(--ds-border-radius-sm);box-sizing:border-box;color:var(--dsc-tag-color);display:flex;min-height:var(--ds-sizing-8);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word}.fds-tag,.fds-tag--sm{padding:0 var(--ds-spacing-2)}.fds-tag--sm{min-height:var(--ds-sizing-7)}.fds-tag--md{min-height:var(--ds-sizing-8);padding:0 var(--ds-spacing-2)}.fds-tag--lg{min-height:var(--ds-sizing-9);padding:0 var(--ds-spacing-3)}.fds-tag--neutral{--dsc-tag-background:var(--ds-color-neutral-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default)}.fds-tag--info{--dsc-tag-background:var(--ds-color-info-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default)}.fds-tag--success{--dsc-tag-background:var(--ds-color-success-surface-default);--dsc-tag-color:var(--ds-color-success-text-default)}.fds-tag--warning{--dsc-tag-background:var(--ds-color-warning-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default)}.fds-tag--danger{--dsc-tag-background:var(--ds-color-danger-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default)}.fds-tag--brand1{--dsc-tag-background:var(--ds-color-brand1-surface-default);--dsc-tag-color:var(--ds-color-brand1-text-default)}.fds-tag--brand2{--dsc-tag-background:var(--ds-color-brand2-surface-default);--dsc-tag-color:var(--ds-color-brand2-text-default)}.fds-tag--brand3{--dsc-tag-background:var(--ds-color-brand3-surface-default);--dsc-tag-color:var(--ds-color-brand3-text-default)}}
+@layer ds.tag{.fds-tag{--dsc-tag-background:var(--ds-color-neutral-background-subtle);--dsc-tag-color:var(--ds-color-neutral-text-default);align-items:center;background-color:var(--dsc-tag-background);border-radius:var(--ds-border-radius-sm);box-sizing:border-box;color:var(--dsc-tag-color);display:flex;min-height:var(--ds-sizing-8);width:-webkit-max-content;width:-moz-max-content;width:max-content;word-break:break-word}.fds-tag,.fds-tag--sm{padding:0 var(--ds-spacing-2)}.fds-tag--sm{min-height:var(--ds-sizing-7)}.fds-tag--md{min-height:var(--ds-sizing-8);padding:0 var(--ds-spacing-2)}.fds-tag--lg{min-height:var(--ds-sizing-9);padding:0 var(--ds-spacing-3)}.fds-tag--neutral{--dsc-tag-background:var(--ds-color-neutral-surface-default);--dsc-tag-color:var(--ds-color-neutral-text-default)}.fds-tag--info{--dsc-tag-background:var(--ds-color-info-surface-default);--dsc-tag-color:var(--ds-color-info-text-default)}.fds-tag--success{--dsc-tag-background:var(--ds-color-success-surface-default);--dsc-tag-color:var(--ds-color-success-text-default)}.fds-tag--warning{--dsc-tag-background:var(--ds-color-warning-surface-default);--dsc-tag-color:var(--ds-color-warning-text-default)}.fds-tag--danger{--dsc-tag-background:var(--ds-color-danger-surface-default);--dsc-tag-color:var(--ds-color-danger-text-default)}.fds-tag--brand1{--dsc-tag-background:var(--ds-color-brand1-surface-default);--dsc-tag-color:var(--ds-color-brand1-text-default)}.fds-tag--brand2{--dsc-tag-background:var(--ds-color-brand2-surface-default);--dsc-tag-color:var(--ds-color-brand2-text-default)}.fds-tag--brand3{--dsc-tag-background:var(--ds-color-brand3-surface-default);--dsc-tag-color:var(--ds-color-brand3-text-default)}}

package/dist/textarea.css

@@ -1 +1 @@
-@layer fds.textarea{.fds-textarea{display:grid;gap:var(--ds-spacing-2)}.fds-textarea__readonly__icon{height:1.2em;width:1.2em}.fds-textarea__error-message:empty{display:none}.fds-textarea__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textarea__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.fds-textarea__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-md);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;min-height:2.5em;padding:var(--ds-spacing-3);position:relative;resize:vertical;width:100%}.fds-textarea--sm .fds-textarea__input{padding:var(--ds-spacing-2)}.fds-textarea--md .fds-textarea__input{padding:var(--ds-spacing-3)}.fds-textarea--lg .fds-textarea__input{padding:var(--ds-spacing-4)}.fds-textarea--disabled{opacity:var(--ds-opacity-disabled)}.fds-textarea--disabled .fds-textarea__input{cursor:not-allowed}.fds-textarea--readonly .fds-textarea__input{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.fds-textarea--error>.fds-textarea__input:not(:focus-visible){border-color:var(--ds-color-danger-border-default);box-shadow:inset 0 0 0 1px var(--ds-color-danger-border-default)}@media (hover:hover) and (pointer:fine){.fds-textarea__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--ds-color-accent-border-strong);box-shadow:inset 0 0 0 1px var(--ds-color-accent-border-strong)}}}
+@layer ds.textarea{.fds-textarea{display:grid;gap:var(--ds-spacing-2)}.fds-textarea__readonly-icon{height:1.2em;width:1.2em}.fds-textarea__error-message:empty{display:none}.fds-textarea__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textarea__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.fds-textarea__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-md);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;min-height:2.5em;padding:var(--ds-spacing-3);position:relative;resize:vertical;width:100%}.fds-textarea--sm .fds-textarea__input{padding:var(--ds-spacing-2)}.fds-textarea--md .fds-textarea__input{padding:var(--ds-spacing-3)}.fds-textarea--lg .fds-textarea__input{padding:var(--ds-spacing-4)}.fds-textarea:has(.fds-textarea__input:disabled){opacity:var(--ds-disabled-opacity)}.fds-textarea__input:disabled{cursor:not-allowed}.fds-textarea__input:-moz-read-only{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.fds-textarea__input:read-only{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.fds-textarea--error>.fds-textarea__input:not(:focus-visible){border-color:var(--ds-color-danger-border-default);box-shadow:inset 0 0 0 1px var(--ds-color-danger-border-default)}@media (hover:hover) and (pointer:fine){.fds-textarea__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--ds-color-accent-border-strong);box-shadow:inset 0 0 0 1px var(--ds-color-accent-border-strong)}}}

package/dist/textfield.css

@@ -1 +1 @@
-@layer fds.textfield{.fds-textfield{display:grid;gap:var(--ds-spacing-2)}.fds-textfield__adornment{background:var(--ds-color-neutral-background-subtle);border:1px solid var(--ds-color-neutral-border-strong);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--ds-color-neutral-border-strong);display:inline-block;padding:9px var(--ds-spacing-4)}.fds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-md);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;padding:0 var(--ds-spacing-3);position:relative;width:100%}.fds-textfield--disabled .fds-textfield__input{cursor:not-allowed}.fds-textfield--readonly .fds-textfield__input{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.fds-textfield__field{align-items:stretch;border-radius:var(--ds-border-radius-md);display:flex}.fds-textfield__field>:first-child{border-bottom-left-radius:var(--ds-border-radius-md);border-top-left-radius:var(--ds-border-radius-md)}.fds-textfield__field>:last-child{border-bottom-right-radius:var(--ds-border-radius-md);border-top-right-radius:var(--ds-border-radius-md)}.fds-textfield--sm .fds-textfield__adornment{padding:var(--ds-sizing-2) var(--ds-spacing-3)}.fds-textfield--md .fds-textfield__adornment{padding:.65rem var(--ds-spacing-4)}.fds-textfield--lg .fds-textfield__adornment{padding:.85rem var(--ds-spacing-5)}.fds-textfield--sm .fds-textfield__field{height:var(--ds-sizing-10)}.fds-textfield--md .fds-textfield__field{height:var(--ds-sizing-12)}.fds-textfield--lg .fds-textfield__field{height:var(--ds-sizing-14)}.fds-textfield--sm .fds-textfield__input{padding:0 var(--ds-spacing-2)}.fds-textfield--md .fds-textfield__input{padding:0 var(--ds-spacing-3)}.fds-textfield--lg .fds-textfield__input{padding:0 var(--ds-spacing-4)}.fds-textfield__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textfield__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.fds-textfield--disabled{opacity:var(--ds-opacity-disabled)}.fds-textfield--error .fds-textfield__input:not(:focus-visible){border-color:var(--ds-color-danger-border-default);box-shadow:inset 0 0 0 1px var(--ds-color-danger-border-default)}@media (hover:hover) and (pointer:fine){.fds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--ds-color-accent-border-strong);box-shadow:inset 0 0 0 1px var(--ds-color-accent-border-strong)}}.fds-textfield__input--with-prefix{border-bottom-left-radius:0;border-top-left-radius:0}.fds-textfield__input--with-suffix{border-bottom-right-radius:0;border-top-right-radius:0}.fds-textfield__prefix{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.fds-textfield__suffix{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.fds-textfield__readonly__icon{height:1.2em;width:1.2em}.fds-textfield__error-message:empty{display:none}}
+@layer ds.textfield{.fds-textfield{display:grid;gap:var(--ds-spacing-2)}.fds-textfield__adornment{background:var(--ds-color-neutral-background-subtle);border:1px solid var(--ds-color-neutral-border-strong);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--ds-color-neutral-border-strong);display:inline-block;padding:9px var(--ds-spacing-4)}.fds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--ds-color-neutral-background-default);border:1px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--ds-color-neutral-text-default);flex:0 1 auto;font:inherit;font-family:inherit;padding:0 var(--ds-spacing-3);position:relative;width:100%}.fds-textfield__input:disabled{cursor:not-allowed}.fds-textfield--readonly .fds-textfield__input{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.fds-textfield__field{align-items:stretch;border-radius:var(--ds-border-radius-md);display:flex}.fds-textfield__field>:first-child{border-bottom-left-radius:var(--ds-border-radius-md);border-top-left-radius:var(--ds-border-radius-md)}.fds-textfield__field>:last-child{border-bottom-right-radius:var(--ds-border-radius-md);border-top-right-radius:var(--ds-border-radius-md)}.fds-textfield--sm .fds-textfield__adornment{padding:var(--ds-sizing-2) var(--ds-spacing-3)}.fds-textfield--md .fds-textfield__adornment{padding:.65rem var(--ds-spacing-4)}.fds-textfield--lg .fds-textfield__adornment{padding:.85rem var(--ds-spacing-5)}.fds-textfield--sm .fds-textfield__field{height:var(--ds-sizing-10)}.fds-textfield--md .fds-textfield__field{height:var(--ds-sizing-12)}.fds-textfield--lg .fds-textfield__field{height:var(--ds-sizing-14)}.fds-textfield--sm .fds-textfield__input{padding:0 var(--ds-spacing-2)}.fds-textfield--md .fds-textfield__input{padding:0 var(--ds-spacing-3)}.fds-textfield--lg .fds-textfield__input{padding:0 var(--ds-spacing-4)}.fds-textfield__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textfield__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}.fds-textfield:has(.fds-textfield__input:disabled){opacity:var(--ds-disabled-opacity)}.fds-textfield--error .fds-textfield__input:not(:focus-visible){border-color:var(--ds-color-danger-border-default);box-shadow:inset 0 0 0 1px var(--ds-color-danger-border-default)}@media (hover:hover) and (pointer:fine){.fds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--ds-color-accent-border-strong);box-shadow:inset 0 0 0 1px var(--ds-color-accent-border-strong)}}.fds-textfield__input--with-prefix{border-bottom-left-radius:0;border-top-left-radius:0}.fds-textfield__input--with-suffix{border-bottom-right-radius:0;border-top-right-radius:0}.fds-textfield__prefix{border-bottom-right-radius:0;border-right:0;border-top-right-radius:0}.fds-textfield__suffix{border-bottom-left-radius:0;border-left:0;border-top-left-radius:0}.fds-textfield__readonly__icon{height:1.2em;width:1.2em}.fds-textfield__error-message:empty{display:none}}

package/dist/togglegroup.css

@@ -1 +1 @@
-@layer fds.togglegroup{.fds-togglegroup{background-color:var(--ds-color-neutral-background-default);border:var(--ds-color-neutral-border-strong) solid var(--ds-border-width-default);border-radius:var(--ds-border-radius-lg);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fds-togglegroup__content{display:inline-grid;gap:var(--ds-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:var(--ds-spacing-1)}.fds-togglegroup__input{display:none}.fds-togglegroup__item:focus-visible{z-index:1}}
+@layer ds.togglegroup{.fds-togglegroup{background-color:var(--ds-color-neutral-background-default);border:var(--ds-color-neutral-border-default) solid var(--ds-border-width-default);border-radius:var(--ds-border-radius-lg);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.fds-togglegroup__content{display:inline-grid;gap:var(--ds-spacing-1);grid-auto-columns:1fr;grid-auto-flow:column;padding:var(--ds-spacing-1)}.fds-togglegroup__input{display:none}.fds-togglegroup__item:focus-visible{z-index:1}}

package/dist/tooltip.css

@@ -1 +1 @@
-@layer fds.tooltip{.fds-tooltip{--dsc-tooltip-background:var(--ds-color-neutral-background-default);background:var(--dsc-tooltip-background);border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-text-default);font:var(--ds-typography-paragraph-xs);font-family:inherit;padding:var(--ds-spacing-1) var(--ds-spacing-2)}.fds-tooltip__arrow{fill:var(--dsc-tooltip-background)}}
+@layer ds.tooltip{.fds-tooltip{--dsc-tooltip-background:var(--ds-color-neutral-text-default);background:var(--dsc-tooltip-background);border-radius:var(--ds-border-radius-md);color:var(--ds-color-neutral-background-default);font:var(--ds-typography-paragraph-xs);font-family:inherit;padding:var(--ds-spacing-1) var(--ds-spacing-2)}.fds-tooltip__arrow{fill:var(--dsc-tooltip-background)}}

package/dist/utils.css

@@ -1 +1 @@
-@layer fds.utils{.fds-sr-only{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fds-focus:focus-visible{--dsc-focus-border-width:3px;box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-color-neutral-background-default);outline:var(--dsc-focus-border-width) solid var(--ds-color-neutral-text-default);outline-offset:var(--dsc-focus-border-width)}@layer animate-height{.fds-animate-height--closed,.fds-animate-height--openingOrClosing{overflow:hidden}.fds-animate-height--open .fds-animate-height__content{height:auto}.fds-animate-height--closed .fds-animate-height__content{display:none;height:0}}}
+@layer ds.utils{.fds-sr-only{border:0;clip:rect(0 0 0 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.fds-focus:focus-visible{--dsc-focus-border-width:3px;box-shadow:0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);outline:var(--dsc-focus-border-width) solid var(--ds-focus-outer);outline-offset:var(--dsc-focus-border-width)}@layer animate-height{.fds-animate-height--closed,.fds-animate-height--openingOrClosing{overflow:hidden}.fds-animate-height--open .fds-animate-height__content{height:auto}.fds-animate-height--closed .fds-animate-height__content{display:none;height:0}}}

package/divider.css

@@ -1,4 +1,4 @@
-@layer fds.divider {
+@layer ds.divider {
   .fds-divider {
     border: none;
     border-top: 1px solid;

package/dropdownmenu.css

@@ -1,4 +1,4 @@
-@layer fds.dropdownmenu {
+@layer ds.dropdownmenu {
   .fds-dropdownmenu {
     position: relative;
     padding: var(--ds-spacing-2);

package/error-message.css

@@ -1,4 +1,4 @@
-@layer fds.typography.error-message {
+@layer ds.typography.error-message {
   .fds-error-message {
     --dsc-bottom-spacing: var(--ds-spacing-5);
 

package/error-summary.css

@@ -1,4 +1,4 @@
-@layer fds.errorsummary {
+@layer ds.errorsummary {
   .fds-error-summary {
     padding: var(--ds-spacing-6) var(--ds-spacing-8);
     border-radius: var(--ds-border-radius-lg);

package/fieldset.css

@@ -1,4 +1,4 @@
-@layer fds.fieldset {
+@layer ds.fieldset {
   .fds-fieldset {
     margin: 0;
     padding: 0;
@@ -30,8 +30,8 @@
     width: 1.2em;
   }
 
-  .fds-fieldset--disabled .fds-fieldset__legend,
-  .fds-fieldset--disabled .fds-fieldset__description {
+  .fds-fieldset:disabled .fds-fieldset__legend,
+  .fds-fieldset:disabled .fds-fieldset__description {
     color: var(--ds-color-neutral-border-subtle);
   }
 

package/heading.css

@@ -1,4 +1,4 @@
-@layer fds.typography.heading {
+@layer ds.typography.heading {
   .fds-heading {
     --dsc-bottom-spacing: var(--ds-spacing-6);
 

package/helptext.css

@@ -1,4 +1,4 @@
-@layer fds.helptext {
+@layer ds.helptext {
   .fds-helptext__button {
     background-color: transparent;
     border-radius: 50px;

package/index.css

@@ -1,21 +1,21 @@
 @charset "UTF-8";
 
-@layer fds.typography, fds.utils, fds.box, fds.btn;
+@layer ds.typography, ds.utils, ds.box, ds.btn;
 
 /** Import order defines ordinal specificity for layers */
+@import url('./label.css');
+@import url('./heading.css');
+@import url('./paragraph.css');
+@import url('./ingress.css');
 @import url('./button.css');
 @import url('./utils.css');
 @import url('./box.css');
 @import url('./alert.css');
-@import url('./ingress.css');
 @import url('./skiplink.css');
 @import url('./accordion.css');
 @import url('./switch.css');
 @import url('./checkbox.css');
 @import url('./error-message.css');
-@import url('./label.css');
-@import url('./heading.css');
-@import url('./paragraph.css');
 @import url('./radio.css');
 @import url('./search.css');
 @import url('./native-select.css');

package/ingress.css

@@ -1,4 +1,4 @@
-@layer fds.typography.ingress {
+@layer ds.typography.ingress {
   .fds-ingress {
     --dsc-bottom-spacing: var(--ds-spacing-5);
 

package/label.css

@@ -1,4 +1,4 @@
-@layer fds.typography.label {
+@layer ds.typography.label {
   .fds-label {
     --dsc-bottom-spacing: var(--ds-spacing-1);
 

package/link.css

@@ -1,4 +1,4 @@
-@layer fds.link {
+@layer ds.link {
   .fds-link {
     position: relative;
     color: var(--ds-color-accent-text-subtle);
@@ -22,8 +22,8 @@
   }
 
   .fds-link:focus-visible {
-    color: var(--ds-color-accent-background-default);
-    background: var(--ds-color-neutral-text-default);
+    color: var(--ds-color-accent-text-default);
+    background: var(--ds-color-neutral-surface-default);
     outline: none;
   }
 

package/list.css

@@ -1,4 +1,4 @@
-@layer fds.list {
+@layer ds.list {
   .fds-list--sm {
     padding-left: var(--ds-spacing-4);
   }

package/modal.css

@@ -1,4 +1,4 @@
-@layer fds.modal {
+@layer ds.modal {
   .fds-modal {
     padding: 0;
     width: 100%;

package/native-select.css

@@ -1,18 +1,35 @@
-@layer fds.nativeselect {
+@layer ds.nativeselect {
+  .fds-native-select__wrapper {
+    position: relative;
+    display: grid;
+    flex: 0 1 auto;
+  }
+
+  /* chevron for native select */
+  .fds-native-select__wrapper::after {
+    content: '';
+    position: absolute;
+    background-color: var(--ds-color-neutral-text-default);
+    pointer-events: none;
+    top: 50%;
+    right: var(--ds-spacing-2);
+    transform: translateY(-50%);
+    width: 1.5em;
+    height: 1.5em;
+    mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
+    mask-size: contain;
+  }
+
   .fds-native-select {
     position: relative;
     font: inherit;
     font-family: inherit;
     box-sizing: border-box;
-    flex: 0 1 auto;
     padding: 0 var(--ds-spacing-2);
     border: solid 1px var(--ds-color-neutral-border-default);
     border-radius: var(--ds-border-radius-md);
-    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
     background-color: var(--ds-color-neutral-background-default);
-    background-repeat: no-repeat;
-    background-position: right var(--ds-spacing-2) center;
-    background-size: 1.5em 1.5em;
+    color: var(--ds-color-neutral-text-default);
     appearance: none;
   }
 
@@ -50,11 +67,11 @@
     gap: var(--ds-spacing-2);
   }
 
-  .fds-native-select--disabled {
-    opacity: var(--ds-opacity-disabled);
+  .fds-native-select--container:has(.fds-native-select:disabled) {
+    opacity: var(--ds-disabled-opacity);
   }
 
-  .fds-native-select--disabled .fds-native-select {
+  .fds-native-select:disabled {
     cursor: not-allowed;
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "0.9.1-alpha.2",
+  "version": "0.10.0-alpha.0",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
@@ -39,5 +39,5 @@
     "postcss-import": "^16.0.1",
     "rimraf": "^5.0.5"
   },
-  "gitHead": "ba926641253b59911a9b8f1b9e94b394f998b7e3"
+  "gitHead": "d7e07e452da4267f1c2d28ba3e8b6f7acd0d4cb1"
 }

package/pagination.css

@@ -1,4 +1,4 @@
-@layer fds.pagination {
+@layer ds.pagination {
   .fds-pagination {
     --dsc-pagination-listitem-margin: var(--ds-spacing-4);
     --dsc-pagination-ellipsis-width: var(--ds-sizing-12);

package/paragraph.css

@@ -1,4 +1,4 @@
-@layer fds.typography.paragraph {
+@layer ds.typography.paragraph {
   .fds-paragraph {
     --dsc-bottom-spacing: var(--ds-spacing-5);
 

package/popover.css

@@ -1,4 +1,4 @@
-@layer fds.fds-popover {
+@layer ds.fds-popover {
   .fds-popover {
     --dsc-popover-border: 1px solid;
     --dsc-popover-background: var(--ds-color-neutral-background-default);
@@ -33,18 +33,21 @@
     --dsc-popover-background: var(--ds-color-info-surface-default);
 
     border-color: var(--ds-color-info-border-default);
+    color: var(--ds-color-info-text-default);
   }
 
   .fds-popover--warning {
     --dsc-popover-background: var(--ds-color-warning-surface-default);
 
     border-color: var(--ds-color-warning-border-default);
+    color: var(--ds-color-warning-text-default);
   }
 
   .fds-popover--danger {
     --dsc-popover-background: var(--ds-color-danger-surface-default);
 
     border-color: var(--ds-color-danger-border-default);
+    color: var(--ds-color-danger-text-default);
   }
 
   .fds-popover__arrow {

package/radio.css

@@ -1,12 +1,11 @@
-@layer fds.radio {
+@layer ds.radio {
   .fds-radio {
     --dsc-radio-size: var(--ds-spacing-5);
     --dsc-radio-focus-border-width: 3px;
     --dsc-radio-background: var(--ds-color-neutral-background-default);
-    --dsc-radio-border-color: var(--ds-color-neutral-border-default);
+    --dsc-radio-border-color: var(--ds-color-neutral-border-strong);
     --dsc-radio-border__hover--size: calc(var(--ds-spacing-3) / 2);
-    --dsc-radio-border__hover: 0 0 0 var(--dsc-radio-border__hover--size) var(--ds-color-accent-border-subtle);
-    --dsc-radio-focus-color: var(--ds-color-neutral-text-default);
+    --dsc-radio-border__hover: 0 0 0 var(--dsc-radio-border__hover--size) var(--ds-color-accent-surface-hover);
 
     display: grid;
   }
@@ -61,35 +60,34 @@
     grid-column: 2;
   }
 
-  .fds-radio--disabled > .fds-radio__input,
-  .fds-radio--disabled > .fds-radio__label,
-  .fds-radio--disabled > .fds-radio__input::before {
-    cursor: not-allowed;
-  }
-
-  .fds-radio--disabled > .fds-radio__label,
-  .fds-radio--disabled > .fds-radio__input,
-  .fds-radio--disabled > .fds-radio__description {
-    opacity: var(--ds-opacity-disabled);
-  }
-
   .fds-radio--readonly > .fds-radio__input,
   .fds-radio--readonly > .fds-radio__label,
   .fds-radio--readonly > .fds-radio__input::before {
     cursor: default;
   }
 
+  .fds-radio:has(.fds-radio__input:disabled) > .fds-radio__description {
+    opacity: var(--ds-disabled-opacity);
+  }
+
+  .fds-radio__input:disabled,
+  .fds-radio__input:disabled::before,
+  .fds-radio:has(.fds-radio__input:disabled) > .fds-radio__label {
+    cursor: not-allowed;
+    opacity: var(--fds-opacity-disabled);
+  }
+
   .fds-radio__input:focus-visible {
     outline-offset: var(--ds-spacing-1);
-    outline: var(--dsc-radio-focus-border-width) solid var(--dsc-radio-focus-color);
+    outline: var(--dsc-radio-focus-border-width) solid var(--ds-focus-outer);
     box-shadow:
       inset 0 0 0 2px var(--dsc-radio-border-color),
-      inset 0 0 0 var(--dsc-radio-focus-border-width) var(--ds-color-neutral-background-default),
+      inset 0 0 0 var(--dsc-radio-focus-border-width) var(--ds-focus-inner),
       inset 0 0 0 6px var(--dsc-radio-background);
   }
 
   .fds-radio__input:checked {
-    --dsc-radio-border-color: var(--ds-color-accent-border-strong);
+    --dsc-radio-border-color: var(--ds-color-accent-base-default);
 
     background: var(--dsc-radio-border-color);
   }
@@ -116,12 +114,12 @@
   /* Only use hover for non-touch devices to prevent sticky-hovering
     "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
   @media (hover: hover) and (pointer: fine) {
-    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__label:hover,
-    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover + .fds-radio__label {
+    .fds-radio:not(.fds-radio--readonly) > .fds-radio__label:hover:not(:disabled),
+    .fds-radio:not(.fds-radio--readonly) > .fds-radio__input:hover:not(:disabled) + .fds-radio__label {
       color: var(--ds-color-accent-text-subtle);
     }
 
-    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:not(:checked) {
+    .fds-radio:not(.fds-radio--readonly) > .fds-radio__input:hover:not(:checked, :disabled) {
       --dsc-radio-border-color: var(--ds-color-accent-border-strong);
 
       box-shadow:
@@ -129,9 +127,7 @@
         inset 0 0 0 2px var(--dsc-radio-border-color);
     }
 
-    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:checked {
-      --dsc-radio-border-color: var(--ds-color-accent-border-strong);
-
+    .fds-radio:not(.fds-radio--readonly) > .fds-radio__input:hover:checked:not(:disabled) {
       box-shadow:
         var(--dsc-radio-border__hover),
         inset 0 0 0 2px var(--dsc-radio-border-color),

package/search.css

@@ -1,4 +1,4 @@
-@layer fds.search {
+@layer ds.search {
   .fds-search {
     display: inline-grid;
     width: 100%;
@@ -61,6 +61,8 @@
     width: 100%;
     appearance: none;
     padding: 0 var(--ds-spacing-3);
+    background: var(--ds-color-neutral-background-default);
+    color: var(--ds-color-neutral-text-default);
     border: solid 1px var(--ds-color-neutral-border-default);
     border-radius: var(--ds-border-radius-md);
   }
@@ -78,8 +80,8 @@
     z-index: 1;
   }
 
-  .fds-search--disabled {
-    opacity: var(--ds-opacity-disabled);
+  .fds-search:has(.fds-search__input:disabled) {
+    opacity: var(--ds-disabled-opacity);
   }
 
   .fds-search__search-button {

package/skeleton.css

@@ -1,4 +1,4 @@
-@layer fds.skeleton {
+@layer ds.skeleton {
   .fds-skeleton {
     --dsc-skeleton-animation-duration: 0.8s;
 

package/skiplink.css

@@ -1,4 +1,4 @@
-@layer fds.skiplink {
+@layer ds.skiplink {
   .fds-skiplink:focus {
     display: block;
     outline: 0;

package/spinner.css

@@ -1,4 +1,4 @@
-@layer fds.spinner {
+@layer ds.spinner {
   .fds-spinner {
     animation: fds-spinner-rotate-animation linear infinite;
     animation-duration: 2s;
@@ -24,11 +24,11 @@
     }
   }
 
-  .fds-spinner--default .fds-spinner__circle {
+  .fds-spinner--neutral .fds-spinner__circle {
     stroke: var(--ds-color-neutral-border-default);
   }
 
-  .fds-spinner--interaction .fds-spinner__circle {
+  .fds-spinner--accent .fds-spinner__circle {
     stroke: var(--ds-color-accent-base-default);
   }
 

package/switch.css

@@ -1,9 +1,10 @@
-@layer fds.switch {
+@layer ds.switch {
   .fds-switch {
     --dsc-switch--transition: 200ms;
     --dsc-switch-height: 1.75rem;
     --dsc-switch-focus-border-width: 3px;
     --dsc-switch-check_color: transparent;
+    --dsc-switch-thumb-background-color: var(--ds-color-neutral-background-default);
 
     position: relative;
   }
@@ -87,18 +88,6 @@
     cursor: default;
   }
 
-  .fds-switch--disabled > .fds-switch__input,
-  .fds-switch--disabled > .fds-switch__label,
-  .fds-switch--disabled > .fds-switch__track {
-    cursor: not-allowed;
-  }
-
-  .fds-switch--disabled > .fds-switch__label,
-  .fds-switch--disabled > .fds-switch__track,
-  .fds-switch--disabled > .fds-switch__description {
-    opacity: var(--ds-opacity-disabled);
-  }
-
   .fds-switch--readonly > .fds-switch__description {
     margin-left: var(--ds-spacing-1);
   }
@@ -156,10 +145,20 @@
     margin-right: 0;
   }
 
+  .fds-switch__input:disabled,
+  .fds-switch:has(.fds-switch__input:disabled) > .fds-switch__label {
+    cursor: not-allowed;
+  }
+
+  .fds-switch:has(.fds-switch__input:disabled) > .fds-switch__label,
+  .fds-switch:has(.fds-switch__input:disabled) > .fds-switch__description {
+    opacity: var(--ds-disabled-opacity);
+  }
+
   .fds-switch__input:focus-visible + .fds-switch__label .fds-switch__track {
-    outline: var(--dsc-switch-focus-border-width) solid var(--ds-color-neutral-text-default);
-    outline-offset: 3px;
-    box-shadow: 0 0 0 var(--dsc-switch-focus-border-width) var(--ds-color-neutral-background-default);
+    outline: var(--dsc-switch-focus-border-width) solid var(--ds-focus-outer);
+    outline-offset: var(--dsc-switch-focus-border-width);
+    box-shadow: 0 0 0 var(--dsc-switch-focus-border-width) var(--ds-focus-inner);
   }
 
   .fds-switch__input:not([readonly]):checked + .fds-switch__label .fds-switch__track {
@@ -172,12 +171,13 @@
     height: var(--dsc-switch-height);
     width: var(--dsc-switch-height);
     border-radius: var(--ds-border-radius-full);
-    background-color: var(--ds-color-neutral-background-default);
+    background-color: var(--dsc-switch-thumb-background-color);
     transition: transform var(--dsc-switch--transition) ease;
   }
 
   .fds-switch__input:checked + .fds-switch__label .fds-switch__track .fds-switch__thumb {
     --dsc-switch-check_color: var(--ds-color-accent-base-default);
+    --dsc-switch-thumb-background-color: var(--ds-color-accent-contrast-default);
 
     transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height)) * 1.2));
   }
@@ -212,7 +212,7 @@
     }
 
     .fds-switch__input:not([readonly], :disabled):hover + .fds-switch__label {
-      color: var(--ds-color-accent-border-strong);
+      color: var(--ds-color-accent-text-subtle);
     }
 
     .fds-switch__input:not(:disabled, [readonly]):checked:hover + .fds-switch__label .fds-switch__track > .fds-switch__thumb {
@@ -221,8 +221,8 @@
       transform: translateX(calc((var(--dsc-switch-width) - var(--dsc-switch-height))));
     }
 
-    .input:not(:checked, :disabled, [readonly]):hover + .label .track {
-      background-color: var([delete]);
+    .fds-switch__input:not(:checked, :disabled, [readonly]):hover + .fds-switch__label .fds-switch__track {
+      background-color: var(--ds-color-neutral-border-strong);
     }
 
     .fds-switch__input:not(:disabled, [readonly]):checked:hover + .fds-switch__label .fds-switch__track {

package/table.css

@@ -1,4 +1,4 @@
-@layer fds.table {
+@layer ds.table {
   .fds-table {
     --dsc-table-padding: 0;
     --dsc-table-border-radius: var(--ds-border-radius-md);

package/tabs.css

@@ -1,4 +1,4 @@
-@layer fds.tabs {
+@layer ds.tabs {
   .fds-tabs__tab {
     --dsc-tabs__tab-bottom-border-color: transparent;
 
@@ -72,7 +72,11 @@
   .fds-tabs__tab[aria-selected='true'] {
     --dsc-tabs__tab-bottom-border-color: var(--ds-color-accent-base-default);
 
-    color: var(--ds-color-accent-base-default);
+    color: var(--ds-color-accent-text-subtle);
+  }
+
+  .fds-tabs__tab:focus {
+    z-index: 2;
   }
 
   .fds-tabs__tab::after {
@@ -91,5 +95,6 @@
     display: flex;
     flex-direction: row;
     border-bottom: var(--ds-border-width-default) solid var(--ds-color-neutral-border-subtle);
+    position: relative;
   }
 }

package/tag.css

@@ -1,4 +1,4 @@
-@layer fds.tag {
+@layer ds.tag {
   .fds-tag {
     --dsc-tag-background: var(--ds-color-neutral-background-subtle);
     --dsc-tag-color: var(--ds-color-neutral-text-default);
@@ -37,7 +37,7 @@
 
   .fds-tag--info {
     --dsc-tag-background: var(--ds-color-info-surface-default);
-    --dsc-tag-color: var(--ds-color-neutral-text-default);
+    --dsc-tag-color: var(--ds-color-info-text-default);
   }
 
   .fds-tag--success {
@@ -47,12 +47,12 @@
 
   .fds-tag--warning {
     --dsc-tag-background: var(--ds-color-warning-surface-default);
-    --dsc-tag-color: var(--ds-color-neutral-text-default);
+    --dsc-tag-color: var(--ds-color-warning-text-default);
   }
 
   .fds-tag--danger {
     --dsc-tag-background: var(--ds-color-danger-surface-default);
-    --dsc-tag-color: var(--ds-color-neutral-text-default);
+    --dsc-tag-color: var(--ds-color-danger-text-default);
   }
 
   .fds-tag--brand1 {