@kyndryl-design-system/shidoka-applications 2.45.0 → 2.46.0

package/common/css/swiper-shidoka.css

@@ -1 +1 @@
-@font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, 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");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:"";position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset, 50%);width:calc(var(--swiper-navigation-size)/44*27);height:var(--swiper-navigation-size);margin-top:calc(0px - var(--swiper-navigation-size)/2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none !important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset, 10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none !important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:"prev"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:"next"}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0, 0, 0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none !important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(0.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(0.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none !important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0px, -50%, 0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius, 10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none !important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset, 1%);bottom:var(--swiper-scrollbar-bottom, 4px);top:var(--swiper-scrollbar-top, auto);z-index:50;height:var(--swiper-scrollbar-size, 4px);width:calc(100% - 2*var(--swiper-scrollbar-sides-offset, 1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left, auto);right:var(--swiper-scrollbar-right, 4px);top:var(--swiper-scrollbar-sides-offset, 1%);z-index:50;width:var(--swiper-scrollbar-size, 4px);height:calc(100% - 2*var(--swiper-scrollbar-sides-offset, 1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));border-radius:var(--swiper-scrollbar-border-radius, 10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:"";background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}:root{--kd-current-breakpoint: sm}@media(min-width: 42rem){:root{--kd-current-breakpoint: md}}@media(min-width: 74rem){:root{--kd-current-breakpoint: lg}}@media(min-width: 82rem){:root{--kd-current-breakpoint: xl}}@media(min-width: 99rem){:root{--kd-current-breakpoint: max}}:root{--swiper-navigation-size: 56px;--swiper-fractional-height: 54px;--swiper-bullets-height: 32px;--swiper-tabs-height: 64px;--swiper-scrollbar-size: 8px;--swiper-scrollbar-drag-bg-color: var(--kd-color-background-container-subtle);--swiper-scrollbar-bg-color: var(--kd-color-background-container-soft);--swiper-scrollbar-border-radius: 8px}@media(min-width: 82rem){:root{--swiper-navigation-size: 64px}}.swiper{display:flex;flex-direction:column;gap:16px}.swiper-full-bleed{margin:0 calc(var(--kd-page-gutter)*-1)}.swiper-slide{box-sizing:border-box;transition:opacity 250ms ease-in-out}@media(min-width: 42rem){.swiper-slide{max-width:calc(100% - var(--swiper-navigation-size)*2 - 84px)}}.swiper-slide.off-screen{opacity:.5;pointer-events:none}.swiper-pagination{position:static;display:flex;justify-content:safe center;gap:16px}@media(min-width: 42rem){.swiper-pagination.tabs{order:-1;gap:24px;overflow-x:auto}}.swiper-pagination kyn-link,.swiper-pagination a{margin-left:40px;margin-right:4px}.swiper-pagination-bullet{border:1px solid var(--kd-color-background-accent-tertiary);background:none;opacity:initial;width:16px;height:16px}.swiper-pagination-bullet-active{background:var(--kd-color-background-container-subtle)}@media(min-width: 42rem){.tabs .swiper-pagination-bullet{width:auto;height:auto;border-radius:initial;border:none;padding:12px 14px;white-space:nowrap;outline-offset:-2px;border-radius:4px 4px 0px 0px;transition:border-color 150ms ease-out,background-color 150ms ease-out,color 150ms ease-out,outline-color 150ms ease-out;color:var(--kd-color-text-level-primary);border-bottom:2px solid rgba(0,0,0,0);outline:2px solid rgba(0,0,0,0)}.tabs .swiper-pagination-bullet:hover{border-color:var(--kd-color-border-button-tertiary-state-hover);background-color:var(--kd-color-background-button-tertiary-state-hover)}.tabs .swiper-pagination-bullet:active{border-color:var(--kd-color-border-button-tertiary-state-pressed);background-color:var(--kd-color-background-button-tertiary-state-pressed)}.tabs .swiper-pagination-bullet:focus-visible{outline-color:var(--kd-color-border-variants-focus)}.tabs .swiper-pagination-bullet-active{color:var(--kd-color-text-level-primary);border-color:var(--kd-color-border-button-tertiary-state-focused);background:var(--kd-color-background-button-tertiary-state-default);font-weight:500}}.tabs .swiper-pagination-bullet .tab-text{display:none}@media(min-width: 42rem){.tabs .swiper-pagination-bullet .tab-text{display:inline}}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0}.swiper-pagination-fraction{font-family:var(--kd-font-family-secondary);font-size:var(--kd-font-size-utility-2-sm);line-height:var(--kd-line-height-utility-2-sm);font-weight:var(--kd-font-weight-regular);letter-spacing:var(--kd-letter-spacing-5);justify-content:end;gap:2px;color:var(--kd-color-text-level-secondary)}@media(min-width: 42rem){.swiper-pagination-fraction{font-size:var(--kd-font-size-utility-2-md);line-height:var(--kd-line-height-utility-2-md)}}@media(min-width: 74rem){.swiper-pagination-fraction{font-size:var(--kd-font-size-utility-2-lg);line-height:var(--kd-line-height-utility-2-lg)}}@media(min-width: 82rem){.swiper-pagination-fraction{font-size:var(--kd-font-size-utility-2-xlg);line-height:var(--kd-line-height-utility-2-xlg)}}@media(min-width: 99rem){.swiper-pagination-fraction{font-size:var(--kd-font-size-utility-2-max);line-height:var(--kd-line-height-utility-2-max)}}.swiper-full-bleed .swiper-pagination-fraction{padding-right:var(--kd-page-gutter)}.pagination-with-link{font-family:var(--kd-font-family-secondary);font-size:var(--kd-font-size-utility-2-sm);line-height:var(--kd-line-height-utility-2-sm);font-weight:var(--kd-font-weight-regular);letter-spacing:var(--kd-letter-spacing-5);display:flex;align-items:baseline;gap:40px;padding-right:4px}@media(min-width: 42rem){.pagination-with-link{font-size:var(--kd-font-size-utility-2-md);line-height:var(--kd-line-height-utility-2-md)}}@media(min-width: 74rem){.pagination-with-link{font-size:var(--kd-font-size-utility-2-lg);line-height:var(--kd-line-height-utility-2-lg)}}@media(min-width: 82rem){.pagination-with-link{font-size:var(--kd-font-size-utility-2-xlg);line-height:var(--kd-line-height-utility-2-xlg)}}@media(min-width: 99rem){.pagination-with-link{font-size:var(--kd-font-size-utility-2-max);line-height:var(--kd-line-height-utility-2-max)}}.swiper-button-prev,.swiper-button-next{box-shadow:var(--kd-elevation-level-2);display:none;border-radius:50%;width:var(--swiper-navigation-size);height:var(--swiper-navigation-size);margin-top:calc(0px - var(--swiper-navigation-size)/2 - var(--swiper-fractional-height)/2);color:var(--kd-color-icon-primary);background:var(--kd-color-icon-inverse);outline:2px solid rgba(0,0,0,0);transition:outline-color 150ms ease-out,color 150ms ease-out,box-shadow 150ms ease-out}.swiper-pagination-bullets~.swiper-button-prev,.swiper-pagination-bullets~.swiper-button-next{margin-top:calc(0px - var(--swiper-navigation-size)/2 - var(--swiper-bullets-height)/2)}.swiper-pagination-bullets.tabs~.swiper-button-prev,.swiper-pagination-bullets.tabs~.swiper-button-next{margin-top:calc(0px - var(--swiper-navigation-size)/2 + var(--swiper-tabs-height)/2)}@media(min-width: 42rem){.swiper-button-prev,.swiper-button-next{display:flex}}.swiper-button-prev:focus-visible,.swiper-button-next:focus-visible{outline-color:var(--kd-color-border-ui-hover)}.swiper-button-prev svg,.swiper-button-next svg{width:initial;height:initial}.swiper-button-prev:hover,.swiper-button-next:hover{box-shadow:var(--kd-elevation-level-3);color:var(--kd-color-icon-secondary)}.swiper-button-prev:after,.swiper-button-next:after{display:none}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{color:var(--kd-color-icon-disabled)}.swiper-button-next svg{transform:rotate(180deg)}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:static;width:100%}.swiper-full-bleed .swiper-horizontal>.swiper-scrollbar,.swiper-full-bleed .swiper-scrollbar.swiper-scrollbar-horizontal{width:calc(100% - var(--kd-page-gutter)*2);margin-left:var(--kd-page-gutter)}
+@font-face{font-family:swiper-icons;src:url("data:application/font-woff;charset=utf-8;base64, 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");font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide{transform-style:preserve-3d}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-css-mode.swiper-horizontal>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-css-mode.swiper-vertical>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-css-mode.swiper-free-mode>.swiper-wrapper{scroll-snap-type:none}.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}.swiper-css-mode.swiper-centered>.swiper-wrapper::before{content:"";flex-shrink:0;order:9999}.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:"";position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset, 50%);width:calc(var(--swiper-navigation-size)/44*27);height:var(--swiper-navigation-size);margin-top:calc(0px - var(--swiper-navigation-size)/2);z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color, var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none !important}.swiper-button-next svg,.swiper-button-prev svg{width:100%;height:100%;object-fit:contain;transform-origin:center}.swiper-rtl .swiper-button-next svg,.swiper-rtl .swiper-button-prev svg{transform:rotate(180deg)}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset, 10px);right:auto}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-lock{display:none}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none !important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:"prev"}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset, 10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:"next"}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0, 0, 0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none !important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom, 8px);top:var(--swiper-pagination-top, auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(0.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(0.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(0.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(0.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));height:var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius, 50%);background:var(--swiper-pagination-bullet-inactive-color, #000);opacity:var(--swiper-pagination-bullet-inactive-opacity, 0.2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none !important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color, var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right, 8px);left:var(--swiper-pagination-left, auto);top:50%;transform:translate3d(0px, -50%, 0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap, 6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap, 4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color, inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color, var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size, 4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size, 4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius, 10px);position:relative;touch-action:none;background:var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none !important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset, 1%);bottom:var(--swiper-scrollbar-bottom, 4px);top:var(--swiper-scrollbar-top, auto);z-index:50;height:var(--swiper-scrollbar-size, 4px);width:calc(100% - 2*var(--swiper-scrollbar-sides-offset, 1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left, auto);right:var(--swiper-scrollbar-right, 4px);top:var(--swiper-scrollbar-sides-offset, 1%);z-index:50;width:var(--swiper-scrollbar-size, 4px);height:calc(100% - 2*var(--swiper-scrollbar-sides-offset, 1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));border-radius:var(--swiper-scrollbar-border-radius, 10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active{pointer-events:auto}.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:"";background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-cube.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-flip.swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}:root{--kd-current-breakpoint: sm}@media(min-width: 42rem){:root{--kd-current-breakpoint: md}}@media(min-width: 74rem){:root{--kd-current-breakpoint: lg}}@media(min-width: 82rem){:root{--kd-current-breakpoint: xl}}@media(min-width: 99rem){:root{--kd-current-breakpoint: max}}:root{--swiper-navigation-size: 56px;--swiper-fractional-height: 54px;--swiper-bullets-height: 32px;--swiper-tabs-height: 64px;--swiper-scrollbar-size: 8px;--swiper-scrollbar-drag-bg-color: var(--kd-color-background-container-subtle);--swiper-scrollbar-bg-color: var(--kd-color-background-container-soft);--swiper-scrollbar-border-radius: 8px}@media(min-width: 82rem){:root{--swiper-navigation-size: 64px}}.swiper{display:flex;flex-direction:column;gap:16px}.swiper-full-bleed{margin:0 calc(var(--kd-page-gutter)*-1)}.swiper-slide{box-sizing:border-box;transition:opacity 250ms ease-in-out}@media(min-width: 42rem){.swiper-slide{max-width:calc(100% - var(--swiper-navigation-size)*2 - 84px)}}.swiper-slide.off-screen{opacity:.5;pointer-events:none}.swiper-pagination{position:static;display:flex;justify-content:safe center;gap:16px}@media(min-width: 42rem){.swiper-pagination.tabs{order:-1;gap:24px;overflow-x:auto}}.swiper-pagination kyn-link,.swiper-pagination a{margin-left:40px;margin-right:4px}.swiper-pagination-bullet{border:1px solid var(--kd-color-background-accent-tertiary);background:none;opacity:initial;width:16px;height:16px}.swiper-pagination-bullet-active{background:var(--kd-color-background-container-subtle)}@media(min-width: 42rem){.tabs .swiper-pagination-bullet{width:auto;height:auto;border-radius:initial;border:none;padding:12px 14px;white-space:nowrap;outline-offset:-2px;border-radius:4px 4px 0px 0px;transition:border-color 150ms ease-out,background-color 150ms ease-out,color 150ms ease-out,outline-color 150ms ease-out;color:var(--kd-color-text-level-primary);border-bottom:1px solid rgba(0,0,0,0);outline:2px solid rgba(0,0,0,0)}.tabs .swiper-pagination-bullet:hover{background:var(--kd-color-background-button-secondary-state-hover);border-color:var(--kd-color-border-button-primary-state-hover);color:var(--kd-color-text-level-primary)}.tabs .swiper-pagination-bullet:active{background:var(--kd-color-background-button-primary-state-pressed);border-color:var(--kd-color-border-button-primary-state-hover);color:var(--kd-color-text-level-light)}.tabs .swiper-pagination-bullet:focus-visible{outline-color:var(--kd-color-border-variants-focus)}.tabs .swiper-pagination-bullet-active{border-color:var(--kd-color-border-button-primary-state-default);color:var(--kd-color-text-link-level-default);background:none;border-bottom-width:2px;font-weight:500}}.tabs .swiper-pagination-bullet .tab-text{display:none}@media(min-width: 42rem){.tabs .swiper-pagination-bullet .tab-text{display:inline}}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0}.swiper-pagination-fraction{font-family:var(--kd-font-family-secondary);font-size:var(--kd-font-size-utility-2-sm);line-height:var(--kd-line-height-utility-2-sm);font-weight:var(--kd-font-weight-regular);letter-spacing:var(--kd-letter-spacing-5);justify-content:end;gap:2px;color:var(--kd-color-text-level-secondary)}@media(min-width: 42rem){.swiper-pagination-fraction{font-size:var(--kd-font-size-utility-2-md);line-height:var(--kd-line-height-utility-2-md)}}@media(min-width: 74rem){.swiper-pagination-fraction{font-size:var(--kd-font-size-utility-2-lg);line-height:var(--kd-line-height-utility-2-lg)}}@media(min-width: 82rem){.swiper-pagination-fraction{font-size:var(--kd-font-size-utility-2-xlg);line-height:var(--kd-line-height-utility-2-xlg)}}@media(min-width: 99rem){.swiper-pagination-fraction{font-size:var(--kd-font-size-utility-2-max);line-height:var(--kd-line-height-utility-2-max)}}.swiper-full-bleed .swiper-pagination-fraction{padding-right:var(--kd-page-gutter)}.pagination-with-link{font-family:var(--kd-font-family-secondary);font-size:var(--kd-font-size-utility-2-sm);line-height:var(--kd-line-height-utility-2-sm);font-weight:var(--kd-font-weight-regular);letter-spacing:var(--kd-letter-spacing-5);display:flex;align-items:baseline;gap:40px;padding-right:4px}@media(min-width: 42rem){.pagination-with-link{font-size:var(--kd-font-size-utility-2-md);line-height:var(--kd-line-height-utility-2-md)}}@media(min-width: 74rem){.pagination-with-link{font-size:var(--kd-font-size-utility-2-lg);line-height:var(--kd-line-height-utility-2-lg)}}@media(min-width: 82rem){.pagination-with-link{font-size:var(--kd-font-size-utility-2-xlg);line-height:var(--kd-line-height-utility-2-xlg)}}@media(min-width: 99rem){.pagination-with-link{font-size:var(--kd-font-size-utility-2-max);line-height:var(--kd-line-height-utility-2-max)}}.swiper-button-prev,.swiper-button-next{box-shadow:var(--kd-elevation-level-2);display:none;border-radius:50%;width:var(--swiper-navigation-size);height:var(--swiper-navigation-size);margin-top:calc(0px - var(--swiper-navigation-size)/2 - var(--swiper-fractional-height)/2);color:var(--kd-color-icon-primary);background:var(--kd-color-icon-inverse);outline:2px solid rgba(0,0,0,0);transition:outline-color 150ms ease-out,color 150ms ease-out,box-shadow 150ms ease-out}.swiper-pagination-bullets~.swiper-button-prev,.swiper-pagination-bullets~.swiper-button-next{margin-top:calc(0px - var(--swiper-navigation-size)/2 - var(--swiper-bullets-height)/2)}.swiper-pagination-bullets.tabs~.swiper-button-prev,.swiper-pagination-bullets.tabs~.swiper-button-next{margin-top:calc(0px - var(--swiper-navigation-size)/2 + var(--swiper-tabs-height)/2)}@media(min-width: 42rem){.swiper-button-prev,.swiper-button-next{display:flex}}.swiper-button-prev:focus-visible,.swiper-button-next:focus-visible{outline-color:var(--kd-color-border-ui-hover)}.swiper-button-prev svg,.swiper-button-next svg{width:initial;height:initial}.swiper-button-prev:hover,.swiper-button-next:hover{box-shadow:var(--kd-elevation-level-3);color:var(--kd-color-icon-secondary)}.swiper-button-prev:after,.swiper-button-next:after{display:none}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{color:var(--kd-color-icon-disabled)}.swiper-button-next svg{transform:rotate(180deg)}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:static;width:100%}.swiper-full-bleed .swiper-horizontal>.swiper-scrollbar,.swiper-full-bleed .swiper-scrollbar.swiper-scrollbar-horizontal{width:calc(100% - var(--kd-page-gutter)*2);margin-left:var(--kd-page-gutter)}

package/common/scss/utility/swiper-shidoka.scss

@@ -86,21 +86,19 @@
       transition: border-color 150ms ease-out, background-color 150ms ease-out,
         color 150ms ease-out, outline-color 150ms ease-out;
       color: var(--kd-color-text-level-primary);
-      border-bottom: 2px solid transparent;
+      border-bottom: 1px solid transparent;
       outline: 2px solid transparent;
 
       &:hover {
-        border-color: var(--kd-color-border-button-tertiary-state-hover);
-        background-color: var(
-          --kd-color-background-button-tertiary-state-hover
-        );
+        background: var(--kd-color-background-button-secondary-state-hover);
+        border-color: var(--kd-color-border-button-primary-state-hover);
+        color: var(--kd-color-text-level-primary);
       }
 
       &:active {
-        border-color: var(--kd-color-border-button-tertiary-state-pressed);
-        background-color: var(
-          --kd-color-background-button-tertiary-state-pressed
-        );
+        background: var(--kd-color-background-button-primary-state-pressed);
+        border-color: var(--kd-color-border-button-primary-state-hover);
+        color: var(--kd-color-text-level-light);
       }
 
       &:focus-visible {
@@ -108,9 +106,10 @@
       }
 
       &-active {
-        color: var(--kd-color-text-level-primary);
-        border-color: var(--kd-color-border-button-tertiary-state-focused);
-        background: var(--kd-color-background-button-tertiary-state-default);
+        border-color: var(--kd-color-border-button-primary-state-default);
+        color: var(--kd-color-text-link-level-default);
+        background: none;
+        border-bottom-width: 2px;
         font-weight: 500;
       }
     }

package/components/reusable/button/button.d.ts

@@ -54,8 +54,10 @@ export declare class Button extends LitElement {
     name: string;
     /** Determines if the button is Floatable */
     isFloating: boolean;
-    /** Show button after scrolling to 50% of the page*/
+    /** Show button after scrolling to 50% of the page */
     showOnScroll: boolean;
+    /** Button selected state. */
+    selected: boolean;
     /** Determines showButton state .
      * @internal
      */

package/components/reusable/button/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/button/button.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAavC,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,oBAAoB,EAGrB,MAAM,QAAQ,CAAC;AAIhB;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,QAAgB;IAEtC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,mDAAmD;IAEnD,WAAW,SAAM;IAEjB,2CAA2C;IAE3C,IAAI,EAAE,YAAY,CAAuB;IAEzC,0DAA0D;IAE1D,IAAI,EAAE,YAAY,CAAwB;IAE1C,4DAA4D;IAE5D,IAAI,SAAM;IAEV,mDAAmD;IAEnD,MAAM,SAAW;IAEjB,wCAAwC;IAExC,IAAI,EAAE,YAAY,CAAuB;IAEzC,sEAAsE;IAEtE,YAAY,EAAE,oBAAoB,CAA+B;IAEjE;;OAEG;IAEH,QAAQ,UAAS;IAEjB,4CAA4C;IAE5C,QAAQ,UAAS;IAEjB,qBAAqB;IAErB,KAAK,SAAM;IAEX,mBAAmB;IAEnB,IAAI,SAAM;IAEV,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,oDAAoD;IAEpD,YAAY,UAAS;IAErB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,UAAU,UAAS;IAEnB,0BAA0B;IAE1B,UAAU,EAAG,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEzB;;OAEG;IAEH,QAAQ,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEtB;;OAEG;IAEH,MAAM,EAAG,GAAG,CAAC;IAEJ,MAAM;IAiEf,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,iBAAiB;IAKzB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAGpB;IAEH,gBAAgB;IAChB,OAAO,CAAC,aAAa;IASrB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAIpB;IAEH,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAQZ,iBAAiB;IAQjB,oBAAoB;CAO9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/button/button.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAavC,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,oBAAoB,EAGrB,MAAM,QAAQ,CAAC;AAIhB;;;;;;GAMG;AACH,qBACa,MAAO,SAAQ,UAAU;IACpC,OAAgB,MAAM,QAAgB;IAEtC,cAAc;IACd,OAAgB,iBAAiB;;;;MAG/B;IAEF;;;OAGG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;;OAGG;IAEH,SAAS,mBAA0B;IAEnC,mDAAmD;IAEnD,WAAW,SAAM;IAEjB,2CAA2C;IAE3C,IAAI,EAAE,YAAY,CAAuB;IAEzC,0DAA0D;IAE1D,IAAI,EAAE,YAAY,CAAwB;IAE1C,4DAA4D;IAE5D,IAAI,SAAM;IAEV,mDAAmD;IAEnD,MAAM,SAAW;IAEjB,wCAAwC;IAExC,IAAI,EAAE,YAAY,CAAuB;IAEzC,sEAAsE;IAEtE,YAAY,EAAE,oBAAoB,CAA+B;IAEjE;;OAEG;IAEH,QAAQ,UAAS;IAEjB,4CAA4C;IAE5C,QAAQ,UAAS;IAEjB,qBAAqB;IAErB,KAAK,SAAM;IAEX,mBAAmB;IAEnB,IAAI,SAAM;IAEV,4CAA4C;IAE5C,UAAU,UAAS;IAEnB,qDAAqD;IAErD,YAAY,UAAS;IAErB,6BAA6B;IAE7B,QAAQ,UAAS;IAEjB;;OAEG;IAEH,WAAW,UAAS;IAEpB;;OAEG;IAEH,UAAU,UAAS;IAEnB,0BAA0B;IAE1B,UAAU,EAAG,GAAG,CAAC;IAEjB;;OAEG;IAEH,WAAW,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEzB;;OAEG;IAEH,QAAQ,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC;IAEtB;;OAEG;IAEH,MAAM,EAAG,GAAG,CAAC;IAEJ,MAAM;IAkEf,OAAO,CAAC,WAAW;IAenB,OAAO,CAAC,aAAa;IAqBrB,OAAO,CAAC,iBAAiB;IAKzB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAGpB;IAEH,gBAAgB;IAChB,OAAO,CAAC,aAAa;IASrB,gBAAgB;IAChB,OAAO,CAAC,eAAe,CAIpB;IAEH,gBAAgB;IAChB,OAAO,CAAC,aAAa;IAQZ,iBAAiB;IAQjB,oBAAoB;CAO9B;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAC;KACtB;CACF"}

package/components/reusable/button/button.js

@@ -1,4 +1,4 @@
-import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l as n,i,b as d,e as a}from"../../../vendor/lit-461e78e6.js";import{i as l,s,x as c}from"../../../vendor/lit-element-c6c02f24.js";import{e as b}from"../../../vendor/lit-html-f7a86fe5.js";import{debounce as u}from"../../../common/helpers/helpers.js";import{BUTTON_TYPES as k,BUTTON_KINDS as v,BUTTON_SIZES as h,BUTTON_ICON_POSITION as p,BUTTON_KINDS_SOLID as y,BUTTON_KINDS_OUTLINE as g}from"./defs.js";var m=l`/**
+import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l as d,i as n,b as i,e as a}from"../../../vendor/lit-461e78e6.js";import{i as l,s as c,x as s}from"../../../vendor/lit-element-c6c02f24.js";import{e as b}from"../../../vendor/lit-html-f7a86fe5.js";import{debounce as k}from"../../../common/helpers/helpers.js";import{BUTTON_TYPES as u,BUTTON_KINDS as v,BUTTON_SIZES as h,BUTTON_ICON_POSITION as p,BUTTON_KINDS_SOLID as y,BUTTON_KINDS_OUTLINE as g}from"./defs.js";var m=l`/**
  * Copyright Kyndryl, Inc. 2023
  */
 *,
@@ -174,6 +174,10 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
 .kd-btn--primary:active:before {
   background-color: var(--kd-color-background-button-primary-state-pressed);
 }
+.kd-btn--primary.selected {
+  background-color: var(--kd-color-background-button-primary-state-selected);
+  color: var(--kd-color-text-button-dark-primary);
+}
 .kd-btn--primary-ai {
   background-color: var(--kd-color-background-button-primary-ai-default);
   color: var(--kd-color-text-button-dark-primary);
@@ -187,6 +191,10 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
 .kd-btn--primary-ai:active:before {
   background-color: var(--kd-color-background-button-primary-ai-pressed);
 }
+.kd-btn--primary-ai.selected {
+  background-color: var(--kd-color-background-button-primary-ai-selected);
+  color: var(--kd-color-text-button-dark-primary);
+}
 .kd-btn--primary-destructive {
   background-color: var(--kd-color-background-button-primary-destructive-default);
   color: var(--kd-color-text-button-dark-destructive);
@@ -200,9 +208,13 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
 .kd-btn--primary-destructive:active:before {
   background-color: var(--kd-color-background-button-primary-destructive-pressed);
 }
+.kd-btn--primary-destructive.selected {
+  background-color: var(--kd-color-background-button-primary-destructive-selected);
+  color: var(--kd-color-text-button-dark-destructive);
+}
 .kd-btn--secondary {
   background-color: var(--kd-color-background-button-secondary-state-default);
-  color: var(--kd-color-text-button-dark-primary);
+  color: var(--kd-color-text-button-light-primary);
 }
 .kd-btn--secondary:before {
   background-color: var(--kd-color-background-button-secondary-state-hover);
@@ -210,9 +222,16 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
 .kd-btn--secondary:focus-visible {
   outline-color: var(--kd-color-border-button-secondary-state-focused);
 }
+.kd-btn--secondary:active {
+  color: var(--kd-color-text-button-dark-secondary);
+}
 .kd-btn--secondary:active:before {
   background-color: var(--kd-color-background-button-secondary-state-pressed);
 }
+.kd-btn--secondary.selected {
+  background-color: var(--kd-color-background-button-secondary-state-selected);
+  color: var(--kd-color-text-button-dark-secondary);
+}
 .kd-btn--secondary-ai {
   background-color: var(--kd-color-background-button-secondary-ai-default);
   color: var(--kd-color-text-button-ai-default);
@@ -232,6 +251,10 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
 .kd-btn--secondary-ai:active:before {
   background-color: var(--kd-color-background-button-secondary-ai-pressed);
 }
+.kd-btn--secondary-ai.selected {
+  background-color: var(--kd-color-background-button-secondary-ai-selected);
+  color: var(--kd-color-text-level-light);
+}
 .kd-btn--secondary-destructive {
   background-color: var(--kd-color-background-button-secondary-destructive-default);
   color: var(--kd-color-text-level-primary);
@@ -245,9 +268,13 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
 .kd-btn--secondary-destructive:active:before {
   background-color: var(--kd-color-background-button-secondary-destructive-pressed);
 }
+.kd-btn--secondary-destructive.selected {
+  background-color: var(--kd-color-background-button-secondary-destructive-selected);
+  color: var(--kd-color-text-level-primary);
+}
 .kd-btn--tertiary {
   background-color: var(--kd-color-background-button-tertiary-state-default);
-  color: var(--kd-color-text-button-light-primary);
+  color: var(--kd-color-text-button-dark-tertiary);
 }
 .kd-btn--tertiary:before {
   background-color: var(--kd-color-background-button-tertiary-state-hover);
@@ -261,6 +288,10 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
 .kd-btn--tertiary:active:before {
   background-color: var(--kd-color-background-button-tertiary-state-pressed);
 }
+.kd-btn--tertiary.selected {
+  background-color: var(--kd-color-background-button-tertiary-state-selected);
+  color: var(--kd-color-text-button-dark-tertiary);
+}
 .kd-btn--content {
   background-color: var(--kd-color-background-button-web-default);
   color: var(--kd-color-text-button-dark-primary);
@@ -269,11 +300,15 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
   background-color: var(--kd-color-background-button-web-hover);
 }
 .kd-btn--content:focus-visible {
-  outline-color: var(--kd-color-border-variants-focus);
+  outline-color: var(--kd-color-border-button-web-focused);
 }
 .kd-btn--content:active:before {
   background-color: var(--kd-color-background-button-web-pressed);
 }
+.kd-btn--content.selected {
+  background-color: var(--kd-color-background-button-web-selected);
+  color: var(--kd-color-text-level-light);
+}
 .kd-btn--outline-styles {
   border: 1px solid transparent;
 }
@@ -294,7 +329,7 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
   border-color: var(--kd-color-border-button-primary-state-default);
 }
 .kd-btn--outline:hover {
-  background-color: var(--kd-color-background-button-ghost-state-hover);
+  background-color: var(--kd-color-background-button-secondary-state-default);
   border-color: var(--kd-color-border-button-primary-state-hover);
 }
 .kd-btn--outline:focus-visible {
@@ -302,10 +337,14 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
   outline-color: var(--kd-color-border-button-primary-state-focused);
 }
 .kd-btn--outline:active {
-  background-color: var(--kd-color-background-button-ghost-state-pressed);
+  background-color: var(--kd-color-background-button-secondary-state-pressed);
   border-color: var(--kd-color-border-button-primary-state-pressed);
   color: var(--kd-color-text-button-dark-primary);
 }
+.kd-btn--outline.selected {
+  background-color: var(--kd-color-background-secondary-state-selected);
+  color: var(--kd-color-text-level-light);
+}
 .kd-btn--outline-ai {
   color: var(--kd-color-text-button-ai-default);
   border-color: var(--kd-color-border-button-ai-state-default);
@@ -324,6 +363,10 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
   border-color: var(--kd-color-border-button-ai-state-pressed);
   color: var(--kd-color-text-level-light);
 }
+.kd-btn--outline-ai.selected {
+  background-color: var(--kd-color-background-secondary-ai-selected);
+  color: var(--kd-color-text-button-dark-primary);
+}
 .kd-btn--outline-destructive {
   color: var(--kd-color-text-button-light-destructive);
   border-color: var(--kd-color-border-button-primary-destructive-default);
@@ -342,8 +385,12 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
   border-color: var(--kd-color-border-button-primary-destructive-pressed);
   color: var(--kd-color-text-level-primary);
 }
+.kd-btn--outline-destructive.selected {
+  background-color: var(--kd-color-background-button-primary-destructive-selected);
+  color: var(--kd-color-text-button-dark-destructive);
+}
 .kd-btn--ghost {
-  color: var(--kd-color-text-button-light-primary);
+  color: var(--kd-color-text-link-level-default);
 }
 .kd-btn--ghost:hover {
   background-color: var(--kd-color-background-button-ghost-state-hover);
@@ -361,6 +408,33 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
 .kd-btn--ghost[disabled]:hover {
   background-color: transparent;
 }
+.kd-btn--ghost.selected {
+  background-color: var(--kd-color-background-secondary-state-selected);
+  color: var(--kd-color-text-level-light);
+}
+.kd-btn--ghost-destructive {
+  color: var(--kd-color-text-button-light-destructive);
+}
+.kd-btn--ghost-destructive:hover {
+  background-color: var(--kd-color-background-button-secondary-destructive-hover);
+}
+.kd-btn--ghost-destructive:focus-visible {
+  outline-color: var(--kd-color-border-button-primary-destructive-focused);
+}
+.kd-btn--ghost-destructive:active {
+  background-color: var(--kd-color-background-button-secondary-destructive-pressed);
+  color: var(--kd-color-text-button-light-destructive);
+}
+.kd-btn--ghost-destructive[disabled] {
+  color: var(--kd-color-text-link-level-disabled);
+}
+.kd-btn--ghost-destructive[disabled]:hover {
+  background-color: transparent;
+}
+.kd-btn--ghost-destructive.selected {
+  background-color: var(--kd-color-background-primary-destructive-selected);
+  color: var(--kd-color-text-button-dark-destructive);
+}
 
 .kd-btn--icon-left span {
   flex-direction: row-reverse;
@@ -373,16 +447,16 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
 }
 .kd-btn--icon-align slot[name=icon]::slotted(*) {
   display: flex;
-}`;let f=class extends s{constructor(){super(...arguments),this.internals=this.attachInternals(),this.description="",this.type=k.BUTTON,this.kind=v.PRIMARY,this.href="",this.target="_self",this.size=h.MEDIUM,this.iconPosition=p.CENTER,this.iconOnly=!1,this.disabled=!1,this.value="",this.name="",this.isFloating=!1,this.showOnScroll=!1,this._showButton=!1,this._reSizeBtn=!1,this._debounceResize=u((()=>{this._reSizeButton(),this.iconOnly=this._testIconOnly()})),this._debounceScroll=u((()=>{this.showOnScroll&&this._handleScroll()}))}render(){var o,t;const r={"kd-btn":!0,[`kd-btn--${this.kind}`]:!0,"kd-btn--solid-styles":y.includes(this.kind),"kd-btn--outline-styles":g.includes(this.kind),"kd-btn--large":this.size===h.LARGE,"kd-btn--small":this.size===h.SMALL,"kd-btn--medium":this._reSizeBtn||this.size===h.MEDIUM,"kd-btn--icon-align":!!this.iconPosition,[`kd-btn--icon-${this.iconPosition}`]:!!this.iconPosition&&!this.iconOnly,"kd-btn--icon-center":(null===(o=this._iconEls)||void 0===o?void 0:o.length)&&this.iconOnly,"kd-btn--float":this.isFloating,"kd-btn--hidden":this.showOnScroll&&!this._showButton,"icon-only":(null===(t=this._iconEls)||void 0===t?void 0:t.length)&&this.iconOnly};return c`
-      ${this.href&&""!==this.href?c`
+}`;let f=class extends c{constructor(){super(...arguments),this.internals=this.attachInternals(),this.description="",this.type=u.BUTTON,this.kind=v.PRIMARY,this.href="",this.target="_self",this.size=h.MEDIUM,this.iconPosition=p.CENTER,this.iconOnly=!1,this.disabled=!1,this.value="",this.name="",this.isFloating=!1,this.showOnScroll=!1,this.selected=!1,this._showButton=!1,this._reSizeBtn=!1,this._debounceResize=k((()=>{this._reSizeButton(),this.iconOnly=this._testIconOnly()})),this._debounceScroll=k((()=>{this.showOnScroll&&this._handleScroll()}))}render(){var o,t;const r={"kd-btn":!0,[`kd-btn--${this.kind}`]:!0,"kd-btn--solid-styles":y.includes(this.kind),"kd-btn--outline-styles":g.includes(this.kind),"kd-btn--large":this.size===h.LARGE,"kd-btn--small":this.size===h.SMALL,"kd-btn--medium":this._reSizeBtn||this.size===h.MEDIUM,"kd-btn--icon-align":!!this.iconPosition,[`kd-btn--icon-${this.iconPosition}`]:!!this.iconPosition&&!this.iconOnly,"kd-btn--icon-center":(null===(o=this._iconEls)||void 0===o?void 0:o.length)&&this.iconOnly,"kd-btn--float":this.isFloating,"kd-btn--hidden":this.showOnScroll&&!this._showButton,"icon-only":(null===(t=this._iconEls)||void 0===t?void 0:t.length)&&this.iconOnly,selected:this.selected};return s`
+      ${this.href&&""!==this.href?s`
             <a
               part="button"
               class=${b(r)}
               href=${this.href}
               target=${this.target}
               ?disabled=${this.disabled}
-              aria-label=${d(this.description)}
-              title=${d(this.description)}
+              aria-label=${i(this.description)}
+              title=${i(this.description)}
               @click=${o=>this.handleClick(o)}
             >
               <span>
@@ -393,17 +467,17 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
                 ></slot>
               </span>
             </a>
-          `:c`
+          `:s`
             <button
               part="button"
               class=${b(r)}
               type=${this.type}
               ?disabled=${this.disabled}
-              aria-label=${d(this.description)}
-              title=${d(this.description)}
-              name=${d(this.name)}
-              value=${d(this.value)}
-              formmethod=${d(this.formmethod)}
+              aria-label=${i(this.description)}
+              title=${i(this.description)}
+              name=${i(this.name)}
+              value=${i(this.value)}
+              formmethod=${i(this.formmethod)}
               @click=${o=>this.handleClick(o)}
             >
               <span>
@@ -415,5 +489,5 @@ import{_ as o}from"../../../vendor/tslib-53a81efe.js";import{t,n as r,a as e,l a
               </span>
             </button>
           `}
-    `}handleClick(o){this.internals.form&&("submit"===this.type?this.internals.form.requestSubmit():"reset"===this.type&&this.internals.form.reset());const t=new CustomEvent("on-click",{detail:{origEvent:o}});this.dispatchEvent(t)}_testIconOnly(){var o,t;if(!(null===(o=this._iconEls)||void 0===o?void 0:o.length))return!1;return!(null===(t=this._slottedEls)||void 0===t?void 0:t.filter((o=>""!==o.textContent.trim()))).filter((o=>{if(o.tagName){const t=getComputedStyle(o);return"none"!==t.display&&"hidden"!==t.visibility}return!0})).length}_handleSlotChange(){this.iconOnly=this._testIconOnly(),this.requestUpdate()}_reSizeButton(){(this.isFloating||this.showOnScroll)&&window.innerWidth<=672?this._reSizeBtn=!0:this._reSizeBtn=!1}_handleScroll(){const o=window.scrollY,t=window.innerHeight,r=document.documentElement.scrollHeight;this._showButton=o>(r-t)/2}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._debounceResize),this.showOnScroll&&window.addEventListener("scroll",this._debounceScroll)}disconnectedCallback(){window.removeEventListener("resize",this._debounceResize),this.showOnScroll&&window.removeEventListener("scroll",this._debounceScroll),super.disconnectedCallback()}};f.styles=[m],f.shadowRootOptions={...s.shadowRootOptions,delegatesFocus:!0},f.formAssociated=!0,o([t()],f.prototype,"internals",void 0),o([r({type:String})],f.prototype,"description",void 0),o([r({type:String})],f.prototype,"type",void 0),o([r({type:String})],f.prototype,"kind",void 0),o([r({type:String})],f.prototype,"href",void 0),o([r({type:String})],f.prototype,"target",void 0),o([r({type:String})],f.prototype,"size",void 0),o([r({type:String})],f.prototype,"iconPosition",void 0),o([t()],f.prototype,"iconOnly",void 0),o([r({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),o([r({type:String})],f.prototype,"value",void 0),o([r({type:String})],f.prototype,"name",void 0),o([r({type:Boolean})],f.prototype,"isFloating",void 0),o([r({type:Boolean})],f.prototype,"showOnScroll",void 0),o([t()],f.prototype,"_showButton",void 0),o([t()],f.prototype,"_reSizeBtn",void 0),o([r({type:String})],f.prototype,"formmethod",void 0),o([e()],f.prototype,"_slottedEls",void 0),o([n({slot:"icon"})],f.prototype,"_iconEls",void 0),o([i(".button")],f.prototype,"_btnEl",void 0),f=o([a("kyn-button")],f);export{f as Button};
+    `}handleClick(o){this.internals.form&&("submit"===this.type?this.internals.form.requestSubmit():"reset"===this.type&&this.internals.form.reset());const t=new CustomEvent("on-click",{detail:{origEvent:o}});this.dispatchEvent(t)}_testIconOnly(){var o,t;if(!(null===(o=this._iconEls)||void 0===o?void 0:o.length))return!1;return!(null===(t=this._slottedEls)||void 0===t?void 0:t.filter((o=>""!==o.textContent.trim()))).filter((o=>{if(o.tagName){const t=getComputedStyle(o);return"none"!==t.display&&"hidden"!==t.visibility}return!0})).length}_handleSlotChange(){this.iconOnly=this._testIconOnly(),this.requestUpdate()}_reSizeButton(){(this.isFloating||this.showOnScroll)&&window.innerWidth<=672?this._reSizeBtn=!0:this._reSizeBtn=!1}_handleScroll(){const o=window.scrollY,t=window.innerHeight,r=document.documentElement.scrollHeight;this._showButton=o>(r-t)/2}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._debounceResize),this.showOnScroll&&window.addEventListener("scroll",this._debounceScroll)}disconnectedCallback(){window.removeEventListener("resize",this._debounceResize),this.showOnScroll&&window.removeEventListener("scroll",this._debounceScroll),super.disconnectedCallback()}};f.styles=[m],f.shadowRootOptions={...c.shadowRootOptions,delegatesFocus:!0},f.formAssociated=!0,o([t()],f.prototype,"internals",void 0),o([r({type:String})],f.prototype,"description",void 0),o([r({type:String})],f.prototype,"type",void 0),o([r({type:String})],f.prototype,"kind",void 0),o([r({type:String})],f.prototype,"href",void 0),o([r({type:String})],f.prototype,"target",void 0),o([r({type:String})],f.prototype,"size",void 0),o([r({type:String})],f.prototype,"iconPosition",void 0),o([t()],f.prototype,"iconOnly",void 0),o([r({type:Boolean,reflect:!0})],f.prototype,"disabled",void 0),o([r({type:String})],f.prototype,"value",void 0),o([r({type:String})],f.prototype,"name",void 0),o([r({type:Boolean})],f.prototype,"isFloating",void 0),o([r({type:Boolean})],f.prototype,"showOnScroll",void 0),o([r({type:Boolean})],f.prototype,"selected",void 0),o([t()],f.prototype,"_showButton",void 0),o([t()],f.prototype,"_reSizeBtn",void 0),o([r({type:String})],f.prototype,"formmethod",void 0),o([e()],f.prototype,"_slottedEls",void 0),o([d({slot:"icon"})],f.prototype,"_iconEls",void 0),o([n(".button")],f.prototype,"_btnEl",void 0),f=o([a("kyn-button")],f);export{f as Button};
 //# sourceMappingURL=button.js.map

package/components/reusable/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","sources":["../../../../src/components/reusable/button/button.ts"],"sourcesContent":["/**\n * Copyright Kyndryl, Inc. 2023\n */\n\nimport { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedNodes,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport {\n  BUTTON_KINDS,\n  BUTTON_SIZES,\n  BUTTON_TYPES,\n  BUTTON_ICON_POSITION,\n  BUTTON_KINDS_SOLID,\n  BUTTON_KINDS_OUTLINE,\n} from './defs';\n\nimport stylesheet from './button.scss';\n\n/**\n * Button component.\n *\n * @slot unnamed - Slot for button text.\n * @slot icon - Slot for an icon.\n * @fires on-click - Emits the original click event.\n */\n@customElement('kyn-button')\nexport class Button extends LitElement {\n  static override styles = [stylesheet];\n\n  /** @ignore */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** ARIA label for the button for accessibility. */\n  @property({ type: String })\n  description = '';\n\n  /** Type for the &lt;button&gt; element. */\n  @property({ type: String })\n  type: BUTTON_TYPES = BUTTON_TYPES.BUTTON;\n\n  /** Specifies the visual appearance/kind of the button. */\n  @property({ type: String })\n  kind: BUTTON_KINDS = BUTTON_KINDS.PRIMARY;\n\n  /** Converts the button to an &lt;a&gt; tag if specified. */\n  @property({ type: String })\n  href = '';\n\n  /** Link target, only valid if href is supplied. */\n  @property({ type: String })\n  target = '_self';\n\n  /** Specifies the size of the button. */\n  @property({ type: String })\n  size: BUTTON_SIZES = BUTTON_SIZES.MEDIUM;\n\n  /** Specifies the position of the icon relative to any button text. */\n  @property({ type: String })\n  iconPosition: BUTTON_ICON_POSITION = BUTTON_ICON_POSITION.CENTER;\n\n  /** Determines if the button is disabled.\n   * @internal\n   */\n  @state()\n  iconOnly = false;\n\n  /** Determines if the button is disabled. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Button value.  */\n  @property({ type: String })\n  value = '';\n\n  /** Button name. */\n  @property({ type: String })\n  name = '';\n\n  /** Determines if the button is Floatable */\n  @property({ type: Boolean })\n  isFloating = false;\n\n  /** Show button after scrolling to 50% of the page*/\n  @property({ type: Boolean })\n  showOnScroll = false;\n\n  /** Determines showButton state .\n   * @internal\n   */\n  @state()\n  _showButton = false;\n\n  /** re-size button to 'medium' at mobile breakpoint.\n   * @internal\n   */\n  @state()\n  _reSizeBtn = false;\n\n  /** Button formmethod.  */\n  @property({ type: String })\n  formmethod!: any;\n\n  /** Queries default slot nodes.\n   * @internal\n   */\n  @queryAssignedNodes()\n  _slottedEls!: Array<any>;\n\n  /** Queries icon slot nodes.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  _iconEls!: Array<any>;\n\n  /** Queries the .button element.\n   * @internal\n   */\n  @query('.button')\n  _btnEl!: any;\n\n  override render() {\n    const BtnClasses = {\n      'kd-btn': true,\n      [`kd-btn--${this.kind}`]: true,\n      'kd-btn--solid-styles': BUTTON_KINDS_SOLID.includes(this.kind),\n      'kd-btn--outline-styles': BUTTON_KINDS_OUTLINE.includes(this.kind),\n      'kd-btn--large': this.size === BUTTON_SIZES.LARGE,\n      'kd-btn--small': this.size === BUTTON_SIZES.SMALL,\n      'kd-btn--medium': this._reSizeBtn || this.size === BUTTON_SIZES.MEDIUM,\n      'kd-btn--icon-align': !!this.iconPosition,\n      [`kd-btn--icon-${this.iconPosition}`]:\n        !!this.iconPosition && !this.iconOnly,\n      [`kd-btn--icon-center`]: this._iconEls?.length && this.iconOnly,\n      'kd-btn--float': this.isFloating,\n      'kd-btn--hidden': this.showOnScroll && !this._showButton,\n      'icon-only': this._iconEls?.length && this.iconOnly,\n    };\n\n    return html`\n      ${this.href && this.href !== ''\n        ? html`\n            <a\n              part=\"button\"\n              class=${classMap(BtnClasses)}\n              href=${this.href}\n              target=${this.target}\n              ?disabled=${this.disabled}\n              aria-label=${ifDefined(this.description)}\n              title=${ifDefined(this.description)}\n              @click=${(e: Event) => this.handleClick(e)}\n            >\n              <span>\n                <slot @slotchange=${() => this._handleSlotChange()}></slot>\n                <slot\n                  name=\"icon\"\n                  @slotchange=${() => this._handleSlotChange()}\n                ></slot>\n              </span>\n            </a>\n          `\n        : html`\n            <button\n              part=\"button\"\n              class=${classMap(BtnClasses)}\n              type=${this.type}\n              ?disabled=${this.disabled}\n              aria-label=${ifDefined(this.description)}\n              title=${ifDefined(this.description)}\n              name=${ifDefined(this.name)}\n              value=${ifDefined(this.value)}\n              formmethod=${ifDefined(this.formmethod)}\n              @click=${(e: Event) => this.handleClick(e)}\n            >\n              <span>\n                <slot @slotchange=${() => this._handleSlotChange()}></slot>\n                <slot\n                  name=\"icon\"\n                  @slotchange=${() => this._handleSlotChange()}\n                ></slot>\n              </span>\n            </button>\n          `}\n    `;\n  }\n\n  private handleClick(e: Event) {\n    if (this.internals.form) {\n      if (this.type === 'submit') {\n        this.internals.form.requestSubmit();\n      } else if (this.type === 'reset') {\n        this.internals.form.reset();\n      }\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _testIconOnly() {\n    if (!this._iconEls?.length) {\n      return false;\n    }\n\n    const TextNodes = this._slottedEls?.filter((node: any) => {\n      return node.textContent.trim() !== '';\n    });\n\n    const VisibleTextNodes = TextNodes.filter((node: any) => {\n      if (node.tagName) {\n        const Styles = getComputedStyle(node);\n        return Styles.display !== 'none' && Styles.visibility !== 'hidden';\n      } else {\n        return true;\n      }\n    });\n\n    return !VisibleTextNodes.length;\n  }\n\n  private _handleSlotChange() {\n    this.iconOnly = this._testIconOnly();\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this._reSizeButton();\n    this.iconOnly = this._testIconOnly();\n  });\n\n  /** @internal */\n  private _reSizeButton() {\n    // Resize button to medium at mobile breakpoint\n    if ((this.isFloating || this.showOnScroll) && window.innerWidth <= 672) {\n      this._reSizeBtn = true;\n    } else {\n      this._reSizeBtn = false;\n    }\n  }\n\n  /** @internal */\n  private _debounceScroll = debounce(() => {\n    if (this.showOnScroll) {\n      this._handleScroll();\n    }\n  });\n\n  /** @internal */\n  private _handleScroll() {\n    const scrollPosition = window.scrollY;\n    const windowHeight = window.innerHeight;\n    const pageHeight = document.documentElement.scrollHeight;\n    // Show the button if scrolled 50% of the page\n    this._showButton = scrollPosition > (pageHeight - windowHeight) / 2;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('resize', this._debounceResize);\n    if (this.showOnScroll) {\n      window.addEventListener('scroll', this._debounceScroll);\n    }\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('resize', this._debounceResize);\n    if (this.showOnScroll) {\n      window.removeEventListener('scroll', this._debounceScroll);\n    }\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-button': Button;\n  }\n}\n"],"names":["Button","LitElement","constructor","this","internals","attachInternals","description","type","BUTTON_TYPES","BUTTON","kind","BUTTON_KINDS","PRIMARY","href","target","size","BUTTON_SIZES","MEDIUM","iconPosition","BUTTON_ICON_POSITION","CENTER","iconOnly","disabled","value","name","isFloating","showOnScroll","_showButton","_reSizeBtn","_debounceResize","debounce","_reSizeButton","_testIconOnly","_debounceScroll","_handleScroll","render","BtnClasses","BUTTON_KINDS_SOLID","includes","BUTTON_KINDS_OUTLINE","LARGE","SMALL","_a","_iconEls","length","_b","html","classMap","ifDefined","e","handleClick","_handleSlotChange","formmethod","form","requestSubmit","reset","event","CustomEvent","detail","origEvent","dispatchEvent","_slottedEls","filter","node","textContent","trim","tagName","Styles","getComputedStyle","display","visibility","requestUpdate","window","innerWidth","scrollPosition","scrollY","windowHeight","innerHeight","pageHeight","document","documentElement","scrollHeight","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","stylesheet","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","reflect","queryAssignedNodes","queryAssignedElements","slot","query","customElement"],"mappings":"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"}
+{"version":3,"file":"button.js","sources":["../../../../src/components/reusable/button/button.ts"],"sourcesContent":["/**\n * Copyright Kyndryl, Inc. 2023\n */\n\nimport { html, LitElement } from 'lit';\nimport {\n  customElement,\n  property,\n  state,\n  query,\n  queryAssignedNodes,\n  queryAssignedElements,\n} from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { classMap } from 'lit-html/directives/class-map.js';\nimport { debounce } from '../../../common/helpers/helpers';\n\nimport {\n  BUTTON_KINDS,\n  BUTTON_SIZES,\n  BUTTON_TYPES,\n  BUTTON_ICON_POSITION,\n  BUTTON_KINDS_SOLID,\n  BUTTON_KINDS_OUTLINE,\n} from './defs';\n\nimport stylesheet from './button.scss';\n\n/**\n * Button component.\n *\n * @slot unnamed - Slot for button text.\n * @slot icon - Slot for an icon.\n * @fires on-click - Emits the original click event.\n */\n@customElement('kyn-button')\nexport class Button extends LitElement {\n  static override styles = [stylesheet];\n\n  /** @ignore */\n  static override shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n\n  /**\n   * Associate the component with forms.\n   * @ignore\n   */\n  static formAssociated = true;\n\n  /**\n   * Attached internals for form association.\n   * @ignore\n   */\n  @state()\n  internals = this.attachInternals();\n\n  /** ARIA label for the button for accessibility. */\n  @property({ type: String })\n  description = '';\n\n  /** Type for the &lt;button&gt; element. */\n  @property({ type: String })\n  type: BUTTON_TYPES = BUTTON_TYPES.BUTTON;\n\n  /** Specifies the visual appearance/kind of the button. */\n  @property({ type: String })\n  kind: BUTTON_KINDS = BUTTON_KINDS.PRIMARY;\n\n  /** Converts the button to an &lt;a&gt; tag if specified. */\n  @property({ type: String })\n  href = '';\n\n  /** Link target, only valid if href is supplied. */\n  @property({ type: String })\n  target = '_self';\n\n  /** Specifies the size of the button. */\n  @property({ type: String })\n  size: BUTTON_SIZES = BUTTON_SIZES.MEDIUM;\n\n  /** Specifies the position of the icon relative to any button text. */\n  @property({ type: String })\n  iconPosition: BUTTON_ICON_POSITION = BUTTON_ICON_POSITION.CENTER;\n\n  /** Determines if the button is disabled.\n   * @internal\n   */\n  @state()\n  iconOnly = false;\n\n  /** Determines if the button is disabled. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Button value.  */\n  @property({ type: String })\n  value = '';\n\n  /** Button name. */\n  @property({ type: String })\n  name = '';\n\n  /** Determines if the button is Floatable */\n  @property({ type: Boolean })\n  isFloating = false;\n\n  /** Show button after scrolling to 50% of the page */\n  @property({ type: Boolean })\n  showOnScroll = false;\n\n  /** Button selected state. */\n  @property({ type: Boolean })\n  selected = false;\n\n  /** Determines showButton state .\n   * @internal\n   */\n  @state()\n  _showButton = false;\n\n  /** re-size button to 'medium' at mobile breakpoint.\n   * @internal\n   */\n  @state()\n  _reSizeBtn = false;\n\n  /** Button formmethod.  */\n  @property({ type: String })\n  formmethod!: any;\n\n  /** Queries default slot nodes.\n   * @internal\n   */\n  @queryAssignedNodes()\n  _slottedEls!: Array<any>;\n\n  /** Queries icon slot nodes.\n   * @internal\n   */\n  @queryAssignedElements({ slot: 'icon' })\n  _iconEls!: Array<any>;\n\n  /** Queries the .button element.\n   * @internal\n   */\n  @query('.button')\n  _btnEl!: any;\n\n  override render() {\n    const BtnClasses = {\n      'kd-btn': true,\n      [`kd-btn--${this.kind}`]: true,\n      'kd-btn--solid-styles': BUTTON_KINDS_SOLID.includes(this.kind),\n      'kd-btn--outline-styles': BUTTON_KINDS_OUTLINE.includes(this.kind),\n      'kd-btn--large': this.size === BUTTON_SIZES.LARGE,\n      'kd-btn--small': this.size === BUTTON_SIZES.SMALL,\n      'kd-btn--medium': this._reSizeBtn || this.size === BUTTON_SIZES.MEDIUM,\n      'kd-btn--icon-align': !!this.iconPosition,\n      [`kd-btn--icon-${this.iconPosition}`]:\n        !!this.iconPosition && !this.iconOnly,\n      [`kd-btn--icon-center`]: this._iconEls?.length && this.iconOnly,\n      'kd-btn--float': this.isFloating,\n      'kd-btn--hidden': this.showOnScroll && !this._showButton,\n      'icon-only': this._iconEls?.length && this.iconOnly,\n      selected: this.selected,\n    };\n\n    return html`\n      ${this.href && this.href !== ''\n        ? html`\n            <a\n              part=\"button\"\n              class=${classMap(BtnClasses)}\n              href=${this.href}\n              target=${this.target}\n              ?disabled=${this.disabled}\n              aria-label=${ifDefined(this.description)}\n              title=${ifDefined(this.description)}\n              @click=${(e: Event) => this.handleClick(e)}\n            >\n              <span>\n                <slot @slotchange=${() => this._handleSlotChange()}></slot>\n                <slot\n                  name=\"icon\"\n                  @slotchange=${() => this._handleSlotChange()}\n                ></slot>\n              </span>\n            </a>\n          `\n        : html`\n            <button\n              part=\"button\"\n              class=${classMap(BtnClasses)}\n              type=${this.type}\n              ?disabled=${this.disabled}\n              aria-label=${ifDefined(this.description)}\n              title=${ifDefined(this.description)}\n              name=${ifDefined(this.name)}\n              value=${ifDefined(this.value)}\n              formmethod=${ifDefined(this.formmethod)}\n              @click=${(e: Event) => this.handleClick(e)}\n            >\n              <span>\n                <slot @slotchange=${() => this._handleSlotChange()}></slot>\n                <slot\n                  name=\"icon\"\n                  @slotchange=${() => this._handleSlotChange()}\n                ></slot>\n              </span>\n            </button>\n          `}\n    `;\n  }\n\n  private handleClick(e: Event) {\n    if (this.internals.form) {\n      if (this.type === 'submit') {\n        this.internals.form.requestSubmit();\n      } else if (this.type === 'reset') {\n        this.internals.form.reset();\n      }\n    }\n\n    const event = new CustomEvent('on-click', {\n      detail: { origEvent: e },\n    });\n    this.dispatchEvent(event);\n  }\n\n  private _testIconOnly() {\n    if (!this._iconEls?.length) {\n      return false;\n    }\n\n    const TextNodes = this._slottedEls?.filter((node: any) => {\n      return node.textContent.trim() !== '';\n    });\n\n    const VisibleTextNodes = TextNodes.filter((node: any) => {\n      if (node.tagName) {\n        const Styles = getComputedStyle(node);\n        return Styles.display !== 'none' && Styles.visibility !== 'hidden';\n      } else {\n        return true;\n      }\n    });\n\n    return !VisibleTextNodes.length;\n  }\n\n  private _handleSlotChange() {\n    this.iconOnly = this._testIconOnly();\n    this.requestUpdate();\n  }\n\n  /** @internal */\n  private _debounceResize = debounce(() => {\n    this._reSizeButton();\n    this.iconOnly = this._testIconOnly();\n  });\n\n  /** @internal */\n  private _reSizeButton() {\n    // Resize button to medium at mobile breakpoint\n    if ((this.isFloating || this.showOnScroll) && window.innerWidth <= 672) {\n      this._reSizeBtn = true;\n    } else {\n      this._reSizeBtn = false;\n    }\n  }\n\n  /** @internal */\n  private _debounceScroll = debounce(() => {\n    if (this.showOnScroll) {\n      this._handleScroll();\n    }\n  });\n\n  /** @internal */\n  private _handleScroll() {\n    const scrollPosition = window.scrollY;\n    const windowHeight = window.innerHeight;\n    const pageHeight = document.documentElement.scrollHeight;\n    // Show the button if scrolled 50% of the page\n    this._showButton = scrollPosition > (pageHeight - windowHeight) / 2;\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    window.addEventListener('resize', this._debounceResize);\n    if (this.showOnScroll) {\n      window.addEventListener('scroll', this._debounceScroll);\n    }\n  }\n\n  override disconnectedCallback() {\n    window.removeEventListener('resize', this._debounceResize);\n    if (this.showOnScroll) {\n      window.removeEventListener('scroll', this._debounceScroll);\n    }\n    super.disconnectedCallback();\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kyn-button': Button;\n  }\n}\n"],"names":["Button","LitElement","constructor","this","internals","attachInternals","description","type","BUTTON_TYPES","BUTTON","kind","BUTTON_KINDS","PRIMARY","href","target","size","BUTTON_SIZES","MEDIUM","iconPosition","BUTTON_ICON_POSITION","CENTER","iconOnly","disabled","value","name","isFloating","showOnScroll","selected","_showButton","_reSizeBtn","_debounceResize","debounce","_reSizeButton","_testIconOnly","_debounceScroll","_handleScroll","render","BtnClasses","BUTTON_KINDS_SOLID","includes","BUTTON_KINDS_OUTLINE","LARGE","SMALL","_a","_iconEls","length","_b","html","classMap","ifDefined","e","handleClick","_handleSlotChange","formmethod","form","requestSubmit","reset","event","CustomEvent","detail","origEvent","dispatchEvent","_slottedEls","filter","node","textContent","trim","tagName","Styles","getComputedStyle","display","visibility","requestUpdate","window","innerWidth","scrollPosition","scrollY","windowHeight","innerHeight","pageHeight","document","documentElement","scrollHeight","connectedCallback","super","addEventListener","disconnectedCallback","removeEventListener","styles","stylesheet","shadowRootOptions","delegatesFocus","formAssociated","__decorate","state","prototype","property","String","Boolean","reflect","queryAssignedNodes","queryAssignedElements","slot","query","customElement"],"mappings":"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"}

package/components/reusable/button/defs.d.ts

@@ -15,6 +15,7 @@ export declare enum BUTTON_KINDS {
     OUTLINE_AI = "outline-ai",
     OUTLINE_DESTRUCTIVE = "outline-destructive",
     GHOST = "ghost",
+    GHOST_DESTRUCTIVE = "ghost-destructive",
     CONTENT = "content"
 }
 export declare enum BUTTON_SIZES {

package/components/reusable/button/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/button/defs.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY;IACtB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,UAAU,eAAe;IACzB,mBAAmB,wBAAwB;IAC3C,SAAS,cAAc;IACvB,YAAY,iBAAiB;IAC7B,qBAAqB,0BAA0B;IAC/C,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,UAAU,eAAe;IACzB,mBAAmB,wBAAwB;IAC3C,KAAK,UAAU;IACf,OAAO,YAAY;CACpB;AAED,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,oBAAoB;IAC9B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,kBAAkB,gBAS9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,gBAIhC,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../../src/components/reusable/button/defs.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY;IACtB,MAAM,WAAW;IACjB,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,YAAY;IACtB,OAAO,YAAY;IACnB,UAAU,eAAe;IACzB,mBAAmB,wBAAwB;IAC3C,SAAS,cAAc;IACvB,YAAY,iBAAiB;IAC7B,qBAAqB,0BAA0B;IAC/C,QAAQ,aAAa;IACrB,OAAO,YAAY;IACnB,UAAU,eAAe;IACzB,mBAAmB,wBAAwB;IAC3C,KAAK,UAAU;IACf,iBAAiB,sBAAsB;IACvC,OAAO,YAAY;CACpB;AAED,oBAAY,YAAY;IACtB,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;CAChB;AAED,oBAAY,oBAAoB;IAC9B,MAAM,WAAW;IACjB,IAAI,SAAS;IACb,KAAK,UAAU;CAChB;AAED,eAAO,MAAM,kBAAkB,gBAS9B,CAAC;AAEF,eAAO,MAAM,oBAAoB,gBAIhC,CAAC"}

package/components/reusable/button/defs.js

@@ -1,2 +1,2 @@
-var E,T,R,I;!function(E){E.BUTTON="button",E.SUBMIT="submit",E.RESET="reset"}(E||(E={})),function(E){E.PRIMARY="primary",E.PRIMARY_AI="primary-ai",E.PRIMARY_DESTRUCTIVE="primary-destructive",E.SECONDARY="secondary",E.SECONDARY_AI="secondary-ai",E.SECONDARY_DESTRUCTIVE="secondary-destructive",E.TERTIARY="tertiary",E.OUTLINE="outline",E.OUTLINE_AI="outline-ai",E.OUTLINE_DESTRUCTIVE="outline-destructive",E.GHOST="ghost",E.CONTENT="content"}(T||(T={})),function(E){E.LARGE="large",E.MEDIUM="medium",E.SMALL="small"}(R||(R={})),function(E){E.CENTER="center",E.LEFT="left",E.RIGHT="right"}(I||(I={}));const t=[T.PRIMARY,T.PRIMARY_AI,T.PRIMARY_DESTRUCTIVE,T.SECONDARY,T.SECONDARY_AI,T.SECONDARY_DESTRUCTIVE,T.TERTIARY,T.CONTENT],e=[T.OUTLINE,T.OUTLINE_AI,T.OUTLINE_DESTRUCTIVE];export{I as BUTTON_ICON_POSITION,T as BUTTON_KINDS,e as BUTTON_KINDS_OUTLINE,t as BUTTON_KINDS_SOLID,R as BUTTON_SIZES,E as BUTTON_TYPES};
+var E,T,R,t;!function(E){E.BUTTON="button",E.SUBMIT="submit",E.RESET="reset"}(E||(E={})),function(E){E.PRIMARY="primary",E.PRIMARY_AI="primary-ai",E.PRIMARY_DESTRUCTIVE="primary-destructive",E.SECONDARY="secondary",E.SECONDARY_AI="secondary-ai",E.SECONDARY_DESTRUCTIVE="secondary-destructive",E.TERTIARY="tertiary",E.OUTLINE="outline",E.OUTLINE_AI="outline-ai",E.OUTLINE_DESTRUCTIVE="outline-destructive",E.GHOST="ghost",E.GHOST_DESTRUCTIVE="ghost-destructive",E.CONTENT="content"}(T||(T={})),function(E){E.LARGE="large",E.MEDIUM="medium",E.SMALL="small"}(R||(R={})),function(E){E.CENTER="center",E.LEFT="left",E.RIGHT="right"}(t||(t={}));const I=[T.PRIMARY,T.PRIMARY_AI,T.PRIMARY_DESTRUCTIVE,T.SECONDARY,T.SECONDARY_AI,T.SECONDARY_DESTRUCTIVE,T.TERTIARY,T.CONTENT],e=[T.OUTLINE,T.OUTLINE_AI,T.OUTLINE_DESTRUCTIVE];export{t as BUTTON_ICON_POSITION,T as BUTTON_KINDS,e as BUTTON_KINDS_OUTLINE,I as BUTTON_KINDS_SOLID,R as BUTTON_SIZES,E as BUTTON_TYPES};
 //# sourceMappingURL=defs.js.map

package/components/reusable/button/defs.js.map

@@ -1 +1 @@
-{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/button/defs.ts"],"sourcesContent":["export enum BUTTON_TYPES {\n  BUTTON = 'button',\n  SUBMIT = 'submit',\n  RESET = 'reset',\n}\n\nexport enum BUTTON_KINDS {\n  PRIMARY = 'primary',\n  PRIMARY_AI = 'primary-ai',\n  PRIMARY_DESTRUCTIVE = 'primary-destructive',\n  SECONDARY = 'secondary',\n  SECONDARY_AI = 'secondary-ai',\n  SECONDARY_DESTRUCTIVE = 'secondary-destructive',\n  TERTIARY = 'tertiary',\n  OUTLINE = 'outline',\n  OUTLINE_AI = 'outline-ai',\n  OUTLINE_DESTRUCTIVE = 'outline-destructive',\n  GHOST = 'ghost',\n  CONTENT = 'content',\n}\n\nexport enum BUTTON_SIZES {\n  LARGE = 'large',\n  MEDIUM = 'medium',\n  SMALL = 'small',\n}\n\nexport enum BUTTON_ICON_POSITION {\n  CENTER = 'center',\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport const BUTTON_KINDS_SOLID = [\n  BUTTON_KINDS.PRIMARY,\n  BUTTON_KINDS.PRIMARY_AI,\n  BUTTON_KINDS.PRIMARY_DESTRUCTIVE,\n  BUTTON_KINDS.SECONDARY,\n  BUTTON_KINDS.SECONDARY_AI,\n  BUTTON_KINDS.SECONDARY_DESTRUCTIVE,\n  BUTTON_KINDS.TERTIARY,\n  BUTTON_KINDS.CONTENT,\n];\n\nexport const BUTTON_KINDS_OUTLINE = [\n  BUTTON_KINDS.OUTLINE,\n  BUTTON_KINDS.OUTLINE_AI,\n  BUTTON_KINDS.OUTLINE_DESTRUCTIVE,\n];\n"],"names":["BUTTON_TYPES","BUTTON_KINDS","BUTTON_SIZES","BUTTON_ICON_POSITION","BUTTON_KINDS_SOLID","PRIMARY","PRIMARY_AI","PRIMARY_DESTRUCTIVE","SECONDARY","SECONDARY_AI","SECONDARY_DESTRUCTIVE","TERTIARY","CONTENT","BUTTON_KINDS_OUTLINE","OUTLINE","OUTLINE_AI","OUTLINE_DESTRUCTIVE"],"mappings":"IAAYA,EAMAC,EAeAC,EAMAC,GA3BZ,SAAYH,GACVA,EAAA,OAAA,SACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAED,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,WAAA,aACAA,EAAA,oBAAA,sBACAA,EAAA,UAAA,YACAA,EAAA,aAAA,eACAA,EAAA,sBAAA,wBACAA,EAAA,SAAA,WACAA,EAAA,QAAA,UACAA,EAAA,WAAA,aACAA,EAAA,oBAAA,sBACAA,EAAA,MAAA,QACAA,EAAA,QAAA,SACD,CAbD,CAAYA,IAAAA,EAaX,CAAA,IAED,SAAYC,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAED,SAAYC,GACVA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAEY,MAAAC,EAAqB,CAChCH,EAAaI,QACbJ,EAAaK,WACbL,EAAaM,oBACbN,EAAaO,UACbP,EAAaQ,aACbR,EAAaS,sBACbT,EAAaU,SACbV,EAAaW,SAGFC,EAAuB,CAClCZ,EAAaa,QACbb,EAAac,WACbd,EAAae"}
+{"version":3,"file":"defs.js","sources":["../../../../src/components/reusable/button/defs.ts"],"sourcesContent":["export enum BUTTON_TYPES {\n  BUTTON = 'button',\n  SUBMIT = 'submit',\n  RESET = 'reset',\n}\n\nexport enum BUTTON_KINDS {\n  PRIMARY = 'primary',\n  PRIMARY_AI = 'primary-ai',\n  PRIMARY_DESTRUCTIVE = 'primary-destructive',\n  SECONDARY = 'secondary',\n  SECONDARY_AI = 'secondary-ai',\n  SECONDARY_DESTRUCTIVE = 'secondary-destructive',\n  TERTIARY = 'tertiary',\n  OUTLINE = 'outline',\n  OUTLINE_AI = 'outline-ai',\n  OUTLINE_DESTRUCTIVE = 'outline-destructive',\n  GHOST = 'ghost',\n  GHOST_DESTRUCTIVE = 'ghost-destructive',\n  CONTENT = 'content',\n}\n\nexport enum BUTTON_SIZES {\n  LARGE = 'large',\n  MEDIUM = 'medium',\n  SMALL = 'small',\n}\n\nexport enum BUTTON_ICON_POSITION {\n  CENTER = 'center',\n  LEFT = 'left',\n  RIGHT = 'right',\n}\n\nexport const BUTTON_KINDS_SOLID = [\n  BUTTON_KINDS.PRIMARY,\n  BUTTON_KINDS.PRIMARY_AI,\n  BUTTON_KINDS.PRIMARY_DESTRUCTIVE,\n  BUTTON_KINDS.SECONDARY,\n  BUTTON_KINDS.SECONDARY_AI,\n  BUTTON_KINDS.SECONDARY_DESTRUCTIVE,\n  BUTTON_KINDS.TERTIARY,\n  BUTTON_KINDS.CONTENT,\n];\n\nexport const BUTTON_KINDS_OUTLINE = [\n  BUTTON_KINDS.OUTLINE,\n  BUTTON_KINDS.OUTLINE_AI,\n  BUTTON_KINDS.OUTLINE_DESTRUCTIVE,\n];\n"],"names":["BUTTON_TYPES","BUTTON_KINDS","BUTTON_SIZES","BUTTON_ICON_POSITION","BUTTON_KINDS_SOLID","PRIMARY","PRIMARY_AI","PRIMARY_DESTRUCTIVE","SECONDARY","SECONDARY_AI","SECONDARY_DESTRUCTIVE","TERTIARY","CONTENT","BUTTON_KINDS_OUTLINE","OUTLINE","OUTLINE_AI","OUTLINE_DESTRUCTIVE"],"mappings":"IAAYA,EAMAC,EAgBAC,EAMAC,GA5BZ,SAAYH,GACVA,EAAA,OAAA,SACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAED,SAAYC,GACVA,EAAA,QAAA,UACAA,EAAA,WAAA,aACAA,EAAA,oBAAA,sBACAA,EAAA,UAAA,YACAA,EAAA,aAAA,eACAA,EAAA,sBAAA,wBACAA,EAAA,SAAA,WACAA,EAAA,QAAA,UACAA,EAAA,WAAA,aACAA,EAAA,oBAAA,sBACAA,EAAA,MAAA,QACAA,EAAA,kBAAA,oBACAA,EAAA,QAAA,SACD,CAdD,CAAYA,IAAAA,EAcX,CAAA,IAED,SAAYC,GACVA,EAAA,MAAA,QACAA,EAAA,OAAA,SACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAED,SAAYC,GACVA,EAAA,OAAA,SACAA,EAAA,KAAA,OACAA,EAAA,MAAA,OACD,CAJD,CAAYA,IAAAA,EAIX,CAAA,IAEY,MAAAC,EAAqB,CAChCH,EAAaI,QACbJ,EAAaK,WACbL,EAAaM,oBACbN,EAAaO,UACbP,EAAaQ,aACbR,EAAaS,sBACbT,EAAaU,SACbV,EAAaW,SAGFC,EAAuB,CAClCZ,EAAaa,QACbb,EAAac,WACbd,EAAae"}

package/components/reusable/tabs/tab.js

@@ -41,7 +41,7 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as o,o as
 }
 
 :host(:focus-visible) {
-  outline-color: var(--kd-color-border-button-tertiary-state-focused);
+  outline-color: var(--kd-color-border-variants-focus);
 }
 
 :host([data-aiconnected=true]:focus-visible) {
@@ -124,34 +124,34 @@ import{_ as t}from"../../../vendor/tslib-53a81efe.js";import{n as e,t as o,o as
   color: var(--kd-color-text-level-primary);
 }
 .tab.tab:not(.disabled).selected {
-  border-color: var(--kd-color-border-button-tertiary-state-focused);
+  border-color: var(--kd-color-border-button-primary-state-default);
   color: var(--kd-color-text-link-level-default);
 }
 .tab.tab:not(.disabled):hover, .tab.tab:not(.disabled).selected:hover {
-  background: var(--kd-color-background-button-tertiary-state-hover);
-  border-color: var(--kd-color-border-button-secondary-state-hover);
+  background: var(--kd-color-background-button-secondary-state-hover);
+  border-color: var(--kd-color-border-button-primary-state-hover);
   color: var(--kd-color-text-level-primary);
 }
 .tab.tab:not(.disabled):active, .tab.tab:not(.disabled).selected:active {
   background: var(--kd-color-background-button-primary-state-pressed);
-  border-color: var(--kd-color-border-button-secondary-state-hover);
+  border-color: var(--kd-color-border-button-primary-state-hover);
   color: var(--kd-color-text-level-light);
 }
 .tab.tab.ai-connected--true:not(.disabled) {
   color: var(--kd-color-text-button-ai-default);
-  border-color: var(--kd-color-border-level-ai-tertiary);
+  border-color: var(--kd-color-border-button-ai-state-default);
 }
 .tab.tab.ai-connected--true:not(.disabled).selected {
   border-color: var(--kd-color-border-button-ai-state-focused);
 }
 .tab.tab.ai-connected--true:not(.disabled):hover, .tab.tab.ai-connected--true:not(.disabled).selected:hover {
   background: var(--kd-color-background-button-secondary-ai-hover);
-  border-color: var(--kd-color-border-button-ai-state-hover);
+  border-color: var(--kd-color-border-button-secondary-ai-hover);
   color: var(--kd-color-text-level-light);
 }
 .tab.tab.ai-connected--true:not(.disabled):active, .tab.tab.ai-connected--true:not(.disabled).selected:active {
   background: var(--kd-color-background-button-primary-ai-hover);
-  border-color: var(--kd-color-border-button-ai-state-hover);
+  border-color: var(--kd-color-border-button-secondary-ai-hover);
   color: var(--kd-color-text-button-dark-primary);
 }
 .tab.disabled {

package/components/reusable/tabs/tabs.js

@@ -1,4 +1,4 @@
-import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as i,e as o}from"../../../vendor/lit-461e78e6.js";import{i as s,s as r,x as l}from"../../../vendor/lit-element-c6c02f24.js";var n=s`*,
+import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as i,e as o}from"../../../vendor/lit-461e78e6.js";import{i as s,s as r,x as n}from"../../../vendor/lit-element-c6c02f24.js";var l=s`*,
 *::before,
 *::after {
   box-sizing: border-box;
@@ -67,7 +67,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as
   z-index: -1;
 }
 .tabs.ai-connected--true::after {
-  border-color: var(--kd-color-border-level-ai-tertiary);
+  border-color: var(--kd-color-border-button-ai-state-default);
 }
 @media (min-width: 42rem) {
   .vertical .tabs {
@@ -96,7 +96,7 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as
 }
 .panels:focus-visible {
   outline-color: var(--kd-color-border-variants-focus);
-}`;let d=class extends r{constructor(){super(...arguments),this.tabSize="md",this.vertical=!1,this.aiConnected=!1,this.disableAutoFocusUpdate=!1,this.scrollablePanels=!1}render(){const e={wrapper:!0,vertical:this.vertical,scrollable:this.scrollablePanels,[`ai-connected--${this.aiConnected}`]:!0},t={tabs:!0,[`ai-connected--${this.aiConnected}`]:!0};return l`
+}`;let d=class extends r{constructor(){super(...arguments),this.tabSize="md",this.vertical=!1,this.aiConnected=!1,this.disableAutoFocusUpdate=!1,this.scrollablePanels=!1}render(){const e={wrapper:!0,vertical:this.vertical,scrollable:this.scrollablePanels,[`ai-connected--${this.aiConnected}`]:!0},t={tabs:!0,[`ai-connected--${this.aiConnected}`]:!0};return n`
       <div class=${i(e)}>
         <div
           class=${i(t)}
@@ -110,5 +110,5 @@ import{_ as e}from"../../../vendor/tslib-53a81efe.js";import{n as t,l as a,o as
           <slot></slot>
         </div>
       </div>
-    `}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(e=>this._handleChange(e)))}disconnectedCallback(){this.removeEventListener("tab-activated",(e=>this._handleChange(e))),super.disconnectedCallback()}willUpdate(e){(e.has("tabSize")||e.has("vertical")||e.has("aiConnected"))&&this._updateChildren()}_handleSlotChangeTabs(){this._updateChildren()}_updateChildren(){this._tabs.forEach((e=>{e._size=this.tabSize,e.vertical=this.vertical,e.aiConnected=this.aiConnected})),this._tabPanels.forEach((e=>{e.vertical=this.vertical}))}_handleChange(e){e.stopPropagation(),this._updateChildrenSelection(e.detail.tabId),this._emitChangeEvent(e.detail.origEvent,e.detail.tabId)}_updateChildrenSelection(e,t=!0){this._tabs.forEach((t=>{t.selected=t.id===e})),t&&this._tabPanels.forEach((t=>{t.visible=t.tabId===e}))}_emitChangeEvent(e,t){const a=new CustomEvent("on-change",{detail:{origEvent:e,selectedTabId:t}});this.dispatchEvent(a)}_handleKeyboard(e){const t=this._tabs.length,a=this._tabs.findIndex((e=>e.selected));switch(e.keyCode){case 13:case 32:return void this._updateChildrenSelection(this._tabs[a].id,this.disableAutoFocusUpdate);case 37:case 38:{let i=0===a?t-1:a-1,o=this._tabs[i];return o.disabled&&(i=0===i?t-1:i-1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}case 39:case 40:{let i=a===t-1?0:a+1,o=this._tabs[i];return o.disabled&&(i=i===t-1?0:i+1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}default:return}}};d.styles=n,e([t({type:String})],d.prototype,"tabSize",void 0),e([t({type:Boolean})],d.prototype,"vertical",void 0),e([t({type:Boolean})],d.prototype,"aiConnected",void 0),e([t({type:Boolean})],d.prototype,"disableAutoFocusUpdate",void 0),e([t({type:Boolean})],d.prototype,"scrollablePanels",void 0),e([a({slot:"tabs",selector:"kyn-tab"})],d.prototype,"_tabs",void 0),e([a({selector:"kyn-tab-panel"})],d.prototype,"_tabPanels",void 0),d=e([o("kyn-tabs")],d);export{d as Tabs};
+    `}connectedCallback(){super.connectedCallback(),this.addEventListener("tab-activated",(e=>this._handleChange(e)))}disconnectedCallback(){this.removeEventListener("tab-activated",(e=>this._handleChange(e))),super.disconnectedCallback()}willUpdate(e){(e.has("tabSize")||e.has("vertical")||e.has("aiConnected"))&&this._updateChildren()}_handleSlotChangeTabs(){this._updateChildren()}_updateChildren(){this._tabs.forEach((e=>{e._size=this.tabSize,e.vertical=this.vertical,e.aiConnected=this.aiConnected})),this._tabPanels.forEach((e=>{e.vertical=this.vertical}))}_handleChange(e){e.stopPropagation(),this._updateChildrenSelection(e.detail.tabId),this._emitChangeEvent(e.detail.origEvent,e.detail.tabId)}_updateChildrenSelection(e,t=!0){this._tabs.forEach((t=>{t.selected=t.id===e})),t&&this._tabPanels.forEach((t=>{t.visible=t.tabId===e}))}_emitChangeEvent(e,t){const a=new CustomEvent("on-change",{detail:{origEvent:e,selectedTabId:t}});this.dispatchEvent(a)}_handleKeyboard(e){const t=this._tabs.length,a=this._tabs.findIndex((e=>e.selected));switch(e.keyCode){case 13:case 32:return void this._updateChildrenSelection(this._tabs[a].id,this.disableAutoFocusUpdate);case 37:case 38:{let i=0===a?t-1:a-1,o=this._tabs[i];return o.disabled&&(i=0===i?t-1:i-1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}case 39:case 40:{let i=a===t-1?0:a+1,o=this._tabs[i];return o.disabled&&(i=i===t-1?0:i+1,o=this._tabs[i]),o.focus(),this._updateChildrenSelection(o.id,!this.disableAutoFocusUpdate),void this._emitChangeEvent(e,o.id)}default:return}}};d.styles=l,e([t({type:String})],d.prototype,"tabSize",void 0),e([t({type:Boolean})],d.prototype,"vertical",void 0),e([t({type:Boolean})],d.prototype,"aiConnected",void 0),e([t({type:Boolean})],d.prototype,"disableAutoFocusUpdate",void 0),e([t({type:Boolean})],d.prototype,"scrollablePanels",void 0),e([a({slot:"tabs",selector:"kyn-tab"})],d.prototype,"_tabs",void 0),e([a({selector:"kyn-tab-panel"})],d.prototype,"_tabPanels",void 0),d=e([o("kyn-tabs")],d);export{d as Tabs};
 //# sourceMappingURL=tabs.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kyndryl-design-system/shidoka-applications",
-  "version": "2.45.0",
+  "version": "2.46.0",
   "description": "Shidoka Web Components for Applications",
   "license": "MIT",
   "main": "index.js",
@@ -28,7 +28,7 @@
     "prepare": "npx husky install"
   },
   "dependencies": {
-    "@kyndryl-design-system/shidoka-foundation": "^2.4.13",
+    "@kyndryl-design-system/shidoka-foundation": "^2.4.16",
     "@kyndryl-design-system/shidoka-icons": "^2.12.1",
     "@lit/context": "^1.1.0",
     "deepmerge-ts": "^7.1.0",