@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.0

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

@@ -0,0 +1,111 @@
+/* layouts/dock-layout.css */
+
+.dk {
+  position:   relative;
+  min-height: 100vh;
+  background: var(--color-bg);
+}
+
+.dk-corner {
+  position:    absolute;
+  top:         var(--space-4);
+  display:     inline-flex;
+  align-items: center;
+  gap:         var(--space-2);
+  z-index:     10;
+}
+.dk-corner-left  { left: var(--space-6); font-weight: var(--font-bold); color: var(--color-text); }
+.dk-corner-right { right: var(--space-6); }
+.dk-brand-icon { color: var(--color-accent-light, var(--color-primary)); }
+
+.dk-main { min-height: 100vh; overflow-y: auto; }
+.dk-inner {
+  max-width: var(--layout-max, 72rem);
+  margin:    0 auto;
+  padding:   calc(var(--space-8) + 2rem) var(--space-6) 7rem;
+}
+
+/* The dock itself: centered, floating, near the bottom */
+.dk-dock {
+  position:       fixed;
+  bottom:         var(--space-6);
+  left:           50%;
+  transform:      translateX(-50%);
+  z-index:        50;
+  display:        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);
+}
+
+.dk-item {
+  position:        relative;
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  width:           2.75rem;
+  height:          2.75rem;
+  border:          none;
+  background:      none;
+  border-radius:   var(--radius-md);
+  color:           var(--color-text-muted);
+  cursor:          pointer;
+  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);
+}
+.dk-item .material-symbols-outlined { font-size: 1.5rem; }
+.dk-item:hover {
+  background: var(--color-bg-subtle);
+  color:      var(--color-text);
+  transform:  translateY(-4px);
+}
+.dk-item.active { color: var(--color-primary); background: var(--color-primary-subtle, var(--color-bg-subtle)); }
+
+/* Hover label above the icon */
+.dk-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);
+}
+.dk-item:hover .dk-label { opacity: 1; }
+
+/* Upward flyout for items with children */
+.dk-flywrap { position: relative; display: inline-flex; }
+.dk-flyout {
+  position:  absolute;
+  bottom:    calc(100% + var(--space-2));
+  left:      50%;
+  transform: translateX(-50%);
+  min-width: 11rem;
+  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);
+}
+.dk-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;
+}
+.dk-flyout-item .material-symbols-outlined { font-size: 1.1rem; color: var(--color-text-muted); }
+.dk-flyout-item:hover { background: var(--color-bg-subtle); }

package/dist/css/components/dropdown.css

@@ -0,0 +1,68 @@
+/* components/dropdown.css */
+
+.dropdown { position: relative; display: inline-flex; }
+
+.dropdown-trigger { display: inline-flex; align-items: center; gap: var(--space-1); }
+.dropdown-caret {
+  font-size: 1.15rem;
+  transition: transform var(--duration-fast) var(--ease-default);
+}
+.dropdown-caret.open { transform: rotate(180deg); }
+.dropdown-trigger-wrap { display: inline-flex; cursor: pointer; }
+
+.dropdown-menu {
+  position:       absolute;
+  top:            calc(100% + var(--space-1));
+  left:           0;
+  z-index:        200;
+  min-width:      11rem;
+  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);
+  animation:      dropdown-in var(--duration-fast) var(--ease-default);
+}
+.dropdown-menu-end { left: auto; right: 0; }
+
+@keyframes dropdown-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.dropdown-item {
+  display:         flex;
+  align-items:     center;
+  gap:             var(--space-2);
+  width:           100%;
+  padding:         var(--space-2) var(--space-3);
+  border:          none;
+  background:      none;
+  border-radius:   var(--radius-sm);
+  font:            inherit;
+  font-size:       var(--text-sm);
+  color:           var(--color-text);
+  text-align:      left;
+  text-decoration: none;
+  cursor:          pointer;
+  white-space:     nowrap;
+  transition:      background var(--duration-fast) var(--ease-default),
+                   color var(--duration-fast) var(--ease-default);
+}
+.dropdown-item .material-symbols-outlined { font-size: 1.15rem; color: var(--color-text-muted); }
+.dropdown-item:hover { background: var(--color-bg-subtle); }
+.dropdown-item:disabled { opacity: 0.5; cursor: not-allowed; }
+.dropdown-item-label { flex: 1; }
+
+.dropdown-item-danger { color: var(--color-error, #dc2626); }
+.dropdown-item-danger .material-symbols-outlined { color: var(--color-error, #dc2626); }
+.dropdown-item-danger:hover { background: var(--color-error-bg, #fef2f2); }
+
+.dropdown-divider {
+  height:  1px;
+  margin:  var(--space-1) 0;
+  background: var(--color-border);
+}

package/dist/css/components/floating-shell.css

@@ -0,0 +1,93 @@
+/* layouts/floating-shell.css */
+
+.fl-root {
+  min-height: 100vh;
+  background: var(--color-bg);
+  padding:    var(--space-4);
+  display:    flex;
+  flex-direction: column;
+  gap:        var(--space-4);
+}
+
+/* Floating top card */
+.fl-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);
+}
+.fl-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;
+}
+.fl-brand-icon { color: var(--color-accent-light, var(--color-primary)); }
+.fl-topnav { display: flex; align-items: center; gap: var(--space-1); flex: 1; }
+.fl-toplink {
+  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);
+}
+.fl-toplink .material-symbols-outlined { font-size: 1.15rem; }
+.fl-toplink:hover { background: var(--color-bg-subtle); color: var(--color-text); }
+.fl-toplink.active { background: var(--color-primary-subtle, var(--color-bg-subtle)); color: var(--color-primary); }
+.fl-actions { display: inline-flex; align-items: center; gap: var(--space-3); }
+
+/* Body: floating side card + content */
+.fl-body { display: flex; gap: var(--space-4); flex: 1; min-height: 0; }
+
+.fl-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);
+  height:        fit-content;
+  max-height:    100%;
+  overflow-y:    auto;
+}
+.fl-side-brand { padding: var(--space-2) var(--space-2) var(--space-3); }
+.fl-sidenav { display: flex; flex-direction: column; gap: 1px; }
+.fl-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);
+}
+.fl-sidelink {
+  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);
+}
+.fl-sidelink .material-symbols-outlined { font-size: 1.25rem; }
+.fl-sidelink:hover { background: var(--color-bg-subtle); color: var(--color-text); }
+.fl-sidelink.active { background: var(--color-primary-subtle, var(--color-bg-subtle)); color: var(--color-primary); }
+.fl-sidelabel { flex: 1; }
+.fl-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;
+}
+.fl-side-foot { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
+
+/* Content: also a floating card so everything sits on the bg */
+.fl-content {
+  flex:          1;
+  background:    var(--color-surface);
+  border:        1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  box-shadow:    var(--shadow-sm);
+  overflow-y:    auto;
+}
+.fl-inner { padding: var(--space-6); }

package/dist/css/components/form.css

@@ -0,0 +1,286 @@
+/* components/form.css */
+
+/* --- Field wrapper --- */
+
+.field {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--space-1);
+}
+
+.field + .field {
+  margin-top: var(--space-4);
+}
+
+
+/* --- Label --- */
+
+.label {
+  font-size:   var(--text-sm);
+  font-weight: var(--font-medium);
+  color:       var(--color-text);
+}
+
+.label-required::after {
+  content: " *";
+  color:   var(--color-error);
+}
+
+.label-optional::after {
+  content:     " (optional)";
+  color:       var(--color-text-subtle);
+  font-weight: var(--font-normal);
+}
+
+
+/* --- Base input styles --- */
+
+.input,
+.select,
+.textarea {
+  width:            100%;
+  padding:          var(--space-2) var(--space-3);
+  font-family:      var(--font-sans);
+  font-size:        var(--text-sm);
+  color:            var(--color-text);
+  background-color: var(--color-surface);
+  border:           1px solid var(--color-border-strong);
+  border-radius:    var(--radius-sm);
+  transition:       border-color var(--duration-fast) var(--ease-default),
+                    box-shadow   var(--duration-fast) var(--ease-default);
+  appearance:       none;
+  line-height:      var(--leading-normal);
+}
+
+.input::placeholder,
+.textarea::placeholder {
+  color: var(--color-text-subtle);
+}
+
+.input:hover,
+.select:hover,
+.textarea:hover {
+  border-color: var(--color-slate-400);
+}
+
+.input:focus,
+.select:focus,
+.textarea:focus {
+  outline:      none;
+  border-color: var(--color-primary);
+  box-shadow:   0 0 0 4px rgb(45 106 224 / 0.10);
+}
+
+.input:disabled,
+.select:disabled,
+.textarea:disabled {
+  background-color: var(--color-bg-subtle);
+  color:            var(--color-text-muted);
+  cursor:           not-allowed;
+}
+
+.input:read-only {
+  background-color: var(--color-bg-subtle);
+  color:            var(--color-text-muted);
+}
+
+
+/* --- Sizes --- */
+
+.input-sm, .select-sm { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); }
+.input-lg, .select-lg { padding: var(--space-3) var(--space-4); font-size: var(--text-base); }
+
+
+/* --- Textarea --- */
+
+.textarea        { resize: vertical; min-height: 6rem; }
+.textarea-fixed  { resize: none; }
+
+
+/* --- Select --- */
+
+.select {
+  padding-right:       var(--space-8);
+  background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat:   no-repeat;
+  background-position: right var(--space-3) center;
+  cursor:              pointer;
+}
+
+
+/* --- Input with icon --- */
+
+.input-wrapper {
+  position:    relative;
+  display:     flex;
+  align-items: center;
+}
+
+.input-wrapper .input { width: 100%; }
+
+.input-icon-left {
+  position:       absolute;
+  left:           var(--space-3);
+  color:          var(--color-text-subtle);
+  font-size:      1.1rem;
+  pointer-events: none;
+  line-height:    1;
+}
+
+.input-icon-right {
+  position:    absolute;
+  right:       var(--space-3);
+  color:       var(--color-text-subtle);
+  font-size:   1.1rem;
+  line-height: 1;
+}
+
+.input-wrapper .input-has-icon-left  { padding-left:  2.25rem; }
+.input-wrapper .input-has-icon-right { padding-right: 2.25rem; }
+
+
+/* --- States --- */
+
+.input-error,  .select-error,  .textarea-error  { border-color: var(--color-error);   }
+.input-success                                   { border-color: var(--color-success); }
+
+.input-error:focus,  .select-error:focus,  .textarea-error:focus  { box-shadow: 0 0 0 4px rgb(220 38 38 / 0.10); }
+.input-success:focus                                                { box-shadow: 0 0 0 4px rgb(22 163 74 / 0.10); }
+
+
+/* --- Hint and error text --- */
+
+.field-hint  { font-size: var(--text-xs); color: var(--color-text-muted); }
+.field-error { font-size: var(--text-xs); color: var(--color-error); display: flex; align-items: center; gap: var(--space-1); }
+
+
+/* --- Checkbox and radio --- */
+
+.checkbox,
+.radio {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-2);
+  cursor:      pointer;
+  user-select: none;
+}
+
+.checkbox input[type="checkbox"],
+.radio input[type="radio"] {
+  width:        1rem;
+  height:       1rem;
+  flex-shrink:  0;
+  accent-color: var(--color-primary);
+  cursor:       pointer;
+}
+
+.checkbox-label,
+.radio-label {
+  font-size: var(--text-sm);
+  color:     var(--color-text);
+}
+
+.checkbox-group,
+.radio-group         { display: flex; flex-direction: column; gap: var(--space-2); }
+.radio-group-inline,
+.checkbox-group-inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); }
+
+
+/* --- Toggle / switch --- */
+
+.toggle {
+  display:     inline-flex;
+  align-items: center;
+  gap:         var(--space-3);
+  cursor:      pointer;
+  user-select: none;
+}
+
+.toggle-track {
+  position:         relative;
+  width:            2.25rem;
+  height:           1.25rem;
+  background-color: var(--color-slate-300);
+  border-radius:    var(--radius-full);
+  transition:       background-color var(--duration-fast) var(--ease-default);
+  flex-shrink:      0;
+}
+
+.toggle input[type="checkbox"] {
+  position: absolute;
+  opacity:  0;
+  width:    0;
+  height:   0;
+}
+
+.toggle input[type="checkbox"]:checked + .toggle-track {
+  background-color: var(--color-primary);
+}
+
+.toggle-thumb {
+  position:         absolute;
+  top:              0.125rem;
+  left:             0.125rem;
+  width:            1rem;
+  height:           1rem;
+  background-color: white;
+  border-radius:    var(--radius-full);
+  box-shadow:       var(--shadow-sm);
+  transition:       transform var(--duration-fast) var(--ease-default);
+}
+
+.toggle input[type="checkbox"]:checked + .toggle-track .toggle-thumb {
+  transform: translateX(1rem);
+}
+
+.toggle-label {
+  font-size: var(--text-sm);
+  color:     var(--color-text);
+}
+
+
+/* --- Form layout --- */
+
+.form-row   { display: grid; gap: var(--space-4); }
+.form-row-2 { grid-template-columns: repeat(2, 1fr); }
+.form-row-3 { grid-template-columns: repeat(3, 1fr); }
+
+.form-actions {
+  display:         flex;
+  align-items:     center;
+  justify-content: flex-end;
+  gap:             var(--space-2);
+  margin-top:      var(--space-6);
+  padding-top:     var(--space-6);
+  border-top:      1px solid var(--color-border);
+}
+
+.form-actions-left  { justify-content: flex-start;    }
+.form-actions-split { justify-content: space-between; }
+
+/* --- Textarea --- */
+.textarea {
+  width:         100%;
+  padding:       var(--space-2) var(--space-3);
+  font:          inherit;
+  font-size:     var(--text-sm);
+  color:         var(--color-text);
+  background:    var(--color-surface);
+  border:        1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  transition:    border-color var(--duration-fast) var(--ease-default),
+                 box-shadow var(--duration-fast) var(--ease-default);
+  font-family:   inherit;
+  line-height:   var(--leading-relaxed);
+}
+.textarea:focus {
+  outline:      none;
+  border-color: var(--color-primary);
+  box-shadow:   0 0 0 3px var(--color-primary-subtle, rgb(79 70 229 / 0.12));
+}
+.textarea:disabled { opacity: 0.6; cursor: not-allowed; background: var(--color-bg-subtle); }
+.textarea-error   { border-color: var(--color-error, #dc2626); }
+.textarea-success { border-color: var(--color-success, #16a34a); }
+
+/* --- Masked input uses .input styles; add mono option --- */
+.masked-input { font-variant-numeric: tabular-nums; }

package/dist/css/components/login.css

@@ -0,0 +1,145 @@
+/* components/login.css */
+
+.login-page {
+  min-height:      100vh;
+  display:         flex;
+  align-items:     center;
+  justify-content: center;
+  background-color: var(--color-bg);
+  padding:         var(--space-4);
+}
+
+/* Optional — subtle grid pattern background */
+.login-page-patterned {
+  background-color: var(--color-slate-100);
+  background-image:
+    linear-gradient(var(--color-slate-200) 1px, transparent 1px),
+    linear-gradient(90deg, var(--color-slate-200) 1px, transparent 1px);
+  background-size: 24px 24px;
+}
+
+
+/* --- Login card --- */
+
+.login-card {
+  width:     100%;
+  max-width: 24rem;
+}
+
+.login-card .card-body {
+  padding: var(--space-8);
+}
+
+
+/* --- Brand / logo area --- */
+
+.login-brand {
+  display:         flex;
+  flex-direction:  column;
+  align-items:     center;
+  text-align:      center;
+  margin-bottom:   var(--space-8);
+}
+
+.login-logo {
+  width:         3rem;
+  height:        3rem;
+  background-color: var(--color-primary);
+  border-radius: var(--radius-md);
+  display:       flex;
+  align-items:   center;
+  justify-content: center;
+  margin-bottom: var(--space-4);
+  color:         white;
+  font-size:     1.5rem;
+}
+
+.login-logo img {
+  width:  2rem;
+  height: 2rem;
+}
+
+.login-title {
+  font-size:   var(--text-xl);
+  font-weight: var(--font-semibold);
+  color:       var(--color-text);
+  margin:      0 0 var(--space-1) 0;
+}
+
+.login-subtitle {
+  font-size: var(--text-sm);
+  color:     var(--color-text-muted);
+  margin:    0;
+}
+
+
+/* --- Form inside login --- */
+
+.login-form .field + .field {
+  margin-top: var(--space-4);
+}
+
+.login-form .form-actions {
+  margin-top:   var(--space-6);
+  padding-top:  0;
+  border-top:   none;
+  flex-direction: column;
+}
+
+.login-forgot {
+  display:   block;
+  text-align: right;
+  font-size: var(--text-xs);
+  color:     var(--color-text-muted);
+  margin-top: var(--space-1);
+}
+
+.login-forgot:hover {
+  color: var(--color-primary);
+}
+
+
+/* --- Divider with label --- */
+
+.login-divider {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-3);
+  margin:      var(--space-6) 0;
+  color:       var(--color-text-subtle);
+  font-size:   var(--text-xs);
+}
+
+.login-divider::before,
+.login-divider::after {
+  content: '';
+  flex:    1;
+  height:  1px;
+  background-color: var(--color-border);
+}
+
+
+/* --- Footer note --- */
+
+.login-footer {
+  text-align:  center;
+  margin-top:  var(--space-6);
+  font-size:   var(--text-sm);
+  color:       var(--color-text-muted);
+}
+
+
+/* --- Error alert inside login --- */
+
+.login-alert {
+  display:          flex;
+  align-items:      center;
+  gap:              var(--space-2);
+  padding:          var(--space-3) var(--space-4);
+  background-color: var(--color-error-bg);
+  border:           1px solid var(--color-error);
+  border-radius:    var(--radius-sm);
+  color:            var(--color-error);
+  font-size:        var(--text-sm);
+  margin-bottom:    var(--space-4);
+}