@morscherlab/mint-sdk 1.0.0-alpha.2

package/src/styles/components/step-wizard.css

@@ -0,0 +1,192 @@
+.mld-wizard {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+  outline: none;
+  flex: 1;
+  min-height: 0;
+}
+
+/* Progress indicator */
+.mld-wizard__progress {
+  flex-shrink: 0;
+}
+
+.mld-wizard__steps-indicator {
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+}
+
+.mld-wizard__step-connector {
+  flex: 1;
+  height: 2px;
+  background-color: var(--border-color);
+  margin-top: 1rem;
+  transition: background-color 0.2s ease;
+}
+
+.mld-wizard__step-connector--completed {
+  background-color: var(--mint-success);
+}
+
+.mld-wizard__step-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  min-width: 4rem;
+}
+
+.mld-wizard__step-indicator--disabled {
+  cursor: not-allowed;
+  opacity: var(--mint-disabled-opacity);
+}
+
+.mld-wizard__step-dot {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 9999px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 600;
+  border: 2px solid var(--border-color);
+  background-color: var(--bg-secondary);
+  color: var(--text-muted);
+  transition: all 0.2s ease;
+}
+
+/* Size variants for dot */
+.mld-wizard--sm .mld-wizard__step-dot {
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.625rem;
+}
+
+.mld-wizard--lg .mld-wizard__step-dot {
+  width: 2.5rem;
+  height: 2.5rem;
+  font-size: 0.875rem;
+}
+
+.mld-wizard__step-indicator--active .mld-wizard__step-dot {
+  border-color: var(--color-primary);
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.mld-wizard__step-indicator--completed .mld-wizard__step-dot {
+  border-color: var(--mint-success);
+  background-color: var(--mint-success);
+  color: white;
+}
+
+.mld-wizard__step-label {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.mld-wizard__step-indicator--active .mld-wizard__step-label {
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.mld-wizard__step-indicator--completed .mld-wizard__step-label {
+  color: var(--text-secondary);
+}
+
+/* Body */
+.mld-wizard__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+/* Navigation */
+.mld-wizard__navigation {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.mld-wizard__nav-btn {
+  padding: 0.5rem 1rem;
+  border-radius: var(--radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.15s ease, color 0.15s ease;
+  border: none;
+}
+
+.mld-wizard__nav-btn:disabled {
+  opacity: var(--mint-disabled-opacity);
+  cursor: not-allowed;
+}
+
+.mld-wizard__nav-btn--cancel {
+  background: transparent;
+  color: var(--text-muted);
+}
+
+.mld-wizard__nav-btn--cancel:hover:not(:disabled) {
+  color: var(--text-primary);
+}
+
+.mld-wizard__nav-btn--back {
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+}
+
+.mld-wizard__nav-btn--back:hover:not(:disabled) {
+  background-color: var(--bg-hover);
+}
+
+.mld-wizard__nav-btn--next {
+  background-color: var(--color-primary);
+  color: white;
+}
+
+.mld-wizard__nav-btn--next:hover:not(:disabled) {
+  background-color: var(--color-primary-hover);
+}
+
+.mld-wizard__nav-btn--finish {
+  background-color: var(--mint-success);
+  color: white;
+}
+
+.mld-wizard__nav-btn--finish:hover:not(:disabled) {
+  opacity: 0.9;
+}
+
+/* Size variants for connector alignment */
+.mld-wizard--sm .mld-wizard__step-connector {
+  margin-top: 0.75rem;
+}
+
+.mld-wizard--lg .mld-wizard__step-connector {
+  margin-top: 1.25rem;
+}
+
+.mld-wizard--sm .mld-wizard__step-label {
+  font-size: 0.625rem;
+}
+
+.mld-wizard--sm .mld-wizard__nav-btn {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.75rem;
+}
+
+.mld-wizard--lg .mld-wizard__nav-btn {
+  padding: 0.625rem 1.25rem;
+  font-size: 1rem;
+}

package/src/styles/components/tabs.css

@@ -0,0 +1,95 @@
+/* BaseTabs Component Styles */
+
+.mld-tabs {
+  display: flex;
+}
+
+.mld-tabs--underline {
+  border-bottom: 1px solid var(--border-color);
+}
+
+.mld-tabs--pills {
+  gap: 0.5rem;
+  padding: 0.25rem;
+  background-color: var(--bg-tertiary);
+  border-radius: var(--radius-md);
+}
+
+/* 1px optical padding shift (0.16+). See CLAUDE.md § Optical Centering. */
+.mld-tab {
+  padding: 0.4375rem 1rem 0.5625rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: color 0.15s ease, background-color 0.15s ease, border-color 0.15s ease;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+
+.mld-tab:focus {
+  outline: none;
+}
+
+.mld-tab:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+.mld-tab--disabled {
+  color: var(--text-muted);
+  cursor: not-allowed;
+}
+
+/* Underline variant */
+.mld-tabs--underline .mld-tab {
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+  color: var(--text-secondary);
+}
+
+.mld-tabs--underline .mld-tab:hover:not(.mld-tab--disabled) {
+  color: var(--text-primary);
+}
+
+.mld-tabs--underline .mld-tab--active {
+  border-bottom-color: var(--color-primary);
+  color: var(--color-primary);
+}
+
+/* Pills variant — visually identical to SegmentedControl card */
+.mld-tabs--pills .mld-tab {
+  border-radius: var(--radius);
+  color: var(--text-muted);
+  background-color: transparent;
+}
+
+.mld-tabs--pills .mld-tab:hover:not(.mld-tab--disabled):not(.mld-tab--active) {
+  color: var(--text-primary);
+  background-color: var(--bg-hover);
+}
+
+.mld-tabs--pills .mld-tab--active {
+  background-color: var(--bg-card);
+  color: var(--text-primary);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* Tab content */
+.mld-tab__content {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.mld-tab__icon {
+  color: currentColor;
+}
+
+.mld-tab__badge {
+  margin-left: 0.25rem;
+  padding: 0.125rem 0.375rem;
+  font-size: 0.75rem;
+  border-radius: 9999px;
+  background-color: var(--color-primary-soft, rgba(99, 102, 241, 0.12));
+  color: var(--color-primary);
+}

package/src/styles/components/tags-input.css

@@ -0,0 +1,195 @@
+/* TagsInput Component Styles */
+
+.mld-tags-input {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  position: relative;
+}
+
+/* ---------- Category switcher (variant="categorized") ---------- */
+
+.mld-tags-input__categories {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.mld-tags-input__category {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.1875rem 0.5rem;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  background: transparent;
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+
+.mld-tags-input__category:disabled { cursor: not-allowed; opacity: var(--mint-disabled-opacity); }
+
+/* Inactive (color-muted bg, color-muted text) per variant */
+.mld-tags-input__category--primary { color: var(--color-primary-hover); border-color: var(--color-primary-soft); }
+.mld-tags-input__category--success { color: var(--mint-success-hover); border-color: var(--mint-success-bg); }
+.mld-tags-input__category--warning { color: var(--mint-warning-hover); border-color: var(--mint-warning-bg); }
+.mld-tags-input__category--error   { color: var(--mint-error-hover);   border-color: var(--mint-error-bg); }
+.mld-tags-input__category--info    { color: var(--color-primary-hover); border-color: var(--mint-info-bg); }
+.mld-tags-input__category--neutral { color: var(--text-secondary);    border-color: var(--border-color); }
+
+/* Active: semantic-tinted bg */
+.mld-tags-input__category--active.mld-tags-input__category--primary { background: var(--color-primary-soft); }
+.mld-tags-input__category--active.mld-tags-input__category--success { background: var(--mint-success-bg); }
+.mld-tags-input__category--active.mld-tags-input__category--warning { background: var(--mint-warning-bg); }
+.mld-tags-input__category--active.mld-tags-input__category--error   { background: var(--mint-error-bg); }
+.mld-tags-input__category--active.mld-tags-input__category--info    { background: var(--mint-info-bg); }
+.mld-tags-input__category--active.mld-tags-input__category--neutral { background: var(--bg-secondary); }
+
+/* ---------- Field — Clean Bordered DNA ---------- */
+
+.mld-tags-input__field {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.25rem 0.5rem;
+  min-height: var(--form-height-md);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 0.5rem;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  cursor: text;
+}
+
+.mld-tags-input--sm .mld-tags-input__field { min-height: var(--form-height-sm); }
+.mld-tags-input--md .mld-tags-input__field { min-height: var(--form-height-md); }
+.mld-tags-input--lg .mld-tags-input__field { min-height: var(--form-height-lg); }
+
+.mld-tags-input__field:hover { border-color: var(--text-muted); }
+.mld-tags-input__field:focus-within {
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring-soft);
+}
+
+.mld-tags-input--error .mld-tags-input__field {
+  border-color: var(--mint-error);
+}
+.mld-tags-input--error .mld-tags-input__field:focus-within {
+  box-shadow: var(--focus-ring-soft-error);
+}
+
+.mld-tags-input--disabled .mld-tags-input__field {
+  opacity: var(--mint-disabled-opacity);
+  background-color: var(--bg-secondary);
+  cursor: not-allowed;
+}
+
+/* ---------- Tag pill ---------- */
+
+.mld-tags-input__tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0.125rem 0.5rem;
+  background: var(--color-primary-soft);
+  color: var(--color-primary-hover);
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+/* Categorized color variants */
+.mld-tags-input__tag--success { background: var(--mint-success-bg); color: var(--mint-success-hover); }
+.mld-tags-input__tag--warning { background: var(--mint-warning-bg); color: var(--mint-warning-hover); }
+.mld-tags-input__tag--error   { background: var(--mint-error-bg);   color: var(--mint-error-hover); }
+.mld-tags-input__tag--info    { background: var(--mint-info-bg);    color: var(--color-primary-hover); }
+.mld-tags-input__tag--neutral { background: var(--bg-secondary);   color: var(--text-secondary); }
+
+.mld-tags-input__tag--sm { font-size: 0.6875rem; padding: 0.0625rem 0.4375rem; }
+.mld-tags-input__tag--md { font-size: 0.75rem; }
+.mld-tags-input__tag--lg { font-size: 0.8125rem; padding: 0.1875rem 0.625rem; }
+
+.mld-tags-input__tag-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.0625rem;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: inherit;
+  opacity: 0.6;
+  transition: opacity 0.15s ease;
+}
+
+.mld-tags-input__tag-remove:hover { opacity: 1; }
+
+.mld-tags-input__tag-remove-icon {
+  width: 0.625rem;
+  height: 0.625rem;
+}
+
+/* ---------- Input (grows to fill) ---------- */
+
+.mld-tags-input__input {
+  flex: 1;
+  min-width: 6rem;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  padding: 0.125rem 0;
+}
+
+.mld-tags-input__input:disabled { cursor: not-allowed; }
+
+.mld-tags-input--sm .mld-tags-input__input { font-size: 0.8125rem; }
+.mld-tags-input--lg .mld-tags-input__input { font-size: 1rem; }
+
+/* ---------- Autocomplete dropdown ---------- */
+
+.mld-tags-input__dropdown {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--bg-card);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-md);
+  z-index: 50;
+  max-height: 14rem;
+  overflow-y: auto;
+  padding: 0.25rem;
+}
+
+.mld-tags-input__dropdown-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 0.375rem 0.625rem;
+  border: none;
+  background: transparent;
+  color: var(--text-primary);
+  font-size: 0.8125rem;
+  text-align: left;
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background-color 0.1s ease;
+}
+
+.mld-tags-input__dropdown-item:hover,
+.mld-tags-input__dropdown-item--highlighted {
+  background-color: var(--bg-secondary);
+}
+
+.mld-tags-input__dropdown-count {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+  font-variant-numeric: tabular-nums;
+}

package/src/styles/components/textarea.css

@@ -0,0 +1,82 @@
+/* BaseTextarea Component Styles */
+
+.mld-textarea {
+  display: block;
+  width: 100%;
+  font-family: inherit;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  color: var(--text-primary);
+  background-color: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: var(--radius-md);
+  outline: none;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  resize: vertical;
+  min-height: 5rem;
+  box-sizing: border-box;
+}
+
+.mld-textarea::placeholder {
+  color: var(--text-muted);
+}
+
+.mld-textarea:hover:not(:focus-visible):not(.mld-textarea--disabled):not(.mld-textarea--error) {
+  border-color: var(--text-muted);
+}
+
+.mld-textarea:focus,
+.mld-textarea:focus-visible {
+  border-color: var(--color-primary);
+  box-shadow: var(--focus-ring-soft);
+}
+
+.mld-textarea--error {
+  border-color: var(--mint-error);
+}
+
+.mld-textarea--error:focus,
+.mld-textarea--error:focus-visible {
+  box-shadow: var(--focus-ring-soft-error);
+}
+
+.mld-textarea--disabled,
+.mld-textarea:disabled {
+  background-color: var(--bg-tertiary);
+  color: var(--text-muted);
+  cursor: not-allowed;
+  resize: none;
+}
+
+/* Size variants — 1px optical padding shift (0.16+).
+   See CLAUDE.md § Optical Centering. */
+.mld-textarea--sm {
+  padding: 0.3125rem 0.625rem 0.4375rem;
+  font-size: 0.8125rem;
+}
+
+.mld-textarea--md {
+  padding: 0.4375rem 0.75rem 0.5625rem;
+  font-size: 0.875rem;
+}
+
+.mld-textarea--lg {
+  padding: 0.6875rem 1rem 0.8125rem;
+  font-size: 1rem;
+}
+
+.mld-textarea--resize-none {
+  resize: none;
+}
+
+.mld-textarea--resize-vertical {
+  resize: vertical;
+}
+
+.mld-textarea--resize-horizontal {
+  resize: horizontal;
+}
+
+.mld-textarea--resize-both {
+  resize: both;
+}

package/src/styles/components/theme-toggle.css

@@ -0,0 +1,69 @@
+/* ThemeToggle Component Styles */
+
+.mld-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  background-color: transparent;
+  color: var(--text-secondary);
+  border: none;
+  cursor: pointer;
+  transition:
+    color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    background-color 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)),
+    transform 0.15s var(--mint-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1));
+  transform: translateY(0);
+}
+
+.mld-theme-toggle:hover {
+  background-color: var(--bg-tertiary);
+  color: var(--text-primary);
+  transform: translateY(-1px);
+}
+
+.mld-theme-toggle:active {
+  transform: translateY(0);
+  transition-duration: 0.05s;
+}
+
+.mld-theme-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .mld-theme-toggle,
+  .mld-theme-toggle:hover,
+  .mld-theme-toggle:active {
+    transform: none;
+    transition: color 0.15s ease, background-color 0.15s ease;
+  }
+}
+
+.mld-theme-toggle--sm {
+  padding: 0.375rem;
+}
+
+.mld-theme-toggle--md {
+  padding: 0.5rem;
+}
+
+.mld-theme-toggle--lg {
+  padding: 0.75rem;
+}
+
+.mld-theme-toggle__icon--sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.mld-theme-toggle__icon--md {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.mld-theme-toggle__icon--lg {
+  width: 1.5rem;
+  height: 1.5rem;
+}