[mercury][paginator] Rename selected page part page-active to selected that was outdated (#642)

* Mercury | Paginator : Rename selected page part that was outdated

* Mercury | Paginator : Update test bundles

Author: bsastregx

packages/mercury/src/components/paginator/_paginator-styles.scss

@@ -38,7 +38,7 @@
       color: var(--mer-icon__neutral);
       padding: var(--mer-spacing--2xs) var(--mer-spacing--xs);
 
-      &--active {
+      &--selected {
         background: var(--mer-accent__primary);
         color: var(--mer-text__on-primary);
       }
@@ -70,7 +70,7 @@
 //  [".paginator::part(items-per-page-info)"] -
 /// @param {String} $paginator__navigation-page-selector: [".paginator::part(page)"] -
 /// @param {String} $paginator__navigation-page-not-selected-selector: [".paginator::part(page page-not-selected)"] -
-/// @param {String} $paginator__navigation-page-active-selector: [".paginator::part(page page-active)"] -
+/// @param {String} $paginator__navigation-page-selected-selector: [".paginator::part(page selected)"] -
 /// @param {String} $paginator__navigation-pages-selector: [".paginator::part(pages)"] -
 /// @param {String} $paginator__first-button-selector [".paginator::part(first__button)"] -
 /// @param {String} $paginator__last-button-selector [".paginator::part(last__button)"] -
@@ -107,8 +107,8 @@
   $paginator__navigation-page-selector: ".paginator::part(page)",
   $paginator__navigation-page-not-selected-selector:
     ".paginator::part(page page-not-selected)",
-  $paginator__navigation-page-active-selector:
-    ".paginator::part(page page-active)",
+  $paginator__navigation-page-selected-selector:
+    ".paginator::part(page selected)",
   $paginator__navigation-pages-selector: ".paginator::part(pages)",
   $paginator__first-button-selector: ".paginator::part(first__button)",
   $paginator__last-button-selector: ".paginator::part(last__button)",
@@ -202,9 +202,9 @@
     }
   }
 
-  #{$paginator__navigation-page-active-selector} {
+  #{$paginator__navigation-page-selected-selector} {
     @extend %body-semi-bold-s;
-    @extend %paginator__pages__button--active;
+    @extend %paginator__pages__button--selected;
   }
 
   @include combo-box(

packages/mercury/src/tests/bundles/expected-bundle-content/all.json

@@ -241,9 +241,9 @@
   ".icon-sm { --ch-image-size: var(--mer-icon__box--sm); --ch-image-background-size: var(--mer-icon__size--sm); }",
   ".input-error { --control__border-color: var(--control__border-color--error); }",
   ".input:disabled { --control__bg-color: var(--control__background-color--disabled); --control__border-color: var(--control__border-color--disabled); --control__color: var(--control__color--disabled); --ch-placeholder-color: var(--control-placeholder__color--disabled); }",
-  ".label, .paginator::part(items-per-page__label), .radio-group::part(radio__label), .pill, .checkbox::part(label), .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page page-active), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl { font-weight: var(--font-weight-semi-bold); }",
+  ".label, .paginator::part(items-per-page__label), .radio-group::part(radio__label), .pill, .checkbox::part(label), .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page selected), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl { font-weight: var(--font-weight-semi-bold); }",
   ".label, .paginator::part(items-per-page__label), .switch-large, .radio-group::part(radio__label), .pill, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .checkbox::part(label), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-italic-m, .combo-box[part=\"ch-combo-box-render--placeholder\"], .input[part*=\"ch-edit--empty-value\"], .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button) { font-size: var(--font-size-body-m); }",
-  ".label, .paginator::part(items-per-page__label), .tree-view, .tooltip::part(window), .switch-small, .switch-large, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .radio-group::part(radio__label), .pill, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .checkbox::part(label), .chat::part(header__time), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-italic-xs, .body-italic-s, .body-italic-m, .combo-box[part=\"ch-combo-box-render--placeholder\"], .input[part*=\"ch-edit--empty-value\"], .body-italic-l, .body-italic-xl, .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page page-active), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl, .body-regular-xs, .chat::part(file-footer), .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end), .body-regular-l, .body-regular-xl { line-height: var(--line-height-tight); }",
+  ".label, .paginator::part(items-per-page__label), .tree-view, .tooltip::part(window), .switch-small, .switch-large, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .radio-group::part(radio__label), .pill, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .checkbox::part(label), .chat::part(header__time), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-italic-xs, .body-italic-s, .body-italic-m, .combo-box[part=\"ch-combo-box-render--placeholder\"], .input[part*=\"ch-edit--empty-value\"], .body-italic-l, .body-italic-xl, .body-semi-bold-xs, .body-semi-bold-s, .paginator::part(page selected), .tabular-grid-column, .body-semi-bold-m, .button-primary, .button-primary-destructive, .button-primary-success, .dropdown.button-primary::part(expandable-button), .segmented-control-filled .segmented-control-item::part(action), .button-secondary, .button-secondary-destructive, .chat-live-audio-button, .dropdown.button-secondary::part(expandable-button), .chat::part(send-button), .chat::part(stop-response-button), .body-semi-bold-l, .body-semi-bold-xl, .body-regular-xs, .chat::part(file-footer), .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end), .body-regular-l, .body-regular-xl { line-height: var(--line-height-tight); }",
   ".label--disabled { --label__color: var(--label__color--disabled); }",
   ".label--disabled { --label__color: var(--label__color--disabled); }",
   ".layout { --spacing-body-block-start: var(--mer-spacing--md); --spacing-body-block-end: var(--mer-spacing--md); --spacing-body-inline-start: var(--mer-spacing--lg); --spacing-body-inline-end: var(--mer-spacing--lg); display: grid; gap: var(--mer-spacing--md); }",
@@ -289,7 +289,7 @@
   ".paginator::part(items-per-page__combo-box) { inline-size: 80px; }",
   ".paginator::part(last__button)::before { --button-arrow-icon: var(--icon__system_chevron-pag-right_primary--enabled); }",
   ".paginator::part(next__button)::before { --button-arrow-icon: var(--icon__system_chevron-right_primary--enabled); }",
-  ".paginator::part(page page-active) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }",
+  ".paginator::part(page selected) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }",
   ".paginator::part(page) { border-radius: var(--mer-border__radius--sm); color: var(--mer-icon__neutral); padding: var(--mer-spacing--2xs) var(--mer-spacing--xs); }",
   ".paginator::part(page):hover { color: var(--mer-icon__on-primary--hover); background-color: var(--item__bg-color--selected-hover); }",
   ".paginator::part(pages) { gap: var(--mer-spacing--xs); }",
@@ -477,7 +477,7 @@
   ".tree-view { --ch-tree-view-item-custom-padding-inline-start: var(--mer-spacing--xs); --ch-tree-view-item-gap: var(--mer-spacing--xs); --ch-tree-view-item__checkbox-size: var(--mer-spacing--md); --ch-tree-view-item__expandable-button-size: var(--mer-spacing--md); --ch-tree-view-item__image-size: var(--mer-spacing--md); --ch-tree-view-item__background-image-size: var(--mer-icon__box--md); --ch-tree-view-item__line--inset-inline-end: 4px; --tree-view__min-inline-size: max-content; --tree-view-item-custom__padding-inline-end: var(--mer-spacing--2xs); --tree-view-item-dashed-line__border-color: var(--mer-text__on-surface); --tree-view-item-dashed-line__opacity: 0.3; --tree-view-item-header__padding-block: calc(var(--mer-spacing--3xs)); --tree-view-item-downloading__inline-size: var(--mer-spacing--sm); --tree-view-item-downloading__block-size: var(--mer-spacing--sm); --tree-view-item-downloading__border: var(--mer-border__width--md) solid var(--mer-accent__primary--active); line-height: var(--tree-view-item__line-height); min-inline-size: var(--tree-view__min-inline-size); }",
   ".tree-view { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb__bg-color) var(--scrollbar-track__bg-color); }",
   ".tree-view, .tooltip::part(window), .switch-small, .switch-large, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .navigation-list::part(item__caption tooltip), .list-box::part(item__action), .list-box::part(group__action), .combo-box, .paginator::part(items-per-page__combo-box), .chat::part(send-input), .input, .paginator::part(go-to__input), .dropdown::part(action), .body-regular-xs, .chat::part(file-footer), .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end), .body-regular-l, .body-regular-xl { font-weight: var(--font-weight-regular); }",
-  ".tree-view, .tooltip::part(window), .switch-small, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .chat::part(header__time), .body-italic-s, .body-semi-bold-s, .paginator::part(page page-active), .tabular-grid-column, .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end) { font-size: var(--font-size-body-s); }",
+  ".tree-view, .tooltip::part(window), .switch-small, .tabular-grid, .property-grid, .tabular-grid-cell .combo-box, .property-grid-cell .combo-box, .tabular-grid-cell .input, .property-grid-cell .input, .chat::part(header__time), .body-italic-s, .body-semi-bold-s, .paginator::part(page selected), .tabular-grid-column, .body-regular-s, .paginator, .flexible-layout::part(tab block closable), .flexible-layout::part(tab block not-closable), .flexible-layout::part(tab inline-start), .flexible-layout::part(tab inline-end), .tab::part(tab block closable), .tab::part(tab block not-closable), .tab::part(tab inline-start), .tab::part(tab inline-end) { font-size: var(--font-size-body-s); }",
   ".tree-view::-webkit-scrollbar { width: var(--scrollbar__size); height: var(--scrollbar__size); }",
   ".tree-view::-webkit-scrollbar-corner { background: var(--scrollbar-corner__bg); }",
   ".tree-view::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb__bg-color); border-radius: var(--scrollbar-thumb__border-radius); }",

packages/mercury/src/tests/bundles/expected-bundle-content/components/paginator.json

@@ -24,12 +24,12 @@
   ".paginator::part(items-per-page__combo-box):focus { border-color: var(--borders-un-border-color__focused); }",
   ".paginator::part(items-per-page__combo-box):hover { --control__border-color: var(--control__border-color--hover); }",
   ".paginator::part(items-per-page__label) { font-size: var(--font-size-body-m); }",
-  ".paginator::part(items-per-page__label), .paginator::part(page page-active) { font-weight: var(--font-weight-semi-bold); }",
-  ".paginator::part(items-per-page__label), .paginator::part(page page-active), .paginator { line-height: var(--line-height-tight); }",
+  ".paginator::part(items-per-page__label), .paginator::part(page selected) { font-weight: var(--font-weight-semi-bold); }",
+  ".paginator::part(items-per-page__label), .paginator::part(page selected), .paginator { line-height: var(--line-height-tight); }",
   ".paginator::part(last__button)::before { --button-arrow-icon: var(--icon__system_chevron-pag-right_primary--enabled); }",
   ".paginator::part(next__button)::before { --button-arrow-icon: var(--icon__system_chevron-right_primary--enabled); }",
-  ".paginator::part(page page-active) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }",
-  ".paginator::part(page page-active), .paginator { font-size: var(--font-size-body-s); }",
+  ".paginator::part(page selected) { background: var(--mer-accent__primary); color: var(--mer-text__on-primary); }",
+  ".paginator::part(page selected), .paginator { font-size: var(--font-size-body-s); }",
   ".paginator::part(page) { border-radius: var(--mer-border__radius--sm); color: var(--mer-icon__neutral); padding: var(--mer-spacing--2xs) var(--mer-spacing--xs); }",
   ".paginator::part(page):hover { color: var(--mer-icon__on-primary--hover); background-color: var(--item__bg-color--selected-hover); }",
   ".paginator::part(pages) { gap: var(--mer-spacing--xs); }",
@@ -43,4 +43,4 @@
   ".paginator::part(window) { border-style: var(--items-container__border-style); border-width: var(--items-container__border-width); border-radius: var(--items-container__border-radius); background-color: var(--elevation-background-color, var(--items-container__bg-color)); border-color: var(--elevation-border-color, var(--items-container__border-color)); padding-block: var(--items-container__padding-block); padding-inline: var(--items-container__padding-inline); gap: var(--items-container__gap); box-shadow: var(--items-container__box-shadow); font-style: normal; }",
   "@keyframes spin { \n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}",
   "paginator__previous-button-selector, paginator__next-button-selector, paginator__last-button-selector, paginator__first-button-selector { padding: calc((var(--control__block-size) - 2*var(--control__border-width) - var(--mer-icon__box--md))/2); border-width: var(--control__border-width); border-style: var(--control__border-style); border-color: var(--control__border-color); border-radius: var(--control__border-radius); }"
-]
+]