@lmvz-ds/components 0.38.0 → 0.40.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 (114) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +12 -20
  3. package/cjs/{directional-focus-controller-8Xd_7MHT.js → directional-focus-controller-DDnhfX5w.js} +15 -5
  4. package/cjs/index.cjs.js +3 -195
  5. package/cjs/lmvz-action-list.cjs.entry.js +2 -2
  6. package/cjs/lmvz-button-group.cjs.entry.js +4 -0
  7. package/cjs/lmvz-button_2.cjs.entry.js +1 -1
  8. package/cjs/lmvz-card.cjs.entry.js +1 -1
  9. package/cjs/lmvz-components.cjs.js +1 -1
  10. package/cjs/lmvz-header_2.cjs.entry.js +3 -3
  11. package/cjs/lmvz-message.cjs.entry.js +2 -0
  12. package/cjs/lmvz-popover.cjs.entry.js +1 -1
  13. package/cjs/lmvz-select.cjs.entry.js +2 -3
  14. package/cjs/lmvz-tab.cjs.entry.js +3 -3
  15. package/cjs/lmvz-tabs.cjs.entry.js +43 -44
  16. package/cjs/loader.cjs.js +1 -1
  17. package/cjs/public-DTgpEs1_.js +206 -0
  18. package/collection/components/lmvz-action-list/lmvz-action-list.css +119 -116
  19. package/collection/components/lmvz-button/lmvz-button.css +109 -106
  20. package/collection/components/lmvz-card/lmvz-card.css +106 -103
  21. package/collection/components/lmvz-header/lmvz-header.js +2 -2
  22. package/collection/components/lmvz-select/lmvz-select.css +58 -43
  23. package/collection/components/lmvz-select/lmvz-select.js +1 -25
  24. package/collection/components/lmvz-snackbar/public.js +3 -0
  25. package/collection/components/lmvz-tab/lmvz-tab.css +0 -13
  26. package/collection/components/lmvz-tab/lmvz-tab.js +10 -14
  27. package/collection/components/lmvz-tabs/lmvz-tabs.css +0 -5
  28. package/collection/components/lmvz-tabs/lmvz-tabs.js +50 -65
  29. package/collection/utils/aria/directional-focus-controller.js +16 -7
  30. package/collection/utils/icons/public.js +3 -0
  31. package/components/index.js +1 -1
  32. package/components/lmvz-action-list.js +1 -1
  33. package/components/lmvz-button-group.js +1 -1
  34. package/components/lmvz-button.js +1 -1
  35. package/components/lmvz-card.js +1 -1
  36. package/components/lmvz-datepicker.js +1 -1
  37. package/components/lmvz-header.js +1 -1
  38. package/components/lmvz-icon.js +1 -1
  39. package/components/lmvz-input.js +1 -1
  40. package/components/lmvz-link.js +1 -1
  41. package/components/lmvz-menuitem.js +1 -1
  42. package/components/lmvz-message.js +1 -1
  43. package/components/lmvz-modal.js +1 -1
  44. package/components/lmvz-popover.js +1 -1
  45. package/components/lmvz-select.js +1 -1
  46. package/components/lmvz-snackbar.js +1 -1
  47. package/components/lmvz-tab.js +1 -1
  48. package/components/lmvz-tabs.js +1 -1
  49. package/components/{p-CcP_sfo8.js → p--mU29mrX.js} +1 -1
  50. package/components/p-BPa0FHVO.js +1 -0
  51. package/components/{p-SnHLBAbf.js → p-Bc5MM0zh.js} +1 -1
  52. package/components/p-CyDgnpOB.js +1 -0
  53. package/components/{p-C-pRMuMh.js → p-DIyiticz.js} +1 -1
  54. package/components/{p-BhALzK62.js → p-DJLdOjL4.js} +1 -1
  55. package/components/{p-B6bUOPCG.js → p-DSDBThqb.js} +1 -1
  56. package/components/p-DXhP6UeF.js +1 -0
  57. package/components/p-DsTgD0_a.js +1 -0
  58. package/components/p-DyQ1GbaN.js +1 -0
  59. package/components/p-niXjuPxe.js +1 -0
  60. package/esm/{directional-focus-controller-QukTTWBE.js → directional-focus-controller-CJ0yNC00.js} +15 -5
  61. package/esm/index.js +1 -197
  62. package/esm/lmvz-action-list.entry.js +2 -2
  63. package/esm/lmvz-button-group.entry.js +4 -0
  64. package/esm/lmvz-button_2.entry.js +1 -1
  65. package/esm/lmvz-card.entry.js +1 -1
  66. package/esm/lmvz-components.js +1 -1
  67. package/esm/lmvz-header_2.entry.js +3 -3
  68. package/esm/lmvz-message.entry.js +2 -0
  69. package/esm/lmvz-popover.entry.js +1 -1
  70. package/esm/lmvz-select.entry.js +2 -3
  71. package/esm/lmvz-tab.entry.js +3 -3
  72. package/esm/lmvz-tabs.entry.js +43 -44
  73. package/esm/loader.js +1 -1
  74. package/esm/public-m6pRVUeP.js +204 -0
  75. package/hydrate/index.js +280 -66
  76. package/hydrate/index.mjs +280 -66
  77. package/lmvz-components/index.esm.js +1 -1
  78. package/lmvz-components/lmvz-components.esm.js +1 -1
  79. package/lmvz-components/p-143e9621.entry.js +1 -0
  80. package/lmvz-components/p-220e455e.entry.js +1 -0
  81. package/lmvz-components/p-304c7554.entry.js +1 -0
  82. package/lmvz-components/p-316dd61a.entry.js +1 -0
  83. package/lmvz-components/{p-1e1dea53.entry.js → p-41286514.entry.js} +1 -1
  84. package/lmvz-components/p-93b781ca.entry.js +1 -0
  85. package/lmvz-components/p-BPa0FHVO.js +1 -0
  86. package/lmvz-components/p-BlkpdeQI.js +1 -0
  87. package/lmvz-components/p-c884c76e.entry.js +1 -0
  88. package/lmvz-components/p-ebad823c.entry.js +1 -0
  89. package/lmvz-components/p-edec4d09.entry.js +1 -0
  90. package/lmvz-components/p-f911691c.entry.js +1 -0
  91. package/manifest.json +38 -98
  92. package/package.json +2 -1
  93. package/types/components/lmvz-select/lmvz-select.d.ts +0 -1
  94. package/types/components/lmvz-snackbar/public.d.ts +6 -0
  95. package/types/components/lmvz-tab/lmvz-tab.d.ts +1 -1
  96. package/types/components/lmvz-tabs/lmvz-tabs.d.ts +8 -8
  97. package/types/components.d.ts +17 -39
  98. package/types/index.d.ts +5 -0
  99. package/types/utils/aria/directional-focus-controller.d.ts +9 -7
  100. package/types/utils/icons/public.d.ts +6 -0
  101. package/components/p-CgGqXTxQ.js +0 -1
  102. package/components/p-D3wobLRi.js +0 -1
  103. package/components/p-DfFdoFeH.js +0 -1
  104. package/components/p-GJaYKpHS.js +0 -1
  105. package/lmvz-components/p-3b7203a3.entry.js +0 -1
  106. package/lmvz-components/p-3fc6c3f6.entry.js +0 -1
  107. package/lmvz-components/p-9813a7d2.entry.js +0 -1
  108. package/lmvz-components/p-CHxiS3ja.js +0 -1
  109. package/lmvz-components/p-b5a5eb9a.entry.js +0 -1
  110. package/lmvz-components/p-cadd88e5.entry.js +0 -1
  111. package/lmvz-components/p-cebaddb0.entry.js +0 -1
  112. package/lmvz-components/p-d53e69de.entry.js +0 -1
  113. package/lmvz-components/p-db75e362.entry.js +0 -1
  114. package/lmvz-components/p-eb741e1f.entry.js +0 -1
package/collection/components/lmvz-action-list/lmvz-action-list.css CHANGED
@@ -47,14 +47,27 @@ legend {
47
47
  gap: 0;
48
48
  min-width: 15vw;
49
49
 
50
- /* * the (invalid nested) import will be handled by postcss */
51
- /* stylelint-disable-next-line no-invalid-position-at-import-rule */
50
+ /* re-import button styles for nested <button/>s */
52
51
  button {
53
- /* secondary styling is default, primary is explicit */
54
- /* --lmvz-button-background, --lmvz-button-color, --lmvz-button-radius are declared on :host
52
+ /* the (invalid nested) import will be handled by postcss */
53
+ /* stylelint-disable-next-line no-invalid-position-at-import-rule */
54
+ /* stylelint-disable nesting-selector-no-missing-scoping-root */
55
+
56
+ /**
57
+ * This fragment is meant to be reusable in multiple component types.
58
+ * CAUTION: always wrap the import in a tag selector (ususally button)!
59
+ */
60
+ & {
61
+ /* the (invalid nested) import will be handled by postcss */
62
+ /* stylelint-disable-next-line no-invalid-position-at-import-rule */
63
+ /* stylelint-disable nesting-selector-no-missing-scoping-root */
64
+ & {
65
+ /* variables are declared on :host
55
66
  so that outer ::slotted(lmvz-button) overrides are inherited correctly via shadow inheritance.
56
- They are also declared here so that non-shadow consumers (e.g. @lmvz-ds/styles buttons.css
57
- bundle and lmvz-card) have the default values in scope. */
67
+ They are also declared here so that non-shadow consumers have the default values in scope. */
68
+
69
+ /* secondary styling is default, primary is explicit */
70
+
58
71
  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
59
72
  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
60
73
  --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));
@@ -69,19 +82,20 @@ legend {
69
82
 
70
83
  display: inline-flex;
71
84
  align-items: center;
72
- justify-content: var(--lmvz-button-content-justification-override, center);
73
- gap: var(--lmvz-button-gap);
74
- padding-block: var(--lmvz-button-padding-block);
75
- padding-inline: var(--lmvz-button-padding-inline);
76
- min-height: var(--lmvz-button-min-height);
77
- min-width: var(--lmvz-button-min-height);
78
- border-radius: var(--lmvz-button-radius);
79
- border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
85
+ justify-content: var(--lmvz-button-content-justification, center);
86
+ gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
87
+
88
+ box-sizing: border-box; /* to inlclude paddings & border in min-height */
89
+ padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
90
+ padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
91
+ min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
92
+ border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent);
93
+ border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px));
94
+
80
95
  background-color: var(--lmvz-button-background);
81
96
  color: var(--lmvz-button-color);
82
97
  cursor: pointer;
83
98
  font: var(--lmvz-button-font);
84
- /* text-align: center; */
85
99
  text-decoration: none;
86
100
  white-space: nowrap;
87
101
  transition:
@@ -91,116 +105,94 @@ legend {
91
105
  box-shadow 0.15s ease;
92
106
  }
93
107
 
94
- button > * {
95
- font: inherit;
96
- color: inherit;
97
- }
98
-
99
- button:focus-visible {
100
- outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
101
- outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
102
- position: relative;
103
- z-index: 1;
104
- }
105
-
106
- button:is([disabled], .disabled) {
107
- cursor: not-allowed;
108
- pointer-events: none;
109
- /* } */
110
-
111
- /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
112
- /* button:is([disabled], .disabled) { */
113
- /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
114
- /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
115
- opacity: var(--lmvz-component-input-disabled-opacity, 40%);
116
- }
117
-
118
- button:not([disabled]):hover {
119
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
120
- }
121
-
122
- button:not([disabled]):active {
123
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
124
- }
125
108
 
126
- button.primary {
127
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
128
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
129
- --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
130
- --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
131
- }
132
-
133
- button.primary:not([disabled], .disabled):hover {
134
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
135
- }
136
-
137
- button.primary:not([disabled], .disabled):active {
138
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
139
- }
140
-
141
- button.danger {
142
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
143
- --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
144
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
145
- }
146
-
147
- button.danger:not([disabled], .disabled):hover {
148
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
149
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
150
- }
151
-
152
- button.danger:not([disabled], .disabled):active {
153
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
154
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
155
- }
156
-
157
- button.tertiary {
158
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
159
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
160
- }
109
+ & > * {
110
+ font: inherit;
111
+ color: inherit;
112
+ }
113
+ &:focus-visible {
114
+ outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
115
+ outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
116
+ position: relative;
117
+ z-index: 1;
118
+ }
119
+ &:is([disabled], .disabled) {
120
+ cursor: not-allowed;
121
+ pointer-events: none;
122
+ /* } */
123
+
124
+ /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
125
+ /* button:is([disabled], .disabled) { */
126
+ /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
127
+ /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
128
+ opacity: var(--lmvz-component-input-disabled-opacity, 40%);
129
+ }
130
+ &:not([disabled]):hover {
131
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
132
+ }
133
+ &:not([disabled]):active {
134
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
135
+ }
161
136
 
162
- button.tertiary:not([disabled], .disabled):hover {
163
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
164
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
165
- }
137
+ /* secondary styling is default, primary is explicit */
166
138
 
167
- button.tertiary:not([disabled], .disabled):active {
168
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
169
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
170
- }
139
+ &.primary {
140
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
141
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
142
+ --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
143
+ --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
144
+ }
145
+ &.primary:not([disabled], .disabled):hover {
146
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
147
+ }
148
+ &.primary:not([disabled], .disabled):active {
149
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
150
+ }
151
+ &.danger {
152
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
153
+ --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
154
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
155
+ }
156
+ &.danger:not([disabled], .disabled):hover {
157
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
158
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
159
+ }
160
+ &.danger:not([disabled], .disabled):active {
161
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
162
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
163
+ }
164
+ &.tertiary {
165
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
166
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
167
+ }
168
+ &.tertiary:not([disabled], .disabled):hover {
169
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
170
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
171
+ }
172
+ &.tertiary:not([disabled], .disabled):active {
173
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
174
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
175
+ }
171
176
 
172
- button.small {
173
- --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
174
- --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
175
- --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
176
- --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
177
- --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
177
+ &.small {
178
+ --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
179
+ --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
180
+ --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
181
+ --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
182
+ --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
178
183
  Router));
179
- }
180
-
181
- button.large {
182
- --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
183
- --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
184
- --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
185
- --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
186
- --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
184
+ }
185
+ &.large {
186
+ --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
187
+ --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
188
+ --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
189
+ --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
190
+ --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
187
191
  Router));
192
+ }
188
193
  }
189
194
 
190
195
 
191
- lmvz-button,
192
- button {
193
- --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);
194
- --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
195
- --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
196
- --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
197
- --lmvz-button-content-justification-override: normal;
198
-
199
- width: 100%;
200
- display: block;
201
- }
202
-
203
- button {
204
196
  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
205
197
  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
206
198
 
@@ -214,4 +206,15 @@ button.large {
214
206
  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
215
207
  }
216
208
  }
209
+
210
+ lmvz-button,
211
+ button {
212
+ --lmvz-button-radius-override: var(--lmvz-semantic-border-radius-md, 6px);
213
+ --lmvz-button-padding-inline-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
214
+ --lmvz-button-padding-block-override: var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem));
215
+ --lmvz-button-font-override: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.5 Router);
216
+ --lmvz-button-content-justification: normal;
217
+
218
+ width: 100%;
219
+ }
217
220
  }
package/collection/components/lmvz-button/lmvz-button.css CHANGED
@@ -75,14 +75,28 @@ legend {
75
75
 
76
76
  }
77
77
  :host {
78
- /* * the (invalid nested) import will be handled by postcss */
79
- /* stylelint-disable-next-line no-invalid-position-at-import-rule */
78
+ display: inline-block;
79
+
80
80
  button {
81
- /* secondary styling is default, primary is explicit */
82
- /* --lmvz-button-background, --lmvz-button-color, --lmvz-button-radius are declared on :host
81
+ /* * the (invalid nested) import will be handled by postcss */
82
+ /* stylelint-disable-next-line no-invalid-position-at-import-rule */
83
+ /* stylelint-disable nesting-selector-no-missing-scoping-root */
84
+
85
+ /**
86
+ * This fragment is meant to be reusable in multiple component types.
87
+ * CAUTION: always wrap the import in a tag selector (ususally button)!
88
+ */
89
+ & {
90
+ /* the (invalid nested) import will be handled by postcss */
91
+ /* stylelint-disable-next-line no-invalid-position-at-import-rule */
92
+ /* stylelint-disable nesting-selector-no-missing-scoping-root */
93
+ & {
94
+ /* variables are declared on :host
83
95
  so that outer ::slotted(lmvz-button) overrides are inherited correctly via shadow inheritance.
84
- They are also declared here so that non-shadow consumers (e.g. @lmvz-ds/styles buttons.css
85
- bundle and lmvz-card) have the default values in scope. */
96
+ They are also declared here so that non-shadow consumers have the default values in scope. */
97
+
98
+ /* secondary styling is default, primary is explicit */
99
+
86
100
  --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary, #f0f0f0));
87
101
  --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-secondary, #000000));
88
102
  --lmvz-button-radius: var(--lmvz-button-radius-override, var(--lmvz-component-input-radius-default, 999px));
@@ -97,19 +111,20 @@ legend {
97
111
 
98
112
  display: inline-flex;
99
113
  align-items: center;
100
- justify-content: var(--lmvz-button-content-justification-override, center);
101
- gap: var(--lmvz-button-gap);
102
- padding-block: var(--lmvz-button-padding-block);
103
- padding-inline: var(--lmvz-button-padding-inline);
104
- min-height: var(--lmvz-button-min-height);
105
- min-width: var(--lmvz-button-min-height);
106
- border-radius: var(--lmvz-button-radius);
107
- border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);
114
+ justify-content: var(--lmvz-button-content-justification, center);
115
+ gap: var(--lmvz-button-gap, var(--lmvz-component-input-gap-md, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)));
116
+
117
+ box-sizing: border-box; /* to inlclude paddings & border in min-height */
118
+ padding-block: var(--lmvz-button-padding-block, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
119
+ padding-inline: var(--lmvz-button-padding-inline, var(--lmvz-component-input-padding-md, clamp(0.88rem, 0.84rem + 0.13vw, 1rem)));
120
+ min-height: var(--lmvz-button-min-height, var(--lmvz-component-input-size-md, clamp(2.5rem, 2.44rem + 0.26vw, 2.75rem)));
121
+ border: var(--lmvz-button-border-width, 0) solid var(--lmvz-button-border-color, transparent);
122
+ border-radius: var(--lmvz-button-radius, var(--lmvz-component-input-radius-default, 999px));
123
+
108
124
  background-color: var(--lmvz-button-background);
109
125
  color: var(--lmvz-button-color);
110
126
  cursor: pointer;
111
127
  font: var(--lmvz-button-font);
112
- /* text-align: center; */
113
128
  text-decoration: none;
114
129
  white-space: nowrap;
115
130
  transition:
@@ -119,106 +134,94 @@ legend {
119
134
  box-shadow 0.15s ease;
120
135
  }
121
136
 
122
- button > * {
123
- font: inherit;
124
- color: inherit;
125
- }
126
-
127
- button:focus-visible {
128
- outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
129
- outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
130
- position: relative;
131
- z-index: 1;
132
- }
133
-
134
- button:is([disabled], .disabled) {
135
- cursor: not-allowed;
136
- pointer-events: none;
137
- /* } */
138
-
139
- /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
140
- /* button:is([disabled], .disabled) { */
141
- /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
142
- /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
143
- opacity: var(--lmvz-component-input-disabled-opacity, 40%);
144
- }
145
-
146
- button:not([disabled]):hover {
147
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
148
- }
149
-
150
- button:not([disabled]):active {
151
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
152
- }
153
-
154
- button.primary {
155
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
156
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
157
- --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
158
- --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
159
- }
160
-
161
- button.primary:not([disabled], .disabled):hover {
162
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
163
- }
164
-
165
- button.primary:not([disabled], .disabled):active {
166
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
167
- }
168
137
 
169
- button.danger {
170
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
171
- --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
172
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
173
- }
174
-
175
- button.danger:not([disabled], .disabled):hover {
176
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
177
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
178
- }
179
-
180
- button.danger:not([disabled], .disabled):active {
181
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
182
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
183
- }
184
-
185
- button.tertiary {
186
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
187
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
188
- }
138
+ & > * {
139
+ font: inherit;
140
+ color: inherit;
141
+ }
142
+ &:focus-visible {
143
+ outline: var(--lmvz-ds-outline, 1px solid #0e7ab4);
144
+ outline-offset: var(--lmvz-ds-outline-offset, clamp(0.25rem, 0.19rem + 0.26vw, 0.5rem));
145
+ position: relative;
146
+ z-index: 1;
147
+ }
148
+ &:is([disabled], .disabled) {
149
+ cursor: not-allowed;
150
+ pointer-events: none;
151
+ /* } */
152
+
153
+ /* button:is(:is([disabled], .disabled):not(.secondary):not(.tertiary), .primary:is([disabled], .disabled)) { */
154
+ /* button:is([disabled], .disabled) { */
155
+ /* --lmvz-button-background: var(--lmvz-global-color-neutral-500); */
156
+ /* --lmvz-button-color: var(--lmvz-global-color-neutral-white); */
157
+ opacity: var(--lmvz-component-input-disabled-opacity, 40%);
158
+ }
159
+ &:not([disabled]):hover {
160
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0));
161
+ }
162
+ &:not([disabled]):active {
163
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-secondary-active, #d4d4d4));
164
+ }
189
165
 
190
- button.tertiary:not([disabled], .disabled):hover {
191
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
192
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
193
- }
166
+ /* secondary styling is default, primary is explicit */
194
167
 
195
- button.tertiary:not([disabled], .disabled):active {
196
- --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
197
- --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
198
- }
168
+ &.primary {
169
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary, #000000));
170
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-primary, #ffffff));
171
+ --lmvz-button-border-width: var(--lmvz-button-border-width-override, 0);
172
+ --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
173
+ }
174
+ &.primary:not([disabled], .disabled):hover {
175
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-hover, #2e2e2e));
176
+ }
177
+ &.primary:not([disabled], .disabled):active {
178
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-primary-active, #545454));
179
+ }
180
+ &.danger {
181
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
182
+ --lmvz-button-border-color: var(--lmvz-button-border-color-override, transparent);
183
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
184
+ }
185
+ &.danger:not([disabled], .disabled):hover {
186
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-danger, #fbdfe0));
187
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
188
+ }
189
+ &.danger:not([disabled], .disabled):active {
190
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-status-on-danger-subtle, #e8454b));
191
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-status-on-danger, #a31419));
192
+ }
193
+ &.tertiary {
194
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary, #ffffff));
195
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary, #000000));
196
+ }
197
+ &.tertiary:not([disabled], .disabled):hover {
198
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0));
199
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-hover, #000000));
200
+ }
201
+ &.tertiary:not([disabled], .disabled):active {
202
+ --lmvz-button-background: var(--lmvz-button-background-override, var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0));
203
+ --lmvz-button-color: var(--lmvz-button-color-override, var(--lmvz-semantic-color-int-on-tertiary-active, #000000));
204
+ }
199
205
 
200
- button.small {
201
- --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
202
- --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
203
- --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
204
- --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
205
- --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
206
+ &.small {
207
+ --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
208
+ --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-sm, clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem)));
209
+ --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-sm, clamp(0.38rem, 0.31rem + 0.26vw, 0.63rem)));
210
+ --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-sm, clamp(2rem, 1.94rem + 0.26vw, 2.25rem)));
211
+ --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-sm-strong, normal 700 clamp(0.75rem, 0.72rem + 0.13vw, 0.88rem) / 1.5
206
212
  Router));
207
- }
208
-
209
- button.large {
210
- --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
211
- --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
212
- --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
213
- --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
214
- --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
213
+ }
214
+ &.large {
215
+ --lmvz-button-padding-inline: var(--lmvz-button-padding-inline-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
216
+ --lmvz-button-padding-block: var(--lmvz-button-padding-block-override, var(--lmvz-component-input-padding-lg, clamp(1rem, 0.94rem + 0.26vw, 1.25rem)));
217
+ --lmvz-button-gap: var(--lmvz-button-gap-override, var(--lmvz-component-input-gap-lg, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));
218
+ --lmvz-button-min-height: var(--lmvz-button-min-height-override, var(--lmvz-component-input-size-lg, clamp(2.75rem, 2.69rem + 0.26vw, 3rem)));
219
+ --lmvz-button-font: var(--lmvz-button-font-override, var(--lmvz-typography-label-lg-strong, normal 700 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.5
215
220
  Router));
221
+ }
216
222
  }
217
223
 
218
224
 
219
- display: inline-block;
220
-
221
- button {
222
225
  width: 100%;
223
226
  }
224
227
  }