feat(slider)!: update slider tokens

components/fieldlabel/index.css

@@ -11,22 +11,23 @@ governing permissions and limitations under the License.
 */
 
 .spectrum-FieldLabel {
+  --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
   --spectrum-fieldlabel-color: var(--spectrum-neutral-subdued-content-color-default);
 
   --spectrum-field-label-top-to-asterisk: var(--spectrum-field-label-top-to-asterisk-medium);
   --spectrum-field-label-text-to-asterisk: var(--spectrum-field-label-text-to-asterisk-medium);
 
   --spectrum-fieldlabel-font-weight: var(--spectrum-regular-font-weight);
+  --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
+  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
 }
 
 .spectrum-FieldLabel--sizeS {
+  --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
   --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
   --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
 
-  --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
-  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
   --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-100);
 
@@ -35,13 +36,11 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-FieldLabel--sizeM {
+  --spectrum-fieldlabel-min-height: var(--spectrum-component-height-75);
   --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-75);
   --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-75);
 
-  --spectrum-fieldlabel-line-height: var(--spectrum-line-height-200);
-  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-200);
-
   --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-75);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
 
@@ -50,13 +49,11 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-FieldLabel--sizeL {
+  --spectrum-fieldlabel-min-height: var(--spectrum-component-height-100);
   --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-100);
   --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-100);
 
-  --spectrum-fieldlabel-line-height: var(--spectrum-line-height-100);
-  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-100);
-
   --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-100);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
 
@@ -65,13 +62,11 @@ governing permissions and limitations under the License.
 }
 
 .spectrum-FieldLabel--sizeXL {
+  --spectrum-fieldlabel-min-height: var(--spectrum-component-height-200);
   --spectrum-fieldlabel-top-to-text: var(--spectrum-component-top-to-text-200);
   --spectrum-fieldlabel-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
   --spectrum-fieldlabel-font-size: var(--spectrum-font-size-200);
 
-  --spectrum-fieldlabel-line-height: var(--spectrum-line-height-200);
-  --spectrum-fieldlabel-line-height-cjk: var(--spectrum-cjk-line-height-200);
-
   --spectrum-fieldlabel-side-padding-top: var(--spectrum-component-top-to-text-200);
   --spectrum-fieldlabel-side-padding-right: var(--spectrum-spacing-200);
 
@@ -81,8 +76,8 @@ governing permissions and limitations under the License.
 
 .spectrum-FieldLabel {
   display: block;
-
   box-sizing: border-box;
+  min-block-size: var(--mod-fieldlabel-min-height, var(--spectrum-fieldlabel-min-height));
 
   padding-block: var(--spectrum-fieldlabel-top-to-text) var(--spectrum-fieldlabel-bottom-to-text);
   padding-inline: 0;

components/fieldlabel/metadata/mods.md

@@ -7,6 +7,7 @@
 | `--mod-fieldlabel-font-weight` |
 | `--mod-fieldlabel-line-height` |
 | `--mod-fieldlabel-line-height-cjk` |
+| `--mod-fieldlabel-min-height` |
 | `--mod-fieldlabel-side-padding-right` |
 | `--mod-fieldlabel-side-padding-top` |
 | `--mod-spacing-300` |

components/fieldlabel/stories/template.js

@@ -12,7 +12,9 @@ export const Template = ({
   customClasses = [],
   size = "m",
   label,
-  alignment = "left",
+  id,
+  forInput,
+  alignment,
   isDisabled,
   isRequired,
   style = {},
@@ -41,6 +43,8 @@ export const Template = ({
       ...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
     })}
       style=${ifDefined(styleMap(style))}
+      id=${ifDefined(id)}
+      for=${ifDefined(forInput)}
     >
       ${label}
       ${isRequired ?

components/slider/gulpfile.js

@@ -1 +1 @@
-module.exports = require('@spectrum-css/component-builder');
+module.exports = require('@spectrum-css/component-builder-simple');