@govtechsg/sgds-web-component 3.2.0-rc.0 → 3.2.0

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 (179) hide show
  1. package/base/button.js +1 -1
  2. package/base/card.js +1 -1
  3. package/components/Badge/index.umd.js +63 -44
  4. package/components/Badge/index.umd.js.map +1 -1
  5. package/components/Badge/sgds-badge.d.ts +3 -1
  6. package/components/Badge/sgds-badge.js +23 -4
  7. package/components/Badge/sgds-badge.js.map +1 -1
  8. package/components/Button/index.umd.js +1 -1
  9. package/components/Card/index.umd.js +53 -12
  10. package/components/Card/index.umd.js.map +1 -1
  11. package/components/Card/sgds-card.js +5 -3
  12. package/components/Card/sgds-card.js.map +1 -1
  13. package/components/ComboBox/index.umd.js +29 -9
  14. package/components/ComboBox/index.umd.js.map +1 -1
  15. package/components/ComboBox/sgds-combo-box.js +3 -2
  16. package/components/ComboBox/sgds-combo-box.js.map +1 -1
  17. package/components/Datepicker/index.umd.js +1 -1
  18. package/components/Drawer/index.umd.js +2 -2
  19. package/components/Drawer/index.umd.js.map +1 -1
  20. package/components/FileUpload/index.umd.js +1 -1
  21. package/components/IconButton/index.umd.js +1 -1
  22. package/components/Mainnav/index.umd.js +3 -3
  23. package/components/Mainnav/index.umd.js.map +1 -1
  24. package/components/Mainnav/sgds-mainnav-item.d.ts +1 -1
  25. package/components/Mainnav/sgds-mainnav-item.js +2 -2
  26. package/components/Mainnav/sgds-mainnav-item.js.map +1 -1
  27. package/components/Modal/index.umd.js +22 -17
  28. package/components/Modal/index.umd.js.map +1 -1
  29. package/components/Modal/modal.js +1 -1
  30. package/components/Modal/sgds-modal.js +17 -14
  31. package/components/Modal/sgds-modal.js.map +1 -1
  32. package/components/Pagination/index.umd.js +1 -1
  33. package/components/QuantityToggle/index.umd.js +1 -1
  34. package/components/Subnav/index.umd.js +79 -87
  35. package/components/Subnav/index.umd.js.map +1 -1
  36. package/components/Subnav/sgds-subnav-item.d.ts +1 -1
  37. package/components/Subnav/sgds-subnav-item.js +2 -2
  38. package/components/Subnav/sgds-subnav-item.js.map +1 -1
  39. package/components/Subnav/sgds-subnav.d.ts +5 -4
  40. package/components/Subnav/sgds-subnav.js +76 -85
  41. package/components/Subnav/sgds-subnav.js.map +1 -1
  42. package/components/Subnav/subnav-item.js +1 -1
  43. package/components/Subnav/subnav.js +1 -1
  44. package/components/Table/index.d.ts +7 -1
  45. package/components/Table/index.js +6 -0
  46. package/components/Table/index.js.map +1 -1
  47. package/components/Table/index.umd.js +182 -16
  48. package/components/Table/index.umd.js.map +1 -1
  49. package/components/Table/sgds-table-cell.d.ts +13 -0
  50. package/components/Table/sgds-table-cell.js +22 -0
  51. package/components/Table/sgds-table-cell.js.map +1 -0
  52. package/components/Table/sgds-table-head.d.ts +18 -0
  53. package/components/Table/sgds-table-head.js +43 -0
  54. package/components/Table/sgds-table-head.js.map +1 -0
  55. package/components/Table/sgds-table-row.d.ts +13 -0
  56. package/components/Table/sgds-table-row.js +22 -0
  57. package/components/Table/sgds-table-row.js.map +1 -0
  58. package/components/Table/sgds-table.d.ts +5 -2
  59. package/components/Table/sgds-table.js +18 -13
  60. package/components/Table/sgds-table.js.map +1 -1
  61. package/components/Table/table-cell.js +6 -0
  62. package/components/Table/table-cell.js.map +1 -0
  63. package/components/Table/table-head.js +6 -0
  64. package/components/Table/table-head.js.map +1 -0
  65. package/components/Table/table-row.js +6 -0
  66. package/components/Table/table-row.js.map +1 -0
  67. package/components/Table/table.js +1 -1
  68. package/components/Toast/index.umd.js +1 -1
  69. package/components/Toast/toast.js +1 -1
  70. package/components/index.umd.js +146 -128
  71. package/components/index.umd.js.map +1 -1
  72. package/index.umd.js +347 -254
  73. package/index.umd.js.map +1 -1
  74. package/package.json +1 -1
  75. package/react/badge/index.cjs.js +3 -1
  76. package/react/badge/index.cjs.js.map +1 -1
  77. package/react/badge/index.js +3 -1
  78. package/react/badge/index.js.map +1 -1
  79. package/react/base/button.cjs.js +1 -1
  80. package/react/base/button.js +1 -1
  81. package/react/base/card.cjs.js +1 -1
  82. package/react/base/card.js +1 -1
  83. package/react/components/Badge/sgds-badge.cjs.js +23 -4
  84. package/react/components/Badge/sgds-badge.cjs.js.map +1 -1
  85. package/react/components/Badge/sgds-badge.js +23 -4
  86. package/react/components/Badge/sgds-badge.js.map +1 -1
  87. package/react/components/Card/sgds-card.cjs.js +5 -3
  88. package/react/components/Card/sgds-card.cjs.js.map +1 -1
  89. package/react/components/Card/sgds-card.js +5 -3
  90. package/react/components/Card/sgds-card.js.map +1 -1
  91. package/react/components/ComboBox/sgds-combo-box.cjs.js +3 -2
  92. package/react/components/ComboBox/sgds-combo-box.cjs.js.map +1 -1
  93. package/react/components/ComboBox/sgds-combo-box.js +3 -2
  94. package/react/components/ComboBox/sgds-combo-box.js.map +1 -1
  95. package/react/components/Mainnav/sgds-mainnav-item.cjs.js +2 -2
  96. package/react/components/Mainnav/sgds-mainnav-item.cjs.js.map +1 -1
  97. package/react/components/Mainnav/sgds-mainnav-item.js +2 -2
  98. package/react/components/Mainnav/sgds-mainnav-item.js.map +1 -1
  99. package/react/components/Modal/modal.cjs.js +1 -1
  100. package/react/components/Modal/modal.js +1 -1
  101. package/react/components/Modal/sgds-modal.cjs.js +17 -14
  102. package/react/components/Modal/sgds-modal.cjs.js.map +1 -1
  103. package/react/components/Modal/sgds-modal.js +17 -14
  104. package/react/components/Modal/sgds-modal.js.map +1 -1
  105. package/react/components/Subnav/sgds-subnav-item.cjs.js +2 -2
  106. package/react/components/Subnav/sgds-subnav-item.cjs.js.map +1 -1
  107. package/react/components/Subnav/sgds-subnav-item.js +2 -2
  108. package/react/components/Subnav/sgds-subnav-item.js.map +1 -1
  109. package/react/components/Subnav/sgds-subnav.cjs.js +74 -83
  110. package/react/components/Subnav/sgds-subnav.cjs.js.map +1 -1
  111. package/react/components/Subnav/sgds-subnav.js +76 -85
  112. package/react/components/Subnav/sgds-subnav.js.map +1 -1
  113. package/react/components/Subnav/subnav-item.cjs.js +1 -1
  114. package/react/components/Subnav/subnav-item.js +1 -1
  115. package/react/components/Subnav/subnav.cjs.js +1 -1
  116. package/react/components/Subnav/subnav.js +1 -1
  117. package/react/components/Table/sgds-table-cell.cjs.js +28 -0
  118. package/react/components/Table/sgds-table-cell.cjs.js.map +1 -0
  119. package/react/components/Table/sgds-table-cell.js +23 -0
  120. package/react/components/Table/sgds-table-cell.js.map +1 -0
  121. package/react/components/Table/sgds-table-head.cjs.js +49 -0
  122. package/react/components/Table/sgds-table-head.cjs.js.map +1 -0
  123. package/react/components/Table/sgds-table-head.js +44 -0
  124. package/react/components/Table/sgds-table-head.js.map +1 -0
  125. package/react/components/Table/sgds-table-row.cjs.js +28 -0
  126. package/react/components/Table/sgds-table-row.cjs.js.map +1 -0
  127. package/react/components/Table/sgds-table-row.js +23 -0
  128. package/react/components/Table/sgds-table-row.js.map +1 -0
  129. package/react/components/Table/sgds-table.cjs.js +17 -12
  130. package/react/components/Table/sgds-table.cjs.js.map +1 -1
  131. package/react/components/Table/sgds-table.js +18 -13
  132. package/react/components/Table/sgds-table.js.map +1 -1
  133. package/react/components/Table/table-cell.cjs.js +11 -0
  134. package/react/components/Table/table-cell.cjs.js.map +1 -0
  135. package/react/components/Table/table-cell.js +7 -0
  136. package/react/components/Table/table-cell.js.map +1 -0
  137. package/react/components/Table/table-head.cjs.js +11 -0
  138. package/react/components/Table/table-head.cjs.js.map +1 -0
  139. package/react/components/Table/table-head.js +7 -0
  140. package/react/components/Table/table-head.js.map +1 -0
  141. package/react/components/Table/table-row.cjs.js +11 -0
  142. package/react/components/Table/table-row.cjs.js.map +1 -0
  143. package/react/components/Table/table-row.js +7 -0
  144. package/react/components/Table/table-row.js.map +1 -0
  145. package/react/components/Table/table.cjs.js +1 -1
  146. package/react/components/Table/table.js +1 -1
  147. package/react/components/Toast/toast.cjs.js +1 -1
  148. package/react/components/Toast/toast.js +1 -1
  149. package/react/index.cjs.js +26 -20
  150. package/react/index.cjs.js.map +1 -1
  151. package/react/index.d.ts +4 -1
  152. package/react/index.js +4 -1
  153. package/react/index.js.map +1 -1
  154. package/react/table-cell/index.cjs.js +40 -0
  155. package/react/table-cell/index.cjs.js.map +1 -0
  156. package/react/table-cell/index.d.ts +2 -0
  157. package/react/table-cell/index.js +16 -0
  158. package/react/table-cell/index.js.map +1 -0
  159. package/react/table-head/index.cjs.js +40 -0
  160. package/react/table-head/index.cjs.js.map +1 -0
  161. package/react/table-head/index.d.ts +2 -0
  162. package/react/table-head/index.js +16 -0
  163. package/react/table-head/index.js.map +1 -0
  164. package/react/table-row/index.cjs.js +40 -0
  165. package/react/table-row/index.cjs.js.map +1 -0
  166. package/react/table-row/index.d.ts +2 -0
  167. package/react/table-row/index.js +16 -0
  168. package/react/table-row/index.js.map +1 -0
  169. package/react/utils/breakpoints.cjs.js.map +1 -1
  170. package/react/utils/breakpoints.js.map +1 -1
  171. package/react/utils/scroll.cjs.js +2 -2
  172. package/react/utils/scroll.cjs.js.map +1 -1
  173. package/react/utils/scroll.js +2 -2
  174. package/react/utils/scroll.js.map +1 -1
  175. package/themes/root.css +6 -0
  176. package/utils/breakpoints.d.ts +1 -0
  177. package/utils/breakpoints.js.map +1 -1
  178. package/utils/scroll.js +2 -2
  179. package/utils/scroll.js.map +1 -1
package/components/FileUpload/index.umd.js CHANGED
@@ -5065,7 +5065,7 @@
5065
5065
  */
5066
5066
  const html = withStatic(html$1);
5067
5067
 
5068
- var css_248z$8 = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
5068
+ var css_248z$8 = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
5069
5069
 
5070
5070
  class ButtonElement extends SgdsElement {
5071
5071
  constructor() {
package/components/IconButton/index.umd.js CHANGED
@@ -4528,7 +4528,7 @@
4528
4528
  /** @internal */
4529
4529
  SgdsElement.dependencies = {};
4530
4530
 
4531
- var css_248z$2 = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
4531
+ var css_248z$2 = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
4532
4532
 
4533
4533
  class ButtonElement extends SgdsElement {
4534
4534
  constructor() {
package/components/Mainnav/index.umd.js CHANGED
@@ -5226,7 +5226,7 @@
5226
5226
  */
5227
5227
  const html = withStatic(html$1);
5228
5228
 
5229
- var css_248z$8 = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
5229
+ var css_248z$8 = css`:host{--btn-font-weight:var(--sgds-font-weight-regular);--btn-bg:var(--sgds-primary-surface-default);--btn-hover-bg:var(--sgds-primary-surface-emphasis);--btn-border-radius:var(--sgds-border-radius-md)}:host([variant=primary]){--btn-bg:var(--sgds-primary-surface-default);--btn-color:var(--sgds-color-fixed-light)}:host([variant=outline]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default);--btn-border-width:var(--sgds-border-width-1);--btn-border-color:var(--sgds-primary-border-color-default)}:host([variant=ghost]){--btn-bg:var(--sgds-bg-transparent);--btn-hover-bg:var(--sgds-primary-surface-translucent);--btn-color:var(--sgds-primary-color-default)}:host([variant=danger]){--btn-bg:var(--sgds-danger-surface-default);--btn-hover-bg:var(--sgds-danger-surface-emphasis);--btn-color:var(--sgds-color-fixed-light)}:host([variant=ghost]) .btn,:host([variant=outline]) .btn,:host([variant=primary]) .btn{color:var(--btn-color)}:host([variant=outline]) .btn{border:var(--btn-border-width) solid var(--btn-border-color)}:host([size=lg]) .btn{font-size:var(--sgds-font-size-3);height:var(--sgds-dimension-56);min-width:var(--sgds-dimension-112);padding:0 var(--sgds-padding-xl)}:host([size=sm]) .btn{font-size:var(--sgds-font-size-1);height:var(--sgds-dimension-40);line-height:var(--sgds-line-height-min);min-width:var(--sgds-dimension-80);padding:0 var(--sgds-padding-md)}.btn{align-items:center;background-color:var(--btn-bg);border:1px solid var(--sgds-border-color-transparent);border-radius:var(--btn-border-radius);color:var(--sgds-color-fixed-light);cursor:pointer;display:inline-flex;font-size:var(--sgds-font-size-2);font-weight:var(--btn-font-weight);gap:var(--sgds-gap-2-xs);height:var(--sgds-dimension-48);justify-content:center;line-height:var(--sgds-line-height-body);min-width:var(--sgds-dimension-96);padding:0 var(--sgds-padding-lg);text-align:center;text-decoration:none;transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;user-select:none;vertical-align:middle;white-space:nowrap;width:inherit}@media (prefers-reduced-motion:reduce){.btn{transition:none}}.btn.active,.btn:hover{background-color:var(--btn-hover-bg)}.btn:focus,.btn:focus-visible{background-color:var(--btn-hover-bg);border-color:transparent;box-shadow:var(--sgds-box-shadow-focus);outline:0}.btn.disabled,.btn:disabled{color:var(--btn-color);cursor:not-allowed;opacity:var(--sgds-opacity-50)}.btn slot::slotted(*){color:var(--btn-color)}`;
5230
5230
 
5231
5231
  class ButtonElement extends SgdsElement {
5232
5232
  constructor() {
@@ -12479,7 +12479,7 @@
12479
12479
  class SgdsMainnavItem extends SgdsElement {
12480
12480
  constructor() {
12481
12481
  super(...arguments);
12482
- /** when true, sets the active stylings of .nav-link */
12482
+ /** when true, sets the active stylings of the navigation item */
12483
12483
  this.active = false;
12484
12484
  /** Disables the SgdsMainnavItem */
12485
12485
  this.disabled = false;
@@ -12522,7 +12522,7 @@
12522
12522
  }
12523
12523
  SgdsMainnavItem.styles = [...SgdsElement.styles, css_248z];
12524
12524
  __decorate([
12525
- property({ type: Boolean })
12525
+ property({ type: Boolean, reflect: true })
12526
12526
  ], SgdsMainnavItem.prototype, "active", void 0);
12527
12527
  __decorate([
12528
12528
  property({ type: Boolean, reflect: true })