@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.0

package/dist/css/components/sidebar.css

@@ -0,0 +1,78 @@
+/* components/sidebar.css */
+
+.sidebar-profile {
+  display:          flex;
+  align-items:      center;
+  gap:              var(--space-3);
+  padding:          var(--space-2) var(--space-3);
+  border-radius:    var(--radius-sm);
+  cursor:           pointer;
+  transition:       background-color var(--duration-fast) var(--ease-default);
+  /* reset button defaults */
+  width:            100%;
+  border:           none;
+  background:       none;
+  text-align:       left;
+  font-family:      var(--font-sans);
+  -webkit-appearance: none;
+}
+
+.sidebar-profile:hover {
+  background-color: var(--color-bg-subtle);
+}
+
+.sidebar-avatar {
+  width:            2rem;
+  height:           2rem;
+  border-radius:    var(--radius-full);
+  background-color: var(--color-slate-200);
+  display:          flex;
+  align-items:      center;
+  justify-content:  center;
+  font-size:        var(--text-sm);
+  font-weight:      var(--font-semibold);
+  color:            var(--color-slate-600);
+  flex-shrink:      0;
+  overflow:         hidden;
+}
+
+.sidebar-avatar img {
+  width:      100%;
+  height:     100%;
+  object-fit: cover;
+}
+
+.sidebar-avatar-lg {
+  width:     2.5rem;
+  height:    2.5rem;
+  font-size: var(--text-base);
+}
+
+.sidebar-profile-info {
+  flex:      1;
+  overflow:  hidden;
+  min-width: 0;
+}
+
+.sidebar-profile-name {
+  font-size:     var(--text-sm);
+  font-weight:   var(--font-medium);
+  color:         var(--color-text);
+  overflow:      hidden;
+  text-overflow: ellipsis;
+  white-space:   nowrap;
+}
+
+.sidebar-profile-role {
+  font-size:     var(--text-xs);
+  color:         var(--color-text-muted);
+  overflow:      hidden;
+  text-overflow: ellipsis;
+  white-space:   nowrap;
+}
+
+.sidebar-profile-action {
+  flex-shrink: 0;
+  color:       var(--color-text-subtle);
+  font-size:   1.1rem;
+}

package/dist/css/components/spinner.css

@@ -0,0 +1,36 @@
+/* components/spinner.css */
+
+.spinner {
+  display:       inline-flex;
+  align-items:   center;
+  justify-content: center;
+  width:         1em;
+  height:        1em;
+  color:         inherit;
+  flex-shrink:   0;
+  vertical-align: -0.125em;
+}
+
+.spinner-svg {
+  width:     100%;
+  height:    100%;
+  animation: spinner-rotate 0.7s linear infinite;
+}
+
+.spinner-track {
+  stroke:  currentColor;
+  opacity: 0.25;
+}
+
+.spinner-head {
+  stroke: currentColor;
+}
+
+@keyframes spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+/* Respect reduced-motion preference */
+@media (prefers-reduced-motion: reduce) {
+  .spinner-svg { animation-duration: 1.5s; }
+}

package/dist/css/components/table.css

@@ -0,0 +1,98 @@
+/* components/table.css */
+
+.table-wrapper {
+  width:      100%;
+  overflow-x: auto;
+}
+
+.table {
+  width:           100%;
+  border-collapse: collapse;
+  font-size:       var(--text-sm);
+}
+
+.table th {
+  padding:          var(--space-3) var(--space-4);
+  text-align:       left;
+  font-size:        var(--text-xs);
+  font-weight:      var(--font-semibold);
+  color:            var(--color-text-muted);
+  letter-spacing:   var(--tracking-wide);
+  text-transform:   uppercase;
+  background-color: var(--color-bg-subtle);
+  border-bottom:    2px solid var(--color-border);
+  white-space:      nowrap;
+}
+
+.table td {
+  padding:       var(--space-3) var(--space-4);
+  border-bottom: 1px solid var(--color-border);
+  color:         var(--color-text);
+  vertical-align: middle;
+}
+
+.table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.table tbody tr:hover td {
+  background-color: var(--color-bg-subtle);
+}
+
+/* Bordered */
+.table-bordered th,
+.table-bordered td {
+  border: 1px solid var(--color-border);
+}
+
+/* Compact */
+.table-compact th,
+.table-compact td {
+  padding: var(--space-2) var(--space-3);
+}
+
+/* Column alignment */
+.table .col-right  { text-align: right;  }
+.table .col-center { text-align: center; }
+.table .col-number { text-align: right; font-variant-numeric: tabular-nums; }
+
+/* Row states */
+.table tr.row-selected td { background-color: rgb(37 99 235 / 0.05); }
+.table tr.row-muted td    { color: var(--color-text-muted); }
+
+/* --- Sortable columns --- */
+.table-th-sortable { padding: 0; }
+.table-sort-btn {
+  display:        inline-flex;
+  align-items:    center;
+  gap:            var(--space-1);
+  width:          100%;
+  padding:        var(--space-3) var(--space-4);
+  border:         none;
+  background:     none;
+  font:           inherit;
+  font-size:      var(--text-xs);
+  font-weight:    var(--font-semibold);
+  color:          var(--color-text-muted);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+  cursor:         pointer;
+}
+.table-sort-btn:hover { color: var(--color-text); }
+.table-sort-icon {
+  font-size: 1rem;
+  opacity:   0.4;
+}
+.table-sort-icon.active { opacity: 1; color: var(--color-primary); }
+
+/* --- Striped --- */
+.table-striped tbody tr:nth-child(even) td { background-color: var(--color-bg-subtle); }
+.table-striped tbody tr:hover td { background-color: var(--color-slate-100, var(--color-bg-subtle)); }
+
+/* --- Empty state --- */
+.table-empty {
+  text-align: center !important;
+  color:      var(--color-text-subtle);
+  padding:    var(--space-8) var(--space-4) !important;
+  font-size:  var(--text-sm);
+}

package/dist/css/components/tooltip.css

@@ -0,0 +1,77 @@
+/* components/tooltip.css */
+
+.tooltip-wrap {
+  position:     relative;
+  display:      inline-flex;
+}
+
+.tooltip {
+  position:        absolute;
+  z-index:         300;
+  padding:         var(--space-1) var(--space-2);
+  background:      var(--color-text, #1e293b);
+  color:           var(--color-surface, #fff);
+  font-size:       var(--text-xs);
+  font-weight:     var(--font-medium);
+  line-height:     1.3;
+  white-space:     nowrap;
+  border-radius:   var(--radius-sm);
+  box-shadow:      var(--shadow-md);
+  pointer-events:  none;
+  opacity:         0;
+  transition:      opacity var(--duration-fast) var(--ease-default),
+                   transform var(--duration-fast) var(--ease-default);
+}
+.tooltip.open { opacity: 1; }
+
+/* Arrow */
+.tooltip::after {
+  content:  '';
+  position: absolute;
+  border:   4px solid transparent;
+}
+
+/* ─ Positions ─ */
+.tooltip-top {
+  bottom: calc(100% + 6px);
+  left:   50%;
+  transform: translateX(-50%) translateY(4px);
+}
+.tooltip-top.open { transform: translateX(-50%) translateY(0); }
+.tooltip-top::after {
+  top: 100%; left: 50%; margin-left: -4px;
+  border-top-color: var(--color-text, #1e293b);
+}
+
+.tooltip-bottom {
+  top:  calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%) translateY(-4px);
+}
+.tooltip-bottom.open { transform: translateX(-50%) translateY(0); }
+.tooltip-bottom::after {
+  bottom: 100%; left: 50%; margin-left: -4px;
+  border-bottom-color: var(--color-text, #1e293b);
+}
+
+.tooltip-left {
+  right: calc(100% + 6px);
+  top:   50%;
+  transform: translateY(-50%) translateX(4px);
+}
+.tooltip-left.open { transform: translateY(-50%) translateX(0); }
+.tooltip-left::after {
+  left: 100%; top: 50%; margin-top: -4px;
+  border-left-color: var(--color-text, #1e293b);
+}
+
+.tooltip-right {
+  left: calc(100% + 6px);
+  top:  50%;
+  transform: translateY(-50%) translateX(-4px);
+}
+.tooltip-right.open { transform: translateY(-50%) translateX(0); }
+.tooltip-right::after {
+  right: 100%; top: 50%; margin-top: -4px;
+  border-right-color: var(--color-text, #1e293b);
+}

package/dist/css/components/topbar-layout.css

@@ -0,0 +1,108 @@
+/* layouts/regions + scaffolding */
+
+/* ── TopBar region ── */
+.tb {
+  display: flex; align-items: center; gap: var(--space-6);
+  height: 3.5rem; padding: 0 var(--space-6);
+  background: var(--color-surface); border-bottom: 1px solid var(--color-border);
+}
+.tb-hamburger {
+  display: inline-flex; align-items: center; justify-content: center;
+  border: none; background: none; cursor: pointer; color: var(--color-text-muted);
+  padding: var(--space-1); border-radius: var(--radius-sm);
+}
+.tb-hamburger:hover { background: var(--color-bg-subtle); }
+.tb-brand {
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  font-weight: var(--font-bold); font-size: var(--text-lg);
+  color: var(--color-text); text-decoration: none; white-space: nowrap;
+}
+.tb-brand-icon { color: var(--color-accent-light, var(--color-primary)); }
+.tb-nav { display: flex; align-items: center; gap: var(--space-1); flex: 1; }
+.tb-spacer { flex: 1; }
+.tb-link {
+  display: inline-flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
+  font-size: var(--text-sm); font-weight: var(--font-medium);
+  color: var(--color-text-muted); text-decoration: none; white-space: nowrap;
+  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
+}
+.tb-link .material-symbols-outlined { font-size: 1.15rem; }
+.tb-link:hover { background: var(--color-bg-subtle); color: var(--color-text); }
+.tb-link.active { background: var(--color-primary-subtle, var(--color-bg-subtle)); color: var(--color-primary); }
+.tb-nav-tabs .tb-link { border-radius: 0; border-bottom: 2px solid transparent; padding-bottom: calc(var(--space-2) - 2px); }
+.tb-nav-tabs .tb-link.active { background: none; border-bottom-color: var(--color-primary); }
+.tb-flywrap { position: relative; display: inline-flex; align-items: center; }
+.tb-flybtn { display: inline-flex; align-items: center; justify-content: center; border: none; background: none; cursor: pointer; color: var(--color-text-subtle); padding: var(--space-1); border-radius: var(--radius-sm); }
+.tb-flybtn:hover { background: var(--color-bg-subtle); }
+.tb-flyout { position: absolute; top: calc(100% + var(--space-1)); left: 0; z-index: 200; min-width: 12rem; display: flex; flex-direction: column; gap: 1px; padding: var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
+.tb-flyout-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--color-text); text-decoration: none; }
+.tb-flyout-item .material-symbols-outlined { font-size: 1.1rem; color: var(--color-text-muted); }
+.tb-flyout-item:hover { background: var(--color-bg-subtle); }
+.tb-actions { display: inline-flex; align-items: center; gap: var(--space-3); }
+
+/* ── SideBar region ── */
+.sb {
+  width: 14rem; flex-shrink: 0; display: flex; flex-direction: column;
+  background: var(--color-surface); border-right: 1px solid var(--color-border);
+  overflow-y: auto;
+}
+.sb-brand {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-4) var(--space-4) var(--space-3);
+  font-weight: var(--font-bold); font-size: var(--text-lg);
+  color: var(--color-text); text-decoration: none;
+}
+.sb-brand-icon { color: var(--color-accent-light, var(--color-primary)); }
+.sb-nav { flex: 1; padding: var(--space-2); display: flex; flex-direction: column; gap: 1px; }
+.sb-section-label {
+  font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase;
+  letter-spacing: var(--tracking-wide); color: var(--color-text-subtle);
+  padding: var(--space-3) var(--space-3) var(--space-1);
+}
+.sb-link {
+  display: flex; align-items: center; gap: var(--space-3);
+  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
+  font-size: var(--text-sm); font-weight: var(--font-medium);
+  color: var(--color-text-muted); text-decoration: none;
+  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
+}
+.sb-link .material-symbols-outlined { font-size: 1.25rem; }
+.sb-link:hover { background: var(--color-bg-subtle); color: var(--color-text); }
+.sb-link.active { background: var(--color-primary-subtle, var(--color-bg-subtle)); color: var(--color-primary); }
+.sb-link-label { flex: 1; }
+.sb-badge {
+  font-size: var(--text-xs); font-weight: var(--font-semibold);
+  background: var(--color-primary); color: var(--color-primary-text);
+  border-radius: var(--radius-full); padding: 0 var(--space-2); min-width: 1.25rem; text-align: center;
+}
+.sb-footer { padding: var(--space-3); border-top: 1px solid var(--color-border); }
+
+
+/* SideBar 2-level submenu */
+.sb-parent {
+  width: 100%; border: none; background: none; font: inherit; cursor: pointer;
+  text-align: left;
+}
+.sb-chevron {
+  font-size: 1.1rem; margin-left: auto; color: var(--color-text-subtle);
+  transition: transform var(--duration-fast) var(--ease-default);
+}
+.sb-chevron.open { transform: rotate(90deg); }
+.sb-parent .sb-link-label { flex: 1; }
+.sb-subnav { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 1px var(--space-3); padding-left: var(--space-3); border-left: 1px solid var(--color-border); }
+.sb-sublink {
+  display: flex; align-items: center; gap: var(--space-2);
+  padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
+  font-size: var(--text-sm); color: var(--color-text-muted); text-decoration: none;
+  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
+}
+.sb-sublink .material-symbols-outlined { font-size: 1.1rem; }
+.sb-sublink:hover { background: var(--color-bg-subtle); color: var(--color-text); }
+.sb-sublink.active { background: var(--color-primary-subtle, var(--color-bg-subtle)); color: var(--color-primary); }
+
+/* TopBar parent (opens flyout on whole-item click) */
+.tb-parent { border: none; background: none; font: inherit; cursor: pointer; }
+.tb-caret { font-size: 1.05rem; transition: transform var(--duration-fast) var(--ease-default); }
+.tb-caret.open { transform: rotate(180deg); }
+.tb-flyout-item.active { background: var(--color-primary-subtle, var(--color-bg-subtle)); color: var(--color-primary); }

package/dist/css/icons/icons.css

@@ -0,0 +1,52 @@
+/* icons/icons.css */
+
+/*
+  Material Symbols Outlined — loaded from the Google Fonts CDN so the
+  package works with no setup. @import must stay at the top of this file.
+
+  To self-host instead: drop this @import, download the variable font from
+  https://github.com/google/material-design-icons/tree/master/variablefont
+  into your app's static/fonts/ directory, and declare your own @font-face
+  for 'Material Symbols Outlined' (weight 100 700, font-display: block).
+*/
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block');
+
+.material-symbols-outlined {
+  font-family:               'Material Symbols Outlined';
+  font-weight:               normal;
+  font-style:                normal;
+  font-size:                 1.25rem;
+  line-height:               1;
+  letter-spacing:            normal;
+  text-transform:            none;
+  display:                   inline-block;
+  white-space:               nowrap;
+  word-wrap:                 normal;
+  direction:                 ltr;
+  -webkit-font-smoothing:    antialiased;
+  text-rendering:            optimizeLegibility;
+  -moz-osx-font-smoothing:   grayscale;
+  font-feature-settings:     'liga';
+
+  /* Variable font axes defaults */
+  font-variation-settings:
+    'FILL' 0,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
+/* Fill variant — useful for active/selected states */
+.icon-filled {
+  font-variation-settings:
+    'FILL' 1,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
+/* Size helpers */
+.icon-sm { font-size: 1rem;    }
+.icon-md { font-size: 1.25rem; }
+.icon-lg { font-size: 1.5rem;  }
+.icon-xl { font-size: 2rem;    }

package/dist/css/index.css

@@ -0,0 +1,20 @@
+/* index.css — main entry point (DEFAULT THEME + BASE)
+   ──────────────────────────────────────────────────────────────
+   Two-layer architecture:
+
+     overlay/default.css  → CUSTOMIZABLE: all token values
+                            (colors, type, spacing, radius, shadow)
+                            for light + dark mode.
+     base.css             → STRUCTURAL: resets, layout, components.
+                            Consumes tokens via var(), defines none.
+
+   The overlay MUST load first so tokens exist before base consumes
+   them. To ship a custom theme, either replace overlay/default.css,
+   or load index.css then your generated theme.css after it.
+   ────────────────────────────────────────────────────────────── */
+
+/* 1 — Customizable overlay (token values) */
+@import './overlay/default.css';
+
+/* 2 — Structural base (consumes tokens) */
+@import './base.css';

package/dist/css/layout/container.css

@@ -0,0 +1,12 @@
+/* layout/container.css */
+
+.container {
+  width:     100%;
+  max-width: 72rem;
+  margin:    0 auto;
+  padding:   0 var(--space-6);
+}
+
+.container-sm  { max-width: 48rem; }
+.container-lg  { max-width: 90rem; }
+.container-full { max-width: none; }

package/dist/css/layout/grid.css

@@ -0,0 +1,40 @@
+/* layout/grid.css */
+
+.grid {
+  display: grid;
+  gap:     var(--space-4);
+}
+
+.grid-1  { grid-template-columns: repeat(1, 1fr); }
+.grid-2  { grid-template-columns: repeat(2, 1fr); }
+.grid-3  { grid-template-columns: repeat(3, 1fr); }
+.grid-4  { grid-template-columns: repeat(4, 1fr); }
+.grid-auto { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
+
+.gap-sm { gap: var(--space-2); }
+.gap-md { gap: var(--space-4); }
+.gap-lg { gap: var(--space-6); }
+.gap-xl { gap: var(--space-8); }
+
+/* Flex helpers */
+.flex         { display: flex; }
+.flex-col     { display: flex; flex-direction: column; }
+.flex-wrap    { flex-wrap: wrap; }
+.items-center { align-items: center; }
+.items-start  { align-items: flex-start; }
+.items-end    { align-items: flex-end; }
+.justify-between { justify-content: space-between; }
+.justify-center  { justify-content: center; }
+.justify-end     { justify-content: flex-end; }
+.flex-1          { flex: 1; }
+.flex-shrink-0   { flex-shrink: 0; }
+.min-w-0         { min-width: 0; }
+
+/* Stack — vertical flex with consistent gap */
+.stack    { display: flex; flex-direction: column; gap: var(--space-4); }
+.stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
+.stack-lg { display: flex; flex-direction: column; gap: var(--space-6); }
+
+/* Cluster — horizontal flex wrap */
+.cluster    { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
+.cluster-lg { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }