vanilla-jui 1.3.9 → 1.3.11

package/src/css/offcanvas.css

@@ -0,0 +1,104 @@
+@layer components {
+  .j-offcanvas-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--offcanvas-overlay-background,
+        var(--ui-overlay-muted));
+    z-index: var(--z-overlay);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  .j-offcanvas-overlay.is-active {
+    opacity: 1;
+  }
+
+  .j-offcanvas {
+    position: fixed;
+    z-index: var(--z-offcanvas);
+    background: var(--offcanvas-background, var(--ui-bg));
+    box-shadow: var(--offcanvas-box-shadow, var(--shadow-md));
+    --offcanvas-border: 1px solid var(--ui-border-subtle);
+  }
+
+  .j-offcanvas.is-slide,
+  .j-offcanvas.is-push {
+    transition: transform 0.3s ease;
+  }
+
+  .j-offcanvas:not(.is-slide):not(.is-push) {
+    transition: none;
+  }
+
+  .j-offcanvas.is-left {
+    top: 0;
+    left: 0;
+    width: 300px;
+    height: 100%;
+    transform: translateX(-100%);
+    border-right: var(--offcanvas-border);
+  }
+
+  .j-offcanvas.is-right {
+    top: 0;
+    right: 0;
+    width: 300px;
+    height: 100%;
+    transform: translateX(100%);
+    border-left: var(--offcanvas-border);
+  }
+
+  .j-offcanvas.is-top {
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 200px;
+    transform: translateY(-100%);
+    border-bottom: var(--offcanvas-border);
+  }
+
+  .j-offcanvas.is-bottom {
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 200px;
+    transform: translateY(100%);
+    border-top: var(--offcanvas-border);
+  }
+
+  .j-offcanvas.is-slide.is-active,
+  .j-offcanvas.is-active:not(.is-push) {
+    transform: translate(0, 0);
+  }
+
+  .offcanvas-push-body {
+    transition: transform 0.3s ease;
+    overflow: hidden;
+  }
+
+  .offcanvas-push-left {
+    transform: translateX(300px);
+  }
+
+  .offcanvas-push-right {
+    transform: translateX(-300px);
+  }
+
+  .offcanvas-push-top {
+    transform: translateY(200px);
+  }
+
+  .offcanvas-push-bottom {
+    transform: translateY(-200px);
+  }
+
+  .j-offcanvas .offcanvas-content {
+    height: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+    position: relative;
+  }
+}

package/src/css/pagination.css

@@ -0,0 +1,25 @@
+@layer components {
+  .j-pagination {
+    font-size: var(--pagination-font-size, var(--font-size-md));
+  }
+
+  .j-pagination a {
+    text-decoration: none;
+    color: var(--pagination-link-color, var(--ui-fg));
+  }
+
+  .j-pagination .pagination {
+    list-style: none;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--pagination-gap, var(--space));
+    margin: 0;
+    padding: 0;
+  }
+
+  .j-pagination .more span,
+  .j-pagination .is-active {
+    cursor: default;
+  }
+}

package/src/css/popup.css

@@ -0,0 +1,69 @@
+@layer components {
+  .j-popup-layout {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--popup-background, var(--ui-popup-background));
+    backdrop-filter: var(--popup-backdrop-filter, blur(4px));
+    display: flex;
+    padding: var(--popup-layout-padding, var(--s4));
+    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

@@ -0,0 +1,76 @@
+@layer components {
+  .j-skeleton {
+    --skeleton-background: var(--ui-surface-muted);
+    --skeleton-radius: var(--radius-sm, 4px);
+    --skeleton-duration: 1.5s;
+
+    display: block;
+    width: 100%;
+    min-height: var(--el-height-2xs);
+    border-radius: var(--skeleton-radius);
+    background: var(--skeleton-background);
+    color: transparent;
+    pointer-events: none;
+    user-select: none;
+    animation: animate-pulse var(--skeleton-duration) 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/status.css

@@ -0,0 +1,56 @@
+/* 
+ * status.css
+ * - sad mode
+ * - disabled
+ * - readonly
+ * - data-action
+ * - shape status
+ * - drag status
+ */
+@layer status {
+
+  /* sad mode */
+  .is-sad {
+    filter: grayscale(100%);
+  }
+
+
+
+  /* readonly */
+  [readonly] {
+    opacity: var(--opacity-readonly);
+    cursor: default;
+  }
+
+  /* data-action */
+  [data-action] {
+    cursor: pointer;
+  }
+
+  /* shape status */
+  .is-circle {
+    border-radius: 50%;
+  }
+
+  .is-round {
+    border-radius: 0.5rem;
+  }
+
+  /* drag status */
+  .dragging {
+    cursor: move;
+    cursor: grab;
+  }
+
+  .dragging:active {
+    cursor: grabbing;
+  }
+
+  /* disabled */
+  [disabled],
+  :disabled,
+  .is-disabled {
+    cursor: not-allowed;
+    user-select: none;
+  }
+}

package/src/css/swiper.css

@@ -0,0 +1,160 @@
+@layer components {
+  .j-swiper {
+    position: relative;
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    touch-action: pan-y;
+    user-select: none;
+  }
+
+  .j-swiper .swiper-wrapper {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    will-change: transform;
+  }
+
+  .j-swiper .swiper-slide {
+    position: relative;
+    display: block;
+    width: var(--swiper-slide-width, 100%);
+    min-width: 100%;
+    overflow: hidden;
+    color: inherit;
+    text-decoration: none;
+    user-select: none;
+  }
+
+  .j-swiper .swiper-image {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: var(--swiper-min-height, 180px);
+    object-fit: cover;
+    pointer-events: none;
+  }
+
+  .j-swiper .swiper-slide-title {
+    position: absolute;
+    right: var(--swiper-title-inset, var(--s3));
+    bottom: var(--swiper-title-inset, var(--s3));
+    left: var(--swiper-title-inset, var(--s3));
+    z-index: 1;
+    display: block;
+    padding: calc(var(--space) * 1.5) var(--s2);
+    overflow: hidden;
+    color: var(--swiper-title-color, #fff);
+    font-size: var(--swiper-title-font-size, var(--font-size-lg));
+    font-weight: var(--font-weight-bold, 700);
+    line-height: 1.35;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background: var(--swiper-title-background, rgb(0 0 0 / 35%));
+    border-radius: var(--radius-sm);
+  }
+
+  .j-swiper .swiper-pagination {
+    position: absolute;
+    z-index: 2;
+    display: flex;
+    gap: var(--swiper-pagination-gap, 7px);
+    align-items: center;
+    justify-content: center;
+  }
+
+  .j-swiper .swiper-pagination.is-horizontal {
+    right: var(--s3);
+    bottom: var(--s2);
+    left: var(--s3);
+  }
+
+  .j-swiper .swiper-pagination-indicator {
+    display: inline-block;
+    width: var(--swiper-indicator-size, 8px);
+    height: var(--swiper-indicator-size, 8px);
+    padding: 0;
+    cursor: pointer;
+    background: var(--swiper-indicator-background, rgb(255 255 255 / 62%));
+    border: 0;
+    border-radius: 999px;
+    outline: none;
+    transition:
+      width var(--duration-fast, 160ms) ease,
+      background-color var(--duration-fast, 160ms) ease,
+      opacity var(--duration-fast, 160ms) ease;
+  }
+
+  .j-swiper .swiper-pagination-indicator:hover,
+  .j-swiper .swiper-pagination-indicator:focus-visible {
+    background: var(--swiper-indicator-hover-background,
+        rgb(255 255 255 / 86%));
+  }
+
+  .j-swiper .swiper-pagination-indicator.is-active,
+  .j-swiper .swiper-pagination-indicator.active {
+    width: var(--swiper-indicator-active-width, 22px);
+    background: var(--swiper-indicator-active-background, #fff);
+  }
+
+  .j-swiper .swiper-navigation {
+    position: absolute;
+    top: 50%;
+    z-index: 2;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--swiper-navigation-size, 36px);
+    height: var(--swiper-navigation-size, 36px);
+    padding: 0;
+    color: var(--swiper-navigation-color, #fff);
+    cursor: pointer;
+    background: var(--swiper-navigation-background, rgb(0 0 0 / 35%));
+    border: 0;
+    border-radius: 999px;
+    transform: translateY(-50%);
+    transition:
+      background-color var(--duration-fast, 160ms) ease,
+      opacity var(--duration-fast, 160ms) ease;
+  }
+
+  .j-swiper .swiper-navigation:hover,
+  .j-swiper .swiper-navigation:focus-visible {
+    background: var(--swiper-navigation-hover-background, rgb(0 0 0 / 65%));
+    outline: none;
+  }
+
+  .j-swiper .swiper-navigation.is-prev {
+    left: var(--s2);
+  }
+
+  .j-swiper .swiper-navigation.is-next {
+    right: var(--s2);
+  }
+
+  .j-swiper .swiper-navigation svg {
+    width: var(--swiper-navigation-icon-size, 18px);
+    height: var(--swiper-navigation-icon-size, 18px);
+    pointer-events: none;
+  }
+
+  .j-swiper .swiper-navigation.is-disabled,
+  .j-swiper .swiper-navigation:disabled {
+    cursor: default;
+    opacity: 0.36;
+  }
+
+  @media (max-width: 640px) {
+    .j-swiper .swiper-slide-title {
+      right: var(--s2);
+      bottom: var(--s2);
+      left: var(--s2);
+      font-size: var(--font-size-md);
+    }
+
+    .j-swiper .swiper-navigation {
+      width: 32px;
+      height: 32px;
+    }
+  }
+}

package/src/css/table.css

@@ -0,0 +1,52 @@
+@layer components {
+  .j-table-container {
+    max-width: 100%;
+    overflow: auto;
+    overflow-y: hidden;
+  }
+
+  table.j-table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+    border-spacing: 0;
+  }
+  table.j-table tr.is-selected {
+    background-color: var(--table-selected-background, var(--tone-soft));
+  }
+
+  table.j-table td,
+  table.j-table th {
+    border-width: var(--table-border-width, 0 0 1px);
+    border-style: var(--table-border-style, solid);
+    border-color: var(--table-border-color, var(--ui-border));
+    padding: var(--table-padding, 0.5em 0.75em);
+  }
+
+  table.j-table th:not([align]) {
+    text-align: var(--table-cell-text-align, left);
+  }
+
+  table.j-table td:not([align]),
+  table.j-table th:not([align]) {
+    text-align: inherit;
+  }
+
+  table.j-table a {
+    text-decoration: var(--table-link-decoration, inherit);
+    color: var(--table-link-color, var(--tone-solid));
+  }
+
+  table.j-table.is-striped thead tr,
+  table.j-table.is-striped tbody tr:not(.is-selected):nth-child(2n) {
+    background-color: var(--table-striped-background, var(--tone-soft));
+  }
+  table.j-table.is-hoverable tbody tr:hover {
+    background-color: var(--table-hover-background, var(--tone-soft));
+  }
+
+  table.j-table.is-bordered td,
+  table.j-table.is-bordered th {
+    border-width: var(--table-border-width, var(--border-width, 1px));
+  }
+}

package/src/css/tabs.css

@@ -0,0 +1,95 @@
+@layer components {
+  .j-tabs {
+    display: flex;
+  }
+
+  .j-tabs,
+  .j-tabs.is-top {
+    flex-direction: column;
+  }
+
+  .j-tabs.is-bottom {
+    flex-direction: column-reverse;
+  }
+
+  .j-tabs.is-left {
+    flex-direction: row;
+  }
+
+  .j-tabs.is-right {
+    flex-direction: row-reverse;
+  }
+
+  .j-tabs .tab-wrap {
+    overflow: hidden;
+    position: relative;
+    margin: 0;
+  }
+
+  .j-tabs .tab-list {
+    display: flex;
+    user-select: none;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+  }
+
+  .j-tabs.is-left .tab-list,
+  .j-tabs.is-right .tab-list {
+    flex-direction: column;
+  }
+
+  .j-tabs .tab-list .tab-item {
+    flex-shrink: 0;
+    padding: var(--tab-list-item-padding, var(--s2) var(--s3));
+    margin: var(--tab-list-item-margin, 0);
+    cursor: pointer;
+  }
+
+  .j-tabs.is-top .tab-wrap {
+    border-bottom: var(--tab-wrap-bottom-border, 1px solid var(--ui-border-subtle));
+  }
+
+  .j-tabs.is-bottom .tab-wrap {
+    border-top: var(--tab-wrap-top-border, 1px solid var(--ui-border-subtle));
+  }
+
+  .j-tabs.is-left .tab-wrap {
+    border-right: var(--tab-wrap-right-border, 1px solid var(--ui-border-subtle));
+  }
+
+  .j-tabs.is-right .tab-wrap {
+    border-left: var(--tab-wrap-left-border, 1px solid var(--ui-border-subtle));
+  }
+
+  .j-tabs .tab-list .tab-item.is-active {
+    color: var(--tone-solid);
+    font-weight: var(--font-medium);
+    /* text-decoration: underline;
+    text-decoration-color: var(--tone-solid);
+    text-underline-offset: var(--space); */
+  }
+
+  .j-tabs .tab-list .tab-item.is-disabled {
+    color: var(--ui-border-strong);
+    cursor: not-allowed;
+  }
+
+  .j-tabs .tab-panel {
+    padding: var(--tab-panel-padding, var(--s2) var(--s3));
+    margin: var(--tab-panel-margin, 0);
+  }
+
+  .j-tabs .tab-panel .panel-item {
+    display: none;
+    margin: var(--tab-panel-item-margin, 0);
+    position: relative;
+  }
+
+  .j-tabs .tab-panel .panel-item.is-active {
+    display: block;
+  }
+
+  .j-tabs .tab-panel .panel-item>* {
+    margin: 0;
+  }
+}