@morphos/styles 0.1.0

package/src/inputs.css

@@ -0,0 +1,22 @@
+/**
+ * All @morphos/inputs recipes in one file. Prefer importing individual
+ * files from `@morphos/styles/inputs/*.css` if you only need a few.
+ */
+@import "./tokens.css";
+@import "./inputs/button.css";
+@import "./inputs/input.css";
+@import "./inputs/checkbox.css";
+@import "./inputs/select.css";
+@import "./inputs/radio.css";
+@import "./inputs/switch.css";
+@import "./inputs/toggle.css";
+@import "./inputs/toggle-group.css";
+@import "./inputs/checkbox-group.css";
+@import "./inputs/slider.css";
+@import "./inputs/number-field.css";
+@import "./inputs/field.css";
+@import "./inputs/fieldset.css";
+@import "./inputs/form.css";
+@import "./inputs/otp-field.css";
+@import "./inputs/combobox.css";
+@import "./inputs/autocomplete.css";

package/src/layout/accordion.css

@@ -0,0 +1,67 @@
+/**
+ * Recipe for @morphos/layout `Accordion`.
+ * Apply `class="morphos-accordion"` to `Accordion`,
+ * `class="morphos-accordion-item"` to each `AccordionItem`,
+ * `class="morphos-accordion-trigger"` to each `AccordionTrigger`, and
+ * `class="morphos-accordion-content"` to each `AccordionContent`.
+ */
+.morphos-accordion {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  overflow: hidden;
+}
+
+.morphos-accordion-item {
+  border-bottom: 1px solid var(--morphos-color-border);
+}
+
+.morphos-accordion-item:last-child {
+  border-bottom: none;
+}
+
+.morphos-accordion-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  font: inherit;
+  font-weight: 500;
+  text-align: left;
+  padding: var(--morphos-space-3) var(--morphos-space-4);
+  border: none;
+  background: var(--morphos-color-bg);
+  color: var(--morphos-color-text);
+  cursor: pointer;
+}
+
+.morphos-accordion-trigger:hover {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-accordion-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+  z-index: 1;
+  position: relative;
+}
+
+.morphos-accordion-trigger::after {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform var(--morphos-transition-fast);
+}
+
+.morphos-accordion-trigger[data-expanded]::after {
+  transform: rotate(-135deg);
+}
+
+.morphos-accordion-content {
+  padding: 0 var(--morphos-space-4) var(--morphos-space-3);
+  color: var(--morphos-color-text-muted);
+}

package/src/layout/disclosure.css

@@ -0,0 +1,47 @@
+/**
+ * Recipe for @morphos/layout `Disclosure` (also exported as `Collapsible`).
+ * Apply `class="morphos-disclosure"` to `Disclosure`,
+ * `class="morphos-disclosure-trigger"` to `DisclosureTrigger`, and
+ * `class="morphos-disclosure-content"` to `DisclosureContent`.
+ */
+.morphos-disclosure {
+  display: flex;
+  flex-direction: column;
+}
+
+.morphos-disclosure-trigger {
+  display: flex;
+  align-items: center;
+  gap: var(--morphos-space-2);
+  font: inherit;
+  font-weight: 500;
+  padding: var(--morphos-space-2) 0;
+  border: none;
+  background: transparent;
+  color: var(--morphos-color-text);
+  cursor: pointer;
+}
+
+.morphos-disclosure-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-disclosure-trigger::before {
+  content: "";
+  width: 0.5rem;
+  height: 0.5rem;
+  border-right: 2px solid currentColor;
+  border-bottom: 2px solid currentColor;
+  transform: rotate(45deg);
+  transition: transform var(--morphos-transition-fast);
+}
+
+.morphos-disclosure-trigger[data-open]::before {
+  transform: rotate(-135deg);
+}
+
+.morphos-disclosure-content {
+  padding: var(--morphos-space-2) 0;
+  color: var(--morphos-color-text-muted);
+}

package/src/layout/menubar.css

@@ -0,0 +1,78 @@
+/**
+ * Recipe for @morphos/layout `Menubar`.
+ * Apply `class="morphos-menubar"` to `Menubar`,
+ * `class="morphos-menubar-trigger"` to each `MenubarTrigger`,
+ * `class="morphos-menubar-content"` to each `MenubarContent`,
+ * `class="morphos-menubar-item"` to each `MenubarItem`, and
+ * `class="morphos-menubar-separator"` to each `MenubarSeparator`.
+ */
+.morphos-menubar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: var(--morphos-space-1);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+}
+
+.morphos-menubar-trigger {
+  font: inherit;
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border: none;
+  border-radius: var(--morphos-radius-sm);
+  background: transparent;
+  color: var(--morphos-color-text);
+  cursor: pointer;
+}
+
+.morphos-menubar-trigger:hover,
+.morphos-menubar-trigger[aria-expanded="true"] {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-menubar-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-menubar-content {
+  /* Portaled to document.body, so it can't inherit the page's font — set it explicitly. */
+  font-family: var(--morphos-font);
+  z-index: 100;
+  min-width: 10rem;
+  margin: 0;
+  padding: var(--morphos-space-1);
+  list-style: none;
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+}
+
+.morphos-menubar-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--morphos-space-2);
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border-radius: var(--morphos-radius-sm);
+  cursor: pointer;
+}
+
+.morphos-menubar-item:hover,
+.morphos-menubar-item:focus-visible {
+  outline: none;
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-menubar-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.morphos-menubar-separator {
+  height: 1px;
+  margin: var(--morphos-space-1) 0;
+  background: var(--morphos-color-border);
+  list-style: none;
+}

package/src/layout/navigation-menu.css

@@ -0,0 +1,87 @@
+/**
+ * Recipe for @morphos/layout `NavigationMenu`.
+ * Apply `class="morphos-navigation-menu"` to `NavigationMenu`,
+ * `class="morphos-navigation-menu-list"` to `NavigationMenuList`,
+ * `class="morphos-navigation-menu-item"` to each `NavigationMenuItem`,
+ * `class="morphos-navigation-menu-trigger"` to each `NavigationMenuTrigger`,
+ * `class="morphos-navigation-menu-content"` to each `NavigationMenuContent`,
+ * and `class="morphos-navigation-menu-link"` to each `NavigationMenuLink`.
+ */
+.morphos-navigation-menu-list {
+  display: flex;
+  align-items: center;
+  gap: var(--morphos-space-2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.morphos-navigation-menu[data-orientation="vertical"] .morphos-navigation-menu-list {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.morphos-navigation-menu-item {
+  position: relative;
+}
+
+.morphos-navigation-menu-trigger {
+  font: inherit;
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border: none;
+  border-radius: var(--morphos-radius-md);
+  background: transparent;
+  color: var(--morphos-color-text);
+  cursor: pointer;
+}
+
+.morphos-navigation-menu-trigger:hover,
+.morphos-navigation-menu-item[data-active] .morphos-navigation-menu-trigger {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-navigation-menu-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-navigation-menu-content {
+  position: absolute;
+  top: calc(100% + var(--morphos-space-1));
+  left: 0;
+  z-index: 100;
+  display: flex;
+  flex-direction: column;
+  gap: var(--morphos-space-1);
+  min-width: 16rem;
+  padding: var(--morphos-space-2);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+}
+
+.morphos-navigation-menu-content[hidden] {
+  display: none;
+}
+
+.morphos-navigation-menu-link {
+  display: block;
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border-radius: var(--morphos-radius-sm);
+  color: var(--morphos-color-accent);
+  text-decoration: none;
+}
+
+.morphos-navigation-menu-link:hover {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-navigation-menu-link strong {
+  display: block;
+}
+
+.morphos-navigation-menu-link span {
+  display: block;
+  font-size: 0.875rem;
+  color: var(--morphos-color-text-muted);
+}

package/src/layout/scroll-area.css

@@ -0,0 +1,82 @@
+/**
+ * Recipe for @morphos/layout `ScrollArea`.
+ * Apply `class="morphos-scroll-area"` to `ScrollArea`,
+ * `class="morphos-scroll-area-viewport"` to `ScrollAreaViewport`,
+ * `class="morphos-scroll-area-scrollbar"` to `ScrollAreaScrollbar`, and
+ * `class="morphos-scroll-area-thumb"` to `ScrollAreaThumb`.
+ * The scrollbar/thumb here are a decorative, ARIA-described overlay — actual
+ * scrolling happens natively on the viewport underneath.
+ */
+.morphos-scroll-area {
+  position: relative;
+  overflow: hidden;
+}
+
+.morphos-scroll-area-viewport {
+  scrollbar-width: none;
+}
+
+.morphos-scroll-area-viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.morphos-scroll-area-scrollbar {
+  position: absolute;
+  padding: 1px;
+  background: transparent;
+  transition: background var(--morphos-transition-fast);
+}
+
+.morphos-scroll-area-scrollbar[data-orientation="vertical"] {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 0.375rem;
+}
+
+.morphos-scroll-area-scrollbar[data-orientation="horizontal"] {
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 0.375rem;
+}
+
+.morphos-scroll-area[data-scrollable] .morphos-scroll-area-scrollbar {
+  background: var(--morphos-color-bg-subtle);
+}
+
+.morphos-scroll-area-thumb {
+  /* Size/position come from ScrollAreaThumb's own --morphos-thumb-size/-offset, computed from the real scroll metrics. */
+  position: absolute;
+  border-radius: var(--morphos-radius-full);
+  background: var(--morphos-color-border-hover);
+}
+
+.morphos-scroll-area-scrollbar[data-orientation="vertical"] .morphos-scroll-area-thumb {
+  left: 0;
+  right: 0;
+  top: var(--morphos-thumb-offset, 0%);
+  height: var(--morphos-thumb-size, 100%);
+}
+
+.morphos-scroll-area-scrollbar[data-orientation="horizontal"] .morphos-scroll-area-thumb {
+  top: 0;
+  bottom: 0;
+  left: var(--morphos-thumb-offset, 0%);
+  width: var(--morphos-thumb-size, 100%);
+}
+
+/* type="hover" — the scrollbar fades in only while the pointer is over the scroll area. */
+.morphos-scroll-area[data-type="hover"] .morphos-scroll-area-scrollbar {
+  opacity: 0;
+  transition: opacity var(--morphos-transition-medium);
+}
+
+.morphos-scroll-area[data-type="hover"]:hover .morphos-scroll-area-scrollbar {
+  opacity: 1;
+}
+
+/* type="hidden" — the custom scrollbar never shows; content still scrolls natively. */
+.morphos-scroll-area[data-type="hidden"] .morphos-scroll-area-scrollbar {
+  display: none;
+}

package/src/layout/separator.css

@@ -0,0 +1,21 @@
+/**
+ * Recipe for @morphos/layout `Separator`. Apply with
+ * `class="morphos-separator"`.
+ */
+.morphos-separator {
+  background: var(--morphos-color-border);
+  border: none;
+}
+
+.morphos-separator[data-orientation="horizontal"] {
+  width: 100%;
+  height: 1px;
+}
+
+.morphos-separator[data-orientation="vertical"] {
+  width: 1px;
+  /* Not `height: 100%` — that requires a parent with a definite height (rare
+     inside a content-sized flex row) and, per spec, an explicit non-auto
+     height disables align-self: stretch even when it fails to resolve. */
+  align-self: stretch;
+}

package/src/layout/tabs.css

@@ -0,0 +1,71 @@
+/**
+ * Recipe for @morphos/layout `Tabs`.
+ * Apply `class="morphos-tabs"` to `Tabs`, `class="morphos-tabs-list"` to
+ * `TabList`, `class="morphos-tabs-tab"` to each `Tab`, and
+ * `class="morphos-tabs-panel"` to each `TabPanel`.
+ */
+.morphos-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: var(--morphos-space-3);
+}
+
+.morphos-tabs[data-orientation="vertical"] {
+  flex-direction: row;
+}
+
+.morphos-tabs-list {
+  display: flex;
+  gap: var(--morphos-space-1);
+  border-bottom: 1px solid var(--morphos-color-border);
+}
+
+.morphos-tabs-list[aria-orientation="vertical"] {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 1px solid var(--morphos-color-border);
+}
+
+.morphos-tabs-tab {
+  font: inherit;
+  padding: var(--morphos-space-2) var(--morphos-space-4);
+  border: none;
+  border-bottom: 2px solid transparent;
+  background: transparent;
+  color: var(--morphos-color-text-muted);
+  cursor: pointer;
+  transition: color var(--morphos-transition-fast), border-color var(--morphos-transition-fast);
+}
+
+.morphos-tabs-list[aria-orientation="vertical"] .morphos-tabs-tab {
+  border-bottom: none;
+  border-right: 2px solid transparent;
+  text-align: left;
+}
+
+.morphos-tabs-tab:hover {
+  color: var(--morphos-color-text);
+}
+
+.morphos-tabs-tab[data-selected] {
+  color: var(--morphos-color-accent);
+  border-color: var(--morphos-color-accent);
+}
+
+.morphos-tabs-tab:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-tabs-tab[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.morphos-tabs-panel {
+  color: var(--morphos-color-text);
+}
+
+.morphos-tabs-panel:focus-visible {
+  outline: none;
+}

package/src/layout/toolbar.css

@@ -0,0 +1,57 @@
+/**
+ * Recipe for @morphos/layout `Toolbar`.
+ * Apply `class="morphos-toolbar"` to `Toolbar`,
+ * `class="morphos-toolbar-button"` to each `ToolbarButton`, and
+ * `class="morphos-toolbar-separator"` to each `ToolbarSeparator`.
+ */
+.morphos-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--morphos-space-1);
+  padding: var(--morphos-space-1);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+}
+
+.morphos-toolbar[data-orientation="vertical"] {
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.morphos-toolbar-button {
+  font: inherit;
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border: none;
+  border-radius: var(--morphos-radius-sm);
+  background: transparent;
+  color: var(--morphos-color-text);
+  cursor: pointer;
+}
+
+.morphos-toolbar-button:hover {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-toolbar-button:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+.morphos-toolbar-button[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.morphos-toolbar-separator {
+  background: var(--morphos-color-border);
+}
+
+.morphos-toolbar-separator[data-orientation="vertical"] {
+  width: 1px;
+  align-self: stretch;
+}
+
+.morphos-toolbar-separator[data-orientation="horizontal"] {
+  height: 1px;
+  width: 100%;
+}

package/src/layout.css

@@ -0,0 +1,13 @@
+/**
+ * All @morphos/layout recipes in one file. Prefer importing individual
+ * files from `@morphos/styles/layout/*.css` if you only need a few.
+ */
+@import "./tokens.css";
+@import "./layout/accordion.css";
+@import "./layout/tabs.css";
+@import "./layout/disclosure.css";
+@import "./layout/separator.css";
+@import "./layout/scroll-area.css";
+@import "./layout/toolbar.css";
+@import "./layout/menubar.css";
+@import "./layout/navigation-menu.css";

package/src/overlays/alert-dialog.css

@@ -0,0 +1,100 @@
+/**
+ * Recipe for @morphos/overlays `AlertDialog`.
+ * Apply `class="morphos-alert-dialog-content"` to `AlertDialogContent`,
+ * `class="morphos-alert-dialog-title"` to `AlertDialogTitle`,
+ * `class="morphos-alert-dialog-description"` to `AlertDialogDescription`,
+ * `class="morphos-alert-dialog-action"` to `AlertDialogAction`, and
+ * `class="morphos-alert-dialog-cancel"` to `AlertDialogCancel`.
+ * `AlertDialogContent` also renders a sibling backdrop `<div data-morphos-backdrop>`,
+ * styled below without needing its own class. Clicking it closes the dialog
+ * (like Dialog/Drawer) unless `closeOnOutsideClick={false}` is passed.
+ */
+[data-morphos-backdrop] {
+  position: fixed;
+  inset: 0;
+  z-index: 100;
+  background: rgba(0, 0, 0, 0.4);
+  animation: morphos-fade-in var(--morphos-transition-medium);
+}
+
+.morphos-alert-dialog-content {
+  /* Portaled to document.body, so it can't inherit the page's font — set it explicitly. */
+  font-family: var(--morphos-font);
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 101;
+  width: 100%;
+  max-width: 26rem;
+  padding: var(--morphos-space-4);
+  background: var(--morphos-color-bg);
+  color: var(--morphos-color-text);
+  border-radius: var(--morphos-radius-lg);
+  animation: morphos-scale-in var(--morphos-transition-medium);
+}
+
+.morphos-alert-dialog-content:focus-visible {
+  outline: none;
+}
+
+.morphos-alert-dialog-title {
+  margin: 0 0 var(--morphos-space-2);
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+
+.morphos-alert-dialog-description {
+  margin: 0 0 var(--morphos-space-4);
+  color: var(--morphos-color-text-muted);
+}
+
+.morphos-alert-dialog-action,
+.morphos-alert-dialog-cancel {
+  font: inherit;
+  padding: var(--morphos-space-2) var(--morphos-space-4);
+  border-radius: var(--morphos-radius-md);
+  border: 1px solid transparent;
+  cursor: pointer;
+}
+
+.morphos-alert-dialog-action {
+  background: var(--morphos-color-danger);
+  color: var(--morphos-color-accent-text);
+}
+
+.morphos-alert-dialog-action:hover {
+  opacity: 0.9;
+}
+
+.morphos-alert-dialog-cancel {
+  background: transparent;
+  border-color: var(--morphos-color-border);
+  color: var(--morphos-color-text);
+}
+
+.morphos-alert-dialog-cancel:hover {
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-alert-dialog-action:focus-visible,
+.morphos-alert-dialog-cancel:focus-visible {
+  outline: none;
+  box-shadow: var(--morphos-focus-ring);
+}
+
+@keyframes morphos-scale-in {
+  from {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes morphos-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}

package/src/overlays/context-menu.css

@@ -0,0 +1,51 @@
+/**
+ * Recipe for @morphos/overlays `ContextMenu`.
+ * Apply `class="morphos-context-menu-content"` to `ContextMenuContent` and
+ * `class="morphos-context-menu-item"` to each `ContextMenuItem`.
+ * Positioning (`top`/`left`) is set inline by the component itself — this
+ * recipe only styles appearance.
+ */
+.morphos-context-menu-content {
+  /* Portaled to document.body, so it can't inherit the page's font — set it explicitly. */
+  font-family: var(--morphos-font);
+  z-index: 100;
+  min-width: 10rem;
+  margin: 0;
+  padding: var(--morphos-space-1);
+  list-style: none;
+  color: var(--morphos-color-text);
+  background: var(--morphos-color-bg);
+  border: 1px solid var(--morphos-color-border);
+  border-radius: var(--morphos-radius-md);
+  animation: morphos-fade-in var(--morphos-transition-fast);
+}
+
+.morphos-context-menu-content:focus-visible {
+  outline: none;
+}
+
+.morphos-context-menu-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--morphos-space-2);
+  padding: var(--morphos-space-2) var(--morphos-space-3);
+  border-radius: var(--morphos-radius-sm);
+  cursor: pointer;
+}
+
+.morphos-context-menu-item:hover,
+.morphos-context-menu-item:focus-visible {
+  outline: none;
+  background: var(--morphos-color-bg-hover);
+}
+
+.morphos-context-menu-item[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@keyframes morphos-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}