@sveltekitchen/sveltekitchen 0.0.0-stage → 1.0.1

package/dist/css/components/button.css

@@ -0,0 +1,171 @@
+/* components/button.css */
+
+.btn {
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  gap:             var(--space-2);
+  padding:         var(--space-2) var(--space-5);
+  font-family:     var(--font-sans);
+  font-size:       var(--text-sm);
+  font-weight:     var(--font-medium);
+  line-height:     1;
+  white-space:     nowrap;
+  border-radius:   var(--radius-sm);
+  border:          1px solid transparent;
+  cursor:          pointer;
+  transition:      background-color var(--duration-fast) var(--ease-default),
+                   border-color     var(--duration-fast) var(--ease-default),
+                   color            var(--duration-fast) var(--ease-default),
+                   box-shadow       var(--duration-normal) var(--ease-default),
+                   transform        var(--duration-fast) var(--ease-default);
+  text-decoration: none;
+  user-select:     none;
+}
+
+.btn:focus-visible {
+  outline:        2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+
+.btn:disabled,
+.btn[aria-disabled="true"] {
+  opacity:        0.5;
+  cursor:         not-allowed;
+  pointer-events: none;
+}
+
+
+/* --- Variants --- */
+
+.btn-primary {
+  background-color: var(--color-primary);
+  border-color:     var(--color-primary);
+  color:            var(--color-primary-text);
+  box-shadow:       var(--shadow-xs),
+                    inset 0 1px 0 rgb(255 255 255 / 0.12);
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-hover);
+  border-color:     var(--color-primary-hover);
+  box-shadow:       var(--shadow-md),
+                    inset 0 1px 0 rgb(255 255 255 / 0.12);
+  transform:        translateY(-1px);
+}
+
+.btn-primary:active {
+  transform:  translateY(0);
+  box-shadow: var(--shadow-xs);
+}
+
+.btn-secondary {
+  background-color: var(--color-surface);
+  border-color:     var(--color-border-strong);
+  color:            var(--color-text);
+  box-shadow:       var(--shadow-xs);
+}
+
+.btn-secondary:hover {
+  background-color: var(--color-bg-subtle);
+  border-color:     var(--color-slate-400);
+  box-shadow:       var(--shadow-md);
+  transform:        translateY(-1px);
+}
+
+.btn-secondary:active {
+  transform:  translateY(0);
+  box-shadow: var(--shadow-xs);
+}
+
+.btn-ghost {
+  background-color: transparent;
+  border-color:     transparent;
+  color:            var(--color-text-muted);
+}
+
+.btn-ghost:hover {
+  background-color: var(--color-bg-subtle);
+  color:            var(--color-text);
+}
+
+.btn-ghost:active {
+  background-color: var(--color-slate-200);
+}
+
+.btn-danger {
+  background-color: var(--color-error);
+  border-color:     var(--color-error);
+  color:            #ffffff;
+  box-shadow:       var(--shadow-xs);
+}
+
+.btn-danger:hover {
+  background-color: #b91c1c;
+  border-color:     #b91c1c;
+  box-shadow:       var(--shadow-md);
+  transform:        translateY(-1px);
+}
+
+.btn-danger:active {
+  transform:  translateY(0);
+  box-shadow: var(--shadow-xs);
+}
+
+.btn-danger-outline {
+  background-color: transparent;
+  border-color:     var(--color-error);
+  color:            var(--color-error);
+}
+
+.btn-danger-outline:hover {
+  background-color: var(--color-error-bg);
+  box-shadow:       var(--shadow-sm);
+  transform:        translateY(-1px);
+}
+
+.btn-danger-outline:active {
+  transform:  translateY(0);
+  box-shadow: none;
+}
+
+
+/* --- Sizes --- */
+
+.btn-sm {
+  padding:   var(--space-1) var(--space-3);
+  font-size: var(--text-xs);
+}
+
+.btn-lg {
+  padding:   var(--space-3) var(--space-6);
+  font-size: var(--text-base);
+}
+
+.btn-icon {
+  padding: var(--space-2);
+  width:   2.25rem;
+  height:  2.25rem;
+}
+
+.btn-icon.btn-sm {
+  width:   1.75rem;
+  height:  1.75rem;
+  padding: var(--space-1);
+}
+
+.btn-icon.btn-lg {
+  width:   2.75rem;
+  height:  2.75rem;
+  padding: var(--space-3);
+}
+
+.btn-full {
+  width: 100%;
+}
+
+.btn .icon,
+.btn .material-symbols-outlined {
+  font-size:   1.1rem;
+  flex-shrink: 0;
+}

package/dist/css/components/calendar.css

@@ -0,0 +1,105 @@
+/* components/calendar.css */
+
+.calendar {
+  width:         17rem;
+  padding:       var(--space-3);
+  background:    var(--color-surface);
+  border:        1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  user-select:   none;
+}
+
+.calendar-header {
+  display:         flex;
+  align-items:     center;
+  justify-content: space-between;
+  margin-bottom:   var(--space-2);
+}
+.calendar-title {
+  font-size:   var(--text-sm);
+  font-weight: var(--font-semibold);
+  color:       var(--color-text);
+}
+.calendar-nav {
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  width:           1.75rem;
+  height:          1.75rem;
+  border:          none;
+  background:      none;
+  border-radius:   var(--radius-sm);
+  color:           var(--color-text-muted);
+  cursor:          pointer;
+  transition:      background var(--duration-fast) var(--ease-default);
+}
+.calendar-nav:hover { background: var(--color-bg-subtle); color: var(--color-text); }
+
+.calendar-grid {
+  display:               grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap:                   2px;
+}
+.calendar-dow {
+  text-align:     center;
+  font-size:      var(--text-xs);
+  font-weight:    var(--font-semibold);
+  color:          var(--color-text-subtle);
+  padding:        var(--space-1) 0;
+}
+.calendar-day {
+  aspect-ratio:    1;
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  border:          none;
+  background:      none;
+  border-radius:   var(--radius-sm);
+  font:            inherit;
+  font-size:       var(--text-sm);
+  color:           var(--color-text);
+  cursor:          pointer;
+  transition:      background var(--duration-fast) var(--ease-default),
+                   color var(--duration-fast) var(--ease-default);
+}
+.calendar-day:hover { background: var(--color-bg-subtle); }
+.calendar-day.outside { color: var(--color-text-subtle); opacity: 0.55; }
+.calendar-day.today {
+  font-weight: var(--font-bold);
+  box-shadow:  inset 0 0 0 1px var(--color-border-strong, var(--color-border));
+}
+.calendar-day.selected {
+  background:  var(--color-primary);
+  color:       var(--color-primary-text);
+  font-weight: var(--font-semibold);
+}
+.calendar-day.selected:hover { background: var(--color-primary); }
+
+/* ─── DatePicker ─── */
+.datepicker { position: relative; display: inline-block; }
+
+.datepicker-trigger {
+  display:     inline-flex;
+  align-items: center;
+  gap:         var(--space-2);
+  min-width:   12rem;
+  cursor:      pointer;
+  text-align:  left;
+}
+.datepicker-icon { font-size: 1.15rem; color: var(--color-text-muted); }
+.datepicker-value { flex: 1; }
+.datepicker-placeholder .datepicker-value { color: var(--color-text-subtle); }
+
+.datepicker-popover {
+  position:  absolute;
+  top:       calc(100% + var(--space-1));
+  left:      0;
+  z-index:   300;
+  box-shadow: var(--shadow-lg);
+  border-radius: var(--radius-md);
+  animation: datepicker-in var(--duration-fast) var(--ease-default);
+}
+@keyframes datepicker-in {
+  from { opacity: 0; transform: translateY(-4px); }
+  to   { opacity: 1; transform: translateY(0); }
+}

package/dist/css/components/card.css

@@ -0,0 +1,128 @@
+/* components/card.css */
+
+.card {
+  background-color: var(--color-surface);
+  border:           1px solid var(--color-border);
+  border-radius:    var(--radius-md);
+  box-shadow:       var(--shadow-sm);
+}
+
+
+/* --- Sections --- */
+
+.card-header {
+  display:          flex;
+  align-items:      center;
+  justify-content:  space-between;
+  padding:          var(--space-4) var(--space-6);
+  border-bottom:    1px solid var(--color-border);
+  gap:              var(--space-4);
+  background-color: var(--color-bg-subtle);
+  border-radius:    var(--radius-md) var(--radius-md) 0 0;
+}
+
+.card-title {
+  font-size:   var(--text-base);
+  font-weight: var(--font-semibold);
+  color:       var(--color-text);
+  margin:      0;
+}
+
+.card-subtitle {
+  font-size:  var(--text-sm);
+  color:      var(--color-text-muted);
+  margin:     var(--space-1) 0 0 0;
+}
+
+.card-header-actions {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-2);
+  flex-shrink: 0;
+}
+
+.card-body {
+  padding: var(--space-6);
+}
+
+.card-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);
+  background-color: var(--color-bg-subtle);
+  border-radius:    0 0 var(--radius-md) var(--radius-md);
+}
+
+.card-footer-left  { justify-content: flex-start;    }
+.card-footer-split { justify-content: space-between; }
+
+
+/* --- Variants --- */
+
+.card-flat   { box-shadow: none; }
+.card-raised { box-shadow: var(--shadow-lg); }
+
+.card-interactive {
+  cursor:     pointer;
+  transition: box-shadow   var(--duration-fast) var(--ease-default),
+              border-color var(--duration-fast) var(--ease-default),
+              transform    var(--duration-fast) var(--ease-default);
+}
+
+.card-interactive:hover {
+  box-shadow:   var(--shadow-lg);
+  border-color: var(--color-border-strong);
+}
+
+.card-interactive:active {
+  transform: translateY(1px);
+}
+
+.card-selected {
+  border-color: var(--color-primary);
+  box-shadow:   0 0 0 3px rgb(45 106 224 / 0.12);
+}
+
+
+/* --- Padding modifiers --- */
+
+.card-body-sm   { padding: var(--space-4); }
+.card-body-lg   { padding: var(--space-8); }
+.card-body-none { padding: 0; }
+
+.card-flush > .card-body { padding: 0; }
+
+
+/* --- Color variants --- */
+
+.card-subtle {
+  background-color: var(--color-bg-subtle);
+  box-shadow:       none;
+}
+
+.card-subtle .card-header {
+  background-color: transparent;
+}
+
+.card-info    { background-color: var(--color-info-bg);    border-color: var(--color-info);    }
+.card-success { background-color: var(--color-success-bg); border-color: var(--color-success); }
+.card-warning { background-color: var(--color-warning-bg); border-color: var(--color-warning); }
+.card-error   { background-color: var(--color-error-bg);   border-color: var(--color-error);   }
+
+.card-info .card-header,
+.card-success .card-header,
+.card-warning .card-header,
+.card-error .card-header {
+  background-color: transparent;
+}
+
+
+/* --- Grid layouts --- */
+
+.card-grid   { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); }
+.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
+.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
+.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }

package/dist/css/components/checkbox-radio.css

@@ -0,0 +1,105 @@
+/* components/checkbox-radio.css */
+
+/* ─── Checkbox ─── */
+.checkbox {
+  display:      inline-flex;
+  align-items:  center;
+  gap:          var(--space-2);
+  cursor:       pointer;
+  user-select:  none;
+}
+.checkbox input {
+  position: absolute;
+  opacity:  0;
+  width:    0;
+  height:   0;
+}
+.checkbox-box {
+  display:          inline-flex;
+  align-items:      center;
+  justify-content:  center;
+  width:            1.15rem;
+  height:           1.15rem;
+  border:           1.5px solid var(--color-border-strong, var(--color-border));
+  border-radius:    var(--radius-sm);
+  background:       var(--color-surface);
+  transition:       background var(--duration-fast) var(--ease-default),
+                    border-color var(--duration-fast) var(--ease-default);
+  flex-shrink:      0;
+}
+.checkbox-icon {
+  font-size:  1rem;
+  color:      var(--color-primary-text);
+  transform:  scale(0);
+  transition: transform var(--duration-fast) var(--ease-default);
+}
+.checkbox input:checked + .checkbox-box,
+.checkbox input:indeterminate + .checkbox-box {
+  background:   var(--color-primary);
+  border-color: var(--color-primary);
+}
+.checkbox input:checked + .checkbox-box .checkbox-icon,
+.checkbox input:indeterminate + .checkbox-box .checkbox-icon {
+  transform: scale(1);
+}
+.checkbox input:focus-visible + .checkbox-box {
+  outline:        2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.checkbox-label { font-size: var(--text-sm); color: var(--color-text); }
+.checkbox-disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ─── Radio ─── */
+.radio {
+  display:      inline-flex;
+  align-items:  center;
+  gap:          var(--space-2);
+  cursor:       pointer;
+  user-select:  none;
+}
+.radio input {
+  position: absolute;
+  opacity:  0;
+  width:    0;
+  height:   0;
+}
+.radio-circle {
+  display:          inline-flex;
+  align-items:      center;
+  justify-content:  center;
+  width:            1.15rem;
+  height:           1.15rem;
+  border:           1.5px solid var(--color-border-strong, var(--color-border));
+  border-radius:    var(--radius-full);
+  background:       var(--color-surface);
+  transition:       border-color var(--duration-fast) var(--ease-default);
+  flex-shrink:      0;
+}
+.radio-dot {
+  width:         0.55rem;
+  height:        0.55rem;
+  border-radius: var(--radius-full);
+  background:    var(--color-primary);
+  transform:     scale(0);
+  transition:    transform var(--duration-fast) var(--ease-default);
+}
+.radio input:checked + .radio-circle { border-color: var(--color-primary); }
+.radio input:checked + .radio-circle .radio-dot { transform: scale(1); }
+.radio input:focus-visible + .radio-circle {
+  outline:        2px solid var(--color-primary);
+  outline-offset: 2px;
+}
+.radio-label { font-size: var(--text-sm); color: var(--color-text); }
+.radio-disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* ─── Radio group ─── */
+.radio-group {
+  display:        flex;
+  flex-direction: column;
+  gap:            var(--space-2);
+}
+.radio-group-inline {
+  flex-direction: row;
+  flex-wrap:      wrap;
+  gap:            var(--space-4);
+}

package/dist/css/components/collapsible.css

@@ -0,0 +1,61 @@
+/* components/collapsible.css */
+
+/* ─── Chevron ─── */
+.chevron {
+  display:         inline-flex;
+  align-items:     center;
+  justify-content: center;
+  border:          none;
+  background:      none;
+  padding:         0;
+  cursor:          pointer;
+  color:           inherit;
+  font-size:       1.25em;
+  line-height:     1;
+  transition:      transform var(--duration-fast) var(--ease-default),
+                   opacity var(--duration-fast) var(--ease-default);
+}
+.chevron .material-symbols-outlined { font-size: inherit; }
+.chevron:disabled { opacity: 0.4; cursor: not-allowed; }
+
+/* Collapsed points right; expanded rotates. Default: right → down (90°). */
+.chevron-from-right.expanded { transform: rotate(90deg); }
+.chevron-from-down            { transform: rotate(90deg); }
+.chevron-from-down.expanded   { transform: rotate(0deg); }
+
+/* ─── Collapsible ─── */
+.collapsible { width: 100%; }
+
+.collapsible-trigger {
+  display:      flex;
+  align-items:  center;
+  gap:          var(--space-2);
+  width:        100%;
+  padding:      var(--space-2) 0;
+  border:       none;
+  background:   none;
+  font:         inherit;
+  color:        var(--color-text);
+  text-align:   left;
+  cursor:       pointer;
+}
+.collapsible-trigger:disabled { opacity: 0.5; cursor: not-allowed; }
+
+/* Visual-only chevron inside the trigger button */
+.collapsible-chevron {
+  flex-shrink: 0;
+  color:       var(--color-text-muted);
+  transition:  transform var(--duration-fast) var(--ease-default);
+}
+.collapsible-chevron.expanded { transform: rotate(90deg); }
+
+.collapsible-title {
+  font-size:   var(--text-sm);
+  font-weight: var(--font-medium);
+}
+
+.collapsible-content {
+  padding:     var(--space-2) 0 var(--space-3) calc(1.25em + var(--space-2));
+  color:       var(--color-text);
+  font-size:   var(--text-sm);
+}

package/dist/css/components/divider.css

@@ -0,0 +1,42 @@
+/* components/divider.css */
+
+.divider {
+  border:     none;
+  border-top: 1px solid var(--color-border);
+  margin:     var(--space-4) 0;
+}
+
+.divider-strong {
+  border-color: var(--color-border-strong);
+}
+
+.divider-vertical {
+  border:        none;
+  border-left:   1px solid var(--color-border);
+  height:        1rem;
+  align-self:    center;
+  margin:        0 var(--space-2);
+  display:       inline-block;
+}
+
+/* --- Labeled divider --- */
+.divider-labeled {
+  display:     flex;
+  align-items: center;
+  gap:         var(--space-3);
+  margin:      var(--space-4) 0;
+}
+.divider-line {
+  flex:       1;
+  height:     1px;
+  background: var(--color-border);
+}
+.divider-line.divider-strong { background: var(--color-border-strong); }
+.divider-text {
+  font-size:      var(--text-xs);
+  font-weight:    var(--font-semibold);
+  color:          var(--color-text-subtle);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wide);
+  white-space:    nowrap;
+}