@sbb-esta/lyne-elements 1.0.0 → 1.2.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 (234) hide show
  1. package/accordion/accordion.d.ts +1 -1
  2. package/accordion/accordion.d.ts.map +1 -1
  3. package/alert/alert/alert.d.ts +1 -1
  4. package/alert/alert/alert.d.ts.map +1 -1
  5. package/button/common/button-common.d.ts.map +1 -1
  6. package/button/mini-button.js +5 -5
  7. package/calendar/calendar.d.ts +3 -1
  8. package/calendar/calendar.d.ts.map +1 -1
  9. package/calendar.js +62 -52
  10. package/card/common/card-action-common.d.ts.map +1 -1
  11. package/checkbox/common/checkbox-common.d.ts.map +1 -1
  12. package/clock/clock.d.ts +19 -13
  13. package/clock/clock.d.ts.map +1 -1
  14. package/clock.js +93 -87
  15. package/core/decorators/host-attributes.d.ts.map +1 -1
  16. package/core/eventing/throttle.d.ts.map +1 -1
  17. package/core/i18n/i18n.d.ts +1 -3
  18. package/core/i18n/i18n.d.ts.map +1 -1
  19. package/core/i18n.js +91 -127
  20. package/core/mixins/disabled-mixin.d.ts.map +1 -1
  21. package/core/mixins/form-associated-checkbox-mixin.d.ts.map +1 -1
  22. package/core/mixins/form-associated-mixin.d.ts.map +1 -1
  23. package/core/mixins/hydration-mixin.d.ts +2 -8
  24. package/core/mixins/hydration-mixin.d.ts.map +1 -1
  25. package/core/mixins/named-slot-list-mixin.d.ts.map +1 -1
  26. package/core/mixins/negative-mixin.d.ts.map +1 -1
  27. package/core/mixins/panel-mixin.d.ts.map +1 -1
  28. package/core/mixins/required-mixin.d.ts.map +1 -1
  29. package/core/mixins/update-scheduler-mixin.d.ts.map +1 -1
  30. package/core/mixins.js +133 -148
  31. package/core/observers/intersection-observer.d.ts +1 -1
  32. package/core/styles/_index.scss +1 -0
  33. package/core/styles/mixins/buttons.scss +1 -1
  34. package/core/styles/mixins/table.scss +148 -0
  35. package/core/styles/standard-theme.scss +1 -0
  36. package/core/styles/table.scss +56 -0
  37. package/core/testing/private.d.ts +0 -1
  38. package/core/testing/private.d.ts.map +1 -1
  39. package/core/testing/wait-for-render.d.ts +1 -1
  40. package/core/testing/wait-for-render.d.ts.map +1 -1
  41. package/core/testing.js +40 -37
  42. package/custom-elements.json +498 -997
  43. package/datepicker/datepicker-next-day.js +5 -5
  44. package/datepicker/datepicker-previous-day.js +1 -1
  45. package/datepicker/datepicker-toggle.js +7 -7
  46. package/development/accordion/accordion.d.ts +1 -1
  47. package/development/accordion/accordion.d.ts.map +1 -1
  48. package/development/accordion.js +7 -1
  49. package/development/action-group.js +7 -1
  50. package/development/alert/alert/alert.d.ts +1 -1
  51. package/development/alert/alert/alert.d.ts.map +1 -1
  52. package/development/alert/alert-group.js +7 -1
  53. package/development/alert/alert.js +7 -1
  54. package/development/autocomplete.js +7 -1
  55. package/development/breadcrumb/breadcrumb-group.js +7 -1
  56. package/development/breadcrumb/breadcrumb.js +7 -1
  57. package/development/button/common/button-common.d.ts.map +1 -1
  58. package/development/button/common.js +7 -1
  59. package/development/button/mini-button.js +8 -2
  60. package/development/calendar/calendar.d.ts +3 -1
  61. package/development/calendar/calendar.d.ts.map +1 -1
  62. package/development/calendar.js +18 -2
  63. package/development/card/card-badge.js +7 -1
  64. package/development/card/card.js +7 -1
  65. package/development/card/common/card-action-common.d.ts.map +1 -1
  66. package/development/card/common.js +7 -1
  67. package/development/checkbox/checkbox-group.js +7 -1
  68. package/development/checkbox/checkbox.js +7 -1
  69. package/development/checkbox/common/checkbox-common.d.ts.map +1 -1
  70. package/development/checkbox/common.js +7 -1
  71. package/development/chip.js +7 -1
  72. package/development/clock/clock.d.ts +19 -13
  73. package/development/clock/clock.d.ts.map +1 -1
  74. package/development/clock.js +103 -94
  75. package/development/container/container.js +7 -1
  76. package/development/container/sticky-bar.js +7 -1
  77. package/development/core/decorators/host-attributes.d.ts.map +1 -1
  78. package/development/core/eventing/throttle.d.ts.map +1 -1
  79. package/development/core/i18n/i18n.d.ts +1 -3
  80. package/development/core/i18n/i18n.d.ts.map +1 -1
  81. package/development/core/i18n.js +5 -43
  82. package/development/core/mixins/disabled-mixin.d.ts.map +1 -1
  83. package/development/core/mixins/form-associated-checkbox-mixin.d.ts.map +1 -1
  84. package/development/core/mixins/form-associated-mixin.d.ts.map +1 -1
  85. package/development/core/mixins/hydration-mixin.d.ts +2 -8
  86. package/development/core/mixins/hydration-mixin.d.ts.map +1 -1
  87. package/development/core/mixins/named-slot-list-mixin.d.ts.map +1 -1
  88. package/development/core/mixins/negative-mixin.d.ts.map +1 -1
  89. package/development/core/mixins/panel-mixin.d.ts.map +1 -1
  90. package/development/core/mixins/required-mixin.d.ts.map +1 -1
  91. package/development/core/mixins/update-scheduler-mixin.d.ts.map +1 -1
  92. package/development/core/mixins.js +39 -50
  93. package/development/core/observers/intersection-observer.d.ts +1 -1
  94. package/development/core/testing/private.d.ts +0 -1
  95. package/development/core/testing/private.d.ts.map +1 -1
  96. package/development/core/testing/wait-for-render.d.ts +1 -1
  97. package/development/core/testing/wait-for-render.d.ts.map +1 -1
  98. package/development/core/testing.js +6 -2
  99. package/development/datepicker/datepicker-next-day.js +8 -2
  100. package/development/datepicker/datepicker-previous-day.js +8 -2
  101. package/development/datepicker/datepicker-toggle.js +7 -2
  102. package/development/datepicker/datepicker.js +7 -1
  103. package/development/dialog/dialog-actions.js +7 -1
  104. package/development/dialog/dialog-content.js +7 -1
  105. package/development/dialog/dialog-title.js +7 -1
  106. package/development/dialog/dialog.js +7 -1
  107. package/development/divider.js +7 -1
  108. package/development/expansion-panel/expansion-panel-content.js +7 -1
  109. package/development/expansion-panel/expansion-panel-header.js +7 -1
  110. package/development/expansion-panel/expansion-panel.js +7 -1
  111. package/development/file-selector.js +7 -1
  112. package/development/footer.js +7 -1
  113. package/development/form-error.js +7 -1
  114. package/development/form-field/form-field-clear.js +8 -2
  115. package/development/form-field/form-field.js +7 -1
  116. package/development/header/common/header-action-common.d.ts.map +1 -1
  117. package/development/header/common.js +7 -1
  118. package/development/header/header.js +7 -1
  119. package/development/icon/icon-name-mixin.d.ts.map +1 -1
  120. package/development/icon/icon-request.d.ts.map +1 -1
  121. package/development/icon.js +14 -13
  122. package/development/image.js +7 -1
  123. package/development/journey-header.js +7 -1
  124. package/development/lead-container.js +7 -1
  125. package/development/link/common/block-link-common.d.ts.map +1 -1
  126. package/development/link/common/inline-link-common.d.ts.map +1 -1
  127. package/development/link/common/link-common.d.ts.map +1 -1
  128. package/development/link/common.js +19 -1
  129. package/development/link-list.js +7 -1
  130. package/development/loading-indicator.js +7 -1
  131. package/development/logo.js +7 -1
  132. package/development/map-container.js +7 -1
  133. package/development/menu/common/menu-action-common.d.ts.map +1 -1
  134. package/development/menu/common.js +7 -1
  135. package/development/menu/menu.js +7 -1
  136. package/development/message.js +7 -1
  137. package/development/navigation/common/navigation-action-common.d.ts.map +1 -1
  138. package/development/navigation/common.js +7 -1
  139. package/development/navigation/navigation-list.js +7 -1
  140. package/development/navigation/navigation-marker.js +7 -1
  141. package/development/navigation/navigation-section.js +7 -1
  142. package/development/navigation/navigation.js +7 -1
  143. package/development/notification.js +8 -1
  144. package/development/option/optgroup/optgroup.d.ts +2 -0
  145. package/development/option/optgroup/optgroup.d.ts.map +1 -1
  146. package/development/option/optgroup.js +21 -4
  147. package/development/option/option/option.d.ts +6 -5
  148. package/development/option/option/option.d.ts.map +1 -1
  149. package/development/option/option.js +53 -29
  150. package/development/overlay.js +7 -1
  151. package/development/popover/popover-trigger.js +8 -2
  152. package/development/popover/popover.js +7 -1
  153. package/development/radio-button/common/radio-button-common.d.ts.map +1 -1
  154. package/development/radio-button/common.js +7 -1
  155. package/development/radio-button/radio-button-group.js +7 -1
  156. package/development/radio-button/radio-button.js +7 -1
  157. package/development/screen-reader-only.js +7 -1
  158. package/development/select.js +7 -1
  159. package/development/selection-expansion-panel.js +7 -1
  160. package/development/signet.js +7 -1
  161. package/development/skiplink-list.js +7 -1
  162. package/development/slider.js +7 -1
  163. package/development/status.js +7 -1
  164. package/development/stepper/step-label.js +7 -1
  165. package/development/stepper/step.js +7 -1
  166. package/development/stepper/stepper.js +7 -1
  167. package/development/table/table-wrapper/table-wrapper.d.ts +24 -0
  168. package/development/table/table-wrapper/table-wrapper.d.ts.map +1 -0
  169. package/development/table/table-wrapper.d.ts +2 -0
  170. package/development/table/table-wrapper.d.ts.map +1 -0
  171. package/development/table/table-wrapper.js +130 -0
  172. package/development/table.d.ts +2 -0
  173. package/development/table.d.ts.map +1 -0
  174. package/development/table.js +2 -0
  175. package/development/tabs/tab-group/tab-group.d.ts +4 -7
  176. package/development/tabs/tab-group/tab-group.d.ts.map +1 -1
  177. package/development/tabs/tab-group.js +69 -73
  178. package/development/tabs/tab-label.js +7 -1
  179. package/development/tabs/tab.js +7 -1
  180. package/development/tag/tag-group.js +7 -1
  181. package/development/tag/tag.js +7 -1
  182. package/development/teaser.js +7 -1
  183. package/development/time-input.js +7 -1
  184. package/development/timetable-occupancy-icon.js +7 -1
  185. package/development/timetable-occupancy.js +7 -1
  186. package/development/title.js +13 -1
  187. package/development/toast.js +7 -1
  188. package/development/toggle/toggle-option.js +7 -1
  189. package/development/toggle/toggle.js +7 -1
  190. package/development/toggle-check/toggle-check.d.ts +2 -2
  191. package/development/toggle-check/toggle-check.d.ts.map +1 -1
  192. package/development/toggle-check.js +7 -1
  193. package/development/train/train-blocked-passage.js +7 -1
  194. package/development/train/train-formation.js +7 -1
  195. package/development/train/train-wagon.js +7 -1
  196. package/development/train/train.js +7 -1
  197. package/development/visual-checkbox.js +9 -3
  198. package/form-field/form-field-clear.js +1 -1
  199. package/header/common/header-action-common.d.ts.map +1 -1
  200. package/icon/icon-name-mixin.d.ts.map +1 -1
  201. package/icon/icon-request.d.ts.map +1 -1
  202. package/icon.js +86 -86
  203. package/index.d.ts +2 -0
  204. package/index.js +2 -0
  205. package/link/common/block-link-common.d.ts.map +1 -1
  206. package/link/common/inline-link-common.d.ts.map +1 -1
  207. package/link/common/link-common.d.ts.map +1 -1
  208. package/menu/common/menu-action-common.d.ts.map +1 -1
  209. package/navigation/common/navigation-action-common.d.ts.map +1 -1
  210. package/notification.js +1 -1
  211. package/option/optgroup/optgroup.d.ts +2 -0
  212. package/option/optgroup/optgroup.d.ts.map +1 -1
  213. package/option/optgroup.js +24 -21
  214. package/option/option/option.d.ts +6 -5
  215. package/option/option/option.d.ts.map +1 -1
  216. package/option/option.js +72 -69
  217. package/package.json +11 -1
  218. package/popover/popover-trigger.js +1 -1
  219. package/radio-button/common/radio-button-common.d.ts.map +1 -1
  220. package/standard-theme.css +196 -0
  221. package/table/table-wrapper/table-wrapper.d.ts +24 -0
  222. package/table/table-wrapper/table-wrapper.d.ts.map +1 -0
  223. package/table/table-wrapper.d.ts +2 -0
  224. package/table/table-wrapper.d.ts.map +1 -0
  225. package/table/table-wrapper.js +39 -0
  226. package/table.d.ts +2 -0
  227. package/table.d.ts.map +1 -0
  228. package/table.js +1 -0
  229. package/tabs/tab-group/tab-group.d.ts +4 -7
  230. package/tabs/tab-group/tab-group.d.ts.map +1 -1
  231. package/tabs/tab-group.js +80 -81
  232. package/toggle-check/toggle-check.d.ts +2 -2
  233. package/toggle-check/toggle-check.d.ts.map +1 -1
  234. package/visual-checkbox.js +4 -4
@@ -20,6 +20,12 @@ sub, sup {
20
20
  }
21
21
 
22
22
  /** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
23
+ /*
24
+ * SBB table mixin
25
+ * Notes:
26
+ * We cannot use `border-collapse` because it is not compatible with the `border-radius` property.
27
+ * Therefore, we have to build the grid avoiding double borders.
28
+ */
23
29
  /*! modern-normalize v1.1.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
24
30
  /*
25
31
  Document
@@ -1738,4 +1744,194 @@ sup {
1738
1744
  }
1739
1745
  .sbb-step-list > li > * + p {
1740
1746
  margin-block-start: var(--sbb-spacing-responsive-xxxs);
1747
+ }
1748
+
1749
+ .sbb-table,
1750
+ .sbb-table-m,
1751
+ .sbb-table-s {
1752
+ --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
1753
+ --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
1754
+ --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
1755
+ --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
1756
+ --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
1757
+ --sbb-table-border-color: var(--sbb-color-cloud);
1758
+ --sbb-table-border-radius: var(--sbb-border-radius-4x);
1759
+ --sbb-table-background-color: var(--sbb-color-white);
1760
+ --sbb-table-row-striped-color: var(--sbb-color-milk);
1761
+ --sbb-table-color: inherit;
1762
+ --sbb-table-caption-color: var(--sbb-color-granite);
1763
+ --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
1764
+ background-color: var(--sbb-table-background-color);
1765
+ border: var(--sbb-table-border);
1766
+ border-radius: var(--sbb-table-border-radius);
1767
+ border-spacing: 0;
1768
+ caption-side: bottom;
1769
+ color: var(--sbb-table-color);
1770
+ table-layout: auto;
1771
+ }
1772
+ .sbb-table tbody tr:nth-child(odd),
1773
+ .sbb-table-m tbody tr:nth-child(odd),
1774
+ .sbb-table-s tbody tr:nth-child(odd) {
1775
+ background-color: var(--sbb-table-row-striped-color);
1776
+ }
1777
+ .sbb-table thead > tr > th,
1778
+ .sbb-table-m thead > tr > th,
1779
+ .sbb-table-s thead > tr > th {
1780
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
1781
+ font-family: var(--sbb-typo-font-family);
1782
+ font-weight: normal;
1783
+ line-height: var(--sbb-typo-line-height-body-text);
1784
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1785
+ font-size: var(--sbb-text-font-size);
1786
+ font-weight: bold;
1787
+ border-bottom: var(--sbb-table-border);
1788
+ border-right: var(--sbb-table-border);
1789
+ padding-block: var(--sbb-table-header-padding-block);
1790
+ padding-inline: var(--sbb-table-header-padding-inline);
1791
+ text-align: left;
1792
+ }
1793
+ .sbb-table thead > tr > th:last-of-type,
1794
+ .sbb-table-m thead > tr > th:last-of-type,
1795
+ .sbb-table-s thead > tr > th:last-of-type {
1796
+ border-right: none;
1797
+ }
1798
+ .sbb-table tbody > tr:first-of-type td,
1799
+ .sbb-table-m tbody > tr:first-of-type td,
1800
+ .sbb-table-s tbody > tr:first-of-type td {
1801
+ border-top: none;
1802
+ }
1803
+ .sbb-table tbody > tr > td,
1804
+ .sbb-table-m tbody > tr > td,
1805
+ .sbb-table-s tbody > tr > td {
1806
+ --sbb-text-font-size: var(--sbb-font-size-text-s);
1807
+ font-family: var(--sbb-typo-font-family);
1808
+ font-weight: normal;
1809
+ line-height: var(--sbb-typo-line-height-body-text);
1810
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1811
+ font-size: var(--sbb-text-font-size);
1812
+ border-top: var(--sbb-table-border);
1813
+ border-right: var(--sbb-table-border);
1814
+ padding-block: var(--sbb-table-cell-padding-block);
1815
+ padding-inline: var(--sbb-table-cell-padding-inline);
1816
+ }
1817
+ .sbb-table tbody > tr > td:last-of-type,
1818
+ .sbb-table-m tbody > tr > td:last-of-type,
1819
+ .sbb-table-s tbody > tr > td:last-of-type {
1820
+ border-right: none;
1821
+ }
1822
+ .sbb-table caption,
1823
+ .sbb-table-m caption,
1824
+ .sbb-table-s caption {
1825
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
1826
+ font-family: var(--sbb-typo-font-family);
1827
+ font-weight: normal;
1828
+ line-height: var(--sbb-typo-line-height-body-text);
1829
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1830
+ font-size: var(--sbb-text-font-size);
1831
+ color: var(--sbb-table-caption-color, var(--sbb-color-granite));
1832
+ margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
1833
+ text-align: left;
1834
+ }
1835
+
1836
+ .sbb-table-m {
1837
+ --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
1838
+ --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
1839
+ --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
1840
+ --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
1841
+ }
1842
+
1843
+ .sbb-table-s {
1844
+ --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
1845
+ --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
1846
+ --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
1847
+ --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
1848
+ }
1849
+ .sbb-table-s tbody > tr > td {
1850
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
1851
+ font-family: var(--sbb-typo-font-family);
1852
+ font-weight: normal;
1853
+ line-height: var(--sbb-typo-line-height-body-text);
1854
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1855
+ font-size: var(--sbb-text-font-size);
1856
+ }
1857
+
1858
+ sbb-table-wrapper[negative] .sbb-table,
1859
+ .sbb-table--negative {
1860
+ --sbb-table-border-color: var(--sbb-color-anthracite);
1861
+ --sbb-table-background-color: var(--sbb-color-midnight);
1862
+ --sbb-table-color: var(--sbb-color-white);
1863
+ --sbb-table-row-striped-color: var(--sbb-color-charcoal);
1864
+ --sbb-table-caption-color: var(--sbb-color-cement);
1865
+ }
1866
+
1867
+ .sbb-table--striped tbody tr:nth-child(odd) {
1868
+ background-color: var(--sbb-table-row-striped-color);
1869
+ }
1870
+
1871
+ .sbb-table--unstriped tbody tr:nth-child(odd) {
1872
+ background-color: unset;
1873
+ }
1874
+
1875
+ .sbb-table--theme-iron {
1876
+ --sbb-table-cell-color: var(--sbb-color-iron);
1877
+ }
1878
+ .sbb-table--theme-iron tbody > tr > td {
1879
+ color: var(--sbb-table-cell-color);
1880
+ }
1881
+ .sbb-table--theme-iron.sbb-table--negative {
1882
+ --sbb-table-cell-color: var(--sbb-color-cloud);
1883
+ }
1884
+
1885
+ .sbb-table-header-cell {
1886
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
1887
+ font-family: var(--sbb-typo-font-family);
1888
+ font-weight: normal;
1889
+ line-height: var(--sbb-typo-line-height-body-text);
1890
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1891
+ font-size: var(--sbb-text-font-size);
1892
+ font-weight: bold;
1893
+ border-bottom: var(--sbb-table-border);
1894
+ border-right: var(--sbb-table-border);
1895
+ padding-block: var(--sbb-table-header-padding-block);
1896
+ padding-inline: var(--sbb-table-header-padding-inline);
1897
+ text-align: left;
1898
+ }
1899
+ .sbb-table-header-cell:last-of-type {
1900
+ border-right: none;
1901
+ }
1902
+
1903
+ .sbb-table-data-row:first-of-type td {
1904
+ border-top: none;
1905
+ }
1906
+
1907
+ .sbb-table-row--striped {
1908
+ background-color: var(--sbb-table-row-striped-color);
1909
+ }
1910
+
1911
+ .sbb-table-data-cell {
1912
+ --sbb-text-font-size: var(--sbb-font-size-text-s);
1913
+ font-family: var(--sbb-typo-font-family);
1914
+ font-weight: normal;
1915
+ line-height: var(--sbb-typo-line-height-body-text);
1916
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1917
+ font-size: var(--sbb-text-font-size);
1918
+ border-top: var(--sbb-table-border);
1919
+ border-right: var(--sbb-table-border);
1920
+ padding-block: var(--sbb-table-cell-padding-block);
1921
+ padding-inline: var(--sbb-table-cell-padding-inline);
1922
+ }
1923
+ .sbb-table-data-cell:last-of-type {
1924
+ border-right: none;
1925
+ }
1926
+
1927
+ .sbb-table-caption {
1928
+ --sbb-text-font-size: var(--sbb-font-size-text-xs);
1929
+ font-family: var(--sbb-typo-font-family);
1930
+ font-weight: normal;
1931
+ line-height: var(--sbb-typo-line-height-body-text);
1932
+ letter-spacing: var(--sbb-typo-letter-spacing-body-text);
1933
+ font-size: var(--sbb-text-font-size);
1934
+ color: var(--sbb-table-caption-color, var(--sbb-color-granite));
1935
+ margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
1936
+ text-align: left;
1741
1937
  }
@@ -0,0 +1,24 @@
1
+ import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
2
+
3
+ declare const SbbTableWrapperElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbNegativeMixinType> & typeof LitElement;
4
+ /**
5
+ * Wraps a table to enhance its functionality
6
+ *
7
+ * @slot - Use the unnamed slot to add the table.
8
+ */
9
+ export declare class SbbTableWrapperElement extends SbbTableWrapperElement_base {
10
+ static styles: CSSResultGroup;
11
+ private _resizeObserver;
12
+ private _tableWrapper;
13
+ disconnectedCallback(): void;
14
+ protected firstUpdated(changedProperties: PropertyValues): void;
15
+ private _checkHorizontalScrollbar;
16
+ protected render(): TemplateResult;
17
+ }
18
+ declare global {
19
+ interface HTMLElementTagNameMap {
20
+ 'sbb-table-wrapper': SbbTableWrapperElement;
21
+ }
22
+ }
23
+ export {};
24
+ //# sourceMappingURL=table-wrapper.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAQb;;;;GAIG;AACH,qBACa,sBAAuB,SAAQ,2BAA4B;IACtE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAAsE;IAC7F,OAAO,CAAC,aAAa,CAAe;IAEpB,oBAAoB,IAAI,IAAI;cAKzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMxE,OAAO,CAAC,yBAAyB;cAOd,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
@@ -0,0 +1,2 @@
1
+ export * from './table-wrapper/table-wrapper.js';
2
+ //# sourceMappingURL=table-wrapper.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../src/elements/table/table-wrapper.ts"],"names":[],"mappings":"AAAA,cAAc,kCAAkC,CAAC"}
@@ -0,0 +1,39 @@
1
+ import { css as c, LitElement as i, html as p } from "lit";
2
+ import { customElement as h } from "lit/decorators.js";
3
+ import { SbbNegativeMixin as d } from "../core/mixins.js";
4
+ import { AgnosticResizeObserver as n } from "../core/observers.js";
5
+ const v = c`*,:before,:after{box-sizing:border-box}:host{--sbb-table-wrapper-border-radius: var(--sbb-border-radius-4x);display:block}::slotted(.sbb-table){width:100%}.sbb-table-wrapper{overflow:auto;--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-cloud);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-table-wrapper::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-table-wrapper::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-table-wrapper::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-table-wrapper::-webkit-scrollbar-button,.sbb-table-wrapper::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-table-wrapper{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:host([negative]) .sbb-table-wrapper{--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-scrollbar-track-color: var(--sbb-color-iron)}:host([data-has-horizontal-scrollbar]) .sbb-table-wrapper{padding-bottom:var(--sbb-spacing-fixed-1x)}`;
6
+ var w = Object.defineProperty, u = Object.getOwnPropertyDescriptor, m = (b, o, l, a) => {
7
+ for (var r = a > 1 ? void 0 : a ? u(o, l) : o, s = b.length - 1, e; s >= 0; s--)
8
+ (e = b[s]) && (r = (a ? e(o, l, r) : e(r)) || r);
9
+ return a && r && w(o, l, r), r;
10
+ };
11
+ let t = class extends d(i) {
12
+ constructor() {
13
+ super(...arguments), this._resizeObserver = new n(() => this._checkHorizontalScrollbar());
14
+ }
15
+ disconnectedCallback() {
16
+ super.disconnectedCallback(), this._resizeObserver.disconnect();
17
+ }
18
+ firstUpdated(b) {
19
+ super.firstUpdated(b), this._tableWrapper = this.shadowRoot.querySelector(".sbb-table-wrapper"), this._resizeObserver.observe(this._tableWrapper);
20
+ }
21
+ _checkHorizontalScrollbar() {
22
+ this.toggleAttribute(
23
+ "data-has-horizontal-scrollbar",
24
+ this._tableWrapper.scrollWidth > this._tableWrapper.offsetWidth
25
+ );
26
+ }
27
+ render() {
28
+ return p`<div class="sbb-table-wrapper">
29
+ <slot></slot>
30
+ </div>`;
31
+ }
32
+ };
33
+ t.styles = v;
34
+ t = m([
35
+ h("sbb-table-wrapper")
36
+ ], t);
37
+ export {
38
+ t as SbbTableWrapperElement
39
+ };
package/table.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export * from './table/table-wrapper.js';
2
+ //# sourceMappingURL=table.d.ts.map
package/table.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/elements/table.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
package/table.js ADDED
@@ -0,0 +1 @@
1
+ export * from "./table/table-wrapper.js";
@@ -2,7 +2,6 @@ import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit'
2
2
  import { SbbTabLabelElement } from '../tab-label.js';
3
3
  import { SbbTabElement } from '../tab.js';
4
4
 
5
- export type SbbTabSupportedContentType = SbbTabElement | SbbTabGroupElement;
6
5
  export type SbbTabChangedEventDetails = {
7
6
  activeIndex: number;
8
7
  activeTabLabel: SbbTabLabelElement;
@@ -21,18 +20,16 @@ export interface InterfaceSbbTabGroupActions {
21
20
  export interface InterfaceSbbTabGroupTab extends SbbTabLabelElement {
22
21
  active?: boolean;
23
22
  disabled: boolean;
24
- relatedContent?: SbbTabSupportedContentType;
23
+ tab?: SbbTabElement;
25
24
  index?: number;
26
25
  tabGroupActions?: InterfaceSbbTabGroupActions;
27
26
  size: 's' | 'l' | 'xl';
28
27
  }
29
28
  /**
30
- * It displays one or more tab, each one with a title and a content.
29
+ * It displays one or more tabs, each one with a label and a content.
31
30
  *
32
- * @slot - Use the unnamed slot to add html-content to the `sbb-tab-group`;
33
- * wrap the content in a `sbb-tab` or provide a nested `sbb-tab-group`.
34
- * @slot tab-bar - When you provide the `sbb-tab-label` tag through the unnamed slot,
35
- * it will be automatically moved to this slot. You do not need to use it directly.
31
+ * @slot - Use the unnamed slot to add content to the `sbb-tab-group` via
32
+ * `sbb-tab-label` and `sbb-tab` instances.
36
33
  * @event {CustomEvent<SbbTabChangedEventDetails>} didChange - Emits an event on selected tab change.
37
34
  */
38
35
  export declare class SbbTabGroupElement extends LitElement {
@@ -1 +1 @@
1
- {"version":3,"file":"tab-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"tab-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/tabs/tab-group/tab-group.ts"],"names":[],"mappings":"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"}
package/tabs/tab-group.js CHANGED
@@ -1,41 +1,41 @@
1
1
  import { css as h, LitElement as u, html as f } from "lit";
2
- import { property as c, customElement as v } from "lit/decorators.js";
2
+ import { property as d, customElement as v } from "lit/decorators.js";
3
3
  import { ref as p } from "lit/directives/ref.js";
4
- import { isArrowKeyPressed as g, getNextElementIndex as _ } from "../core/a11y.js";
4
+ import { isArrowKeyPressed as _, getNextElementIndex as g } from "../core/a11y.js";
5
5
  import { SbbConnectedAbortController as m } from "../core/controllers.js";
6
- import { EventEmitter as A, throttle as C } from "../core/eventing.js";
7
- import { AgnosticMutationObserver as T, AgnosticResizeObserver as d } from "../core/observers.js";
8
- import { SbbTabElement as x } from "./tab.js";
9
- const y = h`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content:after,.tab-content:before{content:" ";display:block;visibility:hidden;height:0}.tab-content ::slotted(*){visibility:hidden;opacity:0;height:0;overflow:hidden;position:relative}.tab-content ::slotted(*[active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.tab-content ::slotted([role=tabpanel]:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([data-nested]:not([active])) *,:host([data-nested]:not([active])) ::slotted(*){visibility:hidden;opacity:0;height:0}`;
10
- var E = Object.defineProperty, z = Object.getOwnPropertyDescriptor, b = (t, e, i, s) => {
11
- for (var a = s > 1 ? void 0 : s ? z(e, i) : e, n = t.length - 1, o; n >= 0; n--)
12
- (o = t[n]) && (a = (s ? o(e, i, a) : o(a)) || a);
13
- return s && a && E(e, i, a), a;
6
+ import { EventEmitter as A, throttle as T } from "../core/eventing.js";
7
+ import { AgnosticMutationObserver as x, AgnosticResizeObserver as c } from "../core/observers.js";
8
+ import { SbbTabElement as y } from "./tab.js";
9
+ const C = h`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-tab-group-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );display:block}.tab-group{display:flex;flex-wrap:wrap}.tab-content{margin-block-start:var(--sbb-spacing-responsive-m);transition:height var(--sbb-tab-group-animation-duration) var(--sbb-animation-easing)}.tab-content:after,.tab-content:before{content:" ";display:block;visibility:hidden;height:0}.tab-content ::slotted(*){visibility:hidden;opacity:0;height:0;overflow:hidden;position:relative}.tab-content ::slotted(*[active]){visibility:visible;opacity:1;height:fit-content;overflow:unset;transition-duration:var(--sbb-tab-group-animation-duration);transition-delay:var(--sbb-tab-group-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:opacity,visibility}.tab-content ::slotted([role=tabpanel]:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}`;
10
+ var E = Object.defineProperty, z = Object.getOwnPropertyDescriptor, b = (t, i, e, n) => {
11
+ for (var s = n > 1 ? void 0 : n ? z(i, e) : i, o = t.length - 1, r; o >= 0; o--)
12
+ (r = t[o]) && (s = (n ? r(i, e, s) : r(s)) || s);
13
+ return n && s && E(i, e, s), s;
14
14
  };
15
15
  const G = {
16
16
  attributeFilter: ["active", "disabled"]
17
- }, S = ["sbb-tab", "sbb-tab-group"];
18
- let I = 0, r = class extends u {
17
+ };
18
+ let I = 0, a = class extends u {
19
19
  constructor() {
20
- super(...arguments), this._tabs = [], this._abort = new m(this), this._tabAttributeObserver = new T(
20
+ super(...arguments), this._tabs = [], this._abort = new m(this), this._tabAttributeObserver = new x(
21
21
  (t) => this._onTabAttributesChange(t)
22
- ), this._tabGroupResizeObserver = new d(
22
+ ), this._tabGroupResizeObserver = new c(
23
23
  (t) => this._onTabGroupElementResize(t)
24
- ), this._tabContentResizeObserver = new d(
24
+ ), this._tabContentResizeObserver = new c(
25
25
  (t) => this._onTabContentElementResize(t)
26
26
  ), this._size = "l", this.initialSelectedIndex = 0, this._selectedTabChanged = new A(
27
27
  this,
28
- r.events.didChange
28
+ a.events.didChange
29
29
  ), this._onContentSlotChange = () => {
30
30
  this._tabContentElement = this.shadowRoot.querySelector("div.tab-content");
31
- const t = this._getTabs().filter((e) => !this._tabs.includes(e));
32
- t.length && (t.forEach((e) => this._configure(e)), this._tabs = this._tabs.concat(t));
31
+ const t = this._getTabs().filter((i) => !this._tabs.includes(i));
32
+ t.length && (t.forEach((i) => this._configure(i)), this._tabs = this._tabs.concat(t));
33
33
  }, this._onTabsSlotChange = () => {
34
34
  const t = this._getTabs();
35
- t.length < this._tabs.length && (this._tabs.filter((i) => !t.includes(i)).forEach((i) => {
36
- var s;
37
- (s = i.relatedContent) == null || s.remove();
38
- }), this._tabs = t), this._tabs.forEach((e) => e.setAttribute("data-size", this.size));
35
+ t.length < this._tabs.length && (this._tabs.filter((e) => !t.includes(e)).forEach((e) => {
36
+ var n;
37
+ (n = e.tab) == null || n.remove();
38
+ }), this._tabs = t), this._tabs.forEach((i) => i.setAttribute("data-size", this.size));
39
39
  };
40
40
  }
41
41
  set size(t) {
@@ -53,24 +53,24 @@ let I = 0, r = class extends u {
53
53
  * @param tabIndex The index of the tab you want to disable.
54
54
  */
55
55
  disableTab(t) {
56
- var e, i;
57
- (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.disable();
56
+ var i, e;
57
+ (e = (i = this._tabs[t]) == null ? void 0 : i.tabGroupActions) == null || e.disable();
58
58
  }
59
59
  /**
60
60
  * Enables a tab by index.
61
61
  * @param tabIndex The index of the tab you want to enable.
62
62
  */
63
63
  enableTab(t) {
64
- var e, i;
65
- (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.enable();
64
+ var i, e;
65
+ (e = (i = this._tabs[t]) == null ? void 0 : i.tabGroupActions) == null || e.enable();
66
66
  }
67
67
  /**
68
68
  * Activates a tab by index.
69
69
  * @param tabIndex The index of the tab you want to activate.
70
70
  */
71
71
  activateTab(t) {
72
- var e, i;
73
- (i = (e = this._tabs[t]) == null ? void 0 : e.tabGroupActions) == null || i.select();
72
+ var i, e;
73
+ (e = (i = this._tabs[t]) == null ? void 0 : i.tabGroupActions) == null || e.select();
74
74
  }
75
75
  _getTabs() {
76
76
  return Array.from(this.children ?? []).filter(
@@ -81,13 +81,12 @@ let I = 0, r = class extends u {
81
81
  return this._tabs.filter((t) => !t.hasAttribute("disabled"));
82
82
  }
83
83
  connectedCallback() {
84
- var e;
85
84
  super.connectedCallback();
86
85
  const t = this._abort.signal;
87
- this.addEventListener("keydown", (i) => this._handleKeyDown(i), { signal: t }), this.toggleAttribute("data-nested", !!((e = this.parentElement) != null && e.closest("sbb-tab-group")));
86
+ this.addEventListener("keydown", (i) => this._handleKeyDown(i), { signal: t });
88
87
  }
89
88
  firstUpdated(t) {
90
- super.firstUpdated(t), this._tabs = this._getTabs(), this._tabs.forEach((e) => this._configure(e)), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement);
89
+ super.firstUpdated(t), this._tabs = this._getTabs(), this._tabs.forEach((i) => this._configure(i)), this._initSelection(), this._tabGroupResizeObserver.observe(this._tabGroupElement);
91
90
  }
92
91
  disconnectedCallback() {
93
92
  super.disconnectedCallback(), this._tabAttributeObserver.disconnect(), this._tabContentResizeObserver.disconnect(), this._tabGroupResizeObserver.disconnect();
@@ -96,80 +95,80 @@ let I = 0, r = class extends u {
96
95
  return `sbb-tab-panel-${++I}`;
97
96
  }
98
97
  _initSelection() {
99
- var t, e, i;
100
- this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this._tabs.length && !this._tabs[this.initialSelectedIndex].disabled ? (t = this._tabs[this.initialSelectedIndex].tabGroupActions) == null || t.select() : (i = (e = this._enabledTabs[0]) == null ? void 0 : e.tabGroupActions) == null || i.select();
98
+ var t, i, e;
99
+ this.initialSelectedIndex >= 0 && this.initialSelectedIndex < this._tabs.length && !this._tabs[this.initialSelectedIndex].disabled ? (t = this._tabs[this.initialSelectedIndex].tabGroupActions) == null || t.select() : (e = (i = this._enabledTabs[0]) == null ? void 0 : i.tabGroupActions) == null || e.select();
101
100
  }
102
101
  _onTabAttributesChange(t) {
103
- var e, i, s;
104
- for (const a of t) {
105
- if (a.type !== "attributes")
102
+ var i, e, n;
103
+ for (const s of t) {
104
+ if (s.type !== "attributes")
106
105
  return;
107
- const n = a.target;
108
- a.attributeName === "disabled" && (n.hasAttribute("disabled") && n !== this._selectedTab ? (e = n.tabGroupActions) == null || e.disable() : n.disabled && ((i = n.tabGroupActions) == null || i.enable())), a.attributeName === "active" && (n.hasAttribute("active") && !n.disabled ? (s = n.tabGroupActions) == null || s.select() : n === this._selectedTab && n.toggleAttribute("active", !0));
106
+ const o = s.target;
107
+ s.attributeName === "disabled" && (o.hasAttribute("disabled") && o !== this._selectedTab ? (i = o.tabGroupActions) == null || i.disable() : o.disabled && ((e = o.tabGroupActions) == null || e.enable())), s.attributeName === "active" && (o.hasAttribute("active") && !o.disabled ? (n = o.tabGroupActions) == null || n.select() : o === this._selectedTab && o.toggleAttribute("active", !0));
109
108
  }
110
109
  }
111
110
  _onTabGroupElementResize(t) {
112
- for (const e of t) {
113
- const i = e.target.firstElementChild.assignedElements();
114
- for (const s of i)
115
- s.toggleAttribute(
111
+ for (const i of t) {
112
+ const e = i.target.firstElementChild.assignedElements();
113
+ for (const n of e)
114
+ n.toggleAttribute(
116
115
  "data-has-divider",
117
- s === i[0] || s.offsetLeft === i[0].offsetLeft
116
+ n === e[0] || n.offsetLeft === e[0].offsetLeft
118
117
  ), this.style.setProperty("--sbb-tab-group-width", `${this._tabGroupElement.clientWidth}px`);
119
118
  }
120
119
  }
121
120
  _onTabContentElementResize(t) {
122
- for (const e of t) {
123
- const i = Math.floor(e.contentRect.height);
124
- this._tabContentElement.style.height = `${i}px`;
121
+ for (const i of t) {
122
+ const e = Math.floor(i.contentRect.height);
123
+ this._tabContentElement.style.height = `${e}px`;
125
124
  }
126
125
  }
127
126
  _configure(t) {
128
- var e, i;
127
+ var i;
129
128
  t.tabGroupActions = {
130
129
  activate: () => {
131
- var s;
132
- t.toggleAttribute("active", !0), t.active = !0, t.tabIndex = 0, t.setAttribute("aria-selected", "true"), (s = t.relatedContent) == null || s.toggleAttribute("active", !0);
130
+ var e;
131
+ t.toggleAttribute("active", !0), t.active = !0, t.tabIndex = 0, t.setAttribute("aria-selected", "true"), (e = t.tab) == null || e.toggleAttribute("active", !0);
133
132
  },
134
133
  deactivate: () => {
135
- var s;
136
- t.removeAttribute("active"), t.active = !1, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (s = t.relatedContent) == null || s.removeAttribute("active");
134
+ var e;
135
+ t.removeAttribute("active"), t.active = !1, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (e = t.tab) == null || e.removeAttribute("active");
137
136
  },
138
137
  disable: () => {
139
- var s, a, n;
140
- t.disabled || (t.hasAttribute("disabled") || t.toggleAttribute("disabled", !0), t.disabled = !0, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (s = t.relatedContent) == null || s.removeAttribute("active"), t.active && (t.removeAttribute("active"), t.active = !1, (n = (a = this._enabledTabs[0]) == null ? void 0 : a.tabGroupActions) == null || n.select()));
138
+ var e, n, s;
139
+ t.disabled || (t.hasAttribute("disabled") || t.toggleAttribute("disabled", !0), t.disabled = !0, t.tabIndex = -1, t.setAttribute("aria-selected", "false"), (e = t.tab) == null || e.removeAttribute("active"), t.active && (t.removeAttribute("active"), t.active = !1, (s = (n = this._enabledTabs[0]) == null ? void 0 : n.tabGroupActions) == null || s.select()));
141
140
  },
142
141
  enable: () => {
143
142
  t.disabled && (t.removeAttribute("disabled"), t.disabled = !1);
144
143
  },
145
144
  select: () => {
146
- var s, a;
145
+ var e, n;
147
146
  if (t !== this._selectedTab && !t.disabled) {
148
- const n = this._selectedTab;
149
- n && ((s = n.tabGroupActions) == null || s.deactivate(), this._tabContentResizeObserver.unobserve(n.relatedContent)), (a = t.tabGroupActions) == null || a.activate(), this._selectedTab = t, this._tabContentResizeObserver.observe(t.relatedContent);
147
+ const s = this._selectedTab;
148
+ s && ((e = s.tabGroupActions) == null || e.deactivate(), this._tabContentResizeObserver.unobserve(s.tab)), (n = t.tabGroupActions) == null || n.activate(), this._selectedTab = t, this._tabContentResizeObserver.observe(t.tab);
150
149
  const o = this._tabs;
151
150
  this._selectedTabChanged.emit({
152
- activeIndex: o.findIndex((l) => l === t),
151
+ activeIndex: o.findIndex((r) => r === t),
153
152
  activeTabLabel: t,
154
- activeTab: t.relatedContent,
155
- previousIndex: o.findIndex((l) => l === n),
156
- previousTabLabel: n,
157
- previousTab: n == null ? void 0 : n.relatedContent
153
+ activeTab: t.tab,
154
+ previousIndex: o.findIndex((r) => r === s),
155
+ previousTabLabel: s,
156
+ previousTab: s == null ? void 0 : s.tab
158
157
  });
159
158
  }
160
159
  }
161
- }, (e = t.nextElementSibling) != null && e.localName && S.includes((i = t.nextElementSibling) == null ? void 0 : i.localName) && (t.relatedContent = t.nextElementSibling, t.relatedContent.id = this._assignId(), t.relatedContent instanceof x && (t.relatedContent.tabIndex = 0, t.relatedContent.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
162
- var s;
163
- (s = t.tabGroupActions) == null || s.select();
164
- }), t.relatedContent && (t.setAttribute("aria-controls", t.relatedContent.id), t.relatedContent.setAttribute("role", "tabpanel"), t.relatedContent.toggleAttribute("active", t.active)), this._tabAttributeObserver.observe(t, G), t.slot = "tab-bar";
160
+ }, ((i = t.nextElementSibling) == null ? void 0 : i.localName) === "sbb-tab" && (t.tab = t.nextElementSibling, t.tab.id = this._assignId(), t.tab instanceof y && (t.tab.tabIndex = 0, t.tab.configure())), t.tabIndex = -1, t.disabled = t.hasAttribute("disabled"), t.active = t.hasAttribute("active") && !t.disabled, t.setAttribute("role", "tab"), t.setAttribute("aria-selected", "false"), t.addEventListener("click", () => {
161
+ var e;
162
+ (e = t.tabGroupActions) == null || e.select();
163
+ }), t.tab && (t.setAttribute("aria-controls", t.tab.id), t.tab.setAttribute("role", "tabpanel"), t.tab.toggleAttribute("active", t.active)), this._tabAttributeObserver.observe(t, G), t.slot = "tab-bar";
165
164
  }
166
165
  _handleKeyDown(t) {
167
- var i, s, a;
168
- const e = this._enabledTabs;
169
- if (!(!e || // don't trap nested handling
170
- t.target !== this && t.target.parentElement !== this) && g(t)) {
171
- const n = e.findIndex((l) => l.active), o = _(t, n, e.length);
172
- (s = (i = e[o]) == null ? void 0 : i.tabGroupActions) == null || s.select(), (a = e[o]) == null || a.focus(), t.preventDefault();
166
+ var e, n, s;
167
+ const i = this._enabledTabs;
168
+ if (!(!i || // don't trap nested handling
169
+ t.target !== this && t.target.parentElement !== this) && _(t)) {
170
+ const o = i.findIndex((l) => l.active), r = g(t, o, i.length);
171
+ (n = (e = i[r]) == null ? void 0 : e.tabGroupActions) == null || n.select(), (s = i[r]) == null || s.focus(), t.preventDefault();
173
172
  }
174
173
  }
175
174
  render() {
@@ -183,24 +182,24 @@ let I = 0, r = class extends u {
183
182
  </div>
184
183
 
185
184
  <div class="tab-content">
186
- <slot @slotchange=${C(this._onContentSlotChange, 150)}></slot>
185
+ <slot @slotchange=${T(this._onContentSlotChange, 150)}></slot>
187
186
  </div>
188
187
  `;
189
188
  }
190
189
  };
191
- r.styles = y;
192
- r.events = {
190
+ a.styles = C;
191
+ a.events = {
193
192
  didChange: "didChange"
194
193
  };
195
194
  b([
196
- c()
197
- ], r.prototype, "size", 1);
195
+ d()
196
+ ], a.prototype, "size", 1);
198
197
  b([
199
- c({ attribute: "initial-selected-index", type: Number })
200
- ], r.prototype, "initialSelectedIndex", 2);
201
- r = b([
198
+ d({ attribute: "initial-selected-index", type: Number })
199
+ ], a.prototype, "initialSelectedIndex", 2);
200
+ a = b([
202
201
  v("sbb-tab-group")
203
- ], r);
202
+ ], a);
204
203
  export {
205
- r as SbbTabGroupElement
204
+ a as SbbTabGroupElement
206
205
  };
@@ -15,8 +15,8 @@ export declare class SbbToggleCheckElement extends SbbToggleCheckElement_base {
15
15
  static readonly events: {
16
16
  readonly didChange: "didChange";
17
17
  };
18
- /** Size variant, either m or s. */
19
- size: 's' | 'm';
18
+ /** Size variant, either m, s or xs. */
19
+ size: 'xs' | 's' | 'm';
20
20
  /** The svg name for the true state - default -> 'tick-small' */
21
21
  iconName: string;
22
22
  /** The label position relative to the toggle. Defaults to 'after' */
@@ -1 +1 @@
1
- {"version":3,"file":"toggle-check.d.ts","sourceRoot":"","sources":["../../../src/elements/toggle-check/toggle-check.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AASvC;;;;;;;;GAQG;AACH,qBACa,qBAAsB,SAAQ,0BAE1C;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,mCAAmC;IACC,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,gEAAgE;IACV,QAAQ,SAAgB;IAE9E,qEAAqE;IAE9D,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAW;;cAO3B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cASxE,MAAM,IAAI,cAAc;CAgB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}
1
+ {"version":3,"file":"toggle-check.d.ts","sourceRoot":"","sources":["../../../src/elements/toggle-check/toggle-check.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AASvC;;;;;;;;GAQG;AACH,qBACa,qBAAsB,SAAQ,0BAE1C;IACC,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,uCAAuC;IACH,IAAI,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAO;IAEjE,gEAAgE;IACV,QAAQ,SAAgB;IAE9E,qEAAqE;IAE9D,aAAa,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAW;;cAO3B,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cASxE,MAAM,IAAI,cAAc;CAgB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}