@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.1

package/dist/css/components/modal.css

@@ -0,0 +1,179 @@
+/* components/modal.css */
+
+/* --- Backdrop --- */
+
+.modal-backdrop {
+  position:         fixed;
+  inset:            0;
+  background-color: rgb(15 23 42 / 0.5);
+  z-index:          200;
+  display:          flex;
+  align-items:      center;
+  justify-content:  center;
+  padding:          var(--space-4);
+  animation:        modal-backdrop-in var(--duration-normal) var(--ease-out);
+}
+
+.modal-backdrop.closing {
+  animation: modal-backdrop-out var(--duration-normal) var(--ease-in) forwards;
+}
+
+
+/* --- Modal container --- */
+
+.modal {
+  background-color: var(--color-surface);
+  border:           1px solid var(--color-border);
+  border-radius:    var(--radius-md);
+  box-shadow:       var(--shadow-lg);
+  width:            100%;
+  max-width:        32rem;
+  max-height:       calc(100vh - var(--space-8));
+  display:          flex;
+  flex-direction:   column;
+  animation:        modal-in var(--duration-normal) var(--ease-out);
+}
+
+.modal-backdrop.closing .modal {
+  animation: modal-out var(--duration-normal) var(--ease-in) forwards;
+}
+
+
+/* --- Sizes --- */
+
+.modal-sm   { max-width: 24rem; }
+.modal-lg   { max-width: 48rem; }
+.modal-xl   { max-width: 64rem; }
+.modal-full { max-width: none; width: calc(100vw - var(--space-8)); max-height: calc(100vh - var(--space-8)); }
+
+
+/* --- Header --- */
+
+.modal-header {
+  display:         flex;
+  align-items:     flex-start;
+  justify-content: space-between;
+  padding:         var(--space-5) var(--space-6);
+  border-bottom:   1px solid var(--color-border);
+  gap:             var(--space-4);
+  flex-shrink:     0;
+}
+
+.modal-title {
+  font-size:   var(--text-base);
+  font-weight: var(--font-semibold);
+  color:       var(--color-text);
+  margin:      0;
+  line-height: var(--leading-snug);
+}
+
+.modal-subtitle {
+  font-size: var(--text-sm);
+  color:     var(--color-text-muted);
+  margin:    var(--space-1) 0 0 0;
+}
+
+.modal-close { flex-shrink: 0; }
+
+
+/* --- Body --- */
+
+.modal-body    { padding: var(--space-6); overflow-y: auto; flex: 1; }
+.modal-body-sm { padding: var(--space-4); }
+.modal-body-lg { padding: var(--space-8); }
+
+
+/* --- Footer --- */
+
+.modal-footer {
+  display:          flex;
+  align-items:      center;
+  justify-content:  flex-end;
+  padding:          var(--space-4) var(--space-6);
+  border-top:       1px solid var(--color-border);
+  gap:              var(--space-2);
+  flex-shrink:      0;
+  background-color: var(--color-bg-subtle);
+  border-radius:    0 0 var(--radius-md) var(--radius-md);
+}
+
+.modal-footer-left  { justify-content: flex-start;    }
+.modal-footer-split { justify-content: space-between; }
+
+
+/* --- Confirm dialog --- */
+
+.modal-confirm .modal-body {
+  display:     flex;
+  gap:         var(--space-4);
+  align-items: flex-start;
+}
+
+.modal-confirm-icon {
+  width:           2.5rem;
+  height:          2.5rem;
+  border-radius:   var(--radius-full);
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  flex-shrink:     0;
+  font-size:       1.25rem;
+}
+
+.modal-confirm-icon-warning { background-color: var(--color-warning-bg); color: var(--color-warning); }
+.modal-confirm-icon-danger  { background-color: var(--color-error-bg);   color: var(--color-error);   }
+.modal-confirm-icon-info    { background-color: var(--color-info-bg);    color: var(--color-info);    }
+.modal-confirm-icon-success { background-color: var(--color-success-bg); color: var(--color-success); }
+
+.modal-confirm-title {
+  font-size:   var(--text-base);
+  font-weight: var(--font-semibold);
+  color:       var(--color-text);
+  margin:      0 0 var(--space-1) 0;
+}
+
+.modal-confirm-message {
+  font-size: var(--text-sm);
+  color:     var(--color-text-muted);
+  margin:    0;
+}
+
+
+/* --- Drawer variant --- */
+
+.modal-backdrop-drawer {
+  align-items:     stretch;
+  justify-content: flex-end;
+  padding:         0;
+}
+
+.modal-drawer {
+  max-width:     28rem;
+  max-height:    none;
+  height:        100vh;
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
+  animation:     drawer-in var(--duration-slow) var(--ease-out);
+}
+
+.modal-backdrop-drawer.closing .modal-drawer {
+  animation: drawer-out var(--duration-normal) var(--ease-in) forwards;
+}
+
+
+/* --- Animations --- */
+
+@keyframes modal-backdrop-in  { from { opacity: 0; } to { opacity: 1; } }
+@keyframes modal-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
+
+@keyframes modal-in {
+  from { opacity: 0; transform: translateY(-0.5rem) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0) scale(1); }
+}
+
+@keyframes modal-out {
+  from { opacity: 1; transform: translateY(0) scale(1); }
+  to   { opacity: 0; transform: translateY(-0.5rem) scale(0.98); }
+}
+
+@keyframes drawer-in  { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes drawer-out { from { transform: translateX(0); }    to { transform: translateX(100%); } }

package/dist/css/components/nav.css

@@ -0,0 +1,190 @@
+/* components/nav.css */
+
+.nav-item {
+  display:          flex;
+  align-items:      center;
+  gap:              var(--space-3);
+  padding:          var(--space-2) var(--space-3);
+  border-radius:    var(--radius-full);
+  font-size:        var(--text-sm);
+  font-weight:      var(--font-medium);
+  color:            var(--color-text-muted);
+  cursor:           pointer;
+  text-decoration:  none;
+  transition:       background-color var(--duration-fast) var(--ease-default),
+                    color            var(--duration-fast) var(--ease-default);
+  user-select:      none;
+  white-space:      nowrap;
+  overflow:         hidden;
+  /* reset button defaults so <button> and <a> look identical */
+  width:            100%;
+  border:           none;
+  background:       none;
+  text-align:       left;
+  box-sizing:       border-box;
+  font-family:      var(--font-sans);
+  line-height:      var(--leading-normal);
+  -webkit-appearance: none;
+}
+
+.nav-item:hover {
+  background-color: var(--color-slate-100);
+  color:            var(--color-text);
+}
+
+.nav-item.active {
+  background-color: var(--color-primary);
+  color:            var(--color-primary-text);
+}
+
+.nav-item.active:hover {
+  background-color: var(--color-primary-hover);
+}
+
+.nav-icon {
+  font-size:   1.25rem;
+  flex-shrink: 0;
+  opacity:     0.8;
+}
+
+.nav-item.active .nav-icon { opacity: 1; }
+
+.nav-label {
+  flex:          1;
+  overflow:      hidden;
+  text-overflow: ellipsis;
+}
+
+.nav-badge {
+  margin-left:      auto;
+  background-color: var(--color-slate-200);
+  color:            var(--color-text-muted);
+  font-size:        var(--text-xs);
+  font-weight:      var(--font-semibold);
+  padding:          0 var(--space-2);
+  border-radius:    var(--radius-full);
+  flex-shrink:      0;
+  line-height:      1.6;
+}
+
+.nav-item.active .nav-badge {
+  background-color: rgb(255 255 255 / 0.2);
+  color:            var(--color-primary-text);
+}
+
+
+/* --- Nav group --- */
+
+.nav-group-trigger {
+  width:      100%;
+  background: none;
+  border:     none;
+}
+
+.nav-group-trigger .nav-chevron {
+  margin-left: auto;
+  font-size:   1rem;
+  flex-shrink: 0;
+  transition:  transform var(--duration-normal) var(--ease-default);
+  opacity:     0.6;
+}
+
+.nav-group-trigger[aria-expanded="true"] .nav-chevron {
+  transform: rotate(180deg);
+}
+
+.nav-group-children {
+  overflow:   hidden;
+  height:     0;
+  transition: height var(--duration-normal) var(--ease-default);
+}
+
+.nav-group-children.open {
+  height: auto;
+}
+
+.nav-group-children .nav-item {
+  padding-left: calc(var(--space-3) + 1rem + var(--space-3));
+  font-weight:  var(--font-normal);
+}
+
+
+/* --- Divider --- */
+
+.nav-divider {
+  height:     1px;
+  background: var(--color-border);
+  margin:     var(--space-2) var(--space-3);
+}
+
+/* --- Second level (vertical, expand inline) --- */
+
+.nav-item-wrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.nav-chevron {
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  flex-shrink:     0;
+  margin-left:     auto;
+  width:           1.5rem;
+  height:          1.5rem;
+  border:          none;
+  background:      none;
+  cursor:          pointer;
+  border-radius:   var(--radius-sm);
+  color:           inherit;
+  opacity:         0.7;
+  transition:      transform var(--duration-fast) var(--ease-default),
+                   opacity   var(--duration-fast) var(--ease-default),
+                   background-color var(--duration-fast) var(--ease-default);
+}
+
+.nav-chevron .material-symbols-outlined { font-size: 1.15rem; }
+.nav-chevron:hover { opacity: 1; background-color: rgb(0 0 0 / 0.06); }
+.nav-chevron.open { transform: rotate(90deg); }
+
+/* When the parent row is a link, the chevron sits after the badge */
+.nav-item .nav-chevron { margin-left: var(--space-1); }
+
+.nav-subitems {
+  display:        flex;
+  flex-direction: column;
+  gap:            2px;
+  margin:         2px 0 var(--space-1) 0;
+  padding-left:   var(--space-3);
+  /* guide line for the nested group */
+  margin-left:    var(--space-4);
+  border-left:    1px solid var(--color-border);
+}
+
+.nav-subitem {
+  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;
+  white-space:     nowrap;
+  overflow:        hidden;
+  transition:      background-color var(--duration-fast) var(--ease-default),
+                   color            var(--duration-fast) var(--ease-default);
+}
+
+.nav-subitem:hover {
+  background-color: var(--color-slate-100);
+  color:            var(--color-text);
+}
+
+.nav-subitem.active {
+  color:       var(--color-primary);
+  font-weight: var(--font-semibold);
+  background-color: var(--color-info-bg);
+}
+
+.nav-subicon { font-size: 1.1rem; flex-shrink: 0; opacity: 0.8; }

package/dist/css/components/nestable.css

@@ -0,0 +1,187 @@
+/* layouts/nestable.css — scaffolding for single-region nestable layouts */
+
+/* Root fills its parent completely, so nesting works at any depth.
+   The outermost one is sized by its container (e.g. 100vh wrapper). */
+.nl {
+  display: flex;
+  width:   100%;
+  height:  100%;
+  min-height: 0;
+  min-width:  0;
+}
+.nl-col { flex-direction: column; }
+.nl-row { flex-direction: row; }
+
+/* The content area that a child layout (or page) fills. flex:1 + min-0 is what
+   lets a nested .nl inside expand to the available space instead of collapsing. */
+.nl-fill {
+  flex:       1;
+  min-width:  0;
+  min-height: 0;
+  display:    flex;
+  flex-direction: column;
+}
+.nl-scroll { overflow: auto; }
+
+/* When a plain page (not another layout) is the content, give it padding.
+   A nested .nl fills edge-to-edge; direct page content gets breathing room. */
+.nl-fill > :not(.nl):not(.nl-passthrough) {
+  padding: var(--space-6);
+}
+
+/* Right sidebar wrapper keeps SideBar's border on the correct edge */
+.nl-right .sb { border-right: none; border-left: 1px solid var(--color-border); }
+
+/* Bottom bar wrapper: horizontal bar pinned below content */
+.nl-bottom .tb { border-bottom: none; border-top: 1px solid var(--color-border); }
+
+/* An outer wrapper helper for the top-level layout to establish full height */
+.nl-app { height: 100vh; }
+
+/* ─── Icon rail ─── */
+.ir {
+  width: 3.5rem; flex-shrink: 0; display: flex; flex-direction: column; align-items: center;
+  gap: var(--space-2); padding: var(--space-3) 0;
+  background: var(--color-surface); border-right: 1px solid var(--color-border);
+}
+.ir-brand {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md);
+  color: var(--color-accent-light, var(--color-primary)); text-decoration: none;
+  margin-bottom: var(--space-2);
+}
+.ir-brand .material-symbols-outlined { font-size: 1.5rem; }
+.ir-nav { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); align-items: center; }
+.ir-item {
+  position: relative; display: inline-flex; align-items: center; justify-content: center;
+  width: 2.5rem; height: 2.5rem; border-radius: var(--radius-md);
+  color: var(--color-text-muted); text-decoration: none;
+  transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default);
+}
+.ir-item .material-symbols-outlined { font-size: 1.4rem; }
+.ir-item:hover { background: var(--color-bg-subtle); color: var(--color-text); }
+.ir-item.active { background: var(--color-primary-subtle, var(--color-bg-subtle)); color: var(--color-primary); }
+.ir-tip {
+  position: absolute; left: calc(100% + var(--space-2)); top: 50%; transform: translateY(-50%);
+  padding: var(--space-1) var(--space-2); background: var(--color-text, #1e293b); color: var(--color-surface, #fff);
+  font-size: var(--text-xs); white-space: nowrap; border-radius: var(--radius-sm);
+  opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-default); z-index: 300;
+}
+.ir-item:hover .ir-tip { opacity: 1; }
+.ir-dot { position: absolute; top: 0.5rem; right: 0.5rem; width: 0.45rem; height: 0.45rem; border-radius: var(--radius-full); background: var(--color-primary); }
+.ir-foot { display: flex; align-items: center; justify-content: center; }
+
+/* ─── Floating nestable (top / left cards) ─── */
+.nlf-pad { padding: var(--space-4); gap: var(--space-4); background: var(--color-bg); }
+.nlf-topcard {
+  display: flex; align-items: center; gap: var(--space-6);
+  padding: var(--space-2) var(--space-4); background: var(--color-surface);
+  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
+  flex-shrink: 0;
+}
+.nlf-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); white-space: nowrap; }
+.nlf-brand-icon { color: var(--color-accent-light, var(--color-primary)); }
+.nlf-topnav { display: flex; align-items: center; gap: var(--space-1); flex: 1; }
+.nlf-toplink, .nlf-sidelink {
+  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);
+}
+.nlf-toplink .material-symbols-outlined, .nlf-sidelink .material-symbols-outlined { font-size: 1.2rem; }
+.nlf-toplink:hover, .nlf-sidelink:hover { background: var(--color-bg-subtle); color: var(--color-text); }
+.nlf-toplink.active, .nlf-sidelink.active { background: var(--color-primary-subtle, var(--color-bg-subtle)); color: var(--color-primary); }
+.nlf-actions { display: inline-flex; align-items: center; gap: var(--space-3); }
+
+/* Fills the row's height (the flex default is `stretch`), matching the
+   non-floating .sb sidebar. */
+.nlf-sidecard {
+  width: 14rem; flex-shrink: 0; display: flex; flex-direction: column; padding: var(--space-3);
+  background: var(--color-surface); border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); max-height: 100%; overflow-y: auto;
+}
+.nlf-side-brand { padding: var(--space-2) var(--space-2) var(--space-3); }
+/* flex:1 takes the free space, so .nlf-side-foot (e.g. a SidebarProfile) sits
+   at the bottom of the card rather than directly under the last nav item —
+   same arrangement as .sb-nav / .sb-footer. */
+.nlf-sidenav { display: flex; flex-direction: column; gap: 1px; flex: 1; }
+.nlf-sidelink { justify-content: flex-start; }
+.nlf-sidelabel { flex: 1; }
+.nlf-side-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-2) var(--space-1); }
+.nlf-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; }
+.nlf-side-foot { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
+.nlf-content { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
+
+/* ─── Floating dock (nestable) ─── */
+.nldk { position: relative; }
+.nldk-content { padding-bottom: 6rem; }
+.nldk-dockwrap { position: absolute; bottom: var(--space-6); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
+.nldk-dock {
+  display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2);
+  background: var(--color-surface); border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl, 1rem); box-shadow: var(--shadow-lg); pointer-events: auto;
+}
+.nldk-item {
+  position: relative; display: inline-flex; align-items: center; justify-content: center;
+  width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); color: var(--color-text-muted);
+  text-decoration: none; transition: background var(--duration-fast) var(--ease-default), color var(--duration-fast) var(--ease-default), transform var(--duration-fast) var(--ease-default);
+}
+.nldk-item .material-symbols-outlined { font-size: 1.5rem; }
+.nldk-item:hover { background: var(--color-bg-subtle); color: var(--color-text); transform: translateY(-4px); }
+.nldk-item.active { color: var(--color-primary); background: var(--color-primary-subtle, var(--color-bg-subtle)); }
+.nldk-label {
+  position: absolute; bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%);
+  padding: var(--space-1) var(--space-2); background: var(--color-text, #1e293b); color: var(--color-surface, #fff);
+  font-size: var(--text-xs); white-space: nowrap; border-radius: var(--radius-sm);
+  opacity: 0; pointer-events: none; transition: opacity var(--duration-fast) var(--ease-default);
+}
+.nldk-item:hover .nldk-label { opacity: 1; }
+
+/* ─── Submenus across nestable layouts ─── */
+
+/* Floating-left: expandable subnav (like SideBar) */
+.nlf-parent { width: 100%; border: none; background: none; font: inherit; cursor: pointer; text-align: left; }
+.nlf-chevron { font-size: 1.1rem; margin-left: auto; color: var(--color-text-subtle); transition: transform var(--duration-fast) var(--ease-default); }
+.nlf-chevron.open { transform: rotate(90deg); }
+.nlf-subnav { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 1px var(--space-3); padding-left: var(--space-2); border-left: 1px solid var(--color-border); }
+.nlf-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);
+}
+.nlf-sublink .material-symbols-outlined { font-size: 1.05rem; }
+.nlf-sublink:hover { background: var(--color-bg-subtle); color: var(--color-text); }
+.nlf-sublink.active { background: var(--color-primary-subtle, var(--color-bg-subtle)); color: var(--color-primary); }
+
+/* Floating-top: flyout (like TopBar) */
+.nlf-flywrap { position: relative; display: inline-flex; align-items: center; }
+.nlf-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); }
+.nlf-flybtn:hover { background: var(--color-bg-subtle); }
+.nlf-flyout, .ir-flyout, .nldk-flyout {
+  position: absolute; z-index: 300; 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);
+}
+.nlf-flyout { top: calc(100% + var(--space-2)); left: 0; }
+.nlf-flyout-item, .ir-flyout-item, .nldk-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; white-space: nowrap;
+}
+.nlf-flyout-item .material-symbols-outlined, .ir-flyout-item .material-symbols-outlined, .nldk-flyout-item .material-symbols-outlined { font-size: 1.1rem; color: var(--color-text-muted); }
+.nlf-flyout-item:hover, .ir-flyout-item:hover, .nldk-flyout-item:hover { background: var(--color-bg-subtle); }
+
+/* Icon rail: flyout to the right */
+.ir-flywrap { position: relative; display: inline-flex; }
+.ir-flyout { left: calc(100% + var(--space-2)); top: 0; }
+.ir-flyout-head { font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--color-text-subtle); text-transform: uppercase; letter-spacing: var(--tracking-wide); padding: var(--space-1) var(--space-3) var(--space-2); }
+.ir-flyout-item.active { background: var(--color-primary-subtle, var(--color-bg-subtle)); color: var(--color-primary); }
+
+/* Dock: flyout upward */
+.nldk-flywrap { position: relative; display: inline-flex; }
+.nldk-flyout { bottom: calc(100% + var(--space-2)); left: 50%; transform: translateX(-50%); }
+
+/* Floating-top parent (opens flyout on whole-item click) */
+.nlf-parent { border: none; background: none; font: inherit; cursor: pointer; }
+.nlf-caret { font-size: 1.05rem; transition: transform var(--duration-fast) var(--ease-default); }
+.nlf-caret.open { transform: rotate(180deg); }

package/dist/css/components/pagination.css

@@ -0,0 +1,50 @@
+/* components/pagination.css */
+
+.pagination {
+  display:     inline-flex;
+  align-items: center;
+  gap:         var(--space-1);
+}
+
+.pagination-btn {
+  display:          inline-flex;
+  align-items:      center;
+  justify-content:  center;
+  min-width:        2.25rem;
+  height:           2.25rem;
+  padding:          0 var(--space-2);
+  border:           1px solid transparent;
+  background:       none;
+  border-radius:    var(--radius-md);
+  font:             inherit;
+  font-size:        var(--text-sm);
+  font-weight:      var(--font-medium);
+  color:            var(--color-text);
+  cursor:           pointer;
+  transition:       background var(--duration-fast) var(--ease-default),
+                    border-color var(--duration-fast) var(--ease-default),
+                    color var(--duration-fast) var(--ease-default);
+}
+.pagination-btn:hover:not(:disabled):not(.active) {
+  background: var(--color-bg-subtle);
+}
+.pagination-btn.active {
+  background:   var(--color-primary);
+  color:        var(--color-primary-text);
+  font-weight:  var(--font-semibold);
+}
+.pagination-btn:disabled {
+  opacity: 0.4;
+  cursor:  not-allowed;
+}
+.pagination-arrow .material-symbols-outlined { font-size: 1.25rem; }
+
+.pagination-ellipsis {
+  display:         inline-flex;
+  align-items:     flex-end;
+  justify-content: center;
+  min-width:       2rem;
+  height:          2.25rem;
+  color:           var(--color-text-subtle);
+  padding-bottom:  var(--space-1);
+}

package/dist/css/components/progress.css

@@ -0,0 +1,50 @@
+/* components/progress.css */
+
+.progress-container {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-3);
+  width:       100%;
+}
+
+.progress {
+  flex:          1;
+  overflow:      hidden;
+  background:    var(--color-bg-subtle);
+  border-radius: var(--radius-full);
+}
+.progress-sm { height: 0.375rem; }
+.progress-md { height: 0.5rem; }
+.progress-lg { height: 0.75rem; }
+
+.progress-bar {
+  height:        100%;
+  border-radius: var(--radius-full);
+  transition:    width var(--duration-normal) var(--ease-default);
+}
+.progress-primary { background: var(--color-primary); }
+.progress-success { background: var(--color-success, #16a34a); }
+.progress-warning { background: var(--color-warning, #d97706); }
+.progress-error   { background: var(--color-error, #dc2626); }
+
+.progress-label {
+  font-size:   var(--text-xs);
+  font-weight: var(--font-semibold);
+  color:       var(--color-text-muted);
+  min-width:   2.5rem;
+  text-align:  right;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Indeterminate: a sliding chunk */
+.progress-indeterminate {
+  width:     40%;
+  animation: progress-slide 1.2s ease-in-out infinite;
+}
+@keyframes progress-slide {
+  0%   { margin-left: -40%; }
+  100% { margin-left: 100%; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .progress-indeterminate { animation-duration: 2.5s; }
+}