vanilla-jui 1.5.35 → 1.5.36

package/src/css/table.css

@@ -1,41 +1,12 @@
 @layer components {
-  .j-table-container {
-    max-width: 100%;
-    overflow-y: hidden;
-    overflow-x: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--ui-border) transparent;
-  }
-
   table {
-    /* width: var(--table-width); */
     text-indent: 0;
     border-color: inherit;
     border-collapse: collapse;
-    /* border-spacing: 0; */
-  }
-
-  table td,
-  table th {
-    border-width: var(--table-border-width);
-    border-style: var(--table-border-style);
-    border-color: var(--table-border-color);
-    padding: var(--table-cell-padding);
-    text-align: var(--table-cell-text-align);
-    vertical-align: var(--table-cell-vertical-align);
-  }
 
-  table thead th {
-    background: var(--table-striped-bg);
-    font-weight: var(--table-header-font-weight);
-    white-space: nowrap;
-  }
-
-  table tbody td {
-    min-width: var(--table-cell-min-width);
-  }
-
-  table tbody tr:hover {
-    background: var(--table-hover-bg);
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--ui-border) transparent;
+    display: block;
   }
 }

package/src/css/tabs.css

@@ -38,23 +38,16 @@
   }
 
   .j-tabs .tab-list .tab-item {
-    padding: var(--tab-list-item-padding);
-    margin: var(--tab-list-item-margin);
-    color: var(--tab-fg);
-    font-weight: var(--tab-list-font-weight);
     flex-shrink: 0;
     cursor: pointer;
   }
 
   .j-tabs .panel-list {
-    padding: var(--panel-list-padding);
-    margin: var(--panel-list-margin);
     flex: 1;
   }
 
   .j-tabs .panel-list .panel-item {
     display: none;
-    margin: var(--panel-list-item-margin);
     position: relative;
     min-height: 22px;
   }

package/src/css/theme-palette.css

@@ -1,65 +1,31 @@
 @layer components {
-  .j-theme-palette {
-    padding: var(--palette-padding);
-  }
-
   .j-theme-palette .palette-container {
     display: flex;
     flex-direction: column;
-    gap: var(--palette-container-gap);
   }
 
-  .j-theme-palette .palette-container .palette-item {
+  .j-theme-palette .palette-item {
     display: flex;
     flex-direction: column;
-    gap: var(--palette-item-gap);
-  }
-
-  .j-theme-palette .palette-container .palette-item .item-title {
-    font-size: var(--palette-item-title-font-size);
-    font-weight: var(--palette-item-title-font-weight);
   }
 
-  .j-theme-palette .palette-container .palette-item .items {
+  .j-theme-palette .items {
     display: grid;
-    grid-template-columns: var(--palette-items-columns);
-    gap: var(--palette-items-gap);
+    grid-template-columns: repeat(3, 1fr);
   }
 
-  .j-theme-palette .palette-container .palette-item .items > button {
-    padding-inline: var(--s2);
+  .j-theme-palette .j-button {
     min-width: 0;
     overflow: hidden;
   }
 
-  .j-theme-palette
-    .palette-container
-    .palette-item[data-palette='theme']
-    .items
-    > button {
-    justify-content: flex-start;
-  }
-
-  .j-theme-palette
-    .palette-container
-    .palette-item
-    .items
-    > button
-    span.item-hex {
+  .j-theme-palette .j-button .item-hex {
     display: inline-block;
-    width: var(--palette-items-icon-size);
-    height: var(--palette-items-icon-size);
     border-radius: 50%;
     flex-shrink: 0;
-    margin-right: var(--space);
   }
 
-  .j-theme-palette
-    .palette-container
-    .palette-item
-    .items
-    > button
-    span.button-text {
+  .j-theme-palette .j-button .button-text {
     overflow: hidden;
     text-overflow: ellipsis;
   }

package/src/css/themes/default/accordion.css

@@ -1,14 +1,91 @@
 @layer themes {
   .j-accordion {
-    --accordion-font-size: var(--font-size-md);
     --accordion-font-weight: var(--font-medium);
-    --accordion-header-font-size: var(--font-size-md);
-    --accordion-header-padding: var(--s2) var(--s3);
-    --accordion-header-margin: 0;
     --accordion-border: 1px solid var(--ui-border-subtle);
     --accordion-icon-transform: rotate(0deg);
-    --accordion-panel-margin: 0;
-    --accordion-panel-content-margin: 0;
-    --accordion-panel-content-padding: 0 var(--s3) var(--s2);
+  }
+
+  .j-accordion .accordion-header {
+    padding: var(--s2) var(--s3);
+    margin: 0;
+    font-weight: var(--accordion-font-weight);
+    font-size: var(--font-size-md);
+
+    border-bottom: var(--accordion-border);
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-header {
+    gap: var(--space);
+    border-bottom: 0;
+    border-right: var(--accordion-border);
+  }
+
+  .j-accordion[data-direction='horizontal']
+    .accordion-header[aria-expanded='true'] {
+    border-right: 0;
+  }
+
+  .j-accordion .accordion-header[aria-expanded='false']:hover {
+    background: var(--ui-bg-subtle);
+  }
+
+  .j-accordion[data-direction='horizontal']
+    .accordion-header[aria-expanded='false']:nth-last-child(2) {
+    border-right: 0;
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'] .header-title {
+    --accordion-font-weight: var(--font-bold);
+  }
+
+  .j-accordion .accordion-header .header-arrow {
+    transform: var(--accordion-icon-transform);
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-header .header-arrow {
+    --accordion-icon-transform: rotate(-90deg);
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'] .header-arrow {
+    --accordion-icon-transform: rotate(180deg);
+  }
+
+  .j-accordion[data-direction='horizontal']
+    .accordion-header[aria-expanded='true']
+    .header-arrow {
+    --accordion-icon-transform: rotate(90deg);
+  }
+
+  .j-accordion .accordion-panel {
+    margin: 0;
+    font-size: var(--font-size-md);
+    border-bottom: var(--accordion-border);
+  }
+
+  .j-accordion .accordion-panel[aria-hidden='false'] {
+    min-height: 2rem;
+  }
+
+  .j-accordion[data-direction='horizontal']
+    .accordion-panel[aria-hidden='false'] {
+    border-right: var(--accordion-border);
+    border-bottom: 0;
+    flex: 1;
+  }
+
+  .j-accordion .accordion-header[aria-expanded='true'],
+  .j-accordion .accordion-header[aria-expanded='false']:nth-last-child(2),
+  .j-accordion .accordion-panel[aria-hidden='true'],
+  .j-accordion .accordion-panel:last-child {
+    border-bottom: 0;
+  }
+
+  .j-accordion[data-direction='horizontal'] .accordion-panel:last-child {
+    border-right: 0;
+  }
+
+  .j-accordion .accordion-panel .panel-content {
+    margin: 0;
+    padding: 0 var(--s3) var(--s2);
   }
 }

package/src/css/themes/default/avatar.css

@@ -3,6 +3,20 @@
     --avatar-size: var(--el-height-md);
     --avatar-border-radius: var(--radius-sm);
     --avatar-box-shadow: var(--shadow-sm);
+
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    box-shadow: var(--avatar-box-shadow);
+    border: var(--avatar-border);
+    border-radius: var(--avatar-border-radius);
+    background: var(--avatar-bg);
+    color: var(--avatar-fg);
+    font-size: var(--avatar-font-size);
+    font-weight: var(--avatar-font-weight);
+  }
+
+  .j-avatar img {
+    border-radius: var(--avatar-border-radius);
   }
 
   .j-avatar.is-2xs {
@@ -44,6 +58,7 @@
   }
 
   .j-avatar-group .j-avatar:not(:first-child) {
+    -webkit-margin-start: calc(var(--space) * -3);
     margin-inline-start: calc(var(--space) * -3);
   }
 

package/src/css/themes/default/badge.css

@@ -5,19 +5,40 @@
     --badge-height: 1.25rem;
     --badge-font-size: var(--font-size-sm);
     --badge-font-weight: var(--font-medium);
-    --badge-line-height: var(--line-height-self);
     --badge-radius: 500px;
     --badge-border-color: var(--ui-border);
     --badge-fg: var(--ui-fg);
     --badge-bg: var(--ui-bg);
     --badge-box-shadow: none;
+    --badge-gap: 4px;
+
+    gap: var(--badge-gap);
+    padding: var(--badge-padding);
+    min-width: var(--badge-min-width);
+    height: var(--badge-height);
+    font-size: var(--badge-font-size);
+    font-weight: var(--badge-font-weight);
+    border-radius: var(--badge-radius);
+    border: 1px solid var(--badge-border-color);
+    color: var(--badge-fg);
+    background-color: var(--badge-bg);
+    box-shadow: var(--badge-box-shadow);
+  }
+
+  .j-badge svg {
+    width: var(--font-size-sm);
+  }
+
+  .j-badge.is-sm svg {
+    width: var(--font-size-xs);
   }
 
   .j-badge.is-sm {
-    --badge-padding: 0 calc(var(--space) * 0.75);
+    --badge-padding: 0 var(--space);
     --badge-min-width: 1rem;
     --badge-height: 1rem;
-    --badge-font-size: 0.625rem;
+    --badge-font-size: var(--font-size-xs);
+    --badge-gap: 2px;
   }
 
   .j-badge.is-reverse {

package/src/css/themes/default/breadcrumb.css

@@ -6,6 +6,14 @@
     --breadcrumb-divider-fg: var(--ui-fg-soft);
     --breadcrumb-link-fg: var(--tone-text);
     --breadcrumb-item-padding: 0 var(--s2);
+
+    font-size: var(--breadcrumb-font-size);
+    color: var(--breadcrumb-fg);
+  }
+
+  .j-breadcrumb svg {
+    width: var(--breadcrumb-icon-size);
+    height: var(--breadcrumb-icon-size);
   }
 
   .j-breadcrumb.is-sm {
@@ -18,10 +26,20 @@
     --breadcrumb-icon-size: var(--font-size-lg);
   }
 
+  .j-breadcrumb a {
+    gap: var(--space);
+    color: var(--breadcrumb-link-fg);
+    padding: var(--breadcrumb-item-padding);
+  }
+
   .j-breadcrumb a:hover {
     --breadcrumb-link-fg: var(--tone-solid);
   }
 
+  .j-breadcrumb li + li::before {
+    color: var(--breadcrumb-divider-fg);
+  }
+
   .j-breadcrumb li.is-active a {
     --breadcrumb-link-fg: var(--ui-fg-muted);
   }

package/src/css/themes/default/button.css

@@ -1,26 +1,33 @@
 @layer themes {
-  .j-button-group {
-    --btn-group-box-shadow: var(--shadow-sm);
-  }
-
   .j-button {
-    --btn-gap: var(--space) calc(var(--space) * 1.5);
-    /* --btn-font-weight: var(--font-medium); */
     --btn-font-size: var(--font-size-md);
     --btn-height: var(--el-height-md);
-    --btn-line-height: var(--line-height-self);
     --btn-fg: inherit;
     --btn-bg: transparent;
     --btn-padding: 0 var(--s3);
-    --btn-border-width: 1px;
-    --btn-border-style: solid;
     --btn-border-color: transparent;
-    --btn-border-radius: var(--radius-md);
+    --btn-radius: var(--radius-md);
     --btn-box-shadow: var(--shadow-sm);
+
+    gap: var(--space);
+    font-size: var(--btn-font-size);
+    height: var(--btn-height);
+    line-height: 1;
+    color: var(--btn-fg);
+    background-color: var(--btn-bg);
+    padding: var(--btn-padding);
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--btn-border-color);
+    border-radius: var(--btn-radius);
+    box-shadow: var(--btn-box-shadow);
+    outline: none;
   }
 
-  .j-button svg {
-    --btn-svg-size: var(--font-size-md);
+  .j-button.is-xs {
+    --btn-font-size: var(--font-size-sm);
+    --btn-height: var(--el-height-xs);
+    --btn-padding: var(--space) var(--s2);
   }
 
   .j-button.is-sm {
@@ -35,6 +42,12 @@
     --btn-padding: 0 var(--s3);
   }
 
+  .j-button.is-xl {
+    --btn-font-size: var(--font-size-xl);
+    --btn-height: var(--el-height-xl);
+    --btn-padding: 0 var(--s4);
+  }
+
   .j-button.is-default {
     --btn-fg: var(--ui-fg);
     --btn-bg: var(--ui-bg);
@@ -70,13 +83,11 @@
 
   .j-button.is-text {
     --btn-border-color: transparent;
-    --btn-text-height: auto;
-    --btn-text-padding: 0;
     --btn-box-shadow: none;
   }
 
   .j-button.is-icon {
-    aspect-ratio: var(--aspect-icon, 1);
+    aspect-ratio: 1/1;
     --btn-padding: var(--icon-padding, 0);
   }
 
@@ -119,14 +130,18 @@
 
   .j-button-group {
     --btn-padding: 0 var(--s2);
+    --btn-radius: var(--radius-md);
+
+    margin: 0;
+    box-shadow: var(--shadow-sm);
+    border-radius: var(--btn-radius);
   }
 
-  /* disabled */
+  /* status */
   .j-button:disabled {
     opacity: var(--opacity-disabled);
   }
 
-  /* status */
   .j-button:not(:disabled) {
     cursor: pointer;
   }
@@ -139,13 +154,48 @@
     opacity: var(--opacity-active);
   }
 
-  .j-button:not(:disabled).is-active {
-    --opacity: var(--opacity-active);
+  .j-button:not(:disabled).is-active,
+  .j-button:not(:disabled):focus,
+  .j-button:not(:disabled):focus-within,
+  .j-button:not(:disabled):focus-visible {
     --btn-border-color: var(--tone-solid);
+    --btn-box-shadow: 0 0 0 4px var(--tone-ring);
   }
 
-  .j-button:not(:disabled):focus-visible {
-    outline-color: var(--btn-ring, var(--tone-solid));
+  .j-button.is-reverse:not(:disabled).is-active,
+  .j-button.is-reverse:not(:disabled):focus,
+  .j-button.is-reverse:not(:disabled):focus-within,
+  .j-button.is-reverse:not(:disabled):focus-visible {
+    --btn-border-color: transparent;
+    --btn-box-shadow: 0 0 0 4px var(--tone-card-active);
+  }
+
+  .j-button.is-success:not(:disabled).is-active,
+  .j-button.is-success:not(:disabled):focus,
+  .j-button.is-success:not(:disabled):focus-within,
+  .j-button.is-success:not(:disabled):focus-visible {
+    --btn-border-color: transparent;
+    --btn-box-shadow: 0 0 0 4px var(--state-success-ring);
+  }
+
+  .j-button.is-warning:not(:disabled).is-active,
+  .j-button.is-warning:not(:disabled):focus,
+  .j-button.is-warning:not(:disabled):focus-within,
+  .j-button.is-warning:not(:disabled):focus-visible {
+    --btn-border-color: transparent;
+    --btn-box-shadow: 0 0 0 4px var(--state-warning-ring);
+  }
+
+  .j-button.is-danger:not(:disabled).is-active,
+  .j-button.is-danger:not(:disabled):focus,
+  .j-button.is-danger:not(:disabled):focus-within,
+  .j-button.is-danger:not(:disabled):focus-visible,
+  .j-button.is-error:not(:disabled).is-active,
+  .j-button.is-error:not(:disabled):focus,
+  .j-button.is-error:not(:disabled):focus-within,
+  .j-button.is-error:not(:disabled):focus-visible {
+    --btn-border-color: transparent;
+    --btn-box-shadow: 0 0 0 4px var(--state-danger-muted);
   }
 
   .j-button.is-default:hover:not(:disabled) {
@@ -157,10 +207,11 @@
     --btn-bg: var(--tone-subtle);
   }
 
+  .j-button.is-text:not(:disabled).is-active,
   .j-button.is-text:not(:disabled):active,
-  .j-button.is-text:not(:disabled):focus-visible,
-  .j-button.is-text:not(:disabled).is-active {
-    outline: none;
+  .j-button.is-text:not(:disabled):focus,
+  .j-button.is-text:not(:disabled):focus-within,
+  .j-button.is-text:not(:disabled):focus-visible {
     --btn-fg: var(--tone-solid);
     text-decoration: underline;
     text-underline-offset: var(--space);
@@ -191,13 +242,60 @@
   }
 
   .j-button-group .j-button:active,
+  .j-button-group .j-button:focus,
   .j-button-group .j-button:focus-visible,
   .j-button-group .j-button:focus-within {
-    outline: 0;
-    opacity: var(--opacity-active);
+    /* opacity: var(--opacity-active); */
     z-index: 1;
   }
 
+  .j-button-group .j-button:not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .j-button-group .j-button:not(:last-child) {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .j-button-group .j-button:not(:first-child):not(:last-child) {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+    border-left-width: 0;
+    border-right-width: 0;
+  }
+
+  .j-button-group.is-vertical {
+    flex-direction: column;
+  }
+
+  .j-button-group.is-vertical .j-button:not(:last-child) {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .j-button-group.is-vertical .j-button:not(:first-child) {
+    margin-left: 0;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  .j-button-group.is-vertical .j-button:not(:last-child):not(:first-child) {
+    border-left-width: 1px;
+    border-right-width: 1px;
+    border-top-width: 0;
+    border-bottom-width: 0;
+  }
+
+  .j-button-group.is-vertical .j-button:first-child {
+    border-top-right-radius: var(--btn-radius);
+  }
+
+  .j-button-group.is-vertical .j-button:last-child {
+    border-bottom-left-radius: var(--btn-radius);
+  }
+
   .j-button-group.is-vertical .j-button:focus-within {
     z-index: auto;
   }

package/src/css/themes/default/drop.css

@@ -1,11 +1,13 @@
 @layer themes {
-  .j-drop {
-    --drop-border-width: 1px;
-    --drop-border-style: solid;
-    --drop-border-color: var(--ui-border);
-    --drop-border-radius: var(--radius-sm);
-    --drop-fg: var(--ui-fg);
-    --drop-bg: var(--ui-bg);
-    --drop-box-shadow: var(--shadow-sm);
+  .drop-container {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--ui-border);
+    border-radius: var(--radius-sm);
+    background: var(--ui-bg);
+    color: var(--ui-fg);
+    box-shadow: var(--shadow-sm);
+    min-width: 64px;
+    min-height: 32px;
   }
 }

package/src/css/themes/default/editor.css

@@ -10,14 +10,12 @@
 
   .j-editor {
     --editor-font-size: var(--font-size-lg);
-    --editor-line-height: 1.85;
+    --editor-p-line-height: 1.75;
     --editor-word-space: 0.02em;
     --editor-letter-space: 0.01em;
-    --editor-heading-space: 2rem;
-    --editor-block-space: 1.5rem;
-    --editor-list-space: 1.25rem;
+    --editor-block-space: 1.25rem;
+    --editor-list-space: 1rem;
     --editor-space: 0.25rem;
-    --editor-dot-space: 0.125rem;
 
     --editor-heading-fg: var(--tone-heading);
     --editor-caption-fg: var(--tone-caption);
@@ -38,17 +36,19 @@
 
   .j-editor.is-sm {
     --editor-font-size: var(--font-size-md);
-    --editor-line-height: 1.65;
+    --editor-p-line-height: 1.75;
   }
 
   .j-editor.is-lg {
     --editor-font-size: var(--font-size-xl);
-    --editor-line-height: 1.8;
+    --editor-p-line-height: 1.8;
+    --editor-block-space: 1.5rem;
   }
 
   .j-editor.is-xl {
     --editor-font-size: var(--font-size-2xl);
-    --editor-line-height: 1.85;
+    --editor-p-line-height: 1.8;
+    --editor-block-space: 1.5rem;
   }
 
   .j-radius-round .j-editor {
@@ -56,4 +56,20 @@
     --radius-md: 1rem;
     --radius-lg: 1.5rem;
   }
+
+  .mobile .j-editor h1 {
+    margin-bottom: 2rem;
+  }
+
+  .mobile .j-editor h2,
+  .mobile .j-editor h3,
+  .mobile .j-editor h4,
+  .mobile .j-editor h5,
+  .mobile .j-editor p {
+    --editor-block-space: 1.75rem;
+  }
+
+  .mobile .j-editor li p {
+    margin-block: 0;
+  }
 }