@marwes-ui/presets 1.2.0 → 1.4.0

package/src/firstEdition/spinner.css

@@ -14,7 +14,7 @@
 
 .mw-spinner {
   --mw-spinner-size: 24px;
-  --mw-spinner-track-color: var(--mw-color-text-muted, #a3a3a3);
+  --mw-spinner-track-color: #a3a3a3;
   --mw-spinner-indicator-color: var(--mw-color-primary-base, #2f31fc);
   --mw-spinner-rotation-duration: 800ms;
 
@@ -34,10 +34,17 @@
   transform-origin: center;
 }
 
-.mw-spinner--cross .mw-spinner__svg {
+/* ── Segment-shift variants (no SVG rotation, individual opacity cycling) ── */
+
+.mw-spinner--cross .mw-spinner__svg,
+.mw-spinner--dots-round .mw-spinner__svg,
+.mw-spinner--dots-square .mw-spinner__svg,
+.mw-spinner--lines .mw-spinner__svg {
   animation: none;
 }
 
+/* Cross — 4 segments */
+
 .mw-spinner--cross .mw-spinner__svg rect {
   animation: mw-spinner-cross-shift var(--mw-spinner-rotation-duration) steps(4, end) infinite;
 }
@@ -54,6 +61,108 @@
   animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
 }
 
+/* Dots-round — 8 circle segments */
+
+.mw-spinner--dots-round .mw-spinner__svg circle {
+  animation: mw-spinner-segment-shift-8 var(--mw-spinner-rotation-duration) steps(8, end) infinite;
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(2) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.875);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(3) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.75);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(4) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.625);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(5) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.5);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(6) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.375);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(7) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
+}
+
+.mw-spinner--dots-round .mw-spinner__svg circle:nth-child(8) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.125);
+}
+
+/* Dots-square — 8 rect segments */
+
+.mw-spinner--dots-square .mw-spinner__svg rect {
+  animation: mw-spinner-segment-shift-8 var(--mw-spinner-rotation-duration) steps(8, end) infinite;
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(2) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.875);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(3) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.75);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(4) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.625);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(5) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.5);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(6) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.375);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(7) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
+}
+
+.mw-spinner--dots-square .mw-spinner__svg rect:nth-child(8) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.125);
+}
+
+/* Lines — 8 rect segments */
+
+.mw-spinner--lines .mw-spinner__svg rect {
+  animation: mw-spinner-segment-shift-8 var(--mw-spinner-rotation-duration) steps(8, end) infinite;
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(2) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.875);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(3) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.75);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(4) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.625);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(5) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.5);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(6) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.375);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(7) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.25);
+}
+
+.mw-spinner--lines .mw-spinner__svg rect:nth-child(8) {
+  animation-delay: calc(var(--mw-spinner-rotation-duration) * -0.125);
+}
+
 @keyframes mw-spinner-rotate {
   from {
     transform: rotate(0deg);
@@ -83,12 +192,50 @@
   }
 }
 
+@keyframes mw-spinner-segment-shift-8 {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  12.5% {
+    opacity: 0.875;
+  }
+
+  25% {
+    opacity: 0.75;
+  }
+
+  37.5% {
+    opacity: 0.625;
+  }
+
+  50% {
+    opacity: 0.5;
+  }
+
+  62.5% {
+    opacity: 0.375;
+  }
+
+  75% {
+    opacity: 0.25;
+  }
+
+  87.5% {
+    opacity: 0.125;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   .mw-spinner__svg {
     animation-duration: 1600ms;
   }
 
-  .mw-spinner--cross .mw-spinner__svg rect {
+  .mw-spinner--cross .mw-spinner__svg rect,
+  .mw-spinner--dots-round .mw-spinner__svg circle,
+  .mw-spinner--dots-square .mw-spinner__svg rect,
+  .mw-spinner--lines .mw-spinner__svg rect {
     animation-duration: 1600ms;
   }
 }

package/src/firstEdition/stat-tile.css

@@ -23,41 +23,42 @@
   padding: var(--mw-spacing-sp-24, 24px);
   color: var(--mw-stat-tile-text);
   background: var(--mw-stat-tile-surface);
-  border: 1px solid var(--mw-stat-tile-border);
+  border: none;
   border-radius: var(--mw-stat-tile-radius);
+  box-shadow: inset 0 0 0 1px var(--mw-stat-tile-border);
   font-family: var(--mw-font-primary, inherit);
 }
 
 .mw-stat-tile--brand {
-  --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #eeeeff);
-  --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #ababfd);
-  --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #1b1d97);
-  --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #1b1d97);
-  --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #2527ca);
+  --mw-stat-tile-surface: var(--mw-color-status-info-background, #eeeeff);
+  --mw-stat-tile-border: var(--mw-color-status-info-border-strong, #5859fc);
+  --mw-stat-tile-text: var(--mw-color-status-info-text, #1b1d97);
+  --mw-stat-tile-muted: var(--mw-color-status-info-text, #1b1d97);
+  --mw-stat-tile-trend: var(--mw-color-status-info-icon, #2f31fc);
 }
 
 .mw-stat-tile--success {
-  --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #e6f4ed);
-  --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #90caad);
-  --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #006633);
-  --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #006633);
-  --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #006d48);
+  --mw-stat-tile-surface: var(--mw-color-status-success-background, #e6f4ed);
+  --mw-stat-tile-border: var(--mw-color-status-success-border-strong, #2e9970);
+  --mw-stat-tile-text: var(--mw-color-status-success-text, #006633);
+  --mw-stat-tile-muted: var(--mw-color-status-success-text, #006633);
+  --mw-stat-tile-trend: var(--mw-color-status-success-icon, #006d48);
 }
 
 .mw-stat-tile--warning {
-  --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #fff8e6);
-  --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #fde08a);
-  --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #b45309);
-  --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #b45309);
-  --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #b45309);
+  --mw-stat-tile-surface: var(--mw-color-status-warning-background, #fff8e6);
+  --mw-stat-tile-border: var(--mw-color-status-warning-border-strong, #e46f00);
+  --mw-stat-tile-text: var(--mw-color-status-warning-text, #b45309);
+  --mw-stat-tile-muted: var(--mw-color-status-warning-text, #b45309);
+  --mw-stat-tile-trend: var(--mw-color-status-warning-text, #b45309);
 }
 
 .mw-stat-tile--danger {
-  --mw-stat-tile-surface: var(--mw-stat-tile-tone-surface, #ffe8eb);
-  --mw-stat-tile-border: var(--mw-stat-tile-tone-border, #ff8a95);
-  --mw-stat-tile-text: var(--mw-stat-tile-tone-text, #a8031f);
-  --mw-stat-tile-muted: var(--mw-stat-tile-tone-muted, #a8031f);
-  --mw-stat-tile-trend: var(--mw-stat-tile-tone-trend, #a8031f);
+  --mw-stat-tile-surface: var(--mw-color-status-error-background, #ffe8eb);
+  --mw-stat-tile-border: var(--mw-color-status-error-border-strong, #ff2847);
+  --mw-stat-tile-text: var(--mw-color-status-error-text, #a8031f);
+  --mw-stat-tile-muted: var(--mw-color-status-error-text, #a8031f);
+  --mw-stat-tile-trend: var(--mw-color-status-error-text, #a8031f);
 }
 
 .mw-stat-tile__header {
@@ -135,3 +136,35 @@
   --mw-stat-tile-text: var(--mw-color-text, #f9fafb);
   --mw-stat-tile-muted: var(--mw-color-text-muted, #a3a3a3);
 }
+
+.mw-theme--dark .mw-stat-tile--brand {
+  --mw-stat-tile-surface: var(--mw-color-status-info-background, #040519);
+  --mw-stat-tile-border: var(--mw-color-status-info-border-strong, #252599);
+  --mw-stat-tile-text: var(--mw-color-status-info-text, #ababfd);
+  --mw-stat-tile-muted: var(--mw-color-status-info-text, #ababfd);
+  --mw-stat-tile-trend: var(--mw-color-status-info-icon, #8182fc);
+}
+
+.mw-theme--dark .mw-stat-tile--success {
+  --mw-stat-tile-surface: var(--mw-color-status-success-background, #001a0c);
+  --mw-stat-tile-border: var(--mw-color-status-success-border-strong, #006d48);
+  --mw-stat-tile-text: var(--mw-color-status-success-text, #90caad);
+  --mw-stat-tile-muted: var(--mw-color-status-success-text, #90caad);
+  --mw-stat-tile-trend: var(--mw-color-status-success-icon, #5db189);
+}
+
+.mw-theme--dark .mw-stat-tile--warning {
+  --mw-stat-tile-surface: var(--mw-color-status-warning-background, #221004);
+  --mw-stat-tile-border: var(--mw-color-status-warning-border-strong, #b45308);
+  --mw-stat-tile-text: var(--mw-color-status-warning-text, #fcc94a);
+  --mw-stat-tile-muted: var(--mw-color-status-warning-text, #fcc94a);
+  --mw-stat-tile-trend: var(--mw-color-status-warning-icon, #f9b21a);
+}
+
+.mw-theme--dark .mw-stat-tile--danger {
+  --mw-stat-tile-surface: var(--mw-color-status-error-background, #240006);
+  --mw-stat-tile-border: var(--mw-color-status-error-border-strong, #ff2847);
+  --mw-stat-tile-text: var(--mw-color-status-error-text, #ff5566);
+  --mw-stat-tile-muted: var(--mw-color-status-error-text, #ff5566);
+  --mw-stat-tile-trend: var(--mw-color-status-error-icon, #ff2847);
+}

package/src/firstEdition/styles.css

@@ -5,15 +5,24 @@
  * Each component has its own CSS file for better organization.
  */
 
+@import "@fontsource/instrument-sans/400.css";
+@import "@fontsource/instrument-sans/500.css";
+@import "@fontsource/instrument-sans/600.css";
+@import "@fontsource/instrument-sans/700.css";
+
 @import "./tokens.css";
 
 @import "./accordion.css";
 @import "./avatar.css";
 @import "./card.css";
+@import "./context-menu.css";
+@import "./breadcrumb.css";
 @import "./dialog.css";
+@import "./drawer.css";
 @import "./toast.css";
 @import "./tooltip.css";
 @import "./badge.css";
+@import "./banner.css";
 @import "./button.css";
 @import "./input.css";
 @import "./input-otp.css";
@@ -25,6 +34,7 @@
 @import "./divider.css";
 @import "./spinner.css";
 @import "./skeleton.css";
+@import "./progress-bar.css";
 @import "./stat-tile.css";
 @import "./date-picker.css";
 @import "./spacing.css";
@@ -32,16 +42,26 @@
 @import "./switch.css";
 @import "./slider.css";
 @import "./tab.css";
+@import "./segmented-control.css";
+@import "./pagination.css";
+@import "./skip-link.css";
 @import "./typography.css";
 
 /* Molecules */
 @import "./molecules/accordion-field.css";
 @import "./molecules/checkbox-field.css";
 @import "./molecules/checkbox-group-field.css";
+@import "./molecules/date-picker-field.css";
 @import "./molecules/dialog-modal.css";
+@import "./molecules/pagination-field.css";
+@import "./molecules/segmented-control-field.css";
 @import "./molecules/input-field.css";
+@import "./molecules/input-otp-field.css";
 @import "./molecules/radio-group-field.css";
 @import "./molecules/slider-field.css";
 @import "./molecules/switch-field.css";
 @import "./molecules/tab-group.css";
 @import "./molecules/toast-container.css";
+
+/* Personality signatures — opt-in visual identity, no-op unless selected. */
+@import "./personality.css";

package/src/firstEdition/switch.css

@@ -12,16 +12,16 @@
  */
 
 .mw-switch {
-  --mw-switch-track-off: var(--mw-color-border-subtle);
-  --mw-switch-track-off-hover: color-mix(in srgb, var(--mw-color-border) 60%, var(--mw-color-text));
+  --mw-switch-track-off: var(--mw-color-border-low);
+  --mw-switch-track-off-hover: var(--mw-color-border-strong);
   --mw-switch-track-off-active: var(--mw-color-border);
   --mw-switch-track-off-disabled: var(--mw-color-border-disabled);
   --mw-switch-track-on: var(--mw-color-primary-base, #2f31fc);
   --mw-switch-track-on-hover: var(--mw-color-primary-hover, #2527ca);
   --mw-switch-track-on-active: var(--mw-color-primary-pressed, #1b1d97);
   --mw-switch-track-on-disabled: var(--mw-color-primary-disabled, #8182fc);
-  --mw-switch-thumb-off: var(--mw-color-surface);
-  --mw-switch-thumb-off-disabled: var(--mw-color-surface-disabled);
+  --mw-switch-thumb-off: var(--mw-color-surface-primary);
+  --mw-switch-thumb-off-disabled: var(--mw-color-surface-subtle);
   --mw-switch-thumb-on: var(--mw-color-primary-label);
   --mw-switch-thumb-on-disabled: var(--mw-color-primary-label-disabled);
   --mw-switch-label: var(--mw-color-text);

package/src/firstEdition/tab.css

@@ -7,14 +7,14 @@
  */
 
 .mw-tab {
-  --mw-tab-surface: var(--mw-color-surface-elevated);
-  --mw-tab-surface-hover: var(--mw-color-surface-subtle);
-  --mw-tab-surface-pressed: var(--mw-color-border-subtle);
-  --mw-tab-label: var(--mw-color-text-muted);
+  --mw-tab-surface: var(--mw-color-surface, transparent);
+  --mw-tab-surface-hover: color-mix(in srgb, var(--mw-color-text, #000000) 5%, transparent);
+  --mw-tab-surface-pressed: color-mix(in srgb, var(--mw-color-text, #000000) 10%, transparent);
+  --mw-tab-label: var(--mw-color-text-muted, #595959);
   --mw-tab-label-active: var(--mw-color-text, #141414);
   --mw-tab-label-disabled: var(--mw-color-text-disabled);
-  --mw-tab-indicator: var(--mw-color-primary-base, #2f31fc);
-  --mw-tab-indicator-disabled: var(--mw-color-border-disabled);
+  --mw-tab-indicator: var(--mw-color-border-brand, #2f31fc);
+  --mw-tab-indicator-disabled: var(--mw-color-border-low);
 
   appearance: none;
   position: relative;
@@ -70,10 +70,10 @@
 }
 
 .mw-theme--dark .mw-tab {
-  --mw-tab-surface: var(--mw-color-surface-elevated);
-  --mw-tab-surface-hover: var(--mw-color-surface-subtle);
-  --mw-tab-surface-pressed: var(--mw-color-border);
-  --mw-tab-label: var(--mw-color-text-muted);
+  --mw-tab-surface: transparent;
+  --mw-tab-surface-hover: color-mix(in srgb, var(--mw-color-text, #ffffff) 5%, transparent);
+  --mw-tab-surface-pressed: color-mix(in srgb, var(--mw-color-text, #ffffff) 10%, transparent);
+  --mw-tab-label: var(--mw-color-text);
   --mw-tab-label-active: var(--mw-color-text);
   --mw-tab-label-disabled: var(--mw-color-text-disabled);
   --mw-tab-indicator: var(--mw-color-primary-base, #5859fc);

package/src/firstEdition/textarea.css

@@ -4,17 +4,20 @@
  */
 
 .mw-textarea {
-  min-height: calc(var(--mw-density-height) * 3);
+  box-sizing: border-box;
+  min-height: 100px;
   padding: var(--mw-density-padding-y) var(--mw-density-padding-x);
   border-radius: var(--mw-ui-radius);
   border: 1px solid var(--mw-color-border);
-  background: var(--mw-color-surface);
+  background: var(--mw-color-surface-primary);
   color: var(--mw-color-text);
   font-family: var(--mw-font-primary, inherit);
   font-size: var(--mw-density-font-size);
-  width: 260px;
-  line-height: 1.5;
-  resize: var(--mw-textarea-resize, vertical);
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  line-height: 16px;
+  resize: var(--mw-textarea-resize, none);
   transition: border-color 150ms ease, outline 150ms ease;
 }
 
@@ -59,5 +62,5 @@
 }
 
 .mw-theme--dark .mw-textarea {
-  background: var(--mw-color-surface);
+  background: var(--mw-color-surface-primary);
 }