@politiet/sheriff-web-components 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1399,7 +1399,7 @@ function validateSlotContent(slot, allowedTags, allowText, warningMessage) {
1399
1399
  }
1400
1400
  const styles$d = i$4`
1401
1401
  :host {
1402
- --_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-tinted));
1402
+ --_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));
1403
1403
  --_sds-card-border-radius: var(--sds-card-border-radius, var(--sds-radius-md));
1404
1404
  --_sds-card-padding: var(--sds-card-padding, var(--sds-spacing-xs));
1405
1405
  --_sds-card-gap: var(--sds-card-gap, var(--sds-spacing-3xs));
@@ -1407,14 +1407,14 @@ const styles$d = i$4`
1407
1407
  --_sds-card-focus-color: var(--sds-card-focus-color, var(--sds-color-states-focus-outer));
1408
1408
  --_sds-card-focus-inner-color: var(--sds-card-focus-inner-color, var(--sds-color-states-focus-inner));
1409
1409
  --_sds-card-focus-spacing: var(--sds-card-focus-spacing, var(--sds-color-states-focus-spacing));
1410
- --_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-main-action-default));
1410
+ --_sds-card-icon-color: var(--sds-card-icon-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
1411
1411
 
1412
- --_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-main-text-default));
1412
+ --_sds-card-heading-color: var(--sds-card-heading-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
1413
1413
  --_sds-card-heading-font-size: var(--sds-card-heading-font-size, var(--sds-typography-heading-md-mobile-font-size));
1414
1414
  --_sds-card-heading-font-weight: var(--sds-card-heading-font-weight, var(--sds-typography-heading-md-mobile-font-weight));
1415
1415
  --_sds-card-heading-line-height: var(--sds-card-heading-line-height, var(--sds-typography-heading-md-mobile-line-height));
1416
1416
 
1417
- --_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-neutral-text-default));
1417
+ --_sds-card-text-color: var(--sds-card-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
1418
1418
  --_sds-card-text-font-size: var(--sds-card-text-font-size, var(--sds-typography-body-md-mobile-font-size));
1419
1419
  --_sds-card-text-font-weight: var(--sds-card-text-font-weight, var(--sds-typography-body-md-mobile-font-weight));
1420
1420
  --_sds-card-text-line-height: var(--sds-card-text-line-height, var(--sds-typography-body-md-mobile-line-height));
@@ -1440,11 +1440,11 @@ const styles$d = i$4`
1440
1440
  flex: 1;
1441
1441
 
1442
1442
  &:hover {
1443
- --_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-hover));
1443
+ --_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
1444
1444
  }
1445
1445
 
1446
1446
  &:active {
1447
- --_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-main-surface-active));
1447
+ --_sds-card-background-color: var(--sds-card-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
1448
1448
  }
1449
1449
 
1450
1450
  &:focus-visible {
@@ -1533,13 +1533,13 @@ let SDSCard = class extends i$1 {
1533
1533
  firstUpdated() {
1534
1534
  const contentWarning = "[sds-card] text slot should only contain top-level <p> elements with no nested elements:";
1535
1535
  const headerWarning = "[sds-card] header slot should only contain one of <h2>–<h6> elements:";
1536
- validateSlotContent(this.contentSlot, ["P"], false, contentWarning);
1536
+ validateSlotContent(this.textSlot, ["P"], false, contentWarning);
1537
1537
  const headerNodes = this.headingSlot.assignedNodes({ flatten: true });
1538
1538
  if (headerNodes.length > 0) {
1539
1539
  validateSlotContent(this.headingSlot, ["H2", "H3", "H4", "H5", "H6"], false, headerWarning);
1540
1540
  }
1541
- this.contentSlot.addEventListener("slotchange", () => {
1542
- validateSlotContent(this.contentSlot, ["P"], false, contentWarning);
1541
+ this.textSlot.addEventListener("slotchange", () => {
1542
+ validateSlotContent(this.textSlot, ["P"], false, contentWarning);
1543
1543
  });
1544
1544
  this.headingSlot.addEventListener("slotchange", () => {
1545
1545
  const nodes = this.headingSlot.assignedNodes({ flatten: true });
@@ -1565,8 +1565,8 @@ __decorateClass$d([
1565
1565
  e$3("slot#heading")
1566
1566
  ], SDSCard.prototype, "headingSlot", 2);
1567
1567
  __decorateClass$d([
1568
- e$3("slot#content")
1569
- ], SDSCard.prototype, "contentSlot", 2);
1568
+ e$3("slot#text")
1569
+ ], SDSCard.prototype, "textSlot", 2);
1570
1570
  SDSCard = __decorateClass$d([
1571
1571
  guardedCustomElement("sds-card")
1572
1572
  ], SDSCard);
@@ -1579,10 +1579,10 @@ const styles$c = i$4`
1579
1579
  --_sds-checkbox-label-font-size: var(--sds-checkbox-label-font-size, var(--sds-components-font-size-content-md));
1580
1580
  --_sds-checkbox-label-font-weight: var(--sds-checkbox-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));
1581
1581
  --_sds-checkbox-label-line-height: var(--sds-checkbox-label-line-height, var(--sds-components-line-height-tall-content-md));
1582
- --_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-color-neutral-text-default));
1582
+ --_sds-checkbox-label-text-color: var(--sds-checkbox-label-text-color, var(--sds-text-default, var(--sds-color-neutral-text-default)));
1583
1583
 
1584
- --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-default));
1585
- --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-default));
1584
+ --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
1585
+ --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
1586
1586
  --_sds-checkbox-input-border-width: var(--sds-checkbox-input-border-width, var(--sds-border-md));
1587
1587
  --_sds-checkbox-input-border-radius: var(--sds-checkbox-input-border-radius, var(--sds-radius-xs));
1588
1588
  --_sds-checkbox-input-border-style: var(--sds-checkbox-input-border-style, solid);
@@ -1590,7 +1590,7 @@ const styles$c = i$4`
1590
1590
  --_sds-checkbox-input-aspect-ratio: var(--sds-checkbox-input-aspect-ratio, 1);
1591
1591
  --_sds-checkbox-input-icon-color: var(--sds-checkbox-input-text-color, var(--sds-color-main-action-contrast-default));
1592
1592
 
1593
- --_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-neutral-text-subtle));
1593
+ --_sds-checkbox-help-text-color: var(--sds-checkbox-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
1594
1594
  --_sds-checkbox-help-text-font-size: var(--sds-checkbox-help-text-font-size, var(--sds-components-font-size-md));
1595
1595
  --_sds-checkbox-help-text-font-weight: var(--sds-checkbox-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
1596
1596
  --_sds-checkbox-help-text-line-height: var(--sds-checkbox-help-text-line-height, var(--sds-components-line-height-squeezed-md));
@@ -1659,8 +1659,8 @@ const styles$c = i$4`
1659
1659
  margin: 0;
1660
1660
 
1661
1661
  &[readonly] {
1662
- --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));
1663
- --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));
1662
+ --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
1663
+ --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));
1664
1664
  cursor: default;
1665
1665
  pointer-events: none;
1666
1666
 
@@ -1671,8 +1671,8 @@ const styles$c = i$4`
1671
1671
  }
1672
1672
 
1673
1673
  &[checked] {
1674
- --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-default));
1675
- --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-default));
1674
+ --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
1675
+ --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
1676
1676
 
1677
1677
  &::after {
1678
1678
  content: '';
@@ -1688,30 +1688,30 @@ const styles$c = i$4`
1688
1688
  }
1689
1689
 
1690
1690
  &[readonly] {
1691
- --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-neutral-surface-tinted));
1692
- --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-neutral-border-subtle));
1693
- --_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-neutral-action-default));
1691
+ --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
1692
+ --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));
1693
+ --_sds-checkbox-input-icon-color: var(--sds-checkbox-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));
1694
1694
  cursor: default;
1695
1695
  pointer-events: none;
1696
1696
  }
1697
1697
  }
1698
1698
 
1699
1699
  &:hover {
1700
- --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));
1700
+ --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
1701
1701
  }
1702
1702
 
1703
1703
  &:active:not([readonly]) {
1704
- --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));
1704
+ --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active, var(--sds-color-main-action-active)));
1705
1705
  }
1706
1706
 
1707
1707
  &[checked]:hover {
1708
- --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-hover));
1709
- --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-hover));
1708
+ --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
1709
+ --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
1710
1710
  }
1711
1711
 
1712
1712
  &[checked]:active:not([readonly]) {
1713
- --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-main-action-active));
1714
- --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-main-action-active));
1713
+ --_sds-checkbox-input-background-color: var(--sds-checkbox-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
1714
+ --_sds-checkbox-input-border-color: var(--sds-checkbox-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
1715
1715
  }
1716
1716
 
1717
1717
  &:focus-visible {
@@ -1959,7 +1959,7 @@ const styles$b = i$4`
1959
1959
  --_sds-checkbox-group-gap: var(--sds-checkbox-group-gap, var(--sds-spacing-xs));
1960
1960
  --_sds-checkbox-group-font-family: var(--sds-checkbox-group-font-family, var(--sds-typography-font-family-roboto));
1961
1961
  --_sds-checkbox-group-font-size: var(--sds-checkbox-group-font-size, var(--sds-components-font-size-md));
1962
- --_sds-checkbox-group-text-color: var(--sds-checkbox-group-text-color, var(--sds-color-neutral-text-default));
1962
+ --_sds-checkbox-group-text-color: var(--sds-checkbox-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
1963
1963
  --_sds-checkbox-group-max-line-width: var(--sds-checkbox-group-max-line-width, var(--sds-typography-max-line-width));
1964
1964
  --_sds-checkbox-group-disabled-opacity: var(--sds-checkbox-group-disabled-opacity, var(--sds-color-states-disabled-opacity));
1965
1965
 
@@ -1967,7 +1967,7 @@ const styles$b = i$4`
1967
1967
  --_sds-checkbox-group-legend-line-height: var(--sds-checkbox-group-legend-line-height, var(--sds-components-line-height-squeezed-md));
1968
1968
  --_sds-checkbox-group-legend-help-text-gap: var(--sds-checkbox-group-legend-help-text-gap, var(--sds-spacing-4xs));
1969
1969
 
1970
- --_sds-checkbox-group-help-text-color: var(--sds-checkbox-group-help-text-color, var(--sds-color-neutral-text-subtle));
1970
+ --_sds-checkbox-group-help-text-color: var(--sds-checkbox-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
1971
1971
  --_sds-checkbox-group-help-text-font-size: var(--sds-checkbox-group-help-text-font-size, var(--sds-components-font-size-md));
1972
1972
  --_sds-checkbox-group-help-text-font-weight: var(--sds-checkbox-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
1973
1973
  --_sds-checkbox-group-help-text-line-height: var(--sds-checkbox-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));
@@ -2169,7 +2169,7 @@ const styles$a = i$4`
2169
2169
  --_sds-chip-gap: var(--sds-chip-gap, var(--sds-spacing-4xs));
2170
2170
  --_sds-chip-padding-inline: var(--sds-chip-padding-inline, var(--sds-spacing-2xs));
2171
2171
 
2172
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-border-default));
2172
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-border-default, var(--sds-color-main-border-default)));
2173
2173
  --_sds-chip-border-width: var(--sds-chip-border-width, var(--sds-border-sm));
2174
2174
  --_sds-chip-border-radius: var(--sds-chip-border-radius, var(--sds-radius-full));
2175
2175
 
@@ -2180,8 +2180,8 @@ const styles$a = i$4`
2180
2180
 
2181
2181
  --_sds-chip-disabled-opacity: var(--sds-chip-disabled-opacity, var(--sds-color-states-disabled-opacity));
2182
2182
 
2183
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-tinted));
2184
- --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-text-default));
2183
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-tinted, var(--sds-color-main-surface-tinted)));
2184
+ --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
2185
2185
 
2186
2186
  display: inline-block;
2187
2187
  box-sizing: border-box;
@@ -2194,30 +2194,30 @@ const styles$a = i$4`
2194
2194
  }
2195
2195
 
2196
2196
  :host(:hover) {
2197
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-hover));
2198
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
2197
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-hover, var(--sds-color-main-surface-hover)));
2198
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
2199
2199
  }
2200
2200
 
2201
2201
  :host(:active) {
2202
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-surface-active));
2203
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
2202
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-surface-active, var(--sds-color-main-surface-active)));
2203
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
2204
2204
  }
2205
2205
 
2206
2206
  :host([checked]) {
2207
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));
2208
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
2207
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
2208
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
2209
2209
  --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
2210
2210
  }
2211
2211
 
2212
2212
  :host([checked]:hover) {
2213
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));
2213
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
2214
2214
  --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
2215
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));
2215
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
2216
2216
  }
2217
2217
 
2218
2218
  :host([checked]:active) {
2219
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));
2220
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));
2219
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
2220
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
2221
2221
  }
2222
2222
 
2223
2223
  :host([size='sm']) {
@@ -2269,20 +2269,20 @@ const styles$a = i$4`
2269
2269
  }
2270
2270
 
2271
2271
  &.sds-chip--removable {
2272
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-default));
2272
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
2273
2273
  --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
2274
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-default));
2274
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
2275
2275
 
2276
2276
  &:hover {
2277
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-hover));
2277
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
2278
2278
  --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
2279
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-hover));
2279
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
2280
2280
  }
2281
2281
 
2282
2282
  &:active {
2283
- --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-main-action-active));
2283
+ --_sds-chip-background-color: var(--sds-chip-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
2284
2284
  --_sds-chip-text-color: var(--sds-chip-text-color, var(--sds-color-main-action-contrast-default));
2285
- --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-main-action-active));
2285
+ --_sds-chip-border-color: var(--sds-chip-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
2286
2286
  }
2287
2287
  }
2288
2288
 
@@ -2972,16 +2972,16 @@ const styles$6 = i$4`
2972
2972
  --_sds-radio-label-font-size: var(--sds-radio-label-font-size, var(--sds-components-font-size-content-md));
2973
2973
  --_sds-radio-label-font-weight: var(--sds-radio-label-font-weight, var(--sds-typography-body-md-desktop-font-weight));
2974
2974
  --_sds-radio-label-line-height: var(--sds-radio-label-line-height, var(--sds-components-line-height-tall-content-md));
2975
- --_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-neutral-text-default));
2975
+ --_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
2976
2976
 
2977
- --_sds-radio-help-text-color: var(--sds-radio-help-text-color, var(--sds-color-neutral-text-subtle));
2977
+ --_sds-radio-help-text-color: var(--sds-radio-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
2978
2978
  --_sds-radio-help-text-font-size: var(--sds-radio-help-text-font-size, var(--sds-components-font-size-content-md));
2979
2979
  --_sds-radio-help-text-font-weight: var(--sds-radio-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
2980
2980
  --_sds-radio-help-text-line-height: var(--sds-radio-help-text-line-height, var(--sds-components-line-height-tall-content-md));
2981
2981
 
2982
2982
  --_sds-radio-input-size: var(--sds-radio-input-size, var(--sds-components-icon-md));
2983
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
2984
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-default));
2983
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
2984
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
2985
2985
  --_sds-radio-input-border-width: var(--sds-radio-input-border-width, var(--sds-border-md));
2986
2986
  --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, transparent);
2987
2987
  --_sds-radio-input-dot-size: var(--sds-radio-input-dot-size, 4.5px);
@@ -3012,7 +3012,7 @@ const styles$6 = i$4`
3012
3012
  }
3013
3013
 
3014
3014
  .sds-radio--error {
3015
- --_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-alert-danger-text-default));
3015
+ --_sds-radio-label-text-color: var(--sds-radio-label-text-color, var(--sds-color-text-default, var(--sds-color-alert-danger-text-default)));
3016
3016
  }
3017
3017
 
3018
3018
  .sds-radio__help-text {
@@ -3054,8 +3054,8 @@ const styles$6 = i$4`
3054
3054
  grid-row: 1;
3055
3055
 
3056
3056
  &[readonly] {
3057
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-tinted));
3058
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-subtle));
3057
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
3058
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));
3059
3059
  cursor: default;
3060
3060
  pointer-events: none;
3061
3061
 
@@ -3066,38 +3066,38 @@ const styles$6 = i$4`
3066
3066
  }
3067
3067
 
3068
3068
  &[checked] {
3069
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-default));
3070
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-default));
3071
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-main-action-contrast-default));
3069
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
3070
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
3071
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
3072
3072
 
3073
3073
  &[readonly] {
3074
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-tinted));
3075
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-neutral-border-subtle));
3076
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-action-default));
3074
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
3075
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));
3076
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-action-default, var(--sds-color-neutral-action-default)));
3077
3077
  cursor: default;
3078
3078
  pointer-events: none;
3079
3079
  }
3080
3080
  }
3081
3081
 
3082
3082
  &:hover {
3083
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
3084
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-hover));
3083
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
3084
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
3085
3085
 
3086
3086
  &[checked] {
3087
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-hover));
3088
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-hover));
3089
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
3087
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
3088
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
3089
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
3090
3090
  }
3091
3091
  }
3092
3092
 
3093
3093
  &:active:not([readonly], [checked]) {
3094
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
3095
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-active));
3094
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
3095
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
3096
3096
 
3097
3097
  &[checked] {
3098
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-main-action-active));
3099
- --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-main-action-active));
3100
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
3098
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
3099
+ --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
3100
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
3101
3101
  }
3102
3102
  }
3103
3103
 
@@ -3115,24 +3115,24 @@ const styles$6 = i$4`
3115
3115
  }
3116
3116
 
3117
3117
  &:hover {
3118
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
3118
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
3119
3119
  --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));
3120
3120
 
3121
3121
  &[checked] {
3122
3122
  --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-hover));
3123
3123
  --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-hover));
3124
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
3124
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
3125
3125
  }
3126
3126
  }
3127
3127
 
3128
3128
  &:active:not([readonly], [checked]) {
3129
- --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-neutral-surface-default));
3129
+ --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
3130
3130
  --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));
3131
3131
 
3132
3132
  &[checked] {
3133
3133
  --_sds-radio-input-background-color: var(--sds-radio-input-background-color, var(--sds-color-alert-danger-action-active));
3134
3134
  --_sds-radio-input-border-color: var(--sds-radio-input-border-color, var(--sds-color-alert-danger-action-active));
3135
- --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-neutral-surface-default));
3135
+ --_sds-radio-input-dot-color: var(--sds-radio-input-dot-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
3136
3136
  }
3137
3137
  }
3138
3138
  }
@@ -3414,7 +3414,7 @@ const styles$5 = i$4`
3414
3414
  --_sds-radio-group-row-gap: var(--sds-radio-group-row-gap, var(--sds-spacing-md));
3415
3415
  --_sds-radio-group-font-family: var(--sds-radio-group-font-family, var(--sds-typography-font-family-roboto));
3416
3416
  --_sds-radio-group-font-size: var(--sds-radio-group-font-size, var(--sds-components-font-size-md));
3417
- --_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-neutral-text-default));
3417
+ --_sds-radio-group-text-color: var(--sds-radio-group-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
3418
3418
  --_sds-radio-group-max-line-width: var(--sds-radio-group-max-line-width, var(--sds-typography-max-line-width));
3419
3419
  --_sds-radio-group-disabled-opacity: var(--sds-radio-group-disabled-opacity, var(--sds-color-states-disabled-opacity));
3420
3420
 
@@ -3422,7 +3422,7 @@ const styles$5 = i$4`
3422
3422
  --_sds-radio-group-legend-line-height: var(--sds-radio-group-legend-line-height, var(--sds-components-line-height-squeezed-md));
3423
3423
  --_sds_radio-group-legend-help-text-gap: var(--sds-radio-group-legend-help-text-gap, var(--sds-spacing-4xs));
3424
3424
 
3425
- --_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-neutral-text-subtle));
3425
+ --_sds-radio-group-help-text-color: var(--sds-radio-group-help-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
3426
3426
  --_sds-radio-group-help-text-font-size: var(--sds-radio-group-help-text-font-size, var(--sds-components-font-size-md));
3427
3427
  --_sds-radio-group-help-text-font-weight: var(--sds-radio-group-help-text-font-weight, var(--sds-typography-body-md-desktop-font-weight));
3428
3428
  --_sds-radio-group-help-text-line-height: var(--sds-radio-group-help-text-line-height, var(--sds-components-line-height-squeezed-md));
@@ -3643,12 +3643,12 @@ SDSRadioGroup = __decorateClass$5([
3643
3643
  ], SDSRadioGroup);
3644
3644
  const styles$4 = i$4`
3645
3645
  :host {
3646
- --_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-neutral-surface-default));
3647
- --_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-neutral-text-default));
3646
+ --_sds-switch-background-color: var(--sds-switch-background-color, var(--sds-color-surface-default, var(--sds-color-neutral-surface-default)));
3647
+ --_sds-switch-text-color: var(--sds-switch-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
3648
3648
 
3649
3649
  --_sds-switch-transition-time: var(--sds-switch-transition-time, 200ms);
3650
3650
 
3651
- --_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-neutral-border-default));
3651
+ --_sds-switch-border-color: var(--sds-switch-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
3652
3652
  --_sds-switch-border-width: var(--sds-switch-border-width, var(--sds-border-md));
3653
3653
  --_sds-switch-border-radius: var(--sds-switch-border-radius, var(--sds-radius-full));
3654
3654
 
@@ -4350,10 +4350,10 @@ SDSText = __decorateClass$2([
4350
4350
  ], SDSText);
4351
4351
  const styles$1 = i$4`
4352
4352
  :host {
4353
- --_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-neutral-background-default));
4354
- --_sds-textfield-text-color: var(--sds-textfield-text-color, var(--sds-color-neutral-text-default));
4353
+ --_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));
4354
+ --_sds-textfield-text-color: var(--sds-textfield-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
4355
4355
 
4356
- --_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-neutral-border-default));
4356
+ --_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
4357
4357
  --_sds-textfield-border-width: var(--sds-textfield-border-width, var(--sds-border-sm));
4358
4358
  --_sds-textfield-border-radius: var(--sds-textfield-border-radius, var(--sds-radius-sm));
4359
4359
 
@@ -4370,12 +4370,12 @@ const styles$1 = i$4`
4370
4370
  --_sds-textfield-disabled-opacity: var(--sds-textfield-disabled-opacity, var(--sds-color-states-disabled-opacity));
4371
4371
  --_sds-textfield-max-width: var(--sds-textfield-input-max-width, var(--sds-typography-max-line-width, 80ch));
4372
4372
 
4373
- --_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-neutral-text-default));
4373
+ --_sds-textfield-label-text-color: var(--sds-textfield-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
4374
4374
  --_sds-textfield-label-font-size: var(--sds-textfield-label-font-size, var(--sds-components-font-size-content-md));
4375
4375
  --_sds-textfield-label-font-weight: var(--sds-textfield-label-font-weight, var(--sds-typography-font-weight-medium));
4376
4376
  --_sds-textfield-label-line-height: var(--sds-textfield-label-line-height, var(--sds-components-line-height-squeezed-md));
4377
4377
 
4378
- --_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-neutral-text-subtle));
4378
+ --_sds-textfield-helptext-text-color: var(--sds-textfield-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
4379
4379
  --_sds-textfield-helptext-font-size: var(--sds-textfield-helptext-font-size, var(--sds-components-font-size-content-md));
4380
4380
  --_sds-textfield-helptext-font-weight: var(--sds-textfield-helptext-font-weight, var(--sds-typography-font-weight-regular));
4381
4381
  --_sds-textfield-helptext-line-height: var(--sds-textfield-helptext-line-height, var(--sds-components-line-height-squeezed-md));
@@ -4418,7 +4418,7 @@ const styles$1 = i$4`
4418
4418
  width: 100%;
4419
4419
 
4420
4420
  &:hover {
4421
- --_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-neutral-border-strong));
4421
+ --_sds-textfield-border-color: var(--sds-textfield-border-color, var(--sds-color-border-strong, var(--sds-color-neutral-border-strong)));
4422
4422
  }
4423
4423
 
4424
4424
  &:focus-visible {
@@ -4462,7 +4462,7 @@ const styles$1 = i$4`
4462
4462
  }
4463
4463
 
4464
4464
  :host([readonly]) {
4465
- --_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-neutral-surface-tinted));
4465
+ --_sds-textfield-background-color: var(--sds-textfield-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
4466
4466
  }
4467
4467
 
4468
4468
  :host([disabled]) {
@@ -4736,10 +4736,10 @@ SDSTextField = __decorateClass$1([
4736
4736
  ], SDSTextField);
4737
4737
  const styles = i$4`
4738
4738
  :host {
4739
- --_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-background-default));
4740
- --_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-neutral-text-default));
4739
+ --_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-background-default, var(--sds-color-neutral-background-default)));
4740
+ --_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
4741
4741
 
4742
- --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-default));
4742
+ --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-border-default, var(--sds-color-neutral-border-default)));
4743
4743
  --_sds-textarea-border-width: var(--sds-textarea-border-width, var(--sds-border-sm));
4744
4744
  --_sds-textarea-border-radius: var(--sds-textarea-border-radius, var(--sds-radius-sm));
4745
4745
 
@@ -4754,19 +4754,19 @@ const styles = i$4`
4754
4754
  --_sds-textarea-padding-inline: var(--sds-textarea-padding-inline, var(--sds-spacing-2xs));
4755
4755
  --_sds-textarea-disabled-opacity: var(--sds-textarea-disabled-opacity, var(--sds-color-states-disabled-opacity));
4756
4756
 
4757
- --_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-neutral-text-default));
4757
+ --_sds-textarea-label-text-color: var(--sds-textarea-label-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
4758
4758
  --_sds-textarea-label-font-size: var(--sds-textarea-label-font-size, var(--sds-components-font-size-md));
4759
4759
  --_sds-textarea-label-font-weight: var(--sds-textarea-label-font-weight, var(--sds-typography-font-weight-medium));
4760
4760
  --_sds-textarea-label-line-height: var(--sds-textarea-label-line-height, var(--sds-components-line-height-squeezed-md));
4761
4761
 
4762
4762
  --_sds-textarea-label-gap: var(--sds-textarea-gap, var(--sds-spacing-4xs));
4763
4763
 
4764
- --_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-neutral-text-subtle));
4764
+ --_sds-textarea-helptext-text-color: var(--sds-textarea-helptext-text-color, var(--sds-color-text-subtle, var(--sds-color-neutral-text-subtle)));
4765
4765
  --_sds-textarea-helptext-font-size: var(--sds-textarea-helptext-font-size, var(--sds-components-font-size-md));
4766
4766
  --_sds-textarea-helptext-font-weight: var(--sds-textarea-helptext-font-weight, var(--sds-typography-font-weight-regular));
4767
4767
  --_sds-textarea-helptext-line-height: var(--sds-textarea-helptext-line-height, var(--sds-components-line-height-squeezed-md));
4768
4768
 
4769
- --_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-neutral-text-default));
4769
+ --_sds-textarea-counter-text-color: var(--sds-textarea-counter-text-color, var(--sds-color-text-default, var(--sds-color-neutral-text-default)));
4770
4770
  --_sds-textarea-counter-font-size: var(--sds-textarea-counter-font-size, var(--sds-components-font-size-md));
4771
4771
  --_sds-textarea-counter-font-weight: var(--sds-textarea-counter-font-weight, var(--sds-typography-font-weight-regular));
4772
4772
  --_sds-textarea-counter-line-height: var(--sds-textarea-counter-line-height, var(--sds-components-line-height-squeezed-md));
@@ -4809,7 +4809,7 @@ const styles = i$4`
4809
4809
  resize: vertical;
4810
4810
 
4811
4811
  &:hover {
4812
- --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-hover));
4812
+ --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-action-hover, var(--sds-color-main-action-hover)));
4813
4813
  }
4814
4814
 
4815
4815
  &:focus-visible {
@@ -4819,8 +4819,8 @@ const styles = i$4`
4819
4819
  }
4820
4820
 
4821
4821
  &:active {
4822
- --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-main-action-active));
4823
- --_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-main-text-default));
4822
+ --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-action-active, var(--sds-color-main-action-active)));
4823
+ --_sds-textarea-text-color: var(--sds-textarea-text-color, var(--sds-color-text-default, var(--sds-color-main-text-default)));
4824
4824
  }
4825
4825
  }
4826
4826
 
@@ -4877,8 +4877,8 @@ const styles = i$4`
4877
4877
  }
4878
4878
 
4879
4879
  :host([readonly]) {
4880
- --_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-neutral-surface-tinted));
4881
- --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-neutral-border-subtle));
4880
+ --_sds-textarea-background-color: var(--sds-textarea-background-color, var(--sds-color-surface-tinted, var(--sds-color-neutral-surface-tinted)));
4881
+ --_sds-textarea-border-color: var(--sds-textarea-border-color, var(--sds-color-border-subtle, var(--sds-color-neutral-border-subtle)));
4882
4882
  .sds-textarea__input {
4883
4883
  resize: none;
4884
4884
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@politiet/sheriff-web-components",
3
- "version": "2.0.1",
3
+ "version": "2.0.2",
4
4
  "description": "Sheriff Design System Web Components Library",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -138,7 +138,7 @@
138
138
  "@politiet/sheriff-icons": "^2.0.1"
139
139
  },
140
140
  "peerDependencies": {
141
- "@politiet/sheriff-css-framework": "^2.0.1"
141
+ "@politiet/sheriff-css-framework": "^2.0.2"
142
142
  },
143
143
  "author": "Politiets IT-enhet",
144
144
  "license": "ISC"