@zovaris/sephiro 0.8.0 → 0.9.0

package/dist/components.css

@@ -367,20 +367,20 @@
   }
 .sph-button {
     display: inline-flex;
-    height: calc(var(--spacing, 0.25rem) * 9);
     align-items: center;
     justify-content: center;
-    gap: calc(var(--spacing, 0.25rem) * 1.5);
     border-radius: var(--sph-radius-sm);
     border-style: var(--tw-border-style);
     border-width: 0px;
     background-color: transparent;
-    padding-inline: calc(var(--spacing, 0.25rem) * 3);
     font-size: 12.5px;
     --tw-font-weight: var(--font-weight-medium, 500);
     font-weight: var(--font-weight-medium, 500);
     color: var(--sph-text);
     box-sizing: border-box;
+    height: calc(2.25rem * var(--sph-control-density, 1));
+    gap: calc(0.375rem * var(--sph-control-density, 1));
+    padding-inline: calc(0.75rem * var(--sph-control-density, 1));
     cursor: pointer;
     font-family: var(--sph-font-sans);
     font-weight: 550;
@@ -390,22 +390,28 @@
 .sph-button:hover:not(:disabled, [data-loading]) {
     transform: translateY(-1px);
   }
+.sph-button[data-density="compact"] {
+    --sph-control-density: 0.8;
+  }
 .sph-button[data-size="sm"] {
-    height: calc(var(--spacing, 0.25rem) * 8);
+    height: calc(2rem * var(--sph-control-density, 1));
   }
 .sph-button[data-size="md"] {
-    height: calc(var(--spacing, 0.25rem) * 9);
     font-size: var(--text-sm, 0.875rem);
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+    height: calc(2.25rem * var(--sph-control-density, 1));
   }
 .sph-button[data-size="lg"] {
-    height: calc(var(--spacing, 0.25rem) * 10);
     font-size: var(--text-sm, 0.875rem);
     line-height: var(--tw-leading, var(--text-sm--line-height, calc(1.25 / 0.875)));
+    height: calc(2.5rem * var(--sph-control-density, 1));
   }
 .sph-button:active:not(:disabled, [data-loading]) {
     transform: translateY(1px) scale(0.98);
   }
+.sph-button[data-motion="none"]:hover:not(:disabled, [data-loading]), .sph-button[data-motion="none"]:active:not(:disabled, [data-loading]) {
+    transform: none;
+  }
 .sph-button[data-variant="primary"] {
     background-color: var(--sph-accent);
     color: var(--sph-on-accent);
@@ -590,17 +596,20 @@
     position: relative;
     transition: background-color var(--sph-motion-fast) var(--sph-ease-standard), color var(--sph-motion-fast) var(--sph-ease-standard), box-shadow var(--sph-motion-normal) var(--sph-ease-standard), transform var(--sph-motion-fast) var(--sph-ease-emphasis);
   }
+.sph-icon-button[data-density="compact"] {
+    --sph-control-density: 0.8;
+  }
 .sph-icon-button[data-size="sm"] {
-    width: calc(var(--spacing, 0.25rem) * 8);
-    height: calc(var(--spacing, 0.25rem) * 8);
+    width: calc(2rem * var(--sph-control-density, 1));
+    height: calc(2rem * var(--sph-control-density, 1));
   }
 .sph-icon-button[data-size="md"] {
-    width: calc(var(--spacing, 0.25rem) * 9);
-    height: calc(var(--spacing, 0.25rem) * 9);
+    width: calc(2.25rem * var(--sph-control-density, 1));
+    height: calc(2.25rem * var(--sph-control-density, 1));
   }
 .sph-icon-button[data-size="lg"] {
-    width: calc(var(--spacing, 0.25rem) * 10);
-    height: calc(var(--spacing, 0.25rem) * 10);
+    width: calc(2.5rem * var(--sph-control-density, 1));
+    height: calc(2.5rem * var(--sph-control-density, 1));
   }
 .sph-icon-button:hover:not(:disabled, [data-loading]) {
     background-color: var(--sph-raised);
@@ -5583,20 +5592,94 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     animation: none;
     opacity: 1;
   }
+.sph-side-panel {
+    position: relative;
+    box-sizing: border-box;
+    display: flex;
+    flex: 0 0 auto;
+    inline-size: var(--sph-side-panel-width, 280px);
+    min-inline-size: 0;
+    overflow: hidden;
+    border-inline-end: 1px solid var(--sph-border);
+    background: var(--sph-surface);
+    color: var(--sph-text);
+    font-family: var(--sph-font-sans);
+    transition: inline-size var(--sph-motion-slow) var(--sph-ease-emphasis), margin-inline var(--sph-motion-slow) var(--sph-ease-emphasis), border-inline-width var(--sph-motion-slow) var(--sph-ease-emphasis), background-color var(--sph-motion-fast) var(--sph-ease-standard), box-shadow var(--sph-motion-slow) var(--sph-ease-emphasis);
+  }
+.sph-side-panel[data-side="right"] {
+    justify-content: flex-end;
+    border-inline-end: 0;
+    border-inline-start: 1px solid var(--sph-border);
+  }
+.sph-side-panel__inner {
+    box-sizing: border-box;
+    display: flex;
+    flex: 0 0 auto;
+    flex-direction: column;
+    inline-size: var(--sph-side-panel-width, 280px);
+    min-block-size: 0;
+    overflow-y: auto;
+    overflow-x: hidden;
+    transition: opacity var(--sph-motion-fast) var(--sph-ease-standard), visibility var(--sph-motion-slow) var(--sph-ease-emphasis);
+  }
+.sph-side-panel[data-collapsed] {
+    inline-size: 0;
+    border-inline-width: 0;
+  }
+.sph-side-panel[data-collapsed] .sph-side-panel__inner {
+    opacity: 0;
+    visibility: hidden;
+  }
+.sph-side-panel[data-peek] {
+    z-index: 2;
+    inline-size: 10px;
+    margin-inline-end: -10px;
+    background-color: transparent;
+  }
+.sph-side-panel[data-side="right"][data-peek] {
+    margin-inline: -10px 0;
+  }
+.sph-side-panel[data-peek]:is(:hover, :has(:focus-visible)) {
+    inline-size: var(--sph-side-panel-width, 280px);
+    margin-inline-end: calc(-1 * var(--sph-side-panel-width, 280px));
+    border-inline-width: 1px;
+    background-color: var(--sph-surface);
+    box-shadow: var(--sph-shadow-popover);
+  }
+.sph-side-panel[data-side="right"][data-peek]:is( :hover, :has(:focus-visible) ) {
+    margin-inline: calc(-1 * var(--sph-side-panel-width, 280px)) 0;
+  }
+.sph-side-panel[data-peek]:is(:hover, :has(:focus-visible)) .sph-side-panel__inner {
+    opacity: 1;
+    visibility: visible;
+  }
+@media (prefers-reduced-motion: reduce) {
+    .sph-side-panel, .sph-side-panel__inner {
+      transition: none;
+    }
+  }
 .sph-sidebar {
+    box-sizing: border-box;
     display: flex;
+    flex: 0 0 auto;
     flex-direction: column;
     gap: 6px;
     inline-size: 224px;
+    min-inline-size: 0;
+    overflow: hidden;
     padding: 8px;
     border-inline-end: 1px solid var(--sph-border);
     background: var(--sph-surface);
     font-family: var(--sph-font-sans);
-    transition: inline-size var(--sph-motion-slow) var(--sph-ease-emphasis);
+    transition: inline-size var(--sph-motion-slow) var(--sph-ease-emphasis), padding-inline var(--sph-motion-slow) var(--sph-ease-emphasis), margin-inline var(--sph-motion-slow) var(--sph-ease-emphasis), opacity var(--sph-motion-fast) var(--sph-ease-standard), visibility var(--sph-motion-slow) var(--sph-ease-emphasis), background-color var(--sph-motion-fast) var(--sph-ease-standard), border-color var(--sph-motion-fast) var(--sph-ease-standard), box-shadow var(--sph-motion-slow) var(--sph-ease-emphasis), border-inline-width var(--sph-motion-slow) var(--sph-ease-emphasis);
   }
-.sph-sidebar[data-collapsed] {
+.sph-sidebar[data-rail] {
     inline-size: 56px;
   }
+.sph-sidebar[data-side="right"] {
+    border-inline-end: 0;
+    border-inline-start: 1px solid var(--sph-border);
+  }
 .sph-sidebar__header {
     padding: 6px 8px 2px;
   }
@@ -5630,7 +5713,7 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     overflow: hidden;
     transition: opacity var(--sph-motion-fast) var(--sph-ease-standard);
   }
-.sph-sidebar[data-collapsed] .sph-sidebar__section-title {
+.sph-sidebar[data-rail] .sph-sidebar__section-title {
     opacity: 0;
     block-size: 0;
     padding: 0;
@@ -5667,6 +5750,12 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     opacity: 45%;
     cursor: not-allowed;
   }
+.sph-sidebar[data-side="right"] .sph-sidebar__item:hover:not(:disabled) {
+    transform: translateX(-2px);
+  }
+.sph-sidebar[data-side="right"] .sph-sidebar__item:active:not(:disabled) {
+    transform: translateX(-2px) scale(0.985);
+  }
 .sph-sidebar__item[data-active] {
     background: var(--sph-accent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -5686,6 +5775,14 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
 .sph-sidebar__item[data-active] .sph-sidebar__icon {
     color: var(--sph-accent-strong);
   }
+.sph-sidebar[data-side="right"] .sph-sidebar__item[data-active]::before {
+    inset-inline-start: auto;
+    inset-inline-end: -8px;
+  }
+.sph-sidebar[data-side="right"][data-rail] .sph-sidebar__item[data-active]::before {
+    inset-inline-start: auto;
+    inset-inline-end: -6px;
+  }
 .sph-sidebar__icon {
     display: inline-flex;
     flex: 0 0 auto;
@@ -5699,21 +5796,29 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     text-overflow: ellipsis;
     transition: opacity var(--sph-motion-fast) var(--sph-ease-standard), flex-basis var(--sph-motion-slow) var(--sph-ease-emphasis);
   }
-.sph-sidebar[data-collapsed] .sph-sidebar__header {
+.sph-sidebar[data-rail] .sph-sidebar__header {
     display: none;
   }
-.sph-sidebar[data-collapsed] .sph-sidebar__label, .sph-sidebar[data-collapsed] .sph-sidebar__badge {
+.sph-sidebar[data-rail] .sph-sidebar__label, .sph-sidebar[data-rail] .sph-sidebar__badge {
     opacity: 0;
-    flex-basis: 0;
+    flex: 0 0 auto;
     inline-size: 0;
     margin: 0;
+    padding: 0;
+    overflow: hidden;
+    white-space: nowrap;
     pointer-events: none;
   }
-.sph-sidebar[data-collapsed] .sph-sidebar__item {
+.sph-sidebar[data-rail] .sph-sidebar__item {
     justify-content: center;
+    align-items: center;
+    gap: 0;
     padding-inline: 0;
   }
-.sph-sidebar[data-collapsed] .sph-sidebar__item[data-active]::before {
+.sph-sidebar[data-rail] .sph-sidebar__icon {
+    margin: 0;
+  }
+.sph-sidebar[data-rail] .sph-sidebar__item[data-active]::before {
     inset-inline-start: -6px;
   }
 .sph-sidebar__badge {
@@ -5733,10 +5838,10 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     min-inline-size: 0;
     overflow: hidden;
   }
-.sph-sidebar[data-collapsed] .sph-sidebar__footer-content {
+.sph-sidebar[data-rail] .sph-sidebar__footer-content {
     display: none;
   }
-.sph-sidebar[data-collapsed] .sph-sidebar__footer {
+.sph-sidebar[data-rail] .sph-sidebar__footer {
     justify-content: center;
   }
 .sph-sidebar__toggle {
@@ -5761,6 +5866,82 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     outline: 2px solid var(--sph-focus);
     outline-offset: 1px;
   }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) {
+    inline-size: 224px;
+  }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__header {
+    display: block;
+  }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__section-title {
+    opacity: 1;
+    block-size: auto;
+    padding: 4px 8px 2px;
+  }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__label, .sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__badge {
+    opacity: 1;
+    inline-size: auto;
+    overflow: visible;
+    pointer-events: auto;
+  }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__label {
+    flex: 1 1 auto;
+  }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__badge {
+    flex: 0 0 auto;
+  }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__item {
+    justify-content: flex-start;
+    gap: 9px;
+    padding-inline: 9px;
+  }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__footer-content {
+    display: block;
+  }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__footer {
+    justify-content: flex-start;
+  }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__item[data-active]::before {
+    inset-inline-start: -8px;
+  }
+.sph-sidebar[data-side="right"][data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__item[data-active]::before {
+    inset-inline-start: auto;
+    inset-inline-end: -8px;
+  }
+.sph-sidebar[data-collapsed-mode="hover"][data-collapsed]:is( :hover, :has(:focus-visible) ) .sph-sidebar__badge {
+    margin-inline-start: auto;
+  }
+.sph-sidebar[data-collapsed-mode="hidden"][data-collapsed] {
+    position: relative;
+    z-index: 2;
+    inline-size: 10px;
+    margin-inline-end: -10px;
+    padding-inline: 0;
+    border-inline-width: 0;
+    background-color: transparent;
+  }
+.sph-sidebar[data-side="right"][data-collapsed-mode="hidden"][data-collapsed] {
+    margin-inline: -10px 0;
+  }
+.sph-sidebar[data-collapsed-mode="hidden"][data-collapsed] > * {
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity var(--sph-motion-fast) var(--sph-ease-standard), visibility var(--sph-motion-fast) var(--sph-ease-standard);
+  }
+.sph-sidebar[data-collapsed-mode="hidden"][data-collapsed]:is( :hover, :has(:focus-visible) ) {
+    inline-size: 56px;
+    margin-inline-end: -56px;
+    padding-inline: 8px;
+    border-inline-width: 1px;
+    background-color: var(--sph-surface);
+    box-shadow: var(--sph-shadow-popover);
+  }
+.sph-sidebar[data-side="right"][data-collapsed-mode="hidden"][data-collapsed]:is( :hover, :has(:focus-visible) ) {
+    margin-inline: -56px 0;
+  }
+.sph-sidebar[data-collapsed-mode="hidden"][data-collapsed]:is( :hover, :has(:focus-visible) ) > * {
+    opacity: 1;
+    visibility: visible;
+  }
 @supports (interpolate-size: allow-keywords) {
     .sph-sidebar {
       interpolate-size: allow-keywords;
@@ -6666,7 +6847,6 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     position: relative;
     box-sizing: border-box;
     display: inline-grid;
-    height: calc(var(--spacing, 0.25rem) * 9);
     max-width: 100%;
     min-width: 0px;
     grid-auto-columns: minmax(0, 1fr);
@@ -6679,17 +6859,21 @@ a.sph-breadcrumb__crumb:focus-visible, button.sph-breadcrumb__crumb:focus-visibl
     padding: calc(var(--spacing, 0.25rem) * 0.5);
     vertical-align: middle;
     font-family: var(--sph-font-sans);
+    height: calc(2.25rem * var(--sph-control-density, 1));
     --sph-segmented-inset: 2px;
     --sph-segmented-direction: 1;
   }
 :where([dir="rtl"]) .sph-segmented-control {
     --sph-segmented-direction: -1;
   }
+.sph-segmented-control[data-density="compact"] {
+    --sph-control-density: 0.8;
+  }
 .sph-segmented-control[data-size="sm"] {
-    height: calc(var(--spacing, 0.25rem) * 8);
+    height: calc(2rem * var(--sph-control-density, 1));
   }
 .sph-segmented-control[data-size="lg"] {
-    height: calc(var(--spacing, 0.25rem) * 10);
+    height: calc(2.5rem * var(--sph-control-density, 1));
   }
 .sph-segmented-control[data-full-width="true"] {
     display: grid;