@enact/limestone 1.9.3 → 1.10.1

package/styles/variables.less

@@ -69,7 +69,9 @@
 		standard-title-line-height: 144px;
 		standard-titles-gap: 18px;
 		standard-subtitle-font-size: 54px;
+		standard-subtitle-font-size-large: 66px;
 		standard-subtitle-line-height: 72px;
+		standard-subtitle-line-height-large: 84px;
 
 		wizard-padding: 156px 132px 6px 132px;
 		wizard-title-font-size: 108px;
@@ -115,71 +117,110 @@
 // Font Sizes
 // ---------------------------------------
 @lime-actionguide-label-font-size:  var(--primitive-font-size-48);
+@lime-actionguide-label-font-size-large:  var(--primitive-font-size-60);
 @lime-actionguide-label-font-weight: var(--primitive-font-weight-regular);
 @lime-alert-overlay-font-size:      var(--primitive-font-size-60);
 @lime-alert-subtitle-font-size:     @lime-heading-subtitle-font-size;
 @lime-alert-title-font-size:        var(--primitive-font-size-108);
 @lime-base-font-size:               var(--primitive-font-size-60);
+@lime-base-font-size-large:         var(--primitive-font-size-72);
 @lime-body-font-size:               @lime-base-font-size;
+@lime-body-font-size-large:         @lime-base-font-size-large;
 @lime-body-small-font-size:         var(--primitive-font-size-54);
-@lime-button-font-size-large:       var(--primitive-font-size-96);
+@lime-body-small-font-size-large:   var(--primitive-font-size-66);
+@lime-button-font-size-large:       var(--primitive-font-size-72);
 @lime-button-font-size:             var(--primitive-font-size-60);
-@lime-button-small-font-size-large: var(--primitive-font-size-72);
+@lime-button-small-font-size-large: var(--primitive-font-size-66);
 @lime-button-small-font-size:       var(--primitive-font-size-54);
 @lime-card-caption-font-size:       var(--primitive-font-size-60);
+@lime-card-caption-font-size-large:       var(--primitive-font-size-72);
 @lime-card-label-font-size:         var(--primitive-font-size-48);
+@lime-card-label-font-size-large:         var(--primitive-font-size-58);
 @lime-card-split-caption-label-font-size:	var(--primitive-font-size-60);
+@lime-card-split-caption-label-font-size-large:	var(--primitive-font-size-72);
 @lime-header-compact-title-font-size: #guide.header[compact-title-font-size];
 @lime-header-mini-title-font-size:  #guide.header[mini-title-font-size];
 @lime-header-wizard-title-font-size: #guide.header[wizard-title-font-size];
 @lime-heading-large-font-size:      var(--primitive-font-size-72);
+@lime-heading-large-font-size-large:      var(--primitive-font-size-86);
 @lime-heading-medium-font-size:     var(--primitive-font-size-66);
+@lime-heading-medium-font-size-large:     var(--primitive-font-size-80);
 @lime-heading-small-font-size:      var(--primitive-font-size-54);
+@lime-heading-small-font-size-large:      var(--primitive-font-size-66);
 @lime-heading-tiny-font-size:       var(--primitive-font-size-48);
+@lime-heading-tiny-font-size-large:       var(--primitive-font-size-58);
 @lime-heading-subtitle-font-size:   #guide.header[standard-subtitle-font-size];
+@lime-heading-subtitle-font-size-large:   #guide.header[standard-subtitle-font-size-large];
 @lime-heading-title-font-size:      #guide.header[standard-title-font-size];
 @lime-iconitem-label-font-size:     var(--primitive-font-size-42);
+@lime-iconitem-label-font-size-large:     var(--primitive-font-size-50);
 @lime-iconitem-title-font-size:     var(--primitive-font-size-48);
+@lime-iconitem-title-font-size-large:     var(--primitive-font-size-58);
 @lime-imageitem-caption-font-size:  var(--primitive-font-size-60);
+@lime-imageitem-caption-font-size-large: var(--primitive-font-size-72);
 @lime-imageitem-label-font-size:    var(--primitive-font-size-48);
+@lime-imageitem-label-font-size-large: var(--primitive-font-size-58);
 @lime-input-font-size:              var(--primitive-font-size-78);
+@lime-input-font-size-large:        var(--primitive-font-size-94);
 @lime-input-keypad-key-font-size: var(--primitive-font-size-90);
+@lime-input-keypad-key-font-size-large: var(--primitive-font-size-108);
 @lime-input-fullscreen-title-font-size: var(--primitive-font-size-108);
 @lime-input-fullscreen-numbercell-font-size:  126px;
 @lime-input-fullscreen-numbercell-password-font-size:  var(--primitive-font-size-48);
+@lime-input-fullscreen-numbercell-password-font-size-large:  var(--primitive-font-size-56);
 @lime-input-fullscreen-numberfield-font-size: @lime-input-font-size;
+@lime-input-fullscreen-numberfield-font-size-large: @lime-input-font-size-large;
 @lime-input-overlay-title-font-size:          var(--primitive-font-size-90);
 @lime-input-overlay-numbercell-font-size:     var(--primitive-font-size-108);
 @lime-input-overlay-numbercell-password-font-size:  var(--primitive-font-size-40);
+@lime-input-overlay-numbercell-password-font-size-large:  var(--primitive-font-size-48);
 @lime-input-overlay-numberfield-font-size:    @lime-input-font-size;
+@lime-input-overlay-numberfield-font-size-large:    @lime-input-font-size-large;
 @lime-input-invalid-tooltip-font-size:        @lime-inputfield-invalid-tooltip-font-size;
 @lime-inputfield-invalid-tooltip-font-size:   var(--primitive-font-size-48);
+@lime-input-invalid-tooltip-font-size-large:  @lime-inputfield-invalid-tooltip-font-size-large;
+@lime-inputfield-invalid-tooltip-font-size-large: var(--primitive-font-size-58);
 @lime-inputfield-small-font-size:	var(--primitive-font-size-60);
+@lime-inputfield-small-font-size-large:	var(--primitive-font-size-72);
 @lime-item-font-size:               var(--primitive-font-size-60);
 @lime-item-font-size-large:         var(--primitive-font-size-72);
 @lime-item-label-font-size:         var(--primitive-font-size-48);
-@lime-item-label-font-size-large:   var(--primitive-font-size-54);
+@lime-item-label-font-size-large:   var(--primitive-font-size-58);
 @lime-item-small-font-size:         var(--primitive-font-size-60);
 @lime-item-small-font-size-large:   var(--primitive-font-size-72);
 @lime-item-small-label-font-size:   var(--primitive-font-size-48);
 @lime-keyguide-font-size:           var(--primitive-font-size-60);
+@lime-keyguide-font-size-large:           var(--primitive-font-size-72);
 @lime-mediaoverlay-caption-font-size:  var(--primitive-font-size-60);
+@lime-mediaoverlay-caption-font-size-large:  var(--primitive-font-size-72);
 @lime-mediaoverlay-text-font-size:     var(--primitive-font-size-48);
+@lime-mediaoverlay-text-font-size-large:     var(--primitive-font-size-60);
 @lime-mediaoverlay-subtitle-font-size: var(--primitive-font-size-48);
+@lime-mediaoverlay-subtitle-font-size-large: var(--primitive-font-size-58);
 @lime-mediaplayer-times-text-size:    var(--primitive-font-size-48);
+@lime-mediaplayer-times-text-size-large:    var(--primitive-font-size-58);
+@lime-pageviews-number-steps-number-font-size: @lime-base-font-size;
+@lime-pageviews-number-steps-number-font-size-large: @lime-base-font-size-large;
 @lime-picker-font-size:             var(--primitive-font-size-54);
+@lime-picker-font-size-large:             var(--primitive-font-size-66);
 @lime-picker-joined-font-size:      var(--primitive-font-size-66);
+@lime-picker-joined-font-size-large:      var(--primitive-font-size-80);
 @lime-radioitem-icon-font-size: var(--primitive-font-size-48);
+@lime-radioitem-icon-font-size-large: var(--primitive-font-size-56);
 @lime-steps-step-number-font-size: var(--primitive-font-size-48);
+@lime-steps-step-number-font-size-large: var(--primitive-font-size-58);
 @lime-switch-icon-font-size:        var(--primitive-font-size-84);
-@lime-switch-icon-font-size-large:  138px;
 @lime-tablayout-tab-small-font-size: var(--primitive-font-size-48);
 @lime-tablayout-tab-font-size: var(--primitive-font-size-60);
+@lime-tablayout-tab-font-size-large: var(--primitive-font-size-72);
 @lime-tooltip-label-font-size:      var(--primitive-font-size-54);
+@lime-tooltip-label-font-size-large:    var(--primitive-font-size-66);
 @lime-tallglyph-alert-title-font-size:  @lime-alert-title-font-size;
 @lime-non-latin-body-font-size:         var(--primitive-font-size-54);
 @lime-non-latin-body-small-font-size:   var(--primitive-font-size-48);
+@lime-non-latin-body-small-font-size-large:   var(--primitive-font-size-60);
 @lime-tallglyph-body-small-font-size:   var(--primitive-font-size-48);
+@lime-tallglyph-body-small-font-size-large:   var(--primitive-font-size-60);
 @lime-non-latin-button-large-font-size: var(--primitive-font-size-54);
 @lime-non-latin-button-small-font-size: var(--primitive-font-size-48);
 @lime-non-latin-header-compact-title-font-size: @lime-header-compact-title-font-size;
@@ -251,6 +292,7 @@
 @lime-heading-subtitle-font-family: @lime-font-family;
 @lime-heading-subtitle-font-weight: var(--primitive-font-weight-regular);
 @lime-heading-subtitle-line-height: @lime-heading-title-line-height;
+@lime-heading-subtitle-line-height-large: #guide.header[standard-subtitle-line-height-large];
 @lime-heading-large-font-family: @lime-font-family;
 @lime-heading-large-font-weight: @lime-spottable-font-weight;
 @lime-heading-medium-font-family: @lime-heading-large-font-family;
@@ -293,6 +335,7 @@
 @lime-item-line-height: @lime-common-line-height;
 @lime-item-line-height-large: @lime-item-line-height;
 @lime-item-label-line-height: 1.25em;
+@lime-item-label-line-height-large: 1.2em;
 @lime-item-small-font-weight: @lime-item-font-weight;
 @lime-item-small-label-font-weight: @lime-item-label-font-weight;
 @lime-item-small-line-height: @lime-common-line-height;
@@ -317,6 +360,7 @@
 // ---------------------------------------
 @lime-actionguide-max-width: 1500px;
 @lime-actionguide-label-height: 60px;
+@lime-actionguide-label-height-large: 70px;
 @lime-actionguide-icon-height: 84px;
 @lime-actionguide-icon-margin: 0 0 ~"calc("var(--primitive-spacing-12) ~"* -1)" 0;
 @lime-actionguide-padding: var(--primitive-spacing-12) 0 var(--primitive-spacing-36) 0;
@@ -335,6 +379,7 @@
 @lime-alert-overlay-body-padding: 0 var(--primitive-spacing-84);
 @lime-alert-overlay-image-padding: 0 var(--primitive-spacing-84);
 @lime-alert-overlay-width: 1128px;
+@lime-alert-overlay-max-width: calc(100vw - 2 * @lime-popup-position-corner-margin);
 
 // AlertImage
 // ---------------------------------------
@@ -358,8 +403,8 @@
 @lime-button-margin: var(--primitive-spacing-36);
 @lime-button-focusexpand-margin: 9px .extract(@lime-button-margin, right)[]; // 9px provides enough space for the expanded focus state
 @lime-button-h-padding: var(--primitive-spacing-60);
-@lime-button-height-large: 192px;
 @lime-button-height: 132px;
+@lime-button-height-large: @lime-button-height;
 @lime-button-icon-h-margin: var(--primitive-spacing-24);
 @lime-button-icon-margin-end: @lime-button-icon-h-margin;
 @lime-button-icon-margin-start: 0;
@@ -379,25 +424,29 @@
 @lime-button-small-margin: var(--primitive-spacing-24);
 @lime-button-small-focusexpand-margin: @lime-button-focusexpand-margin;
 @lime-button-small-h-padding: var(--primitive-spacing-60);
-@lime-button-small-height-large: 144px;
 @lime-button-small-height: 108px;
+@lime-button-small-height-large: @lime-button-small-height;
 @lime-button-small-max-width: 1020px;
 @lime-button-small-min-width: 264px;
 @lime-button-small-min-width-default: 720px;
 @lime-button-colordot-bottom: var(--primitive-spacing-12);
 @lime-button-colordot-border-radius: var(--semantic-radius-full);
 @lime-button-colordot-width: 60px;
+@lime-button-colordot-width-font-size-large: 72px;
 @lime-button-colordot-h-margin: var(--primitive-spacing-84);
-@lime-button-colordot-height: 12px;
+@lime-button-colordot-height: 24px;
+@lime-button-colordot-height-font-size-large: 30px;
 @lime-button-colordot-h-padding: var(--primitive-spacing-24);
 @lime-button-colordot-padding-start: var(--primitive-spacing-36);
 @lime-button-small-colordot-bottom: var(--primitive-spacing-12);
 @lime-button-small-colordot-width: 51px;
+@lime-button-small-colordot-width-font-size-large: 60px;
 @lime-button-small-colordot-h-margin: var(--primitive-spacing-72);
-@lime-button-small-colordot-height: 9px;
+@lime-button-small-colordot-height: 21px;
+@lime-button-small-colordot-height-font-size-large: 24px;
 @lime-button-small-colordot-padding-start: var(--primitive-spacing-30);
-@lime-button-icon-only-colordot-width: 66px;
-@lime-button-icon-only-colordot-height: 9px;
+@lime-button-icon-only-colordot-width: 30px;
+@lime-button-icon-only-colordot-height: 12px;
 @lime-button-collapse-duration: 300ms;
 @lime-button-collapsable-icon-margin: 0 var(--primitive-spacing-24);
 
@@ -407,20 +456,25 @@
 @lime-card-border-radius: var(--semantic-radius-container);
 @lime-card-image-border-width: 6px;
 @lime-card-resting-border-width: 3px;
-@lime-card-selection-check-icon-size: 90px;
-@lime-card-selection-icon-size: 120px;
+@lime-card-selection-check-icon-size: 48px;
+@lime-card-selection-check-icon-size-large: 58px;
+@lime-card-selection-icon-size: 144px;
+@lime-card-selection-icon-size-large: (@lime-card-selection-icon-size * 1.2);
 @lime-card-selection-icon-border-radius: 50%;
 @lime-card-selection-icon-margin: 0;
-@lime-card-selection-check-icon-line-height: 90px;
-@lime-card-selection-icon-line-height: 144px;
+@lime-card-selection-check-icon-container-large: 72px;
+@lime-card-selection-check-icon-line-height: 60px;
+@lime-card-selection-check-icon-line-height-large: 70px;
+@lime-card-selection-icon-line-height: 180px;
 @lime-card-badge-size: 108px;
 @lime-card-badge-margin: 0;
 @lime-card-badge-top: var(--primitive-spacing-24);
 @lime-card-badge-left: var(--primitive-spacing-24);
 @lime-card-badge-right: var(--primitive-spacing-24);
 @lime-card-caption-line-height: 84px;
+@lime-card-caption-line-height-large: 100px;
 @lime-card-label-line-height: 60px;
-@lime-card-split-caption-label-line-height: 84px;
+@lime-card-label-line-height-large: 70px;
 @lime-card-split-caption-label-padding: 0 var(--primitive-spacing-48);
 @lime-card-split-caption-lower-label-padding: var(--primitive-spacing-18);
 @lime-card-vertical-captions-padding: var(--primitive-spacing-36) 0;
@@ -477,7 +531,9 @@
 // Date and Time Picker
 @lime-datecomponentpicker-margin: 0 var(--primitive-spacing-24);
 @lime-datetime-fontsize: var(--primitive-font-size-66);
+@lime-datetime-fontsize-large: var(--primitive-font-size-80);
 @lime-datetime-heading-margin: 0 0 var(--primitive-spacing-132);
+@lime-timepicker-colon-fontsize-large: var(--primitive-font-size-72);
 @lime-timepicker-colon-margin: 0 var(--primitive-spacing-6);
 
 // Dropdown
@@ -600,8 +656,8 @@
 @lime-header-compact-titles-row-padding: 0 0 #guide.header[compact-subtitle-height];
 @lime-header-compact-subtitle-padding: 0;
 @lime-header-compact-subtitle-margin-top: (#guide.header[compact-subtitle-height] - #guide.header[compact-subtitle-line-height]);
-@lime-header-compact-slotbefore-margin-end: var(--primitive-spacing-24);
-@lime-header-compact-slotafter-margin-start: var(--primitive-spacing-30);
+@lime-header-compact-slotbefore-margin-end: var(--primitive-spacing-12);
+@lime-header-compact-slotafter-margin-start: var(--primitive-spacing-12);
 @lime-header-mini-margin:
 	var(--primitive-spacing-6)
 	@lime-component-spacing
@@ -627,6 +683,8 @@
 		)[@result]
 	)
 	.extract(#guide.header[mini-padding], left)[];
+@lime-header-mini-slotbefore-margin-end: var(--primitive-spacing-12);
+@lime-header-mini-slotafter-margin-start: var(--primitive-spacing-12);
 @lime-header-wizard-nosubtitle-padding-bottom: ~"calc(@{lime-header-subtitle-height} + var(--primitive-spacing-6))";
 @lime-header-wizard-margin: 0;
 @lime-header-wizard-padding:
@@ -664,30 +722,37 @@
 // Icon
 // ---------------------------------------
 @lime-icon-large-size: 84px;
+@lime-icon-large-size-large: (@lime-icon-large-size * 1.2);
 @lime-icon-medium-size: 78px;
+@lime-icon-medium-size-large: (@lime-icon-medium-size * 1.2);
 @lime-icon-small-size: 72px;
+@lime-icon-small-size-large: (@lime-icon-small-size * 1.2);
 @lime-icon-tiny-size: 60px;
+@lime-icon-tiny-size-large: (@lime-icon-tiny-size * 1.2);
 @lime-icon-margin: var(--primitive-spacing-24);
-@lime-icon-large-size-large: (@lime-icon-large-size * 1.2);
-@lime-icon-small-size-large: (@lime-icon-small-size * 1.2);
 
 // IconItem
 // ---------------------------------------
 @lime-iconitem-height: 256px;
 @lime-iconitem-width: 334px;
 @lime-iconitem-title-height: ~"calc("@lime-iconitem-height ~"+ "@lime-iconitem-title-line-height ~"+ 24px)";
+@lime-iconitem-title-height-large: ~"calc("@lime-iconitem-height ~"+ "@lime-iconitem-title-line-height-large ~"+ 24px)";
 @lime-iconitem-border-radius: var(--semantic-radius-container);
 @lime-iconitem-border-style: solid;
 @lime-iconitem-border-width: 4px;
 @lime-iconitem-icon-margin: 0;
 @lime-iconitem-icon-height: 120px;
+@lime-iconitem-icon-height-large: 146px;
 @lime-iconitem-icon-width: @lime-iconitem-icon-height;
+@lime-iconitem-icon-width-large: @lime-iconitem-icon-height-large;
 @lime-iconitem-image-height: 230px;
 @lime-iconitem-image-width: @lime-iconitem-image-height;
 @lime-iconitem-label-image-height: ~"calc("@lime-iconitem-height ~"- "@lime-iconitem-label-line-height ~"- 24px)";
 @lime-iconitem-label-line-height: 54px;
+@lime-iconitem-label-line-height-large: 64px;
 @lime-iconitem-label-padding: 0 var(--primitive-spacing-12);
 @lime-iconitem-title-line-height: 60px;
+@lime-iconitem-title-line-height-large: 70px;
 @lime-iconitem-title-margin: var(--primitive-spacing-24) 0 0 0;
 
 // ImageItem
@@ -696,7 +761,9 @@
 @lime-imageitem-border-radius: var(--semantic-radius-button);
 @lime-imageitem-image-border-width: 6px;
 @lime-imageitem-caption-line-height: 84px;
+@lime-imageitem-caption-line-height-large: 100px;
 @lime-imageitem-label-line-height: 60px;
+@lime-imageitem-label-line-height-large: 70px;
 @lime-imageitem-placeholder-caption-height: 102px;
 @lime-imageitem-placeholder-label-height: 66px;
 @lime-imageitem-horizontal-padding: var(--primitive-spacing-30);
@@ -717,7 +784,9 @@
 @lime-imageitem-vertical-focus-image-transform: scale(1.1);
 @lime-imageitem-vertical-image-icon-margin: 0 var(--primitive-spacing-24) 0 0;
 @lime-imageitem-vertical-image-icon-size: 132px;
+@lime-imageitem-vertical-image-icon-size-large: (@lime-imageitem-vertical-image-icon-size * 1.2);
 @lime-imageitem-vertical-selection-icon-size: 120px;
+@lime-imageitem-vertical-selection-icon-size-large: (@lime-imageitem-vertical-selection-icon-size * 1.2);
 
 // Input
 // ---------------------------------------
@@ -780,6 +849,7 @@
 @lime-input-overlay-title-margin: 0 var(--primitive-spacing-144) 0 var(--primitive-spacing-144);
 @lime-input-invalid-tooltip-margin-top: var(--primitive-spacing-24);
 @lime-input-invalid-tooltip-line-height: 60px;
+@lime-input-invalid-tooltip-line-height-large: 70px;
 
 // InputField
 // ---------------------------------------
@@ -791,11 +861,14 @@
 @lime-inputfield-text-indent: 0.2em;
 @lime-inputfield-border-radius: var(--semantic-radius-button);
 @lime-inputfield-invalid-tooltip-margin-top: var(--primitive-spacing-30);
+@lime-inputfield-invalid-tooltip-line-height: @lime-input-invalid-tooltip-line-height;
+@lime-inputfield-invalid-tooltip-line-height-large: @lime-input-invalid-tooltip-line-height-large;
 @lime-inputfield-height: 168px;
 @lime-inputfield-width: 1560px;
 @lime-inputfield-withoneicon-width: 1386px;
 @lime-inputfield-withtwoicons-width: 1272px;
 @lime-inputfield-small-height: 132px;
+@lime-inputfield-small-height-large: 156px;
 @lime-inputfield-highlight-height: 100%;
 @lime-inputfield-small-width: 1200px;
 @lime-inputfield-small-withoneicon-width: 990px;
@@ -821,8 +894,10 @@
 // Keyguide
 // ---------------------------------------
 @lime-keyguide-colordot-height: 12px;
+@lime-keyguide-colordot-height-large: calc(@lime-keyguide-colordot-height * 1.2);
 @lime-keyguide-colordot-margin: 0 ((@lime-icon-large-size - @lime-keyguide-colordot-width) / 2); // Keep this centered by adapting its margins
 @lime-keyguide-colordot-width: 60px;
+@lime-keyguide-colordot-width-large: calc(@lime-keyguide-colordot-width * 1.2);
 @lime-keyguide-colordot-border-radius: var(--semantic-radius-full);
 @lime-keyguide-font-weight: var(--primitive-font-weight-regular);
 @lime-keyguide-icon-border-radius: var(--semantic-radius-container);
@@ -849,7 +924,8 @@
 @lime-mediaoverlay-caption-margin-bottom: var(--primitive-spacing-36);
 @lime-mediaoverlay-caption-font-weight: var(--primitive-font-weight-semibold);
 @lime-mediaoverlay-font-weight: var(--primitive-font-weight-regular);
-@lime-mediaoverlay-line-height: 1.3em;
+@lime-mediaoverlay-line-height: 60px;
+@lime-mediaoverlay-line-height-large: 70px;
 @lime-mediaoverlay-caption-line-height: 1.4em;
 @lime-mediaoverlay-padding: var(--primitive-spacing-24);
 @lime-mediaoverlay-progressbar-margin: var(--primitive-spacing-24);
@@ -864,6 +940,7 @@
 @lime-mediaplayer-button-border-radius: 96px;
 @lime-mediaplayer-button-height: 180px;
 @lime-mediaplayer-button-icon-size: 108px;
+@lime-mediaplayer-button-icon-size-large: 130px;
 @lime-mediaplayer-button-padding: var(--primitive-spacing-36);
 @lime-mediaplayer-controls-actionguide-height: 168px;
 @lime-mediaplayer-controls-actionguide-padding-bottom: 0;
@@ -880,6 +957,7 @@
 @lime-mediaplayer-slider-knob-size: 36px;
 @lime-mediaplayer-slider-tap-area: 60px;
 @lime-mediaplayer-times-line-height: 60px;
+@lime-mediaplayer-times-line-height-large: 70px;
 @lime-mediaplayer-times-min-width: 192px;
 
 // PageViews
@@ -917,6 +995,7 @@
 @lime-picker-item-padding: 0 @lime-spotlight-outset;
 @lime-picker-focus-duration: @lime-spotlight-focus-animation-duration;
 @lime-picker-value-height: 72px;
+@lime-picker-value-height-large: 84px;
 @lime-picker-vertical-height: 362px;
 @lime-picker-vertical-large-value-width: 696px;
 @lime-picker-joined-horizontal-border-radius: var(--semantic-radius-full);
@@ -926,13 +1005,16 @@
 @lime-picker-joined-horizontal-value-margin: 0 0 var(--primitive-spacing-48) 0;
 @lime-picker-joined-vertical-border-radius: var(--semantic-radius-button);
 @lime-picker-joined-value-height: 90px;
+@lime-picker-joined-value-height-large: 110px;
 @lime-picker-small-value-width: (@lime-icon-large-size + (@lime-spotlight-outset * 3));
 @lime-picker-medium-value-width: 360px;
 @lime-picker-large-value-width: 468px;
 @lime-picker-incrementer-margin: var(--primitive-spacing-36);
 @lime-picker-incrementer-width: 120px;
 @lime-picker-indicator-width: 24px;
+@lime-picker-indicator-width-large: calc(@lime-picker-indicator-width * 1.2);
 @lime-picker-indicator-height: 24px;
+@lime-picker-indicator-height-large: calc(@lime-picker-indicator-height * 1.2);
 @lime-picker-indicator-border-radius: @lime-picker-indicator-width;
 @lime-picker-indicator-inactive-scale: 0.75;
 @lime-picker-indicator-active-scale: 1;
@@ -953,6 +1035,7 @@
 // ---------------------------------------
 @lime-popuptablayout-margin: var(--primitive-spacing-60) auto var(--primitive-spacing-132) var(--primitive-spacing-60);
 @lime-popuptablayout-tab-icon-size: 96px;
+@lime-popuptablayout-tab-icon-size-large: (@lime-popuptablayout-tab-icon-size * 1.2);
 @lime-popuptablayout-tabs-border-radius: var(--semantic-radius-container);
 @lime-popuptablayout-tabs-content-spacing: var(--primitive-spacing-36);
 @lime-popuptablayout-content-border-radius: var(--semantic-radius-popup);
@@ -1054,7 +1137,6 @@
 @lime-slider-knob-height: @lime-slider-knob-width;
 @lime-slider-knob-height-large: @lime-slider-knob-height;
 @lime-slider-tooltip-offset: (@lime-slider-knob-height / 2);
-@lime-slider-knob-resting-state-scale: 1;
 @lime-slider-min-max-margin-top: var(--primitive-spacing-24);
 @lime-slider-min-max-font-size: var(--primitive-font-size-48);
 @lime-slider-min-max-font-weight: var(--primitive-font-weight-regular);
@@ -1094,16 +1176,17 @@
 
 // Switch
 // ---------------------------------------
-@lime-switch-border-radius: var(--primitive-radius-30);
+@lime-switch-border-radius: var(--primitive-radius-999);
 @lime-switch-height: 60px;
 @lime-switch-width: 120px;
 @lime-switch-icon-height: 48px;
+@lime-switch-icon-height-large: 57px;
 @lime-switch-icon-line-height: @lime-switch-height;
-@lime-switch-height-large: @lime-icon-small-size-large;
-@lime-switch-width-large: 162px;
-@lime-switch-icon-height-large: @lime-icon-small-size-large;
-@lime-switch-icon-line-height-large: @lime-switch-icon-height-large;
+@lime-switch-icon-line-height-large: @lime-switch-height-large;
+@lime-switch-height-large: 72px;
+@lime-switch-width-large: 144px;
 @lime-switch-icon-top: ((@lime-switch-height - @lime-switch-icon-height) / 2);
+@lime-switch-icon-top-large: ((@lime-switch-height-large - @lime-switch-icon-height-large) / 2);
 @lime-switch-spottable-margin: @lime-component-spacing;
 @lime-switch-spottable-border-radius: var(--primitive-radius-24);
 @lime-switch-spottable-position: ~"calc(@{lime-component-spacing} * -1)"; // These correlate with the numbers from 'margin" above
@@ -1144,6 +1227,7 @@
 @lime-tooltip-point-height: 37px; // actual value is 36px. +1px to ensure no gaps
 @lime-tooltip-border-radius: var(--semantic-radius-button);
 @lime-tooltip-label-line-height: 72px;
+@lime-tooltip-label-line-height-large: 84px;
 @lime-tooltip-padding: var(--primitive-spacing-12) var(--primitive-spacing-48);
 @lime-tooltip-margin-offset: var(--primitive-spacing-18); // GUI for the length of the arrow
 @lime-tooltip-marquee-width: 600px;
@@ -1160,10 +1244,13 @@
 @lime-video-slider-tooltip-shift-position-bottom:  ~"calc(@{lime-video-slider-tooltip-position-bottom} + @{lime-video-slider-tooltip-arrow-border-top})";
 @lime-video-slider-tooltip-margin-bottom:          var(--primitive-spacing-6);
 @lime-video-slider-tooltip-font-size:              var(--primitive-font-size-48);
+@lime-video-slider-tooltip-font-size-large:        var(--primitive-font-size-58);
 @lime-video-slider-tooltip-font-weight:            var(--primitive-font-weight-regular);
 @lime-video-slider-tooltip-line-height:            72px;
+@lime-video-slider-tooltip-line-height-large:      84px;
 @lime-video-slider-tooltip-gutter-width:           var(--primitive-spacing-42);
 @lime-video-slider-tooltip-thumbnail-content-font-size:     var(--primitive-font-size-54);
+@lime-video-slider-tooltip-thumbnail-content-font-size-large: var(--primitive-font-size-56);
 @lime-video-slider-tooltip-thumbnail-content-margin-bottom: var(--primitive-spacing-30);
 @lime-video-slider-tooltip-thumbnail-border-radius: var(--primitive-radius-12);
 @lime-video-slider-tooltip-thumbnail-border-width:  12px;
@@ -1171,6 +1258,7 @@
 @lime-video-slider-tooltip-thumbnail-height: 240px;
 @lime-video-slider-tooltip-deactivated-thumbnail-opacity: 0.5;
 @lime-video-feedback-icon-font-size:               1.25em;
+@lime-video-feedback-icon-font-size-large:         1.5em;
 @lime-video-feedback-mini-font-size:               var(--primitive-font-size-66);
 @lime-video-feedback-mini-font-weight:             var(--primitive-font-weight-regular);
 @lime-video-feedback-mini-padding:                 var(--primitive-spacing-18) var(--primitive-spacing-60);
@@ -1181,9 +1269,11 @@
 @lime-video-feedback-message-font-weight:          var(--primitive-font-weight-semibold);
 @lime-video-player-badge-text-size:                var(--primitive-font-size-48);
 @lime-video-player-info-font-size:                 var(--primitive-font-size-54);
+@lime-video-player-info-font-size-large:           var(--primitive-font-size-66);
 @lime-video-player-info-font-weight:               var(--primitive-font-weight-regular);
 @lime-video-player-info-height:                    84px;
 @lime-video-player-info-line-height:               72px;
+@lime-video-player-info-line-height-large:         84px;
 @lime-video-player-info-padding:                   var(--primitive-spacing-72) var(--primitive-spacing-48) 0;
 @lime-video-player-info-margin-bottom:             var(--primitive-spacing-60);
 @lime-video-player-slider-container-height:        132px;
@@ -1191,8 +1281,10 @@
 @lime-video-player-padding-bottom:                 0;
 @lime-video-player-padding-side:                   var(--primitive-spacing-132);
 @lime-video-player-label-font-size:                var(--primitive-font-size-90);
+@lime-video-player-label-font-size-large:          var(--primitive-font-size-108);
 @lime-video-player-label-font-weight:              var(--primitive-font-weight-semibold);
 @lime-video-player-label-line-height:              120px;
+@lime-video-player-label-line-height-large:        146px;
 
 // VirtualList
 // ---------------------------------------

package/useScroll/HoverToScroll.js

@@ -71,7 +71,8 @@ var directionToFocus = {
  * @ui
  * @private
  */
-var HoverToScrollBase = function HoverToScrollBase(props) {
+var _HoverToScrollBase = function HoverToScrollBase(props) {
+  (0, _util.checkPropTypes)(_HoverToScrollBase, props);
   var direction = props.direction,
     scrollContainer = props.scrollContainerHandle.current,
     _props$scrollObserver = props.scrollObserver,
@@ -150,7 +151,8 @@ var HoverToScrollBase = function HoverToScrollBase(props) {
         hoverToScrollMultiplier[direction]; // a scrolling speed factor
         var startTime = (0, _util.perfNow)();
         mutableRef.current.hoveredPosition = position;
-        mutableRef.current.stopScrollByHover = false;
+        mutableRef.current.stopScrollByHover = scrollContainer.scrolling; // stop scrollByHover when it is in scrolling
+
         var _scrollByHover = function scrollByHover(currentTime) {
           if (!mutableRef.current.stopScrollByHover) {
             var elapsed = (currentTime - startTime) / 1000;
@@ -232,8 +234,8 @@ var HoverToScrollBase = function HoverToScrollBase(props) {
     children: [before ? renderHoverArea('before') : null, after ? renderHoverArea('after') : null]
   });
 };
-HoverToScrollBase.displayName = 'HoverToScrollBase';
-HoverToScrollBase.propTypes = /** @lends limestone/useScroll.HoverToScroll.HoverToScrollBase.prototype */{
+_HoverToScrollBase.displayName = 'HoverToScrollBase';
+_HoverToScrollBase.propTypes = /** @lends limestone/useScroll.HoverToScroll.HoverToScrollBase.prototype */{
   direction: _propTypes["default"].string,
   scrollContainerHandle: _propTypes["default"].object
 };
@@ -246,23 +248,24 @@ HoverToScrollBase.propTypes = /** @lends limestone/useScroll.HoverToScroll.Hover
  * @ui
  * @private
  */
-var HoverToScroll = exports.HoverToScroll = function HoverToScroll(_ref2) {
-  var scrollContainerHandle = _ref2.scrollContainerHandle,
-    rest = _objectWithoutProperties(_ref2, _excluded);
+var _HoverToScroll = exports.HoverToScroll = function HoverToScroll(props) {
+  (0, _util.checkPropTypes)(_HoverToScroll, props);
+  var scrollContainerHandle = props.scrollContainerHandle,
+    rest = _objectWithoutProperties(props, _excluded);
   return scrollContainerHandle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HoverToScrollBase, _objectSpread(_objectSpread({
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScrollBase, _objectSpread(_objectSpread({
       scrollContainerHandle: scrollContainerHandle
     }, rest), {}, {
       direction: "horizontal"
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(HoverToScrollBase, _objectSpread(_objectSpread({
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_HoverToScrollBase, _objectSpread(_objectSpread({
       scrollContainerHandle: scrollContainerHandle
     }, rest), {}, {
       direction: "vertical"
     }))]
   }) : null;
 };
-HoverToScroll.displayName = 'HoverToScroll';
-HoverToScroll.propTypes = /** @lends limestone/useScroll.HoverToScroll.prototype */{
+_HoverToScroll.displayName = 'HoverToScroll';
+_HoverToScroll.propTypes = /** @lends limestone/useScroll.HoverToScroll.prototype */{
   scrollContainerHandle: _propTypes["default"].object
 };
-var _default = exports["default"] = HoverToScroll;
+var _default = exports["default"] = _HoverToScroll;

package/useScroll/Scrollbar.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.ScrollbarBase = exports.Scrollbar = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
+var _util = require("@enact/core/util");
 var _Scrollbar = require("@enact/ui/useScroll/Scrollbar");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = require("react");
@@ -92,20 +93,23 @@ var useThemeScrollbar = function useThemeScrollbar(props) {
  * @ui
  * @private
  */
-var ScrollbarBase = exports.ScrollbarBase = /*#__PURE__*/(0, _react.memo)(function (_ref) {
-  var _ref$css = _ref.css,
-    css = _ref$css === void 0 ? _ScrollbarModule["default"] : _ref$css,
-    _ref$minThumbSize = _ref.minThumbSize,
-    minThumbSize = _ref$minThumbSize === void 0 ? 120 : _ref$minThumbSize,
-    _ref$vertical = _ref.vertical,
-    vertical = _ref$vertical === void 0 ? true : _ref$vertical,
-    rest = _objectWithoutProperties(_ref, _excluded3);
-  var props = _objectSpread({
+var ScrollbarBase = exports.ScrollbarBase = /*#__PURE__*/(0, _react.memo)(function (props) {
+  var scrollbarBaseProps = (0, _util.setDefaultProps)(props, {
+    css: _ScrollbarModule["default"],
+    minThumbSize: 120,
+    vertical: true
+  });
+  (0, _util.checkPropTypes)(ScrollbarBase, scrollbarBaseProps);
+  var css = scrollbarBaseProps.css,
+    minThumbSize = scrollbarBaseProps.minThumbSize,
+    vertical = scrollbarBaseProps.vertical,
+    rest = _objectWithoutProperties(scrollbarBaseProps, _excluded3);
+  var propsForHook = _objectSpread({
     css: css,
     minThumbSize: minThumbSize,
     vertical: vertical
   }, rest);
-  var _useThemeScrollbar = useThemeScrollbar(props),
+  var _useThemeScrollbar = useThemeScrollbar(propsForHook),
     restProps = _useThemeScrollbar.restProps,
     scrollbarProps = _useThemeScrollbar.scrollbarProps,
     scrollbarTrackProps = _useThemeScrollbar.scrollbarTrackProps;

package/useScroll/ScrollbarPlaceholder.js

@@ -30,9 +30,12 @@ var ScrollbarPlaceholder = exports.ScrollbarPlaceholder = function ScrollbarPlac
     _useState2 = _slicedToArray(_useState, 2),
     showPlaceholder = _useState2[0],
     setShowPlaceholder = _useState2[1];
+
+  // The placeholder needs to mount and then unmount so its `onSpotlightDisappear` fires and
+  // hands focus over to the real scrollbar once it is ready.
   (0, _react.useEffect)(function () {
     if (showPlaceholder) {
-      setShowPlaceholder(false);
+      setShowPlaceholder(false); // eslint-disable-line react-hooks/set-state-in-effect
     }
   }, [showPlaceholder]);
   var resetFocus = (0, _react.useCallback)(function () {

package/useScroll/ScrollbarTrack.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.ScrollbarTrackBase = exports.ScrollbarTrack = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _keymap = require("@enact/core/keymap");
+var _util = require("@enact/core/util");
 var _Accelerator = _interopRequireDefault(require("@enact/spotlight/Accelerator"));
 var _Spottable = _interopRequireDefault(require("@enact/spotlight/Spottable"));
 var _AnnounceDecorator = require("@enact/ui/AnnounceDecorator");
@@ -43,7 +44,8 @@ var SpottableDiv = (0, _Spottable["default"])('div');
  * @ui
  * @private
  */
-var ScrollbarTrack = exports.ScrollbarTrackBase = exports.ScrollbarTrack = function ScrollbarTrack(props) {
+var _ScrollbarTrack = exports.ScrollbarTrackBase = exports.ScrollbarTrack = function ScrollbarTrack(props) {
+  (0, _util.checkPropTypes)(_ScrollbarTrack, props);
   var ariaLabel = props['aria-label'],
     cbAlertScrollbarTrack = props.cbAlertScrollbarTrack,
     focusableScrollbar = props.focusableScrollbar,
@@ -132,8 +134,8 @@ var ScrollbarTrack = exports.ScrollbarTrackBase = exports.ScrollbarTrack = funct
     }, "announce")]
   }));
 };
-ScrollbarTrack.displayName = 'ScrollbarTrack';
-ScrollbarTrack.propTypes = /** @lends limestone/useScroll.ScrollbarTrack.prototype */{
+_ScrollbarTrack.displayName = 'ScrollbarTrack';
+_ScrollbarTrack.propTypes = /** @lends limestone/useScroll.ScrollbarTrack.prototype */{
   /**
    * The aria label for the component.
    *
@@ -199,11 +201,11 @@ ScrollbarTrack.propTypes = /** @lends limestone/useScroll.ScrollbarTrack.prototy
    */
   vertical: _propTypes["default"].bool
 };
-ScrollbarTrack.defaultProps = {
+_ScrollbarTrack.defaultProps = {
   cbAlertScrollbarTrack: nop,
   focusableScrollbar: false,
   onInteractionForScroll: nop,
   rtl: false,
   vertical: true
 };
-var _default = exports["default"] = ScrollbarTrack;
+var _default = exports["default"] = _ScrollbarTrack;