@vadem/ui 0.0.0-stage → 0.0.1

package/styles/components/calendar.css

@@ -0,0 +1,186 @@
+/* Calendar and date picker - spec: specs/calendar.md */
+@layer vd.components {
+  .vd-calendar {
+    --vd-calendar-cell: var(--vd-control-height-sm);
+    --vd-calendar-radius: var(--vd-radius-md);
+    --vd-calendar-selected-bg: var(--vd-color-action);
+    --vd-calendar-selected-fg: var(--vd-color-on-action);
+    --vd-calendar-hover: var(--vd-color-fill-hover);
+    --vd-calendar-today: var(--vd-color-text-accent);
+
+    display: inline-grid;
+    max-inline-size: 100%;
+    min-inline-size: 0;
+    overflow: auto;
+    padding: calc(var(--vd-focus-ring-width) + var(--vd-focus-ring-offset));
+    scroll-padding: calc(var(--vd-focus-ring-width) + var(--vd-focus-ring-offset));
+    gap: var(--vd-space-2);
+    font-size: var(--vd-text-sm);
+    font-variant-numeric: tabular-nums;
+    user-select: none;
+  }
+
+  .vd-calendar__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--vd-space-2);
+  }
+
+  .vd-calendar__title {
+    display: inline-block;
+    font-weight: var(--vd-weight-semibold);
+  }
+
+  /* "жовтень 2026 р." -> "Жовтень 2026 р.": only the first letter (capitalize would hit "р."). */
+  .vd-calendar__title::first-letter {
+    text-transform: uppercase;
+  }
+
+  .vd-calendar__nav {
+    display: inline-grid;
+    place-items: center;
+    inline-size: var(--vd-calendar-cell);
+    block-size: var(--vd-calendar-cell);
+    border: 0;
+    border-radius: var(--vd-calendar-radius);
+    background: transparent;
+    color: var(--vd-color-text-muted);
+    cursor: pointer;
+    transition: var(--vd-transition-colors);
+  }
+
+  @media (hover: hover) {
+    .vd-calendar__nav:not(:disabled):hover {
+      background-color: var(--vd-calendar-hover);
+      color: var(--vd-color-text);
+    }
+  }
+
+  .vd-calendar__nav:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  .vd-calendar__nav:disabled {
+    opacity: var(--vd-opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .vd-calendar__grid {
+    /* Equal columns whatever the weekday names or digits. */
+    table-layout: fixed;
+    inline-size: calc(var(--vd-calendar-cell) * 7 + var(--vd-space-0-5) * 8);
+    border-collapse: separate;
+    border-spacing: var(--vd-space-0-5);
+    margin: calc(var(--vd-space-0-5) * -1);
+  }
+
+  .vd-calendar__grid th {
+    block-size: var(--vd-space-6);
+    padding: 0;
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--vd-color-text-muted);
+    font-family: var(--vd-font-mono);
+    font-size: var(--vd-text-xs);
+    font-weight: var(--vd-weight-medium);
+    letter-spacing: var(--vd-tracking-caps);
+    text-transform: uppercase;
+  }
+
+  .vd-calendar__day {
+    position: relative;
+    inline-size: var(--vd-calendar-cell);
+    block-size: var(--vd-calendar-cell);
+    padding: 0;
+    border-radius: var(--vd-calendar-radius);
+    color: var(--vd-color-text);
+    text-align: center;
+    vertical-align: middle;
+    cursor: pointer;
+    transition:
+      var(--vd-transition-colors),
+      scale var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  .vd-calendar__day[data-outside] {
+    color: var(--vd-color-text-muted);
+  }
+
+  @media (hover: hover) {
+    .vd-calendar__day:not([aria-selected='true'], [aria-disabled='true']):hover {
+      background-color: var(--vd-calendar-hover);
+    }
+  }
+
+  .vd-calendar__day:focus-visible {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: calc(var(--vd-focus-ring-width) * -1);
+  }
+
+  .vd-calendar__day:not([aria-disabled='true']):active {
+    scale: var(--vd-press-scale);
+  }
+
+  /* Today: a dot under the number (not color alone: also aria-current). */
+  .vd-calendar__day[aria-current='date'] {
+    color: var(--vd-calendar-today);
+    font-weight: var(--vd-weight-bold);
+  }
+
+  .vd-calendar__day[aria-current='date']::after {
+    content: '';
+    position: absolute;
+    inset-block-end: var(--vd-space-1);
+    inset-inline: 0;
+    inline-size: var(--vd-space-1);
+    block-size: var(--vd-space-1);
+    margin-inline: auto;
+    border-radius: var(--vd-radius-full);
+    background-color: currentColor;
+  }
+
+  .vd-calendar__day[aria-selected='true'] {
+    background-color: var(--vd-calendar-selected-bg);
+    box-shadow: var(--vd-highlight-top);
+    color: var(--vd-calendar-selected-fg);
+    font-weight: var(--vd-weight-semibold);
+  }
+
+  .vd-calendar__day[aria-disabled='true'] {
+    color: var(--vd-color-text-disabled);
+    text-decoration: line-through;
+    cursor: not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .vd-calendar__day:active {
+      scale: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .vd-calendar__day[aria-selected='true'] {
+      forced-color-adjust: none;
+      background-color: Highlight;
+      color: HighlightText;
+    }
+  }
+
+  /* ---------------------------------------------------------- date picker */
+
+  .vd-date-picker {
+    display: block;
+    inline-size: 100%;
+    max-inline-size: 16rem;
+  }
+
+  /* The panel reuses the popover surface; it sizes to the calendar. */
+  .vd-date-picker__panel {
+    --vd-popover-padding: var(--vd-space-3);
+
+    inline-size: max-content;
+    position-area: block-end span-inline-end;
+  }
+}

package/styles/components/card.css

@@ -0,0 +1,206 @@
+/* Card - spec: specs/card.md. Signatures: top highlight, concentric radii, cursor glow. */
+@layer vd.components {
+  .vd-card {
+    --vd-card-padding: var(--vd-space-6);
+    --vd-card-gap: var(--vd-space-4);
+    --vd-card-radius: var(--vd-radius-surface);
+    /* Concentric radius for anything nested edge-to-edge-minus-padding. */
+    --vd-card-inner-radius: max(
+      var(--vd-radius-xs),
+      calc(var(--vd-card-radius) - var(--vd-card-padding))
+    );
+    --vd-card-bg: var(--vd-color-surface);
+    --vd-card-border: var(--vd-color-border);
+    --vd-card-shadow: var(--vd-highlight-top);
+
+    position: relative;
+    isolation: isolate;
+    display: flex;
+    flex-direction: column;
+    gap: var(--vd-card-gap);
+    min-inline-size: 0;
+    padding: var(--vd-card-padding);
+    border: var(--vd-border-width) solid var(--vd-card-border);
+    border-radius: var(--vd-card-radius);
+    background-color: var(--vd-card-bg);
+    box-shadow: var(--vd-card-shadow);
+    color: var(--vd-color-text);
+    text-align: start;
+    text-decoration: none;
+  }
+
+  .vd-card[data-variant='raised'] {
+    --vd-card-bg: var(--vd-color-surface-raised);
+    --vd-card-shadow: var(--vd-highlight-top), var(--vd-shadow-md);
+  }
+
+  @container (width < 24rem) {
+    .vd-card {
+      --vd-card-padding: var(--vd-space-4);
+    }
+  }
+
+  /* ---------------------------------------------------------------- parts */
+
+  /* Title + extras (badge, actions) share the first row while the title has room (12rem);
+     otherwise extras wrap under it. The description always takes its own row. */
+  .vd-card__header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    gap: var(--vd-space-1) var(--vd-space-3);
+  }
+
+  .vd-card__header > :not(.vd-card__title, .vd-card__description) {
+    order: 1;
+    flex: none;
+  }
+
+  .vd-card__header > .vd-card__title {
+    flex: 1 1 12rem;
+    min-inline-size: 0;
+  }
+
+  .vd-card__header > .vd-card__description {
+    order: 2;
+    flex: 1 0 100%;
+  }
+
+  .vd-card__title {
+    margin: 0;
+    font-size: var(--vd-text-lg);
+    font-weight: var(--vd-weight-bold);
+    line-height: var(--vd-leading-snug);
+    letter-spacing: var(--vd-tracking-tight);
+    text-wrap: balance;
+  }
+
+  .vd-card__description {
+    margin: 0;
+    color: var(--vd-color-text-muted);
+    font-size: var(--vd-text-sm);
+    text-wrap: pretty;
+  }
+
+  .vd-card__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--vd-space-2);
+    margin-block-start: auto;
+  }
+
+  /* Stretched primary link: one tab stop, whole card clickable. */
+  .vd-card__link {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .vd-card__link::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+  }
+
+  .vd-card__link:focus-visible {
+    outline: none;
+  }
+
+  /* Other interactive content stays above the stretched link. */
+  .vd-card:has(.vd-card__link) :is(a, button, input, select, textarea):not(.vd-card__link) {
+    position: relative;
+    z-index: 2;
+  }
+
+  /* ---------------------------------------------------------- interactive */
+
+  .vd-card[data-interactive] {
+    cursor: pointer;
+    transition:
+      border-color var(--vd-duration-base) var(--vd-ease-out),
+      box-shadow var(--vd-duration-base) var(--vd-ease-out),
+      translate var(--vd-duration-base) var(--vd-ease-out),
+      scale var(--vd-duration-fast) var(--vd-ease-out);
+  }
+
+  /* Signature: cursor glow - a soft fill plus a brighter rim, both following --vd-x/--vd-y. */
+  .vd-card[data-interactive]::before,
+  .vd-card[data-interactive]::after {
+    content: '';
+    position: absolute;
+    inset: calc(var(--vd-border-width) * -1);
+    z-index: -1;
+    border-radius: inherit;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity var(--vd-duration-slow) var(--vd-ease-out);
+  }
+
+  .vd-card[data-interactive]::before {
+    background: radial-gradient(
+      var(--vd-glow-size) circle at var(--vd-x, 50%) var(--vd-y, 0%),
+      var(--vd-glow-color),
+      transparent 70%
+    );
+  }
+
+  .vd-card[data-interactive]::after {
+    z-index: 0;
+    padding: var(--vd-border-width);
+    background: radial-gradient(
+      calc(var(--vd-glow-size) * 0.6) circle at var(--vd-x, 50%) var(--vd-y, 0%),
+      var(--vd-glow-border),
+      transparent 70%
+    );
+    mask:
+      linear-gradient(#000 0 0) content-box exclude,
+      linear-gradient(#000 0 0);
+  }
+
+  @media (hover: hover) {
+    .vd-card[data-interactive]:hover {
+      --vd-card-border: var(--vd-color-border-strong);
+      --vd-card-shadow: var(--vd-highlight-top), var(--vd-shadow-md);
+    }
+
+    .vd-card[data-variant='raised'][data-interactive]:hover {
+      --vd-card-shadow: var(--vd-highlight-top), var(--vd-shadow-lg);
+    }
+
+    .vd-card[data-interactive]:hover::before,
+    .vd-card[data-interactive]:hover::after {
+      opacity: 1;
+    }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    @media (hover: hover) {
+      .vd-card[data-interactive]:hover {
+        translate: 0 calc(var(--vd-space-0-5) * -1);
+      }
+    }
+  }
+
+  .vd-card[data-interactive]:active {
+    scale: var(--vd-press-scale);
+  }
+
+  .vd-card:is(a, button):focus-visible,
+  .vd-card:has(.vd-card__link:focus-visible) {
+    outline: var(--vd-focus-ring-width) solid var(--vd-color-focus);
+    outline-offset: var(--vd-focus-ring-offset);
+  }
+
+  @media (forced-colors: active) {
+    .vd-card {
+      border-color: CanvasText;
+    }
+
+    .vd-card[data-interactive]::before,
+    .vd-card[data-interactive]::after {
+      display: none;
+    }
+  }
+}

package/styles/components/character-count.css

@@ -0,0 +1,41 @@
+@layer vd.components {
+  .vd-character-count {
+    --vd-character-count-fg: var(--vd-color-text-muted);
+    --vd-character-count-danger: var(--vd-color-danger-text);
+    --vd-character-count-font-size: var(--vd-text-sm);
+    --vd-character-count-gap: var(--vd-space-2);
+
+    display: block;
+    min-inline-size: 0;
+    color: var(--vd-character-count-fg);
+    font-size: var(--vd-character-count-font-size);
+    line-height: var(--vd-leading-normal);
+    overflow-wrap: anywhere;
+  }
+  .vd-character-count__content {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: start;
+    gap: var(--vd-space-1) var(--vd-character-count-gap);
+  }
+  .vd-character-count__used {
+    font-variant-numeric: tabular-nums;
+  }
+  .vd-character-count__message {
+    display: flex;
+    align-items: start;
+    gap: var(--vd-character-count-gap);
+    min-inline-size: 0;
+  }
+  .vd-character-count__message > span {
+    min-inline-size: 0;
+  }
+  .vd-character-count__message > .vd-icon {
+    flex: none;
+    block-size: 1lh;
+  }
+  .vd-character-count[data-state='over'] {
+    color: var(--vd-character-count-danger);
+  }
+}