@nycds/button 0.4.0 → 0.5.0-prerelease.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.org +2 -2
  3. package/dist/button-aem.css +20 -14
  4. package/dist/button-aem.min.css +1 -1
  5. package/dist/button.css +20 -14
  6. package/dist/button.d.ts +15 -0
  7. package/dist/button.min.css +1 -1
  8. package/package.json +24 -3
  9. package/src/css/mixins.css +23 -16
  10. package/src/js/NYCBackToTop.js +12 -4
  11. package/css.org +0 -344
  12. package/postcss.config.js +0 -1
  13. package/src/js/BackToTop.js +0 -90
  14. package/tests/back-to-top.spec.js +0 -16
  15. package/tests/index.html +0 -20
package/CHANGELOG.md CHANGED
@@ -1,5 +1,24 @@
1
1
  # @nycds/button
2
2
 
3
+ ## 0.5.0-prerelease.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 76844b4: Feat: Back To Top a11y fixes (expand on keyboard focus & scroll to H1)
8
+
9
+ ## 0.5.0-prerelease.0
10
+
11
+ ### Minor Changes
12
+
13
+ - 6052344: Add export maps to all packages
14
+ - ddd68c2: Feat: Add TS types export
15
+
16
+ ### Patch Changes
17
+
18
+ - aa61601: Limit published files to dist, src and CHANGELOG.md
19
+ - Updated dependencies [aa61601]
20
+ - @nycds/config@0.2.1-prerelease.0
21
+
3
22
  ## 0.4.0
4
23
 
5
24
  ### Minor Changes
package/README.org CHANGED
@@ -6,7 +6,7 @@ Buttons encourage users to take an action. They use text or icons to communicate
6
6
 
7
7
  The primary button can be utilized with a ~button~ or ~a~ element, with the following:
8
8
  - *Class*: ~nyc-button~
9
- - *Attribute*: ~data-variant="primary"~
9
+ - *Attribute* (optional): ~data-variant="primary"~. Primary is the default style, so ~nyc-button~ on its own is a primary button.
10
10
 
11
11
  #+results: primary-button-example
12
12
 
@@ -41,7 +41,7 @@ The secondary button can be utilized with a ~button~ or ~a~ element, with the fo
41
41
  The icon button can be utilized with a ~button~ or ~a~ element, with the following attributes:
42
42
  - *Class*: ~nyc-button~
43
43
  - *Attribute*: ~data-variant="icon"~
44
- - *Icon element*: An icon element should be placed inside the button or link, using an icon font class enabled in the icons package (The package draws from the [[https://icon-sets.iconify.design/ph/][Iconify: Phosphor Iconset]]).
44
+ - *Icon element*: An icon element should be placed inside the button or link, using an icon class from the icons package (The package draws from the [[https://icon-sets.iconify.design/ph/][Iconify: Phosphor Iconset]]). Give the button an ~aria-label~, since it has no visible text.
45
45
 
46
46
  #+results: icon-button-example
47
47
 
package/dist/button-aem.css CHANGED
@@ -979,6 +979,7 @@ nyc-back-to-top:not(.enabled) {
979
979
  --nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
980
980
  --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
981
981
  --nyc-cmp-button-border-color: var(--nyc-cmp-button-color);
982
+ --nyc-cmp-button-border-color-hover: var(--nyc-cmp-button-border-color);
982
983
  --nyc-cmp-button-border-width: 2px;
983
984
  --nyc-cmp-button-gap: 0;
984
985
  --nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
@@ -1037,38 +1038,43 @@ nyc-back-to-top:not(.enabled) {
1037
1038
  text-align: left;
1038
1039
  opacity: 1;
1039
1040
  transition:
1040
- padding 0.3s ease, max-width 0.3s ease, opacity 0.3s 0.3s ease;
1041
+ padding 0.3s 0.2s ease, max-width 0.3s 0.2s ease, opacity 0.3s ease;
1041
1042
  }
1042
1043
 
1043
1044
  @media (min-width: 768px) {
1044
1045
 
1045
1046
  .button--back-to-top .cmp-button span {
1046
- max-width: calc(3.5em + var(--space-btwn));
1047
+ visibility: hidden;
1048
+ max-width: 0;
1047
1049
  max-height: 2.2em;
1048
- padding-left: var(--space-btwn);
1050
+ padding-left: 0;
1051
+ padding-left: initial;
1049
1052
  overflow: hidden;
1053
+ opacity: 0;
1050
1054
  }
1051
1055
  }
1052
1056
 
1053
- .button--back-to-top .cmp-button:hover {
1057
+ .button--back-to-top .cmp-button:hover,.button--back-to-top .cmp-button:focus {
1054
1058
  color: var(--nyc-sys-color-primary);
1055
1059
  border-color: var(--nyc-sys-color-primary);
1056
1060
  }
1057
1061
 
1058
- /* Desktop unhovered/closed state */
1059
-
1060
- .button--back-to-top .cmp-button:not(:hover) span {
1062
+ .button--back-to-top .cmp-button:hover span,.button--back-to-top .cmp-button:focus span {
1061
1063
  transition:
1062
- padding 0.3s 0.2s ease, max-width 0.3s 0.2s ease, opacity 0.3s ease;
1064
+ padding 0.3s ease, max-width 0.3s ease, opacity 0.3s 0.3s ease;
1063
1065
  }
1064
1066
 
1065
1067
  @media (min-width: 768px) {
1066
1068
 
1067
- .button--back-to-top .cmp-button:not(:hover) span {
1068
- visibility: hidden;
1069
- max-width: 0;
1070
- padding-left: 0;
1071
- padding-left: initial;
1072
- opacity: 0;
1069
+ .button--back-to-top .cmp-button:hover span,.button--back-to-top .cmp-button:focus span {
1070
+ visibility: visible;
1071
+ max-width: calc(3.5em + var(--space-btwn));
1072
+ padding-left: var(--space-btwn);
1073
+ opacity: 1;
1073
1074
  }
1074
1075
  }
1076
+
1077
+ /* Desktop unhovered/closed state */
1078
+
1079
+ .button--back-to-top .cmp-button:not(:hover) span {
1080
+ }
package/dist/button-aem.min.css CHANGED
@@ -1 +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}}
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-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 CHANGED
@@ -587,6 +587,7 @@ button[data-variant='back-to-top'] {
587
587
  --nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
588
588
  --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
589
589
  --nyc-cmp-button-border-color: var(--nyc-cmp-button-color);
590
+ --nyc-cmp-button-border-color-hover: var(--nyc-cmp-button-border-color);
590
591
  --nyc-cmp-button-border-width: 2px;
591
592
  --nyc-cmp-button-gap: 0;
592
593
  --nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
@@ -645,38 +646,43 @@ button[data-variant='back-to-top'] span {
645
646
  text-align: left;
646
647
  opacity: 1;
647
648
  transition:
648
- padding 0.3s ease, max-width 0.3s ease, opacity 0.3s 0.3s ease;
649
+ padding 0.3s 0.2s ease, max-width 0.3s 0.2s ease, opacity 0.3s ease;
649
650
  }
650
651
 
651
652
  @media (min-width: 768px) {
652
653
 
653
654
  button[data-variant='back-to-top'] span {
654
- max-width: calc(3.5em + var(--space-btwn));
655
+ visibility: hidden;
656
+ max-width: 0;
655
657
  max-height: 2.2em;
656
- padding-left: var(--space-btwn);
658
+ padding-left: 0;
659
+ padding-left: initial;
657
660
  overflow: hidden;
661
+ opacity: 0;
658
662
  }
659
663
  }
660
664
 
661
- button[data-variant='back-to-top']:hover {
665
+ button[data-variant='back-to-top']:hover,button[data-variant='back-to-top']:focus {
662
666
  color: var(--nyc-sys-color-primary);
663
667
  border-color: var(--nyc-sys-color-primary);
664
668
  }
665
669
 
666
- /* Desktop unhovered/closed state */
667
-
668
- button[data-variant='back-to-top']:not(:hover) span {
670
+ button[data-variant='back-to-top']:hover span,button[data-variant='back-to-top']:focus span {
669
671
  transition:
670
- padding 0.3s 0.2s ease, max-width 0.3s 0.2s ease, opacity 0.3s ease;
672
+ padding 0.3s ease, max-width 0.3s ease, opacity 0.3s 0.3s ease;
671
673
  }
672
674
 
673
675
  @media (min-width: 768px) {
674
676
 
675
- button[data-variant='back-to-top']:not(:hover) span {
676
- visibility: hidden;
677
- max-width: 0;
678
- padding-left: 0;
679
- padding-left: initial;
680
- opacity: 0;
677
+ button[data-variant='back-to-top']:hover span,button[data-variant='back-to-top']:focus span {
678
+ visibility: visible;
679
+ max-width: calc(3.5em + var(--space-btwn));
680
+ padding-left: var(--space-btwn);
681
+ opacity: 1;
681
682
  }
682
683
  }
684
+
685
+ /* Desktop unhovered/closed state */
686
+
687
+ button[data-variant='back-to-top']:not(:hover) span {
688
+ }
package/dist/button.d.ts ADDED
@@ -0,0 +1,15 @@
1
+ declare class NYCBackToTop extends HTMLElement {
2
+ static define(name?: string): void;
3
+ isLongPage: boolean;
4
+ isScrolledEnough: boolean;
5
+ isScrollTick: boolean;
6
+ button: Element;
7
+ dynamicContainer: Element;
8
+ resizeObserver: ResizeObserver;
9
+ queuedHeightCheck: number;
10
+ connectedCallback(): void;
11
+ disconnectedCallback(): void;
12
+ #private;
13
+ }
14
+
15
+ export { NYCBackToTop };
package/dist/button.min.css CHANGED
@@ -1 +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}}
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-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 CHANGED
@@ -1,16 +1,37 @@
1
1
  {
2
2
  "name": "@nycds/button",
3
- "version": "0.4.0",
3
+ "version": "0.5.0-prerelease.1",
4
4
  "type": "module",
5
5
  "main": "src/js/index.js",
6
+ "types": "dist/button.d.ts",
6
7
  "style": "dist/button.css",
7
8
  "dependencies": {
8
- "@nycds/config": "^0.2.0"
9
+ "@nycds/config": "^0.2.1-prerelease.0"
9
10
  },
11
+ "exports": {
12
+ ".": {
13
+ "types": "./dist/button.d.ts",
14
+ "style": "./dist/button.css",
15
+ "import": "./src/js/index.js",
16
+ "default": "./src/js/index.js"
17
+ },
18
+ "./style": "./dist/button.css",
19
+ "./style.min": "./dist/button.min.css",
20
+ "./style/aem": "./dist/button-aem.css",
21
+ "./style/aem.min": "./dist/button-aem.min.css",
22
+ "./source/css": "./src/css/index.css",
23
+ "./*": "./*"
24
+ },
25
+ "files": [
26
+ "dist",
27
+ "src",
28
+ "CHANGELOG.md"
29
+ ],
10
30
  "scripts": {
11
31
  "clean": "rimraf ./dist",
12
32
  "build:css:default": "postcss src/css/index.css -o dist/button.css",
13
33
  "build:css:aem": "postcss src/css/aem/index.css -o dist/button-aem.css",
14
- "minify:css": "postcss dist/*.css --use cssnano --ext .min.css --dir dist --no-map"
34
+ "minify:css": "postcss dist/*.css --use cssnano --ext .min.css --dir dist --no-map",
35
+ "build:types": "node ../../../scripts/build-types.js"
15
36
  }
16
37
  }
package/src/css/mixins.css CHANGED
@@ -295,6 +295,7 @@
295
295
  @mixin button-secondary;
296
296
 
297
297
  --nyc-cmp-button-border-color: var(--nyc-cmp-button-color);
298
+ --nyc-cmp-button-border-color-hover: var(--nyc-cmp-button-border-color);
298
299
  --nyc-cmp-button-border-width: 2px;
299
300
  --nyc-cmp-button-gap: 0;
300
301
  --nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
@@ -344,37 +345,43 @@
344
345
  text-align: left;
345
346
  opacity: 1;
346
347
  transition:
347
- padding 0.3s ease,
348
- max-width 0.3s ease,
349
- opacity 0.3s 0.3s ease;
348
+ padding 0.3s 0.2s ease,
349
+ max-width 0.3s 0.2s ease,
350
+ opacity 0.3s ease;
350
351
 
351
352
  @media (width >= 768px) {
352
- max-width: calc(3.5em + var(--space-btwn));
353
+ visibility: hidden;
354
+ max-width: 0;
353
355
  max-height: 2.2em;
354
- padding-left: var(--space-btwn);
356
+ padding-left: unset;
355
357
  overflow: hidden;
358
+ opacity: 0;
356
359
  }
357
360
  }
358
361
 
359
- &:hover {
362
+ &:hover,
363
+ &:focus {
360
364
  color: var(--nyc-sys-color-primary);
361
365
  border-color: var(--nyc-sys-color-primary);
362
- }
363
366
 
364
- /* Desktop unhovered/closed state */
365
- &:not(:hover) {
366
367
  span {
367
368
  transition:
368
- padding 0.3s 0.2s ease,
369
- max-width 0.3s 0.2s ease,
370
- opacity 0.3s ease;
369
+ padding 0.3s ease,
370
+ max-width 0.3s ease,
371
+ opacity 0.3s 0.3s ease;
371
372
 
372
373
  @media (width >= 768px) {
373
- visibility: hidden;
374
- max-width: 0;
375
- padding-left: unset;
376
- opacity: 0;
374
+ visibility: visible;
375
+ max-width: calc(3.5em + var(--space-btwn));
376
+ padding-left: var(--space-btwn);
377
+ opacity: 1;
377
378
  }
378
379
  }
379
380
  }
381
+
382
+ /* Desktop unhovered/closed state */
383
+ &:not(:hover) {
384
+ span {
385
+ }
386
+ }
380
387
  }
package/src/js/NYCBackToTop.js CHANGED
@@ -59,11 +59,19 @@ export class NYCBackToTop extends HTMLElement {
59
59
  }
60
60
 
61
61
  #onClick(e) {
62
- // Reset stored Focus, then scroll to top (for tab accessibility)
62
+ // Focus on the top item for accessibility
63
+ // * If H1 exists, focus on H1,
64
+ // * Otherwise, focus on the first anchor element (should be skip to main content link)
63
65
  e.preventDefault()
64
- document.querySelector('a').focus()
65
- document.querySelector('a').blur()
66
- window.scrollTo({ top: 0, behavior: 'smooth' })
66
+ let topItem = document.querySelector('h1') || document.querySelector('a')
67
+
68
+ if (topItem.tagName === 'H1') {
69
+ if (!topItem.hasAttribute('tabindex')) {
70
+ topItem.setAttribute('tabindex', '-1')
71
+ }
72
+ }
73
+
74
+ topItem.focus()
67
75
  }
68
76
 
69
77
  #onScroll() {
package/css.org DELETED
@@ -1,344 +0,0 @@
1
- #+title: Button
2
-
3
- Buttons encourage users to take an action. They use text or icons to communicate what will happen after the user engages with the button. They are one of two action components, along with links.
4
-
5
- ** Examples
6
-
7
- #+results: button-basic-example
8
-
9
- #+name: button-basic-example
10
- #+begin_src html :exports both :results replace html
11
- <a href="#" class="button">Default button</a>
12
- <a href="#" class="button" data-variant="primary">Primary button</a>
13
- <a href="#" class="button">
14
- <span>Button with icon</span>
15
- <i class="i-ri:arrow-right-line"></i>
16
- </a>
17
-
18
- #+end_src
19
-
20
- ** Custom properties
21
-
22
- Use these custom properties in your theme to override default styling
23
-
24
- | Property | Default |
25
- |-------------------------------+--------------|
26
- | --nyc-cmp-button-color | currentColor |
27
- | --nyc-cmp-button-background | white |
28
- | --nyc-cmp-button-border-width | 2px |
29
- | --nyc-cmp-button-border-color | grey |
30
- | --nyc-cmp-button-shadow | none |
31
- | --nyc-cmp-button-padding | .75rem |
32
-
33
- ** Base styles
34
-
35
- The =button= CSS class implements the custom properties and other
36
- default styles.
37
-
38
- *** Mixin
39
-
40
- #+begin_src css :noweb-ref mixins-base
41
- @define-mixin button {
42
- --_background: var(--nyc-cmp-button-background, hsl(0 0% 100%));
43
- --_background-hover: var(--nyc-cmp-button-background-hover, hsl(0 0% 100%));
44
- --_border-color: var(--nyc-cmp-button-border-color, hsl(0 0% 93%));
45
- --_border-color-hover: var(--nyc-cmp-button-border-color-hover, currentColor);
46
- --_border-width: var(--nyc-cmp-button-border-width, 2px);
47
- --_border-radius: var(--nyc-cmp-button-border-radius, 0);
48
- --_color: var(--nyc-cmp-button-color, hsl(0 0% 0%));
49
- --_color-hover: var(--nyc-cmp-button-color-hover, hsl(0 0% 0%));
50
- --_font-weight: var(--nyc-cmp-button-font-weight, 500);
51
- --_font-size: var(--nyc-cmp-button-font-size, 1rem);
52
- --_shadow: var(--nyc-cmp-button-shadow, none);
53
- --_padding-block: var(--nyc-cmp-button-padding-block, 0.75rem);
54
- --_padding-inline: var(--nyc-cmp-button-padding-inline, 0.75rem);
55
- --_outline-color: var(--nyc-cmp-button-outline-color, inherit);
56
- --_gap: var(--nyc-cmp-button-gap, 0.5rem);
57
-
58
- appearance: none;
59
- background-color: var(--_background);
60
- border-color: var(--_border-color);
61
- border-width: var(--_border-width);
62
- border-style: solid;
63
- border-radius: var(--_border-radius);
64
- color: var(--_color);
65
- padding: var(--_padding-block) var(--_padding-inline);
66
- box-shadow: var(--_shadow);
67
- text-decoration: none;
68
- cursor: pointer;
69
- font-weight: var(--_font-weight);
70
- font-size: var(--_font-size);
71
- line-height: inherit;
72
- display: inline-flex;
73
- justify-content: center;
74
- gap: var(--_gap);
75
- align-items: center;
76
- transition: all 0.3s ease;
77
- text-align: center;
78
-
79
- /* & > :first-child:not(i) { */
80
- /* flex-grow: 1; */
81
- /* width: max-content; */
82
- /* } */
83
-
84
- /* & > i:last-child { */
85
- /* flex-shrink: 0; */
86
- /* margin-block: auto; */
87
- /* font-size: 1.5rem; */
88
-
89
- /* margin-inline-start: .5em; */
90
- /* } */
91
-
92
- &:hover {
93
- background: var(--_background-hover);
94
- color: var(--_color-hover);
95
- border-color: var(--_border-color-hover);
96
- text-decoration: none;
97
- }
98
-
99
- &:focus-visible {
100
- outline: 3px solid var(--_outline-color);
101
- outline-offset: 0;
102
- }
103
-
104
- &[disabled] {
105
- --nyc-cmp-button-color: var(--nyc-sys-color-on-disabled) !important;
106
- --nyc-cmp-button-background: var(--nyc-sys-color-disabled) !important;
107
- --nyc-cmp-button-border-color: var(--nyc-sys-color-on-disabled) !important;
108
- }
109
-
110
- /* @media (width > 768px) { */
111
- /* --_font-size: var(--nyc-cmp-button-font-size-max, 1rem); */
112
- /* } */
113
- }
114
- #+end_src
115
-
116
- *** Default class
117
-
118
- #+begin_src css :noweb-ref default-base
119
- .button,
120
- .button:link,
121
- .button:visited {
122
- @mixin button;
123
- }
124
- #+end_src
125
-
126
- *** AEM class
127
-
128
- #+begin_src css :noweb-ref aem-base
129
- .cmp-button,
130
- .cmp-button:link,
131
- .cmp-button:visited {
132
- @mixin button;
133
- }
134
- #+end_src
135
-
136
- ** Variants
137
-
138
- *** Primary
139
-
140
- **** Mixin
141
-
142
- #+begin_src css :noweb-ref mixins-primary
143
- @define-mixin button-primary {
144
- --nyc-cmp-button-background: var(--nyc-sys-color-primary);
145
- --nyc-cmp-button-color: var(--nyc-sys-color-on-primary);
146
- --nyc-cmp-button-border-color: var(--nyc-sys-color-primary);
147
- --nyc-cmp-button-shadow: none;
148
- &:hover {
149
- --nyc-cmp-button-color-hover: var(--nyc-cmp-button-color);
150
- --nyc-cmp-button-background-hover: var(--nyc-sys-color-primary-hover);
151
- --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-primary-hover);
152
- }
153
- }
154
- #+end_src
155
-
156
- **** Default class
157
-
158
- #+begin_src css :noweb-ref default-primary
159
- .button[data-variant='primary'] {
160
- @mixin button-primary;
161
- }
162
- #+end_src
163
-
164
- **** AEM class
165
-
166
- #+begin_src css :noweb-ref aem-primary
167
- .cmp-button--primary .cmp-button {
168
- @mixin button-primary;
169
- }
170
- #+end_src
171
-
172
- *** Secondary
173
-
174
- **** Mixin
175
-
176
- #+begin_src css :noweb-ref mixins-secondary
177
- @define-mixin button-secondary {
178
- --nyc-cmp-button-background: var(--nyc-sys-color-secondary);
179
- --nyc-cmp-button-color: var(--nyc-sys-color-on-secondary);
180
- --nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
181
- --nyc-cmp-button-shadow: none;
182
- &:hover {
183
- --nyc-cmp-button-color-hover: var(--nyc-sys-color-on-secondary-hover);
184
- --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
185
- }
186
- }
187
- #+end_src
188
-
189
- **** Default class
190
-
191
- #+begin_src css :noweb-ref default-secondary
192
- .button[data-variant='secondary'] {
193
- @mixin button-secondary;
194
- }
195
- #+end_src
196
-
197
- **** AEM class
198
-
199
- #+begin_src css :noweb-ref aem-secondary
200
- .cmp-button--secondary .cmp-button {
201
- @mixin button-secondary;
202
- }
203
- #+end_src
204
-
205
- *** Icon
206
-
207
- **** Mixin
208
-
209
- #+begin_src css :noweb-ref mixins-icon
210
- @define-mixin button-icon {
211
- --nyc-cmp-button-background: var(--nyc-sys-color-primary);
212
- --nyc-cmp-button-color: var(--nyc-sys-color-on-primary);
213
- --nyc-cmp-button-border-color: var(--nyc-sys-color-border-base);
214
- --nyc-cmp-button-shadow: none;
215
- --nyc-cmp-button-padding-inline: var(--nyc-cmp-button-padding-block);
216
- &:hover {
217
- --nyc-cmp-button-color-hover: var(--nyc-sys-color-on-primary-hover);
218
- --nyc-cmp-button-border-color-hover: var(--nyc-sys-color-border-base);
219
- }
220
-
221
- &[disabled] {
222
- --nyc-cmp-button-color: var(--nyc-sys-color-on-disabled);
223
- --nyc-cmp-button-background: var(--nyc-sys-color-disabled);
224
- --nyc-cmp-button-border-color: var(--nyc-sys-color-on-disabled);
225
- }
226
- }
227
- #+end_src
228
-
229
- **** Default class
230
-
231
- #+begin_src css :noweb-ref default-icon
232
- .button[data-variant='icon'] {
233
- @mixin button-icon;
234
- }
235
- #+end_src
236
-
237
- **** AEM class
238
-
239
- #+begin_src css :noweb-ref aem-icon
240
- .cmp-button--icon .cmp-button {
241
- @mixin button-icon;
242
- }
243
- #+end_src
244
-
245
-
246
- *** Full width
247
-
248
- **** Mixin
249
-
250
- #+begin_src css :noweb-ref full-width
251
- @define-mixin button-full-width {
252
- @media (max-width: 768px) {
253
- &:first-child {
254
- width: 100%;
255
- }
256
- }
257
- }
258
- #+end_src
259
-
260
- **** Default class
261
-
262
- #+begin_src css :noweb-ref default-full-width
263
- .button[data-variant='button-full-width'] {
264
- @mixin button-full-width;
265
- }
266
- #+end_src
267
-
268
- **** AEM class
269
-
270
- #+begin_src css :noweb-ref aem-full-width
271
- .cmp-button--full-width .cmp-button {
272
- @mixin button-full-width;
273
- }
274
- #+end_src
275
-
276
-
277
- *** Sizes
278
-
279
- **** Mixin
280
-
281
- #+begin_src css :noweb-ref mixins-sizes
282
- @define-mixin button-sm {
283
- --nyc-cmp-button-border-radius: var(--nyc-sys-radius-lg);
284
- --nyc-cmp-button-padding-block: var(--nyc-sys-space-2xs);
285
- --nyc-cmp-button-padding-inline: var(--nyc-sys-space-2xs);
286
- --nyc-cmp-button-font-size: var(--nyc-sys-size-body-base);
287
- --nyc-cmp-button-font-weight: 600;
288
- }
289
- #+end_src
290
-
291
- **** Default class
292
-
293
- #+begin_src css :noweb-ref default-sizes
294
- .button[data-size='sm'] {
295
- @mixin button-sm;
296
- }
297
- #+end_src
298
-
299
- **** AEM class
300
-
301
- #+begin_src css :noweb-ref aem-sizes
302
- .cmp-button--sm .cmp-button {
303
- @mixin button-sm;
304
- }
305
- #+end_src
306
-
307
- ** File exports :noexport:
308
-
309
- *** Mixins
310
-
311
- #+begin_src css :noweb yes
312
- /* Generated from README.org - do not edit directly */
313
- <<mixins-base>>
314
- <<mixins-primary>>
315
- <<mixins-secondary>>
316
- <<mixins-icon>>
317
- <<mixins-sizes>>
318
- #+end_src
319
-
320
- *** Default
321
-
322
- #+begin_src css :noweb yes
323
- /* Generated from README.org - do not edit directly */
324
- @import './mixins.css';
325
-
326
- <<default-base>>
327
- <<default-primary>>
328
- <<default-secondary>>
329
- <<default-icon>>
330
- <<default-sizes>>
331
- #+end_src
332
-
333
- *** AEM
334
-
335
- #+begin_src css :noweb yes
336
- /* Generated from README.org - do not edit directly */
337
- @import '../mixins.css';
338
-
339
- <<aem-base>>
340
- <<aem-primary>>
341
- <<aem-secondary>>
342
- <<aem-icon>>
343
- <<aem-sizes>>
344
- #+end_src
package/postcss.config.js DELETED
@@ -1 +0,0 @@
1
- export { default } from '@nycds/config'
package/src/js/BackToTop.js DELETED
@@ -1,90 +0,0 @@
1
- // See apps/pocs/src/js/components/NYCBackToTop.js for example implementation
2
- export default class BackToTop extends HTMLElement {
3
- static define(name = 'nyc-back-to-top') {
4
- customElements.define(name, this)
5
- }
6
-
7
- constructor() {
8
- super()
9
- this.isLongPage = false
10
- this.isScrolledEnough = false
11
- this.isScrollTick = false
12
- this.button = this.querySelector('#back-to-top')
13
-
14
- // For observing resizing of dynamic content
15
- this.dynamicContainer = document.querySelector('.backtotop-observe')
16
- this.resizeObserver = null
17
- this.queuedHeightCheck = null
18
- }
19
-
20
- connectedCallback() {
21
- this.#queueCheckHeights()
22
- window.addEventListener('scroll', this.#onScroll.bind(this))
23
- this.button.addEventListener('click', this.#onClick.bind(this))
24
-
25
- // If dynamic content exists, recheck height when dynamic container size changes
26
- if (this.dynamicContainer) {
27
- this.resizeObserver = new ResizeObserver(this.#queueCheckHeights.bind(this))
28
- this.resizeObserver.observe(this.dynamicContainer)
29
- } else {
30
- window.addEventListener('resize', this.#queueCheckHeights.bind(this))
31
- }
32
- }
33
-
34
- disconnectedCallback() {
35
- window.removeEventListener('scroll', this.#onScroll.bind(this))
36
- this.button.removeEventListener('click', this.#onClick.bind(this))
37
-
38
- if (this.dynamicContainer) {
39
- this.resizeObserver.disconnect()
40
- } else {
41
- window.removeEventListener('resize', this.#queueCheckHeights.bind(this))
42
- }
43
- }
44
-
45
- #checkHeights() {
46
- const pageHeight = document.documentElement.scrollHeight
47
- const windowHeight = window.innerHeight
48
-
49
- this.isLongPage = pageHeight > 4 * windowHeight
50
- this.#updateShowHide()
51
- }
52
-
53
- #checkScroll() {
54
- const scrollY = window.scrollY
55
- const windowHeight = window.innerHeight
56
-
57
- this.isScrolledEnough = scrollY > windowHeight
58
- this.#updateShowHide()
59
- }
60
-
61
- #onClick(e) {
62
- // Reset stored Focus, then scroll to top (for tab accessibility)
63
- e.preventDefault()
64
- document.querySelector('a').focus()
65
- document.querySelector('a').blur()
66
- window.scrollTo({ top: 0, behavior: 'smooth' })
67
- }
68
-
69
- #onScroll() {
70
- if (this.isScrollTick) return
71
- this.isScrollTick = true
72
- setTimeout(() => {
73
- this.#checkScroll()
74
- this.isScrollTick = false
75
- }, 500)
76
- }
77
-
78
- #queueCheckHeights() {
79
- this.queuedHeightCheck && clearTimeout(this.queuedHeightCheck)
80
- this.queuedHeightCheck = setTimeout(this.#checkHeights.bind(this), 1000)
81
- }
82
-
83
- #updateShowHide() {
84
- if (this.isLongPage && this.isScrolledEnough) {
85
- this.classList.add('enabled')
86
- } else {
87
- this.classList.remove('enabled')
88
- }
89
- }
90
- }
package/tests/back-to-top.spec.js DELETED
@@ -1,16 +0,0 @@
1
- import { test, expect } from '@playwright/test';
2
-
3
- test.describe('Back To Top', () => {
4
- test.describe('NYCBackToTop component', () => {
5
- let component;
6
- test.beforeEach(async ({ page }) => {
7
- await page.goto('/packages/components/button/tests/index.html')
8
- component = page.locator('nyc-back-to-top')
9
- })
10
-
11
- test('Back to top enabled at scroll point', async ({page, browserName }) => {
12
- await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight / 2))
13
- await expect(component).toContainClass('enabled')
14
- })
15
- })
16
- })
package/tests/index.html DELETED
@@ -1,20 +0,0 @@
1
- <html>
2
- <head>
3
- <link href="../../../core/dist/nycds-core.css" rel="stylesheet" />
4
- </head>
5
- <body>
6
-
7
- <div style="height: 500vh" class="backtotop-observe">
8
- </div>
9
- <nyc-back-to-top>
10
- <button id="back-to-top" class="nyc-button" data-variant="back-to-top" aria-label="Back to top">
11
- <span>Back to top</span>
12
- </button>
13
- </nyc-back-to-top>
14
-
15
- <script type="module">
16
- import { NYCBackToTop } from '../src/js/index.js'
17
- NYCBackToTop.define()
18
- </script>
19
- </body>
20
- </html>