@morphos/styles 0.1.0

package/src/inputs/combobox.css

@@ -0,0 +1,76 @@
+/**
+ * Recipe for @morphos/inputs `Combobox`. Apply with
+ * `class="morphos-combobox"` on the `Combobox` root — its text input and
+ * listbox are rendered inside it and styled here by role/data-attribute.
+ */
+.morphos-combobox {
+  position: relative;
+  display: inline-block;
+  min-width: 14rem;
+}
+
+.morphos-combobox > input {
+  width: 100%;
+  font: inherit;
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  transition: border-color var(--morphos-transition-fast);
+}
+
+.morphos-combobox > input:focus-visible {
+  outline: none;
+  border-color: var(--morphos-color-accent);
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-combobox[data-disabled] > input {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.morphos-combobox > ul[role="listbox"] {
+  position: absolute;
+  top: calc(100% + var(--morphos-space-1));
+  left: 0;
+  right: 0;
+  z-index: 50;
+  max-height: 16rem;
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--morphos-space-1);
+  list-style: none;
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+}
+
+.morphos-combobox > ul[role="listbox"] > li[role="option"] {
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border-radius: var(--morphos-radius-sm);
+  cursor: pointer;
+}
+
+.morphos-combobox > ul[role="listbox"] > li[role="option"]:not([data-disabled]):hover,
+.morphos-combobox > ul[role="listbox"] > li[role="option"][data-active] {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-combobox > ul[role="listbox"] > li[role="option"][data-selected] {
+  background: var(--morphos-color-accent);
+  color: var(--morphos-color-accent-text);
+}
+
+/* Same specificity as the plain :hover/[data-active] rule above — placed after so it wins the tie and the selected option doesn't lose its (readable) accent background/text on hover. */
+.morphos-combobox > ul[role="listbox"] > li[role="option"][data-selected]:hover,
+.morphos-combobox > ul[role="listbox"] > li[role="option"][data-selected][data-active] {
+  background: var(--morphos-color-accent-hover);
+  color: var(--morphos-color-accent-text);
+}
+
+.morphos-combobox > ul[role="listbox"] > li[role="option"][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/inputs/field.css

@@ -0,0 +1,44 @@
+/**
+ * Recipe for @morphos/inputs `Field` + its parts.
+ * Apply `class="morphos-field"` to `Field`, `class="morphos-field-label"`
+ * to `FieldLabel`, `class="morphos-field-description"` to
+ * `FieldDescription`, `class="morphos-field-error"` to `FieldError`, and
+ * `class="morphos-field-control"` to `FieldControl`.
+ */
+.morphos-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--morphos-space-1);
+}
+
+.morphos-field[data-disabled] {
+  opacity: 0.5;
+}
+
+.morphos-field-label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--morphos-color-text);
+}
+
+.morphos-field[data-required] .morphos-field-label::after {
+  content: " *";
+  color: var(--morphos-color-danger);
+}
+
+.morphos-field-description {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--morphos-color-text-muted);
+}
+
+.morphos-field-error {
+  margin: 0;
+  font-size: 0.8125rem;
+  color: var(--morphos-color-danger);
+}
+
+.morphos-field-control {
+  display: flex;
+  flex-direction: column;
+}

package/src/inputs/fieldset.css

@@ -0,0 +1,23 @@
+/**
+ * Recipe for @morphos/inputs `Fieldset`. Apply with
+ * `class="morphos-fieldset"`.
+ */
+.morphos-fieldset {
+  display: flex;
+  flex-direction: column;
+  gap: var(--morphos-space-3);
+  margin: 0;
+  padding: var(--morphos-space-4);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+}
+
+.morphos-fieldset > legend {
+  padding: 0 var(--morphos-space-2);
+  font-weight: 600;
+  color: var(--morphos-color-text);
+}
+
+.morphos-fieldset[data-disabled] {
+  opacity: 0.5;
+}

package/src/inputs/form.css

@@ -0,0 +1,8 @@
+/**
+ * Recipe for @morphos/inputs `Form`. Apply with `class="morphos-form"`.
+ */
+.morphos-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--morphos-space-4);
+}

package/src/inputs/input.css

@@ -0,0 +1,39 @@
+/**
+ * Recipe for @morphos/inputs `Input`. Apply with `class="morphos-input"`.
+ */
+.morphos-input {
+  display: block;
+  width: 100%;
+  font: inherit;
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  transition: border-color var(--morphos-transition-fast), box-shadow var(--morphos-transition-fast);
+}
+
+.morphos-input::placeholder {
+  color: var(--morphos-color-placeholder);
+}
+
+.morphos-input[data-focused] {
+  outline: none;
+  border-color: var(--morphos-color-accent);
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-input[data-invalid] {
+  border-color: var(--morphos-color-danger);
+}
+
+.morphos-input[data-invalid][data-focused] {
+  box-shadow: 0 0 0 2px var(--morphos-color-bg), 0 0 0 4px var(--morphos-color-danger);
+}
+
+.morphos-input[data-disabled],
+.morphos-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background: var(--morphos-color-bg-subtle);
+}

package/src/inputs/number-field.css

@@ -0,0 +1,65 @@
+/**
+ * Recipe for @morphos/inputs `NumberField`. Apply with
+ * `class="morphos-number-field"` on the `NumberField` root.
+ */
+.morphos-number-field {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  overflow: hidden;
+}
+
+.morphos-number-field > button {
+  font: inherit;
+  line-height: 1;
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border: none;
+  background: var(--morphos-color-bg-subtle);
+  color: var(--morphos-color-text);
+  cursor: pointer;
+}
+
+.morphos-number-field > button:hover:not(:disabled) {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-number-field > button:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+  z-index: 1;
+  position: relative;
+}
+
+.morphos-number-field > button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.morphos-number-field > input {
+  /* Wide enough for a formatted value like "$1,234.56" — override if yours runs longer. */
+  width: 6rem;
+  border: none;
+  border-left: 1px solid var(--morphos-color-border);
+  border-right: 1px solid var(--morphos-color-border);
+  text-align: center;
+  font: inherit;
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  padding: var(--morphos-space-2) var(--morphos-space-1);
+}
+
+.morphos-number-field > input:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+  z-index: 1;
+  position: relative;
+}
+
+.morphos-number-field[data-disabled] {
+  opacity: 0.5;
+}
+
+.morphos-number-field[data-disabled] > input {
+  cursor: not-allowed;
+}

package/src/inputs/otp-field.css

@@ -0,0 +1,32 @@
+/**
+ * Recipe for @morphos/inputs `OtpField`. Apply with
+ * `class="morphos-otp-field"` on the `OtpField` root.
+ */
+.morphos-otp-field {
+  display: inline-flex;
+  gap: var(--morphos-space-2);
+}
+
+.morphos-otp-field > input[data-index] {
+  width: 2.5rem;
+  height: 3rem;
+  text-align: center;
+  font: inherit;
+  font-size: 1.25rem;
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  transition: border-color var(--morphos-transition-fast), box-shadow var(--morphos-transition-fast);
+}
+
+.morphos-otp-field > input[data-index]:focus-visible {
+  outline: none;
+  border-color: var(--morphos-color-accent);
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-otp-field[data-disabled] > input[data-index] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/inputs/radio.css

@@ -0,0 +1,64 @@
+/**
+ * Recipe for @morphos/inputs `RadioGroup` + `Radio`.
+ * Apply `class="morphos-radio-group"` to `RadioGroup` and
+ * `class="morphos-radio"` to each `Radio`.
+ */
+.morphos-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--morphos-space-2);
+}
+
+.morphos-radio-group[data-orientation="horizontal"] {
+  flex-direction: row;
+  gap: var(--morphos-space-4);
+}
+
+.morphos-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--morphos-space-2);
+  cursor: pointer;
+}
+
+.morphos-radio input[type="radio"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 1.125rem;
+  height: 1.125rem;
+  margin: 0;
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-full);
+  background: var(--morphos-color-bg);
+  display: inline-grid;
+  place-content: center;
+  transition: border-color var(--morphos-transition-fast);
+}
+
+.morphos-radio input[type="radio"]::before {
+  content: "";
+  width: 0.55rem;
+  height: 0.55rem;
+  border-radius: var(--morphos-radius-full);
+  background: var(--morphos-color-accent);
+  transform: scale(0);
+  transition: transform var(--morphos-transition-fast);
+}
+
+.morphos-radio[data-checked] input[type="radio"] {
+  border-color: var(--morphos-color-accent);
+}
+
+.morphos-radio[data-checked] input[type="radio"]::before {
+  transform: scale(1);
+}
+
+.morphos-radio input[type="radio"]:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-radio[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/inputs/select.css

@@ -0,0 +1,104 @@
+/**
+ * Recipe for @morphos/inputs `Select`. Apply with `class="morphos-select"`
+ * on the `Select` root — the trigger button, clear button, and listbox are
+ * all rendered inside it and styled here by role/data-attribute.
+ */
+.morphos-select {
+  position: relative;
+  display: inline-block;
+  min-width: 12rem;
+}
+
+.morphos-select > button[role="combobox"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--morphos-space-2);
+  width: 100%;
+  font: inherit;
+  text-align: left;
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  cursor: pointer;
+  transition: border-color var(--morphos-transition-fast);
+}
+
+.morphos-select > button[role="combobox"][data-placeholder] {
+  color: var(--morphos-color-placeholder);
+}
+
+.morphos-select > button[role="combobox"]:focus-visible {
+  outline: none;
+  border-color: var(--morphos-color-accent);
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-select[data-disabled] > button[role="combobox"],
+.morphos-select > button[role="combobox"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.morphos-select > button[data-clear] {
+  position: absolute;
+  top: 50%;
+  right: var(--morphos-space-2);
+  transform: translateY(-50%);
+  border: none;
+  background: none;
+  color: var(--morphos-color-text-muted);
+  cursor: pointer;
+  line-height: 1;
+  padding: 0 var(--morphos-space-1);
+}
+
+.morphos-select > button[data-clear]:hover {
+  color: var(--morphos-color-text);
+}
+
+.morphos-select > ul[role="listbox"] {
+  position: absolute;
+  top: calc(100% + var(--morphos-space-1));
+  left: 0;
+  right: 0;
+  z-index: 50;
+  max-height: 16rem;
+  overflow-y: auto;
+  margin: 0;
+  padding: var(--morphos-space-1);
+  list-style: none;
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+}
+
+.morphos-select > ul[role="listbox"] > li[role="option"] {
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border-radius: var(--morphos-radius-sm);
+  cursor: pointer;
+}
+
+.morphos-select > ul[role="listbox"] > li[role="option"]:not([data-disabled]):hover,
+.morphos-select > ul[role="listbox"] > li[role="option"][data-active] {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-select > ul[role="listbox"] > li[role="option"][data-selected] {
+  background: var(--morphos-color-accent);
+  color: var(--morphos-color-accent-text);
+}
+
+/* Same specificity as the plain :hover/[data-active] rule above — placed after so it wins the tie and the selected option doesn't lose its (readable) accent background/text on hover. */
+.morphos-select > ul[role="listbox"] > li[role="option"][data-selected]:hover,
+.morphos-select > ul[role="listbox"] > li[role="option"][data-selected][data-active] {
+  background: var(--morphos-color-accent-hover);
+  color: var(--morphos-color-accent-text);
+}
+
+.morphos-select > ul[role="listbox"] > li[role="option"][data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/inputs/slider.css

@@ -0,0 +1,84 @@
+/**
+ * Recipe for @morphos/inputs `Slider`. Apply with `class="morphos-slider"`
+ * on the `Slider` root — it exposes the current position as the
+ * `--slider-value` custom property, used below to paint the filled track.
+ */
+.morphos-slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 1.25rem;
+}
+
+.morphos-slider > input[type="range"] {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 0.35rem;
+  margin: 0;
+  border-radius: var(--morphos-radius-full);
+  background: linear-gradient(
+    to right,
+    var(--morphos-color-accent) var(--slider-value, 0%),
+    var(--morphos-color-border) var(--slider-value, 0%)
+  );
+  cursor: pointer;
+}
+
+.morphos-slider[data-orientation="vertical"] {
+  writing-mode: vertical-lr;
+  direction: rtl;
+  width: 1.25rem;
+  height: 100%;
+}
+
+.morphos-slider[data-orientation="vertical"] > input[type="range"] {
+  width: 0.35rem;
+  height: 100%;
+  background: linear-gradient(
+    to top,
+    var(--morphos-color-accent) var(--slider-value, 0%),
+    var(--morphos-color-border) var(--slider-value, 0%)
+  );
+}
+
+.morphos-slider > input[type="range"]::-webkit-slider-thumb {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--morphos-radius-full);
+  background: var(--morphos-color-bg);
+  border: 2px solid var(--morphos-color-accent);
+  cursor: pointer;
+}
+
+.morphos-slider > input[type="range"]::-moz-range-thumb {
+  width: 1rem;
+  height: 1rem;
+  border-radius: var(--morphos-radius-full);
+  background: var(--morphos-color-bg);
+  border: 2px solid var(--morphos-color-accent);
+  cursor: pointer;
+}
+
+.morphos-slider > input[type="range"]:focus-visible {
+  outline: none;
+}
+
+.morphos-slider > input[type="range"]:focus-visible::-webkit-slider-thumb {
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-slider > input[type="range"]:focus-visible::-moz-range-thumb {
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-slider[data-disabled] {
+  opacity: 0.5;
+}
+
+.morphos-slider[data-disabled] > input[type="range"] {
+  cursor: not-allowed;
+}

package/src/inputs/switch.css

@@ -0,0 +1,46 @@
+/**
+ * Recipe for @morphos/inputs `Switch`. Apply with `class="morphos-switch"`
+ * on the `Switch` root (a `role="switch"` button).
+ */
+.morphos-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  width: 2.5rem;
+  height: 1.5rem;
+  padding: 2px;
+  border: none;
+  border-radius: var(--morphos-radius-full);
+  background: var(--morphos-color-border);
+  cursor: pointer;
+  transition: background var(--morphos-transition-fast);
+}
+
+.morphos-switch::before {
+  content: "";
+  width: 1.25rem;
+  height: 1.25rem;
+  border-radius: var(--morphos-radius-full);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  transform: translateX(0);
+  transition: transform var(--morphos-transition-fast);
+}
+
+.morphos-switch[data-checked] {
+  background: var(--morphos-color-accent);
+}
+
+.morphos-switch[data-checked]::before {
+  transform: translateX(1rem);
+}
+
+.morphos-switch:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-switch[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/inputs/toggle-group.css

@@ -0,0 +1,51 @@
+/**
+ * Recipe for @morphos/inputs `ToggleGroup` + `ToggleGroupItem`.
+ * Apply `class="morphos-toggle-group"` to the group and
+ * `class="morphos-toggle-group-item"` to each item.
+ */
+.morphos-toggle-group {
+  display: inline-flex;
+  gap: 1px;
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  overflow: hidden;
+}
+
+.morphos-toggle-group[data-orientation="vertical"] {
+  flex-direction: column;
+}
+
+.morphos-toggle-group[data-disabled] {
+  opacity: 0.5;
+}
+
+.morphos-toggle-group-item {
+  font: inherit;
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border: none;
+  background: var(--morphos-color-bg);
+  color: var(--morphos-color-text);
+  cursor: pointer;
+  transition: background var(--morphos-transition-fast), color var(--morphos-transition-fast);
+}
+
+.morphos-toggle-group-item:hover {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-toggle-group-item[data-pressed] {
+  background: var(--morphos-color-accent);
+  color: var(--morphos-color-accent-text);
+}
+
+.morphos-toggle-group-item:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+  z-index: 1;
+  position: relative;
+}
+
+.morphos-toggle-group-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

package/src/inputs/toggle.css

@@ -0,0 +1,37 @@
+/**
+ * Recipe for @morphos/inputs `Toggle`. Apply with `class="morphos-toggle"`.
+ */
+.morphos-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--morphos-space-2);
+  font: inherit;
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  background: transparent;
+  color: var(--morphos-color-text);
+  cursor: pointer;
+  transition: background var(--morphos-transition-fast), color var(--morphos-transition-fast);
+}
+
+.morphos-toggle:hover {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-toggle[data-pressed] {
+  background: var(--morphos-color-accent);
+  border-color: var(--morphos-color-accent);
+  color: var(--morphos-color-accent-text);
+}
+
+.morphos-toggle:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-toggle[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}