@zovaris/sephiro 0.9.0 → 0.10.0

package/dist/components.css

@@ -360,8 +360,39 @@
     background: var(--sph-danger-soft);
     color: var(--sph-danger);
   }
+.sph-badge[data-removable] {
+    gap: calc(var(--spacing, 0.25rem) * 0.5);
+    padding-inline-end: 3px;
+  }
+.sph-badge__remove {
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(infinity * 1px);
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    padding: 0px;
+    color: var(--sph-text-muted);
+    inline-size: 15px;
+    block-size: 15px;
+    cursor: pointer;
+    transition: background-color var(--sph-motion-fast) var(--sph-ease-standard), color var(--sph-motion-fast) var(--sph-ease-standard);
+  }
+.sph-badge__remove:hover {
+    background: var(--sph-danger);
+    @supports (color: color-mix(in lab, red, red)) {
+      background: color-mix(in srgb, var(--sph-danger) 22%, transparent);
+    }
+    color: var(--sph-text);
+  }
+.sph-badge__remove:focus-visible {
+    outline: 2px solid var(--sph-focus);
+    outline-offset: 1px;
+  }
 @media (prefers-reduced-motion: reduce) {
-    .sph-badge {
+    .sph-badge, .sph-badge__remove {
       transition: none;
     }
   }
@@ -769,6 +800,10 @@
     box-sizing: border-box;
     font: 11px / 1 var(--sph-font-sans);
   }
+.sph-kbd[data-variant="ghost"] {
+    border-color: transparent;
+    background-color: transparent;
+  }
 .sph-kbd__key {
     display: inline-flex;
     align-items: center;
@@ -2506,7 +2541,7 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
       animation: none;
     }
   }
-.sph-alert {
+.sph-notice {
     display: flex;
     min-width: 0px;
     align-items: flex-start;
@@ -2524,15 +2559,15 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     font-family: var(--sph-font-sans);
     animation: sph-rise-in var(--sph-motion-slow) var(--sph-ease-emphasis) both;
   }
-.sph-alert[data-state="closed"] {
+.sph-notice[data-state="closed"] {
     pointer-events: none;
     animation: sph-rise-out var(--sph-motion-fast) var(--sph-ease-exit) both;
   }
 @supports (interpolate-size: allow-keywords) {
-    .sph-alert {
+    .sph-notice {
       interpolate-size: allow-keywords;
     }
-    .sph-alert[data-state="closed"] {
+    .sph-notice[data-state="closed"] {
       overflow: hidden;
       block-size: 0;
       padding-block: 0;
@@ -2540,7 +2575,7 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
       transition: block-size var(--sph-motion-normal) var(--sph-ease-exit), padding-block var(--sph-motion-normal) var(--sph-ease-exit), border-block-width var(--sph-motion-normal) var(--sph-ease-exit);
     }
   }
-.sph-alert[data-variant="info"] {
+.sph-notice[data-variant="info"] {
     background: var(--sph-accent);
     @supports (color: color-mix(in lab, red, red)) {
       background: color-mix(in srgb, var(--sph-accent) 8%, var(--sph-surface));
@@ -2550,77 +2585,76 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
       border-color: color-mix(in srgb, var(--sph-accent) 30%, var(--sph-border));
     }
   }
-.sph-alert[data-variant="success"] {
+.sph-notice[data-variant="success"] {
     background: var(--sph-success-soft);
     border-color: var(--sph-success);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in srgb, var(--sph-success) 34%, var(--sph-border));
     }
   }
-.sph-alert[data-variant="warning"] {
+.sph-notice[data-variant="warning"] {
     background: var(--sph-warning-soft);
     border-color: var(--sph-warning);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in srgb, var(--sph-warning) 34%, var(--sph-border));
     }
   }
-.sph-alert[data-variant="danger"] {
+.sph-notice[data-variant="danger"] {
     background: var(--sph-danger-soft);
     border-color: var(--sph-danger);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in srgb, var(--sph-danger) 34%, var(--sph-border));
     }
   }
-.sph-alert__icon {
+.sph-notice__icon {
     display: flex;
-    width: calc(var(--spacing, 0.25rem) * 8);
-    height: calc(var(--spacing, 0.25rem) * 8);
+    width: calc(var(--spacing, 0.25rem) * 6);
+    height: calc(var(--spacing, 0.25rem) * 6);
     flex-shrink: 0;
     align-items: center;
     justify-content: center;
-    align-self: center;
     border-radius: var(--sph-radius-md);
+    align-self: flex-start;
     background: var(--sph-accent-soft, var(--sph-raised));
     color: var(--sph-accent);
     animation: sph-pop var(--sph-motion-slow) var(--sph-ease-spring) both;
     animation-delay: calc(var(--sph-motion-stagger) * 2);
   }
-.sph-alert__icon svg {
+.sph-notice__icon svg {
     display: block;
-    width: calc(var(--spacing, 0.25rem) * 4);
-    height: calc(var(--spacing, 0.25rem) * 4);
+    width: calc(var(--spacing, 0.25rem) * 3.5);
+    height: calc(var(--spacing, 0.25rem) * 3.5);
   }
-.sph-alert[data-variant="success"] .sph-alert__icon {
+.sph-notice[data-variant="success"] .sph-notice__icon {
     background: var(--sph-success-soft);
     color: var(--sph-success);
   }
-.sph-alert[data-variant="warning"] .sph-alert__icon {
+.sph-notice[data-variant="warning"] .sph-notice__icon {
     background: var(--sph-warning-soft);
     color: var(--sph-warning);
   }
-.sph-alert[data-variant="danger"] .sph-alert__icon {
+.sph-notice[data-variant="danger"] .sph-notice__icon {
     background: var(--sph-danger-soft);
     color: var(--sph-danger);
   }
-.sph-alert__body {
+.sph-notice__body {
     min-width: 0px;
     flex: 1;
   }
-.sph-alert__title {
+.sph-notice__title {
     margin: 0px;
     --tw-font-weight: var(--font-weight-semibold, 600);
     font-weight: var(--font-weight-semibold, 600);
     line-height: 1.35;
   }
-.sph-alert__content {
+.sph-notice__content {
     margin-top: calc(var(--spacing, 0.25rem) * 0.5);
     font-size: var(--text-xs, 0.75rem);
     line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
     color: var(--sph-text-muted);
     line-height: 1.45;
   }
-.sph-alert__dismiss {
-    margin-block: auto;
+.sph-notice__dismiss {
     display: inline-flex;
     width: calc(var(--spacing, 0.25rem) * 6);
     height: calc(var(--spacing, 0.25rem) * 6);
@@ -2633,17 +2667,18 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     background-color: transparent;
     padding: 0px;
     color: var(--sph-text-muted);
+    align-self: flex-start;
     cursor: pointer;
     transition: background-color var(--sph-motion-fast) var(--sph-ease-standard), color var(--sph-motion-fast) var(--sph-ease-standard), transform var(--sph-motion-fast) var(--sph-ease-emphasis);
   }
-.sph-alert__dismiss:hover {
+.sph-notice__dismiss:hover {
     background-color: var(--sph-raised);
     color: var(--sph-text);
   }
-.sph-alert__dismiss:active {
+.sph-notice__dismiss:active {
     transform: scale(0.88);
   }
-.sph-alert__dismiss:focus-visible {
+.sph-notice__dismiss:focus-visible {
     outline: 2px solid var(--sph-focus);
     outline-offset: 1px;
   }
@@ -2937,6 +2972,7 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     font-family: var(--sph-font-sans);
   }
 .sph-tabs__list {
+    position: relative;
     display: flex;
     min-width: 0px;
     gap: var(--spacing, 0.25rem);
@@ -2969,6 +3005,8 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     --tw-font-weight: var(--font-weight-medium, 500);
     font-weight: var(--font-weight-medium, 500);
     color: var(--sph-text-muted);
+    border-end-start-radius: 0;
+    border-end-end-radius: 0;
     border: 1px solid transparent;
     cursor: pointer;
     font-family: var(--sph-font-sans);
@@ -2984,40 +3022,35 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
 .sph-tabs__tab[data-selected="true"] {
     color: var(--sph-text);
   }
-.sph-tabs__tab::after {
+.sph-tabs__indicator {
     pointer-events: none;
     position: absolute;
-    content: "";
     bottom: -1px;
-    left: var(--sph-radius-sm);
-    right: var(--sph-radius-sm);
+    left: 0;
     height: 2px;
+    width: calc(var(--sph-tabs-indicator-size, 0px) - var(--sph-radius-sm) * 2);
     border-radius: 2px;
     background: var(--sph-accent);
-    opacity: 0;
-    transform: scaleX(0.3);
-    transition: opacity var(--sph-motion-fast) var(--sph-ease-exit), transform var(--sph-motion-fast) var(--sph-ease-exit);
+    translate: calc(var(--sph-tabs-indicator-at, 0px) + var(--sph-radius-sm)) 0;
   }
-.sph-tabs__tab[data-selected="true"]::after {
-    opacity: 1;
-    transform: scaleX(1);
-    transition: opacity var(--sph-motion-fast) var(--sph-ease-standard), transform var(--sph-motion-normal) var(--sph-ease-emphasis);
+.sph-tabs__list[data-measured] .sph-tabs__indicator {
+    transition: translate var(--sph-motion-normal) var(--sph-ease-emphasis), width var(--sph-motion-normal) var(--sph-ease-emphasis);
   }
 .sph-tabs[data-orientation="vertical"] .sph-tabs__tab {
     text-align: left;
+    border-start-end-radius: 0;
+    border-end-end-radius: 0;
+    border-end-start-radius: var(--sph-radius-sm);
   }
-.sph-tabs[data-orientation="vertical"] .sph-tabs__tab::after {
-    top: 7px;
-    right: -1px;
-    bottom: 7px;
+.sph-tabs[data-orientation="vertical"] .sph-tabs__indicator {
+    top: 0;
+    bottom: auto;
     left: auto;
+    right: -1px;
     width: 2px;
-    height: auto;
+    height: calc(var(--sph-tabs-indicator-size, 0px) - 14px);
     border-radius: 2px 0 0 2px;
-    transform: scaleY(0.3);
-  }
-.sph-tabs[data-orientation="vertical"] .sph-tabs__tab[data-selected="true"]::after {
-    transform: scaleY(1);
+    translate: 0 calc(var(--sph-tabs-indicator-at, 0px) + 7px);
   }
 .sph-tabs__tab:disabled {
     opacity: 40%;
@@ -3034,7 +3067,7 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     animation: sph-rise-in var(--sph-motion-normal) var(--sph-ease-emphasis) both;
   }
 @media (prefers-reduced-motion: reduce) {
-    .sph-tabs__tab, .sph-tabs__tab::after {
+    .sph-tabs__tab, .sph-tabs__indicator {
       transition: none;
     }
     .sph-tabs__panel {
@@ -3559,7 +3592,8 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     font-size: var(--text-xs, 0.75rem);
     line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / 0.75)));
     color: var(--sph-text-muted);
-    font: inherit;
+    font-family: inherit;
+    font-weight: inherit;
     width: 26px;
     height: 26px;
     font-variant-numeric: tabular-nums;
@@ -4040,6 +4074,12 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     -webkit-backdrop-filter: blur(6px);
     animation: sph-dialog-fade var(--sph-motion-normal) var(--sph-ease-standard) both;
   }
+.sph-dialog__backdrop[data-scope="local"] {
+    position: absolute;
+  }
+.sph-dialog__backdrop[data-scope="local"] .sph-dialog {
+    max-height: calc(100% - 2rem);
+  }
 .sph-dialog__backdrop[data-state="closed"] {
     pointer-events: none;
     animation: sph-dialog-fade-out var(--sph-motion-normal) var(--sph-ease-exit) both;
@@ -4193,6 +4233,21 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     -webkit-backdrop-filter: blur(4px);
     animation: sph-drawer-fade var(--sph-motion-normal) var(--sph-ease-standard) both;
   }
+.sph-drawer__backdrop[data-scope="local"] {
+    position: absolute;
+  }
+.sph-drawer__backdrop[data-scope="local"] .sph-drawer[data-side="bottom"] {
+    max-block-size: 85%;
+  }
+.sph-drawer__backdrop[data-scope="local"] .sph-drawer[data-side="bottom"][data-size="sm"] {
+    block-size: 32%;
+  }
+.sph-drawer__backdrop[data-scope="local"] .sph-drawer[data-side="bottom"][data-size="md"] {
+    block-size: 50%;
+  }
+.sph-drawer__backdrop[data-scope="local"] .sph-drawer[data-side="bottom"][data-size="lg"] {
+    block-size: 72%;
+  }
 .sph-drawer__backdrop[data-side="right"] {
     justify-content: flex-end;
   }
@@ -6276,20 +6331,17 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
   }
 .sph-toolbar[data-size="sm"] {
     gap: calc(var(--spacing, 0.25rem) * 1.5);
-    padding-inline: calc(var(--spacing, 0.25rem) * 2);
-    padding-block: var(--spacing, 0.25rem);
+    padding: var(--spacing, 0.25rem);
     min-height: 2.5rem;
   }
 .sph-toolbar[data-size="md"] {
     gap: calc(var(--spacing, 0.25rem) * 2);
-    padding-inline: calc(var(--spacing, 0.25rem) * 2.5);
-    padding-block: calc(var(--spacing, 0.25rem) * 1.5);
+    padding: calc(var(--spacing, 0.25rem) * 1.5);
     min-height: 2.75rem;
   }
 .sph-toolbar[data-size="lg"] {
     gap: calc(var(--spacing, 0.25rem) * 2);
-    padding-inline: calc(var(--spacing, 0.25rem) * 3);
-    padding-block: calc(var(--spacing, 0.25rem) * 2);
+    padding: calc(var(--spacing, 0.25rem) * 2);
     min-height: 3rem;
   }
 .sph-toolbar[data-orientation="vertical"] {
@@ -6324,18 +6376,16 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     gap: 2px;
   }
 .sph-toolbar .sph-tabs__tab {
-    min-height: 2rem;
-  }
-.sph-toolbar[data-size="md"] .sph-tabs__tab {
     min-height: 2.25rem;
+    border-start-start-radius: var(--sph-radius-sm);
+    border-start-end-radius: var(--sph-radius-sm);
+    border-end-start-radius: var(--sph-radius-sm);
+    border-end-end-radius: var(--sph-radius-sm);
   }
-.sph-toolbar[data-size="lg"] .sph-tabs__tab {
-    min-height: 2.5rem;
-  }
-.sph-toolbar .sph-tabs__tab::after {
+.sph-toolbar .sph-tabs__indicator {
     bottom: 3px;
-    left: 10px;
-    right: 10px;
+    width: calc(var(--sph-tabs-indicator-size, 0px) - 20px);
+    translate: calc(var(--sph-tabs-indicator-at, 0px) + 10px) 0;
   }
 @media (max-width: 560px) {
     .sph-toolbar {
@@ -7353,6 +7403,7 @@ button.sph-stepper__trigger:active .sph-stepper__marker {
     display: flex;
     flex: none;
     align-items: center;
+    gap: calc(var(--spacing, 0.25rem) * 0.5);
     white-space: nowrap;
   }
 .sph-overflow-list__more {
@@ -7397,6 +7448,9 @@ button.sph-stepper__trigger:active .sph-stepper__marker {
     white-space: nowrap;
     transition: background-color var(--sph-motion-fast) var(--sph-ease-standard), border-color var(--sph-motion-fast) var(--sph-ease-standard), color var(--sph-motion-fast) var(--sph-ease-standard);
   }
+.sph-popover__content:has(> .sph-overflow-list__panel) {
+    padding: calc(var(--spacing, 0.25rem) * 1.5);
+  }
 .sph-overflow-list__popover .sph-popover__trigger {
     border-radius: calc(infinity * 1px);
   }
@@ -7420,6 +7474,35 @@ button.sph-stepper__trigger:active .sph-stepper__marker {
     white-space: nowrap;
     border-width: 0;
   }
+.sph-overflow-list__remove {
+    display: inline-flex;
+    width: calc(var(--spacing, 0.25rem) * 6);
+    height: calc(var(--spacing, 0.25rem) * 6);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    padding: 0px;
+    color: var(--sph-text-muted);
+    --tw-outline-style: none;
+    outline-style: none;
+    border-radius: var(--sph-radius-xs);
+    cursor: pointer;
+    transition: background-color var(--sph-motion-fast) var(--sph-ease-standard), color var(--sph-motion-fast) var(--sph-ease-standard);
+  }
+.sph-overflow-list__item:hover .sph-overflow-list__remove, .sph-overflow-list__item:focus-within .sph-overflow-list__remove, .sph-overflow-list__panel-item:hover .sph-overflow-list__remove, .sph-overflow-list__panel-item:focus-within .sph-overflow-list__remove {
+    color: var(--sph-text);
+  }
+.sph-overflow-list__remove:hover {
+    background-color: var(--sph-raised);
+    color: var(--sph-text);
+  }
+.sph-overflow-list__remove:focus-visible {
+    background: var(--sph-surface-elevated);
+    color: var(--sph-text);
+  }
 .sph-overflow-list__panel {
     margin: 0px;
     display: flex;
@@ -7427,7 +7510,7 @@ button.sph-stepper__trigger:active .sph-stepper__marker {
     min-width: calc(var(--spacing, 0.25rem) * 40);
     list-style-type: none;
     flex-direction: column;
-    gap: var(--spacing, 0.25rem);
+    gap: calc(var(--spacing, 0.25rem) * 0.5);
     overflow-y: auto;
     padding: 0px;
     outline: none;
@@ -7436,6 +7519,7 @@ button.sph-stepper__trigger:active .sph-stepper__marker {
     display: flex;
     min-width: 0px;
     align-items: center;
+    gap: calc(var(--spacing, 0.25rem) * 0.5);
     animation: sph-list-in var(--sph-motion-fast) var(--sph-ease-emphasis) both;
     animation-delay: calc( var(--sph-motion-index, 0) * var(--sph-motion-stagger) );
   }
@@ -7455,6 +7539,9 @@ button.sph-stepper__trigger:active .sph-stepper__marker {
     .sph-overflow-list__more, .sph-overflow-list__panel-item {
       animation: none;
     }
+    .sph-overflow-list__remove {
+      transition: none;
+    }
   }
 .sph-citation {
     position: relative;
@@ -7462,7 +7549,7 @@ button.sph-stepper__trigger:active .sph-stepper__marker {
     font-family: var(--sph-font-sans);
     font-size: 0.7em;
     line-height: 1;
-    vertical-align: super;
+    vertical-align: 0.15em;
   }
 .sph-citation__marker {
     display: inline-flex;