@digdir/designsystemet-css 0.8.0 → 0.9.0

package/dist/textfield.css

@@ -1 +1 @@
-@layer fds.textfield{.fds-textfield{display:grid;gap:var(--fds-spacing-2)}.fds-textfield__adornment{background:var(--fds-semantic-surface-neutral-subtle);border:1px solid var(--fds-semantic-border-neutral-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;color:var(--fds-semantic-border-neutral-default);display:inline-block;padding:9px var(--fds-spacing-4)}.fds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;padding:0 var(--fds-spacing-3);position:relative;width:100%}.fds-textfield--disabled .fds-textfield__input{cursor:not-allowed}.fds-textfield--readonly .fds-textfield__input{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textfield__field{align-items:stretch;border-radius:var(--fds-border_radius-medium);display:flex}.fds-textfield__field>:first-child{border-bottom-left-radius:var(--fds-border_radius-medium);border-top-left-radius:var(--fds-border_radius-medium)}.fds-textfield__field>:last-child{border-bottom-right-radius:var(--fds-border_radius-medium);border-top-right-radius:var(--fds-border_radius-medium)}.fds-textfield--small .fds-textfield__adornment{padding:var(--fds-sizing-2) var(--fds-spacing-3)}.fds-textfield--medium .fds-textfield__adornment{padding:.65rem var(--fds-spacing-4)}.fds-textfield--large .fds-textfield__adornment{padding:.85rem var(--fds-spacing-5)}.fds-textfield--small .fds-textfield__field{height:var(--fds-sizing-10)}.fds-textfield--medium .fds-textfield__field{height:var(--fds-sizing-12)}.fds-textfield--large .fds-textfield__field{height:var(--fds-sizing-14)}.fds-textfield--small .fds-textfield__input{padding:0 var(--fds-spacing-2)}.fds-textfield--medium .fds-textfield__input{padding:0 var(--fds-spacing-3)}.fds-textfield--large .fds-textfield__input{padding:0 var(--fds-spacing-4)}.fds-textfield__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textfield__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-textfield--disabled{opacity:var(--fds-opacity-disabled)}.fds-textfield--error .fds-textfield__input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}.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 fds.textfield{.fds-textfield{display:grid;gap:var(--fds-spacing-2)}.fds-textfield__adornment{background:var(--fds-semantic-surface-neutral-subtle);border:1px solid var(--fds-semantic-border-neutral-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;color:var(--fds-semantic-border-neutral-default);display:inline-block;padding:9px var(--fds-spacing-4)}.fds-textfield__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:1px solid var(--fds-semantic-border-input-default);border-radius:var(--fds-border_radius-medium);box-sizing:border-box;flex:0 1 auto;font:inherit;font-family:inherit;padding:0 var(--fds-spacing-3);position:relative;width:100%}.fds-textfield--disabled .fds-textfield__input{cursor:not-allowed}.fds-textfield--readonly .fds-textfield__input{background:var(--fds-semantic-surface-neutral-subtle);border-color:var(--fds-semantic-border-neutral-default)}.fds-textfield__field{align-items:stretch;border-radius:var(--fds-border_radius-medium);display:flex}.fds-textfield__field>:first-child{border-bottom-left-radius:var(--fds-border_radius-medium);border-top-left-radius:var(--fds-border_radius-medium)}.fds-textfield__field>:last-child{border-bottom-right-radius:var(--fds-border_radius-medium);border-top-right-radius:var(--fds-border_radius-medium)}.fds-textfield--sm .fds-textfield__adornment{padding:var(--fds-sizing-2) var(--fds-spacing-3)}.fds-textfield--md .fds-textfield__adornment{padding:.65rem var(--fds-spacing-4)}.fds-textfield--lg .fds-textfield__adornment{padding:.85rem var(--fds-spacing-5)}.fds-textfield--sm .fds-textfield__field{height:var(--fds-sizing-10)}.fds-textfield--md .fds-textfield__field{height:var(--fds-sizing-12)}.fds-textfield--lg .fds-textfield__field{height:var(--fds-sizing-14)}.fds-textfield--sm .fds-textfield__input{padding:0 var(--fds-spacing-2)}.fds-textfield--md .fds-textfield__input{padding:0 var(--fds-spacing-3)}.fds-textfield--lg .fds-textfield__input{padding:0 var(--fds-spacing-4)}.fds-textfield__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--fds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.fds-textfield__description{color:var(--fds-semantic-text-neutral-subtle);margin-top:calc(var(--fds-spacing-2)*-1)}.fds-textfield--disabled{opacity:var(--fds-opacity-disabled)}.fds-textfield--error .fds-textfield__input:not(:focus-visible){border-color:var(--fds-semantic-border-danger-default);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-danger-default)}@media (hover:hover) and (pointer:fine){.fds-textfield__input:not(:focus-visible,:disabled,[aria-disabled]):hover{border-color:var(--fds-semantic-border-input-hover);box-shadow:inset 0 0 0 1px var(--fds-semantic-border-input-hover)}}.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/dropdownmenu.css

@@ -10,17 +10,17 @@
     background-color: var(--fds-semantic-background-default);
   }
 
-  .fds-dropdownmenu--small {
+  .fds-dropdownmenu--sm {
     min-width: 240px;
     padding: var(--fds-spacing-2);
   }
 
-  .fds-dropdownmenu--medium {
+  .fds-dropdownmenu--md {
     min-width: 260px;
     padding: var(--fds-spacing-3) var(--fds-spacing-2);
   }
 
-  .fds-dropdownmenu--large {
+  .fds-dropdownmenu--lg {
     min-width: 280px;
     padding: var(--fds-spacing-4) var(--fds-spacing-2);
   }

package/error-message.css

@@ -13,28 +13,28 @@
     margin-bottom: var(--fdsc-bottom-spacing);
   }
 
-  .fds-error-message--large {
+  .fds-error-message--lg {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-error_message-large);
     font-family: inherit;
   }
 
-  .fds-error-message--medium {
+  .fds-error-message--md {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-error_message-medium);
     font-family: inherit;
   }
 
-  .fds-error-message--small {
+  .fds-error-message--sm {
     --fdsc-bottom-spacing: var(--fds-spacing-4);
 
     font: var(--fds-typography-error_message-small);
     font-family: inherit;
   }
 
-  .fds-error-message--xsmall {
+  .fds-error-message--xs {
     --fdsc-bottom-spacing: var(--fds-spacing-3);
 
     font: var(--fds-typography-error_message-xsmall);

package/heading.css

@@ -10,56 +10,56 @@
     margin-bottom: var(--fdsc-bottom-spacing);
   }
 
-  .fds-heading--3xlarge {
+  .fds-heading--3xl {
     --fdsc-bottom-spacing: var(--fds-spacing-8);
 
     font: var(--fds-typography-heading-3xlarge);
     font-family: inherit;
   }
 
-  .fds-heading--2xlarge {
+  .fds-heading--2xl {
     --fdsc-bottom-spacing: var(--fds-spacing-7);
 
     font: var(--fds-typography-heading-2xlarge);
     font-family: inherit;
   }
 
-  .fds-heading--xlarge {
+  .fds-heading--xl {
     --fdsc-bottom-spacing: var(--fds-spacing-6);
 
     font: var(--fds-typography-heading-xlarge);
     font-family: inherit;
   }
 
-  .fds-heading--large {
+  .fds-heading--lg {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-heading-large);
     font-family: inherit;
   }
 
-  .fds-heading--medium {
+  .fds-heading--md {
     --fdsc-bottom-spacing: var(--fds-spacing-4);
 
     font: var(--fds-typography-heading-medium);
     font-family: inherit;
   }
 
-  .fds-heading--small {
+  .fds-heading--sm {
     --fdsc-bottom-spacing: var(--fds-spacing-3);
 
     font: var(--fds-typography-heading-small);
     font-family: inherit;
   }
 
-  .fds-heading--xsmall {
+  .fds-heading--xs {
     --fdsc-bottom-spacing: var(--fds-spacing-2);
 
     font: var(--fds-typography-heading-xsmall);
     font-family: inherit;
   }
 
-  .fds-heading--xxsmall {
+  .fds-heading--2xs {
     --fdsc-bottom-spacing: var(--fds-spacing-1);
 
     font: var(--fds-typography-heading-xxsmall);

package/helptext.css

@@ -41,17 +41,17 @@
     max-width: 700px;
   }
 
-  .fds-helptext--small .fds-helptext__icon {
+  .fds-helptext--sm .fds-helptext__icon {
     width: var(--fds-sizing-6);
     height: var(--fds-sizing-6);
   }
 
-  .fds-helptext--medium .fds-helptext__icon {
+  .fds-helptext--md .fds-helptext__icon {
     width: var(--fds-sizing-7);
     height: var(--fds-sizing-7);
   }
 
-  .fds-helptext--large .fds-helptext__icon {
+  .fds-helptext--lg .fds-helptext__icon {
     width: var(--fds-sizing-8);
     height: var(--fds-sizing-8);
   }

package/index.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-@layer fds.typography, fds.utils, fds.btn;
+@layer fds.typography, fds.utils, fds.box, fds.btn;
 
 /** Import order defines ordinal specificity for layers */
 @import url('./button.css');

package/ingress.css

@@ -10,28 +10,28 @@
     margin-bottom: var(--fdsc-bottom-spacing);
   }
 
-  .fds-ingress--medium {
+  .fds-ingress--md {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-ingress-medium);
     font-family: inherit;
   }
 
-  .fds-ingress--large {
+  .fds-ingress--lg {
     --fdsc-bottom-spacing: var(--fds-spacing-6);
 
     font: var(--fds-typography-ingress-large);
     font-family: inherit;
   }
 
-  .fds-ingress--small {
+  .fds-ingress--sm {
     --fdsc-bottom-spacing: var(--fds-spacing-7);
 
     font: var(--fds-typography-ingress-small);
     font-family: inherit;
   }
 
-  .fds-ingress--xsmall {
+  .fds-ingress--xs {
     --fdsc-bottom-spacing: var(--fds-spacing-8);
 
     font: var(--fds-typography-ingress-xsmall);

package/label.css

@@ -12,22 +12,22 @@
     margin-bottom: var(--fdsc-bottom-spacing);
   }
 
-  .fds-label--large {
+  .fds-label--lg {
     font: var(--fds-typography-label-large);
     font-family: inherit;
   }
 
-  .fds-label--medium {
+  .fds-label--md {
     font: var(--fds-typography-label-medium);
     font-family: inherit;
   }
 
-  .fds-label--small {
+  .fds-label--sm {
     font: var(--fds-typography-label-small);
     font-family: inherit;
   }
 
-  .fds-label--xsmall {
+  .fds-label--xs {
     font: var(--fds-typography-label-xsmall);
     font-family: inherit;
   }

package/list.css

@@ -1,10 +1,10 @@
 @layer fds.list {
-  .fds-list--small {
+  .fds-list--sm {
     padding-left: var(--fds-spacing-4);
   }
 
-  .fds-list--medium,
-  .fds-list--large {
+  .fds-list--md,
+  .fds-list--lg {
     padding-left: var(--fds-spacing-6);
   }
 

package/native-select.css

@@ -27,19 +27,19 @@
     background-image: none;
   }
 
-  .fds-native-select--small {
+  .fds-native-select--sm {
     padding: 0 var(--fds-spacing-2);
     padding-right: var(--fds-spacing-8);
     height: var(--fds-sizing-10);
   }
 
-  .fds-native-select--medium {
+  .fds-native-select--md {
     padding: 0 var(--fds-spacing-3);
     padding-right: var(--fds-spacing-10);
     height: var(--fds-sizing-12);
   }
 
-  .fds-native-select--large {
+  .fds-native-select--lg {
     padding: 0 var(--fds-spacing-4);
     padding-right: var(--fds-spacing-12);
     height: var(--fds-sizing-14);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "0.8.0",
+  "version": "0.9.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": "878b8bbe53351879efff228b0b8c11eeca8c23bb"
+  "gitHead": "1e5c96601e637b59585362632c539dfc214b8270"
 }

package/pagination.css

@@ -16,15 +16,15 @@
     visibility: hidden;
   }
 
-  .fds-pagination--small {
+  .fds-pagination--sm {
     --fds-pagination-chevron-margin: var(--fds-spacing-2);
   }
 
-  .fds-pagination--medium {
+  .fds-pagination--md {
     --fds-pagination-chevron-margin: var(--fds-spacing-2);
   }
 
-  .fds-pagination--large {
+  .fds-pagination--lg {
     --fds-pagination-chevron-margin: var(--fds-spacing-2);
   }
 
@@ -41,17 +41,17 @@
     margin-right: var(--fds-pagination-listitem-margin);
   }
 
-  .fds-pagination--small .fds-pagination__item {
+  .fds-pagination--sm .fds-pagination__item {
     --fds-pagination-listitem-margin: var(--fds-spacing-2);
     --fds-pagination-ellipsis-width: var(--fds-sizing-10);
   }
 
-  .fds-pagination--medium .fds-pagination__item {
+  .fds-pagination--md .fds-pagination__item {
     --fds-pagination-listitem-margin: var(--fds-spacing-4);
     --fds-pagination-ellipsis-width: var(--fds-sizing-12);
   }
 
-  .fds-pagination--large .fds-pagination__item {
+  .fds-pagination--lg .fds-pagination__item {
     --fds-pagination-listitem-margin: var(--fds-spacing-6);
     --fds-pagination-ellipsis-width: var(--fds-sizing-14);
   }

package/paragraph.css

@@ -10,73 +10,73 @@
     margin-bottom: var(--fdsc-bottom-spacing);
   }
 
-  .fds-paragraph--large {
+  .fds-paragraph--lg {
     --fdsc-bottom-spacing: var(--fds-spacing-6);
 
     font: var(--fds-typography-paragraph-large);
     font-family: inherit;
   }
 
-  .fds-paragraph--large.fds-paragraph--short {
+  .fds-paragraph--lg.fds-paragraph--short {
     font: var(--fds-typography-paragraph-short-large);
     font-family: inherit;
   }
 
-  .fds-paragraph--large.fds-paragraph--long {
+  .fds-paragraph--lg.fds-paragraph--long {
     line-height: var(--fds-typography-paragraph-long-large);
   }
 
-  .fds-paragraph--medium {
+  .fds-paragraph--md {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-paragraph-medium);
     font-family: inherit;
   }
 
-  .fds-paragraph--medium.fds-paragraph--short {
+  .fds-paragraph--md.fds-paragraph--short {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 
     font: var(--fds-typography-paragraph-short-medium);
     font-family: inherit;
   }
 
-  .fds-paragraph--medium.fds-paragraph--long {
+  .fds-paragraph--md.fds-paragraph--long {
     line-height: var(--fds-typography-paragraph-long-medium);
   }
 
-  .fds-paragraph--small {
+  .fds-paragraph--sm {
     --fdsc-bottom-spacing: var(--fds-spacing-4);
 
     font: var(--fds-typography-paragraph-small);
     font-family: inherit;
   }
 
-  .fds-paragraph--small.fds-paragraph--short {
+  .fds-paragraph--sm.fds-paragraph--short {
     --fdsc-bottom-spacing: var(--fds-spacing-4);
 
     font: var(--fds-typography-paragraph-short-small);
     font-family: inherit;
   }
 
-  .fds-paragraph--small.fds-paragraph--long {
+  .fds-paragraph--sm.fds-paragraph--long {
     line-height: var(--fds-typography-paragraph-long-small);
   }
 
-  .fds-paragraph--xsmall {
+  .fds-paragraph--xs {
     --fdsc-bottom-spacing: var(--fds-spacing-3);
 
     font: var(--fds-typography-paragraph-xsmall);
     font-family: inherit;
   }
 
-  .fds-paragraph--xsmall.fds-paragraph--short {
+  .fds-paragraph--xs.fds-paragraph--short {
     --fdsc-bottom-spacing: var(--fds-spacing-3);
 
     font: var(--fds-typography-paragraph-short-xsmall);
     font-family: inherit;
   }
 
-  .fds-paragraph--xsmall.fds-paragraph--long {
+  .fds-paragraph--xs.fds-paragraph--long {
     line-height: var(--fds-typography-paragraph-long-xsmall);
   }
 }

package/popover.css

@@ -11,15 +11,15 @@
     max-width: 300px;
   }
 
-  .fds-popover--small {
+  .fds-popover--sm {
     padding: var(--fds-spacing-2) var(--fds-spacing-3);
   }
 
-  .fds-popover--medium {
+  .fds-popover--md {
     padding: var(--fds-spacing-3) var(--fds-spacing-4);
   }
 
-  .fds-popover--large {
+  .fds-popover--lg {
     padding: var(--fds-spacing-3) var(--fds-spacing-5);
   }
 

package/radio.css

@@ -145,19 +145,19 @@
 
   /** Sizing */
 
-  .fds-radio--small {
+  .fds-radio--sm {
     --fds-radio-size: var(--fds-sizing-5);
 
     min-height: var(--fds-sizing-10);
   }
 
-  .fds-radio--medium {
+  .fds-radio--md {
     --fds-radio-size: var(--fds-sizing-6);
 
     min-height: var(--fds-sizing-11);
   }
 
-  .fds-radio--large {
+  .fds-radio--lg {
     --fds-radio-size: var(--fds-sizing-7);
 
     min-height: var(--fds-sizing-12);
@@ -166,6 +166,6 @@
   .fds-radio-group--horizontal {
     display: flex;
     flex-direction: row;
-    gap: var(--fds-spacing-2);
+    gap: var(--fds-spacing-6);
   }
 }

package/search.css

@@ -5,15 +5,15 @@
     gap: var(--fds-spacing-2);
   }
 
-  .fds-search--small {
+  .fds-search--sm {
     --f-search-button-clear-size: var(--fds-sizing-5);
   }
 
-  .fds-search--medium {
+  .fds-search--md {
     --f-search-button-clear-size: var(--fds-sizing-6);
   }
 
-  .fds-search--large {
+  .fds-search--lg {
     --f-search-button-clear-size: var(--fds-sizing-8);
   }
 
@@ -112,7 +112,7 @@
     z-index: 2;
   }
 
-  .fds-search--small .fds-search__input {
+  .fds-search--sm .fds-search__input {
     --f-search-button-clear-size: var(--fds-sizing-4);
 
     height: var(--fds-sizing-10);
@@ -120,11 +120,11 @@
     padding-right: 2.5em;
   }
 
-  .fds-search--small .fds-search__icon {
+  .fds-search--sm .fds-search__icon {
     left: var(--fds-spacing-3);
   }
 
-  .fds-search--medium .fds-search__input {
+  .fds-search--md .fds-search__input {
     --f-search-button-clear-size: var(--fds-sizing-6);
 
     height: var(--fds-sizing-12);
@@ -132,11 +132,11 @@
     padding-right: 2.2em;
   }
 
-  .fds-search--medium .fds-search__icon {
+  .fds-search--md .fds-search__icon {
     left: var(--fds-spacing-4);
   }
 
-  .fds-search--large .fds-search__input {
+  .fds-search--lg .fds-search__input {
     --f-search-button-clear-size: var(--fds-sizing-12);
 
     height: var(--fds-sizing-14);
@@ -144,7 +144,7 @@
     padding-right: 2em;
   }
 
-  .fds-search--large .fds-search__icon {
+  .fds-search--lg .fds-search__icon {
     left: var(--fds-spacing-5);
   }
 

package/switch.css

@@ -101,47 +101,47 @@
     margin-left: var(--fds-spacing-1);
   }
 
-  .fds-switch--small,
-  .fds-switch--small .fds-switch__label {
+  .fds-switch--sm,
+  .fds-switch--sm .fds-switch__label {
     min-height: var(--fds-sizing-6);
   }
 
-  .fds-switch--medium,
-  .fds-switch--medium .fds-switch__label {
+  .fds-switch--md,
+  .fds-switch--md .fds-switch__label {
     min-height: var(--fds-sizing-7);
   }
 
-  .fds-switch--large,
-  .fds-switch--large .fds-switch__label {
+  .fds-switch--lg,
+  .fds-switch--lg .fds-switch__label {
     min-height: var(--fds-sizing-8);
   }
 
-  .fds-switch--small {
+  .fds-switch--sm {
     --fds-switch-height: var(--fds-sizing-6);
     --fds-switch-width: var(--fds-sizing-11);
   }
 
-  .fds-switch--small .fds-switch__input {
+  .fds-switch--sm .fds-switch__input {
     left: -0.25rem;
     top: -0.25rem;
   }
 
-  .fds-switch--medium {
+  .fds-switch--md {
     --fds-switch-height: var(--fds-sizing-7);
     --fds-switch-width: var(--fds-sizing-13);
   }
 
-  .fds-switch--medium .fds-switch__input {
+  .fds-switch--md .fds-switch__input {
     left: 0;
     top: 0;
   }
 
-  .fds-switch--large {
+  .fds-switch--lg {
     --fds-switch-height: var(--fds-sizing-8);
     --fds-switch-width: var(--fds-sizing-15);
   }
 
-  .fds-switch--large .fds-switch__input {
+  .fds-switch--lg .fds-switch__input {
     left: 0;
     top: 0.25rem;
   }

package/table.css

@@ -17,15 +17,15 @@
     border-bottom: 0;
   }
 
-  .fds-table--small {
+  .fds-table--sm {
     --table-padding: var(--fds-spacing-1) var(--fds-spacing-3);
   }
 
-  .fds-table--medium {
+  .fds-table--md {
     --table-padding: var(--fds-spacing-2) var(--fds-spacing-3);
   }
 
-  .fds-table--large {
+  .fds-table--lg {
     --table-padding: var(--fds-spacing-3) var(--fds-spacing-3);
   }
 

package/tabs.css

@@ -22,54 +22,54 @@
     padding: var(--fds-spacing-5);
   }
 
-  .fds-tabs--small .fds-tabs__tab,
-  .fds-tabs--small .fds-tabs__content {
+  .fds-tabs--sm .fds-tabs__tab,
+  .fds-tabs--sm .fds-tabs__content {
     font: var(--fds-typography-paragraph-short-small);
   }
 
-  .fds-tabs--medium .fds-tabs__tab,
-  .fds-tabs--medium .fds-tabs__content {
+  .fds-tabs--md .fds-tabs__tab,
+  .fds-tabs--md .fds-tabs__content {
     font: var(--fds-typography-paragraph-short-medium);
   }
 
-  .fds-tabs--large .fds-tabs__tab,
-  .fds-tabs--large .fds-tabs__content {
+  .fds-tabs--lg .fds-tabs__tab,
+  .fds-tabs--lg .fds-tabs__content {
     font: var(--fds-typography-paragraph-short-large);
   }
 
-  .fds-tabs--small .fds-tabs__tab {
+  .fds-tabs--sm .fds-tabs__tab {
     padding: var(--fds-spacing-2) var(--fds-spacing-4);
   }
 
-  .fds-tabs--medium .fds-tabs__tab {
+  .fds-tabs--md .fds-tabs__tab {
     padding: var(--fds-spacing-3) var(--fds-spacing-5);
   }
 
-  .fds-tabs--large .fds-tabs__tab {
+  .fds-tabs--lg .fds-tabs__tab {
     padding: var(--fds-spacing-4) var(--fds-spacing-6);
   }
 
-  .fds-tabs--small .fds-tabs__content {
+  .fds-tabs--sm .fds-tabs__content {
     padding: var(--fds-spacing-4);
   }
 
-  .fds-tabs--medium .fds-tabs__content {
+  .fds-tabs--md .fds-tabs__content {
     padding: var(--fds-spacing-5);
   }
 
-  .fds-tabs--large .fds-tabs__content {
+  .fds-tabs--lg .fds-tabs__content {
     padding: var(--fds-spacing-6);
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .fds-tabs__tab:hover {
+    .fds-tabs__tab:hover:not([aria-selected='true']) {
       --fds-tabs__tab-bottom-border-color: var(--fds-semantic-border-neutral-subtle);
 
       color: var(--fds-semantic-text-neutral-default);
     }
   }
 
-  .fds-tabs__tab--active {
+  .fds-tabs__tab[aria-selected='true'] {
     --fds-tabs__tab-bottom-border-color: var(--fds-semantic-border-action-default);
 
     color: var(--fds-semantic-text-action-default);