@opendesign-plus-test/components 0.0.1-rc.160 → 0.0.1-rc.161

package/dist/treeshaking/components/activity/OActivityMyCalendar.css

@@ -437,175 +437,175 @@
 .o-my-activity-calendar .activity-list .list-calendar-mb .o-icon:last-child {
   margin-left: 24px;
 }
-.o-my-activity-calendar .activity-list .list-calendar {
+.o-my-activity-calendar .activity-list .left-calendar {
   flex-shrink: 0;
   width: 334px;
   background-color: color-mix(in srgb, var(--o-color-control2-light) 40%, transparent);
   border-radius: var(--activity-card-radius);
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body {
     padding-left: 12px;
     padding-right: 12px;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell {
     height: 40px;
     width: 28px;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
     line-height: 24px;
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) and (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) and (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) and (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) and (max-width: 600px) {
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
     font-size: 12px;
     line-height: 18px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .activity-list .list-calendar {
+.o-my-activity-calendar .activity-list .left-calendar {
     width: 100%;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body {
     padding-bottom: 0;
 }
 }
 @media screen and (max-width: 1200px) {
-.o-my-activity-calendar .activity-list .list-calendar {
+.o-my-activity-calendar .activity-list .left-calendar {
     display: none;
 }
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar {
   min-height: 460px;
   height: calc(100% - 54px);
   border-radius: var(--activity-card-radius);
   background-color: transparent;
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar {
     min-height: fit-content;
 }
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__header {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header {
   border-bottom: 1px solid var(--o-color-control4);
   color: var(--o-color-info1);
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__header > span {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > span {
   font-weight: 500;
   font-size: 32px;
   line-height: 44px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__header > span {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > span {
     font-size: 20px;
     line-height: 28px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__header > span {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > span {
     font-size: 20px;
     line-height: 28px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__header > span {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > span {
     font-size: 18px;
     line-height: 26px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__header > span {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > span {
     font-size: 16px;
     line-height: 24px;
 }
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__header > div {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > div {
   display: flex;
   align-items: center;
   gap: var(--o-gap-5);
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__header > div .o-icon {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > div .o-icon {
   font-size: 24px;
   cursor: pointer;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__header > div .o-icon:hover {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > div .o-icon:hover {
   color: var(--o-color-primary1);
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__header > div .o-icon svg path {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__header > div .o-icon svg path {
   fill: currentColor;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table {
   display: table;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table th {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table th {
   text-align: left;
   border: none;
   --o-color-control3-light: transparent;
   padding-left: calc(17px - 0.5em);
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table tr {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table tr {
   --o-color-fill2: transparent;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table td {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table td {
   background-color: transparent !important;
   border: none;
   text-align: center;
   transition: none;
   padding: 0;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table td .el-calendar-day {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table td .el-calendar-day {
   padding: 0;
   height: fit-content;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table td div {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table td div {
   cursor: default !important;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table td:hover .el-calendar-day {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table td:hover .el-calendar-day {
   background-color: transparent;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell {
   height: 56px;
   width: 34px;
   position: relative;
   cursor: default !important;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
   font-size: 14px;
   line-height: 34px;
   border-radius: var(--activity-cell-radius);
   background-color: var(--o-color-control2-light);
   border: 1px solid transparent;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell .date-cell-text {
   cursor: not-allowed !important;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable .date-cell-text {
   cursor: pointer !important;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable:not(.is-selected) .date-cell-text:hover {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable:not(.is-selected) .date-cell-text:hover {
   background-color: var(--o-color-control3-light);
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell::after {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell::after {
   content: "";
   position: absolute;
   bottom: 5px;
@@ -615,35 +615,38 @@
   height: 8px;
   border-radius: 50%;
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.is-today .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.is-today .date-cell-text {
   color: var(--o-color-primary1);
   font-weight: bold;
   background-color: var(--o-color-control3-light);
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.is-selected .date-cell-text {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.is-selected .date-cell-text {
   background-color: var(--o-color-control3-light);
   border: 1px solid var(--o-color-primary1);
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable::after {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable::after {
   background-color: rgb(var(--o-grey-6));
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.approved::after {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.approved::after {
   background-color: var(--dot-bg);
 }
-.o-my-activity-calendar .activity-list .list-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.expired::after {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.expired::after {
   background-color: rgb(var(--o-grey-6));
 }
-.o-my-activity-calendar .activity-list .list-wrapper {
+.o-my-activity-calendar .activity-list .left-calendar .el-calendar .el-calendar__body .el-calendar-table .date-cell.clickable.all-deleted::after {
+  background-color: rgb(var(--o-grey-6));
+}
+.o-my-activity-calendar .activity-list .right-meeting {
   flex-grow: 1;
   background-color: var(--o-color-fill2);
   --content-height: calc(var(--layout-left-height, 900px) - 4 * var(--o-gap-5) - var(--header-height, 64) * 1px);
 }
 @media (max-width: 840px) {
-.o-my-activity-calendar .activity-list .list-wrapper {
+.o-my-activity-calendar .activity-list .right-meeting {
     margin-top: calc(var(--phone-padding-top) - var(--o-gap-4));
 }
 }
-.o-my-activity-calendar .activity-list .list-wrapper.is-empty {
+.o-my-activity-calendar .activity-list .right-meeting.is-empty {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -651,36 +654,36 @@
   height: var(--content-height);
 }
 @media (max-width: 840px) {
-.o-my-activity-calendar .activity-list .list-wrapper.is-empty {
+.o-my-activity-calendar .activity-list .right-meeting.is-empty {
     min-height: 200px;
 }
 }
-.o-my-activity-calendar .activity-list .list-wrapper .o-scroller .o-scrollbar-rail {
+.o-my-activity-calendar .activity-list .right-meeting .o-scroller .o-scrollbar-rail {
   right: -16px;
   height: 100%;
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container {
   height: 100%;
   max-height: var(--content-height);
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container {
     max-height: fit-content;
 }
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item {
   padding-left: 24px;
   position: relative;
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item {
     padding-left: var(--o-gap-2);
 }
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item.last-item {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item.last-item {
   flex-grow: 1;
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar {
   position: absolute;
   left: 0;
   width: 16px;
@@ -689,7 +692,7 @@
   overflow: hidden;
   --active-color: var(--o-color-primary1);
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar::before {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar::before {
   content: "";
   width: 2px;
   position: absolute;
@@ -699,27 +702,27 @@
   transform: translateX(-50%);
   background-color: var(--o-color-control4);
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar .act-bar-dot {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
   width: 16px;
   height: 26px;
   position: relative;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar .act-bar-dot {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
     height: 24px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar .act-bar-dot {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
     height: 22px;
 }
 }
 @media (max-width: 840px) {
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar .act-bar-dot {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot {
     height: 22px;
 }
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar .act-bar-dot::before, .o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar .act-bar-dot::after {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::before, .o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::after {
   content: "";
   border-radius: 50%;
   position: absolute;
@@ -727,64 +730,64 @@
   left: 50%;
   transform: translateY(-50%) translateX(-50%);
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar .act-bar-dot::before {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::before {
   width: 16px;
   height: 16px;
   background-color: transparent;
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar .act-bar-dot::after {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar .act-bar-dot::after {
   width: 8px;
   height: 8px;
   background-color: var(--active-color);
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar.is-active .act-bar-dot::before {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar.is-active .act-bar-dot::before {
   background-color: var(--active-color);
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar.is-active .act-bar-dot::after {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar.is-active .act-bar-dot::after {
   background-color: var(--o-color-fill2);
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .act-bar.is-end {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .act-bar.is-end {
   --active-color: rgb(222, 222, 227);
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .approved {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .approved {
   --active-color: var(--o-color-primary1);
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
   font-weight: 500;
   color: var(--o-color-info1);
   font-size: 18px;
   line-height: 26px;
 }
 @media (min-width: 1201px) and (max-width: 1680px) {
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
     font-size: 16px;
     line-height: 24px;
 }
 }
 @media (min-width: 841px) and (max-width: 1200px) {
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (min-width: 601px) and (max-width: 840px) {
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
     font-size: 14px;
     line-height: 22px;
 }
 }
 @media (max-width: 600px) {
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .group-title {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title {
     padding-left: var(--o-gap-5);
 }
 }
-.o-my-activity-calendar .activity-list .list-wrapper .scroller-container .act-item .group-title.is-end {
+.o-my-activity-calendar .activity-list .right-meeting .scroller-container .act-item .group-title.is-end {
   color: var(--o-color-info3);
 }
 .o-my-activity-calendar .activity-list .list-body {

package/dist/treeshaking/components/activity/OActivityMyCalendar.vue.d.ts

@@ -301,15 +301,19 @@ declare function __VLS_template(): {
             };
         }>> & Readonly<{
             onScroll?: ((event: Event) => any) | undefined;
-        }>, "size" | "duration" | "disabledX" | "disabledY" | "showType" | "autoUpdateOnScrollSize" | "scrollTo" | "scrollBy" | "getContainerEl"> & {
+        }>, "size" | "scrollTo" | "duration" | "disabledX" | "disabledY" | "showType" | "autoUpdateOnScrollSize" | "scrollBy" | "getContainerEl"> & {
             scrollTo: (options?: ScrollToOptions | undefined) => void;
             scrollBy: (options?: ScrollToOptions | undefined) => void;
             getContainerEl: () => HTMLElement | null;
         } & {} & import('vue').ComponentCustomProperties & {} & {
-            $slots: {
-                default?(_: {}): any;
-                thumb?(_: {}): any;
-                track?(_: {}): any;
+            $slots: Readonly<{
+                default?(): any;
+                thumb?(props: import('@opensig/opendesign').ScrollbarSlotProps): any;
+                track?(props: import('@opensig/opendesign').ScrollbarSlotProps): any;
+            }> & {
+                default?(): any;
+                thumb?(props: import('@opensig/opendesign').ScrollbarSlotProps): any;
+                track?(props: import('@opensig/opendesign').ScrollbarSlotProps): any;
             };
         }) | null;
     };
@@ -615,15 +619,19 @@ declare const __VLS_component: import('vue').DefineComponent<MyActivityCalendarP
         };
     }>> & Readonly<{
         onScroll?: ((event: Event) => any) | undefined;
-    }>, "size" | "duration" | "disabledX" | "disabledY" | "showType" | "autoUpdateOnScrollSize" | "scrollTo" | "scrollBy" | "getContainerEl"> & {
+    }>, "size" | "scrollTo" | "duration" | "disabledX" | "disabledY" | "showType" | "autoUpdateOnScrollSize" | "scrollBy" | "getContainerEl"> & {
         scrollTo: (options?: ScrollToOptions | undefined) => void;
         scrollBy: (options?: ScrollToOptions | undefined) => void;
         getContainerEl: () => HTMLElement | null;
     } & {} & import('vue').ComponentCustomProperties & {} & {
-        $slots: {
-            default?(_: {}): any;
-            thumb?(_: {}): any;
-            track?(_: {}): any;
+        $slots: Readonly<{
+            default?(): any;
+            thumb?(props: import('@opensig/opendesign').ScrollbarSlotProps): any;
+            track?(props: import('@opensig/opendesign').ScrollbarSlotProps): any;
+        }> & {
+            default?(): any;
+            thumb?(props: import('@opensig/opendesign').ScrollbarSlotProps): any;
+            track?(props: import('@opensig/opendesign').ScrollbarSlotProps): any;
         };
     }) | null;
 }, any>;