@marwes-ui/presets 0.0.4 → 1.0.1

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

@@ -0,0 +1,46 @@
+/**
+ * AccordionField (Molecule)
+ *
+ * Layout for label + accordion items group + description/error text.
+ * The accordion items themselves are styled by accordion.css (atom).
+ */
+
+.mw-accordion-field {
+  display: grid;
+  gap: var(--mw-density-field-gap, 8px);
+  border: none;
+  padding: 0;
+  margin: 0;
+}
+
+.mw-accordion-field__label {
+  display: block;
+  user-select: none;
+}
+
+.mw-accordion-field__items {
+  display: grid;
+  gap: var(--mw-density-gap, 4px);
+}
+
+.mw-accordion-field__description {
+  opacity: 0.6;
+  font-size: 0.875em;
+  color: var(--mw-color-text-muted, #6b7280);
+}
+
+.mw-accordion-field__error {
+  font-size: 0.875em;
+  color: var(--mw-color-danger-base, #dc2626);
+}
+
+/* State modifiers */
+.mw-accordion-field--disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.mw-accordion-field--invalid .mw-accordion-field__label .mw-p,
+.mw-accordion-field--invalid .mw-accordion-field__error .mw-p {
+  color: var(--mw-color-danger-base, #dc2626);
+}

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

@@ -0,0 +1,53 @@
+.mw-checkbox-field {
+  display: grid;
+  gap: var(--mw-density-gap);
+}
+
+.mw-checkbox-field__row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mw-density-gap);
+  border-radius: max(2px, calc(var(--mw-ui-radius, 4px) * 0.4));
+}
+
+.mw-checkbox-field__label {
+  cursor: pointer;
+  user-select: none;
+}
+
+.mw-checkbox-field__description {
+  opacity: 0.75;
+  margin-left: calc(
+    var(--mw-density-checkbox-size) +
+    var(--mw-spacing-sp-8) +
+    var(--mw-density-gap) /* checkbox size + margin + spacing to textfield */
+  );
+  font-size: var(--mw-density-font-size-sm);
+}
+
+@supports selector(:has(*)) {
+  .mw-checkbox-field__row:has(.mw-checkbox:focus-visible) {
+    outline: 2px solid var(--mw-color-focus);
+    outline-offset: 2px;
+  }
+
+  .mw-checkbox-field__row:has(.mw-checkbox:focus-visible) .mw-checkbox {
+    outline: none;
+  }
+}
+
+.mw-checkbox-field__error {
+  margin-left: calc(
+    var(--mw-density-checkbox-size) +
+    var(--mw-spacing-sp-8) +
+    var(--mw-density-gap) /* checkbox size + margin + spacing to textfield */
+  );
+  font-size: var(--mw-density-font-size-sm);
+  color: var(--mw-color-danger-base, #dc2626);
+}
+
+/* Optional state hooks */
+.mw-checkbox-field--disabled .mw-checkbox-field__label {
+  cursor: not-allowed;
+  opacity: 0.7;
+}

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

@@ -0,0 +1,67 @@
+.mw-checkbox-group-field {
+  display: grid;
+  gap: 4px;
+  border: none;
+  padding: 0;
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.mw-checkbox-group-field__label {
+  display: block;
+  inline-size: 100%;
+  padding: 0;
+  margin: 0;
+  user-select: none;
+}
+
+.mw-checkbox-group-field__options {
+  display: grid;
+  gap: 0;
+  margin-top: 4px;
+}
+
+.mw-checkbox-group-field__option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mw-density-gap);
+  min-height: 32px;
+  border-radius: max(2px, calc(var(--mw-ui-radius, 4px) * 0.4));
+  cursor: pointer;
+  user-select: none;
+}
+
+.mw-checkbox-group-field__option .mw-p {
+  line-height: 1;
+}
+
+.mw-checkbox-group-field__description {
+  opacity: 0.75;
+  font-size: var(--mw-density-font-size-sm);
+}
+
+.mw-checkbox-group-field__error {
+  font-size: var(--mw-density-font-size-sm);
+  color: var(--mw-color-danger-base, #dc2626);
+}
+
+.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 {
+  color: var(--mw-color-danger-base, #dc2626);
+}
+
+@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/dialog-modal.css

@@ -0,0 +1,34 @@
+.mw-dialog-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 1100;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--mw-spacing-sp-24);
+}
+
+.mw-dialog-modal__scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+}
+
+.mw-dialog-modal__surface {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.mw-dialog-modal__surface > .mw-dialog {
+  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
+}
+
+@media (max-width: 640px) {
+  .mw-dialog-modal {
+    padding: 12px; /* off-scale — no token */
+    align-items: flex-end;
+  }
+}

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

@@ -0,0 +1,260 @@
+/**
+ * InputField (Molecule)
+ *
+ * Layout for label + input + helper/error text
+ */
+
+.mw-input-field {
+  display: grid;
+  gap: var(--mw-density-field-gap);
+}
+
+.mw-input-field__label {
+  display: block;
+  padding: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  user-select: none;
+  opacity: 0.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 {
+  position: relative;
+  display: flex;
+  align-items: center;
+
+  .mw-input,
+  .mw-select,
+  .mw-textarea {
+    flex: 1;
+  }
+
+  &:has(.mw-input-field__toggle-password) .mw-input,
+  &:has(.mw-input-field__search-icon) .mw-input,
+  &:has(.mw-input-field__clear-search) .mw-input {
+    padding-right: var(--mw-spacing-sp-40);
+  }
+}
+
+.mw-input-field__toggle-password {
+  position: absolute;
+  right: var(--mw-spacing-sp-8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px; /* off-scale — no token */
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--mw-color-text-muted, #6b7280);
+  transition: color 0.2s ease;
+  border-radius: var(--mw-ui-radius, 4px);
+
+  &:hover {
+    color: var(--mw-color-text, #111827);
+    background: var(--mw-color-surface, #f3f4f6);
+  }
+
+  &:focus {
+    outline: 2px solid var(--mw-color-primary-base, #3b82f6);
+    outline-offset: 2px;
+  }
+
+  &:active {
+    background: var(--mw-color-border-subtle, #e5e7eb);
+  }
+}
+
+.mw-input-field__search-icon {
+  position: absolute;
+  right: var(--mw-spacing-sp-8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px; /* off-scale — no token */
+  color: var(--mw-color-text-muted, #6b7280);
+  pointer-events: none;
+}
+
+.mw-input-field__clear-search {
+  position: absolute;
+  right: var(--mw-spacing-sp-8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 6px; /* off-scale — no token */
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  color: var(--mw-color-text-muted, #6b7280);
+  transition: color 0.2s ease;
+  border-radius: var(--mw-ui-radius, 4px);
+
+  &:hover {
+    color: var(--mw-color-text, #111827);
+    background: var(--mw-color-surface, #f3f4f6);
+  }
+
+  &:focus {
+    outline: 2px solid var(--mw-color-primary-base, #3b82f6);
+    outline-offset: 2px;
+  }
+
+  &:active {
+    background: var(--mw-color-border-subtle, #e5e7eb);
+  }
+}
+
+.mw-input-field__leading-symbol {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: var(--mw-spacing-sp-16);
+  white-space: nowrap;
+  color: var(--mw-color-text-muted, #6b7280);
+  pointer-events: none;
+  font-weight: 400;
+  font-family: var(--mw-font-primary, inherit);
+  font-size: var(--mw-density-font-size);
+  line-height: 1;
+}
+
+/**
+ * When a leading symbol is present the wrapper takes over the input's border
+ * so the symbol appears visually inside the field boundary.
+ */
+.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);
+  transition: border-color 150ms ease, outline 150ms ease;
+}
+
+.mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol) .mw-input {
+  width: 100%;
+  min-width: 0;
+  padding-left: var(--mw-spacing-sp-8);
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+/* Hover — forward to wrapper when symbol is present */
+.mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol):hover:not(:has(:disabled)):not(
+    :has(:focus)
+  ) {
+  border-color: color-mix(in srgb, var(--mw-color-border) 70%, var(--mw-color-text));
+}
+
+/* Focus — wrapper gets outline when symbol is present */
+.mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol):has(:focus-visible) {
+  outline: 2px solid var(--mw-color-focus);
+  outline-offset: 2px;
+}
+
+/* Remove input's own focus outline when wrapper handles it */
+.mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol) .mw-input:focus-visible {
+  outline: none;
+}
+
+/* Error/Danger — wrapper border when symbol is present */
+.mw-input-field--invalid .mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol),
+.mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol):has(.mw-input--danger) {
+  border-color: var(--mw-color-danger-base);
+}
+
+.mw-input-field--invalid
+  .mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol):has(:focus-visible),
+.mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol):has(.mw-input--danger):has(
+    :focus-visible
+  ) {
+  outline-color: var(--mw-color-danger-base);
+}
+
+/* Success — wrapper border when symbol is present */
+.mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol):has(.mw-input--success) {
+  border-color: var(--mw-color-success-base);
+}
+
+.mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol):has(.mw-input--success):has(
+    :focus-visible
+  ) {
+  outline-color: var(--mw-color-success-base);
+}
+
+/* Disabled — wrapper when symbol is present */
+.mw-input-field__input-wrapper:has(.mw-input-field__leading-symbol):has(:disabled) {
+  opacity: 0.2;
+  cursor: not-allowed;
+  pointer-events: none;
+  border-color: var(--mw-color-border-disabled);
+  background: var(--mw-color-surface-disabled);
+}
+
+.mw-input-field--textarea .mw-input-field__input-wrapper,
+.mw-input-field--rich-text .mw-input-field__input-wrapper {
+  align-items: stretch;
+}
+
+/* Hide native search input clear button */
+.mw-input[type="search"]::-webkit-search-cancel-button {
+  display: none;
+  -webkit-appearance: none;
+}
+
+/* Label opacity: 1 when input is focused */
+.mw-input-field:focus-within .mw-input-field__label {
+  opacity: 1;
+}
+
+/* Label opacity: 1 when hovering over input-field */
+.mw-input-field:hover .mw-input-field__label {
+  opacity: 1;
+}
+
+/* Label opacity: 1 when input has value */
+.mw-input-field[data-has-value="true"] .mw-input-field__label {
+  opacity: 1;
+}
+
+.mw-input-field__helper {
+  opacity: 0.6;
+  font-size: 0.875em;
+  color: var(--mw-color-text-muted, #6b7280);
+}
+
+.mw-input-field__error {
+  font-size: 0.875em;
+  color: var(--mw-color-danger-base, #dc2626);
+}
+
+/* State modifiers */
+.mw-input-field--disabled .mw-input-field__label {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+/* Disabled state overwrite hover/focus states */
+.mw-input-field--disabled:hover .mw-input-field__label,
+.mw-input-field--disabled:focus-within .mw-input-field__label {
+  opacity: 0.6;
+}
+
+.mw-input-field--readonly .mw-input-field__label {
+  cursor: default;
+}
+
+.mw-input-field--invalid .mw-input-field__label .mw-p,
+.mw-input-field--invalid .mw-input-field__error .mw-p {
+  /* Label styling when field has error - could add red accent if needed  */
+  color: var(--mw-color-danger-base, #dc2626);
+}

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

@@ -0,0 +1,59 @@
+/**
+ * RadioGroupField (Molecule)
+ *
+ * Layout for group label + radio options + description/error text.
+ * Each option renders a Radio atom beside its label text.
+ *
+ * Figma reference: Radio Group node 1368:6450
+ * Option row: 91 Fill × 32 Hug (fills width, 32px row height)
+ */
+
+.mw-radio-group-field {
+  display: grid;
+  gap: var(--mw-density-gap);
+}
+
+.mw-radio-group-field__label {
+  cursor: default;
+  user-select: none;
+}
+
+.mw-radio-group-field__options {
+  display: grid;
+  gap: 0;
+}
+
+.mw-radio-group-field__option {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mw-density-gap);
+  height: 32px;
+  cursor: pointer;
+  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__description {
+  opacity: 0.75;
+  font-size: var(--mw-density-font-size-sm);
+}
+
+.mw-radio-group-field__error {
+  font-size: var(--mw-density-font-size-sm);
+  color: var(--mw-color-danger-base, #dc2626);
+}
+
+/* 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 {
+  color: var(--mw-color-danger-base, #dc2626);
+}

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

@@ -0,0 +1,83 @@
+.mw-slider-field {
+  display: grid;
+  gap: 8px;
+  width: min(100%, 560px);
+}
+
+.mw-slider-field__header,
+.mw-slider-field__values-row,
+.mw-slider-field__control-row {
+  display: grid;
+  align-items: center;
+}
+
+.mw-slider-field__header {
+  gap: 0.25rem;
+}
+
+.mw-slider-field__values-row {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+  gap: 0.5rem;
+}
+
+.mw-slider-field__control-row {
+  gap: 0.5rem;
+}
+
+.mw-slider-field--label-top .mw-slider-field__control-row {
+  grid-template-columns: minmax(0, 1fr);
+}
+
+.mw-slider-field--label-inline .mw-slider-field__control-row {
+  grid-template-columns: auto minmax(0, 1fr) auto;
+}
+
+.mw-slider-field__label {
+  cursor: default;
+  user-select: none;
+}
+
+.mw-slider-field__description {
+  opacity: 0.75;
+  font-size: var(--mw-density-font-size-sm);
+}
+
+.mw-slider-field__slider {
+  min-width: 0;
+}
+
+.mw-slider-field__slider > .mw-slider {
+  width: 100%;
+}
+
+.mw-slider-field__edge-value {
+  min-width: 2rem;
+  color: var(--mw-color-text-muted, #595959);
+}
+
+.mw-slider-field__edge-value--min {
+  text-align: left;
+}
+
+.mw-slider-field__edge-value--max {
+  text-align: right;
+}
+
+.mw-slider-field__error {
+  font-size: var(--mw-density-font-size-sm);
+  color: var(--mw-color-danger-base, #dc2626);
+}
+
+.mw-slider-field--disabled {
+  opacity: 0.7;
+}
+
+.mw-slider-field--disabled .mw-slider-field__label,
+.mw-slider-field--disabled .mw-slider-field__edge-value {
+  cursor: not-allowed;
+}
+
+.mw-slider-field--invalid .mw-slider-field__label .mw-p,
+.mw-slider-field--invalid .mw-slider-field__error .mw-p {
+  color: var(--mw-color-danger-base, #dc2626);
+}

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

@@ -0,0 +1,37 @@
+.mw-switch-field {
+  display: grid;
+  gap: var(--mw-density-gap);
+}
+
+.mw-switch-field__row {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mw-density-gap);
+}
+
+.mw-switch-field__label {
+  cursor: default;
+  user-select: none;
+}
+
+.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, #dc2626);
+}
+
+.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 {
+  color: var(--mw-color-danger-base, #dc2626);
+}

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

@@ -0,0 +1,26 @@
+.mw-tab-group {
+  display: grid;
+  gap: var(--mw-density-gap);
+}
+
+.mw-tab-group__header {
+  display: flex;
+  align-items: center;
+}
+
+.mw-tab-group__list {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+  width: fit-content;
+  border-bottom: 1px solid color-mix(in srgb, var(--mw-color-text, #141414) 20%, transparent);
+}
+
+.mw-tab-group__panels {
+  display: grid;
+}
+
+.mw-tab-group__panel {
+  padding-top: calc(var(--mw-density-gap) * 0.75);
+  outline: none;
+}

package/src/firstEdition/molecules/toast-container.css

@@ -0,0 +1,45 @@
+.mw-toast-container {
+  position: fixed;
+  z-index: 1000;
+  display: grid;
+  gap: 12px; /* off-scale — no token */
+  width: min(420px, calc(100vw - var(--mw-spacing-sp-32)));
+  pointer-events: none;
+}
+
+.mw-toast-container--top-right {
+  top: var(--mw-spacing-sp-16);
+  right: var(--mw-spacing-sp-16);
+}
+
+.mw-toast-container--top-left {
+  top: var(--mw-spacing-sp-16);
+  left: var(--mw-spacing-sp-16);
+}
+
+.mw-toast-container--bottom-right {
+  right: var(--mw-spacing-sp-16);
+  bottom: var(--mw-spacing-sp-16);
+}
+
+.mw-toast-container--bottom-left {
+  bottom: var(--mw-spacing-sp-16);
+  left: var(--mw-spacing-sp-16);
+}
+
+.mw-toast-container__item {
+  pointer-events: auto;
+  animation: mw-toast-enter 180ms ease-out;
+}
+
+@keyframes mw-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(-6px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}