vanilla-jui 1.7.9 → 1.7.11

package/src/css/loading.css

@@ -1,150 +0,0 @@
-@layer components {
-  .j-loader {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-  }
-
-  .j-loader .loader {
-    display: inline-block;
-    width: var(--loader-size);
-    height: var(--loader-size);
-    border-width: var(--loader-width);
-    border-style: var(--loader-style);
-    border-color: var(--loader-fg);
-    border-right-color: transparent;
-    border-radius: 50%;
-    animation: var(--loader-speed) linear infinite animate-spin;
-  }
-
-  .j-loader .polygon-loader {
-    width: var(--loader-size);
-    aspect-ratio: 1;
-    border-radius: 50%;
-    border: 1.5px solid var(--loader-fg);
-    animation:
-      polygon-loader-1 0.8s infinite linear alternate,
-      polygon-loader-2 1.6s infinite linear;
-  }
-
-  @keyframes polygon-loader-1 {
-    0% {
-      clip-path: polygon(50% 50%, 0 0, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%);
-    }
-
-    12.5% {
-      clip-path: polygon(
-        50% 50%,
-        0 0,
-        50% 0%,
-        100% 0%,
-        100% 0%,
-        100% 0%,
-        100% 0%
-      );
-    }
-
-    25% {
-      clip-path: polygon(
-        50% 50%,
-        0 0,
-        50% 0%,
-        100% 0%,
-        100% 100%,
-        100% 100%,
-        100% 100%
-      );
-    }
-
-    50% {
-      clip-path: polygon(
-        50% 50%,
-        0 0,
-        50% 0%,
-        100% 0%,
-        100% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-
-    62.5% {
-      clip-path: polygon(
-        50% 50%,
-        100% 0,
-        100% 0%,
-        100% 0%,
-        100% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-
-    75% {
-      clip-path: polygon(
-        50% 50%,
-        100% 100%,
-        100% 100%,
-        100% 100%,
-        100% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-
-    100% {
-      clip-path: polygon(
-        50% 50%,
-        50% 100%,
-        50% 100%,
-        50% 100%,
-        50% 100%,
-        50% 100%,
-        0% 100%
-      );
-    }
-  }
-
-  @keyframes polygon-loader-2 {
-    0% {
-      transform: scaleY(1) rotate(0deg);
-    }
-
-    49.99% {
-      transform: scaleY(1) rotate(135deg);
-    }
-
-    50% {
-      transform: scaleY(-1) rotate(0deg);
-    }
-
-    100% {
-      transform: scaleY(-1) rotate(-135deg);
-    }
-  }
-
-  .j-loader .tone-loader {
-    width: var(--loader-size);
-    height: var(--loader-size);
-    border-width: var(--loader-width);
-    border-style: var(--loader-style);
-    border-color: var(--loader-fg);
-    border-top-color: var(--loader-top-fg);
-    border-radius: 50%;
-    animation: 1s linear infinite animate-spin;
-  }
-
-  .j-loader .flow-loader {
-    width: var(--loader-size);
-    height: var(--loader-size);
-    border: none;
-    border-radius: 50%;
-    aspect-ratio: 1;
-    background: var(--loader-bg);
-    mask: var(--loader-mask);
-    animation: 1s linear infinite animate-spin;
-  }
-}

package/src/css/menu.css

@@ -1,74 +0,0 @@
-@layer components {
-  .j-menu {
-    width: 100%;
-    white-space: nowrap;
-    overflow-x: auto;
-    overflow-y: hidden;
-    scroll-behavior: smooth;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    user-select: none;
-  }
-
-  .j-menu::-webkit-scrollbar {
-    display: none;
-  }
-
-  .j-menu ol,
-  .j-menu ul,
-  .j-menu ol li,
-  .j-menu ul li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-
-  .j-menu .menu {
-    display: flex;
-    align-items: center;
-  }
-
-  .j-menu .menu .menu-item {
-    flex-shrink: 0;
-  }
-
-  .j-menu .menu .menu-item:not(:has(a)) {
-    position: relative;
-    cursor: help;
-  }
-
-  .j-menu .menu .menu-item a {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: nowrap;
-    white-space: nowrap;
-    cursor: pointer;
-    appearance: button;
-    touch-action: manipulation;
-    text-decoration: none;
-  }
-
-  .j-menu:not([data-menu-type='mobile']):not([data-menu-type='bottom'])
-    .menu
-    .menu-item.menu-item-has-children
-    > a {
-    pointer-events: none;
-  }
-
-  .j-menu .menu .menu-item .sub-menu {
-    display: none;
-    position: absolute;
-  }
-
-  .j-menu .menu .menu-item .sub-menu .menu-item a {
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    white-space: normal;
-  }
-
-  .j-menu .menu .menu-item.menu-item-has-children:hover .sub-menu {
-    display: block;
-    z-index: var(--z-submenu);
-  }
-}

package/src/css/modal.css

@@ -1,33 +0,0 @@
-@layer components {
-  .j-modal {
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-  }
-
-  .j-modal.is-fullscreen {
-    width: 100%;
-    height: 100%;
-    max-width: none;
-    max-height: none;
-  }
-
-  .j-modal .modal-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .j-modal .modal-body {
-    overflow-y: auto;
-    overflow-wrap: break-word;
-    flex: 1;
-    position: relative;
-  }
-
-  .j-modal .modal-footer {
-    display: flex;
-    justify-content: flex-end;
-  }
-}

package/src/css/offcanvas.css

@@ -1,23 +0,0 @@
-@layer components {
-  .j-offcanvas-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    pointer-events: auto;
-    z-index: var(--z-overlay);
-  }
-
-  .j-offcanvas {
-    position: fixed;
-    z-index: var(--z-offcanvas);
-  }
-
-  .j-offcanvas .offcanvas-content {
-    position: relative;
-    height: 100%;
-    overflow-y: auto;
-    scrollbar-width: none;
-  }
-}

package/src/css/pagination.css

@@ -1,15 +0,0 @@
-@layer components {
-  .j-pagination .pagination {
-    list-style: none;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-  }
-
-  .j-pagination ul.pagination li {
-    margin: 0;
-    padding: 0;
-  }
-}

package/src/css/popup.css

@@ -1,66 +0,0 @@
-@layer components {
-  .j-popup-layout {
-    display: flex;
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: var(--z-popup);
-  }
-
-  .j-popup-layout,
-  .j-popup-layout.is-center,
-  .j-popup-layout.is-center-center {
-    justify-content: center;
-    align-items: center;
-  }
-
-  .j-popup-layout.is-top,
-  .j-popup-layout.is-top-center {
-    justify-content: center;
-    align-items: flex-start;
-  }
-
-  .j-popup-layout.is-bottom,
-  .j-popup-layout.is-bottom-center {
-    justify-content: center;
-    align-items: flex-end;
-  }
-
-  .j-popup-layout.is-left,
-  .j-popup-layout.is-left-center {
-    justify-content: flex-start;
-    align-items: center;
-  }
-
-  .j-popup-layout.is-right,
-  .j-popup-layout.is-right-center {
-    justify-content: flex-end;
-    align-items: center;
-  }
-
-  .j-popup-layout.is-top-left,
-  .j-popup-layout.is-left-top {
-    justify-content: flex-start;
-    align-items: flex-start;
-  }
-
-  .j-popup-layout.is-top-right,
-  .j-popup-layout.is-right-top {
-    justify-content: flex-end;
-    align-items: flex-start;
-  }
-
-  .j-popup-layout.is-bottom-left,
-  .j-popup-layout.is-left-bottom {
-    justify-content: flex-start;
-    align-items: flex-end;
-  }
-
-  .j-popup-layout.is-bottom-right,
-  .j-popup-layout.is-right-bottom {
-    justify-content: flex-end;
-    align-items: flex-end;
-  }
-}

package/src/css/skeleton.css

@@ -1,72 +0,0 @@
-@layer components {
-  .j-skeleton {
-    display: block;
-    width: 100%;
-    min-height: var(--el-height-2xs);
-    border-radius: var(--radius-sm);
-    background: var(--ui-surface-muted);
-    color: transparent;
-    pointer-events: none;
-    user-select: none;
-    animation: animate-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-  }
-
-  .j-skeleton::selection {
-    color: transparent;
-    background: transparent;
-  }
-
-  .j-skeleton.skeleton-inline {
-    display: inline-block;
-    width: 8rem;
-    vertical-align: middle;
-  }
-
-  .j-skeleton.skeleton-text {
-    height: var(--el-height-sm);
-    min-height: var(--el-height-sm);
-  }
-
-  .j-skeleton.skeleton-title {
-    width: 60%;
-    height: var(--el-height-md);
-    min-height: var(--el-height-md);
-  }
-
-  .j-skeleton.skeleton-block {
-    height: calc(var(--el-height-md) * 4);
-    min-height: calc(var(--el-height-md) * 4);
-  }
-
-  .j-skeleton.skeleton-avatar,
-  .j-skeleton.skeleton-circle {
-    aspect-ratio: 1;
-    border-radius: 999px;
-  }
-
-  .j-skeleton.skeleton-avatar {
-    width: var(--el-height-md);
-    min-height: var(--el-height-md);
-  }
-
-  .j-skeleton.skeleton-button {
-    width: 5rem;
-    min-height: var(--el-height-md);
-  }
-
-  .j-skeleton.skeleton-image {
-    aspect-ratio: 16 / 9;
-    min-height: 0;
-  }
-
-  .j-skeleton.skeleton-static,
-  .j-skeleton[aria-busy='false'] {
-    animation: none;
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .j-skeleton {
-      animation: none;
-    }
-  }
-}

package/src/css/swiper.css

@@ -1,107 +0,0 @@
-@layer components {
-  .j-swiper {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    touch-action: pan-y;
-    user-select: none;
-    width: 100%;
-    min-height: var(--swiper-min-height);
-    border-radius: var(--radius-md);
-  }
-
-  .j-swiper .swiper-wrapper {
-    display: flex;
-    will-change: transform;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    aspect-ratio: inherit;
-    border-radius: inherit;
-  }
-
-  .j-swiper .swiper-slide {
-    position: relative;
-    display: block;
-    overflow: hidden;
-    color: inherit;
-    text-decoration: none;
-    user-select: none;
-    width: 100%;
-    min-width: 100%;
-    aspect-ratio: inherit;
-    border-radius: inherit;
-  }
-
-  .j-swiper .swiper-slide::before {
-    position: absolute;
-    content: 'loading';
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    aspect-ratio: inherit;
-    border-radius: inherit;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    letter-spacing: 1px;
-  }
-
-  .j-swiper .swiper-image {
-    position: relative;
-    display: block;
-    object-fit: cover;
-    pointer-events: none;
-    width: 100%;
-    height: 100%;
-    min-height: var(--swiper-min-height);
-    aspect-ratio: inherit;
-    border-radius: inherit;
-  }
-
-  .j-swiper .swiper-slide-title {
-    display: block;
-    position: absolute;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    z-index: 1;
-    overflow: hidden;
-  }
-
-  .j-swiper .swiper-pagination {
-    position: absolute;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-  }
-
-  .j-swiper .swiper-pagination-indicator {
-    display: inline-block;
-    cursor: pointer;
-    border-radius: 999px;
-    outline: none;
-  }
-
-  .j-swiper .swiper-navigation {
-    position: absolute;
-    top: 50%;
-    z-index: 2;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    border-radius: 999px;
-  }
-
-  .j-swiper .swiper-navigation svg {
-    pointer-events: none;
-  }
-
-  .j-swiper .swiper-navigation.is-disabled,
-  .j-swiper .swiper-navigation:disabled {
-    cursor: default;
-    opacity: 0.36;
-  }
-}

package/src/css/tabs.css

@@ -1,58 +0,0 @@
-@layer components {
-  .j-tabs {
-    display: flex;
-  }
-
-  .j-tabs,
-  .j-tabs[data-tabs-direction='top'] {
-    flex-direction: column;
-  }
-
-  .j-tabs[data-tabs-direction='bottom'] {
-    flex-direction: column-reverse;
-  }
-
-  .j-tabs[data-tabs-direction='left'] {
-    flex-direction: row;
-  }
-
-  .j-tabs[data-tabs-direction='right'] {
-    flex-direction: row-reverse;
-  }
-
-  .j-tabs .tab-wrap {
-    overflow: hidden;
-    position: relative;
-    margin: 0;
-  }
-
-  .j-tabs .tab-list {
-    display: flex;
-    -webkit-overflow-scrolling: touch;
-    scroll-behavior: smooth;
-  }
-
-  .j-tabs[data-tabs-direction='left'] .tab-list,
-  .j-tabs[data-tabs-direction='right'] .tab-list {
-    flex-direction: column;
-  }
-
-  .j-tabs .tab-list .tab-item {
-    flex-shrink: 0;
-    cursor: pointer;
-  }
-
-  .j-tabs .panel-list {
-    flex: 1;
-  }
-
-  .j-tabs .panel-list .panel-item {
-    display: none;
-    position: relative;
-    min-height: 22px;
-  }
-
-  .j-tabs .panel-list .panel-item[aria-hidden='false'] {
-    display: block;
-  }
-}

package/src/css/tag.css

@@ -1,36 +0,0 @@
-@layer components {
-  .j-tag {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    gap: var(--tag-gap);
-    padding: var(--tag-padding);
-    height: var(--tag-height);
-    line-height: var(--tag-line-height);
-    font-size: var(--tag-font-size);
-    font-weight: var(--tag-font-weight);
-    border-width: var(--tag-border-width);
-    border-style: var(--tag-border-style);
-    border-color: var(--tag-border-color);
-    border-radius: var(--tag-border-radius);
-    color: var(--tag-fg);
-    background: var(--tag-bg);
-    box-shadow: var(--tag-box-shadow);
-  }
-
-  .j-tag span {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .j-tag img,
-  .j-tag svg {
-    width: var(--tag-icon-size);
-    height: var(--tag-icon-size);
-  }
-
-  .j-tag:hover {
-    opacity: var(--opacity-hover);
-  }
-}

package/src/css/theme-palette.css

@@ -1,28 +0,0 @@
-@layer components {
-  .j-theme-palette .palette-container,
-  .j-theme-palette .palette-item {
-    display: flex;
-    flex-direction: column;
-  }
-
-  .j-theme-palette .items {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-  }
-
-  .j-theme-palette .j-button {
-    min-width: 0;
-    overflow: hidden;
-  }
-
-  .j-theme-palette .j-button .item-hex {
-    display: inline-block;
-    border-radius: 50%;
-    flex-shrink: 0;
-  }
-
-  .j-theme-palette .j-button .button-text {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}

package/src/css/themes/default/popup.css

@@ -1,7 +0,0 @@
-@layer themes {
-  .j-popup-layout {
-    background: var(--ui-popup-bg);
-    backdrop-filter: blur(4px);
-    padding: var(--s4);
-  }
-}