@morscherlab/mld-sdk 0.6.0

package/src/styles/components/alert-box.css

@@ -0,0 +1,94 @@
+/* AlertBox Component Styles */
+
+.mld-alert {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid;
+  border-radius: 0.5rem;
+}
+
+.mld-alert--success {
+  background-color: var(--mld-success-bg);
+  border-color: rgba(16, 185, 129, 0.3);
+}
+
+.mld-alert--error {
+  background-color: var(--mld-error-bg);
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.mld-alert--warning {
+  background-color: var(--mld-warning-bg);
+  border-color: rgba(245, 158, 11, 0.3);
+}
+
+.mld-alert--info {
+  background-color: var(--mld-info-bg);
+  border-color: rgba(59, 130, 246, 0.3);
+}
+
+.mld-alert__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex-shrink: 0;
+}
+
+.mld-alert__icon--success {
+  color: var(--mld-success);
+}
+
+.mld-alert__icon--error {
+  color: var(--mld-error);
+}
+
+.mld-alert__icon--warning {
+  color: var(--mld-warning);
+}
+
+.mld-alert__icon--info {
+  color: var(--color-primary);
+}
+
+.mld-alert__content {
+  flex: 1;
+  min-width: 0;
+}
+
+.mld-alert__title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-top: 0 !important;
+  margin-bottom: 0.25rem !important;
+  padding: 0 !important;
+}
+
+.mld-alert__message {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+  padding: 0 !important;
+}
+
+.mld-alert__dismiss {
+  padding: 0.25rem;
+  border-radius: 0.375rem;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+
+.mld-alert__dismiss:hover {
+  color: var(--text-primary);
+  background-color: var(--bg-tertiary);
+}
+
+.mld-alert__dismiss-icon {
+  width: 1rem;
+  height: 1rem;
+}

package/src/styles/components/app-container.css

@@ -0,0 +1,32 @@
+/* Base: shared by both roles */
+.mld-container {
+  flex: 1;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+/* Card role (default — no direction prop) */
+.mld-container--card {
+  border-radius: var(--radius-lg, 0.75rem);
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  border: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
+  background-color: var(--bg-card, var(--mld-bg-card, #ffffff));
+}
+
+.mld-container--scrollable {
+  overflow-y: auto;
+}
+
+/* Layout role (direction prop set) */
+.mld-container--layout {
+  display: flex;
+}
+
+.mld-container--row {
+  flex-direction: row;
+}
+
+.mld-container--column {
+  flex-direction: column;
+}

package/src/styles/components/app-layout.css

@@ -0,0 +1,99 @@
+/* AppLayout Component Styles */
+
+.mld-layout {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.mld-layout__topbar {
+  flex-shrink: 0;
+}
+
+.mld-layout__body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.mld-layout--sidebar-right .mld-layout__body {
+  flex-direction: row-reverse;
+}
+
+.mld-layout__sidebar {
+  flex-shrink: 0;
+  overflow: hidden;
+  max-width: 24rem;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Hide layout wrapper when inner sidebar is hidden (no panels for active view) */
+.mld-layout__sidebar:has(.mld-sidebar--hidden) {
+  display: none;
+}
+
+.mld-layout__main {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Strip topbar card variant inside layout — layout handles containment */
+.mld-layout .mld-topbar--card {
+  margin: 0;
+  width: 100%;
+  border-radius: 0;
+  box-shadow: none;
+  border: none;
+  border-bottom: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
+}
+
+/* Floating variant: all sections appear as separate cards on a background */
+.mld-layout--floating {
+  background-color: var(--bg-primary, var(--mld-bg-primary, #f8fafc));
+  padding: 1rem;
+  gap: 1rem;
+}
+
+.mld-layout--floating .mld-layout__topbar {
+  border-radius: var(--radius-lg, 0.75rem);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  border: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
+}
+
+.mld-layout--floating .mld-layout__body {
+  gap: 1rem;
+}
+
+.mld-layout--floating .mld-layout__sidebar {
+  border-radius: var(--radius-lg, 0.75rem);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  border: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
+  background-color: var(--bg-secondary, var(--mld-bg-secondary, #f8f9fb));
+}
+
+.mld-layout--floating .mld-layout__main {
+  gap: 1rem;
+}
+
+/* In floating mode, inner components don't need borders since the wrapper provides them */
+.mld-layout--floating .mld-sidebar {
+  border-right: none;
+  border-left: none;
+}
+
+.mld-layout--floating .mld-topbar {
+  border: none;
+  border-bottom: none;
+  margin: 0;
+  width: 100%;
+  border-radius: 0;
+  box-shadow: none;
+}

package/src/styles/components/app-sidebar.css

@@ -0,0 +1,133 @@
+/* AppSidebar Component Styles */
+
+.mld-sidebar {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background-color: var(--bg-secondary, var(--mld-bg-card, #f8f9fb));
+}
+
+.mld-sidebar--hidden {
+  display: none;
+}
+
+.mld-sidebar--right:not(.mld-sidebar--floating) {
+  border-right: none;
+  border-left: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
+}
+
+.mld-sidebar--floating {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  border: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
+  border-radius: 0.75rem;
+  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
+  z-index: 40;
+}
+
+.mld-sidebar--floating.mld-sidebar--left {
+  left: 0;
+}
+
+.mld-sidebar--floating.mld-sidebar--right {
+  right: 0;
+}
+
+.mld-sidebar--static {
+  height: 100%;
+  border-right: 1px solid var(--border-color, var(--mld-border, #e5e7eb));
+}
+
+/* Header / Footer slots */
+.mld-sidebar__header {
+  padding: 0.75rem;
+  flex-shrink: 0;
+}
+
+.mld-sidebar__footer {
+  padding: 0.75rem;
+  flex-shrink: 0;
+}
+
+/* Scrollable sections area */
+.mld-sidebar__sections {
+  flex: 1 1 0;
+  min-height: 0;
+  overflow-y: auto;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+/* CollapsibleCard appearance inside sidebar */
+.mld-sidebar__sections > .mld-collapsible-card {
+  flex-shrink: 0;
+  border: 1px solid var(--border-color-soft, rgba(0, 0, 0, 0.06));
+  border-radius: var(--radius-md, 0.75rem);
+  background-color: var(--bg-card, #ffffff);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__header {
+  padding: 0.625rem 0.75rem;
+  min-height: auto;
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__icon-badge {
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5rem;
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__icon {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__icon-text {
+  font-size: 1.125rem;
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__title {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__subtitle {
+  font-size: 0.6875rem;
+  color: var(--text-muted);
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__chevron {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__toggle-track {
+  width: 1.75rem;
+  height: 1rem;
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__toggle-knob {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__toggle-knob--on {
+  transform: translateX(0.75rem);
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__body {
+  border-top: none;
+}
+
+.mld-sidebar__sections > .mld-collapsible-card .mld-collapsible-card__content {
+  padding: 0 0.75rem 0.75rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}