@zovaris/sephiro 0.8.1 → 0.9.0

package/dist/components.css

@@ -5592,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;
   }
@@ -5639,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;
@@ -5676,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)) {
@@ -5695,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;
@@ -5708,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 {
@@ -5742,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 {
@@ -5770,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;

package/dist/index.css

@@ -5888,20 +5888,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;
   }
@@ -5935,7 +6009,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;
@@ -5972,6 +6046,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)) {
@@ -5991,6 +6071,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;
@@ -6004,21 +6092,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 {
@@ -6038,10 +6134,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 {
@@ -6066,6 +6162,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;

package/dist/index.d.ts

@@ -910,6 +910,24 @@ type ResizableProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
 };
 export declare function Resizable({ panes, direction, sizes, defaultSizes, onSizesChange, min, handleLabel, className, ...props }: ResizableProps): import("react").JSX.Element;
 //#endregion
+//#region src/organisms/SidePanel/index.d.ts
+type SidePanelSide = "left" | "right";
+type SidePanelState = {
+  collapsed: boolean;
+  setCollapsed: (collapsed: boolean) => void;
+  toggle: () => void;
+};
+type SidePanelProps = Omit<HTMLAttributes<HTMLElement>, "children"> & {
+  children?: Renderable | ((state: SidePanelState) => Renderable);
+  side?: SidePanelSide;
+  width?: number | string;
+  collapsed?: boolean;
+  defaultCollapsed?: boolean;
+  onCollapsedChange?: (collapsed: boolean) => void;
+  peek?: boolean;
+};
+export declare function SidePanel({ children, side, width, collapsed, defaultCollapsed, onCollapsedChange, peek, className, style, ...props }: SidePanelProps): import("react").JSX.Element;
+//#endregion
 //#region src/organisms/Sidebar/index.d.ts
 type SidebarItem = {
   value: string;
@@ -922,22 +940,24 @@ type SidebarSection = {
   title?: string;
   items: SidebarItem[];
 };
+type SidebarSide = "left" | "right";
+type SidebarCollapsedMode = "rail" | "hover" | "hidden";
 type SidebarProps = Omit<HTMLAttributes<HTMLElement>, "children" | "onSelect"> & {
   sections: SidebarSection[];
-  /** Controlled active item. */
   value?: string;
   defaultValue?: string;
   onSelect?: (value: string) => void;
   header?: Renderable;
   footer?: Renderable;
-  /** Show the collapse toggle. Default: false. */
+  side?: SidebarSide;
   collapsible?: boolean;
   collapsed?: boolean;
   defaultCollapsed?: boolean;
+  collapsedMode?: SidebarCollapsedMode;
   onCollapsedChange?: (collapsed: boolean) => void;
   ariaLabel?: string;
 };
-export declare function Sidebar({ sections, value, defaultValue, onSelect, header, footer, collapsible, collapsed, defaultCollapsed, onCollapsedChange, ariaLabel, className, ...props }: SidebarProps): import("react").JSX.Element;
+export declare function Sidebar({ sections, value, defaultValue, onSelect, header, footer, side, collapsible, collapsed, collapsedMode, defaultCollapsed, onCollapsedChange, ariaLabel, className, ...props }: SidebarProps): import("react").JSX.Element;
 //#endregion
 //#region src/organisms/StreamingText/index.d.ts
 type StreamingTextProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
@@ -1198,5 +1218,5 @@ type ChatScrollerProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {
 };
 export declare function ChatScroller({ children, itemCount, newCount, threshold, ariaLabel, jumpLabel, contentClassName, onPinnedChange, className, ...props }: ChatScrollerProps): import("react").JSX.Element;
 //#endregion
-export { type AccordionItem, type AccordionProps, type AlertProps, type AnimatedNumberProps, type AttachmentFile, type AttachmentProps, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarStatus, type BadgeProps, type BreadcrumbItem, type BreadcrumbProps, type ButtonProps, type CalendarProps, type CalendarRange, type CardProps, type ChartProps, type ChartSeries, type ChatScrollerProps, type CheckboxProps, type CitationProps, type CitationSource, type CollapsibleProps, type ComboboxOption, type ComboboxProps, type CommandItem, type CommandPaletteProps, type ContextMenuProps, type ControlDensity, type ControlSize, type DeltaProps, type DialogProps, type DrawerProps, type DrawerSide, type DropzoneRejectReason, type DropzoneValidation, type DropzoneValidationResult, type EmptyStateProps, type FieldMessageProps, type FieldProps, type HoldButtonProps, type HoverCardProps, type IconButtonProps, type InputProps, type KbdProps, type MagneticDropzoneProps, type MenuItem, type MenuProps, type MenubarMenu, type MenubarProps, type MetadataEntry, type MetadataListLayout, type MetadataListProps, type MotionSpeed, type NoticeProps, type NumberInputProps, type OTPInputProps, type OTPPattern, type OTPState, type OverflowListProps, type PaginationProps, type PlanCardProps, type PlanCardState, type PlanStep, type PopoverProps, type Presence, type ProgressProps, type QuestionCardProps, type QuestionOption, type RadioGroupProps, type RadioOption, type ReasoningStep, type ReasoningStepsProps, type Renderable, type RenderableElement, type ResizableProps, type RevealProps, type ScrollAreaProps, type SegmentedControlProps, type SegmentedOption, type SelectOption, type SelectProps, type SeparatorProps, type SidebarItem, type SidebarProps, type SidebarSection, type SkeletonProps, type SliderProps, type SpinnerProps, type StatGroupProps, type StatProps, type StatusMarkProps, type StatusMarkState, type StepperProps, type StepperStep, type StreamingTextProps, type SurfaceProps, type TabItem, type TableColumn, type TableProps, type TableSort, type TableSortDirection, type TabsProps, type TaskListItem, type TaskListProps, type TaskState, type TextareaProps, type TimelineItem, type TimelineProps, type TimestampFormat, type TimestampProps, type ToastProps, type ToastViewportProps, type ToggleProps, type ToolCall, type ToolCallsProps, type ToolbarProps, type TooltipGroupProps, type TooltipProps, toast };
+export { type AccordionItem, type AccordionProps, type AlertProps, type AnimatedNumberProps, type AttachmentFile, type AttachmentProps, type AvatarGroupItem, type AvatarGroupProps, type AvatarProps, type AvatarStatus, type BadgeProps, type BreadcrumbItem, type BreadcrumbProps, type ButtonProps, type CalendarProps, type CalendarRange, type CardProps, type ChartProps, type ChartSeries, type ChatScrollerProps, type CheckboxProps, type CitationProps, type CitationSource, type CollapsibleProps, type ComboboxOption, type ComboboxProps, type CommandItem, type CommandPaletteProps, type ContextMenuProps, type ControlDensity, type ControlSize, type DeltaProps, type DialogProps, type DrawerProps, type DrawerSide, type DropzoneRejectReason, type DropzoneValidation, type DropzoneValidationResult, type EmptyStateProps, type FieldMessageProps, type FieldProps, type HoldButtonProps, type HoverCardProps, type IconButtonProps, type InputProps, type KbdProps, type MagneticDropzoneProps, type MenuItem, type MenuProps, type MenubarMenu, type MenubarProps, type MetadataEntry, type MetadataListLayout, type MetadataListProps, type MotionSpeed, type NoticeProps, type NumberInputProps, type OTPInputProps, type OTPPattern, type OTPState, type OverflowListProps, type PaginationProps, type PlanCardProps, type PlanCardState, type PlanStep, type PopoverProps, type Presence, type ProgressProps, type QuestionCardProps, type QuestionOption, type RadioGroupProps, type RadioOption, type ReasoningStep, type ReasoningStepsProps, type Renderable, type RenderableElement, type ResizableProps, type RevealProps, type ScrollAreaProps, type SegmentedControlProps, type SegmentedOption, type SelectOption, type SelectProps, type SeparatorProps, type SidePanelProps, type SidePanelSide, type SidePanelState, type SidebarCollapsedMode, type SidebarItem, type SidebarProps, type SidebarSection, type SidebarSide, type SkeletonProps, type SliderProps, type SpinnerProps, type StatGroupProps, type StatProps, type StatusMarkProps, type StatusMarkState, type StepperProps, type StepperStep, type StreamingTextProps, type SurfaceProps, type TabItem, type TableColumn, type TableProps, type TableSort, type TableSortDirection, type TabsProps, type TaskListItem, type TaskListProps, type TaskState, type TextareaProps, type TimelineItem, type TimelineProps, type TimestampFormat, type TimestampProps, type ToastProps, type ToastViewportProps, type ToggleProps, type ToolCall, type ToolCallsProps, type ToolbarProps, type TooltipGroupProps, type TooltipProps, toast };
 //# sourceMappingURL=index.d.ts.map