@zanichelli/albe-web-components 11.1.0 → 12.0.1

package/dist/collection/components/inputs/z-combobox/styles.css

@@ -14,9 +14,9 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 calc(var(--space-unit) * 1.5);
-  border: var(--border-size-small) solid var(--bg-grey-700);
+  border: var(--border-size-small) solid var(--color-surface04);
   margin: 0;
-  background-color: var(--bg-white);
+  background-color: var(--color-input-field01);
   border-radius: var(--border-radius-small);
   cursor: pointer;
 }
@@ -36,7 +36,7 @@
 }
 
 :host > div > .header:hover {
-  outline: var(--border-size-medium) solid var(--gray700);
+  outline: var(--border-size-medium) solid var(--color-surface04);
   outline-offset: -2px;
 }
 
@@ -52,7 +52,7 @@
 :host > div > .header > p.body-3 {
   padding: var(--space-unit) 0;
   margin: 0;
-  color: var(--text-grey-800);
+  color: var(--color-text01);
 }
 
 :host > div > .header > p.body-3 > span {
@@ -60,7 +60,7 @@
 }
 
 :host > div > .header > z-icon {
-  fill: var(--text-grey-800);
+  fill: var(--color-icon02);
   transform: rotate(360deg);
   transition: all 200ms linear;
 }
@@ -72,7 +72,7 @@
 }
 
 :host > div.open > .header {
-  border: var(--border-size-small) solid var(--blue500);
+  border: var(--border-size-small) solid var(--color-primary01);
   border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
 }
 
@@ -86,7 +86,7 @@
 }
 
 :host > div.disabled .header > p.body-3 {
-  color: var(--text-grey-700);
+  color: var(--color-disabled02);
 }
 
 :host > div.disabled .header > z-icon:last-child {
@@ -94,7 +94,7 @@
 }
 
 :host > div.open > .header > z-icon {
-  fill: var(--text-grey-800);
+  fill: var(--color-icon02);
   transform: rotate(180deg);
   transition: all 200ms linear;
 }
@@ -105,7 +105,7 @@
   padding: var(--space-unit) calc(var(--space-unit) * 2);
   border: var(--border-size-small) solid var(--gray200);
   border-top: 0;
-  background-color: var(--bg-white);
+  background-color: var(--color-input-field01);
   border-radius: 0;
 }
 
@@ -113,8 +113,7 @@
   overflow: auto;
   max-height: 235px;
   padding: 0;
-  scrollbar-color: var(--myz-blue) var(--gray200);
-  scrollbar-width: thin;
+  scrollbar-color: var(--color-primary01) transparent;
 }
 
 :host > div.open > div.open-combo-data > z-input {
@@ -130,14 +129,13 @@
 
 ::-webkit-scrollbar {
   width: 10px;
-  background: linear-gradient(90deg, var(--bg-white) 2px, var(--bg-grey-200) 4px, var(--bg-white) 8px);
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
   border-radius: var(--border-radius);
 }
 
 ::-webkit-scrollbar-thumb {
   width: 10px;
-  background-color: var(--myz-blue);
-  border-radius: var(--border-radius);
+  background-color: var(--color-primary01);
 }
 
 :host > div.open > z-input {
@@ -145,7 +143,7 @@
   z-index: 1;
   width: 238px;
   margin: 0 calc(var(--space-unit) * 2);
-  color: var(--myz-blue);
+  color: var(--color-primary01);
 }
 
 :host > div.open > div.open-combo-data > div.search {
@@ -159,8 +157,7 @@
   overflow: auto;
   max-height: 180px;
   padding: var(--space-unit) calc(var(--space-unit) * 2);
-  scrollbar-color: var(--myz-blue) var(--bg-grey-200);
-  scrollbar-width: thin;
+  scrollbar-color: var(--color-primary01) transparent;
 }
 
 :host > div.open > div.open-combo-data > div.search > div {
@@ -171,9 +168,9 @@
 :host > div.open > div.open-combo-data > div.search > div > a {
   display: inline-block;
   height: 44px;
-  color: var(--myz-blue);
+  color: var(--color-primary01);
   cursor: pointer;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-size: 14px;
   font-weight: var(--font-sb);
   line-height: 44px;

package/dist/collection/components/inputs/z-searchbar/index.js

@@ -492,7 +492,7 @@ export class ZSearchbar {
         "mutable": false,
         "complexType": {
           "original": "ButtonVariant",
-          "resolved": "ButtonVariant.DARK_BG | ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
+          "resolved": "ButtonVariant.PRIMARY | ButtonVariant.SECONDARY | ButtonVariant.TERTIARY",
           "references": {
             "ButtonVariant": {
               "location": "import",

package/dist/collection/components/list/z-list-element/styles.css

@@ -4,7 +4,7 @@
 
 :host > .container,
 :host > .container-contextual-menu {
-  --background-color-list-element: var(--bg-white);
+  --background-color-list-element: var(--color-surface01);
   --background-hover-color-list-element: var(--color-surface02);
   --background-active-color-list-element: var(--color-surface02);
 

package/dist/collection/components/navigation/z-app-header/styles.css

@@ -213,6 +213,10 @@ z-searchbar {
   column-gap: calc(var(--space-unit) * 2);
 }
 
+.heading-stuck .heading-title {
+  overflow: hidden;
+}
+
 .heading-stuck .heading-title > *,
 .heading-stuck .heading-title ::slotted([slot="stucked-title"]) {
   display: block;

package/dist/collection/components/notification/z-info-box/styles.css

@@ -1,5 +1,5 @@
 :host {
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
@@ -7,17 +7,17 @@
   display: flex;
   width: inherit;
   padding: calc(var(--space-unit) * 2);
-  background: var(--accent-lighter);
+  background: var(--color-primary03);
   border-radius: var(--border-radius);
 }
 
 :host > div > slot {
-  color: var(--text-grey-800);
+  color: var(--color-text01);
   font-size: 14px;
 }
 
 :host > div > z-icon {
   margin-left: calc(var(--space-unit) * 2);
   cursor: pointer;
-  fill: var(--myz-blue);
+  fill: var(--color-primary01);
 }

package/dist/collection/components/panel/z-panel-elem/styles.css

@@ -1,6 +1,6 @@
 :host {
   width: inherit;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family sans);
   font-weight: var(--font-rg);
 }
 

package/dist/collection/components/table/cells/z-th/index.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { ButtonVariant, ControlSize, SortDirection } from "../../../../beans";
+import { ButtonVariant, ControlSize, PopoverPosition, SortDirection } from "../../../../beans";
 /**
  * ZTh component.
  * @slot - ZTh content.
@@ -17,6 +17,10 @@ export class ZTh {
      * Whether the cell should stick.
      */
     this.sticky = false;
+    /**
+     * Set popover position.
+     */
+    this.popoverPosition = PopoverPosition.AUTO;
     /**
      * Store the open state of the menu.
      */
@@ -56,7 +60,7 @@ export class ZTh {
     this.updateColspan();
   }
   render() {
-    return (h(Host, { role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection }, h("slot", null), this.sortDirection && (h("button", { class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { name: this.sortDirection === SortDirection.ASC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { class: "cell--menu-container" }, h("z-button", { variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open) }, h("slot", { name: "contextual-menu" }))))));
+    return (h(Host, { role: "columnheader", "menu-open": this.isMenuOpen, "aria-sort": this.ariaSortDirection }, h("slot", null), this.sortDirection && (h("button", { class: "z-th--sort-button", type: "button", onClick: this.handleSort.bind(this) }, h("z-icon", { name: this.sortDirection === SortDirection.ASC ? "arrow-simple-up" : "arrow-simple-down", width: 14, height: 14 }))), this.showMenu && (h("div", { class: "cell--menu-container" }, h("z-button", { variant: ButtonVariant.TERTIARY, icon: "contextual-menu", size: ControlSize.X_SMALL, ref: (el) => (this.menuTrigger = el), onClick: () => (this.popoverEl.open = !this.popoverEl.open) }), h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.menuTrigger, onOpenChange: (event) => (this.isMenuOpen = event.detail.open), position: this.popoverPosition }, h("slot", { name: "contextual-menu" }))))));
   }
   static get is() { return "z-th"; }
   static get encapsulation() { return "shadow"; }
@@ -151,6 +155,24 @@ export class ZTh {
         },
         "attribute": "sort-direction",
         "reflect": false
+      },
+      "popoverPosition": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PopoverPosition",
+          "resolved": "PopoverPosition.AUTO | PopoverPosition.BOTTOM | PopoverPosition.BOTTOM_LEFT | PopoverPosition.BOTTOM_RIGHT | PopoverPosition.LEFT | PopoverPosition.LEFT_BOTTOM | PopoverPosition.LEFT_TOP | PopoverPosition.RIGHT | PopoverPosition.RIGHT_BOTTOM | PopoverPosition.RIGHT_TOP | PopoverPosition.TOP | PopoverPosition.TOP_LEFT | PopoverPosition.TOP_RIGHT",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Set popover position."
+        },
+        "attribute": "popover-position",
+        "reflect": false,
+        "defaultValue": "PopoverPosition.AUTO"
       }
     };
   }

package/dist/collection/components/z-avatar/index.js

@@ -6,9 +6,9 @@ export class ZAvatar {
     /** [optional] Avatar size */
     this.size = AvatarSize.MEDIUM;
     /** [optional] Avatar text color */
-    this.textColor = "text-white";
+    this.textColor = "color-white";
     /** [optional] Avatar background color */
-    this.backgroundColor = "bg-grey-700";
+    this.backgroundColor = "gray700";
     if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
       console.warn("z-avatar must contain at least one prop between text and image");
     }
@@ -100,7 +100,7 @@ export class ZAvatar {
         },
         "attribute": "text-color",
         "reflect": false,
-        "defaultValue": "\"text-white\""
+        "defaultValue": "\"color-white\""
       },
       "backgroundColor": {
         "type": "string",
@@ -118,7 +118,7 @@ export class ZAvatar {
         },
         "attribute": "background-color",
         "reflect": false,
-        "defaultValue": "\"bg-grey-700\""
+        "defaultValue": "\"gray700\""
       },
       "image": {
         "type": "string",

package/dist/collection/components/z-avatar/styles.css

@@ -3,7 +3,7 @@
   overflow: hidden;
   align-items: center;
   justify-content: center;
-  background-color: var(--bg-grey-700);
+  background-color: var(--gray700);
   border-radius: 50%;
   font-family: var(--font-family-sans);
   text-transform: uppercase;

package/dist/collection/components/z-book-card/styles.css

@@ -54,7 +54,7 @@
   border-radius: 0 var(--border-radius) var(--border-radius) 0;
   box-shadow: var(--shadow-2);
   color: var(--color-text04);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-size: var(--font-size-2);
   font-weight: var(--font-sb);
   line-height: initial;

package/dist/collection/components/z-ghost-loading/styles.css

@@ -3,8 +3,8 @@
   overflow: hidden;
   width: 100%;
   height: 100%;
-  background: var(--bg-neutral-100);
-  border-radius: 4px;
+  background: var(--color-surface02);
+  border-radius: var(--border-radius);
   transform: translate3d(0, 0, 0);
 }
 
@@ -15,12 +15,12 @@
   animation: progress 1.6s ease-in-out infinite;
   background-image: linear-gradient(
     90deg,
-    var(--bg-neutral-100) 0%,
-    var(--bg-neutral-150) 95%,
-    var(--bg-neutral-100) 100%
+    var(--color-surface02) 0%,
+    var(--color-surface03) 95%,
+    var(--color-surface02) 100%
   );
-  box-shadow: #e8ebee20 0 0 1px;
-  content: " ";
+  content: "";
+  filter: blur(6px);
 }
 
 @keyframes progress {

package/dist/collection/components/z-skip-to-content/styles.css

@@ -34,14 +34,14 @@
 }
 
 :host.dark {
-  background-color: var(--bg-grey-800);
-  color: var(--color-white);
+  background-color: var(--color-surface05);
+  color: var(--color-surface01);
 }
 
 :host.light {
-  border: 2px solid var(--text-grey-800);
-  background-color: var(--bg-white);
-  color: var(--text-grey-800);
+  border: var(--border-size-medium) solid var(--color-surface05);
+  background-color: var(--color-surface01);
+  color: var(--color-text01);
 }
 
 /* Tablet breakpoint */
@@ -55,7 +55,7 @@
 @media (min-width: 1152px) {
   :host > .link-container {
     padding: 0 calc(var(--space-unit) * 3);
-    border-right: 1px solid var(--bg-grey-800);
+    border-right: var(--border-size-small) solid var(--color-surface05);
   }
 
   :host > .link-container > a.z-link.link-invisible {
@@ -76,6 +76,6 @@
   }
 
   :host.dark > .link-container {
-    border-right: 1px solid var(--bg-white);
+    border-right: var(--border-size-small) solid var(--color-surface01);
   }
 }

package/dist/collection/deprecated/z-link/styles.css

@@ -17,7 +17,7 @@
 a {
   display: inline-flex;
   align-items: center;
-  padding: calc(var(--space-unit) * 0.5) 0;
+  padding: calc(var(--space-unit) / 2) 0;
   border-top: var(--border-size-medium) solid transparent;
   border-bottom: var(--border-size-medium) solid transparent;
   color: var(--color-link-primary);
@@ -136,14 +136,14 @@ a.white,
 a.white:active,
 a.white:hover,
 a.white.active {
-  color: var(--bg-white);
-  fill: var(--bg-white);
+  color: var(--color-white);
+  fill: var(--color-white);
   text-decoration: none;
 }
 
 a.white:visited {
-  color: var(--bg-white);
-  fill: var(--bg-white);
+  color: var(--color-white);
+  fill: var(--color-white);
 }
 
 a.white:hover,

package/dist/collection/deprecated/z-table-deprecated/z-table-body/styles.css

@@ -1,6 +1,6 @@
 :host {
   display: table-row-group;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 

package/dist/collection/deprecated/z-table-deprecated/z-table-cell/styles.css

@@ -1,8 +1,8 @@
 :host {
   display: table-cell;
-  border-bottom: var(--border-size-small) solid var(--bg-grey-200);
+  border-bottom: var(--border-size-small) solid var(--color-surface03);
   background-color: var(--color-white);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 

package/dist/collection/deprecated/z-table-deprecated/z-table-deprecated/styles.css

@@ -2,7 +2,7 @@ z-table-deprecated {
   display: block;
   width: 100%;
   background-color: var(--color-white);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
   overflow-x: auto;
 }
@@ -15,7 +15,7 @@ z-table-deprecated > div.table {
 
 z-table-deprecated > div.table-bordered > z-table-body > z-table-row > z-table-cell:not(:last-child),
 z-table-deprecated > div.table-bordered > z-table-head > z-table-header-row > z-table-header:not(:last-child) {
-  border-right: var(--border-size-small) solid var(--bg-grey-200);
+  border-right: var(--border-size-small) solid var(--color-surface03);
 }
 
 /** Remove border right to first cell if row is expandable */
@@ -64,11 +64,11 @@ z-table-empty-box {
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  border-bottom: var(--border-size-small) solid var(--bg-grey-200);
+  border-bottom: var(--border-size-small) solid var(--color-surface03);
 }
 
 z-table-empty-box.bordered {
-  border-left: var(--border-size-small) solid var(--bg-grey-200);
+  border-left: var(--border-size-small) solid var(--color-surface03);
 }
 
 .error-message {
@@ -84,7 +84,7 @@ z-table-empty-box.bordered {
 .error-content {
   display: flex;
   padding: calc(var(--space-unit) * 3);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
 }
 
 .error-content > img {

package/dist/collection/deprecated/z-table-deprecated/z-table-empty-box/styles.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
   padding: calc(var(--space-unit)) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3) calc(var(--space-unit) * 3);
-  background-color: var(--bg-white);
+  background-color: var(--color-surface01);
 }
 
 ::slotted(*) {

package/dist/collection/deprecated/z-table-deprecated/z-table-footer/styles.css

@@ -1,5 +1,5 @@
 :host {
   display: table-footer-group;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }

package/dist/collection/deprecated/z-table-deprecated/z-table-head/styles.css

@@ -1,5 +1,5 @@
 :host {
   display: table-header-group;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }

package/dist/collection/deprecated/z-table-deprecated/z-table-header/styles.css

@@ -3,7 +3,7 @@
   display: table-cell;
   border-bottom: var(--border-size-medium) solid var(--gray200);
   background-color: var(--gray50);
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-sb);
   text-align: start;
 }

package/dist/collection/deprecated/z-table-deprecated/z-table-row/styles.css

@@ -32,7 +32,7 @@ z-table-row[expanded-type="padding"] > z-table-cell:nth-child(2) {
 }
 
 z-table-row[expanded-type]:hover > z-table-cell:first-child {
-  fill: var(--myz-blue-dark);
+  fill: var(--color-hover-primary);
 }
 
 z-table-row[expanded] > z-table-cell {

package/dist/collection/deprecated/z-table-deprecated/z-table-sticky-footer/styles.css

@@ -2,10 +2,10 @@
   position: sticky;
   left: 0;
   display: block;
-  padding: var(--basex2);
-  border-width: var(--border-size-small) 0 var(--border-base);
+  padding: calc(var(--space-unit) * 2);
+  border-width: var(--border-size-small) 0 var(--border-size-medium);
   border-style: solid;
-  border-color: var(--gray200);
-  background-color: var(--bg-white);
+  border-color: var(--color-surface03);
+  background-color: var(--color-surface01);
   font-weight: var(--font-rg);
 }

package/dist/collection/snowflakes/myz/card/z-myz-card/styles.css

@@ -18,7 +18,7 @@ div {
 div.real,
 div.trial,
 div.temp {
-  border-color: var(--accent);
+  border-color: var(--blue100);
 }
 
 /* HIDDEN status */

package/dist/collection/snowflakes/myz/card/z-myz-card-footer/styles.css

@@ -18,7 +18,7 @@ footer {
 footer.real,
 footer.trial,
 footer.temp {
-  border-top: var(--border-size-medium) solid var(--accent);
+  border-top: var(--border-size-medium) solid var(--blue100);
 }
 
 footer .bold {
@@ -40,8 +40,7 @@ footer > p {
 }
 
 footer.isopen > p {
-  /* TODO: non esiste l'equivalente nei token nuovi: implementare */
-  background-color: var(--bg-neutral-200);
+  background-color: var(--gray200);
   font-size: 14px;
   font-weight: var(--font-sb);
   transition: all 200ms linear;
@@ -50,7 +49,7 @@ footer.isopen > p {
 footer.isopen.real > p,
 footer.isopen.trial > p,
 footer.isopen.temp > p {
-  background-color: var(--accent);
+  background-color: var(--blue100);
 }
 
 footer .visible {
@@ -178,5 +177,5 @@ div.wrapper.isopen ::slotted([slot="content"]) {
   bottom: 0;
   height: 128px;
   padding: calc(var(--space-unit) * 2);
-  border-color: var(--accent);
+  border-color: var(--blue100);
 }

package/dist/collection/snowflakes/myz/card/z-myz-card-footer-sections/styles.css

@@ -7,8 +7,8 @@
   height: 128px;
   box-sizing: border-box;
   padding: var(--space-unit) calc(var(--space-unit) * 2) 0;
-  border-top: var(--border-base) solid var(--color-surface03);
-  border-radius: 0 0 var(--radius-base) var(--radius-base);
+  border-top: var(--border-size-medium) solid var(--color-surface03);
+  border-radius: 0 0 var(--border-radius) var(--border-radius);
   color: var(--color-surface05);
   font-size: 16px;
   line-height: 24px;

package/dist/collection/snowflakes/myz/card/z-myz-card-header/styles.css

@@ -26,8 +26,8 @@ slot[name="aria-heading"]::slotted(*) {
 header.real,
 header.trial,
 header.temp {
-  border-bottom: var(--border-size-medium) solid var(--accent);
-  background-color: var(--accent-lighter);
+  border-bottom: var(--border-size-medium) solid var(--blue100);
+  background-color: var(--color-primary03);
 }
 
 .card-title {
@@ -53,7 +53,7 @@ header.temp {
 .faded.real,
 .faded.trial,
 .faded.temp {
-  border-top: var(--border-size-medium) solid var(--accent);
-  border-right: var(--border-size-medium) solid var(--accent);
-  border-left: var(--border-size-medium) solid var(--accent);
+  border-top: var(--border-size-medium) solid var(--blue100);
+  border-right: var(--border-size-medium) solid var(--blue100);
+  border-left: var(--border-size-medium) solid var(--blue100);
 }

package/dist/collection/snowflakes/myz/list/z-myz-list-item/styles.css

@@ -9,9 +9,9 @@
 :host li > span {
   display: flex;
   padding: calc(var(--space-unit) * 2) 0;
-  color: var(--text-grey-800);
-  fill: var(--text-grey-800);
-  font-family: var(--dashboard-font);
+  color: var(--color-text01);
+  fill: var(--color-icon02);
+  font-family: var(--font-family-sans);
   font-size: 16px;
   font-weight: var(--font-rg);
   letter-spacing: 0.23px;
@@ -38,13 +38,13 @@
 }
 
 :host li > span.border {
-  border-bottom: 2px solid var(--bg-grey-200);
+  border-bottom: 2px solid var(--color-surface03);
 }
 
 :host li span:hover,
 a:hover {
-  color: var(--myz-blue);
-  fill: var(--myz-blue);
+  color: var(--color-primary01);
+  fill: var(--color-primary01);
 }
 
 a,
@@ -61,6 +61,6 @@ a:active {
   padding: 0 calc(var(--space-unit) * 1.5) 0 0;
   background-repeat: no-repeat;
   background-size: contain;
-  color: var(--myz-blue);
-  fill: var(--myz-blue);
+  color: var(--color-primary01);
+  fill: var(--color-primary01);
 }

package/dist/collection/snowflakes/myz/pocket/z-messages-pocket/styles.css

@@ -91,12 +91,12 @@
       var(--color-surface03) 4px,
       var(--color-surface01) 8px
     );
-    border-radius: var(--radius-base);
+    border-radius: var(--border-radius);
   }
 
   :host ::-webkit-scrollbar-thumb {
     width: var(--space-unit);
     background-color: var(--color-primary01);
-    border-radius: var(--radius-base);
+    border-radius: var(--border-radius);
   }
 }