scb-wc 0.1.136 → 0.1.138

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 (15) hide show
  1. package/mvc/components/scb-button/scb-button.js +3 -3
  2. package/mvc/components/scb-collapse/scb-collapse.js +54 -46
  3. package/mvc/components/scb-header/scb-header.js +19 -17
  4. package/mvc/components/scb-search/scb-search.js +3 -3
  5. package/mvc/components/scb-select/scb-select.js +2 -2
  6. package/package.json +2 -2
  7. package/scb-button/scb-button.js +10 -2
  8. package/scb-collapse/scb-collapse.js +157 -53
  9. package/scb-components/scb-button/scb-button.d.ts +2 -2
  10. package/scb-components/scb-collapse/scb-collapse.d.ts +9 -0
  11. package/scb-components/scb-search/scb-search.d.ts +1 -1
  12. package/scb-header/scb-header.js +29 -11
  13. package/scb-search/scb-search.js +20 -7
  14. package/scb-select/scb-select.js +3 -2
  15. package/scb-wc.bundle.js +1014 -910
package/scb-search/scb-search.js CHANGED
@@ -47,7 +47,7 @@ var l = 0, u = class extends n {
47
47
 
48
48
  --scb-search-height: calc(var(--scb-search-line-height) + var(--scb-search-padding-y) + var(--scb-search-padding-y));
49
49
  --scb-search-padding-x: var(--spacing-4, 12px);
50
- --scb-search-padding-y: var(--spacing-4, 12px);
50
+ --scb-search-padding-y: calc(var(--spacing-4, 12px) - var(--stroke-border, 1px));
51
51
  --scb-search-leading-size: var(--scale-10, 40px);
52
52
  --scb-search-trailing-size: var(--scale-10, 40px);
53
53
  --scb-search-gap: var(--spacing-2, 4px);
@@ -72,7 +72,7 @@ var l = 0, u = class extends n {
72
72
 
73
73
  :host([size='large']) {
74
74
  --scb-search-padding-x: var(--spacing-5, 16px);
75
- --scb-search-padding-y: var(--spacing-5, 16px);
75
+ --scb-search-padding-y: calc(var(--spacing-5, 16px) - var(--spacing-1, 2px));
76
76
  --scb-search-leading-size: var(--scale-11, 48px);
77
77
  --scb-search-trailing-size: var(--scale-11, 48px);
78
78
  --scb-search-icon-size: var(--icon-size-medium, 24px);
@@ -83,11 +83,11 @@ var l = 0, u = class extends n {
83
83
  --scb-search-supporting-tracking: var(--md-sys-typescale-body-large-tracking, 0);
84
84
  }
85
85
 
86
- :host([size='small']) {
86
+ :host([size='small']) {
87
87
  --scb-search-padding-x: var(--spacing-3, 8px);
88
- --scb-search-padding-y: var(--spacing-3, 8px);
89
- --scb-search-leading-size: var(--scale-09, 36px);
90
- --scb-search-trailing-size: var(--scale-09, 36px);
88
+ --scb-search-padding-y: calc(var(--spacing-3, 8px) + var(--stroke-border, 1px));
89
+ --scb-search-leading-size: var(--scale-08, 32px);
90
+ --scb-search-trailing-size: var(--scale-08, 32px);
91
91
  --scb-search-icon-size: var(--icon-size-small, 20px);
92
92
  --scb-search-font-size: var(--md-sys-typescale-body-small-size, 14px);
93
93
  --scb-search-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
@@ -95,7 +95,20 @@ var l = 0, u = class extends n {
95
95
  --scb-search-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
96
96
  --scb-search-supporting-tracking: var(--md-sys-typescale-body-small-tracking, 0);
97
97
  }
98
- :host([disabled]) {
98
+
99
+ :host([size='extra-small']) {
100
+ --scb-search-padding-x: var(--spacing-3, 8px);
101
+ --scb-search-padding-y: calc(var(--spacing-2, 4px) + var(--stroke-border, 1px));
102
+ --scb-search-leading-size: var(--scale-08, 32px);
103
+ --scb-search-trailing-size: var(--scale-08, 32px);
104
+ --scb-search-icon-size: var(--icon-size-small, 20px);
105
+ --scb-search-font-size: var(--md-sys-typescale-body-small-size, 14px);
106
+ --scb-search-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
107
+ --scb-search-supporting-font-size: var(--md-sys-typescale-body-small-size, 14px);
108
+ --scb-search-supporting-line-height: var(--md-sys-typescale-body-small-line-height, 20px);
109
+ --scb-search-supporting-tracking: var(--md-sys-typescale-body-small-tracking, 0);
110
+ }
111
+ :host([disabled]) {
99
112
  opacity: 0.38;
100
113
  cursor: default;
101
114
  }
package/scb-select/scb-select.js CHANGED
@@ -86,6 +86,7 @@ var l = class extends n {
86
86
  --scb-select-max-width: 400px;
87
87
  --scb-select-padding-x: var(--spacing-5);
88
88
  --scb-select-padding-y: var(--spacing-2);
89
+ --scb-select-border-width: var(--stroke-border, 1px);
89
90
  --scb-select-min-height: 56px;
90
91
  --scb-select-font-size: var(--md-sys-typescale-body-large-size);
91
92
  --scb-select-line-height: var(--md-sys-typescale-body-large-line-height);
@@ -183,7 +184,7 @@ var l = class extends n {
183
184
  background: var(--md-sys-color-surface);
184
185
  cursor: pointer;
185
186
  border-radius: var(--md-sys-shape-corner-small);
186
- border: 1px solid var(--md-sys-color-outline);
187
+ border: var(--scb-select-border-width) solid var(--md-sys-color-outline);
187
188
  outline: 1px solid transparent;
188
189
  transition: border 0.2s;
189
190
 
@@ -338,7 +339,7 @@ var l = class extends n {
338
339
  }
339
340
  .selected-value-container {
340
341
  height: 100%;
341
- min-height: var(--scb-select-min-height);
342
+ min-height: calc(var(--scb-select-min-height) - (var(--scb-select-border-width) * 2));
342
343
  box-sizing: border-box;
343
344
  position: relative;
344
345
  display: flex;