@vadem/ui 0.0.0-stage → 0.0.1

package/package.json

@@ -1,6 +1,309 @@
 {
   "name": "@vadem/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.1",
+  "peerDependencies": {
+    "@angular/common": "^22.2.0",
+    "@angular/core": "^22.2.0",
+    "@angular/forms": "^22.2.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    "./styles.css": {
+      "style": "./styles/index.css",
+      "default": "./styles/index.css"
+    },
+    "./styles/*": {
+      "default": "./styles/*"
+    },
+    "./fonts/*": {
+      "default": "./fonts/*"
+    },
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/vadem-ui.d.ts",
+      "default": "./fesm2022/vadem-ui.mjs"
+    },
+    "./accordion": {
+      "types": "./types/vadem-ui-accordion.d.ts",
+      "default": "./fesm2022/vadem-ui-accordion.mjs"
+    },
+    "./active-filters": {
+      "types": "./types/vadem-ui-active-filters.d.ts",
+      "default": "./fesm2022/vadem-ui-active-filters.mjs"
+    },
+    "./alert": {
+      "types": "./types/vadem-ui-alert.d.ts",
+      "default": "./fesm2022/vadem-ui-alert.mjs"
+    },
+    "./alert-dialog": {
+      "types": "./types/vadem-ui-alert-dialog.d.ts",
+      "default": "./fesm2022/vadem-ui-alert-dialog.mjs"
+    },
+    "./autocomplete": {
+      "types": "./types/vadem-ui-autocomplete.d.ts",
+      "default": "./fesm2022/vadem-ui-autocomplete.mjs"
+    },
+    "./avatar": {
+      "types": "./types/vadem-ui-avatar.d.ts",
+      "default": "./fesm2022/vadem-ui-avatar.mjs"
+    },
+    "./badge": {
+      "types": "./types/vadem-ui-badge.d.ts",
+      "default": "./fesm2022/vadem-ui-badge.mjs"
+    },
+    "./breadcrumbs": {
+      "types": "./types/vadem-ui-breadcrumbs.d.ts",
+      "default": "./fesm2022/vadem-ui-breadcrumbs.mjs"
+    },
+    "./button": {
+      "types": "./types/vadem-ui-button.d.ts",
+      "default": "./fesm2022/vadem-ui-button.mjs"
+    },
+    "./calendar": {
+      "types": "./types/vadem-ui-calendar.d.ts",
+      "default": "./fesm2022/vadem-ui-calendar.mjs"
+    },
+    "./card": {
+      "types": "./types/vadem-ui-card.d.ts",
+      "default": "./fesm2022/vadem-ui-card.mjs"
+    },
+    "./character-count": {
+      "types": "./types/vadem-ui-character-count.d.ts",
+      "default": "./fesm2022/vadem-ui-character-count.mjs"
+    },
+    "./chart": {
+      "types": "./types/vadem-ui-chart.d.ts",
+      "default": "./fesm2022/vadem-ui-chart.mjs"
+    },
+    "./checkbox": {
+      "types": "./types/vadem-ui-checkbox.d.ts",
+      "default": "./fesm2022/vadem-ui-checkbox.mjs"
+    },
+    "./color-picker": {
+      "types": "./types/vadem-ui-color-picker.d.ts",
+      "default": "./fesm2022/vadem-ui-color-picker.mjs"
+    },
+    "./command": {
+      "types": "./types/vadem-ui-command.d.ts",
+      "default": "./fesm2022/vadem-ui-command.mjs"
+    },
+    "./copy-button": {
+      "types": "./types/vadem-ui-copy-button.d.ts",
+      "default": "./fesm2022/vadem-ui-copy-button.mjs"
+    },
+    "./date-range-picker": {
+      "types": "./types/vadem-ui-date-range-picker.d.ts",
+      "default": "./fesm2022/vadem-ui-date-range-picker.mjs"
+    },
+    "./description-list": {
+      "types": "./types/vadem-ui-description-list.d.ts",
+      "default": "./fesm2022/vadem-ui-description-list.mjs"
+    },
+    "./dialog": {
+      "types": "./types/vadem-ui-dialog.d.ts",
+      "default": "./fesm2022/vadem-ui-dialog.mjs"
+    },
+    "./dropzone": {
+      "types": "./types/vadem-ui-dropzone.d.ts",
+      "default": "./fesm2022/vadem-ui-dropzone.mjs"
+    },
+    "./editable-text": {
+      "types": "./types/vadem-ui-editable-text.d.ts",
+      "default": "./fesm2022/vadem-ui-editable-text.mjs"
+    },
+    "./empty-state": {
+      "types": "./types/vadem-ui-empty-state.d.ts",
+      "default": "./fesm2022/vadem-ui-empty-state.mjs"
+    },
+    "./expandable-text": {
+      "types": "./types/vadem-ui-expandable-text.d.ts",
+      "default": "./fesm2022/vadem-ui-expandable-text.mjs"
+    },
+    "./field": {
+      "types": "./types/vadem-ui-field.d.ts",
+      "default": "./fesm2022/vadem-ui-field.mjs"
+    },
+    "./file-preview": {
+      "types": "./types/vadem-ui-file-preview.d.ts",
+      "default": "./fesm2022/vadem-ui-file-preview.mjs"
+    },
+    "./file-size": {
+      "types": "./types/vadem-ui-file-size.d.ts",
+      "default": "./fesm2022/vadem-ui-file-size.mjs"
+    },
+    "./form-error-summary": {
+      "types": "./types/vadem-ui-form-error-summary.d.ts",
+      "default": "./fesm2022/vadem-ui-form-error-summary.mjs"
+    },
+    "./icon": {
+      "types": "./types/vadem-ui-icon.d.ts",
+      "default": "./fesm2022/vadem-ui-icon.mjs"
+    },
+    "./input": {
+      "types": "./types/vadem-ui-input.d.ts",
+      "default": "./fesm2022/vadem-ui-input.mjs"
+    },
+    "./kbd": {
+      "types": "./types/vadem-ui-kbd.d.ts",
+      "default": "./fesm2022/vadem-ui-kbd.mjs"
+    },
+    "./keyboard": {
+      "types": "./types/vadem-ui-keyboard.d.ts",
+      "default": "./fesm2022/vadem-ui-keyboard.mjs"
+    },
+    "./locale": {
+      "types": "./types/vadem-ui-locale.d.ts",
+      "default": "./fesm2022/vadem-ui-locale.mjs"
+    },
+    "./menu": {
+      "types": "./types/vadem-ui-menu.d.ts",
+      "default": "./fesm2022/vadem-ui-menu.mjs"
+    },
+    "./navigation-list": {
+      "types": "./types/vadem-ui-navigation-list.d.ts",
+      "default": "./fesm2022/vadem-ui-navigation-list.mjs"
+    },
+    "./number-input": {
+      "types": "./types/vadem-ui-number-input.d.ts",
+      "default": "./fesm2022/vadem-ui-number-input.mjs"
+    },
+    "./otp-input": {
+      "types": "./types/vadem-ui-otp-input.d.ts",
+      "default": "./fesm2022/vadem-ui-otp-input.mjs"
+    },
+    "./pagination": {
+      "types": "./types/vadem-ui-pagination.d.ts",
+      "default": "./fesm2022/vadem-ui-pagination.mjs"
+    },
+    "./password-input": {
+      "types": "./types/vadem-ui-password-input.d.ts",
+      "default": "./fesm2022/vadem-ui-password-input.mjs"
+    },
+    "./popover": {
+      "types": "./types/vadem-ui-popover.d.ts",
+      "default": "./fesm2022/vadem-ui-popover.mjs"
+    },
+    "./progress": {
+      "types": "./types/vadem-ui-progress.d.ts",
+      "default": "./fesm2022/vadem-ui-progress.mjs"
+    },
+    "./radio": {
+      "types": "./types/vadem-ui-radio.d.ts",
+      "default": "./fesm2022/vadem-ui-radio.mjs"
+    },
+    "./range-slider": {
+      "types": "./types/vadem-ui-range-slider.d.ts",
+      "default": "./fesm2022/vadem-ui-range-slider.mjs"
+    },
+    "./rating": {
+      "types": "./types/vadem-ui-rating.d.ts",
+      "default": "./fesm2022/vadem-ui-rating.mjs"
+    },
+    "./relative-time": {
+      "types": "./types/vadem-ui-relative-time.d.ts",
+      "default": "./fesm2022/vadem-ui-relative-time.mjs"
+    },
+    "./reorder-list": {
+      "types": "./types/vadem-ui-reorder-list.d.ts",
+      "default": "./fesm2022/vadem-ui-reorder-list.mjs"
+    },
+    "./scroll-area": {
+      "types": "./types/vadem-ui-scroll-area.d.ts",
+      "default": "./fesm2022/vadem-ui-scroll-area.mjs"
+    },
+    "./search-input": {
+      "types": "./types/vadem-ui-search-input.d.ts",
+      "default": "./fesm2022/vadem-ui-search-input.mjs"
+    },
+    "./segmented": {
+      "types": "./types/vadem-ui-segmented.d.ts",
+      "default": "./fesm2022/vadem-ui-segmented.mjs"
+    },
+    "./select": {
+      "types": "./types/vadem-ui-select.d.ts",
+      "default": "./fesm2022/vadem-ui-select.mjs"
+    },
+    "./sidebar": {
+      "types": "./types/vadem-ui-sidebar.d.ts",
+      "default": "./fesm2022/vadem-ui-sidebar.mjs"
+    },
+    "./skeleton": {
+      "types": "./types/vadem-ui-skeleton.d.ts",
+      "default": "./fesm2022/vadem-ui-skeleton.mjs"
+    },
+    "./slider": {
+      "types": "./types/vadem-ui-slider.d.ts",
+      "default": "./fesm2022/vadem-ui-slider.mjs"
+    },
+    "./splitter": {
+      "types": "./types/vadem-ui-splitter.d.ts",
+      "default": "./fesm2022/vadem-ui-splitter.mjs"
+    },
+    "./stat": {
+      "types": "./types/vadem-ui-stat.d.ts",
+      "default": "./fesm2022/vadem-ui-stat.mjs"
+    },
+    "./stepper": {
+      "types": "./types/vadem-ui-stepper.d.ts",
+      "default": "./fesm2022/vadem-ui-stepper.mjs"
+    },
+    "./switch": {
+      "types": "./types/vadem-ui-switch.d.ts",
+      "default": "./fesm2022/vadem-ui-switch.mjs"
+    },
+    "./table": {
+      "types": "./types/vadem-ui-table.d.ts",
+      "default": "./fesm2022/vadem-ui-table.mjs"
+    },
+    "./tabs": {
+      "types": "./types/vadem-ui-tabs.d.ts",
+      "default": "./fesm2022/vadem-ui-tabs.mjs"
+    },
+    "./tag-input": {
+      "types": "./types/vadem-ui-tag-input.d.ts",
+      "default": "./fesm2022/vadem-ui-tag-input.mjs"
+    },
+    "./text-highlight": {
+      "types": "./types/vadem-ui-text-highlight.d.ts",
+      "default": "./fesm2022/vadem-ui-text-highlight.mjs"
+    },
+    "./time-input": {
+      "types": "./types/vadem-ui-time-input.d.ts",
+      "default": "./fesm2022/vadem-ui-time-input.mjs"
+    },
+    "./timeline": {
+      "types": "./types/vadem-ui-timeline.d.ts",
+      "default": "./fesm2022/vadem-ui-timeline.mjs"
+    },
+    "./toast": {
+      "types": "./types/vadem-ui-toast.d.ts",
+      "default": "./fesm2022/vadem-ui-toast.mjs"
+    },
+    "./toolbar": {
+      "types": "./types/vadem-ui-toolbar.d.ts",
+      "default": "./fesm2022/vadem-ui-toolbar.mjs"
+    },
+    "./tooltip": {
+      "types": "./types/vadem-ui-tooltip.d.ts",
+      "default": "./fesm2022/vadem-ui-tooltip.mjs"
+    },
+    "./tree": {
+      "types": "./types/vadem-ui-tree.d.ts",
+      "default": "./fesm2022/vadem-ui-tree.mjs"
+    },
+    "./upload-list": {
+      "types": "./types/vadem-ui-upload-list.d.ts",
+      "default": "./fesm2022/vadem-ui-upload-list.mjs"
+    }
+  },
+  "module": "fesm2022/vadem-ui.mjs",
+  "typings": "types/vadem-ui.d.ts",
+  "type": "module"
 }

package/styles/base.css

@@ -0,0 +1,160 @@
+/*
+ * Base document styles: typography defaults, focus, selection, scrollbars.
+ * Import separately (or skip) if the host app owns its base styles.
+ */
+@layer vd.base {
+  html {
+    background-color: var(--vd-color-bg);
+    color: var(--vd-color-text);
+    font-family: var(--vd-font-sans);
+    font-size: 100%;
+    line-height: var(--vd-leading-normal);
+    font-synthesis: none;
+    text-rendering: optimizeLegibility;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    accent-color: var(--vd-color-action);
+    caret-color: var(--vd-color-focus);
+    scrollbar-color: var(--vd-color-border-strong) transparent;
+    /* Reserve the scrollbar's space permanently so locking scroll (modals) or content that
+       starts/stops overflowing never shifts the page sideways. */
+    scrollbar-gutter: stable;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    html:focus-within {
+      scroll-behavior: smooth;
+    }
+  }
+
+  ::selection {
+    background-color: var(--vd-color-selection);
+  }
+
+  :focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-weight: var(--vd-weight-bold);
+    line-height: var(--vd-leading-snug);
+    letter-spacing: var(--vd-tracking-tight);
+    text-wrap: balance;
+  }
+
+  h1 {
+    font-size: var(--vd-text-4xl);
+    font-weight: var(--vd-weight-extrabold);
+    line-height: var(--vd-leading-tight);
+    letter-spacing: var(--vd-tracking-tighter);
+  }
+
+  h2 {
+    font-size: var(--vd-text-3xl);
+    line-height: var(--vd-leading-tight);
+  }
+
+  h3 {
+    font-size: var(--vd-text-2xl);
+  }
+
+  h4 {
+    font-size: var(--vd-text-xl);
+  }
+
+  h5 {
+    font-size: var(--vd-text-lg);
+  }
+
+  h6 {
+    font-size: var(--vd-text-md);
+  }
+
+  p {
+    text-wrap: pretty;
+  }
+
+  a {
+    color: var(--vd-color-text-accent);
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.2em;
+  }
+
+  code,
+  kbd,
+  samp,
+  pre {
+    font-family: var(--vd-font-mono);
+    font-size: 0.9em;
+    font-variant-ligatures: contextual;
+  }
+
+  :not(pre) > code {
+    padding-block: var(--vd-space-0-5);
+    padding-inline: var(--vd-space-1);
+    border-radius: var(--vd-radius-xs);
+    background-color: var(--vd-color-fill);
+  }
+
+  pre {
+    padding: var(--vd-space-4);
+    overflow-x: auto;
+    border: var(--vd-border-width) solid var(--vd-color-border);
+    border-radius: var(--vd-radius-surface);
+    background-color: var(--vd-color-surface-sunken);
+    line-height: var(--vd-leading-relaxed);
+    tab-size: 2;
+  }
+
+  kbd {
+    display: inline-block;
+    min-inline-size: 1.6em;
+    padding-inline: var(--vd-space-1);
+    border: var(--vd-border-width) solid var(--vd-color-border-strong);
+    border-block-end-width: 2px;
+    border-radius: var(--vd-radius-xs);
+    background-color: var(--vd-color-surface-raised);
+    font-size: var(--vd-text-xs);
+    line-height: 1.6;
+    text-align: center;
+  }
+
+  hr {
+    border: 0;
+    border-block-start: var(--vd-border-width) solid var(--vd-color-border);
+  }
+
+  table {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Signature: mono eyebrow label. */
+  .vd-eyebrow {
+    font-family: var(--vd-font-mono);
+    font-size: var(--vd-text-xs);
+    font-weight: var(--vd-weight-medium);
+    line-height: var(--vd-leading-normal);
+    letter-spacing: var(--vd-tracking-caps);
+    text-transform: uppercase;
+    color: var(--vd-color-text-muted);
+  }
+
+  .vd-tabular {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .vd-visually-hidden:not(:focus-within, :active) {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+}

package/styles/components/accordion.css

@@ -0,0 +1,130 @@
+/* Accordion (native details) - spec: specs/accordion.md */
+@layer vd.components {
+  .vd-accordion {
+    align-self: start;
+    --vd-accordion-radius: var(--vd-radius-surface);
+    --vd-accordion-border: var(--vd-color-border);
+    --vd-accordion-bg: var(--vd-color-surface);
+
+    display: grid;
+    overflow: hidden;
+    border: var(--vd-border-width) solid var(--vd-accordion-border);
+    border-radius: var(--vd-accordion-radius);
+    background-color: var(--vd-accordion-bg);
+    box-shadow: var(--vd-highlight-top);
+  }
+
+  .vd-accordion__item {
+    --vd-accordion-padding: var(--vd-space-4) var(--vd-space-5);
+  }
+
+  .vd-accordion__item + .vd-accordion__item {
+    border-block-start: var(--vd-border-width) solid var(--vd-color-border);
+  }
+
+  /* A standalone item (no group) draws its own box. */
+  .vd-accordion__item:not(.vd-accordion > *) {
+    /* In grid/flex rows, keep the box to its content instead of stretching. */
+    align-self: start;
+    border: var(--vd-border-width) solid var(--vd-color-border);
+    border-radius: var(--vd-radius-surface);
+    background-color: var(--vd-color-surface);
+    overflow: hidden;
+  }
+
+  .vd-accordion__item > summary {
+    display: flex;
+    align-items: center;
+    gap: var(--vd-space-3);
+    padding: var(--vd-accordion-padding);
+    color: var(--vd-color-text);
+    font-weight: var(--vd-weight-semibold);
+    line-height: var(--vd-leading-snug);
+    list-style: none;
+    cursor: pointer;
+    user-select: none;
+    transition: var(--vd-transition-colors);
+  }
+
+  .vd-accordion__item > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  /* Chevron at the inline end, rotates when open. */
+  .vd-accordion__item > summary::after {
+    content: '';
+    flex: none;
+    inline-size: var(--vd-space-4);
+    block-size: var(--vd-space-4);
+    margin-inline-start: auto;
+    background-color: var(--vd-color-text-subtle);
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+      center / contain no-repeat;
+    transition: rotate var(--vd-duration-base) var(--vd-ease-out);
+  }
+
+  .vd-accordion__item[open] > summary::after {
+    rotate: 180deg;
+  }
+
+  @media (hover: hover) {
+    .vd-accordion__item > summary:hover {
+      background-color: var(--vd-color-fill);
+    }
+  }
+
+  .vd-accordion__item > summary:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(var(--vd-focus-ring-width) * -1);
+  }
+
+  .vd-accordion__item > summary > .vd-icon {
+    color: var(--vd-color-text-muted);
+  }
+
+  /* Content: everything after the summary. */
+  .vd-accordion__item > :not(summary) {
+    margin: 0;
+    padding-inline: var(--vd-space-5);
+    color: var(--vd-color-text-muted);
+    font-size: var(--vd-text-sm);
+    line-height: var(--vd-leading-relaxed);
+  }
+
+  .vd-accordion__item > :not(summary):last-child {
+    padding-block-end: var(--vd-space-5);
+  }
+
+  /* Smooth open/close where the platform can animate to `auto` (progressive enhancement). */
+  @supports (interpolate-size: allow-keywords) {
+    @media (prefers-reduced-motion: no-preference) {
+      .vd-accordion__item {
+        interpolate-size: allow-keywords;
+      }
+
+      .vd-accordion__item::details-content {
+        block-size: 0;
+        overflow: clip;
+        transition:
+          block-size var(--vd-duration-slow) var(--vd-ease-out),
+          content-visibility var(--vd-duration-slow) allow-discrete;
+      }
+
+      .vd-accordion__item[open]::details-content {
+        block-size: auto;
+      }
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vd-accordion__item > summary::after {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-accordion__item > summary::after {
+      background-color: CanvasText;
+    }
+  }
+}

package/styles/components/active-filters.css

@@ -0,0 +1,42 @@
+@layer vd.components {
+  .vd-active-filters {
+    --vd-active-filters-gap: var(--vd-space-2);
+    --vd-active-filters-muted: var(--vd-color-text-muted);
+    display: flex;
+    flex-wrap: wrap;
+    align-items: start;
+    gap: var(--vd-active-filters-gap);
+    min-inline-size: 0;
+  }
+  .vd-active-filters:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+  .vd-active-filters__list {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: start;
+    gap: var(--vd-active-filters-gap);
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+  .vd-active-filters__item {
+    min-inline-size: 0;
+    max-inline-size: 100%;
+  }
+  .vd-active-filters__remove.vd-button {
+    max-inline-size: 100%;
+    text-align: start;
+  }
+  .vd-active-filters__text {
+    overflow-wrap: anywhere;
+  }
+  .vd-active-filters__message {
+    margin: 0;
+    color: var(--vd-active-filters-muted);
+    overflow-wrap: anywhere;
+  }
+}

package/styles/components/alert-dialog.css

@@ -0,0 +1,34 @@
+@layer vd.components {
+  .vd-alert-dialog {
+    --vd-alert-dialog-gap: var(--vd-space-4);
+    --vd-alert-dialog-status-fg: var(--vd-color-text-muted);
+    --vd-alert-dialog-error-fg: var(--vd-color-danger-text);
+  }
+  .vd-alert-dialog__content {
+    gap: var(--vd-alert-dialog-gap);
+    min-inline-size: 0;
+  }
+  .vd-alert-dialog__content .vd-dialog__title,
+  .vd-alert-dialog__content .vd-dialog__description {
+    flex: none;
+    order: 0;
+    overflow-wrap: anywhere;
+  }
+  .vd-alert-dialog__status {
+    margin: 0;
+    color: var(--vd-alert-dialog-status-fg);
+    overflow-wrap: anywhere;
+  }
+  .vd-alert-dialog__status[data-error] {
+    color: var(--vd-alert-dialog-error-fg);
+  }
+  .vd-alert-dialog__content:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(-1 * var(--vd-focus-ring-width));
+  }
+  @media (width < 40rem) {
+    .vd-alert-dialog__dialog .vd-dialog__footer {
+      flex-direction: column;
+    }
+  }
+}