@nycds/button 0.5.0-prerelease.0 → 0.5.0-prerelease.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @nycds/button
 
+## 0.5.0-prerelease.1
+
+### Patch Changes
+
+- 76844b4: Feat: Back To Top a11y fixes (expand on keyboard focus & scroll to H1)
+
 ## 0.5.0-prerelease.0
 
 ### Minor Changes

package/dist/button-aem.css

@@ -979,6 +979,7 @@ nyc-back-to-top:not(.enabled) {
     --nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
     --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
     --nyc-cmp-button-border-color: var(--nyc-cmp-button-color);
+    --nyc-cmp-button-border-color-hover: var(--nyc-cmp-button-border-color);
     --nyc-cmp-button-border-width: 2px;
     --nyc-cmp-button-gap: 0;
     --nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
@@ -1037,38 +1038,43 @@ nyc-back-to-top:not(.enabled) {
     text-align: left;
     opacity: 1;
     transition:
-      padding 0.3s ease, max-width 0.3s ease, opacity 0.3s 0.3s ease;
+      padding 0.3s 0.2s ease, max-width 0.3s 0.2s ease, opacity 0.3s ease;
   }
 
 @media (min-width: 768px) {
 
 .button--back-to-top .cmp-button span {
-      max-width: calc(3.5em + var(--space-btwn));
+      visibility: hidden;
+      max-width: 0;
       max-height: 2.2em;
-      padding-left: var(--space-btwn);
+      padding-left: 0;
+      padding-left: initial;
       overflow: hidden;
+      opacity: 0;
   }
     }
 
-.button--back-to-top .cmp-button:hover {
+.button--back-to-top .cmp-button:hover,.button--back-to-top .cmp-button:focus {
     color: var(--nyc-sys-color-primary);
     border-color: var(--nyc-sys-color-primary);
   }
 
-/* Desktop unhovered/closed state */
-
-.button--back-to-top .cmp-button:not(:hover) span {
+.button--back-to-top .cmp-button:hover span,.button--back-to-top .cmp-button:focus span {
       transition:
-        padding 0.3s 0.2s ease, max-width 0.3s 0.2s ease, opacity 0.3s ease;
+        padding 0.3s ease, max-width 0.3s ease, opacity 0.3s 0.3s ease;
     }
 
 @media (min-width: 768px) {
 
-.button--back-to-top .cmp-button:not(:hover) span {
-        visibility: hidden;
-        max-width: 0;
-        padding-left: 0;
-        padding-left: initial;
-        opacity: 0;
+.button--back-to-top .cmp-button:hover span,.button--back-to-top .cmp-button:focus span {
+        visibility: visible;
+        max-width: calc(3.5em + var(--space-btwn));
+        padding-left: var(--space-btwn);
+        opacity: 1;
     }
       }
+
+/* Desktop unhovered/closed state */
+
+.button--back-to-top .cmp-button:not(:hover) span {
+    }

package/dist/button-aem.min.css

@@ -1 +1 @@
-.cmp-button,.cmp-button:link,.cmp-button:visited,.cmp-form-button,.nyc-button,.nyc-button:link,.nyc-button:visited{--_background:var(--nyc-cmp-button-background,#103fef);--_background-hover:var(--nyc-cmp-button-background-hover,#050560);--_border-color:var(--nyc-cmp-button-border-color,#103fef);--_border-color-hover:var(--nyc-cmp-button-border-color-hover,#050560);--_border-width:var(--nyc-cmp-button-border-width,2px);--_border-radius:var(--nyc-cmp-button-border-radius,0);--_color:var(--nyc-cmp-button-color,#fff);--_color-hover:var(--nyc-cmp-button-color-hover,#fff);--_font-weight:var(--nyc-cmp-button-font-weight,600);--_font-size:var(--nyc-cmp-button-font-size,1rem);--_shadow:var(--nyc-cmp-button-shadow,none);--_padding-block:var(--nyc-cmp-button-padding-block,0.75rem);--_padding-inline:var(--nyc-cmp-button-padding-inline,0.75rem);--_outline-color:var(--nyc-cmp-button-outline-color,inherit);--_gap:var(--nyc-cmp-button-gap,0.5rem);--_size-icon:var(--_font-size);align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--_background);border-color:var(--_border-color);border-radius:var(--_border-radius);border-style:solid;border-width:var(--_border-width);box-shadow:var(--_shadow);color:var(--_color);cursor:pointer;display:inline-flex;font-size:var(--_font-size);font-weight:var(--_font-weight);gap:calc(var(--_gap)*.8);justify-content:center;line-height:1.2;padding:var(--_padding-block) var(--_padding-inline);text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:all .3s ease}.cmp-button:link:hover,.cmp-button:not(.does-not-exist):hover,.cmp-button:visited:hover,.cmp-form-button:not(.does-not-exist):hover,.nyc-button:link:hover,.nyc-button:not(.does-not-exist):hover,.nyc-button:visited:hover{background:var(--_background-hover);border-color:var(--_border-color-hover);color:var(--_color-hover);-webkit-text-decoration:none;text-decoration:none}.nyc-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.nyc-button:link:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.nyc-button:visited:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:link:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:visited:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-form-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:link:disabled,.cmp-button:not(.does-not-exist):disabled,.cmp-button:visited:disabled,.cmp-button[disabled]:link,.cmp-button[disabled]:not(.does-not-exist),.cmp-button[disabled]:visited,.cmp-form-button:not(.does-not-exist):disabled,.cmp-form-button[disabled]:not(.does-not-exist),.disabled.cmp-button:link,.disabled.cmp-button:not(.does-not-exist),.disabled.cmp-button:visited,.disabled.cmp-form-button:not(.does-not-exist),.disabled.nyc-button:link,.disabled.nyc-button:not(.does-not-exist),.disabled.nyc-button:visited,.nyc-button:link:disabled,.nyc-button:not(.does-not-exist):disabled,.nyc-button:visited:disabled,.nyc-button[disabled]:link,.nyc-button[disabled]:not(.does-not-exist),.nyc-button[disabled]:visited{--nyc-cmp-button-color:var(--nyc-sys-color-on-disabled)!important;--nyc-cmp-button-background:var(--nyc-sys-color-disabled)!important;--nyc-cmp-button-border-color:var(--nyc-sys-color-on-disabled)!important}.cmp-button:link *,.cmp-button:not(.does-not-exist) *,.cmp-button:visited *,.cmp-form-button:not(.does-not-exist) *,.nyc-button:link *,.nyc-button:not(.does-not-exist) *,.nyc-button:visited *{pointer-events:none}.active.cmp-button:link,.active.cmp-button:not(.does-not-exist),.active.cmp-button:visited,.active.cmp-form-button:not(.does-not-exist),.active.nyc-button:link,.active.nyc-button:not(.does-not-exist),.active.nyc-button:visited{background:var(--_color-hover);color:#fff}.size--xs.cmp-button:link,.size--xs.cmp-button:not(.does-not-exist),.size--xs.cmp-button:visited,.size--xs.cmp-form-button:not(.does-not-exist),.size--xs.nyc-button:link,.size--xs.nyc-button:not(.does-not-exist),.size--xs.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.68);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.58);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.4)}.size--s.cmp-button:link,.size--s.cmp-button:not(.does-not-exist),.size--s.cmp-button:visited,.size--s.cmp-form-button:not(.does-not-exist),.size--s.nyc-button:link,.size--s.nyc-button:not(.does-not-exist),.size--s.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.84);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.66);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.54)}.size--nm.cmp-button:link,.size--nm.cmp-button:not(.does-not-exist),.size--nm.cmp-button:visited,.size--nm.cmp-form-button:not(.does-not-exist),.size--nm.nyc-button:link,.size--nm.nyc-button:not(.does-not-exist),.size--nm.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.92);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.8);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.62)}.cmp-button:link .rim-color--blue,.cmp-button:not(.does-not-exist) .rim-color--blue,.cmp-button:visited .rim-color--blue,.cmp-form-button:not(.does-not-exist) .rim-color--blue,.nyc-button:link .rim-color--blue,.nyc-button:not(.does-not-exist) .rim-color--blue,.nyc-button:visited .rim-color--blue,.rim-color--blue.cmp-button:link,.rim-color--blue.cmp-button:not(.does-not-exist),.rim-color--blue.cmp-button:visited,.rim-color--blue.cmp-form-button:not(.does-not-exist),.rim-color--blue.nyc-button:link,.rim-color--blue.nyc-button:not(.does-not-exist),.rim-color--blue.nyc-button:visited{--_border-color:var(--nyc-sys-color-primary)}.cmp-button:link .rim-color--blue:hover,.cmp-button:not(.does-not-exist) .rim-color--blue:hover,.cmp-button:visited .rim-color--blue:hover,.cmp-form-button:not(.does-not-exist) .rim-color--blue:hover,.nyc-button:link .rim-color--blue:hover,.nyc-button:not(.does-not-exist) .rim-color--blue:hover,.nyc-button:visited .rim-color--blue:hover,.rim-color--blue.cmp-button:link:hover,.rim-color--blue.cmp-button:not(.does-not-exist):hover,.rim-color--blue.cmp-button:visited:hover,.rim-color--blue.cmp-form-button:not(.does-not-exist):hover,.rim-color--blue.nyc-button:link:hover,.rim-color--blue.nyc-button:not(.does-not-exist):hover,.rim-color--blue.nyc-button:visited:hover{--_border-color-hover:var(--nyc-sys-color-primary)}.cmp-button:link .shape--square,.cmp-button:not(.does-not-exist) .shape--square,.cmp-button:visited .shape--square,.cmp-form-button:not(.does-not-exist) .shape--square,.nyc-button:link .shape--square,.nyc-button:not(.does-not-exist) .shape--square,.nyc-button:visited .shape--square,.shape--square.cmp-button:link,.shape--square.cmp-button:not(.does-not-exist),.shape--square.cmp-button:visited,.shape--square.cmp-form-button:not(.does-not-exist),.shape--square.nyc-button:link,.shape--square.nyc-button:not(.does-not-exist),.shape--square.nyc-button:visited{border-radius:0}.cmp-button:link .shape--rounded,.cmp-button:not(.does-not-exist) .shape--rounded,.cmp-button:visited .shape--rounded,.cmp-form-button:not(.does-not-exist) .shape--rounded,.nyc-button:link .shape--rounded,.nyc-button:not(.does-not-exist) .shape--rounded,.nyc-button:visited .shape--rounded,.shape--rounded.cmp-button:link,.shape--rounded.cmp-button:not(.does-not-exist),.shape--rounded.cmp-button:visited,.shape--rounded.cmp-form-button:not(.does-not-exist),.shape--rounded.nyc-button:link,.shape--rounded.nyc-button:not(.does-not-exist),.shape--rounded.nyc-button:visited{border-radius:calc(var(--_border-radius)*.15)}.cmp-button:link .shape--circle,.cmp-button:not(.does-not-exist) .shape--circle,.cmp-button:visited .shape--circle,.cmp-form-button:not(.does-not-exist) .shape--circle,.nyc-button:link .shape--circle,.nyc-button:not(.does-not-exist) .shape--circle,.nyc-button:visited .shape--circle,.shape--circle.cmp-button:link,.shape--circle.cmp-button:not(.does-not-exist),.shape--circle.cmp-button:visited,.shape--circle.cmp-form-button:not(.does-not-exist),.shape--circle.nyc-button:link,.shape--circle.nyc-button:not(.does-not-exist),.shape--circle.nyc-button:visited{border-radius:50%}.cmp-button:link .shape--circle,.cmp-button:link .shape--square,.cmp-button:not(.does-not-exist) .shape--circle,.cmp-button:not(.does-not-exist) .shape--square,.cmp-button:visited .shape--circle,.cmp-button:visited .shape--square,.cmp-form-button:not(.does-not-exist) .shape--circle,.cmp-form-button:not(.does-not-exist) .shape--square,.nyc-button:link .shape--circle,.nyc-button:link .shape--square,.nyc-button:not(.does-not-exist) .shape--circle,.nyc-button:not(.does-not-exist) .shape--square,.nyc-button:visited .shape--circle,.nyc-button:visited .shape--square,.shape--circle.cmp-button:link,.shape--circle.cmp-button:not(.does-not-exist),.shape--circle.cmp-button:visited,.shape--circle.cmp-form-button:not(.does-not-exist),.shape--circle.nyc-button:link,.shape--circle.nyc-button:not(.does-not-exist),.shape--circle.nyc-button:visited,.shape--square.cmp-button:link,.shape--square.cmp-button:not(.does-not-exist),.shape--square.cmp-button:visited,.shape--square.cmp-form-button:not(.does-not-exist),.shape--square.nyc-button:link,.shape--square.nyc-button:not(.does-not-exist),.shape--square.nyc-button:visited{height:calc(var(--_padding-block)*2 + var(--_font-size)*1.15);width:calc(var(--_padding-block)*2 + var(--_font-size)*1.15)}.has-count.cmp-button:link,.has-count.cmp-button:not(.does-not-exist),.has-count.cmp-button:visited,.has-count.cmp-form-button:not(.does-not-exist),.has-count.nyc-button:link,.has-count.nyc-button:not(.does-not-exist),.has-count.nyc-button:visited{--nyc-cmp-button-background:var(--nyc-ref-color-blue-90)!important;--nyc-cmp-button-color:var(--nyc-sys-color-primary)!important;--nyc-cmp-button-border-color:var(--nyc-sys-color-primary)!important}.cmp-button:link .icon,.cmp-button:not(.does-not-exist) .icon,.cmp-button:visited .icon,.cmp-form-button:not(.does-not-exist) .icon,.nyc-button:link .icon,.nyc-button:not(.does-not-exist) .icon,.nyc-button:visited .icon{align-items:center;display:flex;font-size:calc(var(--_size-icon)*.75);font-style:normal;font-weight:300;height:var(--_size-icon);justify-content:center;pointer-events:none;position:relative;text-align:center;width:var(--_size-icon);z-index:20}.cmp-button:link .icon svg,.cmp-button:not(.does-not-exist) .icon svg,.cmp-button:visited .icon svg,.cmp-form-button:not(.does-not-exist) .icon svg,.nyc-button:link .icon svg,.nyc-button:not(.does-not-exist) .icon svg,.nyc-button:visited .icon svg{fill:var(--nyc-cmp-button-color)}.cmp-button:link .icon.i--count,.cmp-button:not(.does-not-exist) .icon.i--count,.cmp-button:visited .icon.i--count,.cmp-form-button:not(.does-not-exist) .icon.i--count,.nyc-button:link .icon.i--count,.nyc-button:not(.does-not-exist) .icon.i--count,.nyc-button:visited .icon.i--count{background-color:var(--nyc-cmp-button-color);color:#fff;font-weight:600;height:22px;line-height:0;width:22px}.cmp-button--primary .cmp-button,.cmp-form-button[type=SUBMIT],.nyc-button[data-variant=primary]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-primary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-primary-hover);--nyc-cmp-button-color:var(--nyc-sys-color-on-primary);--nyc-cmp-button-color-hover:var(--nyc-cmp-button-color);--nyc-cmp-button-border-color:var(--nyc-sys-color-primary);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-primary-hover)}.cmp-button--secondary .cmp-button,.cmp-form-button[type=RESET],.nyc-button[data-variant=secondary]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-secondary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-secondary);--nyc-cmp-button-color:var(--nyc-sys-color-on-secondary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}@media (max-width:767.98px){.cmp-button--primary .cmp-button:first-child,.cmp-button--secondary .cmp-button:first-child{width:100%}}.cmp-button--filter,.nyc-button[data-variant=filter]{--nyc-cmp-button-border-radius:0.25rem;--nyc-cmp-button-font-size:var(--nyc-sys-size-text-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-sm);--nyc-cmp-button-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-medium);--nyc-cmp-button-background:var(--nyc-sys-color-surface-base);--nyc-cmp-button-background-hover:var(--nyc-sys-color-surface-low);--nyc-cmp-button-color:var(--nyc-sys-color-on-surface-base);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-surface-base);--nyc-cmp-button-font-weight:700;line-height:1.5}.cmp-button--filter[data-selected]:not(.does-not-exist),.nyc-button[data-selected][data-variant=filter]{--nyc-cmp-button-background:var(--nyc-sys-color-surface-input-highlight);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-selected);--nyc-cmp-button-color:var(--nyc-sys-color-primary)}@media (min-width:768px){.cmp-button--filter,.nyc-button[data-variant=filter]{--nyc-cmp-button-border-radius:0.5rem;--nyc-cmp-button-font-size:var(--nyc-sys-size-text-base);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-base)}}.cmp-button--icon .cmp-button,.nyc-button[data-variant=icon]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-primary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-primary-hover);--nyc-cmp-button-padding-inline:var(--nyc-cmp-button-padding-block);--nyc-cmp-button-color:var(--nyc-sys-color-on-primary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-primary);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}.cmp-button--icon .cmp-button:hover,.nyc-button[data-variant=icon]:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.2)}.cmp-button--sm .cmp-button,.cmp-button--sm.cmp-button{--nyc-cmp-button-border-radius:var(--nyc-sys-radius-lg);--nyc-cmp-button-padding-block:var(--nyc-sys-space-2xs);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-2xs);--nyc-cmp-button-font-size:var(--nyc-sys-size-body-base);--nyc-cmp-button-font-weight:600}.cmp-button.format--link{--nyc-cmp-button-color:var(--nyc-sys-color-primary);--nyc-cmp-button-background:transparent;--_padding-inline:5px;border:none;-webkit-text-decoration:underline;text-decoration:underline}.cmp-button.format--link:hover{--nyc-cmp-button-color:var(--nyc-sys-color-link-hover)}.cmp-button.format--link.has-icon{--_padding-block:0.75rem;--_padding-inline:0.75rem}.flex-col:has(.button) .button{display:flex}.flex-col:has(.button) .cmp-button{flex:1}@media (max-width:767.98px){.cmp-button--full-width .cmp-button:first-child,.cmp-button--full-width.cmp-button:first-child{width:100%}}.nyc-back-to-top{display:contents}nyc-back-to-top{display:block;margin:var(--nyc-sys-space-3xl) var(--nyc-sys-space-fluid-base-5xl) var(--nyc-sys-space-5xl);transition:opacity .3s ease}@media (min-width:768px){nyc-back-to-top{bottom:var(--nyc-sys-space-5xl);display:inline-block;left:var(--nyc-sys-space-fluid-base-5xl);margin:initial;position:sticky;z-index:150}nyc-back-to-top.enabled{opacity:1;pointer-events:all;visibility:visible}nyc-back-to-top:not(.enabled){opacity:0;pointer-events:none;visibility:hidden}}.button--back-to-top .cmp-button{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-secondary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-secondary);--nyc-cmp-button-color:var(--nyc-sys-color-on-secondary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color:var(--nyc-cmp-button-color);--nyc-cmp-button-border-width:2px;--nyc-cmp-button-gap:0;--nyc-cmp-button-font-size:var(--nyc-sys-size-body-base);--nyc-cmp-button-font-weight:600;--nyc-cmp-button-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-sm);width:100%}@media (min-width:768px){.button--back-to-top .cmp-button{--nyc-cmp-button-border-width:3px;--nyc-cmp-button-font-size:var(--nyc-sys-space-base);--nyc-cmp-button-padding-block:var(--nyc-sys-space-base);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-base);width:auto}}.button--back-to-top .cmp-button:before{--icon-size:calc(1em - var(--nyc-cmp-button-border-width)*2);--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath stroke='currentColor' d='M205.66 117.66a8 8 0 0 1-11.32 0L136 59.31V216a8 8 0 0 1-16 0V59.31l-58.34 58.35a8 8 0 0 1-11.32-11.32l72-72a8 8 0 0 1 11.32 0l72 72a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E");background-color:currentcolor;content:"";display:inline-block;font-size:var(--nyc-sys-space-lg);height:var(--icon-size);-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;width:var(--icon-size)}@media (min-width:768px){.button--back-to-top .cmp-button:before{font-size:var(--nyc-sys-space-2xl)}}.button--back-to-top .cmp-button span{--space-btwn:var(--nyc-sys-space-base);line-height:1.1;opacity:1;padding-left:var(--space-btwn);text-align:left;transition:padding .3s ease,max-width .3s ease,opacity .3s ease .3s}@media (min-width:768px){.button--back-to-top .cmp-button span{max-height:2.2em;max-width:calc(3.5em + var(--space-btwn));overflow:hidden;padding-left:var(--space-btwn)}}.button--back-to-top .cmp-button:hover{border-color:var(--nyc-sys-color-primary);color:var(--nyc-sys-color-primary)}.button--back-to-top .cmp-button:not(:hover) span{transition:padding .3s ease .2s,max-width .3s ease .2s,opacity .3s ease}@media (min-width:768px){.button--back-to-top .cmp-button:not(:hover) span{max-width:0;opacity:0;padding-left:0;visibility:hidden}}
+.cmp-button,.cmp-button:link,.cmp-button:visited,.cmp-form-button,.nyc-button,.nyc-button:link,.nyc-button:visited{--_background:var(--nyc-cmp-button-background,#103fef);--_background-hover:var(--nyc-cmp-button-background-hover,#050560);--_border-color:var(--nyc-cmp-button-border-color,#103fef);--_border-color-hover:var(--nyc-cmp-button-border-color-hover,#050560);--_border-width:var(--nyc-cmp-button-border-width,2px);--_border-radius:var(--nyc-cmp-button-border-radius,0);--_color:var(--nyc-cmp-button-color,#fff);--_color-hover:var(--nyc-cmp-button-color-hover,#fff);--_font-weight:var(--nyc-cmp-button-font-weight,600);--_font-size:var(--nyc-cmp-button-font-size,1rem);--_shadow:var(--nyc-cmp-button-shadow,none);--_padding-block:var(--nyc-cmp-button-padding-block,0.75rem);--_padding-inline:var(--nyc-cmp-button-padding-inline,0.75rem);--_outline-color:var(--nyc-cmp-button-outline-color,inherit);--_gap:var(--nyc-cmp-button-gap,0.5rem);--_size-icon:var(--_font-size);align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--_background);border-color:var(--_border-color);border-radius:var(--_border-radius);border-style:solid;border-width:var(--_border-width);box-shadow:var(--_shadow);color:var(--_color);cursor:pointer;display:inline-flex;font-size:var(--_font-size);font-weight:var(--_font-weight);gap:calc(var(--_gap)*.8);justify-content:center;line-height:1.2;padding:var(--_padding-block) var(--_padding-inline);text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:all .3s ease}.cmp-button:link:hover,.cmp-button:not(.does-not-exist):hover,.cmp-button:visited:hover,.cmp-form-button:not(.does-not-exist):hover,.nyc-button:link:hover,.nyc-button:not(.does-not-exist):hover,.nyc-button:visited:hover{background:var(--_background-hover);border-color:var(--_border-color-hover);color:var(--_color-hover);-webkit-text-decoration:none;text-decoration:none}.nyc-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.nyc-button:link:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.nyc-button:visited:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:link:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:visited:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-form-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.cmp-button:link:disabled,.cmp-button:not(.does-not-exist):disabled,.cmp-button:visited:disabled,.cmp-button[disabled]:link,.cmp-button[disabled]:not(.does-not-exist),.cmp-button[disabled]:visited,.cmp-form-button:not(.does-not-exist):disabled,.cmp-form-button[disabled]:not(.does-not-exist),.disabled.cmp-button:link,.disabled.cmp-button:not(.does-not-exist),.disabled.cmp-button:visited,.disabled.cmp-form-button:not(.does-not-exist),.disabled.nyc-button:link,.disabled.nyc-button:not(.does-not-exist),.disabled.nyc-button:visited,.nyc-button:link:disabled,.nyc-button:not(.does-not-exist):disabled,.nyc-button:visited:disabled,.nyc-button[disabled]:link,.nyc-button[disabled]:not(.does-not-exist),.nyc-button[disabled]:visited{--nyc-cmp-button-color:var(--nyc-sys-color-on-disabled)!important;--nyc-cmp-button-background:var(--nyc-sys-color-disabled)!important;--nyc-cmp-button-border-color:var(--nyc-sys-color-on-disabled)!important}.cmp-button:link *,.cmp-button:not(.does-not-exist) *,.cmp-button:visited *,.cmp-form-button:not(.does-not-exist) *,.nyc-button:link *,.nyc-button:not(.does-not-exist) *,.nyc-button:visited *{pointer-events:none}.active.cmp-button:link,.active.cmp-button:not(.does-not-exist),.active.cmp-button:visited,.active.cmp-form-button:not(.does-not-exist),.active.nyc-button:link,.active.nyc-button:not(.does-not-exist),.active.nyc-button:visited{background:var(--_color-hover);color:#fff}.size--xs.cmp-button:link,.size--xs.cmp-button:not(.does-not-exist),.size--xs.cmp-button:visited,.size--xs.cmp-form-button:not(.does-not-exist),.size--xs.nyc-button:link,.size--xs.nyc-button:not(.does-not-exist),.size--xs.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.68);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.58);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.4)}.size--s.cmp-button:link,.size--s.cmp-button:not(.does-not-exist),.size--s.cmp-button:visited,.size--s.cmp-form-button:not(.does-not-exist),.size--s.nyc-button:link,.size--s.nyc-button:not(.does-not-exist),.size--s.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.84);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.66);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.54)}.size--nm.cmp-button:link,.size--nm.cmp-button:not(.does-not-exist),.size--nm.cmp-button:visited,.size--nm.cmp-form-button:not(.does-not-exist),.size--nm.nyc-button:link,.size--nm.nyc-button:not(.does-not-exist),.size--nm.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.92);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.8);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.62)}.cmp-button:link .rim-color--blue,.cmp-button:not(.does-not-exist) .rim-color--blue,.cmp-button:visited .rim-color--blue,.cmp-form-button:not(.does-not-exist) .rim-color--blue,.nyc-button:link .rim-color--blue,.nyc-button:not(.does-not-exist) .rim-color--blue,.nyc-button:visited .rim-color--blue,.rim-color--blue.cmp-button:link,.rim-color--blue.cmp-button:not(.does-not-exist),.rim-color--blue.cmp-button:visited,.rim-color--blue.cmp-form-button:not(.does-not-exist),.rim-color--blue.nyc-button:link,.rim-color--blue.nyc-button:not(.does-not-exist),.rim-color--blue.nyc-button:visited{--_border-color:var(--nyc-sys-color-primary)}.cmp-button:link .rim-color--blue:hover,.cmp-button:not(.does-not-exist) .rim-color--blue:hover,.cmp-button:visited .rim-color--blue:hover,.cmp-form-button:not(.does-not-exist) .rim-color--blue:hover,.nyc-button:link .rim-color--blue:hover,.nyc-button:not(.does-not-exist) .rim-color--blue:hover,.nyc-button:visited .rim-color--blue:hover,.rim-color--blue.cmp-button:link:hover,.rim-color--blue.cmp-button:not(.does-not-exist):hover,.rim-color--blue.cmp-button:visited:hover,.rim-color--blue.cmp-form-button:not(.does-not-exist):hover,.rim-color--blue.nyc-button:link:hover,.rim-color--blue.nyc-button:not(.does-not-exist):hover,.rim-color--blue.nyc-button:visited:hover{--_border-color-hover:var(--nyc-sys-color-primary)}.cmp-button:link .shape--square,.cmp-button:not(.does-not-exist) .shape--square,.cmp-button:visited .shape--square,.cmp-form-button:not(.does-not-exist) .shape--square,.nyc-button:link .shape--square,.nyc-button:not(.does-not-exist) .shape--square,.nyc-button:visited .shape--square,.shape--square.cmp-button:link,.shape--square.cmp-button:not(.does-not-exist),.shape--square.cmp-button:visited,.shape--square.cmp-form-button:not(.does-not-exist),.shape--square.nyc-button:link,.shape--square.nyc-button:not(.does-not-exist),.shape--square.nyc-button:visited{border-radius:0}.cmp-button:link .shape--rounded,.cmp-button:not(.does-not-exist) .shape--rounded,.cmp-button:visited .shape--rounded,.cmp-form-button:not(.does-not-exist) .shape--rounded,.nyc-button:link .shape--rounded,.nyc-button:not(.does-not-exist) .shape--rounded,.nyc-button:visited .shape--rounded,.shape--rounded.cmp-button:link,.shape--rounded.cmp-button:not(.does-not-exist),.shape--rounded.cmp-button:visited,.shape--rounded.cmp-form-button:not(.does-not-exist),.shape--rounded.nyc-button:link,.shape--rounded.nyc-button:not(.does-not-exist),.shape--rounded.nyc-button:visited{border-radius:calc(var(--_border-radius)*.15)}.cmp-button:link .shape--circle,.cmp-button:not(.does-not-exist) .shape--circle,.cmp-button:visited .shape--circle,.cmp-form-button:not(.does-not-exist) .shape--circle,.nyc-button:link .shape--circle,.nyc-button:not(.does-not-exist) .shape--circle,.nyc-button:visited .shape--circle,.shape--circle.cmp-button:link,.shape--circle.cmp-button:not(.does-not-exist),.shape--circle.cmp-button:visited,.shape--circle.cmp-form-button:not(.does-not-exist),.shape--circle.nyc-button:link,.shape--circle.nyc-button:not(.does-not-exist),.shape--circle.nyc-button:visited{border-radius:50%}.cmp-button:link .shape--circle,.cmp-button:link .shape--square,.cmp-button:not(.does-not-exist) .shape--circle,.cmp-button:not(.does-not-exist) .shape--square,.cmp-button:visited .shape--circle,.cmp-button:visited .shape--square,.cmp-form-button:not(.does-not-exist) .shape--circle,.cmp-form-button:not(.does-not-exist) .shape--square,.nyc-button:link .shape--circle,.nyc-button:link .shape--square,.nyc-button:not(.does-not-exist) .shape--circle,.nyc-button:not(.does-not-exist) .shape--square,.nyc-button:visited .shape--circle,.nyc-button:visited .shape--square,.shape--circle.cmp-button:link,.shape--circle.cmp-button:not(.does-not-exist),.shape--circle.cmp-button:visited,.shape--circle.cmp-form-button:not(.does-not-exist),.shape--circle.nyc-button:link,.shape--circle.nyc-button:not(.does-not-exist),.shape--circle.nyc-button:visited,.shape--square.cmp-button:link,.shape--square.cmp-button:not(.does-not-exist),.shape--square.cmp-button:visited,.shape--square.cmp-form-button:not(.does-not-exist),.shape--square.nyc-button:link,.shape--square.nyc-button:not(.does-not-exist),.shape--square.nyc-button:visited{height:calc(var(--_padding-block)*2 + var(--_font-size)*1.15);width:calc(var(--_padding-block)*2 + var(--_font-size)*1.15)}.has-count.cmp-button:link,.has-count.cmp-button:not(.does-not-exist),.has-count.cmp-button:visited,.has-count.cmp-form-button:not(.does-not-exist),.has-count.nyc-button:link,.has-count.nyc-button:not(.does-not-exist),.has-count.nyc-button:visited{--nyc-cmp-button-background:var(--nyc-ref-color-blue-90)!important;--nyc-cmp-button-color:var(--nyc-sys-color-primary)!important;--nyc-cmp-button-border-color:var(--nyc-sys-color-primary)!important}.cmp-button:link .icon,.cmp-button:not(.does-not-exist) .icon,.cmp-button:visited .icon,.cmp-form-button:not(.does-not-exist) .icon,.nyc-button:link .icon,.nyc-button:not(.does-not-exist) .icon,.nyc-button:visited .icon{align-items:center;display:flex;font-size:calc(var(--_size-icon)*.75);font-style:normal;font-weight:300;height:var(--_size-icon);justify-content:center;pointer-events:none;position:relative;text-align:center;width:var(--_size-icon);z-index:20}.cmp-button:link .icon svg,.cmp-button:not(.does-not-exist) .icon svg,.cmp-button:visited .icon svg,.cmp-form-button:not(.does-not-exist) .icon svg,.nyc-button:link .icon svg,.nyc-button:not(.does-not-exist) .icon svg,.nyc-button:visited .icon svg{fill:var(--nyc-cmp-button-color)}.cmp-button:link .icon.i--count,.cmp-button:not(.does-not-exist) .icon.i--count,.cmp-button:visited .icon.i--count,.cmp-form-button:not(.does-not-exist) .icon.i--count,.nyc-button:link .icon.i--count,.nyc-button:not(.does-not-exist) .icon.i--count,.nyc-button:visited .icon.i--count{background-color:var(--nyc-cmp-button-color);color:#fff;font-weight:600;height:22px;line-height:0;width:22px}.cmp-button--primary .cmp-button,.cmp-form-button[type=SUBMIT],.nyc-button[data-variant=primary]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-primary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-primary-hover);--nyc-cmp-button-color:var(--nyc-sys-color-on-primary);--nyc-cmp-button-color-hover:var(--nyc-cmp-button-color);--nyc-cmp-button-border-color:var(--nyc-sys-color-primary);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-primary-hover)}.cmp-button--secondary .cmp-button,.cmp-form-button[type=RESET],.nyc-button[data-variant=secondary]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-secondary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-secondary);--nyc-cmp-button-color:var(--nyc-sys-color-on-secondary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}@media (max-width:767.98px){.cmp-button--primary .cmp-button:first-child,.cmp-button--secondary .cmp-button:first-child{width:100%}}.cmp-button--filter,.nyc-button[data-variant=filter]{--nyc-cmp-button-border-radius:0.25rem;--nyc-cmp-button-font-size:var(--nyc-sys-size-text-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-sm);--nyc-cmp-button-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-medium);--nyc-cmp-button-background:var(--nyc-sys-color-surface-base);--nyc-cmp-button-background-hover:var(--nyc-sys-color-surface-low);--nyc-cmp-button-color:var(--nyc-sys-color-on-surface-base);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-surface-base);--nyc-cmp-button-font-weight:700;line-height:1.5}.cmp-button--filter[data-selected]:not(.does-not-exist),.nyc-button[data-selected][data-variant=filter]{--nyc-cmp-button-background:var(--nyc-sys-color-surface-input-highlight);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-selected);--nyc-cmp-button-color:var(--nyc-sys-color-primary)}@media (min-width:768px){.cmp-button--filter,.nyc-button[data-variant=filter]{--nyc-cmp-button-border-radius:0.5rem;--nyc-cmp-button-font-size:var(--nyc-sys-size-text-base);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-base)}}.cmp-button--icon .cmp-button,.nyc-button[data-variant=icon]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-primary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-primary-hover);--nyc-cmp-button-padding-inline:var(--nyc-cmp-button-padding-block);--nyc-cmp-button-color:var(--nyc-sys-color-on-primary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-primary);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}.cmp-button--icon .cmp-button:hover,.nyc-button[data-variant=icon]:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.2)}.cmp-button--sm .cmp-button,.cmp-button--sm.cmp-button{--nyc-cmp-button-border-radius:var(--nyc-sys-radius-lg);--nyc-cmp-button-padding-block:var(--nyc-sys-space-2xs);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-2xs);--nyc-cmp-button-font-size:var(--nyc-sys-size-body-base);--nyc-cmp-button-font-weight:600}.cmp-button.format--link{--nyc-cmp-button-color:var(--nyc-sys-color-primary);--nyc-cmp-button-background:transparent;--_padding-inline:5px;border:none;-webkit-text-decoration:underline;text-decoration:underline}.cmp-button.format--link:hover{--nyc-cmp-button-color:var(--nyc-sys-color-link-hover)}.cmp-button.format--link.has-icon{--_padding-block:0.75rem;--_padding-inline:0.75rem}.flex-col:has(.button) .button{display:flex}.flex-col:has(.button) .cmp-button{flex:1}@media (max-width:767.98px){.cmp-button--full-width .cmp-button:first-child,.cmp-button--full-width.cmp-button:first-child{width:100%}}.nyc-back-to-top{display:contents}nyc-back-to-top{display:block;margin:var(--nyc-sys-space-3xl) var(--nyc-sys-space-fluid-base-5xl) var(--nyc-sys-space-5xl);transition:opacity .3s ease}@media (min-width:768px){nyc-back-to-top{bottom:var(--nyc-sys-space-5xl);display:inline-block;left:var(--nyc-sys-space-fluid-base-5xl);margin:initial;position:sticky;z-index:150}nyc-back-to-top.enabled{opacity:1;pointer-events:all;visibility:visible}nyc-back-to-top:not(.enabled){opacity:0;pointer-events:none;visibility:hidden}}.button--back-to-top .cmp-button{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-secondary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-secondary);--nyc-cmp-button-color:var(--nyc-sys-color-on-secondary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color:var(--nyc-cmp-button-color);--nyc-cmp-button-border-color-hover:var(--nyc-cmp-button-border-color);--nyc-cmp-button-border-width:2px;--nyc-cmp-button-gap:0;--nyc-cmp-button-font-size:var(--nyc-sys-size-body-base);--nyc-cmp-button-font-weight:600;--nyc-cmp-button-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-sm);width:100%}@media (min-width:768px){.button--back-to-top .cmp-button{--nyc-cmp-button-border-width:3px;--nyc-cmp-button-font-size:var(--nyc-sys-space-base);--nyc-cmp-button-padding-block:var(--nyc-sys-space-base);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-base);width:auto}}.button--back-to-top .cmp-button:before{--icon-size:calc(1em - var(--nyc-cmp-button-border-width)*2);--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath stroke='currentColor' d='M205.66 117.66a8 8 0 0 1-11.32 0L136 59.31V216a8 8 0 0 1-16 0V59.31l-58.34 58.35a8 8 0 0 1-11.32-11.32l72-72a8 8 0 0 1 11.32 0l72 72a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E");background-color:currentcolor;content:"";display:inline-block;font-size:var(--nyc-sys-space-lg);height:var(--icon-size);-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;width:var(--icon-size)}@media (min-width:768px){.button--back-to-top .cmp-button:before{font-size:var(--nyc-sys-space-2xl)}}.button--back-to-top .cmp-button span{--space-btwn:var(--nyc-sys-space-base);line-height:1.1;opacity:1;padding-left:var(--space-btwn);text-align:left;transition:padding .3s ease .2s,max-width .3s ease .2s,opacity .3s ease}@media (min-width:768px){.button--back-to-top .cmp-button span{max-height:2.2em;max-width:0;opacity:0;overflow:hidden;padding-left:0;visibility:hidden}}.button--back-to-top .cmp-button:focus,.button--back-to-top .cmp-button:hover{border-color:var(--nyc-sys-color-primary);color:var(--nyc-sys-color-primary)}.button--back-to-top .cmp-button:focus span,.button--back-to-top .cmp-button:hover span{transition:padding .3s ease,max-width .3s ease,opacity .3s ease .3s}@media (min-width:768px){.button--back-to-top .cmp-button:focus span,.button--back-to-top .cmp-button:hover span{max-width:calc(3.5em + var(--space-btwn));opacity:1;padding-left:var(--space-btwn);visibility:visible}}

package/dist/button.css

@@ -587,6 +587,7 @@ button[data-variant='back-to-top'] {
   --nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
   --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
   --nyc-cmp-button-border-color: var(--nyc-cmp-button-color);
+  --nyc-cmp-button-border-color-hover: var(--nyc-cmp-button-border-color);
   --nyc-cmp-button-border-width: 2px;
   --nyc-cmp-button-gap: 0;
   --nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
@@ -645,38 +646,43 @@ button[data-variant='back-to-top'] span {
     text-align: left;
     opacity: 1;
     transition:
-      padding 0.3s ease, max-width 0.3s ease, opacity 0.3s 0.3s ease;
+      padding 0.3s 0.2s ease, max-width 0.3s 0.2s ease, opacity 0.3s ease;
   }
 
 @media (min-width: 768px) {
 
 button[data-variant='back-to-top'] span {
-      max-width: calc(3.5em + var(--space-btwn));
+      visibility: hidden;
+      max-width: 0;
       max-height: 2.2em;
-      padding-left: var(--space-btwn);
+      padding-left: 0;
+      padding-left: initial;
       overflow: hidden;
+      opacity: 0;
   }
     }
 
-button[data-variant='back-to-top']:hover {
+button[data-variant='back-to-top']:hover,button[data-variant='back-to-top']:focus {
     color: var(--nyc-sys-color-primary);
     border-color: var(--nyc-sys-color-primary);
   }
 
-/* Desktop unhovered/closed state */
-
-button[data-variant='back-to-top']:not(:hover) span {
+button[data-variant='back-to-top']:hover span,button[data-variant='back-to-top']:focus span {
       transition:
-        padding 0.3s 0.2s ease, max-width 0.3s 0.2s ease, opacity 0.3s ease;
+        padding 0.3s ease, max-width 0.3s ease, opacity 0.3s 0.3s ease;
     }
 
 @media (min-width: 768px) {
 
-button[data-variant='back-to-top']:not(:hover) span {
-        visibility: hidden;
-        max-width: 0;
-        padding-left: 0;
-        padding-left: initial;
-        opacity: 0;
+button[data-variant='back-to-top']:hover span,button[data-variant='back-to-top']:focus span {
+        visibility: visible;
+        max-width: calc(3.5em + var(--space-btwn));
+        padding-left: var(--space-btwn);
+        opacity: 1;
     }
       }
+
+/* Desktop unhovered/closed state */
+
+button[data-variant='back-to-top']:not(:hover) span {
+    }

package/dist/button.min.css

@@ -1 +1 @@
-.nyc-button,.nyc-button:link,.nyc-button:visited{--_background:var(--nyc-cmp-button-background,#103fef);--_background-hover:var(--nyc-cmp-button-background-hover,#050560);--_border-color:var(--nyc-cmp-button-border-color,#103fef);--_border-color-hover:var(--nyc-cmp-button-border-color-hover,#050560);--_border-width:var(--nyc-cmp-button-border-width,2px);--_border-radius:var(--nyc-cmp-button-border-radius,0);--_color:var(--nyc-cmp-button-color,#fff);--_color-hover:var(--nyc-cmp-button-color-hover,#fff);--_font-weight:var(--nyc-cmp-button-font-weight,600);--_font-size:var(--nyc-cmp-button-font-size,1rem);--_shadow:var(--nyc-cmp-button-shadow,none);--_padding-block:var(--nyc-cmp-button-padding-block,0.75rem);--_padding-inline:var(--nyc-cmp-button-padding-inline,0.75rem);--_outline-color:var(--nyc-cmp-button-outline-color,inherit);--_gap:var(--nyc-cmp-button-gap,0.5rem);--_size-icon:var(--_font-size);align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--_background);border-color:var(--_border-color);border-radius:var(--_border-radius);border-style:solid;border-width:var(--_border-width);box-shadow:var(--_shadow);color:var(--_color);cursor:pointer;display:inline-flex;font-size:var(--_font-size);font-weight:var(--_font-weight);gap:calc(var(--_gap)*.8);justify-content:center;line-height:1.2;padding:var(--_padding-block) var(--_padding-inline);text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:all .3s ease}.nyc-button:link:hover,.nyc-button:not(.does-not-exist):hover,.nyc-button:visited:hover{background:var(--_background-hover);border-color:var(--_border-color-hover);color:var(--_color-hover);-webkit-text-decoration:none;text-decoration:none}.nyc-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.nyc-button:link:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.nyc-button:visited:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.disabled.nyc-button:link,.disabled.nyc-button:not(.does-not-exist),.disabled.nyc-button:visited,.nyc-button:link:disabled,.nyc-button:not(.does-not-exist):disabled,.nyc-button:visited:disabled,.nyc-button[disabled]:link,.nyc-button[disabled]:not(.does-not-exist),.nyc-button[disabled]:visited{--nyc-cmp-button-color:var(--nyc-sys-color-on-disabled)!important;--nyc-cmp-button-background:var(--nyc-sys-color-disabled)!important;--nyc-cmp-button-border-color:var(--nyc-sys-color-on-disabled)!important}.nyc-button:link *,.nyc-button:not(.does-not-exist) *,.nyc-button:visited *{pointer-events:none}.active.nyc-button:link,.active.nyc-button:not(.does-not-exist),.active.nyc-button:visited{background:var(--_color-hover);color:#fff}.size--xs.nyc-button:link,.size--xs.nyc-button:not(.does-not-exist),.size--xs.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.68);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.58);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.4)}.size--s.nyc-button:link,.size--s.nyc-button:not(.does-not-exist),.size--s.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.84);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.66);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.54)}.size--nm.nyc-button:link,.size--nm.nyc-button:not(.does-not-exist),.size--nm.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.92);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.8);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.62)}.nyc-button:link .rim-color--blue,.nyc-button:not(.does-not-exist) .rim-color--blue,.nyc-button:visited .rim-color--blue,.rim-color--blue.nyc-button:link,.rim-color--blue.nyc-button:not(.does-not-exist),.rim-color--blue.nyc-button:visited{--_border-color:var(--nyc-sys-color-primary)}.nyc-button:link .rim-color--blue:hover,.nyc-button:not(.does-not-exist) .rim-color--blue:hover,.nyc-button:visited .rim-color--blue:hover,.rim-color--blue.nyc-button:link:hover,.rim-color--blue.nyc-button:not(.does-not-exist):hover,.rim-color--blue.nyc-button:visited:hover{--_border-color-hover:var(--nyc-sys-color-primary)}.nyc-button:link .shape--square,.nyc-button:not(.does-not-exist) .shape--square,.nyc-button:visited .shape--square,.shape--square.nyc-button:link,.shape--square.nyc-button:not(.does-not-exist),.shape--square.nyc-button:visited{border-radius:0}.nyc-button:link .shape--rounded,.nyc-button:not(.does-not-exist) .shape--rounded,.nyc-button:visited .shape--rounded,.shape--rounded.nyc-button:link,.shape--rounded.nyc-button:not(.does-not-exist),.shape--rounded.nyc-button:visited{border-radius:calc(var(--_border-radius)*.15)}.nyc-button:link .shape--circle,.nyc-button:not(.does-not-exist) .shape--circle,.nyc-button:visited .shape--circle,.shape--circle.nyc-button:link,.shape--circle.nyc-button:not(.does-not-exist),.shape--circle.nyc-button:visited{border-radius:50%}.nyc-button:link .shape--circle,.nyc-button:link .shape--square,.nyc-button:not(.does-not-exist) .shape--circle,.nyc-button:not(.does-not-exist) .shape--square,.nyc-button:visited .shape--circle,.nyc-button:visited .shape--square,.shape--circle.nyc-button:link,.shape--circle.nyc-button:not(.does-not-exist),.shape--circle.nyc-button:visited,.shape--square.nyc-button:link,.shape--square.nyc-button:not(.does-not-exist),.shape--square.nyc-button:visited{height:calc(var(--_padding-block)*2 + var(--_font-size)*1.15);width:calc(var(--_padding-block)*2 + var(--_font-size)*1.15)}.has-count.nyc-button:link,.has-count.nyc-button:not(.does-not-exist),.has-count.nyc-button:visited{--nyc-cmp-button-background:var(--nyc-ref-color-blue-90)!important;--nyc-cmp-button-color:var(--nyc-sys-color-primary)!important;--nyc-cmp-button-border-color:var(--nyc-sys-color-primary)!important}.nyc-button:link .icon,.nyc-button:not(.does-not-exist) .icon,.nyc-button:visited .icon{align-items:center;display:flex;font-size:calc(var(--_size-icon)*.75);font-style:normal;font-weight:300;height:var(--_size-icon);justify-content:center;pointer-events:none;position:relative;text-align:center;width:var(--_size-icon);z-index:20}.nyc-button:link .icon svg,.nyc-button:not(.does-not-exist) .icon svg,.nyc-button:visited .icon svg{fill:var(--nyc-cmp-button-color)}.nyc-button:link .icon.i--count,.nyc-button:not(.does-not-exist) .icon.i--count,.nyc-button:visited .icon.i--count{background-color:var(--nyc-cmp-button-color);color:#fff;font-weight:600;height:22px;line-height:0;width:22px}.nyc-button[data-variant=primary]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-primary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-primary-hover);--nyc-cmp-button-color:var(--nyc-sys-color-on-primary);--nyc-cmp-button-color-hover:var(--nyc-cmp-button-color);--nyc-cmp-button-border-color:var(--nyc-sys-color-primary);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-primary-hover)}.nyc-button[data-variant=secondary]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-secondary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-secondary);--nyc-cmp-button-color:var(--nyc-sys-color-on-secondary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}.nyc-button[data-variant=secondary--black]{--nyc-cmp-button-color:var(--nyc-sys-color-text-base);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-text-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}.nyc-button[data-variant=icon]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-primary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-primary-hover);--nyc-cmp-button-padding-inline:var(--nyc-cmp-button-padding-block);--nyc-cmp-button-color:var(--nyc-sys-color-on-primary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-primary);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}.nyc-button[data-variant=icon]:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.2)}.nyc-button[data-size=sm]{--nyc-cmp-button-border-radius:var(--nyc-sys-radius-lg);--nyc-cmp-button-padding-block:var(--nyc-sys-space-2xs);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-2xs);--nyc-cmp-button-font-size:var(--nyc-sys-size-body-base);--nyc-cmp-button-font-weight:600}.nyc-button[data-variant=filter]{--nyc-cmp-button-border-radius:0.25rem;--nyc-cmp-button-font-size:var(--nyc-sys-size-text-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-sm);--nyc-cmp-button-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-medium);--nyc-cmp-button-background:var(--nyc-sys-color-surface-base);--nyc-cmp-button-background-hover:var(--nyc-sys-color-surface-low);--nyc-cmp-button-color:var(--nyc-sys-color-on-surface-base);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-surface-base);--nyc-cmp-button-font-weight:700;line-height:1.5}.nyc-button[data-variant=filter][data-selected]{--nyc-cmp-button-background:var(--nyc-sys-color-surface-input-highlight);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-selected);--nyc-cmp-button-color:var(--nyc-sys-color-primary)}@media (min-width:768px){.nyc-button[data-variant=filter]{--nyc-cmp-button-border-radius:0.5rem;--nyc-cmp-button-font-size:var(--nyc-sys-size-text-base);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-base)}}nyc-back-to-top{display:block;margin:var(--nyc-sys-space-3xl) var(--nyc-sys-space-fluid-base-5xl) var(--nyc-sys-space-5xl);transition:opacity .3s ease}@media (min-width:768px){nyc-back-to-top{bottom:var(--nyc-sys-space-5xl);display:inline-block;left:var(--nyc-sys-space-fluid-base-5xl);margin:initial;position:sticky;z-index:150}nyc-back-to-top.enabled{opacity:1;pointer-events:all;visibility:visible}nyc-back-to-top:not(.enabled){opacity:0;pointer-events:none;visibility:hidden}}button[data-variant=back-to-top]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-secondary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-secondary);--nyc-cmp-button-color:var(--nyc-sys-color-on-secondary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color:var(--nyc-cmp-button-color);--nyc-cmp-button-border-width:2px;--nyc-cmp-button-gap:0;--nyc-cmp-button-font-size:var(--nyc-sys-size-body-base);--nyc-cmp-button-font-weight:600;--nyc-cmp-button-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-sm);width:100%}@media (min-width:768px){button[data-variant=back-to-top]{--nyc-cmp-button-border-width:3px;--nyc-cmp-button-font-size:var(--nyc-sys-space-base);--nyc-cmp-button-padding-block:var(--nyc-sys-space-base);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-base);width:auto}}button[data-variant=back-to-top]:before{--icon-size:calc(1em - var(--nyc-cmp-button-border-width)*2);--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath stroke='currentColor' d='M205.66 117.66a8 8 0 0 1-11.32 0L136 59.31V216a8 8 0 0 1-16 0V59.31l-58.34 58.35a8 8 0 0 1-11.32-11.32l72-72a8 8 0 0 1 11.32 0l72 72a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E");background-color:currentcolor;content:"";display:inline-block;font-size:var(--nyc-sys-space-lg);height:var(--icon-size);-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;width:var(--icon-size)}@media (min-width:768px){button[data-variant=back-to-top]:before{font-size:var(--nyc-sys-space-2xl)}}button[data-variant=back-to-top] span{--space-btwn:var(--nyc-sys-space-base);line-height:1.1;opacity:1;padding-left:var(--space-btwn);text-align:left;transition:padding .3s ease,max-width .3s ease,opacity .3s ease .3s}@media (min-width:768px){button[data-variant=back-to-top] span{max-height:2.2em;max-width:calc(3.5em + var(--space-btwn));overflow:hidden;padding-left:var(--space-btwn)}}button[data-variant=back-to-top]:hover{border-color:var(--nyc-sys-color-primary);color:var(--nyc-sys-color-primary)}button[data-variant=back-to-top]:not(:hover) span{transition:padding .3s ease .2s,max-width .3s ease .2s,opacity .3s ease}@media (min-width:768px){button[data-variant=back-to-top]:not(:hover) span{max-width:0;opacity:0;padding-left:0;visibility:hidden}}
+.nyc-button,.nyc-button:link,.nyc-button:visited{--_background:var(--nyc-cmp-button-background,#103fef);--_background-hover:var(--nyc-cmp-button-background-hover,#050560);--_border-color:var(--nyc-cmp-button-border-color,#103fef);--_border-color-hover:var(--nyc-cmp-button-border-color-hover,#050560);--_border-width:var(--nyc-cmp-button-border-width,2px);--_border-radius:var(--nyc-cmp-button-border-radius,0);--_color:var(--nyc-cmp-button-color,#fff);--_color-hover:var(--nyc-cmp-button-color-hover,#fff);--_font-weight:var(--nyc-cmp-button-font-weight,600);--_font-size:var(--nyc-cmp-button-font-size,1rem);--_shadow:var(--nyc-cmp-button-shadow,none);--_padding-block:var(--nyc-cmp-button-padding-block,0.75rem);--_padding-inline:var(--nyc-cmp-button-padding-inline,0.75rem);--_outline-color:var(--nyc-cmp-button-outline-color,inherit);--_gap:var(--nyc-cmp-button-gap,0.5rem);--_size-icon:var(--_font-size);align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--_background);border-color:var(--_border-color);border-radius:var(--_border-radius);border-style:solid;border-width:var(--_border-width);box-shadow:var(--_shadow);color:var(--_color);cursor:pointer;display:inline-flex;font-size:var(--_font-size);font-weight:var(--_font-weight);gap:calc(var(--_gap)*.8);justify-content:center;line-height:1.2;padding:var(--_padding-block) var(--_padding-inline);text-align:center;-webkit-text-decoration:none;text-decoration:none;transition:all .3s ease}.nyc-button:link:hover,.nyc-button:not(.does-not-exist):hover,.nyc-button:visited:hover{background:var(--_background-hover);border-color:var(--_border-color-hover);color:var(--_color-hover);-webkit-text-decoration:none;text-decoration:none}.nyc-button:not(.does-not-exist):focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.nyc-button:link:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.nyc-button:visited:focus-visible{border-radius:var(--_border-radius);outline:2px dashed var(--_outline-color);outline-offset:.25rem}.disabled.nyc-button:link,.disabled.nyc-button:not(.does-not-exist),.disabled.nyc-button:visited,.nyc-button:link:disabled,.nyc-button:not(.does-not-exist):disabled,.nyc-button:visited:disabled,.nyc-button[disabled]:link,.nyc-button[disabled]:not(.does-not-exist),.nyc-button[disabled]:visited{--nyc-cmp-button-color:var(--nyc-sys-color-on-disabled)!important;--nyc-cmp-button-background:var(--nyc-sys-color-disabled)!important;--nyc-cmp-button-border-color:var(--nyc-sys-color-on-disabled)!important}.nyc-button:link *,.nyc-button:not(.does-not-exist) *,.nyc-button:visited *{pointer-events:none}.active.nyc-button:link,.active.nyc-button:not(.does-not-exist),.active.nyc-button:visited{background:var(--_color-hover);color:#fff}.size--xs.nyc-button:link,.size--xs.nyc-button:not(.does-not-exist),.size--xs.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.68);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.58);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.4)}.size--s.nyc-button:link,.size--s.nyc-button:not(.does-not-exist),.size--s.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.84);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.66);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.54)}.size--nm.nyc-button:link,.size--nm.nyc-button:not(.does-not-exist),.size--nm.nyc-button:visited{--_font-size:calc(var(--nyc-cmp-button-font-size, 1rem)*0.92);--_padding-block:calc(var(--nyc-cmp-button-padding-block, 0.75rem)*0.8);--_padding-inline:calc(var(--nyc-cmp-button-padding-inline, 0.75rem)*0.62)}.nyc-button:link .rim-color--blue,.nyc-button:not(.does-not-exist) .rim-color--blue,.nyc-button:visited .rim-color--blue,.rim-color--blue.nyc-button:link,.rim-color--blue.nyc-button:not(.does-not-exist),.rim-color--blue.nyc-button:visited{--_border-color:var(--nyc-sys-color-primary)}.nyc-button:link .rim-color--blue:hover,.nyc-button:not(.does-not-exist) .rim-color--blue:hover,.nyc-button:visited .rim-color--blue:hover,.rim-color--blue.nyc-button:link:hover,.rim-color--blue.nyc-button:not(.does-not-exist):hover,.rim-color--blue.nyc-button:visited:hover{--_border-color-hover:var(--nyc-sys-color-primary)}.nyc-button:link .shape--square,.nyc-button:not(.does-not-exist) .shape--square,.nyc-button:visited .shape--square,.shape--square.nyc-button:link,.shape--square.nyc-button:not(.does-not-exist),.shape--square.nyc-button:visited{border-radius:0}.nyc-button:link .shape--rounded,.nyc-button:not(.does-not-exist) .shape--rounded,.nyc-button:visited .shape--rounded,.shape--rounded.nyc-button:link,.shape--rounded.nyc-button:not(.does-not-exist),.shape--rounded.nyc-button:visited{border-radius:calc(var(--_border-radius)*.15)}.nyc-button:link .shape--circle,.nyc-button:not(.does-not-exist) .shape--circle,.nyc-button:visited .shape--circle,.shape--circle.nyc-button:link,.shape--circle.nyc-button:not(.does-not-exist),.shape--circle.nyc-button:visited{border-radius:50%}.nyc-button:link .shape--circle,.nyc-button:link .shape--square,.nyc-button:not(.does-not-exist) .shape--circle,.nyc-button:not(.does-not-exist) .shape--square,.nyc-button:visited .shape--circle,.nyc-button:visited .shape--square,.shape--circle.nyc-button:link,.shape--circle.nyc-button:not(.does-not-exist),.shape--circle.nyc-button:visited,.shape--square.nyc-button:link,.shape--square.nyc-button:not(.does-not-exist),.shape--square.nyc-button:visited{height:calc(var(--_padding-block)*2 + var(--_font-size)*1.15);width:calc(var(--_padding-block)*2 + var(--_font-size)*1.15)}.has-count.nyc-button:link,.has-count.nyc-button:not(.does-not-exist),.has-count.nyc-button:visited{--nyc-cmp-button-background:var(--nyc-ref-color-blue-90)!important;--nyc-cmp-button-color:var(--nyc-sys-color-primary)!important;--nyc-cmp-button-border-color:var(--nyc-sys-color-primary)!important}.nyc-button:link .icon,.nyc-button:not(.does-not-exist) .icon,.nyc-button:visited .icon{align-items:center;display:flex;font-size:calc(var(--_size-icon)*.75);font-style:normal;font-weight:300;height:var(--_size-icon);justify-content:center;pointer-events:none;position:relative;text-align:center;width:var(--_size-icon);z-index:20}.nyc-button:link .icon svg,.nyc-button:not(.does-not-exist) .icon svg,.nyc-button:visited .icon svg{fill:var(--nyc-cmp-button-color)}.nyc-button:link .icon.i--count,.nyc-button:not(.does-not-exist) .icon.i--count,.nyc-button:visited .icon.i--count{background-color:var(--nyc-cmp-button-color);color:#fff;font-weight:600;height:22px;line-height:0;width:22px}.nyc-button[data-variant=primary]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-primary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-primary-hover);--nyc-cmp-button-color:var(--nyc-sys-color-on-primary);--nyc-cmp-button-color-hover:var(--nyc-cmp-button-color);--nyc-cmp-button-border-color:var(--nyc-sys-color-primary);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-primary-hover)}.nyc-button[data-variant=secondary]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-secondary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-secondary);--nyc-cmp-button-color:var(--nyc-sys-color-on-secondary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}.nyc-button[data-variant=secondary--black]{--nyc-cmp-button-color:var(--nyc-sys-color-text-base);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-text-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}.nyc-button[data-variant=icon]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-primary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-primary-hover);--nyc-cmp-button-padding-inline:var(--nyc-cmp-button-padding-block);--nyc-cmp-button-color:var(--nyc-sys-color-on-primary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-primary);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base)}.nyc-button[data-variant=icon]:hover{box-shadow:0 0 8px 0 rgba(0,0,0,.2)}.nyc-button[data-size=sm]{--nyc-cmp-button-border-radius:var(--nyc-sys-radius-lg);--nyc-cmp-button-padding-block:var(--nyc-sys-space-2xs);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-2xs);--nyc-cmp-button-font-size:var(--nyc-sys-size-body-base);--nyc-cmp-button-font-weight:600}.nyc-button[data-variant=filter]{--nyc-cmp-button-border-radius:0.25rem;--nyc-cmp-button-font-size:var(--nyc-sys-size-text-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-sm);--nyc-cmp-button-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-medium);--nyc-cmp-button-background:var(--nyc-sys-color-surface-base);--nyc-cmp-button-background-hover:var(--nyc-sys-color-surface-low);--nyc-cmp-button-color:var(--nyc-sys-color-on-surface-base);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-surface-base);--nyc-cmp-button-font-weight:700;line-height:1.5}.nyc-button[data-variant=filter][data-selected]{--nyc-cmp-button-background:var(--nyc-sys-color-surface-input-highlight);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-selected);--nyc-cmp-button-color:var(--nyc-sys-color-primary)}@media (min-width:768px){.nyc-button[data-variant=filter]{--nyc-cmp-button-border-radius:0.5rem;--nyc-cmp-button-font-size:var(--nyc-sys-size-text-base);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-base)}}nyc-back-to-top{display:block;margin:var(--nyc-sys-space-3xl) var(--nyc-sys-space-fluid-base-5xl) var(--nyc-sys-space-5xl);transition:opacity .3s ease}@media (min-width:768px){nyc-back-to-top{bottom:var(--nyc-sys-space-5xl);display:inline-block;left:var(--nyc-sys-space-fluid-base-5xl);margin:initial;position:sticky;z-index:150}nyc-back-to-top.enabled{opacity:1;pointer-events:all;visibility:visible}nyc-back-to-top:not(.enabled){opacity:0;pointer-events:none;visibility:hidden}}button[data-variant=back-to-top]{--nyc-cmp-button-shadow:none;--nyc-cmp-button-background:var(--nyc-sys-color-secondary);--nyc-cmp-button-background-hover:var(--nyc-sys-color-secondary);--nyc-cmp-button-color:var(--nyc-sys-color-on-secondary);--nyc-cmp-button-color-hover:var(--nyc-sys-color-on-secondary-hover);--nyc-cmp-button-border-color:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color-hover:var(--nyc-sys-color-border-base);--nyc-cmp-button-border-color:var(--nyc-cmp-button-color);--nyc-cmp-button-border-color-hover:var(--nyc-cmp-button-border-color);--nyc-cmp-button-border-width:2px;--nyc-cmp-button-gap:0;--nyc-cmp-button-font-size:var(--nyc-sys-size-body-base);--nyc-cmp-button-font-weight:600;--nyc-cmp-button-padding-block:var(--nyc-sys-space-sm);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-sm);width:100%}@media (min-width:768px){button[data-variant=back-to-top]{--nyc-cmp-button-border-width:3px;--nyc-cmp-button-font-size:var(--nyc-sys-space-base);--nyc-cmp-button-padding-block:var(--nyc-sys-space-base);--nyc-cmp-button-padding-inline:var(--nyc-sys-space-base);width:auto}}button[data-variant=back-to-top]:before{--icon-size:calc(1em - var(--nyc-cmp-button-border-width)*2);--svg:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath stroke='currentColor' d='M205.66 117.66a8 8 0 0 1-11.32 0L136 59.31V216a8 8 0 0 1-16 0V59.31l-58.34 58.35a8 8 0 0 1-11.32-11.32l72-72a8 8 0 0 1 11.32 0l72 72a8 8 0 0 1 0 11.32'/%3E%3C/svg%3E");background-color:currentcolor;content:"";display:inline-block;font-size:var(--nyc-sys-space-lg);height:var(--icon-size);-webkit-mask-image:var(--svg);mask-image:var(--svg);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%;width:var(--icon-size)}@media (min-width:768px){button[data-variant=back-to-top]:before{font-size:var(--nyc-sys-space-2xl)}}button[data-variant=back-to-top] span{--space-btwn:var(--nyc-sys-space-base);line-height:1.1;opacity:1;padding-left:var(--space-btwn);text-align:left;transition:padding .3s ease .2s,max-width .3s ease .2s,opacity .3s ease}@media (min-width:768px){button[data-variant=back-to-top] span{max-height:2.2em;max-width:0;opacity:0;overflow:hidden;padding-left:0;visibility:hidden}}button[data-variant=back-to-top]:focus,button[data-variant=back-to-top]:hover{border-color:var(--nyc-sys-color-primary);color:var(--nyc-sys-color-primary)}button[data-variant=back-to-top]:focus span,button[data-variant=back-to-top]:hover span{transition:padding .3s ease,max-width .3s ease,opacity .3s ease .3s}@media (min-width:768px){button[data-variant=back-to-top]:focus span,button[data-variant=back-to-top]:hover span{max-width:calc(3.5em + var(--space-btwn));opacity:1;padding-left:var(--space-btwn);visibility:visible}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nycds/button",
-  "version": "0.5.0-prerelease.0",
+  "version": "0.5.0-prerelease.1",
   "type": "module",
   "main": "src/js/index.js",
   "types": "dist/button.d.ts",

package/src/css/mixins.css

@@ -295,6 +295,7 @@
   @mixin button-secondary;
 
   --nyc-cmp-button-border-color: var(--nyc-cmp-button-color);
+  --nyc-cmp-button-border-color-hover: var(--nyc-cmp-button-border-color);
   --nyc-cmp-button-border-width: 2px;
   --nyc-cmp-button-gap: 0;
   --nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
@@ -344,37 +345,43 @@
     text-align: left;
     opacity: 1;
     transition:
-      padding 0.3s ease,
-      max-width 0.3s ease,
-      opacity 0.3s 0.3s ease;
+      padding 0.3s 0.2s ease,
+      max-width 0.3s 0.2s ease,
+      opacity 0.3s ease;
 
     @media (width >= 768px) {
-      max-width: calc(3.5em + var(--space-btwn));
+      visibility: hidden;
+      max-width: 0;
       max-height: 2.2em;
-      padding-left: var(--space-btwn);
+      padding-left: unset;
       overflow: hidden;
+      opacity: 0;
     }
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     color: var(--nyc-sys-color-primary);
     border-color: var(--nyc-sys-color-primary);
-  }
 
-  /* Desktop unhovered/closed state */
-  &:not(:hover) {
     span {
       transition:
-        padding 0.3s 0.2s ease,
-        max-width 0.3s 0.2s ease,
-        opacity 0.3s ease;
+        padding 0.3s ease,
+        max-width 0.3s ease,
+        opacity 0.3s 0.3s ease;
 
       @media (width >= 768px) {
-        visibility: hidden;
-        max-width: 0;
-        padding-left: unset;
-        opacity: 0;
+        visibility: visible;
+        max-width: calc(3.5em + var(--space-btwn));
+        padding-left: var(--space-btwn);
+        opacity: 1;
       }
     }
   }
+
+  /* Desktop unhovered/closed state */
+  &:not(:hover) {
+    span {
+    }
+  }
 }

package/src/js/NYCBackToTop.js

@@ -59,11 +59,19 @@ export class NYCBackToTop extends HTMLElement {
   }
 
   #onClick(e) {
-    // Reset stored Focus, then scroll to top (for tab accessibility)
+    // Focus on the top item for accessibility
+    // * If H1 exists, focus on H1,
+    // * Otherwise, focus on the first anchor element (should be skip to main content link)
     e.preventDefault()
-    document.querySelector('a').focus()
-    document.querySelector('a').blur()
-    window.scrollTo({ top: 0, behavior: 'smooth' })
+    let topItem = document.querySelector('h1') || document.querySelector('a')
+
+    if (topItem.tagName === 'H1') {
+      if (!topItem.hasAttribute('tabindex')) {
+        topItem.setAttribute('tabindex', '-1')
+      }
+    }
+
+    topItem.focus()
   }
 
   #onScroll() {

package/src/js/BackToTop.js

@@ -1,90 +0,0 @@
-// See apps/pocs/src/js/components/NYCBackToTop.js for example implementation
-export default class BackToTop extends HTMLElement {
-  static define(name = 'nyc-back-to-top') {
-    customElements.define(name, this)
-  }
-
-  constructor() {
-    super()
-    this.isLongPage = false
-    this.isScrolledEnough = false
-    this.isScrollTick = false
-    this.button = this.querySelector('#back-to-top')
-
-    // For observing resizing of dynamic content
-    this.dynamicContainer = document.querySelector('.backtotop-observe')
-    this.resizeObserver = null
-    this.queuedHeightCheck = null
-  }
-
-  connectedCallback() {
-    this.#queueCheckHeights()
-    window.addEventListener('scroll', this.#onScroll.bind(this))
-    this.button.addEventListener('click', this.#onClick.bind(this))
-
-    // If dynamic content exists, recheck height when dynamic container size changes
-    if (this.dynamicContainer) {
-      this.resizeObserver = new ResizeObserver(this.#queueCheckHeights.bind(this))
-      this.resizeObserver.observe(this.dynamicContainer)
-    } else {
-      window.addEventListener('resize', this.#queueCheckHeights.bind(this))
-    }
-  }
-
-  disconnectedCallback() {
-    window.removeEventListener('scroll', this.#onScroll.bind(this))
-    this.button.removeEventListener('click', this.#onClick.bind(this))
-
-    if (this.dynamicContainer) {
-      this.resizeObserver.disconnect()
-    } else {
-      window.removeEventListener('resize', this.#queueCheckHeights.bind(this))
-    }
-  }
-
-  #checkHeights() {
-    const pageHeight = document.documentElement.scrollHeight
-    const windowHeight = window.innerHeight
-
-    this.isLongPage = pageHeight > 4 * windowHeight
-    this.#updateShowHide()
-  }
-
-  #checkScroll() {
-    const scrollY = window.scrollY
-    const windowHeight = window.innerHeight
-
-    this.isScrolledEnough = scrollY > windowHeight
-    this.#updateShowHide()
-  }
-
-  #onClick(e) {
-    // Reset stored Focus, then scroll to top (for tab accessibility)
-    e.preventDefault()
-    document.querySelector('a').focus()
-    document.querySelector('a').blur()
-    window.scrollTo({ top: 0, behavior: 'smooth' })
-  }
-
-  #onScroll() {
-    if (this.isScrollTick) return
-    this.isScrollTick = true
-    setTimeout(() => {
-      this.#checkScroll()
-      this.isScrollTick = false
-    }, 500)
-  }
-
-  #queueCheckHeights() {
-    this.queuedHeightCheck && clearTimeout(this.queuedHeightCheck)
-    this.queuedHeightCheck = setTimeout(this.#checkHeights.bind(this), 1000)
-  }
-
-  #updateShowHide() {
-    if (this.isLongPage && this.isScrolledEnough) {
-      this.classList.add('enabled')
-    } else {
-      this.classList.remove('enabled')
-    }
-  }
-}