vanilla-jui 1.5.36 → 1.5.37

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.5.36",
+  "version": "1.5.37",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [

package/src/css/menu.css

@@ -34,20 +34,9 @@
 
   .j-menu .menu .menu-item {
     flex-shrink: 0;
-    font-size: var(--menu-font-size);
   }
 
   .j-menu .menu .menu-item:not(:has(a)) {
-    height: var(--menu-item-height);
-    line-height: var(--menu-item-line-height);
-    font-weight: var(--menu-font-weight);
-    text-decoration: underline;
-    -webkit-text-decoration-style: wavy;
-    text-decoration-style: wavy;
-    -webkit-text-decoration-color: var(--state-danger);
-    text-decoration-color: var(--state-danger);
-    text-underline-offset: 4px;
-    padding: 4px 1rem;
     position: relative;
     cursor: help;
   }
@@ -64,25 +53,6 @@
     appearance: button;
     touch-action: manipulation;
     text-decoration: none;
-
-    gap: var(--menu-link-gap);
-    color: currentColor;
-    background-color: inherit;
-    font-weight: var(--font-medium);
-
-    padding: var(--menu-item-padding);
-    height: var(--menu-item-height);
-    line-height: var(--menu-item-line-height);
-    border-width: var(--menu-item-border-width);
-    border-style: solid;
-    border-color: var(--ui-border);
-    border-radius: var(--menu-item-border-radius);
-  }
-
-  .j-menu .menu .menu-item a .el-icon,
-  .j-menu .menu .menu-item a svg {
-    width: var(--menu-item-icon-size);
-    height: var(--menu-item-icon-size);
   }
 
   .j-menu:not([data-menu-type='mobile']):not([data-menu-type='bottom'])
@@ -92,36 +62,9 @@
     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);
-  }
-
-  /* submenu */
   .j-menu .menu .menu-item .sub-menu {
     display: none;
     position: absolute;
-    transform: translateY(1px);
-    padding: var(--s2) 0;
-    background: var(--sub-menu-bg);
-    border-width: var(--sub-menu-border-width);
-    border-style: var(--sub-menu-border-style);
-    border-color: var(--sub-menu-border-color);
-    border-radius: var(--sub-menu-border-radius);
-    min-width: var(--sub-menu-min-width);
-    max-width: var(--sub-menu-max-width);
-    box-shadow: var(--sub-menu-box-shadow);
   }
 
   .j-menu .menu .menu-item .sub-menu .menu-item a {
@@ -136,518 +79,4 @@
     display: block;
     z-index: var(--z-submenu);
   }
-
-  .j-menu .menu .menu-item .sub-menu .menu-item:hover a {
-    background: var(--sub-menu-item-hover-bg);
-    color: var(--sub-menu-item-hover-fg);
-    outline-width: var(--sub-menu-item-hover-outline-width);
-    outline-style: var(--sub-menu-item-hover-outline-style);
-    outline-color: var(--sub-menu-item-hover-outline-color);
-  }
-
-  /* menu status */
-  .j-menu .menu .menu-item a:hover,
-  .j-menu .menu .menu-item.menu-item-has-children:hover > a {
-    text-decoration: none;
-    background: var(--menu-item-hover-bg);
-    color: var(--menu-item-hover-fg);
-  }
-
-  .j-menu .menu > .menu-item.current-menu-item > a {
-    color: var(--menu-link-current-fg);
-  }
-
-  .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-menu[data-menu-type='mobile'] .menu .menu-item:not(:has(a)):hover {
-    background: var(--menu-item-error-bg);
-    border-radius: var(--space);
-  }
-
-  .j-menu .menu .menu-item:not(:has(a)):hover::after,
-  .j-menu[data-menu-type='mobile'] .menu .menu-item:not(:has(a)):hover::after {
-    content: 'Error';
-    position: absolute;
-    top: 0;
-    right: 0;
-    background: var(--menu-item-error-tip-bg);
-    color: var(--menu-item-error-tip-fg);
-    font-size: var(--menu-item-error-tip-font-size);
-    padding: var(--menu-item-error-tip-padding);
-    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: var(--space);
-    grid-row-gap: var(--space);
-    min-width: 400px;
-    max-width: 600px;
-    padding-right: var(--s2);
-    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-menu[data-menu-type='mobile'] {
-    background: var(--ui-bg);
-    overflow-x: hidden;
-    overflow-y: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--ui-border) transparent;
-    height: 100%;
-  }
-
-  .j-menu[data-menu-type='mobile'] .menu {
-    flex-direction: column;
-    align-items: flex-start;
-    position: relative;
-  }
-
-  .j-menu[data-menu-type='mobile'] .menu .menu-item {
-    width: 100%;
-  }
-
-  .j-menu[data-menu-type='mobile'] .menu .menu-item:not(:has(a)) {
-    padding: var(--menu-item-padding);
-  }
-
-  .j-menu[data-menu-type='mobile'] .menu .menu-item a {
-    justify-content: flex-start;
-    flex-wrap: wrap;
-    gap: var(--s2);
-    white-space: normal;
-    min-height: var(--el-height-2xl);
-    position: relative;
-    line-height: var(--line-height-paragraph);
-  }
-
-  .j-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children
-    > a::after {
-    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-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children:hover
-    > a::after {
-    transform: none;
-  }
-
-  .j-menu[data-menu-type='mobile'] .menu .menu-item .sub-menu {
-    display: block;
-    top: 0;
-    left: 0;
-    width: 100%;
-    visibility: hidden;
-    opacity: 0;
-    /* transform: translateX(80%); */
-    transition:
-      /* transform 0.3s ease-in-out, */
-      /* visibility 0.3s ease-in-out, */ opacity 0.3s ease-in-out;
-    max-width: 100%;
-    background: var(--ui-bg);
-    padding-block: 0;
-  }
-
-  .j-menu[data-menu-type='mobile'] .menu .sub-menu .menu-item:hover a {
-    background: var(--menu-item-hover-bg);
-    color: var(--menu-item-hover-bg);
-  }
-
-  .j-menu[data-menu-type='mobile'] .menu .menu-item:active {
-    background: var(--menu-item-active-bg);
-  }
-
-  .j-menu[data-menu-type='mobile']
-    .menu
-    .menu-item.menu-item-has-children.is-active
-    > .sub-menu {
-    visibility: visible;
-    opacity: 1;
-    /* transform: translateX(0); */
-    z-index: var(--z-submenu);
-    height: 100%;
-  }
-
-  /* bottom menu */
-  .j-menu[data-menu-type='bottom'] {
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    overflow: visible;
-    background: var(--ui-bg);
-    z-index: var(--z-submenu);
-  }
-
-  .j-menu[data-menu-type='bottom'] .menu {
-    position: relative;
-    justify-content: space-between;
-    gap: 1px;
-    border-top: 1px solid var(--ui-border-subtle);
-    background: var(--menu-bg);
-  }
-
-  .j-menu[data-menu-type='bottom'] .menu .menu-item {
-    flex-shrink: unset;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--menu-item-bg);
-  }
-
-  .j-menu[data-menu-type='bottom'] .menu .menu-item a {
-    width: 100%;
-    height: var(--menu-item-height);
-    color: var(--ui-fg);
-  }
-
-  .j-menu[data-menu-type='bottom']
-    > .menu
-    > .menu-item.menu-item-has-children
-    > a::after {
-    content: '☰';
-    font-size: var(--font-size-sm);
-    margin-left: unset;
-    border: unset;
-    width: unset;
-    height: unset;
-    transition: unset;
-  }
-
-  .j-menu[data-menu-type='bottom']
-    > .menu
-    .menu-item.menu-item-has-children:hover
-    > a::after {
-    transform: none;
-  }
-
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-parent > a,
-  .j-menu[data-menu-type='bottom'] .menu .menu-item.current-menu-item > a,
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children.is-active
-    > a {
-    color: var(--tone-solid);
-  }
-
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu {
-    opacity: 0;
-    visibility: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 1px;
-    padding-block: 0;
-    min-width: var(--columns-6xs);
-    max-width: var(--columns-2xs);
-    left: 50%;
-    transform: translateX(-50%) translateY(100%);
-    bottom: calc(100% + var(--space));
-    transition:
-      transform 0.3s ease-in-out,
-      visibility 0.3s ease-in-out,
-      opacity 0.3s ease-in-out;
-    z-index: -1;
-  }
-
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children.is-active
-    > .sub-menu {
-    opacity: 1;
-    visibility: visible;
-    transform: translateX(-50%) translateY(0%);
-  }
-
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu
-    > .menu-item {
-    white-space: normal;
-    border: 1px solid transparent;
-  }
-
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu
-    > .menu-item
-    > a {
-    min-height: var(--menu-item-height);
-    justify-content: center;
-  }
-
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu
-    > .menu-item:first-of-type {
-    border-top-left-radius: var(--sub-menu-border-radius);
-    border-top-right-radius: var(--sub-menu-border-radius);
-  }
-
-  .j-menu[data-menu-type='bottom']
-    .menu
-    .menu-item.menu-item-has-children
-    > .sub-menu
-    > .menu-item:last-of-type {
-    border-bottom-left-radius: var(--sub-menu-border-radius);
-    border-bottom-right-radius: var(--sub-menu-border-radius);
-  }
-
-  .j-menu[data-menu-type='bottom'] .menu .menu-item:not(:has(a)):hover {
-    background: var(--menu-item-bg);
-  }
-
-  .j-menu[data-menu-type='bottom'] .menu .menu-item:not(:has(a)):hover:after {
-    top: -0.5rem;
-    right: unset;
-  }
-
-  /* drop menu  */
-  .drop-menu .drop-container {
-    min-width: 100px;
-    max-width: 200px;
-    padding: var(--s2);
-    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(--s2);
-    width: 100%;
-    padding: var(--space) var(--s2);
-    text-decoration: none;
-    color: var(--ui-fg-muted);
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    border-radius: var(--radius-sm);
-    transition: 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(--font-size-lg);
-    height: var(--font-size-lg);
-  }
-
-  .drop-menu .menu-item.menu-heading {
-    padding: 2px var(--s2);
-    color: var(--ui-fg-soft);
-    font-size: var(--font-size-sm);
-  }
 }