terminoir 0.13.1 → 0.14.0

package/README.md

@@ -136,7 +136,7 @@ Import from **`terminoir`**:
 | `AppShell` | `header` + `sidebar` snippets; mobile drawer; `fitViewport` (main scrolls, for canvases), `flush`, `headerMode="mobile"`; `toggleSidebar()` / `closeMobileDrawer()` via `bind:this` |
 | `AppShellNavLink` | `href?`, `active`, nav row with active highlight |
 | `SettingsPage`, `SettingsSection` | Settings layout — intro + stacked glass section cards |
-| `EmptyState`, `Skeleton`, `Avatar`, `Kbd` | Presentation |
+| `EmptyState`, `Skeleton`, `Avatar`, `Kbd` | Presentation; `EmptyState framed={false}` inside a Panel or card |
 | `FontPicker` | UI + code font lists, lazy `@fontsource`, persisted per `appId` |
 | `NavIcon` | `name`, optional `color` — Font Awesome 6 (`fa-*` or plain ids like `inbox`); host app loads FA CSS |
 | `IconField` | `bind:value` icon id picker (`ICON_PICKER_OPTIONS`); `compact` opens the grid in a popover |

package/css/glass.css

@@ -157,7 +157,7 @@
 .glass-panel {
   background: var(--glass-panel-bg);
   border-radius: var(--radius-glass);
-  padding: var(--space-5);
+  padding: var(--space-4);
 }
 
 .glass-popover {

package/css/shell.css

@@ -4,12 +4,12 @@
  */
 
 .terminoir-shell {
-  --terminoir-sidebar-width: 260px;
+  --terminoir-sidebar-width: 236px;
   --terminoir-sidebar-min: 180px;
   --terminoir-sidebar-max: 420px;
   --terminoir-shell-duration: var(--duration-normal);
   display: grid;
-  grid-template-columns: var(--terminoir-sidebar-width, 260px) minmax(0, 1fr);
+  grid-template-columns: var(--terminoir-sidebar-width, 236px) minmax(0, 1fr);
   min-height: 100dvh;
   transition: grid-template-columns var(--terminoir-shell-duration) var(--ease-out-soft);
 }
@@ -34,12 +34,12 @@
 }
 
 .terminoir-shell__sidebar-inner {
-  width: var(--terminoir-sidebar-width, 260px);
+  width: var(--terminoir-sidebar-width, 236px);
   height: 100%;
   min-height: 100dvh;
   display: flex;
   flex-direction: column;
-  padding: var(--space-4);
+  padding: var(--space-3);
   gap: var(--space-2);
 }
 
@@ -48,7 +48,7 @@
   align-items: center;
   gap: var(--space-2);
   width: 100%;
-  padding: 0.5rem 0.65rem;
+  padding: 0.35rem 0.6rem;
   border: 1px solid transparent;
   border-radius: var(--radius-control);
   background: transparent;

package/dist/components/AppShell.svelte

@@ -6,7 +6,7 @@
 
   let {
     appId = 'app',
-    defaultWidth = 260,
+    defaultWidth = 236,
     minWidth = 180,
     maxWidth = 420,
     fitViewport = false,

package/dist/components/DataTable.svelte

@@ -97,7 +97,7 @@
   th {
     position: sticky;
     top: 0;
-    padding: 0.55rem 0.85rem;
+    padding: 0.35rem 0.75rem;
     text-align: left;
     font-size: 0.6875rem;
     font-weight: 600;
@@ -109,7 +109,7 @@
     white-space: nowrap;
   }
   td {
-    padding: 0.55rem 0.85rem;
+    padding: 0.35rem 0.75rem;
     border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
     vertical-align: middle;
     max-width: 0;

package/dist/components/EmptyState.svelte

@@ -5,17 +5,20 @@
   let {
     title,
     description,
+    framed = true,
     class: className = '',
     children,
   }: {
     title: string;
     description?: string;
+    /** Glass panel around it. Set false inside a Panel or card, so the frames don't nest. */
+    framed?: boolean;
     class?: string;
     children?: Snippet;
   } = $props();
 </script>
 
-<div class={cn('terminoir-empty glass-panel', className)} role="status">
+<div class={cn('terminoir-empty', framed ? 'glass-panel' : 'terminoir-empty--bare', className)} role="status">
   <h2 class="terminoir-empty__title">{title}</h2>
   {#if description}<p class="terminoir-empty__desc">{description}</p>{/if}
   {@render children?.()}
@@ -23,17 +26,21 @@
 
 <style>
   .terminoir-empty {
-    padding: var(--space-8);
+    padding: var(--space-5) var(--space-4);
     text-align: center;
   }
 
+  .terminoir-empty--bare {
+    padding: var(--space-3) var(--space-2);
+  }
+
   .terminoir-empty__title {
     margin: 0 0 var(--space-2);
     font-size: 1.125rem;
   }
 
   .terminoir-empty__desc {
-    margin: 0 0 var(--space-4);
+    margin: 0;
     color: var(--muted-foreground);
   }
 </style>

package/dist/components/EmptyState.svelte.d.ts

@@ -2,6 +2,8 @@ import type { Snippet } from 'svelte';
 type $$ComponentProps = {
     title: string;
     description?: string;
+    /** Glass panel around it. Set false inside a Panel or card, so the frames don't nest. */
+    framed?: boolean;
     class?: string;
     children?: Snippet;
 };

package/dist/components/ListItem.svelte

@@ -66,8 +66,8 @@
     align-items: center;
     gap: var(--space-3);
     width: 100%;
-    min-height: 2.75rem;
-    padding: 0.5rem 0.85rem;
+    min-height: 2.25rem;
+    padding: 0.35rem 0.75rem;
     box-sizing: border-box;
   }
   .terminoir-list-item__button {
@@ -113,7 +113,7 @@
     white-space: nowrap;
   }
   .terminoir-list-item__details {
-    padding: var(--space-1) 0.85rem var(--space-4) calc(0.85rem + 1.25rem + var(--space-3));
+    padding: var(--space-1) 0.75rem var(--space-3) calc(0.75rem + 1.25rem + var(--space-3));
   }
   .terminoir-list-item__trailing {
     display: inline-flex;

package/dist/components/Page.svelte

@@ -26,10 +26,10 @@
   .terminoir-page {
     display: flex;
     flex-direction: column;
-    gap: var(--space-6);
+    gap: var(--space-4);
     width: 100%;
     margin-inline: auto;
-    padding: var(--space-6) var(--space-6) var(--space-10);
+    padding: var(--space-4) var(--space-5) var(--space-8);
     box-sizing: border-box;
     min-width: 0;
   }
@@ -46,8 +46,8 @@
   }
   @media (max-width: 700px) {
     .terminoir-page:not(.terminoir-page--fill) {
-      padding: var(--space-4) var(--space-4) var(--space-8);
-      gap: var(--space-5);
+      padding: var(--space-3) var(--space-3) var(--space-6);
+      gap: var(--space-4);
     }
   }
 </style>

package/dist/components/Tabs.svelte

@@ -77,6 +77,6 @@
   }
 
   .terminoir-tabs__panel {
-    padding-top: var(--space-4);
+    padding-top: var(--space-3);
   }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminoir",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "description": "Terminoir — Liquid Glass design tokens and Svelte 5 UI components.",
   "license": "Apache-2.0",
   "type": "module",