@vanrot/ui 0.0.0

package/src/primitives/layout/ui.layout.ts

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

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

@@ -0,0 +1,8 @@
+  <vr-layout>
+    <vr-header>{{ t('home.header') }}</vr-header>
+    <vr-container size.lg>
+      <vr-section spacing.md>
+        {{ t('home.section') }}
+      </vr-section>
+    </vr-container>
+  </vr-layout>

package/src/primitives/list/ui.list.css

@@ -0,0 +1,6 @@
+.vr-list {
+  display: grid;
+  gap: var(--vr-space-2);
+  margin: 0;
+  padding-inline-start: var(--vr-space-5);
+}

package/src/primitives/list/ui.list.html

@@ -0,0 +1,3 @@
+<vr-list marker.check density.compact>
+  <vr-list-item>Paid invoice</vr-list-item>
+</vr-list>

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

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

package/src/primitives/list/ui.list.ts

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

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

@@ -0,0 +1,3 @@
+  <vr-list marker.check density.compact>
+    <vr-list-item>Paid invoice</vr-list-item>
+  </vr-list>

package/src/primitives/list-item/ui.list-item.css

@@ -0,0 +1,3 @@
+.vr-list-item {
+  color: var(--vr-color-text);
+}

package/src/primitives/list-item/ui.list-item.html

@@ -0,0 +1 @@
+<vr-list-item>Paid invoice</vr-list-item>

package/src/primitives/list-item/ui.list-item.test.ts

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

package/src/primitives/list-item/ui.list-item.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const listItemCopy = {
+  label: 'List item',
+} as const;
+
+export class UiListItem {
+  label = signal(listItemCopy.label);
+}

package/src/primitives/list-item/usage.home.html

@@ -0,0 +1 @@
+  <vr-list-item>Paid invoice</vr-list-item>

package/src/primitives/loader/ui.loader.css

@@ -0,0 +1,113 @@
+.vr-loader {
+  align-items: center;
+  color: var(--vr-color-muted);
+  display: inline-flex;
+  font: 500 var(--vr-text-sm) / 1 var(--vr-font-sans);
+  gap: var(--vr-space-2);
+}
+
+/* Default variant = spinner */
+.vr-loader::before {
+  animation: vr-loader-spin 0.65s linear infinite;
+  border: 2px solid var(--vr-color-line);
+  border-radius: var(--vr-radius-full);
+  border-top-color: var(--vr-color-text);
+  content: "";
+  display: block;
+  height: 1.25rem;
+  width: 1.25rem;
+}
+
+/* Same specificity, later in file → overrides spinner ::before */
+.vr-loader-dots::before {
+  animation: vr-loader-pulse 1.2s ease-in-out infinite;
+  background: var(--vr-color-muted);
+  border: none;
+  border-radius: var(--vr-radius-full);
+  box-shadow: 11px 0 0 var(--vr-color-muted), 22px 0 0 var(--vr-color-muted);
+  content: "";
+  display: block;
+  height: 6px;
+  width: 6px;
+}
+
+.vr-loader.vr-loader-bar {
+  background: var(--vr-surface-muted);
+  border-radius: var(--vr-radius-full);
+  display: block;
+  height: 0.3125rem;
+  min-width: 8rem;
+  overflow: hidden;
+  position: relative;
+}
+
+/* Same specificity, later in file → overrides spinner ::before */
+.vr-loader-bar::before {
+  animation: none;
+  background: var(--vr-color-text);
+  border: none;
+  border-radius: inherit;
+  content: "";
+  display: block;
+  height: 100%;
+  inset: 0 auto 0 0;
+  position: absolute;
+  transform: none;
+  width: 75%;
+}
+
+.vr-loader-bar::after {
+  animation: vr-loader-shimmer 1.6s ease-in-out infinite;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--vr-surface-card) 72%, transparent),
+    transparent
+  );
+  border-radius: inherit;
+  content: "";
+  height: 100%;
+  inset: 0 auto 0 0;
+  position: absolute;
+  transform: translateX(-100%);
+  width: 75%;
+}
+
+@keyframes vr-loader-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes vr-loader-pulse {
+  0%,
+  100% {
+    background: var(--vr-color-text);
+    box-shadow: 11px 0 0 var(--vr-color-muted), 22px 0 0 var(--vr-color-muted);
+  }
+
+  25% {
+    background: var(--vr-color-muted);
+    box-shadow: 11px 0 0 var(--vr-color-text), 22px 0 0 var(--vr-color-muted);
+  }
+
+  50% {
+    background: var(--vr-color-muted);
+    box-shadow: 11px 0 0 var(--vr-color-muted), 22px 0 0 var(--vr-color-text);
+  }
+
+  75% {
+    background: var(--vr-color-muted);
+    box-shadow: 11px 0 0 var(--vr-color-muted), 22px 0 0 var(--vr-color-muted);
+  }
+}
+
+@keyframes vr-loader-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}

package/src/primitives/loader/ui.loader.html

@@ -0,0 +1,3 @@
+<vr-loader aria-label="Loading">
+  {{ label() }}
+</vr-loader>

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

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

package/src/primitives/loader/ui.loader.ts

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

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

@@ -0,0 +1,3 @@
+  <vr-loader aria-label="Loading" variant.spinner>
+    {{ t('home.loading') }}
+  </vr-loader>

package/src/primitives/nav/ui.nav.css

@@ -0,0 +1,5 @@
+.vr-nav {
+  align-items: center;
+  display: flex;
+  gap: var(--vr-space-2);
+}

package/src/primitives/nav/ui.nav.html

@@ -0,0 +1,3 @@
+<vr-nav aria-label="Navigation">
+  {{ label() }}
+</vr-nav>

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

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

package/src/primitives/nav/ui.nav.ts

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

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

@@ -0,0 +1,3 @@
+  <vr-nav aria-label="Primary">
+    {{ t('home.nav') }}
+  </vr-nav>

package/src/primitives/pagination/ui.pagination.css

@@ -0,0 +1,5 @@
+.vr-pagination {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--vr-space-2);
+}

package/src/primitives/pagination/ui.pagination.html

@@ -0,0 +1 @@
+<vr-pagination size.md variant.numbers page="1" total="24" pageSize="8"></vr-pagination>

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

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

package/src/primitives/pagination/ui.pagination.ts

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

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

@@ -0,0 +1 @@
+  <vr-pagination size.md variant.numbers page="1" total="24" pageSize="8"></vr-pagination>

package/src/primitives/popover/ui.popover.css

@@ -0,0 +1,25 @@
+.vr-popover {
+  display: inline-block;
+  position: relative;
+}
+
+.vr-popover-content {
+  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);
+  min-width: 14rem;
+  padding: var(--vr-space-4);
+  z-index: var(--vr-z-popover);
+}
+
+.vr-popover-title {
+  font-weight: 600;
+  margin: 0 0 var(--vr-space-2);
+}
+
+.vr-popover-description {
+  color: var(--vr-color-muted);
+  margin: 0;
+}

package/src/primitives/popover/ui.popover.html

@@ -0,0 +1,9 @@
+<vr-popover align.end side.bottom>
+  <vr-popover-trigger>
+    <vr-button variant.outline type="button">{{ label() }}</vr-button>
+  </vr-popover-trigger>
+  <vr-popover-content>
+    <vr-popover-title>Dimensions</vr-popover-title>
+    <vr-popover-description>Set layer dimensions.</vr-popover-description>
+  </vr-popover-content>
+</vr-popover>

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

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

package/src/primitives/popover/ui.popover.ts

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

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

@@ -0,0 +1,8 @@
+<vr-popover align.end side.bottom>
+  <vr-popover-trigger>
+    <vr-button variant.outline type="button">Open</vr-button>
+  </vr-popover-trigger>
+  <vr-popover-content>
+    <vr-popover-title>Dimensions</vr-popover-title>
+  </vr-popover-content>
+</vr-popover>

package/src/primitives/radio/ui.radio.css

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

package/src/primitives/radio/ui.radio.html

@@ -0,0 +1 @@
+<vr-radio size.md tone.default name="plan" value="basic" aria-label="Basic"></vr-radio>

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

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

package/src/primitives/radio/ui.radio.ts

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

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

@@ -0,0 +1 @@
+  <vr-radio size.md tone.default name="plan" value="basic" aria-label="Basic"></vr-radio>

package/src/primitives/radio-group/ui.radio-group.css

@@ -0,0 +1,4 @@
+.vr-radio-group {
+  display: grid;
+  gap: var(--vr-space-2);
+}

package/src/primitives/radio-group/ui.radio-group.html

@@ -0,0 +1,3 @@
+<vr-radio-group name="plan">
+  <vr-radio size.md tone.default value="basic"></vr-radio>
+</vr-radio-group>

package/src/primitives/radio-group/ui.radio-group.test.ts

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

package/src/primitives/radio-group/ui.radio-group.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const radioGroupCopy = {
+  label: 'Radio group',
+} as const;
+
+export class UiRadioGroup {
+  label = signal(radioGroupCopy.label);
+}

package/src/primitives/radio-group/usage.home.html

@@ -0,0 +1,3 @@
+  <vr-radio-group name="plan">
+    <vr-radio size.md tone.default value="basic"></vr-radio>
+  </vr-radio-group>

package/src/primitives/section/ui.section.css

@@ -0,0 +1,15 @@
+.vr-section {
+  display: block;
+}
+
+.vr-section-sm {
+  padding-block: var(--vr-space-6);
+}
+
+.vr-section-md {
+  padding-block: var(--vr-space-10);
+}
+
+.vr-section-lg {
+  padding-block: var(--vr-space-16);
+}

package/src/primitives/section/ui.section.html

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

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

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

package/src/primitives/section/ui.section.ts

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

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

@@ -0,0 +1,3 @@
+  <vr-section spacing.md>
+    {{ t('home.section') }}
+  </vr-section>

package/src/primitives/select/ui.select.css

@@ -0,0 +1,8 @@
+.vr-select {
+  background: var(--vr-surface-card);
+  border: 1px solid var(--vr-border-subtle);
+  border-radius: var(--vr-radius-md);
+  color: var(--vr-color-text);
+  min-height: 2.5rem;
+  padding-inline: var(--vr-space-3);
+}

package/src/primitives/select/ui.select.html

@@ -0,0 +1 @@
+<vr-select size.md tone.default name="status"></vr-select>

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

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

package/src/primitives/select/ui.select.ts

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

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

@@ -0,0 +1 @@
+  <vr-select size.md tone.default name="status"></vr-select>

package/src/primitives/separator/ui.separator.css

@@ -0,0 +1,16 @@
+.vr-separator {
+  background: var(--vr-color-line);
+  border: 0;
+  display: block;
+  flex: 1;
+  height: 1px;
+  margin: 0;
+  width: auto;
+}
+
+.vr-separator-vertical {
+  flex: none;
+  height: 2.75rem;
+  min-height: 0;
+  width: 1px;
+}

package/src/primitives/separator/ui.separator.html

@@ -0,0 +1,2 @@
+<vr-separator aria-label="Section divider"></vr-separator>
+<span>{{ label() }}</span>

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

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

package/src/primitives/separator/ui.separator.ts

@@ -0,0 +1,9 @@
+import { signal } from '@vanrot/runtime';
+
+const separatorCopy = {
+  label: 'Section divider',
+} as const;
+
+export class UiSeparator {
+  label = signal(separatorCopy.label);
+}

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

@@ -0,0 +1 @@
+  <vr-separator></vr-separator>

package/src/primitives/sidebar/ui.sidebar.css

@@ -0,0 +1,13 @@
+.vr-sidebar {
+  border-color: var(--vr-color-line);
+  color: var(--vr-color-muted);
+  display: block;
+}
+
+.vr-sidebar-left {
+  border-right: 1px solid var(--vr-color-line);
+}
+
+.vr-sidebar-right {
+  border-left: 1px solid var(--vr-color-line);
+}

package/src/primitives/sidebar/ui.sidebar.html

@@ -0,0 +1,3 @@
+<vr-sidebar placement.left>
+  {{ label() }}
+</vr-sidebar>

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

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

package/src/primitives/sidebar/ui.sidebar.ts

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

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

@@ -0,0 +1,5 @@
+  <vr-sidebar placement.left>
+    <vr-nav aria-label="Components">
+      {{ t('home.sidebar') }}
+    </vr-nav>
+  </vr-sidebar>