vanilla-jui 1.3.8 → 1.3.10

package/src/css/loading.css

@@ -0,0 +1,38 @@
+@layer components {
+  .j-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--loading-background, var(--ui-bg));
+    display: none;
+    justify-content: center;
+    align-items: center;
+    backdrop-filter: var(--loading-backdrop-filter, blur(2px));
+  }
+
+  .j-loading.is-active {
+    display: flex;
+    z-index: var(--loading-index, inherit);
+  }
+
+  .loading-spinner {
+    width: var(--loading-spinner-size, 3rem);
+    height: var(--loading-spinner-size, 3rem);
+    /* border: var(--loading-spinner-width, 4px) solid var(--loading-spinner-background, var(--tone-fg)); */
+    border: var(--loading-spinner-width, 4px) solid var(--loading-spinner-background, var(--tone-soft));
+    border-top: var(--loading-spinner-width, 4px) solid var(--loading-spinner-color, var(--tone-solid));
+    border-radius: 50%;
+    animation: animate-spin 1s linear infinite;
+  }
+
+  .j-loading.is-bold .loading-spinner {
+    border: none;
+    aspect-ratio: 1;
+    background:
+      radial-gradient(farthest-side, var(--tone-solid) 94%, #0000) top/8px 8px no-repeat,
+      conic-gradient(#0000 30%, var(--tone-solid));
+    mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
+  }
+}

package/src/css/menu.css

@@ -0,0 +1,564 @@
+@layer menu {
+  .j-menu {
+    width: 100%;
+    white-space: nowrap;
+    overflow-y: hidden;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    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)) {
+    font-size: var(--font-size-md);
+    font-weight: var(--font-normal);
+    padding: var(--button-padding, 0.5rem 1rem);
+    height: var(--button-height, var(--el-height-md));
+    line-height: var(--line-height);
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: var(--state-danger);
+    text-underline-offset: 4px;
+    position: relative;
+    cursor: help;
+  }
+
+  .j-menu .menu .menu-item:has(a) a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+    gap: calc(var(--space) * 1);
+    white-space: nowrap;
+    cursor: pointer;
+    appearance: button;
+    touch-action: manipulation;
+    color: currentColor;
+    background-color: inherit;
+    font-weight: var(--font-medium);
+    font-size: var(--font-size-md);
+    text-decoration: none;
+  }
+
+  .j-menu .menu .menu-item:has(a) a .el-icon,
+  .j-menu .menu .menu-item:has(a) a svg {
+    width: var(--font-size-lg);
+    height: var(--font-size-lg);
+  }
+
+  .j-menu .menu .menu-item.menu-item-has-children>a {
+    pointer-events: none;
+  }
+
+  .j-menu .menu .menu-item.menu-item-has-children>a::after {
+    content: '';
+    width: 0;
+    height: 0;
+    margin-left: 4px;
+    vertical-align: middle;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid currentColor;
+    transition: transform 0.2s ease-in-out;
+  }
+
+  .j-menu .menu .menu-item.menu-item-has-children:hover>a::after {
+    transform: rotate(180deg);
+  }
+
+  /* menu type */
+  .j-menu .menu .menu-item:has(a) a {
+    padding: var(--button-padding, 0.5rem 1rem);
+    height: var(--button-height, var(--el-height-md));
+    line-height: var(--line-height);
+    border-width: var(--border-width, 1px);
+    border-style: var(--border-style, solid);
+    border-color: var(--button-border-color, transparent);
+    border-radius: var(--button-border-radius, var(--radius-md));
+  }
+
+  /* submenu */
+  .j-menu .menu .menu-item .sub-menu {
+    display: none;
+    position: absolute;
+    transform: translateY(1px);
+    padding: calc(var(--space) * 2) 0;
+    background-color: var(--ui-surface-subtle);
+    border: 1px solid var(--ui-border);
+    border-radius: var(--radius-md);
+    min-width: 120px;
+    max-width: 240px;
+    box-shadow: var(--shadow-sm);
+  }
+
+  .j-menu .menu .menu-item .sub-menu .menu-item a {
+    justify-content: flex-start;
+    border-radius: 0;
+    flex-wrap: wrap;
+    white-space: normal;
+    height: auto;
+  }
+
+  .j-menu .menu .menu-item.menu-item-has-children:hover .sub-menu {
+    display: block;
+    z-index: var(--z-index-submenu);
+  }
+
+  .j-menu .menu .menu-item .sub-menu .menu-item:hover a {
+    background-color: var(--tone-solid);
+    color: var(--tone-fg);
+    outline: 1px solid var(--tone-solid);
+  }
+
+  /* menu status */
+  .j-menu .menu .menu-item a:hover,
+  .j-menu .menu .menu-item.menu-item-has-children:hover>a {
+    text-decoration: none;
+    background-color: var(--tone-soft);
+    color: var(--tone-text);
+  }
+
+  .j-menu .menu>.menu-item.current-menu-item>a {
+    color: var(--tone-solid);
+  }
+
+  .j-menu .menu .menu-item.current-menu-item>.sub-menu>.menu-item:not(.current-menu-item) a {
+    color: inherit;
+  }
+
+  .j-menu .menu-item.current-menu-item>.sub-menu>.menu-item:not(.current-menu-item):hover a {
+    color: var(--tone-fg);
+  }
+
+  .j-menu .menu-item.menu-item-has-children:hover>.sub-menu>.menu-item.current-menu-item a {
+    color: var(--tone-fg);
+    background-color: var(--tone-solid);
+    outline: 1px solid var(--tone-solid);
+  }
+
+  /* error status */
+  .j-menu .menu .menu-item:not(:has(a)):hover,
+  .j-mobile-menu .menu .menu-item:not(:has(a)):hover {
+    background-color: var(--state-danger-subtle);
+    border-radius: var(--space);
+  }
+
+  .j-menu .menu .menu-item:not(:has(a)):hover::after,
+  .j-mobile-menu .menu .menu-item:not(:has(a)):hover::after {
+    content: 'Error';
+    position: absolute;
+    top: 0;
+    right: 0;
+    background-color: var(--state-danger);
+    color: var(--state-danger-fg);
+    font-size: var(--font-size-sm);
+    padding: 0 var(--space);
+    border-radius: var(--space);
+  }
+
+  /* menu extensions */
+  /* list card menu */
+  .j-menu .menu-item.menu-item-has-children.list-card-menu:hover>.sub-menu {
+    min-width: 240px;
+    max-width: 360px;
+    width: auto;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    transform: translateX(-20%) translateY(1px);
+  }
+
+  .j-menu .menu-item.list-card-menu>.sub-menu>.menu-item>a {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    padding: calc(var(--space) * 1.25) calc(var(--space) * 2.5);
+    line-height: 1.75;
+  }
+
+  /* advanced card menu */
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-template-rows: repeat(6, 1fr);
+    grid-column-gap: 0px;
+    grid-row-gap: 0px;
+    min-width: 400px;
+    max-width: 600px;
+    transform: translateX(-33.33%) translateY(1px);
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu img {
+    margin: 0;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(1) {
+    grid-area: 1 / 1 / 2 / 3;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(2) {
+    grid-area: 1 / 3 / 4 / 5;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(3) {
+    grid-area: 1 / 5 / 4 / 7;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(4) {
+    grid-area: 2 / 1 / 3 / 3;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(5) {
+    grid-area: 3 / 1 / 4 / 3;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(6) {
+    grid-area: 4 / 1 / 5 / 3;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(7) {
+    grid-area: 4 / 3 / 7 / 5;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(8) {
+    grid-area: 4 / 5 / 7 / 7;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(9) {
+    grid-area: 5 / 1 / 6 / 3;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(10) {
+    grid-area: 6 / 1 / 7 / 3;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(2) a,
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(3) a,
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(7) a,
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(8) a {
+    padding: 0;
+  }
+
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(2) a:hover,
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(3) a:hover,
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(7) a:hover,
+  .j-menu .menu-item.menu-item-has-children.advanced-card-menu:hover>.sub-menu>.menu-item:nth-child(8) a:hover {
+    background-color: transparent;
+    outline-color: transparent;
+  }
+
+  /* mobile menu */
+  .j-mobile-menu {
+    width: 100%;
+    white-space: nowrap;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    scroll-behavior: smooth;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    user-select: none;
+    background-color: var(--ui-bg);
+  }
+
+  .j-mobile-menu::-webkit-scrollbar {
+    display: none;
+  }
+
+  .j-mobile-menu ol,
+  .j-mobile-menu ul,
+  .j-mobile-menu ol li,
+  .j-mobile-menu ul li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .j-mobile-menu .menu {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    position: relative;
+  }
+
+  .j-mobile-menu .menu .menu-item {
+    width: 100%;
+    flex-shrink: 0;
+    font-size: var(--font-size-md);
+    font-weight: var(--font-medium);
+  }
+
+  .j-mobile-menu .menu .menu-item:not(:has(a)) {
+    padding: var(--button-padding, 0.5rem 1rem);
+    height: var(--button-height, var(--el-height-xl));
+    text-decoration: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: var(--state-danger);
+    text-underline-offset: 4px;
+    position: relative;
+    cursor: help;
+  }
+
+  .j-mobile-menu .menu .menu-item:has(a) a {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: calc(var(--space) * 2);
+    white-space: normal;
+    appearance: button;
+    touch-action: manipulation;
+    color: currentColor;
+    min-height: var(--el-height-xl);
+    padding: calc(var(--space) * 2) calc(var(--space) * 4);
+    line-height: var(--line-height-paragraph);
+    position: relative;
+    text-decoration: none;
+  }
+
+  .j-mobile-menu .menu .menu-item:has(a) a .menu-text {
+    line-height: var(--line-height-paragraph);
+  }
+
+  .j-mobile-menu .menu .menu-item:has(a) a .el-icon,
+  .j-mobile-menu .menu .menu-item:has(a) a svg {
+    width: var(--font-size-lg);
+    height: var(--font-size-lg);
+  }
+
+  .j-mobile-menu .menu .menu-item.menu-item-has-children>a::after {
+    content: '';
+    width: 0;
+    height: 0;
+    vertical-align: middle;
+    position: absolute;
+    right: 1rem;
+    margin: 0;
+    border-left: 5px solid currentColor;
+    border-bottom: 4px solid transparent;
+    border-top: 4px solid transparent;
+  }
+
+  .j-mobile-menu .menu .menu-item .sub-menu {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    visibility: hidden;
+    opacity: 0;
+    transform: translateX(100%);
+    transition:
+      opacity 0.3s ease-in-out,
+      visibility 0.3s ease-in-out;
+
+    max-width: 100%;
+    background-color: var(--ui-bg);
+    z-index: -1;
+  }
+
+  .j-mobile-menu>.menu>.menu-item:hover>a,
+  .j-mobile-menu>.menu>.menu-item.menu-item-has-children .sub-menu>.menu-item:hover>a {
+    background-color: var(--tone-solid);
+    color: var(--tone-fg);
+    text-decoration: none;
+  }
+
+  .j-mobile-menu .menu .menu-item.menu-item-has-children.is-active>.sub-menu {
+    visibility: visible;
+    opacity: 1;
+    transform: translateX(0);
+    height: 100%;
+    z-index: var(--z-index-submenu);
+  }
+
+  /* bottom menu */
+  .j-bottom-menu {
+    width: 100%;
+    white-space: nowrap;
+    user-select: none;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+  }
+
+  .j-bottom-menu ol,
+  .j-bottom-menu ul,
+  .j-bottom-menu ol li,
+  .j-bottom-menu ul li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .j-bottom-menu .menu {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1px;
+    border-top: 1px solid var(--ui-border-subtle);
+    background: linear-gradient(to bottom,
+        var(--ui-surface-subtle) 20%,
+        var(--ui-bg-muted) 40%,
+        var(--ui-surface-muted) 50%,
+        var(--ui-bg-muted) 60%,
+        var(--ui-surface-subtle) 80%);
+    font-size: var(--font-size-md);
+  }
+
+  .j-bottom-menu .menu .menu-item {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: var(--ui-surface-subtle);
+  }
+
+  .j-bottom-menu .menu .menu-item>a {
+    width: 100%;
+    text-align: center;
+    text-decoration: none;
+    height: var(--el-height-xl);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: calc(var(--space) * 1);
+    color: var(--ui-fg);
+    padding: calc(var(--space) * 1.5);
+  }
+
+  .j-bottom-menu .menu .menu-item:has(a) a .el-icon,
+  .j-bottom-menu .menu .menu-item:has(a) a svg {
+    width: var(--font-size-lg);
+    height: var(--font-size-lg);
+  }
+
+  .j-bottom-menu>.menu>.menu-item.menu-item-has-children>a::after {
+    content: '☰';
+    font-size: var(--font-size-sm);
+  }
+
+  .j-bottom-menu .menu .menu-item.current-menu-parent>a,
+  .j-bottom-menu .menu .menu-item.current-menu-item>a,
+  .j-bottom-menu .menu .menu-item.menu-item-has-children.is-active>a {
+    background: var(--tone-subtle);
+  }
+
+  .j-bottom-menu .menu .menu-item.menu-item-has-children>.sub-menu {
+    opacity: 0;
+    visibility: hidden;
+    background: linear-gradient(to right,
+        var(--ui-surface-subtle) 20%,
+        var(--ui-bg-muted) 40%,
+        var(--ui-surface-muted) 50%,
+        var(--ui-bg-muted) 60%,
+        var(--ui-surface-subtle) 80%);
+    border: 1px solid var(--ui-border-subtle);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 1px;
+    min-width: calc(var(--space) * 30);
+    max-width: calc(var(--space) * 76);
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: calc(100% + var(--space));
+    transition:
+      visibility 0.3s ease-in-out,
+      opacity 0.3s ease-in-out;
+  }
+
+  .j-bottom-menu .menu .menu-item.menu-item-has-children.is-active>.sub-menu {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  .j-bottom-menu .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item {
+    background-color: var(--ui-surface-subtle);
+    white-space: normal;
+  }
+
+  .j-bottom-menu .menu .menu-item.menu-item-has-children>.sub-menu>.menu-item>a {
+    padding: calc(var(--space) * 1.5) calc(var(--space) * 3);
+  }
+
+  /* drop menu  */
+  .drop-menu {
+    min-width: 100px;
+    max-width: 200px;
+    padding: calc(var(--space) * 2);
+    font-size: var(--font-size-md);
+    background-color: var(--ui-surface-subtle);
+    border-radius: var(--radius-sm);
+  }
+
+  .drop-menu ul,
+  .drop-menu ol,
+  .drop-menu ul li,
+  .drop-menu ol li {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .drop-menu .menu-item a {
+    display: flex;
+    align-items: center;
+    gap: var(--drop-menu-item-gap, calc(var(--space) * 2));
+    width: 100%;
+    padding: calc(var(--space) * 1) calc(var(--space) * 2);
+    text-decoration: none;
+    color: var(--ui-fg-muted);
+    border-radius: var(--radius-md);
+    user-select: none;
+  }
+
+  .drop-menu .menu-item a .menu-text {
+    flex-grow: 1;
+  }
+
+  .drop-menu .menu-item a:hover {
+    background-color: var(--tone-solid);
+    color: var(--tone-fg);
+  }
+
+  .drop-menu .el-icon,
+  .drop-menu svg {
+    width: var(--drop-menu-icon-size, calc(var(--space) * 4));
+    height: var(--drop-menu-icon-size, calc(var(--space) * 4));
+  }
+
+  .drop-menu .menu-item.menu-heading {
+    padding: var(--menu-item-heading, calc(var(--space) * 1) calc(var(--space) * 2));
+    color: var(--ui-fg-soft);
+    font-size: var(--font-size-sm);
+  }
+}

package/src/css/modal.css

@@ -0,0 +1,111 @@
+@layer components {
+  .j-modal {
+    --modal-border: var(--modal-border-width, 1px) var(--modal-border-style, solid) var(--modal-border-color, transparent);
+
+    --modal-header-padding: calc(var(--space) * 4) calc(var(--space) * 4) 0;
+    --modal-header-gap: var(--space);
+    --modal-title-font-size: var(--font-size-md);
+    --modal-close-icon-size: var(--el-height-3xs);
+    --modal-close-font-size: var(--font-size-lg);
+    --modal-close-color: var(--ui-fg-muted);
+
+    --modal-body-padding: calc(var(--space) * 4);
+    --modal-body-line-height: var(--line-height-paragraph);
+
+    --modal-footer-padding: 0 calc(var(--space) * 4) calc(var(--space) * 4);
+    --modal-footer-gap: calc(var(--space) * 2);
+
+    background: var(--modal-background, var(--ui-bg));
+    border: var(--modal-border, 1px solid var(--ui-border));
+    border-radius: var(--modal-border-radius, var(--radius-md));
+    box-shadow: var(--modal-box-shadow, var(--shadow-md));
+    min-width: var(--modal-min-width, 300px);
+    max-width: var(--modal-max-width, 500px);
+    max-height: var(--modal-max-height, 90vh);
+    overflow: hidden;
+    animation: animate-fade-in 0.35s ease-in-out;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
+
+  .j-popup-layout:has(.is-fullscreen) {
+    padding: 0;
+  }
+
+  .j-modal.is-fullscreen {
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    /* --modal-border-color: var(--ui-border-subtle); */
+  }
+
+  .j-modal .modal-header {
+    padding: var(--modal-header-padding);
+    border-bottom: var(--modal-border);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--modal-header-gap);
+  }
+
+  .j-modal .modal-header .modal-title {
+    margin: 0;
+    font-size: var(--modal-title-font-size);
+    font-weight: 500;
+  }
+
+  .j-modal .modal-header .modal-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: var(--modal-close-icon-size);
+    height: var(--modal-close-icon-size);
+    font-size: var(--modal-close-font-size);
+    color: var(--modal-close-color);
+    text-align: center;
+  }
+
+  .j-modal .modal-header .modal-close:focus-within {
+    outline: 2px solid var(--tone-solid);
+    color: var(--tone-solid);
+  }
+
+  .j-modal .modal-header .modal-close:hover {
+    color: var(--tone-solid);
+    background-color: var(--tone-subtle);
+  }
+
+  .j-modal .modal-body {
+    padding: var(--modal-body-padding);
+    overflow-y: auto;
+    overflow-wrap: break-word;
+    flex: 1;
+  }
+
+  .j-modal .modal-body p {
+    margin: 0;
+    line-height: var(--modal-body-line-height);
+  }
+
+  .j-modal.is-fullscreen .modal-header {
+    --modal-header-padding: calc(var(--space) * 4);
+  }
+
+  .j-modal.is-fullscreen .modal-body {
+    --modal-body-padding: 0;
+  }
+
+  .j-modal.is-fullscreen .modal-footer {
+    --modal-footer-padding: calc(var(--space) * 4);
+  }
+
+  .j-modal .modal-footer {
+    padding: var(--modal-footer-padding);
+    border-top: var(--modal-footer-border, var(--modal-border));
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--modal-footer-gap);
+  }
+}