@vobs/ui 0.2.0 → 0.3.0

package/dist/components.css

@@ -92,7 +92,7 @@
     color: var(--text-secondary);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-page-header-action[data-tone='primary']) {
@@ -124,12 +124,32 @@
     min-height: 100vh;
     display: grid;
     grid-template-columns: var(--kui-shell-sidebar-width) minmax(0, 1fr);
-    grid-template-rows: minmax(0, 1fr);
+    grid-template-rows: 40px minmax(0, 1fr) 24px;
     color: var(--text-default);
     background: var(--bg-base-default);
     overflow: hidden;
   }
 
+  :where(.kui-app-shell-topbar) {
+    grid-column: 1 / -1;
+    grid-row: 1;
+  }
+
+  :where(.kui-app-shell-sidebar) {
+    grid-column: 1;
+    grid-row: 2;
+  }
+
+  :where(.kui-app-shell-main) {
+    grid-column: 2;
+    grid-row: 2;
+  }
+
+  :where(.kui-app-shell-statusbar) {
+    grid-column: 1 / -1;
+    grid-row: 3;
+  }
+
   :where(.kui-app-shell[data-sidebar-mode='collapsed']) {
     grid-template-columns: var(--kui-shell-sidebar-collapsed-width) minmax(0, 1fr);
   }
@@ -138,6 +158,10 @@
     grid-template-columns: minmax(0, 1fr);
   }
 
+  :where(.kui-app-shell[data-sidebar-mode='hidden'] .kui-app-shell-main) {
+    grid-column: 1;
+  }
+
   :where(.kui-app-shell-sidebar) {
     min-width: 0;
     min-height: 0;
@@ -161,7 +185,7 @@
     gap: var(--spacer-8);
     padding: 0 var(--spacer-8);
     color: var(--text-default);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
     font-weight: var(--font-weight-semibold);
     text-decoration: none;
   }
@@ -172,7 +196,6 @@
     display: inline-block;
     background: var(--bg-brand);
     border-radius: var(--radius-4);
-    box-shadow: 0 0 18px rgba(50, 240, 140, 0.4);
   }
 
   :where(.kui-app-shell-brand-name) {
@@ -221,7 +244,7 @@
     gap: var(--spacer-8);
     padding: 0 var(--spacer-8);
     color: var(--text-secondary);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
     text-decoration: none;
   }
 
@@ -271,7 +294,7 @@
     inset-block-start: 50%;
     inset-inline-start: calc(var(--spacer-8) * -1);
     width: 3px;
-    height: 20px;
+    height: 30px;
     content: '';
     background: var(--bg-brand);
     border-radius: var(--radius-full);
@@ -288,7 +311,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding-inline: var(--spacer-6);
+    padding-inline: var(--spacer-4);
     color: var(--text-onbrand);
     background: var(--bg-brand);
     border-radius: var(--radius-full);
@@ -312,7 +335,7 @@
     border: 1px solid transparent;
     color: var(--text-default);
     background: transparent;
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-app-shell-icon-button) {
@@ -496,6 +519,67 @@
     background: var(--border-neutral-l1);
   }
 
+  :where(.kui-app-shell-language) {
+    position: relative;
+    display: inline-flex;
+  }
+
+  :where(.kui-app-shell-language > .kui-app-shell-icon-button[data-state='open']) {
+    color: var(--text-default-hover);
+    background: var(--bg-overlay-l2);
+  }
+
+  :where(.kui-app-shell-language-menu) {
+    position: absolute;
+    inset-block-start: calc(100% + var(--spacer-6));
+    inset-inline-end: 0;
+    z-index: var(--z-index-dropdown);
+    min-width: 148px;
+    display: grid;
+    gap: var(--spacer-2);
+    padding: var(--spacer-4);
+    color: var(--text-default);
+    background: var(--bg-menu);
+    border: 1px solid var(--border-neutral-l2);
+    border-radius: var(--radius-8);
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.32);
+  }
+
+  :where(.kui-app-shell-language-menu[hidden]) {
+    display: none;
+  }
+
+  :where(.kui-app-shell-language-option) {
+    width: 100%;
+    min-height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--spacer-8);
+    padding: 0 var(--spacer-8);
+    color: var(--text-default);
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius-4);
+    text-align: start;
+  }
+
+  :where(.kui-app-shell-language-option:hover) {
+    color: var(--text-default-hover);
+    background: var(--bg-overlay-l2);
+  }
+
+  :where(.kui-app-shell-language-option[data-state='selected']) {
+    color: var(--text-brand);
+    background: var(--bg-brand-popup);
+  }
+
+  :where(.kui-app-shell-language-option[data-state='selected'])::after {
+    content: '\2713';
+    color: var(--icon-brand);
+    font-size: var(--body-sm-font-size);
+  }
+
   :where(.kui-app-shell-main) {
     min-width: 0;
     min-height: 0;
@@ -527,7 +611,7 @@
     color: var(--text-secondary);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-app-shell-command-trigger)::before {
@@ -549,7 +633,7 @@
     color: var(--text-secondary);
     background: transparent;
     border: 1px solid transparent;
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-app-shell-action)::before {
@@ -580,6 +664,29 @@
     gap: var(--spacer-12);
   }
 
+  :where(.kui-app-shell-page-header[hidden]) {
+    display: none;
+  }
+
+  .kui-app-shell-page-frame:has(.kui-app-shell-page-header[hidden]) {
+    grid-template-rows: auto minmax(0, 1fr);
+    padding-block-start: 0;
+  }
+
+  .kui-app-shell-page-frame:has(.kui-app-shell-page-toolbar:empty) {
+    grid-template-rows: auto minmax(0, 1fr);
+  }
+
+  .kui-app-shell-page-frame:has(.kui-app-shell-page-header[hidden]):has(
+      .kui-app-shell-page-toolbar:empty
+    ) {
+    grid-template-rows: minmax(0, 1fr);
+  }
+
+  :where(.kui-app-shell-page-toolbar:empty) {
+    display: none;
+  }
+
   :where(.kui-app-shell-page-heading) {
     min-width: 0;
     display: grid;
@@ -794,7 +901,7 @@
     color: var(--text-secondary);
     background: transparent;
     border: 1px solid transparent;
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-segmented-item[hidden]) {
@@ -858,7 +965,7 @@
     color: var(--text-default);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(
@@ -906,7 +1013,7 @@
     color: var(--text-default);
     background: var(--status-error-surface-l1);
     border: 1px solid var(--status-error-default);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-error-summary-title) {
@@ -924,6 +1031,77 @@
     pointer-events: none;
   }
 
+  :where(.kui-overlay-root[hidden]) {
+    display: none;
+  }
+
+  :where(.kui-overlay-root[data-backdrop='true']) {
+    padding: var(--spacer-12);
+    background: rgba(0, 0, 0, 0.48);
+    pointer-events: auto;
+  }
+
+  :where(.kui-page-state) {
+    min-height: 220px;
+    display: grid;
+    place-items: center;
+    align-content: center;
+    gap: var(--spacer-10);
+    padding: var(--spacer-24);
+    color: var(--text-default);
+    background: var(--bg-base-secondary);
+    border: 1px solid var(--border-neutral-l1);
+    border-radius: var(--radius-8);
+    text-align: center;
+  }
+
+  :where(.kui-page-state[hidden]) {
+    display: none;
+  }
+
+  :where(.kui-page-state-mark) {
+    width: 32px;
+    height: 32px;
+    display: inline-grid;
+    place-items: center;
+    color: var(--text-brand);
+    background: var(--bg-brand-popup);
+    border-radius: var(--radius-full);
+    font-size: var(--body-xs-font-size);
+    font-weight: var(--font-weight-semibold);
+  }
+
+  :where(.kui-page-state[data-state='error'] .kui-page-state-mark) {
+    color: var(--status-error-default);
+    background: var(--status-error-surface-l1);
+  }
+
+  :where(.kui-page-state p, .kui-page-state h2) {
+    margin: 0;
+  }
+
+  :where(.kui-page-state-error) {
+    display: grid;
+    justify-items: center;
+    gap: var(--spacer-8);
+  }
+
+  :where(.kui-page-state-error h2) {
+    font-size: var(--heading-sm-font-size);
+    line-height: var(--heading-sm-line-height);
+  }
+
+  :where(.kui-page-state-error p, .kui-page-state-loading, .kui-page-state-message) {
+    max-width: 520px;
+    color: var(--text-secondary);
+    font-size: var(--body-sm-font-size);
+    line-height: var(--body-sm-line-height);
+  }
+
+  :where(.kui-page-state-message) {
+    color: var(--status-error-default);
+  }
+
   :where(.kui-overlay-backdrop) {
     position: fixed;
     inset: 0;
@@ -1158,7 +1336,7 @@
     color: var(--text-default);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-alert, .kui-message, .kui-toast, .kui-notification) {
@@ -1357,7 +1535,7 @@
     padding: var(--spacer-4);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-menu-item) {
@@ -1568,7 +1746,7 @@
     color: var(--text-default);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-collapse-item[data-state='open']) {
@@ -1645,12 +1823,11 @@
     color: var(--text-default);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-command-palette-input:focus-visible) {
-    outline: 2px solid var(--border-brand);
-    outline-offset: 2px;
+    outline: 1px solid var(--border-brand);
   }
 
   :where(.kui-command-palette-listbox) {
@@ -1684,7 +1861,7 @@
     gap: var(--spacer-8);
     padding: var(--spacer-8);
     color: var(--text-default);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
     cursor: pointer;
   }
 
@@ -1720,7 +1897,7 @@
     min-height: 22px;
     display: inline-flex;
     align-items: center;
-    padding-inline: var(--spacer-6);
+    padding-inline: var(--spacer-4);
     color: var(--text-secondary);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l1);
@@ -1751,6 +1928,13 @@
     background: var(--bg-base-secondary);
   }
 
+  :where(.kui-table-scroll) {
+    min-width: 0;
+    width: 100%;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+  }
+
   :where(.kui-table[data-density='compact']) {
     font-size: var(--body-sm-font-size);
     line-height: var(--body-sm-line-height);
@@ -1861,12 +2045,11 @@
     color: var(--text-default);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-data-toolbar-search:focus-visible) {
-    outline: 2px solid var(--border-brand);
-    outline-offset: 2px;
+    outline: 1px solid var(--border-brand);
   }
 
   :where(.kui-filter-bar) {
@@ -1943,7 +2126,7 @@
   }
 
   :where(.kui-data-toolbar-action) {
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-data-toolbar-action[data-tone='primary']) {
@@ -2213,7 +2396,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding-inline: var(--spacer-6);
+    padding-inline: var(--spacer-4);
     color: var(--text-secondary);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l2);
@@ -2232,7 +2415,7 @@
     display: inline-flex;
     align-items: center;
     justify-content: center;
-    padding-inline: var(--spacer-6);
+    padding-inline: var(--spacer-4);
     color: var(--text-default);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l2);
@@ -2291,7 +2474,7 @@
     color: var(--text-secondary);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-pagination-previous)::before {
@@ -2376,7 +2559,7 @@
     color: var(--text-default);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-list.kui-density-compact .kui-list-item) {
@@ -2447,7 +2630,7 @@
     color: var(--text-secondary);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-list-item-action[hidden]) {
@@ -2466,7 +2649,7 @@
     color: var(--text-default);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-carousel-viewport) {
@@ -2607,7 +2790,7 @@
     color: var(--text-brand);
     background: transparent;
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-result) {
@@ -2666,14 +2849,14 @@
     color: var(--text-secondary);
     background: transparent;
     border: 0;
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-badge) {
     min-height: 20px;
     display: inline-flex;
     align-items: center;
-    padding-inline: var(--spacer-6);
+    padding-inline: var(--spacer-4);
     color: var(--text-default);
     background: var(--bg-base-tertiary);
     border-radius: var(--radius-full);
@@ -2886,7 +3069,7 @@
     color: var(--text-secondary);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-note-action, .kui-callout-action, .kui-panel-action, .kui-card-action)::before {
@@ -2915,7 +3098,7 @@
     color: var(--text-secondary);
     background: transparent;
     border: 0;
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-note-close, .kui-callout-close)::before {
@@ -2963,7 +3146,7 @@
     color: var(--text-secondary);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
     font-size: var(--body-sm-font-size);
     line-height: var(--body-sm-line-height);
   }
@@ -3111,7 +3294,7 @@
     color: var(--text-secondary);
     background: var(--bg-base-tertiary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-table-panel-toolbar) {
@@ -3217,7 +3400,7 @@
     color: var(--text-default);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-combobox-listbox) {
@@ -3232,7 +3415,7 @@
     list-style: none;
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
     box-shadow: 0 12px 32px rgba(0, 0, 0, 0.24);
   }
 
@@ -3270,7 +3453,7 @@
     color: var(--text-default);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-cascader-trigger)::before {
@@ -3361,7 +3544,7 @@
     color: var(--text-default);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l1);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
     font-size: var(--body-sm-font-size);
     line-height: var(--body-sm-line-height);
   }
@@ -3371,8 +3554,8 @@
     display: flex;
     align-items: center;
     gap: var(--spacer-6);
-    padding-inline: var(--spacer-6);
-    padding-inline-start: calc(var(--spacer-6) + (var(--kui-tree-depth, 0) * 16px));
+    padding-inline: var(--spacer-4);
+    padding-inline-start: calc(var(--spacer-4) + (var(--kui-tree-depth, 0) * 16px));
     color: var(--text-default);
     border-radius: var(--radius-4);
     cursor: pointer;
@@ -3475,7 +3658,7 @@
     color: var(--text-default);
     background: var(--bg-base-secondary);
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
   }
 
   :where(.kui-tree-select-trigger)::after {
@@ -3504,7 +3687,7 @@
   :where(.kui-button, .kui-input, .kui-textarea, .kui-select, .kui-switch) {
     min-height: 32px;
     border: 1px solid var(--border-neutral-l2);
-    border-radius: var(--radius-6);
+    border-radius: var(--radius-4);
     transition:
       background var(--transition-fast),
       border-color var(--transition-fast),
@@ -3574,6 +3757,11 @@
     background: var(--bg-base-secondary);
   }
 
+  :where(.kui-select) option:checked {
+    color: var(--text-onbrand);
+    background: var(--bg-brand);
+  }
+
   :where(.kui-textarea) {
     min-height: 80px;
     padding-block: var(--spacer-8);
@@ -3858,7 +4046,7 @@
   align-items: center;
   justify-content: center;
   border: none;
-  border-radius: var(--radius-6, 6px);
+  border-radius: var(--radius-4, 4px);
   background: transparent;
   color: var(--icon-secondary, var(--color-foreground));
   cursor: pointer;

package/dist/data-display.d.ts

@@ -721,6 +721,8 @@ export interface PaginationPlanOptions {
     readonly label?: string;
     readonly previousLabel?: string;
     readonly nextLabel?: string;
+    readonly pageLabel?: (page: number) => string;
+    readonly summary?: string;
     readonly className?: string;
     readonly attrs?: UiAttributes;
 }
@@ -736,6 +738,35 @@ export interface PaginationPlans {
     readonly pages: readonly UiDomPlan<'button' | 'span'>[];
     readonly next: UiDomPlan<'button'>;
     readonly summary: UiDomPlan<'output'>;
+    readonly model: PaginationModel;
+}
+export interface PaginationModel {
+    readonly rootId: string;
+    readonly rootClassName: string;
+    readonly page: number;
+    readonly pageCount: number;
+    readonly totalItems: number;
+    readonly previousClassName: string;
+    readonly previousLabel: string;
+    readonly previousPage: number;
+    readonly previousDisabled: boolean;
+    readonly listClassName: string;
+    readonly pages: readonly PaginationItemModel[];
+    readonly nextClassName: string;
+    readonly nextLabel: string;
+    readonly nextPage: number;
+    readonly nextDisabled: boolean;
+    readonly summaryClassName: string;
+    readonly summary: string;
+}
+export interface PaginationItemModel {
+    readonly id: string;
+    readonly className: string;
+    readonly kind: PaginationItemKind;
+    readonly page: number;
+    readonly state: 'current' | 'idle' | 'ellipsis';
+    readonly current: 'page' | undefined;
+    readonly label: string;
 }
 export interface ListItemPlanOptions {
     readonly id: string;