vanilla-jui 1.4.0 → 1.4.1

package/src/components/offcanvas.ts

@@ -18,7 +18,7 @@ import {
 } from '../utilities/dom.ts';
 
 export type OffcanvasDirection = 'top' | 'right' | 'bottom' | 'left';
-export type OffcanvasAnimation = 'slide' | 'push' | 'none';
+export type OffcanvasAnimation = 'slide' | 'none';
 
 export interface OffcanvasClassNames {
   root: string;
@@ -30,13 +30,7 @@ export interface OffcanvasClassNames {
   bottom: string;
   left: string;
   slide: string;
-  push: string;
   none: string;
-  pushBody: string;
-  pushTop: string;
-  pushRight: string;
-  pushBottom: string;
-  pushLeft: string;
 }
 
 export type OffcanvasClassNameConfig = Partial<OffcanvasClassNames>;
@@ -112,13 +106,7 @@ const DEFAULT_CLASS_NAMES: OffcanvasClassNames = {
   bottom: 'is-bottom',
   left: 'is-left',
   slide: 'is-slide',
-  push: 'is-push',
   none: 'is-none',
-  pushBody: 'offcanvas-push-body',
-  pushTop: 'offcanvas-push-top',
-  pushRight: 'offcanvas-push-right',
-  pushBottom: 'offcanvas-push-bottom',
-  pushLeft: 'offcanvas-push-left',
 };
 
 const OFFCANVAS_PROPS_SCHEMA = {
@@ -139,7 +127,7 @@ const OFFCANVAS_PROPS_SCHEMA = {
   animation: {
     default: 'slide',
     type: 'string',
-    enum: ['slide', 'push', 'none'],
+    enum: ['slide', 'none'],
   },
   bgClose: { default: true, type: 'boolean' },
   escClose: { default: true, type: 'boolean' },
@@ -373,44 +361,31 @@ export class Offcanvas extends Component<
   }
 
   private renderPanel(): void {
-    const { overlay, animation, direction, id, className } = this.props;
+    const { overlay, id, className } = this.props;
     const body = document.body;
 
     if (overlay && this._overlay) body.appendChild(this._overlay);
     if (this.dom.root) body.appendChild(this.dom.root);
 
     body.style.overflow = 'hidden';
-    if (animation === 'push') {
-      body.classList.add(className.pushBody);
-    }
 
     timer.start(`oc-show-${id}`, 10, () => {
       if (!this.dom.root) return;
       this._overlay?.classList.add(className.active);
-      if (animation === 'push') {
-        body.classList.add(className[`push${capitalizeDirection(direction)}`]);
-      }
       this.dom.root.classList.add(className.active);
     });
   }
 
   private removePanel(): void {
-    const { animation, direction, id, className } = this.props;
+    const { id, className } = this.props;
     const body = document.body;
 
     this._overlay?.classList.remove(className.active);
     this.dom.root?.classList.remove(className.active);
 
-    if (animation === 'push') {
-      body.classList.remove(className[`push${capitalizeDirection(direction)}`]);
-    }
-
     timer.start(`oc-remove-${id}`, 100, () => {
       this._overlay?.remove();
       this.dom.root?.remove();
-      if (animation === 'push') {
-        body.classList.remove(className.pushBody);
-      }
       body.style.overflow = '';
     });
   }
@@ -458,7 +433,7 @@ export class Offcanvas extends Component<
   }
 
   onDestroy(): void {
-    const { id, direction, className } = this.props;
+    const { id, className } = this.props;
 
     timer.cancel(`oc-show-${id}`);
     timer.cancel(`oc-remove-${id}`);
@@ -472,25 +447,11 @@ export class Offcanvas extends Component<
 
     const body = document.body;
     body.style.overflow = '';
-    body.classList.remove(
-      className.pushBody,
-      className[`push${capitalizeDirection(direction)}`]
-    );
 
     this._overlay = null;
   }
 }
 
-function capitalizeDirection(
-  direction: OffcanvasDirection
-): 'Top' | 'Right' | 'Bottom' | 'Left' {
-  return `${direction[0].toUpperCase()}${direction.slice(1)}` as
-    | 'Top'
-    | 'Right'
-    | 'Bottom'
-    | 'Left';
-}
-
 export function createOffcanvas(options: OffcanvasProps = {}): Offcanvas {
   return new Offcanvas(options);
 }

package/src/css/accordion.css

@@ -1,72 +1,27 @@
 @layer components {
-  .j-accordion {
-    --accordion-border: 1px solid var(--ui-border-subtle);
-    --accordion-icon-size: var(--font-size-lg);
-  }
-
   .j-accordion .accordion-header {
     display: flex;
     align-items: center;
     cursor: pointer;
-    padding: var(--accordion-header-padding,
-        var(--s2) var(--s3));
-    margin: var(--accordion-header-margin, 0);
-    border-bottom: var(--accordion-border);
-    font-size: var(--accordion-header-font-size, var(--font-size-md));
-    font-weight: var(--font-medium);
     user-select: none;
   }
 
-  .j-accordion .accordion-header:hover:not(.is-active) {
-    background: var(--accordion-header-hover-background, var(--ui-surface-hover));
-  }
-
-  .j-accordion .accordion-header.is-active {
-    border-color: transparent;
-  }
-
   .j-accordion .accordion-header .header-title {
     flex: 1;
     text-align: left;
-    font-size: var(--accordion-title-font-size, var(--font-size-md));
-  }
-
-  .j-accordion .accordion-header.is-active .header-title {
-    font-weight: var(--font-bold);
   }
 
   .j-accordion .accordion-header .header-arrow {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: var(--accordion-icon-size);
-    height: var(--accordion-icon-size);
-    transition: transform 0.3s ease-out;
-    transform: rotate(0deg);
-  }
-
-  .j-accordion .accordion-header.is-active .header-arrow {
-    transform: rotate(180deg);
   }
 
   .j-accordion .accordion-panel {
     display: none;
-    margin: 0;
   }
 
   .j-accordion .accordion-panel.is-active {
     display: block;
   }
-
-  .j-accordion .accordion-panel .panel-content {
-    margin: var(--accordion-panel-content-margin, 0);
-    padding: var(--accordion-panel-content-padding,
-        0 var(--s3) var(--s2));
-    border-bottom: var(--accordion-border);
-    font-size: var(--accordion-font-size, var(--font-size-md));
-  }
-
-  .j-accordion .accordion-panel:last-child .panel-content {
-    border-bottom: none;
-  }
 }

package/src/css/avatar.css

@@ -1,16 +1,19 @@
 @layer components {
   .j-avatar {
-    --avatar-size: var(--el-height-md);
-
     display: inline-block;
     vertical-align: middle;
-    border-radius: var(--avatar-border-radius, var(--radius-md));
     width: var(--avatar-size);
     height: var(--avatar-size);
     overflow: hidden;
     user-select: none;
     object-fit: cover;
-    box-shadow: var(--avatar-box-shadow, var(--shadow-sm));
+    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,
@@ -18,22 +21,7 @@
     margin: 0;
   }
 
-  .j-avatar.is-sm {
-    --avatar-size: var(--el-height-2xs);
-  }
-
-  .j-avatar.is-lg {
-    --avatar-size: var(--el-height-lg);
-  }
-
-  .j-avatar.is-round {
-    border-radius: 0.5rem;
-  }
-
   .j-avatar.is-text {
-    background-color: var(--tone-subtle);
-    color: var(--tone-solid);
-    font-weight: var(--font-medium);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -45,18 +33,4 @@
     align-items: center;
     flex-wrap: nowrap;
   }
-
-  .j-avatar-group .j-avatar {
-    border: 1.5px solid var(--avatar-border-color, var(--ui-bg));
-  }
-
-  .j-avatar-group .j-avatar:not(:first-child) {
-    margin-inline-start: calc(var(--space) * -3);
-  }
-
-  .j-avatar-group .j-avatar:last-child {
-    font-size: var(--font-size-sm, 0.75rem);
-    background-color: var(--ui-bg);
-    box-shadow: var(--avatar-box-shadow, var(--shadow-sm));
-  }
 }

package/src/css/badge.css

@@ -3,64 +3,16 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    padding: 0 var(--badge-padding, calc(var(--space) * 1.5));
-    min-width: var(--badge-min-width, 1.25rem);
-    height: var(--badge-height, 1.25rem);
-    line-height: var(--badge-line-height, var(--line-height-self));
-    font-size: var(--badge-font-size, var(--font-size-sm));
-    font-weight: var(--badge-font-weight, var(--font-medium));
-    border-radius: var(--badge-radius, 500px);
-    border: 1px solid var(--badge-border-color, var(--ui-border));
-    color: var(--badge-color, var(--ui-fg));
-    background-color: var(--badge-background, var(--ui-bg));
-    box-shadow: var(--badge-box-shadow, none);
-  }
-
-  .j-badge.is-sm {
-    --badge-padding: calc(var(--space) * 0.75);
-    --badge-min-width: 1rem;
-    --badge-height: 1rem;
-    --badge-font-size: 0.625rem;
-  }
-
-  .j-badge.is-contrast {
-    --badge-background: var(--ui-fg);
-    --badge-color: var(--ui-bg);
-  }
-
-  .j-badge.is-primary {
-    --badge-background: var(--tone-solid);
-    --badge-color: var(--tone-fg);
-    --badge-border-color: var(--tone-solid);
-  }
-
-  .j-badge.is-secondary {
-    --badge-background: var(--tone-soft);
-    --badge-color: var(--tone-text);
-    --badge-border-color: var(--tone-soft);
-  }
-
-  .j-badge.is-success {
-    --badge-background: var(--state-success);
-    --badge-color: var(--state-success-fg);
-    --badge-border-color: var(--state-success);
-  }
-
-  .j-badge.is-warning {
-    --badge-background: var(--state-warning);
-    --badge-color: var(--state-warning-fg);
-    --badge-border-color: var(--state-warning);
-  }
-
-  .j-badge.is-danger {
-    --badge-background: var(--state-danger);
-    --badge-color: var(--state-danger-fg);
-    --badge-border-color: var(--state-danger);
-  }
-
-  .j-badge.is-error {
-    --badge-border-color: var(--state-danger-subtle);
-    --badge-background: var(--state-danger-subtle);
-    --badge-color: var(--state-danger-text);
+    padding: var(--badge-padding);
+    min-width: var(--badge-min-width);
+    height: var(--badge-height);
+    line-height: var(--badge-line-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);
   }
 }

package/src/css/breadcrumb.css

@@ -1,33 +1,15 @@
 @layer components {
 
-  .j-breadcrumb,
-  .j-breadcrumb.is-md {
-    font-size: var(--breadcrumb-font-size, var(--font-size-md));
-    color: var(--breadcrumb-color, var(--ui-fg-muted));
+  .j-breadcrumb {
+    font-size: var(--breadcrumb-font-size);
+    color: var(--breadcrumb-fg);
     white-space: nowrap;
     user-select: none;
   }
 
-  .j-breadcrumb.is-sm {
-    --breadcrumb-font-size: var(--font-size-sm);
-  }
-
-  .j-breadcrumb.is-lg {
-    --breadcrumb-font-size: var(--font-size-lg);
-  }
-
-  .j-breadcrumb svg,
-  .j-breadcrumb.is-md svg {
-    width: var(--breadcrumb-icon-size, var(--font-size-md));
-    height: var(--breadcrumb-icon-size, var(--font-size-md));
-  }
-
-  .j-breadcrumb.is-sm svg {
-    --breadcrumb-icon-size: var(--font-size-sm);
-  }
-
-  .j-breadcrumb.is-lg svg {
-    --breadcrumb-icon-size: var(--font-size-lg);
+  .j-breadcrumb svg {
+    width: var(--breadcrumb-icon-size);
+    height: var(--breadcrumb-icon-size);
   }
 
   .j-breadcrumb>ol,
@@ -52,7 +34,7 @@
   }
 
   .j-breadcrumb li+li::before {
-    color: var(--breadcrumb-item-separator-color, var(--ui-fg-soft));
+    color: var(--breadcrumb-divider-fg);
     content: '/';
   }
 
@@ -73,15 +55,11 @@
     align-items: center;
     justify-content: center;
     gap: var(--space);
-    color: var(--breadcrumb-link-color, var(--tone-text));
-    padding: var(--breadcrumb-item-padding-vertical, 0) var(--breadcrumb-item-padding-horizontal, var(--s2));
+    color: var(--breadcrumb-link-fg);
+    padding: var(--breadcrumb-item-padding);
     text-decoration: none;
   }
 
-  .j-breadcrumb a:hover {
-    color: var(--breadcrumb-link-hover-color, var(--tone-solid));
-  }
-
   .j-breadcrumb a span {
     display: flex;
     align-items: center;
@@ -89,7 +67,6 @@
   }
 
   .j-breadcrumb li.is-active a {
-    --breadcrumb-link-color: var(--ui-fg-muted);
     cursor: default;
     pointer-events: none;
   }

package/src/css/button.css

@@ -4,20 +4,21 @@
     justify-content: center;
     align-items: center;
     flex-wrap: nowrap;
-    gap: var(--button-gap, var(--space) calc(var(--space) * 1.5));
+    gap: var(--btn-gap);
     position: relative;
     white-space: nowrap;
-    font-weight: var(--button-font-weight, var(--font-medium));
-    font-size: var(--button-font-size, var(--font-size-md));
-    height: var(--button-height, var(--el-height-md));
-    line-height: var(--button-line-height, var(--line-height-self));
-    background-color: var(--button-background, transparent);
-    padding: var(--button-padding, 0 var(--s3));
-    border-width: var(--button-border-width, 1px);
-    border-style: var(--button-border-style, solid);
-    border-color: var(--button-border-color, transparent);
-    border-radius: var(--button-border-radius, var(--radius-md));
-    box-shadow: var(--button-box-shadow, var(--shadow-sm));
+    font-weight: var(--btn-font-weight);
+    font-size: var(--btn-font-size);
+    height: var(--btn-height);
+    line-height: var(--btn-line-height);
+    color: var(--btn-fg);
+    background-color: var(--btn-bg);
+    padding: var(--btn-padding);
+    border-width: var(--btn-border-width);
+    border-style: var(--btn-border-style);
+    border-color: var(--btn-border-color);
+    border-radius: var(--btn-border-radius);
+    box-shadow: var(--btn-box-shadow);
     appearance: button;
     user-select: none;
     touch-action: manipulation;
@@ -29,7 +30,7 @@
   }
 
   .j-button svg {
-    width: var(--font-size-md);
+    width: var(--btn-svg-size);
     fill: currentColor;
   }
 
@@ -38,113 +39,16 @@
     color: inherit;
   }
 
-  /* size */
-  .j-button.is-sm {
-    font-size: var(--font-size-sm);
-    height: var(--button-height-sm, var(--el-height-sm));
-    padding: var(--button-padding-sm, var(--space) var(--s2));
-  }
-
-  .j-button.is-lg {
-    font-size: var(--font-size-lg);
-    height: var(--button-height-lg, var(--el-height-lg));
-    padding: var(--button-padding-lg, var(--s3) var(--s4));
-  }
-
-  /* variant */
-  .j-button.is-default {
-    --button-background: var(--ui-bg);
-    --button-border-color: var(--ui-border);
-    color: var(--ui-fg);
-  }
-
-  .j-button.is-contrast {
-    --button-background: var(--ui-fg);
-    color: var(--ui-bg);
-  }
-
-  .j-button.is-primary {
-    --button-background: var(--tone-solid);
-    color: var(--tone-fg);
-  }
-
-  .j-button.is-secondary {
-    --button-border-color: transparent;
-    --button-background: var(--tone-soft);
-    color: var(--tone-text);
-  }
-
-  .j-button.is-outline {
-    --button-background: transparent;
-    --button-border-color: var(--tone-solid);
-    color: var(--tone-solid);
-  }
-
-  .j-button.is-ghost {
-    --button-box-shadow: none;
-    transition-property: none;
-  }
-
-  .j-button.is-text {
-    --button-border-color: transparent;
-    height: var(--button-text-height, auto);
-    padding: var(--button-text-padding, 0);
-    box-shadow: var(--button-text-box-shadow, none);
-  }
-
-  .j-button.is-icon {
-    aspect-ratio: var(--aspect-icon, 1);
-    padding: var(--icon-padding, 0);
-  }
-
-  .j-button.is-danger {
-    --button-background: var(--state-danger);
-    color: var(--state-danger-fg);
-  }
-
-  .j-button.is-warning {
-    --button-background: var(--state-warning);
-    color: var(--state-warning-fg);
-  }
-
-  .j-button.is-success {
-    --button-background: var(--state-success);
-    color: var(--state-success-fg);
-  }
-
-  .j-button.is-error {
-    --button-background: var(--state-danger-subtle);
-    color: var(--state-danger-text);
-  }
-
-  .j-button[class*='is-surface-'] {
-    --button-border-color: var(--ui-border);
-    color: var(--ui-fg);
-  }
-
-  .j-button.is-surface-sm {
-    --button-background: var(--ui-surface-subtle);
-  }
-
-  .j-button.is-surface-md {
-    --button-background: var(--ui-surface-muted);
-  }
-
-  .j-button.is-surface-lg {
-    --button-background: var(--ui-surface-active);
-  }
-
   /* group */
   .j-button-group {
-    --button-padding: 0 var(--s2);
     display: flex;
     margin: 0;
+    box-shadow: var(--btn-group-box-shadow);
   }
 
   .j-button-group .j-button:not(:first-child) {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    /* margin-left: -1px; */
   }
 
   .j-button-group .j-button:not(:last-child) {
@@ -153,8 +57,10 @@
   }
 
   .j-button-group .j-button:not(:first-child):not(:last-child) {
-    border-block-width: var(--button-border-width, 1px);
-    border-inline-width: 0;
+    border-top-width: var(--btn-border-width);
+    border-bottom-width: var(--btn-border-width);
+    border-left-width: 0;
+    border-right-width: 0;
   }
 
   .j-button-group.is-vertical {
@@ -173,8 +79,10 @@
   }
 
   .j-button-group.is-vertical .j-button:not(:last-child):not(:first-child) {
-    border-block-width: 0;
-    border-inline-width: var(--button-border-width, 1px);
+    border-left-width: var(--btn-border-width);
+    border-right-width: var(--btn-border-width);
+    border-top-width: 0;
+    border-bottom-width: 0;
   }
 
   .j-button-group.is-vertical .j-button:first-child {
@@ -184,113 +92,4 @@
   .j-button-group.is-vertical .j-button:last-child {
     border-bottom-left-radius: var(--radius-md);
   }
-
-  /* disabled */
-  .j-button:disabled {
-    opacity: var(--opacity-disabled, 0.5);
-  }
-
-  /* status */
-  .j-button:not(:disabled) {
-    cursor: pointer;
-  }
-
-  .j-button:not(:disabled):hover {
-    opacity: var(--opacity-hover);
-  }
-
-  .j-button:not(:disabled):active {
-    opacity: var(--opacity-active);
-  }
-
-  .j-button:not(:disabled).is-active,
-  .j-button:not(:disabled):focus-visible {
-    outline: 2px solid var(--button-ring, var(--tone-solid));
-    outline-offset: 1px;
-    border-color: transparent;
-  }
-
-  .j-button.is-default:hover:not(:disabled) {
-    background-color: var(--ui-surface-hover);
-  }
-
-  .j-button.is-outline:hover:not(:disabled),
-  .j-button.is-ghost:hover:not(:disabled) {
-    background-color: var(--tone-subtle);
-  }
-
-  .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;
-    color: var(--tone-solid);
-    text-decoration: underline;
-    text-underline-offset: var(--space);
-  }
-
-  .j-button.is-contrast:not(:disabled):active,
-  .j-button.is-contrast:not(:disabled):focus-visible {
-    --button-ring: var(--ui-fg);
-  }
-
-  .j-button.is-success:not(:disabled):active,
-  .j-button.is-success:not(:disabled):focus-visible {
-    --button-ring: var(--state-success);
-  }
-
-  .j-button.is-warning:not(:disabled):active,
-  .j-button.is-warning:not(:disabled):focus-visible {
-    --button-ring: var(--state-warning);
-  }
-
-  .j-button.is-danger:not(:disabled):active,
-  .j-button.is-danger:not(:disabled):focus-visible {
-    --button-ring: var(--state-danger);
-  }
-
-  .j-button.is-error:not(:disabled):active,
-  .j-button.is-error:not(:disabled):focus-visible {
-    --button-ring: var(--state-danger-subtle);
-  }
-
-  .j-button.is-surface-sm:not(:disabled):active,
-  .j-button.is-surface-sm:not(:disabled):focus-visible {
-    --button-ring: var(--ui-surface-hover);
-  }
-
-  .j-button.is-surface-md:not(:disabled):active,
-  .j-button.is-surface-md:not(:disabled):focus-visible {
-    --button-ring: var(--ui-border);
-  }
-
-  .j-button.is-surface-lg:not(:disabled):active,
-  .j-button.is-surface-lg:not(:disabled):focus-visible {
-    --button-ring: var(--ui-border-strong);
-  }
-
-  .j-button-group .j-button:active,
-  .j-button-group .j-button:focus-visible {
-    outline: none;
-    --button-border-color: transparent;
-    --button-box-shadow: 0 0 0 2px var(--tone-solid);
-    z-index: 1;
-  }
-
-  .j-button-group .j-button.is-primary:not(:disabled):active,
-  .j-button-group .j-button.is-primary:not(:disabled):focus-visible,
-  .j-button-group .j-button:focus-within {
-    outline: 2px solid var(--button-ring, var(--tone-solid));
-    outline-offset: 1px;
-    --button-border-color: transparent;
-    --button-box-shadow: var(--shadow-sm);
-  }
-
-  .j-button-group .j-button:focus-within {
-    z-index: 1;
-    --button-border-color: transparent;
-  }
-
-  .j-button-group.is-vertical .j-button:focus-within {
-    z-index: auto
-  }
 }