payload-nested-docs-page-tree 1.2.4 → 1.4.1

package/dist/components/PageTreeListView.module.css

@@ -1,376 +1,399 @@
-.root {
-}
-
-.root :global(.pages-hierarchy-table) {
-  --pages-tree-shade-rgb: 0 0 0;
-  --pages-tree-shade-1: rgb(var(--pages-tree-shade-rgb) / 0.03);
-  --pages-tree-shade-2: rgb(var(--pages-tree-shade-rgb) / 0.06);
-  --pages-tree-shade-3: rgb(var(--pages-tree-shade-rgb) / 0.08);
-  --pages-tree-shade-4: rgb(var(--pages-tree-shade-rgb) / 0.1);
-  --pages-tree-shade-5: rgb(var(--pages-tree-shade-rgb) / 0.14);
-  --pages-tree-shade-6: rgb(var(--pages-tree-shade-rgb) / 0.16);
-  overflow: visible;
-  position: relative;
-}
-
-.root :global(.pages-hierarchy-insert-row td) {
-  block-size: 0;
-  border: 0;
-  line-height: 0;
-  overflow: visible;
-  padding: 0;
-}
-
-.root :global(.pages-hierarchy-insert-row__target) {
-  block-size: 0;
-  overflow: visible;
-  position: relative;
-}
-
-.root :global(.pages-hierarchy-insert-row__target::after) {
-  background: transparent;
-  block-size: 2px;
-  border-radius: 999px;
-  content: '';
-  inset-block-start: -1px;
-  inset-inline: 0.75rem;
-  position: absolute;
-  transition:
-    background-color 0.15s ease,
-    box-shadow 0.15s ease;
-}
-
-.root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
-  background: rgb(74 84 98 / 0.64);
-  box-shadow: 0 0 0 1px rgb(74 84 98 / 0.16);
-}
-
-.root :global(.pages-hierarchy-insert-row[data-drop-valid='false'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
-  background: rgb(190 90 70 / 0.72);
-  box-shadow: 0 0 0 1px rgb(190 90 70 / 0.2);
-}
-
-.root :global(.pages-hierarchy-table .table) {
-  margin-bottom: 0;
-  overflow-y: hidden;
-}
-
-.root :global(.pages-hierarchy-table[data-page-tree-orderable='true'] [data-page-tree-manual-order-cell='true']) {
-  inline-size: 2rem;
-  min-inline-size: 2rem;
-  min-width: 2rem;
-  text-align: center;
-  width: 2rem;
-}
-
-.root :global(.pages-hierarchy-table[data-page-tree-orderable='true'] td[data-page-tree-manual-order-cell='true']) {
-  padding-inline: 0;
-}
-
-.root :global(.pages-hierarchy-table[data-page-tree-orderable='true'] th[data-page-tree-manual-order-cell='true'] .sort-header) {
-  inline-size: 100%;
-  justify-content: center;
-  min-inline-size: 0;
-}
-
-.root :global(.pages-hierarchy-table[data-page-tree-orderable='true'] td[data-page-tree-title-cell='true'] .pages-hierarchy-cell) {
-  margin-inline-start: -2rem;
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr) {
-  background: transparent;
-  transition: background-color 0.16s ease;
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd)),
-.root :global(.pages-hierarchy-table .table tbody tr:nth-child(even)) {
-  background: transparent;
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd) td:first-child),
-.root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd) td:last-child),
-.root :global(.pages-hierarchy-table .table tbody tr:nth-child(even) td:first-child),
-.root :global(.pages-hierarchy-table .table tbody tr:nth-child(even) td:last-child) {
-  border-radius: 0;
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])) {
-  background: var(--pages-tree-shade-1);
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])) {
-  background: var(--pages-tree-shade-2);
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])) {
-  background: var(--pages-tree-shade-3);
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])) {
-  background: var(--pages-tree-shade-4);
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])) {
-  background: var(--pages-tree-shade-5);
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
-  background: var(--pages-tree-shade-6);
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
-  border-radius: var(--style-radius-s);
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:first-child),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:first-child),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:first-child),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:first-child),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:first-child),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:first-child) {
-  border-bottom-left-radius: inherit;
-  border-top-left-radius: inherit;
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:last-child),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:last-child),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:last-child),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:last-child),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:last-child),
-.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:last-child) {
-  border-bottom-right-radius: inherit;
-  border-top-right-radius: inherit;
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
-  box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='true']) {
-  box-shadow: inset 0 0 0 2px rgb(74 84 98 / 0.38);
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='false']) {
-  box-shadow: inset 0 0 0 999px rgb(190 90 70 / 0.18);
-}
-
-.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true'][data-drag-over='true']) {
-  box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table) {
-  --pages-tree-shade-rgb: 255 255 255;
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
-  background: rgb(232 236 241 / 0.72);
-  box-shadow: 0 0 0 1px rgb(232 236 241 / 0.22);
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='false'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
-  background: rgb(255 134 117 / 0.72);
-  box-shadow: 0 0 0 1px rgb(255 134 117 / 0.22);
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
-  box-shadow: inset 0 0 0 999px rgb(65 178 236 / 0.28);
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true'][data-drag-over='true']) {
-  box-shadow: inset 0 0 0 999px rgb(65 178 236 / 0.28);
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='true']:not([data-is-drag-source='true'])) {
-  box-shadow: inset 0 0 0 2px rgb(232 236 241 / 0.42);
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='false']:not([data-is-drag-source='true'])) {
-  box-shadow: inset 0 0 0 999px rgb(190 90 70 / 0.24);
-}
-
-.root :global(.pages-hierarchy-cell) {
-  align-items: center;
-  display: flex;
-  gap: 0.35rem;
-  min-width: 0;
-  padding-inline-start: calc(var(--pages-tree-depth, 0) * 1.75rem);
-}
-
-.root :global(.pages-hierarchy-cell__drag-handle),
-.root :global(.pages-hierarchy-cell__drag-spacer),
-.root :global(.pages-hierarchy-cell__toggle),
-.root :global(.pages-hierarchy-cell__spacer) {
-  align-items: center;
-  block-size: 1.5rem;
-  display: inline-flex;
-  flex: 0 0 1.5rem;
-  inline-size: 1.5rem;
-  justify-content: center;
-}
-
-.root :global(.pages-hierarchy-cell__drag-handle),
-.root :global(.pages-hierarchy-cell__toggle) {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  border-radius: var(--style-radius-s, 4px);
-  color: var(--theme-text-dim);
-  cursor: pointer;
-  padding: 0;
-  transition:
-    background-color 0.15s ease,
-    color 0.15s ease;
-}
-
-.root :global(.pages-hierarchy-cell__drag-handle) {
-  cursor: grab;
-  margin-inline-end: 3px;
-  touch-action: none;
-}
-
-.root :global(.pages-hierarchy-cell__drag-handle:disabled) {
-  cursor: default;
-  opacity: 0.45;
-}
-
-.root :global(.pages-hierarchy-cell__drag-handle--active) {
-  color: var(--theme-text);
-}
-
-.root :global(.pages-hierarchy-cell__drag-handle:active:not(:disabled)),
-.root :global(.pages-hierarchy-cell__drag-handle--active:not(:disabled)) {
-  cursor: grabbing;
-}
-
-.root :global(.pages-hierarchy-cell__drag-handle svg) {
-  block-size: 0.95rem;
-  inline-size: 0.95rem;
-}
-
-.root :global(.pages-hierarchy-cell__drag-handle:hover:not(:disabled)),
-.root :global(.pages-hierarchy-cell__drag-handle:focus-visible:not(:disabled)),
-.root :global(.pages-hierarchy-cell__toggle:hover),
-.root :global(.pages-hierarchy-cell__toggle:focus-visible) {
-  background: rgb(0 0 0 / 0.05);
-  color: var(--theme-text);
-}
-
-.root :global(.pages-hierarchy-cell__chevron) {
-  block-size: 0.8rem;
-  inline-size: 0.8rem;
-  transition: transform 0.15s ease;
-}
-
-.root :global(.pages-hierarchy-cell__chevron--collapsed) {
-  transform: rotate(-90deg);
-}
-
-.root :global(.pages-hierarchy-cell[data-tree-home='true'] .pages-hierarchy-cell__content > a:first-child),
-.root :global(.pages-hierarchy-cell[data-tree-home='true'] .pages-hierarchy-cell__content > button:first-child) {
-  align-items: center;
-  display: inline-flex;
-  gap: 0.35rem;
-}
-
-.root :global(.pages-hierarchy-cell[data-tree-home='true'] .pages-hierarchy-cell__content > a:first-child::before),
-.root :global(.pages-hierarchy-cell[data-tree-home='true'] .pages-hierarchy-cell__content > button:first-child::before) {
-  background: currentColor;
-  block-size: 1rem;
-  content: '';
-  flex: 0 0 1rem;
-  inline-size: 1rem;
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.48907C3 9.18048 3.14247 8.88917 3.38606 8.69972L11.3861 2.47749C11.7472 2.19663 12.2528 2.19663 12.6139 2.47749L20.6139 8.69972C20.8575 8.88917 21 9.18048 21 9.48907V20ZM19 19V9.97815L12 4.53371L5 9.97815V19H19Z'/%3E%3C/svg%3E") center / contain no-repeat;
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21 20C21 20.5523 20.5523 21 20 21H4C3.44772 21 3 20.5523 3 20V9.48907C3 9.18048 3.14247 8.88917 3.38606 8.69972L11.3861 2.47749C11.7472 2.19663 12.2528 2.19663 12.6139 2.47749L20.6139 8.69972C20.8575 8.88917 21 9.18048 21 9.48907V20ZM19 19V9.97815L12 4.53371L5 9.97815V19H19Z'/%3E%3C/svg%3E") center / contain no-repeat;
-}
-
-.root :global(.pages-hierarchy-cell__content) {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.root :global(.pages-hierarchy-empty-cell) {
-  color: var(--theme-text-dim);
-}
-
-.root :global(.pages-hierarchy-drag-overlay) {
-  align-items: center;
-  background: var(--theme-elevation-0);
-  border: 1px solid var(--theme-elevation-200);
-  border-radius: var(--style-radius-s, 4px);
-  box-shadow: 0 12px 28px rgb(0 0 0 / 0.14);
-  color: var(--theme-text);
-  display: inline-flex;
-  font-family: var(--font-mono, var(--font-body));
-  font-size: 0.95rem;
-  font-weight: 500;
-  inline-size: max-content;
-  margin-inline-start: 2rem;
-  padding: 0.65rem 0.85rem;
-  pointer-events: none;
-  transform: translateY(calc(0.75rem - 50%));
-  white-space: nowrap;
-}
-
-.root :global(.pages-hierarchy-status-badge) {
-  align-items: center;
-  border-radius: 4px;
-  display: inline-flex;
-  font-size: 0.72rem;
-  font-weight: 700;
-  letter-spacing: 0.08em;
-  line-height: 1;
-  min-height: 1.55rem;
-  padding: 0.32rem 0.72rem;
-  text-transform: uppercase;
-  white-space: nowrap;
-}
-
-.root :global(.pages-hierarchy-status-badge--published) {
-  background: rgb(0 255 0 / 0.3);
-  color: #047500;
-}
-
-.root :global(.pages-hierarchy-status-badge--changed) {
-  background: rgb(255 153 0 / 0.3);
-  color: #8d3f00;
-}
-
-.root :global(.pages-hierarchy-status-badge--draft) {
-  background: rgb(255 217 0 / 0.3);
-  color: #6d5000;
-}
-
-.root :global(.pages-hierarchy-status-badge--unknown) {
-  background: var(--theme-elevation-100);
-  color: var(--theme-text-dim);
-}
-
-.root :global(.pages-hierarchy-status-badge[data-custom-color='true']) {
-  background: color-mix(in srgb, var(--page-tree-badge-base) 14%, transparent);
-  color: color-mix(in srgb, var(--page-tree-badge-base) 78%, black);
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--published) {
-  background: rgb(9 255 0 / 0.3);
-  color: rgb(30 255 0);
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--changed) {
-  background: rgb(194 65 12 / 0.3);
-  color: rgb(255 174 0);
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--draft) {
-  background: rgb(255 230 0 / 0.2);
-  color: rgb(255 230 0);
-}
-
-:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge[data-custom-color='true']) {
-  background: color-mix(in srgb, var(--page-tree-badge-base) 22%, transparent);
-  color: color-mix(in srgb, var(--page-tree-badge-base) 64%, white);
-}
+.root {
+}
+
+.root :global(.pages-hierarchy-table) {
+  --pages-tree-shade-rgb: 0 0 0;
+  --pages-tree-shade-1: rgb(var(--pages-tree-shade-rgb) / 0.03);
+  --pages-tree-shade-2: rgb(var(--pages-tree-shade-rgb) / 0.06);
+  --pages-tree-shade-3: rgb(var(--pages-tree-shade-rgb) / 0.08);
+  --pages-tree-shade-4: rgb(var(--pages-tree-shade-rgb) / 0.1);
+  --pages-tree-shade-5: rgb(var(--pages-tree-shade-rgb) / 0.14);
+  --pages-tree-shade-6: rgb(var(--pages-tree-shade-rgb) / 0.16);
+  overflow: visible;
+  position: relative;
+}
+
+.root :global(.pages-hierarchy-insert-row td) {
+  block-size: 0;
+  border: 0;
+  line-height: 0;
+  overflow: visible;
+  padding: 0;
+}
+
+.root :global(.pages-hierarchy-insert-row__target) {
+  block-size: 0;
+  overflow: visible;
+  position: relative;
+}
+
+.root :global(.pages-hierarchy-insert-row__target::after) {
+  background: transparent;
+  block-size: 2px;
+  border-radius: 999px;
+  content: '';
+  inset-block-start: -1px;
+  inset-inline: 0.75rem;
+  position: absolute;
+  transition:
+    background-color 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
+  background: rgb(74 84 98 / 0.64);
+  box-shadow: 0 0 0 1px rgb(74 84 98 / 0.16);
+}
+
+.root :global(.pages-hierarchy-insert-row[data-drop-valid='false'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
+  background: rgb(190 90 70 / 0.42);
+  box-shadow: 0 0 0 1px rgb(190 90 70 / 0.12);
+}
+
+.root :global(.pages-hierarchy-table .table) {
+  margin-bottom: 0;
+  overflow-y: hidden;
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr) {
+  background: transparent;
+  transition: background-color 0.16s ease;
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd)),
+.root :global(.pages-hierarchy-table .table tbody tr:nth-child(even)) {
+  background: transparent;
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd) td:first-child),
+.root :global(.pages-hierarchy-table .table tbody tr:nth-child(odd) td:last-child),
+.root :global(.pages-hierarchy-table .table tbody tr:nth-child(even) td:first-child),
+.root :global(.pages-hierarchy-table .table tbody tr:nth-child(even) td:last-child) {
+  border-radius: 0;
+}
+
+.root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort']),
+.root :global(.pages-hierarchy-table .table td.cell-_pageTreeOrderSort) {
+  inline-size: 2rem;
+  max-inline-size: 2rem;
+  min-inline-size: 0;
+  padding-inline: 0.2rem;
+  text-align: center;
+  width: 2rem;
+}
+
+.root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header) {
+  justify-content: center;
+}
+
+.root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header__button svg) {
+  display: none;
+}
+
+.root :global(.pages-hierarchy-table .table th[id='heading-_pageTreeOrderSort'] .sort-header__button::before) {
+  background-color: currentColor;
+  block-size: 12px;
+  content: '';
+  display: block;
+  inline-size: 12px;
+  mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.35714 3.92857H0.5M5.07143 7.35714H0.5M2.78571 10.7857H0.5M9.64286 0.5H0.5M9.64286 3.92857V12.5M9.64286 12.5L12.5 9.92857M9.64286 12.5L6.78571 9.92857' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.35714 3.92857H0.5M5.07143 7.35714H0.5M2.78571 10.7857H0.5M9.64286 0.5H0.5M9.64286 3.92857V12.5M9.64286 12.5L12.5 9.92857M9.64286 12.5L6.78571 9.92857' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+.root :global(.pages-hierarchy-order-sort-spacer) {
+  display: block;
+  inline-size: 1rem;
+}
+
+.root :global(.pages-hierarchy-table td[data-page-tree-title-cell='true'] .pages-hierarchy-cell) {
+  margin-inline-start: -2rem;
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])) {
+  background: var(--pages-tree-shade-1);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])) {
+  background: var(--pages-tree-shade-2);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])) {
+  background: var(--pages-tree-shade-3);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])) {
+  background: var(--pages-tree-shade-4);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])) {
+  background: var(--pages-tree-shade-5);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
+  background: var(--pages-tree-shade-6);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1'])),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2'])),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3'])),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4'])),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5'])),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6'])) {
+  border-radius: var(--style-radius-s);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:first-child),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:first-child),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:first-child),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:first-child),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:first-child),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:first-child) {
+  border-bottom-left-radius: inherit;
+  border-top-left-radius: inherit;
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='1']) td:last-child),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='2']) td:last-child),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='3']) td:last-child),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='4']) td:last-child),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='5']) td:last-child),
+.root :global(.pages-hierarchy-table .table tbody tr:has(.pages-hierarchy-cell[data-tree-shade-level='6']) td:last-child) {
+  border-bottom-right-radius: inherit;
+  border-top-right-radius: inherit;
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
+  box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-order-drag-source='true']) {
+  box-shadow: inset 0 0 0 2px rgb(74 84 98 / 0.24);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='true']) {
+  box-shadow: inset 0 0 0 2px rgb(74 84 98 / 0.38);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='false']) {
+  box-shadow: inset 0 0 0 999px rgb(190 90 70 / 0.18);
+}
+
+.root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true'][data-drag-over='true']) {
+  box-shadow: inset 0 0 0 999px rgb(36 164 223 / 0.22);
+}
+
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table) {
+  --pages-tree-shade-rgb: 255 255 255;
+}
+
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='true'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
+  background: rgb(232 236 241 / 0.72);
+  box-shadow: 0 0 0 1px rgb(232 236 241 / 0.22);
+}
+
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-insert-row[data-drop-valid='false'][data-drag-over='true'] .pages-hierarchy-insert-row__target::after) {
+  background: rgb(255 134 117 / 0.42);
+  box-shadow: 0 0 0 1px rgb(255 134 117 / 0.12);
+}
+
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true']) {
+  box-shadow: inset 0 0 0 999px rgb(65 178 236 / 0.28);
+}
+
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-order-drag-source='true']) {
+  box-shadow: inset 0 0 0 2px rgb(232 236 241 / 0.22);
+}
+
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-is-drag-source='true'][data-drag-over='true']) {
+  box-shadow: inset 0 0 0 999px rgb(65 178 236 / 0.28);
+}
+
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='true']:not([data-is-drag-source='true'])) {
+  box-shadow: inset 0 0 0 2px rgb(232 236 241 / 0.42);
+}
+
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-table .table tbody tr[data-page-tree-row='true'][data-drag-over='true'][data-drop-valid='false']:not([data-is-drag-source='true'])) {
+  box-shadow: inset 0 0 0 999px rgb(190 90 70 / 0.24);
+}
+
+.root :global(.pages-hierarchy-cell) {
+  align-items: center;
+  display: flex;
+  gap: 0.35rem;
+  min-width: 0;
+  padding-inline-start: calc(var(--pages-tree-depth, 0) * 1.75rem);
+}
+
+.root :global(.pages-hierarchy-cell__drag-handle),
+.root :global(.pages-hierarchy-cell__drag-spacer),
+.root :global(.pages-hierarchy-cell__toggle),
+.root :global(.pages-hierarchy-cell__spacer) {
+  align-items: center;
+  block-size: 1.5rem;
+  display: inline-flex;
+  flex: 0 0 1.5rem;
+  inline-size: 1.5rem;
+  justify-content: center;
+}
+
+.root :global(.pages-hierarchy-cell__drag-handle),
+.root :global(.pages-hierarchy-cell__toggle) {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--style-radius-s, 4px);
+  color: var(--theme-text-dim);
+  cursor: pointer;
+  padding: 0;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+
+.root :global(.pages-hierarchy-cell__drag-handle) {
+  cursor: grab;
+  margin-inline-end: 3px;
+  touch-action: none;
+}
+
+.root :global(.pages-hierarchy-cell__drag-handle:disabled) {
+  cursor: default;
+  opacity: 0.45;
+}
+
+.root :global(.pages-hierarchy-cell__drag-handle--active) {
+  color: var(--theme-text);
+}
+
+.root :global(.pages-hierarchy-cell__drag-handle:active:not(:disabled)),
+.root :global(.pages-hierarchy-cell__drag-handle--active:not(:disabled)) {
+  cursor: grabbing;
+}
+
+.root :global(.pages-hierarchy-cell__drag-handle svg) {
+  block-size: 0.95rem;
+  inline-size: 0.95rem;
+}
+
+.root :global(.pages-hierarchy-cell__drag-handle--parent svg) {
+  block-size: 0.95rem;
+  inline-size: 0.95rem;
+}
+
+.root :global(.pages-hierarchy-cell__drag-handle:hover:not(:disabled)),
+.root :global(.pages-hierarchy-cell__drag-handle:focus-visible:not(:disabled)),
+.root :global(.pages-hierarchy-cell__toggle:hover),
+.root :global(.pages-hierarchy-cell__toggle:focus-visible) {
+  background: rgb(0 0 0 / 0.05);
+  color: var(--theme-text);
+}
+
+.root :global(.pages-hierarchy-cell__chevron) {
+  block-size: 0.8rem;
+  inline-size: 0.8rem;
+  transition: transform 0.15s ease;
+}
+
+.root :global(.pages-hierarchy-cell__chevron--collapsed) {
+  transform: rotate(-90deg);
+}
+
+.root :global(.pages-hierarchy-cell[data-tree-home='true'] .pages-hierarchy-cell__content) {
+  align-items: baseline;
+  display: inline-flex;
+  gap: 0.3rem;
+}
+
+.root :global(.pages-hierarchy-cell__home-icon) {
+  block-size: 0.84em;
+  color: currentColor;
+  flex: 0 0 0.84em;
+  inline-size: 0.84em;
+}
+
+.root :global(.pages-hierarchy-cell__content) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.root :global(.pages-hierarchy-empty-cell) {
+  color: var(--theme-text-dim);
+}
+
+.root :global(.pages-hierarchy-drag-overlay) {
+  align-items: center;
+  background: var(--theme-elevation-0);
+  border: 1px solid var(--theme-elevation-200);
+  border-radius: var(--style-radius-s, 4px);
+  box-shadow: 0 12px 28px rgb(0 0 0 / 0.14);
+  color: var(--theme-text);
+  display: inline-flex;
+  font-family: var(--font-mono, var(--font-body));
+  font-size: 0.95rem;
+  font-weight: 500;
+  inline-size: max-content;
+  margin-inline-start: 2rem;
+  padding: 0.65rem 0.85rem;
+  pointer-events: none;
+  transform: translateY(calc(0.75rem - 50%));
+  white-space: nowrap;
+}
+
+.root :global(.pages-hierarchy-status-badge) {
+  align-items: center;
+  border-radius: 4px;
+  display: inline-flex;
+  font-size: 0.72rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  line-height: 1;
+  min-height: 1.55rem;
+  padding: 0.32rem 0.72rem;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.root :global(.pages-hierarchy-status-badge--published) {
+  background: var(--theme-success-150);
+  color: var(--theme-success-800);
+}
+
+.root :global(.pages-hierarchy-status-badge--changed) {
+  background: var(--theme-warning-150);
+  color: var(--theme-warning-800);
+}
+
+.root :global(.pages-hierarchy-status-badge--draft) {
+  background: var(--theme-elevation-150);
+  color: var(--theme-elevation-800);
+}
+
+.root :global(.pages-hierarchy-status-badge--unknown) {
+  background: var(--theme-elevation-100);
+  color: var(--theme-text-dim);
+}
+
+.root :global(.pages-hierarchy-status-badge[data-custom-color='true']) {
+  background: color-mix(in srgb, var(--page-tree-badge-base) 24%, white);
+  color: color-mix(in srgb, var(--page-tree-badge-base) 78%, black);
+}
+
+.root :global(.pages-hierarchy-status-badge--published[data-custom-color='true']),
+.root :global(.pages-hierarchy-status-badge--changed[data-custom-color='true']),
+.root :global(.pages-hierarchy-status-badge--draft[data-custom-color='true']) {
+  background: var(--page-tree-badge-base);
+  color: color-mix(in srgb, var(--page-tree-badge-base) 35%, black);
+}
+
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge[data-custom-color='true']) {
+  background: color-mix(in srgb, var(--page-tree-badge-base) 32%, black);
+  color: color-mix(in srgb, var(--page-tree-badge-base) 64%, white);
+}
+
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--published[data-custom-color='true']),
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--changed[data-custom-color='true']),
+:global(html[data-theme='dark']) .root :global(.pages-hierarchy-status-badge--draft[data-custom-color='true']) {
+  background: color-mix(in srgb, var(--page-tree-badge-base) 28%, black);
+  background: oklch(from var(--page-tree-badge-base) calc(l * 0.35) calc(c * 1.45) h);
+  color: var(--page-tree-badge-base);
+}