@vanrot/ui 0.0.0

package/src/primitives/button/ui.button.css

@@ -0,0 +1,109 @@
+.vr-button {
+  align-items: center;
+  background: var(--vr-color-brand);
+  border: 1px solid var(--vr-color-brand);
+  border-radius: var(--vr-radius-md);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  color: var(--vr-color-brand-foreground);
+  cursor: pointer;
+  display: inline-flex;
+  font: 500 var(--vr-text-sm) / 1 var(--vr-font-sans);
+  gap: var(--vr-space-2);
+  height: 2.25rem;
+  justify-content: center;
+  padding: 0 var(--vr-space-4);
+  transition:
+    background var(--vr-motion-fast),
+    border-color var(--vr-motion-fast),
+    box-shadow var(--vr-motion-fast),
+    color var(--vr-motion-fast),
+    transform var(--vr-motion-fast);
+  white-space: nowrap;
+}
+
+.vr-button:hover {
+  background: color-mix(in srgb, var(--vr-color-brand) 88%, white);
+  border-color: color-mix(in srgb, var(--vr-color-brand) 88%, white);
+}
+
+.vr-button:active {
+  transform: translateY(1px);
+}
+
+.vr-button:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vr-color-focus) 28%, transparent);
+  outline: 2px solid var(--vr-color-focus);
+  outline-offset: 2px;
+}
+
+.vr-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+  transform: none;
+}
+
+.vr-button-secondary {
+  background: var(--vr-surface-raised);
+  border-color: var(--vr-color-line);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  color: var(--vr-color-text);
+}
+
+.vr-button-secondary:hover {
+  background: var(--vr-surface-popover);
+  border-color: var(--vr-color-line);
+}
+
+.vr-button-outline {
+  background: transparent;
+  border-color: var(--vr-color-line);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
+  color: var(--vr-color-text);
+}
+
+.vr-button-outline:hover {
+  background: var(--vr-surface-muted);
+  border-color: var(--vr-color-line);
+}
+
+.vr-button-ghost {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--vr-color-text);
+}
+
+.vr-button-ghost:hover {
+  background: var(--vr-surface-muted);
+  border-color: transparent;
+}
+
+.vr-button-danger {
+  background: var(--vr-color-danger);
+  border-color: var(--vr-color-danger);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  color: #fff;
+}
+
+.vr-button-danger:hover {
+  background: color-mix(in srgb, var(--vr-color-danger) 82%, #000);
+  border-color: color-mix(in srgb, var(--vr-color-danger) 82%, #000);
+}
+
+.vr-button-link {
+  background: transparent;
+  border-color: transparent;
+  box-shadow: none;
+  color: var(--vr-color-text);
+  font-weight: 400;
+  height: auto;
+  padding-inline: 0;
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.vr-button-link:hover {
+  background: transparent;
+  border-color: transparent;
+  color: var(--vr-color-muted);
+}

package/src/primitives/button/ui.button.html

@@ -0,0 +1,3 @@
+<vr-button type="button">
+  {{ label() }}
+</vr-button>

package/src/primitives/button/ui.button.test.ts

@@ -0,0 +1,12 @@
+// @vitest-environment jsdom
+
+import { testComponent } from '@vanrot/testing';
+import { UiButton } from './ui.button.ts';
+
+const buttonCopy = {
+  label: 'Button',
+} as const;
+
+testComponent(UiButton).can('render its label', function (screen) {
+  screen.expect.text(buttonCopy.label);
+});

package/src/primitives/button/ui.button.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const buttonCopy = {
+  label: 'Button',
+} as const;
+
+export class UiButton {
+  label = signal(buttonCopy.label);
+}

package/src/primitives/button/usage.home.html

@@ -0,0 +1,3 @@
+  <vr-button variant.default type="button">
+    {{ t('home.cta') }}
+  </vr-button>

package/src/primitives/card/ui.card.css

@@ -0,0 +1,39 @@
+.vr-card {
+  background: var(--vr-surface-card);
+  border: 1px solid var(--vr-color-line);
+  border-radius: var(--vr-radius-md);
+  box-shadow: var(--vr-shadow-1);
+  color: var(--vr-color-text);
+  display: block;
+  padding: var(--vr-space-5);
+}
+
+.vr-card-title {
+  font: 600 var(--vr-text-lg) / var(--vr-leading-tight) var(--vr-font-sans);
+  margin: 0;
+}
+
+.vr-card-description {
+  color: var(--vr-color-muted);
+  font: 400 var(--vr-text-sm) / var(--vr-leading-normal) var(--vr-font-sans);
+  margin: var(--vr-space-2) 0 0;
+}
+
+.vr-card-muted {
+  background: var(--vr-surface-muted);
+  box-shadow: var(--vr-shadow-0);
+}
+
+.vr-card-interactive {
+  cursor: pointer;
+  transition:
+    border-color var(--vr-motion-fast),
+    box-shadow var(--vr-motion-fast),
+    transform var(--vr-motion-fast);
+}
+
+.vr-card-interactive:hover {
+  border-color: color-mix(in srgb, var(--vr-color-brand) 42%, var(--vr-color-line));
+  box-shadow: var(--vr-shadow-2);
+  transform: translateY(-1px);
+}

package/src/primitives/card/ui.card.html

@@ -0,0 +1,4 @@
+<vr-card>
+  <h3 class="vr-card-title">{{ title() }}</h3>
+  <p class="vr-card-description">{{ description() }}</p>
+</vr-card>

package/src/primitives/card/ui.card.test.ts

@@ -0,0 +1,14 @@
+// @vitest-environment jsdom
+
+import { testComponent } from '@vanrot/testing';
+import { UiCard } from './ui.card.ts';
+
+const cardCopy = {
+  title: 'Card',
+  description: 'A focused October surface.',
+} as const;
+
+testComponent(UiCard).can('render its title and description', function (screen) {
+  screen.expect.text(cardCopy.title);
+  screen.expect.text(cardCopy.description);
+});

package/src/primitives/card/ui.card.ts

@@ -0,0 +1,11 @@
+import { signal } from '@vanrot/runtime';
+
+const cardCopy = {
+  title: 'Card',
+  description: 'A focused October surface.',
+} as const;
+
+export class UiCard {
+  title = signal(cardCopy.title);
+  description = signal(cardCopy.description);
+}

package/src/primitives/card/usage.home.html

@@ -0,0 +1,4 @@
+  <vr-card variant.interactive>
+    <h3>{{ t('home.card.title') }}</h3>
+    <p>{{ t('home.card.description') }}</p>
+  </vr-card>

package/src/primitives/checkbox/ui.checkbox.css

@@ -0,0 +1,3 @@
+.vr-checkbox {
+  accent-color: var(--vr-color-brand);
+}

package/src/primitives/checkbox/ui.checkbox.html

@@ -0,0 +1 @@
+<vr-checkbox size.md tone.default name="accepted" aria-label="Accept terms"></vr-checkbox>

package/src/primitives/checkbox/ui.checkbox.test.ts

@@ -0,0 +1,8 @@
+import { describe, expect, it } from 'vitest';
+import { UiCheckbox } from './ui.checkbox.ts';
+
+describe('UiCheckbox', () => {
+  it('exports the checkbox primitive class', () => {
+    expect(UiCheckbox).toBeTypeOf('function');
+  });
+});

package/src/primitives/checkbox/ui.checkbox.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const checkboxCopy = {
+  label: 'Checkbox',
+} as const;
+
+export class UiCheckbox {
+  label = signal(checkboxCopy.label);
+}

package/src/primitives/checkbox/usage.home.html

@@ -0,0 +1 @@
+  <vr-checkbox size.md tone.default name="accepted" aria-label="Accept terms"></vr-checkbox>

package/src/primitives/command-menu/ui.command-menu.css

@@ -0,0 +1,39 @@
+.vr-command-menu {
+  background: var(--vr-surface-popover);
+  border: 1px solid var(--vr-color-line);
+  border-radius: var(--vr-radius-md);
+  box-shadow: var(--vr-shadow-2);
+  color: var(--vr-color-text);
+  overflow: hidden;
+  width: min(100%, 22rem);
+}
+
+.vr-command-menu-input {
+  background: transparent;
+  border: 0;
+  border-bottom: 1px solid var(--vr-color-line);
+  color: inherit;
+  outline: none;
+  padding: var(--vr-space-3);
+  width: 100%;
+}
+
+.vr-command-menu-list {
+  padding: var(--vr-space-2);
+}
+
+.vr-command-menu-item {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--vr-radius-sm);
+  color: inherit;
+  display: flex;
+  justify-content: space-between;
+  padding: var(--vr-space-2) var(--vr-space-3);
+  width: 100%;
+}
+
+.vr-command-menu-item[aria-selected='true'] {
+  background: var(--vr-surface-raised);
+}

package/src/primitives/command-menu/ui.command-menu.html

@@ -0,0 +1,9 @@
+<vr-command-menu density.comfortable>
+  <vr-command-menu-input placeholder="Search docs..."></vr-command-menu-input>
+  <vr-command-menu-list>
+    <vr-command-menu-group heading="Components">
+      <vr-command-menu-item value.dialog>Dialog</vr-command-menu-item>
+      <vr-command-menu-item value.dropdown>Dropdown</vr-command-menu-item>
+    </vr-command-menu-group>
+  </vr-command-menu-list>
+</vr-command-menu>

package/src/primitives/command-menu/ui.command-menu.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import { UiCommandMenu } from './ui.command-menu.ts';
+
+const commandMenuSelector = 'vr-command-menu';
+
+describe('UiCommandMenu', () => {
+  it('exposes stable demo copy', () => {
+    const component = new UiCommandMenu();
+
+    expect(component.label()).toBe('Command menu');
+    expect(commandMenuSelector).toBe('vr-command-menu');
+  });
+});

package/src/primitives/command-menu/ui.command-menu.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const commandMenuCopy = {
+  label: 'Command menu',
+} as const;
+
+export class UiCommandMenu {
+  label = signal(commandMenuCopy.label);
+}

package/src/primitives/command-menu/usage.home.html

@@ -0,0 +1,6 @@
+<vr-command-menu density.comfortable>
+  <vr-command-menu-input placeholder="Search docs..."></vr-command-menu-input>
+  <vr-command-menu-list>
+    <vr-command-menu-item value.dialog>Dialog</vr-command-menu-item>
+  </vr-command-menu-list>
+</vr-command-menu>

package/src/primitives/container/ui.container.css

@@ -0,0 +1,20 @@
+.vr-container {
+  margin-inline: auto;
+  width: min(100% - (var(--vr-space-4) * 2), 72rem);
+}
+
+.vr-container-sm {
+  max-width: 40rem;
+}
+
+.vr-container-md {
+  max-width: 56rem;
+}
+
+.vr-container-lg {
+  max-width: 72rem;
+}
+
+.vr-container-xl {
+  max-width: 88rem;
+}

package/src/primitives/container/ui.container.html

@@ -0,0 +1,3 @@
+<vr-container size.md>
+  {{ label() }}
+</vr-container>

package/src/primitives/container/ui.container.test.ts

@@ -0,0 +1,12 @@
+// @vitest-environment jsdom
+
+import { testComponent } from '@vanrot/testing';
+import { UiContainer } from './ui.container.ts';
+
+const containerCopy = {
+  label: 'Container',
+} as const;
+
+testComponent(UiContainer).can('render its label', function (screen) {
+  screen.expect.text(containerCopy.label);
+});

package/src/primitives/container/ui.container.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const containerCopy = {
+  label: 'Container',
+} as const;
+
+export class UiContainer {
+  label = signal(containerCopy.label);
+}

package/src/primitives/container/usage.home.html

@@ -0,0 +1,3 @@
+  <vr-container size.lg>
+    {{ t('home.container') }}
+  </vr-container>

package/src/primitives/dialog/ui.dialog.css

@@ -0,0 +1,107 @@
+.vr-dialog {
+  display: contents;
+}
+
+.vr-dialog-trigger {
+  display: contents;
+}
+
+.vr-dialog-content {
+  background: var(--vr-surface-popover);
+  border: 1px solid var(--vr-color-line);
+  border-radius: var(--vr-radius-lg);
+  box-shadow: var(--vr-shadow-3);
+  display: flex;
+  flex-direction: column;
+  left: 50%;
+  max-width: 512px;
+  padding: var(--vr-space-6);
+  position: fixed;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  transition: opacity var(--vr-motion-normal), transform var(--vr-motion-normal);
+  width: calc(100% - var(--vr-space-8));
+  z-index: var(--vr-z-modal);
+}
+
+.vr-dialog-content[hidden] {
+  display: none;
+}
+
+.vr-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vr-space-1);
+  margin-bottom: var(--vr-space-4);
+}
+
+.vr-dialog-title {
+  color: var(--vr-color-text);
+  font: 600 var(--vr-text-lg) / var(--vr-leading-tight) var(--vr-font-sans);
+  margin: 0;
+}
+
+.vr-dialog-description {
+  color: var(--vr-color-muted);
+  font: 400 var(--vr-text-sm) / var(--vr-leading-normal) var(--vr-font-sans);
+  margin: 0;
+}
+
+.vr-dialog-footer {
+  border-top: 1px solid var(--vr-color-line);
+  display: flex;
+  gap: var(--vr-space-2);
+  justify-content: flex-end;
+  margin-top: var(--vr-space-4);
+  padding-top: var(--vr-space-4);
+}
+
+.vr-dialog-close {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--vr-radius-md);
+  color: var(--vr-color-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 2rem;
+  justify-content: center;
+  padding: 0;
+  position: absolute;
+  right: var(--vr-space-4);
+  top: var(--vr-space-4);
+  transition: background var(--vr-motion-fast), color var(--vr-motion-fast);
+  width: 2rem;
+}
+
+.vr-dialog-close:hover {
+  background: var(--vr-surface-raised);
+  color: var(--vr-color-text);
+}
+
+.vr-dialog-close:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vr-color-focus) 28%, transparent);
+  outline: 2px solid var(--vr-color-focus);
+  outline-offset: 2px;
+}
+
+/* Size modifiers — applied on root or directly on content */
+.vr-dialog-size-sm .vr-dialog-content,
+.vr-dialog-content.vr-dialog-size-sm {
+  max-width: 400px;
+}
+
+.vr-dialog-size-lg .vr-dialog-content,
+.vr-dialog-content.vr-dialog-size-lg {
+  max-width: 640px;
+}
+
+.vr-dialog-motion-instant .vr-dialog-content,
+.vr-dialog-content.vr-dialog-motion-instant {
+  transition: none;
+}
+
+.vr-dialog-motion-subtle .vr-dialog-content,
+.vr-dialog-content.vr-dialog-motion-subtle {
+  transition: opacity var(--vr-motion-fast), transform var(--vr-motion-fast);
+}

package/src/primitives/dialog/ui.dialog.html

@@ -0,0 +1,15 @@
+<vr-dialog size.md>
+  <vr-dialog-trigger>
+    <vr-button type="button">Open dialog</vr-button>
+  </vr-dialog-trigger>
+  <vr-dialog-content>
+    <vr-dialog-header>
+      <vr-dialog-title>{{ label() }}</vr-dialog-title>
+      <vr-dialog-description>Review account details before saving.</vr-dialog-description>
+    </vr-dialog-header>
+    <vr-dialog-footer>
+      <vr-button variant.secondary type="button">Cancel</vr-button>
+      <vr-button type="button">Save</vr-button>
+    </vr-dialog-footer>
+  </vr-dialog-content>
+</vr-dialog>

package/src/primitives/dialog/ui.dialog.test.ts

@@ -0,0 +1,13 @@
+import { describe, expect, it } from 'vitest';
+import { UiDialog } from './ui.dialog.ts';
+
+const dialogSelector = 'vr-dialog';
+
+describe('UiDialog', () => {
+  it('exposes stable demo copy', () => {
+    const component = new UiDialog();
+
+    expect(component.label()).toBe('Dialog');
+    expect(dialogSelector).toBe('vr-dialog');
+  });
+});

package/src/primitives/dialog/ui.dialog.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const dialogCopy = {
+  label: 'Dialog',
+} as const;
+
+export class UiDialog {
+  label = signal(dialogCopy.label);
+}

package/src/primitives/dialog/usage.home.html

@@ -0,0 +1,8 @@
+<vr-dialog size.md>
+  <vr-dialog-trigger>
+    <vr-button type="button">Open dialog</vr-button>
+  </vr-dialog-trigger>
+  <vr-dialog-content>
+    <vr-dialog-title>Dialog</vr-dialog-title>
+  </vr-dialog-content>
+</vr-dialog>

package/src/primitives/drawer/ui.drawer.css

@@ -0,0 +1,132 @@
+.vr-drawer {
+  display: contents;
+}
+
+.vr-drawer-trigger {
+  display: contents;
+}
+
+.vr-drawer-content {
+  background: var(--vr-surface-raised);
+  border: 1px solid var(--vr-color-line);
+  box-shadow: var(--vr-shadow-3);
+  display: flex;
+  flex-direction: column;
+  max-height: 100dvh;
+  overflow-y: auto;
+  padding: var(--vr-space-6);
+  position: fixed;
+  transition: transform var(--vr-motion-normal);
+  z-index: var(--vr-z-modal);
+}
+
+.vr-drawer-content[hidden] {
+  display: none;
+}
+
+.vr-drawer-side-right .vr-drawer-content,
+.vr-drawer-content.vr-drawer-side-right {
+  border-left: 1px solid var(--vr-color-line);
+  border-radius: var(--vr-radius-lg) 0 0 var(--vr-radius-lg);
+  bottom: 0;
+  right: 0;
+  top: 0;
+  width: 320px;
+}
+
+.vr-drawer-side-left .vr-drawer-content,
+.vr-drawer-content.vr-drawer-side-left {
+  border-radius: 0 var(--vr-radius-lg) var(--vr-radius-lg) 0;
+  border-right: 1px solid var(--vr-color-line);
+  bottom: 0;
+  left: 0;
+  top: 0;
+  width: 320px;
+}
+
+.vr-drawer-side-top .vr-drawer-content,
+.vr-drawer-content.vr-drawer-side-top {
+  border-bottom: 1px solid var(--vr-color-line);
+  border-radius: 0 0 var(--vr-radius-lg) var(--vr-radius-lg);
+  left: 0;
+  max-height: 50dvh;
+  right: 0;
+  top: 0;
+}
+
+.vr-drawer-side-bottom .vr-drawer-content,
+.vr-drawer-content.vr-drawer-side-bottom {
+  border-radius: var(--vr-radius-lg) var(--vr-radius-lg) 0 0;
+  border-top: 1px solid var(--vr-color-line);
+  bottom: 0;
+  left: 0;
+  max-height: 50dvh;
+  right: 0;
+}
+
+.vr-drawer-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--vr-space-1);
+  margin-bottom: var(--vr-space-4);
+}
+
+.vr-drawer-title {
+  color: var(--vr-color-text);
+  font: 600 var(--vr-text-lg) / var(--vr-leading-tight) var(--vr-font-sans);
+  margin: 0;
+}
+
+.vr-drawer-description {
+  color: var(--vr-color-muted);
+  font: 400 var(--vr-text-sm) / var(--vr-leading-normal) var(--vr-font-sans);
+  margin: 0;
+}
+
+.vr-drawer-footer {
+  border-top: 1px solid var(--vr-color-line);
+  display: flex;
+  gap: var(--vr-space-2);
+  justify-content: flex-end;
+  margin-top: auto;
+  padding-top: var(--vr-space-4);
+}
+
+.vr-drawer-close {
+  align-items: center;
+  background: transparent;
+  border: none;
+  border-radius: var(--vr-radius-md);
+  color: var(--vr-color-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: 2rem;
+  justify-content: center;
+  padding: 0;
+  position: absolute;
+  right: var(--vr-space-4);
+  top: var(--vr-space-4);
+  transition: background var(--vr-motion-fast), color var(--vr-motion-fast);
+  width: 2rem;
+}
+
+.vr-drawer-close:hover {
+  background: var(--vr-surface-popover);
+  color: var(--vr-color-text);
+}
+
+.vr-drawer-close:focus-visible {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--vr-color-focus) 28%, transparent);
+  outline: 2px solid var(--vr-color-focus);
+  outline-offset: 2px;
+}
+
+.vr-drawer-size-sm .vr-drawer-content,
+.vr-drawer-content.vr-drawer-size-sm {
+  width: 240px;
+}
+
+.vr-drawer-size-lg .vr-drawer-content,
+.vr-drawer-content.vr-drawer-size-lg {
+  width: 480px;
+}