@helpwave/hightide 0.11.1 → 0.12.0

package/dist/style/globals.css

@@ -335,6 +335,9 @@
   .pointer-events-none {
     pointer-events: none;
   }
+  .collapse {
+    visibility: collapse;
+  }
   .visible {
     visibility: visible;
   }
@@ -616,6 +619,10 @@
     width: calc(var(--spacing) * 5);
     height: calc(var(--spacing) * 5);
   }
+  .size-6 {
+    width: calc(var(--spacing) * 6);
+    height: calc(var(--spacing) * 6);
+  }
   .size-7 {
     width: calc(var(--spacing) * 7);
     height: calc(var(--spacing) * 7);
@@ -716,6 +723,12 @@
   .min-h-9\/10 {
     min-height: calc(9/10 * 100%);
   }
+  .min-h-12 {
+    min-height: calc(var(--spacing) * 12);
+  }
+  .min-h-16 {
+    min-height: calc(var(--spacing) * 16);
+  }
   .min-h-60 {
     min-height: calc(var(--spacing) * 60);
   }
@@ -752,6 +765,9 @@
   .w-24 {
     width: calc(var(--spacing) * 24);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-80 {
     width: calc(var(--spacing) * 80);
   }
@@ -815,6 +831,9 @@
   .min-w-8 {
     min-width: calc(var(--spacing) * 8);
   }
+  .min-w-12 {
+    min-width: calc(var(--spacing) * 12);
+  }
   .min-w-16 {
     min-width: calc(var(--spacing) * 16);
   }
@@ -2513,16 +2532,17 @@
   }
 }
 @layer components {
-  [data-name="card-sm"] {
+  [data-name="card"] {
     display: flex;
     flex-direction: column;
-    row-gap: calc(var(--spacing) * 2);
-    border-radius: 0.25rem;
+    row-gap: calc(var(--spacing) * 1);
+    width: 100%;
+    min-width: calc(var(--spacing) * 0);
     transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
     background-color: var(--coloring-solid-color,var(--coloring-color));
     color: var(--coloring-solid-text,var(--coloring-on-color));
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1);
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     --coloring-color: initial;
     --coloring-on-color: initial;
     --coloring-hover: initial;
@@ -2537,26 +2557,162 @@
     --coloring-color: var(--color-surface);
     --coloring-on-color: var(--color-on-surface);
     --coloring-hover: var(--color-surface-hover);
+    &[data-size="sm"] {
+      border-radius: 0.25rem;
+      padding-inline: calc(var(--spacing) * 2);
+      padding-block: calc(var(--spacing) * 1);
+    }
+    &[data-size="md"] {
+      border-radius: var(--radius-md);
+      padding-inline: calc(var(--spacing) * 4);
+      padding-block: calc(var(--spacing) * 2);
+    }
+    &[data-size="lg"] {
+      border-radius: var(--radius-lg);
+      padding-inline: calc(var(--spacing) * 8);
+      padding-block: calc(var(--spacing) * 4);
+    }
   }
-  [data-name="card-md"] {
+  [data-name="action-card"], [data-name="navigation-card"] {
     display: flex;
     flex-direction: column;
-    row-gap: calc(var(--spacing) * 2);
-    border-radius: var(--radius-md);
-    background-color: var(--color-surface);
-    padding-inline: calc(var(--spacing) * 4);
-    padding-block: calc(var(--spacing) * 2);
-    color: var(--color-on-surface);
+    row-gap: calc(var(--spacing) * 1);
+    width: 100%;
+    min-width: calc(var(--spacing) * 0);
+    transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color var(--animation-duration-in, 250ms) ease-in-out, background-color var(--animation-duration-in, 250ms) ease-in-out;
+    background-color: var(--coloring-solid-color,var(--coloring-color));
+    color: var(--coloring-solid-text,var(--coloring-on-color));
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--coloring-solid-hover,var(--coloring-hover));
+      }
+    }
+    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-tonal: initial;
+    --coloring-tonal-background: initial;
+    --coloring-tonal-text: initial;
+    --coloring-tonal-hover: initial;
+    --coloring-color: var(--color-surface);
+    --coloring-on-color: var(--color-on-surface);
+    --coloring-hover: var(--color-surface-hover);
+    &[data-size="sm"] {
+      border-radius: 0.25rem;
+      padding-inline: calc(var(--spacing) * 2);
+      padding-block: calc(var(--spacing) * 1);
+    }
+    &[data-size="md"] {
+      border-radius: var(--radius-md);
+      padding-inline: calc(var(--spacing) * 4);
+      padding-block: calc(var(--spacing) * 2);
+    }
+    &[data-size="lg"] {
+      border-radius: var(--radius-lg);
+      padding-inline: calc(var(--spacing) * 8);
+      padding-block: calc(var(--spacing) * 4);
+    }
   }
-  [data-name="card-lg"] {
+  [data-name="card-header"] {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    width: 100%;
+    min-width: calc(var(--spacing) * 0);
+    align-items: center;
+  }
+  [data-name="card-content"] {
     display: flex;
     flex-direction: column;
-    row-gap: calc(var(--spacing) * 2);
-    border-radius: var(--radius-lg);
-    background-color: var(--color-surface);
-    padding-inline: calc(var(--spacing) * 8);
-    padding-block: calc(var(--spacing) * 4);
-    color: var(--color-on-surface);
+    row-gap: calc(var(--spacing) * 1);
+    min-width: calc(var(--spacing) * 0);
+    flex: 1;
+  }
+  [data-name="card-action"] {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-description);
+  }
+  [data-name="navigation-card-action"] {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-description);
+    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    &:is(:where(.group\/card):hover *) {
+      @media (hover: hover) {
+        color: var(--color-on-surface);
+      }
+    }
+  }
+  [data-name="card-title"] {
+    font-family: var(--font-space);
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  [data-name="card"][data-size="sm"] [data-name="card-title"], [data-name="action-card"][data-size="sm"] [data-name="card-title"], [data-name="navigation-card"][data-size="sm"] [data-name="card-title"] {
+    font-family: var(--font-space);
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  [data-name="card"][data-size="lg"] [data-name="card-title"], [data-name="action-card"][data-size="lg"] [data-name="card-title"], [data-name="navigation-card"][data-size="lg"] [data-name="card-title"] {
+    font-family: var(--font-space);
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  [data-name="card-description"] {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+    color: var(--color-description);
+  }
+  [data-name="action-card"] {
+    &:not([data-disabled]) {
+      cursor: pointer;
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+      --coloring-color: initial;
+      --coloring-on-color: initial;
+      --coloring-hover: initial;
+      --coloring-text: initial;
+      --coloring-text-hover: initial;
+      --coloring-outline: initial;
+      --coloring-outline-hover: initial;
+      --coloring-tonal: initial;
+      --coloring-tonal-background: initial;
+      --coloring-tonal-text: initial;
+      --coloring-tonal-hover: initial;
+      --coloring-color: var(--color-disabled);
+      --coloring-on-color: var(--color-on-disabled);
+      --coloring-hover: var(--color-disabled);
+      --coloring-text-hover: transparent;
+    }
+  }
+  [data-name="navigation-card"] {
+    cursor: pointer;
   }
 }
 @layer components {
@@ -3261,6 +3417,50 @@
     white-space: nowrap;
     font-size: calc(var(--size) * 2 / 3);
   }
+  [data-name="avatar-with-status"] {
+    position: relative;
+    display: inline-flex;
+  }
+  [data-name="avatar-with-status-dot"] {
+    position: absolute;
+    right: calc(var(--spacing) * 0);
+    bottom: calc(var(--spacing) * 0);
+    z-index: 1;
+    border-radius: calc(infinity * 1px);
+    --tw-border-style: solid;
+    border-style: solid;
+    border-color: var(--color-background);
+    &[data-size="xs"] {
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 3);
+      border-style: var(--tw-border-style);
+      border-width: 1.5px;
+    }
+    &[data-size="sm"] {
+      width: calc(var(--spacing) * 3.5);
+      height: calc(var(--spacing) * 3.5);
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+    &[data-size="md"] {
+      width: calc(var(--spacing) * 4);
+      height: calc(var(--spacing) * 4);
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+    &[data-size="lg"] {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+    }
+    &[data-online] {
+      background-color: var(--color-positive);
+    }
+    &:not([data-online]) {
+      background-color: var(--color-negative);
+    }
+  }
 }
 @layer components {
   [data-name="chip"] {
@@ -3825,9 +4025,12 @@
     row-gap: calc(var(--spacing) * 0);
     align-items: center;
     justify-content: center;
-    border-radius: 0.25rem;
     border-style: var(--tw-border-style);
     border-width: 2px;
+    border-radius: 0.25rem;
+    &[data-rounded] {
+      border-radius: calc(infinity * 1px);
+    }
     transition: border-color var(--animation-duration-in, 250ms) ease-in-out, box-shadow var(--animation-duration-in, 250ms) ease-in-out, outline-color var(--animation-duration-in, 250ms) ease-in-out, outline-offset var(--animation-duration-in, 250ms) ease-in-out, color 100ms ease-in-out, background-color 100ms ease-in-out;
     &:not([data-disabled]) {
       &:hover {
@@ -5880,6 +6083,256 @@
     color: var(--color-description);
   }
 }
+@layer components {
+  [data-name="vertical-navigation-tree"] {
+    margin: calc(var(--spacing) * 0);
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 2);
+    list-style-type: none;
+    padding: calc(var(--spacing) * 0);
+  }
+  [data-name="vertical-navigation-node"] {
+    margin: calc(var(--spacing) * 0);
+    cursor: pointer;
+    list-style-type: none;
+    border-radius: var(--radius-md);
+    padding: calc(var(--spacing) * 0);
+    --tw-outline-style: none;
+    outline-style: none;
+  }
+  [data-name="vertical-navigation-group"] {
+    margin: calc(var(--spacing) * 0);
+    margin-block: calc(var(--spacing) * 0.5);
+    margin-left: calc(var(--spacing) * 2.5);
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    list-style-type: none;
+    border-left-style: var(--tw-border-style);
+    border-left-width: 1px;
+    border-color: var(--color-border);
+    padding-left: calc(var(--spacing) * 2.5);
+  }
+  [data-name="vertical-navigation-node-header"], [data-name="vertical-navigation-item"] {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 1);
+    min-height: calc(var(--spacing) * 9);
+    min-width: calc(var(--spacing) * 0);
+    align-items: center;
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 2.5);
+    padding-block: calc(var(--spacing) * 1.5);
+    &:hover, &:focus-visible {
+      background-color: color-mix(in srgb, #694BB4 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+      }
+    }
+  }
+  [data-name="vertical-navigation-node-header"] {
+    justify-content: space-between;
+    transition: var(--focus-outline-transition);
+    &[data-active] {
+      background-color: color-mix(in srgb, #694BB4 15%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary) 15%, transparent);
+      }
+      &:is(:where(.group\/tree-node):focus-visible *) {
+        outline: var(--focus-outline);
+        outline-offset: var(--focus-outline-offset);
+        box-shadow: var(--focus-box-shadow);
+        border-color: var(--focus-border-color);
+      }
+    }
+  }
+  [data-name="vertical-navigation-item-link"] {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    width: 100%;
+    align-items: center;
+    justify-content: space-between;
+    text-decoration-line: none;
+  }
+}
+@layer components {
+  [data-name="app-page"] {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 0);
+    height: 100dvh;
+    max-height: 100dvh;
+    min-height: 100dvh;
+    width: 100vw;
+    overflow: hidden;
+    overflow-x: hidden;
+  }
+  [data-name="app-sidebar-backdrop"] {
+    position: fixed;
+    inset: calc(var(--spacing) * 0);
+    z-index: 40;
+    touch-action: manipulation;
+    background-color: var(--color-overlay-shadow);
+    @media (width >= 64rem) {
+      display: none;
+    }
+  }
+  [data-name="app-sidebar-container"] {
+    position: fixed;
+    inset-block: calc(var(--spacing) * 0);
+    height: 100vh;
+    min-width: 100%;
+    padding: calc(var(--spacing) * 4);
+    padding-top: calc(max(env(safe-area-inset-top), var(--spacing) * 4));
+    padding-bottom: calc(max(env(safe-area-inset-bottom), var(--spacing) * 4));
+    @media (width >= 48rem) {
+      min-width: calc(6/10 * 100%);
+    }
+    @media (width >= 64rem) {
+      position: relative;
+      max-width: calc(var(--spacing) * 64);
+      min-width: calc(var(--spacing) * 56);
+    }
+    &:not([data-open]) {
+      display: none;
+      @media (width >= 64rem) {
+        display: block;
+      }
+    }
+  }
+  [data-name="app-sidebar-content"] {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 4);
+    height: 100%;
+    min-height: calc(var(--spacing) * 0);
+    width: 100%;
+    overflow: hidden;
+    border-radius: var(--radius-lg);
+    background-color: var(--color-surface);
+    color: var(--color-on-surface);
+    --shadow-right: 5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-left: -5px 0 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-top: 0 -5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    --shadow-bottom: 0 5px 5px 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
+    box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+    --tw-duration: 300ms;
+    transition-duration: 300ms;
+    --tw-ease: var(--ease-out);
+    transition-timing-function: var(--ease-out);
+    &:not([data-open]) {
+      pointer-events: none;
+      --tw-translate-x: -100%;
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+      @media (width >= 64rem) {
+        pointer-events: auto;
+        --tw-translate-x: calc(var(--spacing) * 0);
+        translate: var(--tw-translate-x) var(--tw-translate-y);
+      }
+    }
+    &[data-open] {
+      --tw-translate-x: calc(var(--spacing) * 0);
+      translate: var(--tw-translate-x) var(--tw-translate-y);
+    }
+  }
+  .app-sidebar-close-button {
+    position: absolute;
+    top: calc(var(--spacing) * 0.5);
+    right: calc(var(--spacing) * 0.5);
+    z-index: 10;
+    @media (width >= 64rem) {
+      display: none;
+    }
+  }
+  .app-page-sidebar-with-navigation {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    height: 100%;
+    min-height: calc(var(--spacing) * 0);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  .app-page-sidebar-with-navigation-header {
+    margin-bottom: calc(var(--spacing) * 8);
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    align-items: flex-start;
+    padding-inline: calc(var(--spacing) * 3.25);
+    @media (width >= 64rem) {
+      align-items: center;
+    }
+  }
+  .app-page-sidebar-with-navigation-scroll {
+    min-height: calc(var(--spacing) * 0);
+    flex: 1;
+    overflow-y: scroll;
+    overscroll-behavior-y: contain;
+    padding-block: calc(var(--spacing) * 0.75);
+    padding-right: calc(var(--spacing) * 0.75);
+    padding-left: calc(var(--spacing) * 3.25);
+    scrollbar-gutter: stable;
+  }
+  .app-page-sidebar-with-navigation-footer {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    padding-inline: calc(var(--spacing) * 3.25);
+    padding-top: calc(var(--spacing) * 2);
+  }
+  [data-name="app-page-content"] {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    flex-grow: 1;
+    overflow-y: auto;
+    overscroll-behavior-y: contain;
+    scrollbar-gutter: stable;
+    @media (width >= 64rem) {
+      padding-left: calc(var(--spacing) * 6);
+    }
+  }
+  [data-name="app-page-header"] {
+    position: sticky;
+    top: calc(var(--spacing) * 0);
+    right: calc(var(--spacing) * 0);
+    z-index: 20;
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    align-items: center;
+    background-color: var(--color-background);
+    padding: calc(var(--spacing) * 4);
+    color: var(--color-on-background);
+    @media (width >= 64rem) {
+      padding-left: calc(var(--spacing) * 0);
+    }
+  }
+  .app-page-menu-button {
+    @media (width >= 64rem) {
+      display: none;
+    }
+  }
+  [data-name="app-page-main"] {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 4);
+    @media (width >= 64rem) {
+      padding-left: calc(var(--spacing) * 0);
+    }
+  }
+  [data-name="app-page-main-spacer"] {
+    min-height: calc(var(--spacing) * 16);
+  }
+}
 :root {
   --spacing: 0.25rem;
   --drawer-indent: calc(4 * var(--spacing));

package/dist/style/uncompiled/theme/components/app-page.css

@@ -0,0 +1,116 @@
+@layer components {
+  [data-name="app-page"] {
+    @apply flex-row-0 h-dvh min-h-dvh max-h-dvh w-screen overflow-hidden overflow-x-hidden;
+  }
+
+  [data-name="app-sidebar-backdrop"] {
+    @apply fixed inset-0 z-40 touch-manipulation bg-overlay-shadow;
+
+    @variant desktop {
+      @apply hidden;
+    }
+  }
+
+  [data-name="app-sidebar-container"] {
+    @apply fixed inset-y-0 min-w-full h-screen p-4;
+    padding-top: calc(max(env(safe-area-inset-top), var(--spacing) * 4));
+    padding-bottom: calc(max(env(safe-area-inset-bottom), var(--spacing) * 4));
+
+    @variant tablet {
+      @apply min-w-6/10;
+    }
+
+    @variant desktop {
+      @apply relative min-w-56 max-w-64;
+    }
+
+    &:not([data-open]) {
+      @apply hidden;
+
+      @variant desktop {
+        @apply block;
+      }
+    }
+  }
+
+  [data-name="app-sidebar-content"] {
+    @apply relative flex-col-4 rounded-lg bg-surface text-on-surface w-full h-full min-h-0 overflow-hidden shadow-around-md;
+    @apply transform transition-transform duration-300 ease-out;
+
+    &:not([data-open]) {
+      @apply -translate-x-full pointer-events-none;
+
+      @variant desktop {
+        @apply translate-x-0 pointer-events-auto;
+      }
+    }
+
+    &[data-open] {
+      @apply translate-x-0;
+    }
+  }
+
+  .app-sidebar-close-button {
+    @apply absolute top-0.5 right-0.5 z-10;
+
+    @variant desktop {
+      @apply hidden;
+    }
+  }
+
+  .app-page-sidebar-with-navigation {
+    @apply flex-col-0 h-full min-h-0 py-2;
+  }
+
+  .app-page-sidebar-with-navigation-header {
+    @apply flex-col-0 items-start px-3.25 mb-8;
+
+    @variant desktop {
+      @apply items-center;
+    }
+  }
+
+  .app-page-sidebar-with-navigation-scroll {
+    @apply flex-1 min-h-0 pl-3.25 pr-0.75 py-0.75 overflow-y-scroll overscroll-y-contain;
+    scrollbar-gutter: stable;
+  }
+
+  .app-page-sidebar-with-navigation-footer {
+    @apply flex-col-0 px-3.25 pt-2;
+  }
+
+  [data-name="app-page-content"] {
+    @apply flex-col-0 grow overflow-y-auto overscroll-y-contain;
+    scrollbar-gutter: stable;
+
+    @variant desktop {
+      @apply pl-6;
+    }
+  }
+
+  [data-name="app-page-header"] {
+    @apply sticky top-0 right-0 z-20 flex-row-2 items-center p-4 bg-background text-on-background;
+
+    @variant desktop {
+      @apply pl-0;
+    }
+  }
+
+  .app-page-menu-button {
+    @variant desktop {
+      @apply hidden;
+    }
+  }
+
+  [data-name="app-page-main"] {
+    @apply flex-col-2 px-4;
+
+    @variant desktop {
+      @apply pl-0;
+    }
+  }
+
+  [data-name="app-page-main-spacer"] {
+    @apply min-h-16;
+  }
+}