@marwes-ui/presets 1.3.0 → 1.4.0

package/src/firstEdition/molecules/checkbox-group-field.css

@@ -31,37 +31,49 @@
   user-select: none;
 }
 
-.mw-checkbox-group-field__option .mw-p {
+.mw-checkbox-group-field__option-content {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
   line-height: 1;
 }
 
+.mw-checkbox-group-field__option--with-description {
+  align-items: flex-start;
+  height: auto;
+  min-height: 32px;
+}
+
+.mw-checkbox-group-field__option-label {
+  color: var(--mw-color-text, #141414);
+}
+
+.mw-checkbox-group-field__option-description {
+  color: var(--mw-color-text-muted, #595959);
+}
+
 .mw-checkbox-group-field__description {
-  opacity: 0.75;
-  font-size: var(--mw-density-font-size-sm);
+  color: var(--mw-color-text-muted, #595959);
+}
+
+.mw-checkbox-group-field__description .mw-text {
+  color: inherit;
 }
 
 .mw-checkbox-group-field__error {
-  font-size: var(--mw-density-font-size-sm);
   color: var(--mw-color-danger-base, #d90429);
 }
 
+.mw-checkbox-group-field__error .mw-text {
+  color: inherit;
+}
+
 .mw-checkbox-group-field--disabled .mw-checkbox-group-field__option {
   cursor: not-allowed;
   opacity: 0.7;
 }
 
-.mw-checkbox-group-field--invalid .mw-checkbox-group-field__label .mw-p,
-.mw-checkbox-group-field--invalid .mw-checkbox-group-field__error .mw-p {
+.mw-checkbox-group-field--invalid .mw-checkbox-group-field__label .mw-text,
+.mw-checkbox-group-field--invalid .mw-checkbox-group-field__error .mw-text {
   color: var(--mw-color-danger-base, #d90429);
 }
-
-@supports selector(:has(*)) {
-  .mw-checkbox-group-field__option:has(.mw-checkbox:focus-visible) {
-    outline: 2px solid var(--mw-color-focus);
-    outline-offset: 2px;
-  }
-
-  .mw-checkbox-group-field__option:has(.mw-checkbox:focus-visible) .mw-checkbox {
-    outline: none;
-  }
-}

package/src/firstEdition/molecules/date-picker-field.css

@@ -0,0 +1,28 @@
+/**
+ * DatePickerField (Molecule)
+ *
+ * Layout for label + calendar + helper/error text
+ */
+
+.mw-date-picker-field {
+  display: grid;
+  gap: var(--mw-density-field-gap);
+}
+
+.mw-date-picker-field__label {
+  display: block;
+  text-align: left;
+}
+
+.mw-date-picker-field__helper {
+  color: var(--mw-color-text-muted, #595959);
+}
+
+.mw-date-picker-field__error {
+  color: var(--mw-color-danger-base, #c4302b);
+}
+
+.mw-date-picker-field--invalid .mw-date-picker {
+  outline: 1px solid var(--mw-color-danger-base, #c4302b);
+  border-radius: var(--mw-ui-radius, 6px);
+}

package/src/firstEdition/molecules/dialog-modal.css

@@ -9,9 +9,11 @@
 }
 
 .mw-dialog-modal__scrim {
+  --dialog-modal-scrim-background: rgba(0, 0, 0, 0.6);
+
   position: absolute;
   inset: 0;
-  background: rgba(0, 0, 0, 0.6);
+  background: var(--dialog-modal-scrim-background);
 }
 
 .mw-dialog-modal__surface {
@@ -26,6 +28,19 @@
   box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
 }
 
+.mw-dialog-modal[data-surface-width="custom"] .mw-dialog-modal__surface > .mw-dialog {
+  --mw-dialog-width: var(--mw-dialog-surface-width);
+}
+
+.mw-dialog-modal[data-tone="calm"] .mw-dialog-modal__scrim {
+  --dialog-modal-scrim-background: rgba(0, 0, 0, 0.42);
+}
+
+.mw-dialog-modal[data-divider="hidden"] .mw-dialog__header-divider,
+.mw-dialog-modal[data-divider="hidden"] .mw-dialog__footer-divider {
+  display: none;
+}
+
 @media (max-width: 640px) {
   .mw-dialog-modal {
     padding: 12px; /* off-scale — no token */

package/src/firstEdition/molecules/input-field.css

@@ -19,11 +19,6 @@
   transition: opacity 0.2s ease;
   text-align: left;
   font: inherit;
-
-  p {
-    line-height: 1;
-    font-size: var(--mw-density-font-size);
-  }
 }
 
 .mw-input-field__input-wrapper {
@@ -60,7 +55,7 @@
 
   &:hover {
     color: var(--mw-color-text, #141414);
-    background: var(--mw-color-surface, #f5f5f5);
+    background: var(--mw-color-surface-primary, #ffffff);
   }
 
   &:focus {
@@ -100,7 +95,7 @@
 
   &:hover {
     color: var(--mw-color-text, #141414);
-    background: var(--mw-color-surface, #f5f5f5);
+    background: var(--mw-color-surface-primary, #ffffff);
   }
 
   &:focus {
@@ -134,7 +129,7 @@
 .mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol) {
   border: 1px solid var(--mw-color-border);
   border-radius: var(--mw-ui-radius);
-  background: var(--mw-color-surface);
+  background: var(--mw-color-surface-primary);
   transition: border-color 150ms ease, outline 150ms ease;
 }
 
@@ -225,13 +220,36 @@
 }
 
 .mw-input-field__helper {
-  font-size: 0.875em;
+  color: var(--mw-color-text-muted, #595959);
+}
+
+.mw-input-field__meta {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--mw-spacing-sp-8);
+  color: var(--mw-color-text-muted, #595959);
+}
+
+.mw-input-field__meta .mw-input-field__helper,
+.mw-input-field__meta .mw-input-field__counter {
+  min-width: 0;
+}
+
+.mw-input-field__counter {
+  flex-shrink: 0;
   color: var(--mw-color-text-muted, #595959);
 }
 
 .mw-input-field__error {
-  font-size: 0.875em;
-  color: var(--mw-color-danger-base, #d90429);
+  color: var(--mw-color-status-error-text, #d90429);
+}
+
+.mw-input-field__label .mw-text,
+.mw-input-field__helper .mw-text,
+.mw-input-field__counter .mw-text,
+.mw-input-field__error .mw-text {
+  color: inherit;
 }
 
 /* State modifiers */
@@ -250,8 +268,8 @@
   cursor: default;
 }
 
-.mw-input-field--invalid .mw-input-field__label .mw-p,
-.mw-input-field--invalid .mw-input-field__error .mw-p {
+.mw-input-field--invalid .mw-input-field__label .mw-text,
+.mw-input-field--invalid .mw-input-field__error .mw-text {
   /* Label styling when field has error - could add red accent if needed  */
   color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/input-otp-field.css

@@ -0,0 +1,26 @@
+/**
+ * InputOtpField (Molecule)
+ *
+ * Layout for label + InputOtp atom + helper/error.
+ * Mirrors the existing `.mw-input-otp__label / __error / __helper` styles
+ * that used to live on the field-shaped InputOtp atom; those classes now
+ * belong to the molecule.
+ */
+
+.mw-input-otp-field {
+  display: grid;
+  gap: var(--mw-density-field-gap);
+}
+
+.mw-input-otp-field__label {
+  display: block;
+  text-align: left;
+}
+
+.mw-input-otp-field__helper {
+  color: var(--mw-color-text-muted, #595959);
+}
+
+.mw-input-otp-field__error {
+  color: var(--mw-color-danger-base, #c4302b);
+}

package/src/firstEdition/molecules/pagination-field.css

@@ -0,0 +1,23 @@
+/**
+ * PaginationField (Molecule)
+ *
+ * Layout for label + (description) + pagination + (error).
+ */
+
+.mw-pagination-field {
+  display: grid;
+  gap: var(--mw-density-field-gap);
+}
+
+.mw-pagination-field__label {
+  display: block;
+  text-align: left;
+}
+
+.mw-pagination-field__description {
+  color: var(--mw-color-text-muted, #595959);
+}
+
+.mw-pagination-field__error {
+  color: var(--mw-color-danger-base, #c4302b);
+}

package/src/firstEdition/molecules/radio-group-field.css

@@ -10,7 +10,7 @@
 
 .mw-radio-group-field {
   display: grid;
-  gap: var(--mw-density-gap);
+  gap: var(--mw-spacing-sp-4);
 }
 
 .mw-radio-group-field__label {
@@ -32,28 +32,49 @@
   user-select: none;
 }
 
-/* Tighten line-height so the <p> aligns with the 16px radio circle */
-.mw-radio-group-field__option .mw-p {
-  line-height: 1;
+.mw-radio-group-field__option-content {
+  display: grid;
+  gap: var(--mw-spacing-sp-1, 2px);
+  min-width: 0;
+}
+
+.mw-radio-group-field__option--with-description {
+  align-items: flex-start;
+  height: auto;
+  min-height: 32px;
+}
+
+.mw-radio-group-field__option-label {
+  color: var(--mw-color-text, #141414);
+}
+
+.mw-radio-group-field__option-description {
+  color: var(--mw-color-text-muted, #595959);
 }
 
 .mw-radio-group-field__description {
-  opacity: 0.75;
-  font-size: var(--mw-density-font-size-sm);
+  color: var(--mw-color-text-muted, #595959);
+}
+
+.mw-radio-group-field__description .mw-text {
+  color: inherit;
 }
 
 .mw-radio-group-field__error {
-  font-size: var(--mw-density-font-size-sm);
   color: var(--mw-color-danger-base, #d90429);
 }
 
+.mw-radio-group-field__error .mw-text {
+  color: inherit;
+}
+
 /* State modifiers */
 .mw-radio-group-field--disabled .mw-radio-group-field__option {
   cursor: not-allowed;
   opacity: 0.7;
 }
 
-.mw-radio-group-field--invalid .mw-radio-group-field__label .mw-p,
-.mw-radio-group-field--invalid .mw-radio-group-field__error .mw-p {
+.mw-radio-group-field--invalid .mw-radio-group-field__label .mw-text,
+.mw-radio-group-field--invalid .mw-radio-group-field__error .mw-text {
   color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/segmented-control-field.css

@@ -0,0 +1,23 @@
+/**
+ * SegmentedControlField (Molecule)
+ *
+ * Layout for label + (description) + segmented control + (error).
+ */
+
+.mw-segmented-control-field {
+  display: grid;
+  gap: var(--mw-density-field-gap);
+}
+
+.mw-segmented-control-field__label {
+  display: block;
+  text-align: left;
+}
+
+.mw-segmented-control-field__description {
+  color: var(--mw-color-text-muted, #595959);
+}
+
+.mw-segmented-control-field__error {
+  color: var(--mw-color-danger-base, #c4302b);
+}

package/src/firstEdition/molecules/slider-field.css

@@ -39,7 +39,6 @@
 
 .mw-slider-field__description {
   color: var(--mw-color-text-muted, #595959);
-  font-size: var(--mw-density-font-size-sm);
 }
 
 .mw-slider-field__slider {
@@ -64,10 +63,16 @@
 }
 
 .mw-slider-field__error {
-  font-size: var(--mw-density-font-size-sm);
   color: var(--mw-color-danger-base, #d90429);
 }
 
+.mw-slider-field__label .mw-text,
+.mw-slider-field__description .mw-text,
+.mw-slider-field__edge-value .mw-text,
+.mw-slider-field__error .mw-text {
+  color: inherit;
+}
+
 .mw-slider-field--disabled {
   color: var(--mw-color-text-disabled, #595959);
 }
@@ -77,7 +82,7 @@
   cursor: not-allowed;
 }
 
-.mw-slider-field--invalid .mw-slider-field__label .mw-p,
-.mw-slider-field--invalid .mw-slider-field__error .mw-p {
+.mw-slider-field--invalid .mw-slider-field__label .mw-text,
+.mw-slider-field--invalid .mw-slider-field__error .mw-text {
   color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/switch-field.css

@@ -17,21 +17,25 @@
 .mw-switch-field__description {
   opacity: 0.75;
   margin-left: calc(var(--mw-spacing-sp-24) + var(--mw-density-gap));
-  font-size: var(--mw-density-font-size-sm);
 }
 
 .mw-switch-field__error {
   margin-left: calc(var(--mw-spacing-sp-24) + var(--mw-density-gap));
-  font-size: var(--mw-density-font-size-sm);
   color: var(--mw-color-danger-base, #d90429);
 }
 
+.mw-switch-field__label .mw-text,
+.mw-switch-field__description .mw-text,
+.mw-switch-field__error .mw-text {
+  color: inherit;
+}
+
 .mw-switch-field--disabled .mw-switch-field__label {
   cursor: not-allowed;
   opacity: 0.7;
 }
 
-.mw-switch-field--invalid .mw-switch-field__label .mw-p,
-.mw-switch-field--invalid .mw-switch-field__error .mw-p {
+.mw-switch-field--invalid .mw-switch-field__label .mw-text,
+.mw-switch-field--invalid .mw-switch-field__error .mw-text {
   color: var(--mw-color-danger-base, #d90429);
 }

package/src/firstEdition/molecules/tab-group.css

@@ -1,6 +1,8 @@
 .mw-tab-group {
   display: grid;
   gap: var(--mw-density-gap);
+  min-width: 0;
+  max-width: 100%;
 }
 
 .mw-tab-group__header {
@@ -8,19 +10,30 @@
   align-items: center;
 }
 
+.mw-tab-group__header .mw-text {
+  color: inherit;
+}
+
 .mw-tab-group__list {
-  display: inline-flex;
+  display: flex;
   align-items: stretch;
   gap: 0;
-  width: fit-content;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+  scrollbar-width: thin;
   border-bottom: 1px solid color-mix(in srgb, var(--mw-color-text, #141414) 20%, transparent);
 }
 
 .mw-tab-group__panels {
   display: grid;
+  min-width: 0;
 }
 
 .mw-tab-group__panel {
+  min-width: 0;
   padding-top: calc(var(--mw-density-gap) * 0.75);
   outline: none;
 }

package/src/firstEdition/pagination.css

@@ -0,0 +1,180 @@
+/*
+ * Pagination Styles
+ * Figma refs: 1727:3905, 1727:3897, 1727:3899, 1727:3903
+ */
+
+.mw-pagination {
+  --mw-pagination-active-bg: var(--mw-color-primary-base, #2f31fc);
+  --mw-pagination-active-text: var(--mw-color-primary-label, #ffffff);
+  --mw-pagination-text: var(--mw-color-text-muted, #595959);
+  --mw-pagination-hover-text: var(--mw-color-text, #141414);
+  --mw-pagination-border: color-mix(in srgb, var(--mw-color-text, #000000) 12%, transparent);
+  --mw-pagination-hover-bg: color-mix(in srgb, var(--mw-color-text, #000000) 5%, transparent);
+  --mw-pagination-focus: var(--mw-color-focus, #2f31fc);
+  --mw-pagination-size: 32px;
+  --mw-pagination-radius: 8px;
+  --mw-pagination-gap: 2px;
+  --mw-pagination-section-gap: 12px;
+  --mw-pagination-list-width: 0px;
+
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mw-pagination-section-gap);
+  max-width: 100%;
+  min-width: 0;
+  color: var(--mw-pagination-text);
+  font-family: var(--mw-font-primary, inherit);
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0;
+}
+
+.mw-pagination--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.mw-pagination__list {
+  display: inline-flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--mw-pagination-gap);
+  min-width: var(--mw-pagination-list-width);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.mw-pagination__list-item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  padding: 0;
+}
+
+.mw-pagination__control,
+.mw-pagination__page {
+  appearance: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  background: transparent;
+  color: var(--mw-pagination-text);
+  font-family: inherit;
+  font-size: inherit;
+  cursor: pointer;
+  user-select: none;
+}
+
+.mw-pagination__control {
+  gap: 4px;
+  min-width: 0;
+  min-height: 16px;
+  padding: 0;
+  font-weight: 500;
+  line-height: 16px;
+  white-space: nowrap;
+}
+
+.mw-pagination__control-label {
+  max-width: 12rem;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.mw-pagination__control-icon {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  line-height: 0;
+}
+
+.mw-pagination__page,
+.mw-pagination__ellipsis {
+  min-width: var(--mw-pagination-size);
+  height: var(--mw-pagination-size);
+  border-radius: var(--mw-pagination-radius);
+}
+
+.mw-pagination__page {
+  border: 1px solid transparent;
+  padding-inline: 8px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+.mw-pagination__page--selected {
+  background: var(--mw-pagination-active-bg);
+  color: var(--mw-pagination-active-text);
+  font-weight: 500;
+  line-height: 16px;
+}
+
+.mw-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--mw-pagination-text);
+  font-weight: 500;
+  line-height: 16px;
+  user-select: none;
+}
+
+.mw-pagination__control:hover:not(:disabled):not(.mw-pagination__control--disabled),
+.mw-pagination__page:hover:not(:disabled):not(.mw-pagination__page--disabled):not(
+    .mw-pagination__page--selected
+  ) {
+  color: var(--mw-pagination-hover-text);
+}
+
+.mw-pagination__page:hover:not(:disabled):not(.mw-pagination__page--disabled):not(
+    .mw-pagination__page--selected
+  ) {
+  background: var(--mw-pagination-hover-bg);
+  border-color: var(--mw-pagination-border);
+}
+
+.mw-pagination__control--disabled,
+.mw-pagination__control:disabled,
+.mw-pagination__page--disabled,
+.mw-pagination__page:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+  color: var(--mw-color-text-disabled);
+}
+
+.mw-pagination__control:focus-visible,
+.mw-pagination__page:focus-visible {
+  outline: 2px solid var(--mw-pagination-focus);
+  outline-offset: 2px;
+}
+
+.mw-pagination__control * {
+  pointer-events: none;
+}
+
+.mw-pagination[data-control-display="icon"] .mw-pagination__control {
+  width: var(--mw-pagination-size);
+  min-width: var(--mw-pagination-size);
+  min-height: var(--mw-pagination-size);
+  gap: 0;
+}
+
+.mw-pagination[data-control-display="icon"] .mw-pagination__list {
+  min-width: 0;
+}
+
+.mw-pagination[data-control-display="icon"] .mw-pagination__control-label {
+  max-width: 0;
+  opacity: 0;
+}