@politiet/sheriff-web-components 2.0.0-beta.1 → 2.0.0-rc.1

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.
Files changed (126) hide show
  1. package/dist/frameworks/react.d.ts +1 -1
  2. package/dist/frameworks/react.d.ts.map +1 -1
  3. package/dist/react-wrappers/SDSTextAreaWrapper.d.ts +2 -2
  4. package/dist/react-wrappers/SDSTextAreaWrapper.d.ts.map +1 -1
  5. package/dist/react-wrappers/SDSTextAreaWrapper.js +2 -2
  6. package/dist/react-wrappers/SDSTextAreaWrapper.js.map +1 -1
  7. package/dist/react-wrappers/SDSTextFieldWrapper.d.ts +6 -5
  8. package/dist/react-wrappers/SDSTextFieldWrapper.d.ts.map +1 -1
  9. package/dist/react-wrappers/SDSTextFieldWrapper.js.map +1 -1
  10. package/dist/react-wrappers/index.d.ts +2 -0
  11. package/dist/react-wrappers/index.d.ts.map +1 -1
  12. package/dist/react-wrappers/index.js +2 -0
  13. package/dist/react-wrappers/index.js.map +1 -1
  14. package/dist/sds-alert/sds-alert.d.ts +6 -4
  15. package/dist/sds-alert/sds-alert.d.ts.map +1 -1
  16. package/dist/sds-alert/sds-alert.js +11 -6
  17. package/dist/sds-alert/sds-alert.js.map +1 -1
  18. package/dist/sds-alert/sds-alert.styles.d.ts.map +1 -1
  19. package/dist/sds-alert/sds-alert.styles.js +56 -69
  20. package/dist/sds-alert/sds-alert.styles.js.map +1 -1
  21. package/dist/sds-button/sds-button.d.ts +1 -4
  22. package/dist/sds-button/sds-button.d.ts.map +1 -1
  23. package/dist/sds-button/sds-button.js +3 -14
  24. package/dist/sds-button/sds-button.js.map +1 -1
  25. package/dist/sds-button/sds-button.styles.d.ts.map +1 -1
  26. package/dist/sds-button/sds-button.styles.js +35 -61
  27. package/dist/sds-button/sds-button.styles.js.map +1 -1
  28. package/dist/sds-card/sds-card.styles.js +5 -5
  29. package/dist/sds-card/sds-card.styles.js.map +1 -1
  30. package/dist/sds-checkbox/sds-checkbox.d.ts.map +1 -1
  31. package/dist/sds-checkbox/sds-checkbox.js +1 -0
  32. package/dist/sds-checkbox/sds-checkbox.js.map +1 -1
  33. package/dist/sds-checkbox/sds-checkbox.styles.d.ts.map +1 -1
  34. package/dist/sds-checkbox/sds-checkbox.styles.js +35 -26
  35. package/dist/sds-checkbox/sds-checkbox.styles.js.map +1 -1
  36. package/dist/sds-checkbox-group/sds-checkbox-group.js +1 -1
  37. package/dist/sds-checkbox-group/sds-checkbox-group.js.map +1 -1
  38. package/dist/sds-checkbox-group/sds-checkbox-group.styles.d.ts.map +1 -1
  39. package/dist/sds-checkbox-group/sds-checkbox-group.styles.js +4 -0
  40. package/dist/sds-checkbox-group/sds-checkbox-group.styles.js.map +1 -1
  41. package/dist/sds-chip/sds-chip.d.ts.map +1 -1
  42. package/dist/sds-chip/sds-chip.js +10 -1
  43. package/dist/sds-chip/sds-chip.js.map +1 -1
  44. package/dist/sds-chip/sds-chip.styles.d.ts.map +1 -1
  45. package/dist/sds-chip/sds-chip.styles.js +26 -25
  46. package/dist/sds-chip/sds-chip.styles.js.map +1 -1
  47. package/dist/sds-detail/sds-detail.styles.js +2 -2
  48. package/dist/sds-detail/sds-detail.styles.js.map +1 -1
  49. package/dist/sds-icon/sds-icon-loader.d.ts +2 -0
  50. package/dist/sds-icon/sds-icon-loader.d.ts.map +1 -1
  51. package/dist/sds-icon/sds-icon-loader.js +9 -0
  52. package/dist/sds-icon/sds-icon-loader.js.map +1 -1
  53. package/dist/sds-icon/sds-icon.d.ts +1 -1
  54. package/dist/sds-icon/sds-icon.d.ts.map +1 -1
  55. package/dist/sds-icon/sds-icon.js +0 -1
  56. package/dist/sds-icon/sds-icon.js.map +1 -1
  57. package/dist/sds-icon/sds-icon.system.d.ts +6 -0
  58. package/dist/sds-icon/sds-icon.system.d.ts.map +1 -0
  59. package/dist/sds-icon/sds-icon.system.js +24 -0
  60. package/dist/sds-icon/sds-icon.system.js.map +1 -0
  61. package/dist/sds-label/sds-label.styles.js +2 -2
  62. package/dist/sds-label/sds-label.styles.js.map +1 -1
  63. package/dist/sds-link/sds-link.styles.js +6 -6
  64. package/dist/sds-link/sds-link.styles.js.map +1 -1
  65. package/dist/sds-loader/sds-loader.d.ts +2 -3
  66. package/dist/sds-loader/sds-loader.d.ts.map +1 -1
  67. package/dist/sds-loader/sds-loader.js +4 -17
  68. package/dist/sds-loader/sds-loader.js.map +1 -1
  69. package/dist/sds-loader/sds-loader.styles.d.ts.map +1 -1
  70. package/dist/sds-loader/sds-loader.styles.js +12 -17
  71. package/dist/sds-loader/sds-loader.styles.js.map +1 -1
  72. package/dist/sds-nav-card/sds-nav-card.styles.d.ts.map +1 -1
  73. package/dist/sds-nav-card/sds-nav-card.styles.js +25 -18
  74. package/dist/sds-nav-card/sds-nav-card.styles.js.map +1 -1
  75. package/dist/sds-paragraph/sds-paragraph.styles.js +2 -2
  76. package/dist/sds-paragraph/sds-paragraph.styles.js.map +1 -1
  77. package/dist/sds-radio/sds-radio.d.ts +11 -11
  78. package/dist/sds-radio/sds-radio.d.ts.map +1 -1
  79. package/dist/sds-radio/sds-radio.js +7 -5
  80. package/dist/sds-radio/sds-radio.js.map +1 -1
  81. package/dist/sds-radio/sds-radio.styles.d.ts.map +1 -1
  82. package/dist/sds-radio/sds-radio.styles.js +24 -20
  83. package/dist/sds-radio/sds-radio.styles.js.map +1 -1
  84. package/dist/sds-radio-group/sds-radio-group.d.ts +9 -6
  85. package/dist/sds-radio-group/sds-radio-group.d.ts.map +1 -1
  86. package/dist/sds-radio-group/sds-radio-group.js +42 -25
  87. package/dist/sds-radio-group/sds-radio-group.js.map +1 -1
  88. package/dist/sds-radio-group/sds-radio-group.styles.d.ts.map +1 -1
  89. package/dist/sds-radio-group/sds-radio-group.styles.js +4 -0
  90. package/dist/sds-radio-group/sds-radio-group.styles.js.map +1 -1
  91. package/dist/sds-switch/sds-switch.d.ts.map +1 -1
  92. package/dist/sds-switch/sds-switch.js +1 -0
  93. package/dist/sds-switch/sds-switch.js.map +1 -1
  94. package/dist/sds-switch/sds-switch.styles.js +2 -2
  95. package/dist/sds-switch/sds-switch.styles.js.map +1 -1
  96. package/dist/sds-tag/sds-tag.d.ts +1 -4
  97. package/dist/sds-tag/sds-tag.d.ts.map +1 -1
  98. package/dist/sds-tag/sds-tag.js +0 -4
  99. package/dist/sds-tag/sds-tag.js.map +1 -1
  100. package/dist/sds-tag/sds-tag.styles.d.ts.map +1 -1
  101. package/dist/sds-tag/sds-tag.styles.js +12 -38
  102. package/dist/sds-tag/sds-tag.styles.js.map +1 -1
  103. package/dist/sds-text/sds-text.d.ts +1 -1
  104. package/dist/sds-text/sds-text.d.ts.map +1 -1
  105. package/dist/sds-text/sds-text.js.map +1 -1
  106. package/dist/sds-text/sds-text.styles.js +1 -1
  107. package/dist/sds-text/sds-text.styles.js.map +1 -1
  108. package/dist/sds-textarea/sds-textarea.d.ts +17 -17
  109. package/dist/sds-textarea/sds-textarea.d.ts.map +1 -1
  110. package/dist/sds-textarea/sds-textarea.js +4 -2
  111. package/dist/sds-textarea/sds-textarea.js.map +1 -1
  112. package/dist/sds-textarea/sds-textarea.spec.js +24 -17
  113. package/dist/sds-textarea/sds-textarea.spec.js.map +1 -1
  114. package/dist/sds-textarea/sds-textarea.styles.d.ts.map +1 -1
  115. package/dist/sds-textarea/sds-textarea.styles.js +8 -2
  116. package/dist/sds-textarea/sds-textarea.styles.js.map +1 -1
  117. package/dist/sds-textfield/sds-textfield.d.ts +17 -21
  118. package/dist/sds-textfield/sds-textfield.d.ts.map +1 -1
  119. package/dist/sds-textfield/sds-textfield.js +19 -3
  120. package/dist/sds-textfield/sds-textfield.js.map +1 -1
  121. package/dist/sds-textfield/sds-textfield.styles.d.ts.map +1 -1
  122. package/dist/sds-textfield/sds-textfield.styles.js +20 -11
  123. package/dist/sds-textfield/sds-textfield.styles.js.map +1 -1
  124. package/dist/sheriff-web-components.js +374 -350
  125. package/dist/utils/renderErrorMessage.js +1 -1
  126. package/package.json +143 -143
package/dist/sds-label/sds-label.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-label.styles.js","sourceRoot":"","sources":["../../src/sds-label/sds-label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-label {\n\t\tfont-family: var(--sds-typography-body-md-font-family);\n\t\tfont-weight: 500;\n\t\tcolor: var(--sds-color-primary-text-default);\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-label--l {\n\t\tfont-size: 1.125rem;\n\t\tline-height: 1.333;\n\t}\n\n\t.sds-label--m {\n\t\tfont-size: 1rem;\n\t\tline-height: 1.5;\n\t}\n\n\t.sds-label--s {\n\t\tfont-size: 0.875rem;\n\t\tline-height: 1.428;\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-label.styles.js","sourceRoot":"","sources":["../../src/sds-label/sds-label.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-label {\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-weight: 500;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-label--l {\n\t\tfont-size: 1.125rem;\n\t\tline-height: 1.333;\n\t}\n\n\t.sds-label--m {\n\t\tfont-size: 1rem;\n\t\tline-height: 1.5;\n\t}\n\n\t.sds-label--s {\n\t\tfont-size: 0.875rem;\n\t\tline-height: 1.428;\n\t}\n`;\n"]}
package/dist/sds-link/sds-link.styles.js CHANGED
@@ -28,9 +28,9 @@ export const styles = css `
28
28
  }
29
29
 
30
30
  .sds-link {
31
- color: var(--sds-color-primary-text-default);
31
+ color: var(--sds-color-semantic-text-default);
32
32
  display: inline;
33
- font-family: var(--sds-typography-body-md-font-family);
33
+ font-family: var(--sds-typography-font-family);
34
34
  font-weight: 400;
35
35
  line-height: 1.333;
36
36
  margin: 0;
@@ -38,23 +38,23 @@ export const styles = css `
38
38
 
39
39
  &:link,
40
40
  &:visited {
41
- color: var(--sds-color-primary-action-default);
41
+ color: var(--sds-color-semantic-text-action-default);
42
42
  text-decoration: underline;
43
43
  text-decoration-thickness: 1px;
44
44
  text-underline-offset: 2px;
45
45
  }
46
46
 
47
47
  &:active {
48
- color: var(--sds-color-primary-action-active);
48
+ color: var(--sds-color-semantic-text-action-active);
49
49
  }
50
50
 
51
51
  &:hover {
52
- color: var(--sds-color-primary-action-hover);
52
+ color: var(--sds-color-semantic-text-action-hover);
53
53
  }
54
54
 
55
55
  &:focus {
56
56
  border-radius: 4px;
57
- outline: 2px solid var(--sds-color-states-focus);
57
+ outline: 2px solid var(--sds-color-semantic-border-focus);
58
58
  outline-offset: 2px;
59
59
  }
60
60
  }
package/dist/sds-link/sds-link.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-link.styles.js","sourceRoot":"","sources":["../../src/sds-link/sds-link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: inline;\n\t}\n\n\t:host([display-type='block']) {\n\t\tdisplay: block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\n\t\t.sds-link {\n\t\t\tdisplay: block;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\t}\n\n\t:host([display-type='inline-block']) {\n\t\tdisplay: inline-block;\n\n\t\t.sds-link {\n\t\t\tdisplay: inline-block;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\t}\n\n\t:host([display-type='inline']) {\n\t\tdisplay: inline;\n\t}\n\n\t.sds-link {\n\t\tcolor: var(--sds-color-primary-text-default);\n\t\tdisplay: inline;\n\t\tfont-family: var(--sds-typography-body-md-font-family);\n\t\tfont-weight: 400;\n\t\tline-height: 1.333;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&:link,\n\t\t&:visited {\n\t\t\tcolor: var(--sds-color-primary-action-default);\n\t\t\ttext-decoration: underline;\n\t\t\ttext-decoration-thickness: 1px;\n\t\t\ttext-underline-offset: 2px;\n\t\t}\n\n\t\t&:active {\n\t\t\tcolor: var(--sds-color-primary-action-active);\n\t\t}\n\n\t\t&:hover {\n\t\t\tcolor: var(--sds-color-primary-action-hover);\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder-radius: 4px;\n\t\t\toutline: 2px solid var(--sds-color-states-focus);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n\n\t.sds-link--l {\n\t\tfont-size: 1.125rem;\n\t}\n\n\t.sds-link--m {\n\t\tfont-size: 1rem;\n\t}\n\n\t.sds-link--s {\n\t\tfont-size: 0.875rem;\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-link.styles.js","sourceRoot":"","sources":["../../src/sds-link/sds-link.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: inline;\n\t}\n\n\t:host([display-type='block']) {\n\t\tdisplay: block;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\n\t\t.sds-link {\n\t\t\tdisplay: block;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\t}\n\n\t:host([display-type='inline-block']) {\n\t\tdisplay: inline-block;\n\n\t\t.sds-link {\n\t\t\tdisplay: inline-block;\n\t\t\tmax-width: var(--sds-typography-max-line-width);\n\t\t}\n\t}\n\n\t:host([display-type='inline']) {\n\t\tdisplay: inline;\n\t}\n\n\t.sds-link {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tdisplay: inline;\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-weight: 400;\n\t\tline-height: 1.333;\n\t\tmargin: 0;\n\t\tpadding: 0;\n\n\t\t&:link,\n\t\t&:visited {\n\t\t\tcolor: var(--sds-color-semantic-text-action-default);\n\t\t\ttext-decoration: underline;\n\t\t\ttext-decoration-thickness: 1px;\n\t\t\ttext-underline-offset: 2px;\n\t\t}\n\n\t\t&:active {\n\t\t\tcolor: var(--sds-color-semantic-text-action-active);\n\t\t}\n\n\t\t&:hover {\n\t\t\tcolor: var(--sds-color-semantic-text-action-hover);\n\t\t}\n\n\t\t&:focus {\n\t\t\tborder-radius: 4px;\n\t\t\toutline: 2px solid var(--sds-color-semantic-border-focus);\n\t\t\toutline-offset: 2px;\n\t\t}\n\t}\n\n\t.sds-link--l {\n\t\tfont-size: 1.125rem;\n\t}\n\n\t.sds-link--m {\n\t\tfont-size: 1rem;\n\t}\n\n\t.sds-link--s {\n\t\tfont-size: 0.875rem;\n\t}\n`;\n"]}
package/dist/sds-loader/sds-loader.d.ts CHANGED
@@ -1,14 +1,13 @@
1
1
  import { LitElement } from 'lit';
2
2
  type LoaderSize = 'large' | 'medium' | 'small' | 'lg' | 'md' | 'sm';
3
- export type ColorMode = 'accent' | 'accent-contrast' | 'danger' | 'danger-contrast';
4
3
  export interface SDSLoaderProps {
5
4
  size?: LoaderSize;
6
- color?: ColorMode;
5
+ contrast?: boolean;
7
6
  }
8
7
  export declare class SDSLoader extends LitElement {
9
8
  static styles: import("lit").CSSResult[];
10
9
  size: LoaderSize;
11
- color: ColorMode;
10
+ contrast: boolean;
12
11
  render(): import("lit-html").TemplateResult<1>;
13
12
  }
14
13
  declare global {
package/dist/sds-loader/sds-loader.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-loader.d.ts","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAMvC,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,iBAAiB,GAAG,QAAQ,GAAG,iBAAiB,CAAC;AAIpF,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAES,IAAI,EAAE,UAAU,CAAQ;IAUnE,KAAK,EAAE,SAAS,CAAY;IAEnB,MAAM;CAUf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
1
+ {"version":3,"file":"sds-loader.d.ts","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAKvC,KAAK,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpE,MAAM,WAAW,cAAc;IAC9B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,qBACa,SAAU,SAAQ,UAAU;IACxC,OAAgB,MAAM,4BAAY;IAES,IAAI,EAAE,UAAU,CAAQ;IACvB,QAAQ,EAAE,OAAO,CAAS;IAE7D,MAAM;CAMf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,YAAY,EAAE,SAAS,CAAC;KACxB;CACD"}
package/dist/sds-loader/sds-loader.js CHANGED
@@ -6,21 +6,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
6
6
  };
7
7
  import { LitElement, html } from 'lit';
8
8
  import { property } from 'lit/decorators.js';
9
- import { classMap } from 'lit/directives/class-map.js';
10
9
  import { guardedCustomElement } from '../utils/guarded-custom-element';
11
10
  import { styles } from './sds-loader.styles';
12
- const VALID_COLORS = ['accent', 'accent-contrast', 'danger', 'danger-contrast'];
13
11
  let SDSLoader = class SDSLoader extends LitElement {
14
12
  constructor() {
15
13
  super(...arguments);
16
14
  this.size = 'md';
17
- this.color = 'accent';
15
+ this.contrast = false;
18
16
  }
19
17
  render() {
20
- const loaderClasses = {
21
- 'sds-loader': true,
22
- };
23
- return html `<svg aria-label="Laster" class="${classMap(loaderClasses)}" role="img" viewBox="0 0 50 50">
18
+ return html `<svg aria-label="Laster" class="sds-loader" role="img" viewBox="0 0 50 50">
24
19
  <circle class="sds-loader__background" cx="25" cy="25" r="20" fill="none" stroke-width="7"></circle>
25
20
  <circle class="sds-loader__circle" cx="25" cy="25" r="20" fill="none" stroke-width="7"></circle>
26
21
  </svg>`;
@@ -31,16 +26,8 @@ __decorate([
31
26
  property({ type: String, reflect: true })
32
27
  ], SDSLoader.prototype, "size", void 0);
33
28
  __decorate([
34
- property({
35
- type: String,
36
- reflect: true,
37
- converter: {
38
- fromAttribute(value) {
39
- return value && VALID_COLORS.includes(value) ? value : 'accent';
40
- },
41
- },
42
- })
43
- ], SDSLoader.prototype, "color", void 0);
29
+ property({ type: Boolean, reflect: true })
30
+ ], SDSLoader.prototype, "contrast", void 0);
44
31
  SDSLoader = __decorate([
45
32
  guardedCustomElement('sds-loader')
46
33
  ], SDSLoader);
package/dist/sds-loader/sds-loader.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-loader.js","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAK7C,MAAM,YAAY,GAAgB,CAAC,QAAQ,EAAE,iBAAiB,EAAE,QAAQ,EAAE,iBAAiB,CAAC,CAAC;AAQtF,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAGqC,SAAI,GAAe,IAAI,CAAC;QAUnE,UAAK,GAAc,QAAQ,CAAC;IAY7B,CAAC;IAVS,MAAM;QACd,MAAM,aAAa,GAAG;YACrB,YAAY,EAAE,IAAI;SAClB,CAAC;QAEF,OAAO,IAAI,CAAA,mCAAmC,QAAQ,CAAC,aAAa,CAAC;;;SAG9D,CAAC;IACT,CAAC;;AAvBe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAyB;AAUnE;IATC,QAAQ,CAAC;QACT,IAAI,EAAE,MAAM;QACZ,OAAO,EAAE,IAAI;QACb,SAAS,EAAE;YACV,aAAa,CAAC,KAAoB;gBACjC,OAAO,KAAK,IAAI,YAAY,CAAC,QAAQ,CAAC,KAAkB,CAAC,CAAC,CAAC,CAAE,KAAmB,CAAC,CAAC,CAAC,QAAQ,CAAC;YAC7F,CAAC;SACD;KACD,CAAC;wCAC0B;AAbhB,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CAyBrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-loader.styles';\n\ntype LoaderSize = 'large' | 'medium' | 'small' | 'lg' | 'md' | 'sm';\nexport type ColorMode = 'accent' | 'accent-contrast' | 'danger' | 'danger-contrast';\n\nconst VALID_COLORS: ColorMode[] = ['accent', 'accent-contrast', 'danger', 'danger-contrast'];\n\nexport interface SDSLoaderProps {\n\tsize?: LoaderSize;\n\tcolor?: ColorMode;\n}\n\n@guardedCustomElement('sds-loader')\nexport class SDSLoader extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) size: LoaderSize = 'md';\n\t@property({\n\t\ttype: String,\n\t\treflect: true,\n\t\tconverter: {\n\t\t\tfromAttribute(value: string | null): ColorMode {\n\t\t\t\treturn value && VALID_COLORS.includes(value as ColorMode) ? (value as ColorMode) : 'accent';\n\t\t\t},\n\t\t},\n\t})\n\tcolor: ColorMode = 'accent';\n\n\toverride render() {\n\t\tconst loaderClasses = {\n\t\t\t'sds-loader': true,\n\t\t};\n\n\t\treturn html`<svg aria-label=\"Laster\" class=\"${classMap(loaderClasses)}\" role=\"img\" viewBox=\"0 0 50 50\">\n\t\t\t<circle class=\"sds-loader__background\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"7\"></circle>\n\t\t\t<circle class=\"sds-loader__circle\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"7\"></circle>\n\t\t</svg>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-loader': SDSLoader;\n\t}\n}\n"]}
1
+ {"version":3,"file":"sds-loader.js","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAUtC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAGqC,SAAI,GAAe,IAAI,CAAC;QACvB,aAAQ,GAAY,KAAK,CAAC;IAQvE,CAAC;IANS,MAAM;QACd,OAAO,IAAI,CAAA;;;SAGJ,CAAC;IACT,CAAC;;AAVe,gBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AAES;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCAAyB;AACvB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAA2B;AAJ1D,SAAS;IADrB,oBAAoB,CAAC,YAAY,CAAC;GACtB,SAAS,CAYrB","sourcesContent":["import { LitElement, html } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-loader.styles';\n\ntype LoaderSize = 'large' | 'medium' | 'small' | 'lg' | 'md' | 'sm';\n\nexport interface SDSLoaderProps {\n\tsize?: LoaderSize;\n\tcontrast?: boolean;\n}\n\n@guardedCustomElement('sds-loader')\nexport class SDSLoader extends LitElement {\n\tstatic override styles = [styles];\n\n\t@property({ type: String, reflect: true }) size: LoaderSize = 'md';\n\t@property({ type: Boolean, reflect: true }) contrast: boolean = false;\n\n\toverride render() {\n\t\treturn html`<svg aria-label=\"Laster\" class=\"sds-loader\" role=\"img\" viewBox=\"0 0 50 50\">\n\t\t\t<circle class=\"sds-loader__background\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"7\"></circle>\n\t\t\t<circle class=\"sds-loader__circle\" cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"7\"></circle>\n\t\t</svg>`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-loader': SDSLoader;\n\t}\n}\n"]}
package/dist/sds-loader/sds-loader.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-loader.styles.d.ts","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiFlB,CAAC"}
1
+ {"version":3,"file":"sds-loader.styles.d.ts","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4ElB,CAAC"}
package/dist/sds-loader/sds-loader.styles.js CHANGED
@@ -1,13 +1,23 @@
1
1
  import { css } from 'lit';
2
2
  export const styles = css `
3
3
  :host {
4
- --_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-accent-action-contrast-default));
5
- --_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-accent-border-subtle));
4
+ --_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
5
+ --_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
6
6
  --_sds-loader-animation-duration: var(--sds-loader-animation-duration, 2.5s);
7
7
  --_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-md));
8
8
 
9
9
  display: flex;
10
10
  }
11
+ :host([contrast]):host([data-palette]),
12
+ :host([contrast]) {
13
+ --_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));
14
+ --_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
15
+ }
16
+
17
+ :host([data-palette]) {
18
+ --_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));
19
+ --_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));
20
+ }
11
21
 
12
22
  :host([size='small']), /* Deprecated */
13
23
  :host([size='sm']) {
@@ -19,21 +29,6 @@ export const styles = css `
19
29
  --_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-lg));
20
30
  }
21
31
 
22
- :host([color='accent-contrast']) {
23
- --_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-accent-border-subtle));
24
- --_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-accent-action-default));
25
- }
26
-
27
- :host([color='danger']) {
28
- --_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-alert-danger-action-default));
29
- --_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-alert-danger-border-subtle));
30
- }
31
-
32
- :host([color='danger-contrast']) {
33
- --_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-alert-danger-border-subtle));
34
- --_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-alert-danger-action-contrast-default));
35
- }
36
-
37
32
  .sds-loader {
38
33
  animation: sds-loader-rotate-animation linear infinite var(--_sds-loader-animation-duration);
39
34
  box-sizing: border-box;
package/dist/sds-loader/sds-loader.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-loader.styles.js","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiFxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-accent-action-contrast-default));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-accent-border-subtle));\n\t\t--_sds-loader-animation-duration: var(--sds-loader-animation-duration, 2.5s);\n\t\t--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-md));\n\n\t\tdisplay: flex;\n\t}\n\n\t:host([size='small']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-sm));\n\t}\n\n\t:host([size='large']), /* Deprecated */\n\t:host([size='lg']) {\n\t\t--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-lg));\n\t}\n\n\t:host([color='accent-contrast']) {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-accent-border-subtle));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-accent-action-default));\n\t}\n\n\t:host([color='danger']) {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-alert-danger-action-default));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-alert-danger-border-subtle));\n\t}\n\n\t:host([color='danger-contrast']) {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-alert-danger-border-subtle));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-alert-danger-action-contrast-default));\n\t}\n\n\t.sds-loader {\n\t\tanimation: sds-loader-rotate-animation linear infinite var(--_sds-loader-animation-duration);\n\t\tbox-sizing: border-box;\n\t\tfont-size: var(--_sds-loader-size);\n\t\theight: 1em;\n\t\twidth: 1em;\n\t\tpadding: 1px;\n\t}\n\n\t.sds-loader__background {\n\t\tstroke: var(--_sds-loader-main-color);\n\t}\n\n\t.sds-loader__circle {\n\t\tanimation: sds-loader-stroke-animation ease-in-out infinite var(--_sds-loader-animation-duration);\n\t\tstroke-dasharray: 1px, 200px;\n\t\tstroke: var(--_sds-loader-secondary-color);\n\t\ttransform-origin: center;\n\t}\n\n\t@keyframes sds-loader-rotate-animation {\n\t\t0% {\n\t\t\ttransform: rotate(0);\n\t\t}\n\n\t\tto {\n\t\t\ttransform: rotate(1turn);\n\t\t}\n\t}\n\n\t@keyframes sds-loader-stroke-animation {\n\t\t0% {\n\t\t\tstroke-dasharray: 1px, 200px;\n\t\t\tstroke-dashoffset: 0;\n\t\t}\n\n\t\t50% {\n\t\t\tstroke-dasharray: 100px, 200px;\n\t\t\tstroke-dashoffset: -15px;\n\t\t}\n\n\t\tto {\n\t\t\tstroke-dasharray: 1px, 200px;\n\t\t\tstroke-dashoffset: -120px;\n\t\t}\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-loader.styles.js","sourceRoot":"","sources":["../../src/sds-loader/sds-loader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4ExB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t\t--_sds-loader-animation-duration: var(--sds-loader-animation-duration, 2.5s);\n\t\t--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-md));\n\n\t\tdisplay: flex;\n\t}\n\t:host([contrast]):host([data-palette]),\n\t:host([contrast]) {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-default, var(--sds-color-main-action-default)));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t}\n\n\t:host([data-palette]) {\n\t\t--_sds-loader-main-color: var(--sds-loader-main-color, var(--sds-color-action-contrast-default, var(--sds-color-main-action-contrast-default)));\n\t\t--_sds-loader-secondary-color: var(--sds-loader-secondary-color, var(--sds-color-border-subtle, var(--sds-color-main-border-subtle)));\n\t}\n\n\t:host([size='small']), /* Deprecated */\n\t:host([size='sm']) {\n\t\t--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-sm));\n\t}\n\n\t:host([size='large']), /* Deprecated */\n\t:host([size='lg']) {\n\t\t--_sds-loader-size: var(--sds-loader-size, var(--sds-components-icon-lg));\n\t}\n\n\t.sds-loader {\n\t\tanimation: sds-loader-rotate-animation linear infinite var(--_sds-loader-animation-duration);\n\t\tbox-sizing: border-box;\n\t\tfont-size: var(--_sds-loader-size);\n\t\theight: 1em;\n\t\twidth: 1em;\n\t\tpadding: 1px;\n\t}\n\n\t.sds-loader__background {\n\t\tstroke: var(--_sds-loader-main-color);\n\t}\n\n\t.sds-loader__circle {\n\t\tanimation: sds-loader-stroke-animation ease-in-out infinite var(--_sds-loader-animation-duration);\n\t\tstroke-dasharray: 1px, 200px;\n\t\tstroke: var(--_sds-loader-secondary-color);\n\t\ttransform-origin: center;\n\t}\n\n\t@keyframes sds-loader-rotate-animation {\n\t\t0% {\n\t\t\ttransform: rotate(0);\n\t\t}\n\n\t\tto {\n\t\t\ttransform: rotate(1turn);\n\t\t}\n\t}\n\n\t@keyframes sds-loader-stroke-animation {\n\t\t0% {\n\t\t\tstroke-dasharray: 1px, 200px;\n\t\t\tstroke-dashoffset: 0;\n\t\t}\n\n\t\t50% {\n\t\t\tstroke-dasharray: 100px, 200px;\n\t\t\tstroke-dashoffset: -15px;\n\t\t}\n\n\t\tto {\n\t\t\tstroke-dasharray: 1px, 200px;\n\t\t\tstroke-dashoffset: -120px;\n\t\t}\n\t}\n`;\n"]}
package/dist/sds-nav-card/sds-nav-card.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-nav-card.styles.d.ts","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA4IlB,CAAC"}
1
+ {"version":3,"file":"sds-nav-card.styles.d.ts","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAmJlB,CAAC"}
package/dist/sds-nav-card/sds-nav-card.styles.js CHANGED
@@ -6,13 +6,15 @@ export const styles = css `
6
6
  }
7
7
 
8
8
  .sds-nav-card {
9
- color: var(--sds-color-primary-text-default);
10
- background-color: var(--sds-color-global-lightblue-100); // TODO: Global variable used, should be replaced by a more spesific one
9
+ color: var(--sds-color-semantic-text-default);
10
+ background-color: var(
11
+ --sds-color-global-lightblue-100
12
+ ); // TODO: Global variable used, should be replaced by a more spesific one
11
13
 
12
- font-size: var(--sds-typography-body-md-desktop-font-size);
13
- line-height: var(--sds-typography-body-md-desktop-line-height);
14
- font-weight: var(--sds-typography-body-md-desktop-font-weight);
15
- font-family: var(--sds-typography-font-family-roboto);
14
+ font-size: var(--sds-typography-base-font-size);
15
+ line-height: var(--sds-typography-base-line-height);
16
+ font-weight: var(--sds-typography-base-font-weight);
17
+ font-family: var(--sds-typography-font-family);
16
18
 
17
19
  display: flex;
18
20
  min-height: 10.25rem;
@@ -21,8 +23,8 @@ export const styles = css `
21
23
  max-width: 50rem;
22
24
 
23
25
  box-sizing: border-box;
24
- padding: var(--sds-spacing-lg) var(--sds-spacing-2xl) var(--sds-spacing-xl);
25
- gap: var(--sds-spacing-sm);
26
+ padding: var(--sds-spacing-7) var(--sds-spacing-9) var(--sds-spacing-8);
27
+ gap: var(--sds-spacing-5);
26
28
  text-align: left;
27
29
 
28
30
  cursor: pointer;
@@ -38,22 +40,24 @@ export const styles = css `
38
40
  }
39
41
 
40
42
  &:hover {
41
- background-color: var(--sds-color-global-lightblue-300); // TODO: Global variable used, should be replaced by a more spesific one
43
+ background-color: var(
44
+ --sds-color-global-lightblue-300
45
+ ); // TODO: Global variable used, should be replaced by a more spesific one
42
46
  }
43
47
 
44
48
  &:active,
45
49
  &:focus:active {
46
- background-color: var(--sds-color-primary-action-default);
47
- color: var(--sds-color-primary-action-contrast-default);
50
+ background-color: var(--sds-color-semantic-surface-action-selected);
51
+ color: var(--sds-color-semantic-text-on-action);
48
52
 
49
53
  ::slotted(*) {
50
- stroke: var(--sds-color-primary-action-contrast-default);
54
+ stroke: var(--sds-color-semantic-icon-on-action);
51
55
  }
52
56
  }
53
57
 
54
58
  &:focus {
55
59
  background: var(--sds-color-global-lightblue-100);
56
- outline: 2px solid var(--sds-color-primary-action-default);
60
+ outline: 2px solid var(--sds-color-semantic-surface-action-default);
57
61
  outline-offset: 1px;
58
62
  }
59
63
 
@@ -68,14 +72,14 @@ export const styles = css `
68
72
  }
69
73
 
70
74
  .sds-nav-card--hasIcon {
71
- padding: var(--sds-spacing-lg) var(--sds-spacing-lg) var(--sds-spacing-xl);
75
+ padding: var(--sds-spacing-7) var(--sds-spacing-7) var(--sds-spacing-8);
72
76
  }
73
77
 
74
78
  .sds-nav-card__content {
75
79
  display: flex;
76
80
  flex-direction: column;
77
81
  width: 100%;
78
- gap: var(--sds-spacing-2xs);
82
+ gap: var(--sds-spacing-3);
79
83
  }
80
84
 
81
85
  .sds-nav-card__text {
@@ -90,7 +94,9 @@ export const styles = css `
90
94
  min-width: 4.5rem;
91
95
  width: 4.5rem;
92
96
  align-self: center;
93
- stroke: var(--sds-color-primary-text-default); // TODO: Global variable used, should be replaced by a more spesific one
97
+ stroke: var(
98
+ --sds-color-global-black
99
+ ); // TODO: Global variable used, should be replaced by a more spesific one
94
100
  }
95
101
 
96
102
  .sds-nav-card__heading {
@@ -122,10 +128,11 @@ export const styles = css `
122
128
 
123
129
  .sds-nav-card--small {
124
130
  min-height: 4.5rem;
125
- padding: var(--sds-spacing-sm) var(--sds-spacing-xl) var(--sds-spacing-md);
131
+ padding: var(--sds-spacing-5) var(--sds-spacing-8) var(--sds-spacing-6);
126
132
 
127
133
  .sds-nav-card--hasIcon {
128
- padding: var(--sds-spacing-sm) var(--sds-spacing-lg) var(--sds-spacing-md);
134
+ padding: var(--sds-spacing-5) var(--sds-spacing-7)
135
+ var(--sds-spacing-6);
129
136
  }
130
137
 
131
138
  .sds-nav-card__content {
package/dist/sds-nav-card/sds-nav-card.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-nav-card.styles.js","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4IxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-nav-card {\n\t\tcolor: var(--sds-color-primary-text-default);\n\t\tbackground-color: var(--sds-color-global-lightblue-100); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\tfont-size: var(--sds-typography-body-md-desktop-font-size);\n\t\tline-height: var(--sds-typography-body-md-desktop-line-height);\n\t\tfont-weight: var(--sds-typography-body-md-desktop-font-weight);\n\t\tfont-family: var(--sds-typography-font-family-roboto);\n\n\t\tdisplay: flex;\n\t\tmin-height: 10.25rem;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmax-width: 50rem;\n\n\t\tbox-sizing: border-box;\n\t\tpadding: var(--sds-spacing-lg) var(--sds-spacing-2xl) var(--sds-spacing-xl);\n\t\tgap: var(--sds-spacing-sm);\n\t\ttext-align: left;\n\n\t\tcursor: pointer;\n\n\t\t& p {\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\thyphens: auto;\n\t\t}\n\n\t\t&:link {\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(--sds-color-global-lightblue-300); // TODO: Global variable used, should be replaced by a more spesific one\n\t\t}\n\n\t\t&:active,\n\t\t&:focus:active {\n\t\t\tbackground-color: var(--sds-color-primary-action-default);\n\t\t\tcolor: var(--sds-color-primary-action-contrast-default);\n\n\t\t\t::slotted(*) {\n\t\t\t\tstroke: var(--sds-color-primary-action-contrast-default);\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\tbackground: var(--sds-color-global-lightblue-100);\n\t\t\toutline: 2px solid var(--sds-color-primary-action-default);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-nav-card--hasIcon {\n\t\tpadding: var(--sds-spacing-lg) var(--sds-spacing-lg) var(--sds-spacing-xl);\n\t}\n\n\t.sds-nav-card__content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\tgap: var(--sds-spacing-2xs);\n\t}\n\n\t.sds-nav-card__text {\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: 3;\n\t\t-webkit-box-orient: vertical;\n\t\toverflow: hidden;\n\t}\n\n\t::slotted(*) {\n\t\theight: 4.5rem;\n\t\tmin-width: 4.5rem;\n\t\twidth: 4.5rem;\n\t\talign-self: center;\n\t\tstroke: var(--sds-color-primary-text-default); // TODO: Global variable used, should be replaced by a more spesific one\n\t}\n\n\t.sds-nav-card__heading {\n\t\tfont-weight: 700;\n\t\tfont-size: 1.5rem;\n\t\tmargin: 0;\n\t}\n\n\t.sds-nav-card--medium {\n\t\tmin-height: 7rem;\n\n\t\t.sds-nav-card__text {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: flex;\n\n\t\t\t-webkit-line-clamp: 1;\n\t\t\t-webkit-box-orient: vertical;\n\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 3rem;\n\t\t\tmin-width: 3rem;\n\t\t\twidth: 3rem;\n\t\t}\n\t}\n\n\t.sds-nav-card--small {\n\t\tmin-height: 4.5rem;\n\t\tpadding: var(--sds-spacing-sm) var(--sds-spacing-xl) var(--sds-spacing-md);\n\n\t\t.sds-nav-card--hasIcon {\n\t\t\tpadding: var(--sds-spacing-sm) var(--sds-spacing-lg) var(--sds-spacing-md);\n\t\t}\n\n\t\t.sds-nav-card__content {\n\t\t\tgap: 0;\n\t\t\talign-self: center;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 2.5rem;\n\t\t\tmin-width: 2.5rem;\n\t\t\twidth: 2.5rem;\n\t\t}\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-nav-card.styles.js","sourceRoot":"","sources":["../../src/sds-nav-card/sds-nav-card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmJxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t\tbox-sizing: border-box;\n\t}\n\n\t.sds-nav-card {\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tbackground-color: var(\n\t\t\t--sds-color-global-lightblue-100\n\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\n\t\tfont-size: var(--sds-typography-base-font-size);\n\t\tline-height: var(--sds-typography-base-line-height);\n\t\tfont-weight: var(--sds-typography-base-font-weight);\n\t\tfont-family: var(--sds-typography-font-family);\n\n\t\tdisplay: flex;\n\t\tmin-height: 10.25rem;\n\t\theight: 100%;\n\t\twidth: 100%;\n\t\tmax-width: 50rem;\n\n\t\tbox-sizing: border-box;\n\t\tpadding: var(--sds-spacing-7) var(--sds-spacing-9) var(--sds-spacing-8);\n\t\tgap: var(--sds-spacing-5);\n\t\ttext-align: left;\n\n\t\tcursor: pointer;\n\n\t\t& p {\n\t\t\tpadding: 0;\n\t\t\tmargin: 0;\n\t\t\thyphens: auto;\n\t\t}\n\n\t\t&:link {\n\t\t\ttext-decoration: none;\n\t\t}\n\n\t\t&:hover {\n\t\t\tbackground-color: var(\n\t\t\t\t--sds-color-global-lightblue-300\n\t\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\t\t}\n\n\t\t&:active,\n\t\t&:focus:active {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-action-selected);\n\t\t\tcolor: var(--sds-color-semantic-text-on-action);\n\n\t\t\t::slotted(*) {\n\t\t\t\tstroke: var(--sds-color-semantic-icon-on-action);\n\t\t\t}\n\t\t}\n\n\t\t&:focus {\n\t\t\tbackground: var(--sds-color-global-lightblue-100);\n\t\t\toutline: 2px solid var(--sds-color-semantic-surface-action-default);\n\t\t\toutline-offset: 1px;\n\t\t}\n\n\t\t&:active {\n\t\t\toutline: 0;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tbackground-color: var(--sds-color-semantic-surface-disabled);\n\t\t\tpointer-events: none;\n\t\t}\n\t}\n\n\t.sds-nav-card--hasIcon {\n\t\tpadding: var(--sds-spacing-7) var(--sds-spacing-7) var(--sds-spacing-8);\n\t}\n\n\t.sds-nav-card__content {\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\twidth: 100%;\n\t\tgap: var(--sds-spacing-3);\n\t}\n\n\t.sds-nav-card__text {\n\t\tdisplay: -webkit-box;\n\t\t-webkit-line-clamp: 3;\n\t\t-webkit-box-orient: vertical;\n\t\toverflow: hidden;\n\t}\n\n\t::slotted(*) {\n\t\theight: 4.5rem;\n\t\tmin-width: 4.5rem;\n\t\twidth: 4.5rem;\n\t\talign-self: center;\n\t\tstroke: var(\n\t\t\t--sds-color-global-black\n\t\t); // TODO: Global variable used, should be replaced by a more spesific one\n\t}\n\n\t.sds-nav-card__heading {\n\t\tfont-weight: 700;\n\t\tfont-size: 1.5rem;\n\t\tmargin: 0;\n\t}\n\n\t.sds-nav-card--medium {\n\t\tmin-height: 7rem;\n\n\t\t.sds-nav-card__text {\n\t\t\tdisplay: -webkit-box;\n\t\t\tdisplay: flex;\n\n\t\t\t-webkit-line-clamp: 1;\n\t\t\t-webkit-box-orient: vertical;\n\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 3rem;\n\t\t\tmin-width: 3rem;\n\t\t\twidth: 3rem;\n\t\t}\n\t}\n\n\t.sds-nav-card--small {\n\t\tmin-height: 4.5rem;\n\t\tpadding: var(--sds-spacing-5) var(--sds-spacing-8) var(--sds-spacing-6);\n\n\t\t.sds-nav-card--hasIcon {\n\t\t\tpadding: var(--sds-spacing-5) var(--sds-spacing-7)\n\t\t\t\tvar(--sds-spacing-6);\n\t\t}\n\n\t\t.sds-nav-card__content {\n\t\t\tgap: 0;\n\t\t\talign-self: center;\n\t\t}\n\n\t\t::slotted(*) {\n\t\t\theight: 2.5rem;\n\t\t\tmin-width: 2.5rem;\n\t\t\twidth: 2.5rem;\n\t\t}\n\t}\n`;\n"]}
package/dist/sds-paragraph/sds-paragraph.styles.js CHANGED
@@ -5,9 +5,9 @@ export const styles = css `
5
5
  }
6
6
 
7
7
  .sds-paragraph {
8
- font-family: var(--sds-typography-body-md-font-family);
8
+ font-family: var(--sds-typography-font-family);
9
9
  font-weight: 400;
10
- color: var(--sds-color-primary-text-default);
10
+ color: var(--sds-color-semantic-text-default);
11
11
  margin: 0;
12
12
  max-width: var(--sds-typography-max-line-width);
13
13
  padding: 0;
package/dist/sds-paragraph/sds-paragraph.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-paragraph.styles.js","sourceRoot":"","sources":["../../src/sds-paragraph/sds-paragraph.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-paragraph {\n\t\tfont-family: var(--sds-typography-body-md-font-family);\n\t\tfont-weight: 400;\n\t\tcolor: var(--sds-color-primary-text-default);\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-paragraph--xl {\n\t\tfont-size: 1.25rem;\n\t\tline-height: 1.4;\n\t}\n\n\t.sds-paragraph--l {\n\t\tfont-size: 1.125rem;\n\t\tline-height: 1.333;\n\t}\n\n\t.sds-paragraph--m {\n\t\tfont-size: 1rem;\n\t\tline-height: 1.5;\n\t}\n\n\t@media (max-width: 640px) {\n\t\t.sds-paragraph--m {\n\t\t\tline-height: 1.375;\n\t\t}\n\t}\n`;\n"]}
1
+ {"version":3,"file":"sds-paragraph.styles.js","sourceRoot":"","sources":["../../src/sds-paragraph/sds-paragraph.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkCxB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css`\n\t:host {\n\t\tdisplay: block;\n\t}\n\n\t.sds-paragraph {\n\t\tfont-family: var(--sds-typography-font-family);\n\t\tfont-weight: 400;\n\t\tcolor: var(--sds-color-semantic-text-default);\n\t\tmargin: 0;\n\t\tmax-width: var(--sds-typography-max-line-width);\n\t\tpadding: 0;\n\t}\n\n\t.sds-paragraph--xl {\n\t\tfont-size: 1.25rem;\n\t\tline-height: 1.4;\n\t}\n\n\t.sds-paragraph--l {\n\t\tfont-size: 1.125rem;\n\t\tline-height: 1.333;\n\t}\n\n\t.sds-paragraph--m {\n\t\tfont-size: 1rem;\n\t\tline-height: 1.5;\n\t}\n\n\t@media (max-width: 640px) {\n\t\t.sds-paragraph--m {\n\t\t\tline-height: 1.375;\n\t\t}\n\t}\n`;\n"]}
package/dist/sds-radio/sds-radio.d.ts CHANGED
@@ -24,17 +24,17 @@ export declare class SDSRadio extends LitElement {
24
24
  static styles: import("lit").CSSResult[];
25
25
  static formAssociated: boolean;
26
26
  readonly internals: ElementInternals;
27
- disabled: boolean;
28
- required: boolean;
29
- label: string;
30
- hideLabel: boolean;
31
- name?: string;
32
- value: string;
33
- checked: boolean;
34
- error: boolean;
35
- readOnly: boolean;
36
- size: RadioSize;
37
- helpText?: string;
27
+ disabled: SDSRadioProps['disabled'];
28
+ required: SDSRadioProps['disabled'];
29
+ label: SDSRadioProps['label'];
30
+ hideLabel: SDSRadioProps['hide-label'];
31
+ name?: SDSRadioProps['name'];
32
+ value: SDSRadioProps['value'];
33
+ checked: SDSRadioProps['disabled'];
34
+ error: SDSRadioProps['error'];
35
+ readOnly: SDSRadioProps['readonly'];
36
+ size: SDSRadioProps['size'];
37
+ helpText?: SDSRadioProps['help-text'];
38
38
  control: HTMLInputElement;
39
39
  private _initialChecked;
40
40
  constructor();
package/dist/sds-radio/sds-radio.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"sds-radio.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,cAAc,EAAiB,MAAM,KAAK,CAAC;AAMhE,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAErC,KAAK,SAAS,GAAG,OAAO,CAAC,SAAS,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,CAAC;AAExD,MAAM,WAAW,aAAa;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC;QAAE,OAAO,EAAE,OAAO,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,KAAK,IAAI,CAAC;IAC9E,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAC;CACtC;AAED,qBACa,QAAS,SAAQ,UAAU;IAEvC,OAAgB,MAAM,4BAAY;IAElC,MAAM,CAAC,cAAc,UAAQ;IAC7B,SAAgB,SAAS,EAAE,gBAAgB,CAAC;IAEA,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAS;IAC5C,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAS;IAC7C,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAM;IACT,SAAS,EAAE,aAAa,CAAC,YAAY,CAAC,CAAS;IACzE,IAAI,CAAC,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IAC5C,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAQ;IACrB,OAAO,EAAE,aAAa,CAAC,UAAU,CAAC,CAAS;IAC3C,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAS;IACf,QAAQ,EAAE,aAAa,CAAC,UAAU,CAAC,CAAS;IACpE,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC,CAAQ;IAC1B,QAAQ,CAAC,EAAE,aAAa,CAAC,WAAW,CAAC,CAAC;IAEvE,OAAO,EAAG,gBAAgB,CAAC;IAE9C,OAAO,CAAC,eAAe,CAAkB;;IAQhC,iBAAiB;IASjB,oBAAoB;IAKpB,YAAY,CAAC,kBAAkB,EAAE,cAAc,GAAG,IAAI;IAK/D,OAAO,CAAC,eAAe;IAOvB,OAAO,CAAC,sBAAsB;IAc9B,OAAO,CAAC,QAAQ,CAAC,cAAc,CA4B7B;IAEF,iBAAiB;IAOR,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;IAiB1E,OAAO,CAAC,gBAAgB;IAexB,OAAO,CAAC,QAAQ,CAAC,aAAa,CAc5B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAG3B;IAEF,OAAO,CAAC,QAAQ,CAAC,WAAW,CAG1B;IAEF,OAAO,CAAC,QAAQ,CAAC,YAAY,CAM3B;IAEF,IAAI,IAAI,2BAEP;IAED,IAAI,IAAI,IAAI,MAAM,CAEjB;IAED,IAAI,QAAQ,kBAEX;IAED,IAAI,iBAAiB,WAEpB;IAED,IAAI,YAAY,YAEf;IAED,aAAa,IAAI,OAAO;IAIxB,cAAc,IAAI,OAAO;IAIzB,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;IAIxC,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAKpC,KAAK,IAAI,IAAI;IAIb,IAAI,IAAI,IAAI;IAIZ,KAAK,IAAI,IAAI;IAIb,MAAM;CAiCf;AAED,OAAO,CAAC,MAAM,CAAC;IACd,UAAU,qBAAqB;QAC9B,WAAW,EAAE,QAAQ,CAAC;KACtB;CACD"}
package/dist/sds-radio/sds-radio.js CHANGED
@@ -51,7 +51,7 @@ let SDSRadio = class SDSRadio extends LitElement {
51
51
  };
52
52
  this._handleChange = (event) => {
53
53
  if (this.disabled || this.readOnly) {
54
- event.target.checked = this.checked;
54
+ event.target.checked = this.checked ?? false;
55
55
  event.preventDefault();
56
56
  return;
57
57
  }
@@ -73,7 +73,8 @@ let SDSRadio = class SDSRadio extends LitElement {
73
73
  };
74
74
  this._handleClick = (event) => {
75
75
  event.stopImmediatePropagation();
76
- if (event.currentTarget === event.target && !this.disabled && !this.readOnly) {
76
+ const clickedOnUs = event.target instanceof Node && this.shadowRoot?.contains(event.target);
77
+ if (clickedOnUs && !this.disabled && !this.readOnly) {
77
78
  this.shadowRoot?.querySelector('input')?.click();
78
79
  }
79
80
  };
@@ -84,7 +85,7 @@ let SDSRadio = class SDSRadio extends LitElement {
84
85
  super.connectedCallback();
85
86
  this.internals.role = 'radio';
86
87
  if (!this._initialChecked) {
87
- this._initialChecked = this.checked;
88
+ this._initialChecked = this.checked ?? false;
88
89
  }
89
90
  this.addEventListener('keydown', this._handleKeydown);
90
91
  }
@@ -137,7 +138,7 @@ let SDSRadio = class SDSRadio extends LitElement {
137
138
  this._updateGroupValidation();
138
139
  }
139
140
  if (changedProperties.has('required') && this.control) {
140
- this.control.required = this.required;
141
+ this.control.required = this.required ?? false;
141
142
  }
142
143
  }
143
144
  _uncheckSiblings() {
@@ -212,7 +213,8 @@ let SDSRadio = class SDSRadio extends LitElement {
212
213
  type="radio"
213
214
  name="${ifDefined(this.name)}"
214
215
  value="${ifDefined(this.value)}"
215
- ?checked="${this.checked}"
216
+ ?checked="${this.checked ?? false}"
217
+ .checked="${this.checked ?? false}"
216
218
  ?disabled="${this.disabled}"
217
219
  ?required="${this.required}"
218
220
  ?readonly="${this.readOnly}"
package/dist/sds-radio/sds-radio.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-radio.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio.styles';\nimport { SDS_SIZES } from '../types';\n\ntype RadioSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSRadioProps {\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\terror?: boolean;\n\treadonly?: boolean;\n\tsize?: RadioSize;\n\t'help-text'?: string;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value?: string }>) => void;\n\tonFocus?: (event: CustomEvent) => void;\n\tonBlur?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-radio')\nexport class SDSRadio extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: boolean = false;\n\t@property({ type: Boolean, reflect: true }) required: boolean = false;\n\t@property({ type: String, reflect: true }) label: string = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: boolean = false;\n\t@property({ type: String, reflect: true }) name?: string;\n\t@property({ type: String }) value: string = 'on';\n\t@property({ type: Boolean, reflect: true }) checked = false;\n\t@property({ type: Boolean, reflect: true }) error = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: boolean = false;\n\t@property({ type: String, reflect: true }) size: RadioSize = 'md';\n\t@property({ type: String, attribute: 'help-text' }) helpText?: string;\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.internals.role = 'radio';\n\t\tif (!this._initialChecked) {\n\t\t\tthis._initialChecked = this.checked;\n\t\t}\n\t\tthis.addEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tthis._updateGroupValidation();\n\t}\n\n\tprivate _getGroupRadios(): SDSRadio[] {\n\t\tif (!this.name) return [this];\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radioGroup = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\treturn radioGroup;\n\t}\n\n\tprivate _updateGroupValidation() {\n\t\tconst group: Array<SDSRadio> = this._getGroupRadios();\n\t\tconst isAnyChecked = group.some((radio) => radio.checked);\n\t\tconst isAnyRequired = group.some((radio) => radio.required);\n\t\tgroup.forEach((radio) => {\n\t\t\tif (!radio.control) return;\n\t\t\tif (isAnyRequired) {\n\t\t\t\tradio.internals.setValidity(isAnyChecked ? {} : { valueMissing: true }, isAnyChecked ? '' : radio.control.validationMessage, radio.control);\n\t\t\t} else {\n\t\t\t\tradio.internals.setValidity({});\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleKeydown = (event: KeyboardEvent) => {\n\t\tif (!this.name || this.disabled || this.readOnly) return;\n\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\tconst currentIndex = radios.indexOf(this);\n\n\t\tif (currentIndex === -1) return;\n\n\t\tlet targetIndex: number | null = null;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\ttargetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\ttargetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\tconst targetRadio = radios[targetIndex];\n\t\ttargetRadio?.focus();\n\t\ttargetRadio?.click();\n\t\tevent.preventDefault();\n\t};\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : null);\n\t\tthis._updateGroupValidation();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('checked')) {\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t}\n\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required;\n\t\t}\n\t}\n\n\tprivate _uncheckSiblings() {\n\t\tif (!this.name) return;\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`);\n\n\t\tradios.forEach((radio) => {\n\t\t\tif (radio !== this) {\n\t\t\t\tradio.checked = false;\n\t\t\t\tradio.internals.setFormValue(null);\n\t\t\t\tconst input = radio.shadowRoot?.querySelector('#control') as HTMLInputElement | null;\n\t\t\t\tif (input) input.checked = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tif (this.disabled || this.readOnly) {\n\t\t\t(event.target as HTMLInputElement).checked = this.checked;\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst elem = event.target as HTMLInputElement;\n\t\tthis.checked = elem.checked;\n\t\tif (this.checked) {\n\t\t\tthis._uncheckSiblings();\n\t\t}\n\t\tthis._updateGroupValidation();\n\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tif (event.currentTarget === event.target && !this.disabled && !this.readOnly) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\tget type(): string {\n\t\treturn 'radio';\n\t}\n\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.internals.setValidity({ customError: !!message }, message);\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t\tif (this.control) this.control.disabled = disabled;\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled && !this.readOnly) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst radioClasses = {\n\t\t\t'sds-radio': true,\n\t\t\t'sds-radio--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-radio__input': true,\n\t\t\t'sds-radio__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(radioClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t?checked=\"${this.checked}\"\n\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t/>\n\t\t\t\t${this.label ? html`<label class=\"sds-radio__label\" for=\"control\">${this.label}</label>` : nothing}\n\t\t\t\t${this.helpText ? html`<span class=\"sds-radio__help-text\">${this.helpText}</span>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio': SDSRadio;\n\t}\n}\n"]}
1
+ {"version":3,"file":"sds-radio.js","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, PropertyValues, html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { guardedCustomElement } from '../utils/guarded-custom-element';\nimport { styles } from './sds-radio.styles';\nimport { SDS_SIZES } from '../types';\n\ntype RadioSize = Extract<SDS_SIZES, 'lg' | 'md' | 'sm'>;\n\nexport interface SDSRadioProps {\n\tdisabled?: boolean;\n\trequired?: boolean;\n\tlabel?: string;\n\t'hide-label'?: boolean;\n\tname?: string;\n\tvalue?: string;\n\tchecked?: boolean;\n\terror?: boolean;\n\treadonly?: boolean;\n\tsize?: RadioSize;\n\t'help-text'?: string;\n\tonChange?: (event: CustomEvent<{ checked: boolean; value?: string }>) => void;\n\tonFocus?: (event: CustomEvent) => void;\n\tonBlur?: (event: CustomEvent) => void;\n}\n\n@guardedCustomElement('sds-radio')\nexport class SDSRadio extends LitElement {\n\t// Styling\n\tstatic override styles = [styles];\n\n\tstatic formAssociated = true;\n\tpublic readonly internals: ElementInternals;\n\n\t@property({ type: Boolean, reflect: true }) disabled: SDSRadioProps['disabled'] = false;\n\t@property({ type: Boolean, reflect: true }) required: SDSRadioProps['disabled'] = false;\n\t@property({ type: String, reflect: true }) label: SDSRadioProps['label'] = '';\n\t@property({ type: Boolean, reflect: true, attribute: 'hide-label' }) hideLabel: SDSRadioProps['hide-label'] = false;\n\t@property({ type: String, reflect: true }) name?: SDSRadioProps['name'];\n\t@property({ type: String }) value: SDSRadioProps['value'] = 'on';\n\t@property({ type: Boolean, reflect: true }) checked: SDSRadioProps['disabled'] = false;\n\t@property({ type: Boolean, reflect: true }) error: SDSRadioProps['error'] = false;\n\t@property({ type: Boolean, attribute: 'readonly', reflect: true }) readOnly: SDSRadioProps['readonly'] = false;\n\t@property({ type: String, reflect: true }) size: SDSRadioProps['size'] = 'md';\n\t@property({ type: String, attribute: 'help-text' }) helpText?: SDSRadioProps['help-text'];\n\n\t@query('#control') control!: HTMLInputElement;\n\n\tprivate _initialChecked: boolean = false;\n\n\tconstructor() {\n\t\tsuper();\n\t\tthis.internals = this.attachInternals();\n\t\tthis.attachShadow({ mode: 'open', delegatesFocus: true });\n\t}\n\n\toverride connectedCallback() {\n\t\tsuper.connectedCallback();\n\t\tthis.internals.role = 'radio';\n\t\tif (!this._initialChecked) {\n\t\t\tthis._initialChecked = this.checked ?? false;\n\t\t}\n\t\tthis.addEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride disconnectedCallback() {\n\t\tsuper.disconnectedCallback();\n\t\tthis.removeEventListener('keydown', this._handleKeydown);\n\t}\n\n\toverride firstUpdated(_changedProperties: PropertyValues): void {\n\t\tsuper.firstUpdated(_changedProperties);\n\t\tthis._updateGroupValidation();\n\t}\n\n\tprivate _getGroupRadios(): SDSRadio[] {\n\t\tif (!this.name) return [this];\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radioGroup = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\treturn radioGroup;\n\t}\n\n\tprivate _updateGroupValidation() {\n\t\tconst group: Array<SDSRadio> = this._getGroupRadios();\n\t\tconst isAnyChecked = group.some((radio) => radio.checked);\n\t\tconst isAnyRequired = group.some((radio) => radio.required);\n\t\tgroup.forEach((radio) => {\n\t\t\tif (!radio.control) return;\n\t\t\tif (isAnyRequired) {\n\t\t\t\tradio.internals.setValidity(isAnyChecked ? {} : { valueMissing: true }, isAnyChecked ? '' : radio.control.validationMessage, radio.control);\n\t\t\t} else {\n\t\t\t\tradio.internals.setValidity({});\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleKeydown = (event: KeyboardEvent) => {\n\t\tif (!this.name || this.disabled || this.readOnly) return;\n\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = Array.from(root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`));\n\t\tconst currentIndex = radios.indexOf(this);\n\n\t\tif (currentIndex === -1) return;\n\n\t\tlet targetIndex: number | null = null;\n\n\t\tswitch (event.key) {\n\t\t\tcase 'ArrowUp':\n\t\t\tcase 'ArrowLeft':\n\t\t\t\ttargetIndex = currentIndex > 0 ? currentIndex - 1 : radios.length - 1;\n\t\t\t\tbreak;\n\t\t\tcase 'ArrowDown':\n\t\t\tcase 'ArrowRight':\n\t\t\t\ttargetIndex = currentIndex < radios.length - 1 ? currentIndex + 1 : 0;\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\treturn;\n\t\t}\n\n\t\tconst targetRadio = radios[targetIndex];\n\t\ttargetRadio?.focus();\n\t\ttargetRadio?.click();\n\t\tevent.preventDefault();\n\t};\n\n\tformResetCallback() {\n\t\tthis.checked = this._initialChecked;\n\t\tthis.control.checked = this._initialChecked;\n\t\tthis.internals.setFormValue(this.checked ? this.value ?? 'on' : null);\n\t\tthis._updateGroupValidation();\n\t}\n\n\toverride updated(changedProperties: Map<string | number | symbol, unknown>) {\n\t\tsuper.updated(changedProperties);\n\t\tif (changedProperties.has('checked')) {\n\t\t\tif (this.checked) {\n\t\t\t\tthis._uncheckSiblings();\n\t\t\t\tthis.internals.setFormValue(this.value ?? null);\n\t\t\t} else {\n\t\t\t\tthis.internals.setFormValue(null);\n\t\t\t}\n\t\t\tthis._updateGroupValidation();\n\t\t}\n\n\t\tif (changedProperties.has('required') && this.control) {\n\t\t\tthis.control.required = this.required ?? false;\n\t\t}\n\t}\n\n\tprivate _uncheckSiblings() {\n\t\tif (!this.name) return;\n\t\tconst root = this.getRootNode() as Document | ShadowRoot;\n\t\tconst radios = root.querySelectorAll<SDSRadio>(`sds-radio[name=\"${this.name}\"]`);\n\n\t\tradios.forEach((radio) => {\n\t\t\tif (radio !== this) {\n\t\t\t\tradio.checked = false;\n\t\t\t\tradio.internals.setFormValue(null);\n\t\t\t\tconst input = radio.shadowRoot?.querySelector('#control') as HTMLInputElement | null;\n\t\t\t\tif (input) input.checked = false;\n\t\t\t}\n\t\t});\n\t}\n\n\tprivate readonly _handleChange = (event: Event) => {\n\t\tif (this.disabled || this.readOnly) {\n\t\t\t(event.target as HTMLInputElement).checked = this.checked ?? false;\n\t\t\tevent.preventDefault();\n\t\t\treturn;\n\t\t}\n\n\t\tconst elem = event.target as HTMLInputElement;\n\t\tthis.checked = elem.checked;\n\t\tif (this.checked) {\n\t\t\tthis._uncheckSiblings();\n\t\t}\n\t\tthis._updateGroupValidation();\n\t\tthis.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleFocus = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('focus', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleBlur = (event: Event) => {\n\t\tevent.stopImmediatePropagation();\n\t\tthis.dispatchEvent(new CustomEvent('blur', { bubbles: true, composed: true }));\n\t};\n\n\tprivate readonly _handleClick = (event: FocusEvent) => {\n\t\tevent.stopImmediatePropagation();\n\t\tconst clickedOnUs = event.target instanceof Node && this.shadowRoot?.contains(event.target);\n\t\tif (clickedOnUs && !this.disabled && !this.readOnly) {\n\t\t\tthis.shadowRoot?.querySelector('input')?.click();\n\t\t}\n\t};\n\n\tget form() {\n\t\treturn this.internals.form;\n\t}\n\n\tget type(): string {\n\t\treturn 'radio';\n\t}\n\n\tget validity() {\n\t\treturn this.internals.validity;\n\t}\n\n\tget validationMessage() {\n\t\treturn this.internals.validationMessage;\n\t}\n\n\tget willValidate() {\n\t\treturn this.internals.willValidate;\n\t}\n\n\tcheckValidity(): boolean {\n\t\treturn this.internals.checkValidity();\n\t}\n\n\treportValidity(): boolean {\n\t\treturn this.internals.reportValidity();\n\t}\n\n\tsetCustomValidity(message: string): void {\n\t\tthis.internals.setValidity({ customError: !!message }, message);\n\t}\n\n\tformDisabledCallback(disabled: boolean): void {\n\t\tthis.disabled = disabled;\n\t\tif (this.control) this.control.disabled = disabled;\n\t}\n\n\toverride focus(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.focus();\n\t}\n\n\toverride blur(): void {\n\t\tif (!this.disabled) this.shadowRoot?.querySelector('input')?.blur();\n\t}\n\n\toverride click(): void {\n\t\tif (!this.disabled && !this.readOnly) this.shadowRoot?.querySelector('input')?.click();\n\t}\n\n\toverride render() {\n\t\tconst radioClasses = {\n\t\t\t'sds-radio': true,\n\t\t\t'sds-radio--error': Boolean(this.error),\n\t\t};\n\n\t\tconst inputClasses = {\n\t\t\t'sds-radio__input': true,\n\t\t\t'sds-radio__input--error': Boolean(this.error),\n\t\t};\n\n\t\treturn html`\n\t\t\t<div class=\"${classMap(radioClasses)}\" @click=\"${this._handleClick}\">\n\t\t\t\t<input\n\t\t\t\t\tid=\"control\"\n\t\t\t\t\ttype=\"radio\"\n\t\t\t\t\tname=\"${ifDefined(this.name)}\"\n\t\t\t\t\tvalue=\"${ifDefined(this.value)}\"\n\t\t\t\t\t?checked=\"${this.checked ?? false}\"\n\t\t\t\t\t.checked=\"${this.checked ?? false}\"\n\t\t\t\t\t?disabled=\"${this.disabled}\"\n\t\t\t\t\t?required=\"${this.required}\"\n\t\t\t\t\t?readonly=\"${this.readOnly}\"\n\t\t\t\t\t@change=\"${this._handleChange}\"\n\t\t\t\t\t@focus=\"${this._handleFocus}\"\n\t\t\t\t\t@blur=\"${this._handleBlur}\"\n\t\t\t\t\tclass=\"${classMap(inputClasses)}\"\n\t\t\t\t/>\n\t\t\t\t${this.label ? html`<label class=\"sds-radio__label\" for=\"control\">${this.label}</label>` : nothing}\n\t\t\t\t${this.helpText ? html`<span class=\"sds-radio__help-text\">${this.helpText}</span>` : nothing}\n\t\t\t</div>\n\t\t`;\n\t}\n}\n\ndeclare global {\n\tinterface HTMLElementTagNameMap {\n\t\t'sds-radio': SDSRadio;\n\t}\n}\n"]}
package/dist/sds-radio/sds-radio.styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sds-radio.styles.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAiMlB,CAAC"}
1
+ {"version":3,"file":"sds-radio.styles.d.ts","sourceRoot":"","sources":["../../src/sds-radio/sds-radio.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqMlB,CAAC"}