@24vlh/vds 0.1.0

package/dist/components/tooltips-popovers.css

@@ -0,0 +1,447 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Tooltips & Popovers
+ *
+ *  Responsibilities:
+ *    - Provide tooltip (non-interactive) and popover (interactive) micro-surfaces
+ *    - Implement arrow rendering, semantic variants, and density modes (A / default / C)
+ *    - Define positional system (top, bottom, left, right + corner variants)
+ *    - Support visible/open states via modifiers and data-state attributes
+ *    - Ensure accessible behaviour: pointer safety, focus-visible, and reduced-motion
+ *
+ *  System Notes:
+ *    - Pure CSS; visibility controlled externally (no JS assumptions)
+ *    - Fully token-driven: surfaces, borders, radii, shadows, z-index, transitions
+ *    - Tooltip/popover arrows inherit background and border to keep seams clean
+ *    - Designed to work with any inline trigger or anchor and with overlays/forms
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. TOOLTIP TRIGGERS
+   Attach this class to ensure proper positioning context.
+--------------------------------------------------------- */
+
+.tooltip-trigger {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+}
+
+/* ---------------------------------------------------------
+   2. BASE TOOLTIP
+--------------------------------------------------------- */
+
+.tooltip {
+    position: absolute;
+    z-index: var(--z-tooltip);
+
+    max-width: 24rem;
+    padding: var(--space-2) var(--space-3);
+
+    background-color: var(--color-surface);
+    color: var(--color-text);
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--color-border-subtle);
+    box-shadow: var(--shadow-2);
+
+    font-size: var(--text-xs);
+    line-height: 1.4;
+    white-space: normal;
+
+    opacity: 0;
+    transform: translateY(0.25rem);
+    pointer-events: none;
+
+    transition: opacity var(--transition-fast) var(--ease-out), transform var(--transition-fast) var(--ease-out);
+}
+
+.tooltip--visible,
+.tooltip[data-state="open"] {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+/* ---------------------------------------------------------
+   3. TOOLTIP POSITIONS
+--------------------------------------------------------- */
+
+.tooltip--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, -0.25rem);
+}
+
+.tooltip--top.tooltip--visible,
+.tooltip--top[data-state="open"] {
+    transform: translate(-50%, 0);
+}
+
+.tooltip--bottom {
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, 0.25rem);
+}
+
+.tooltip--bottom.tooltip--visible,
+.tooltip--bottom[data-state="open"] {
+    transform: translate(-50%, 0);
+}
+
+.tooltip--left {
+    right: 100%;
+    top: 50%;
+    transform: translate(-0.25rem, -50%);
+}
+
+.tooltip--left.tooltip--visible,
+.tooltip--left[data-state="open"] {
+    transform: translate(0, -50%);
+}
+
+.tooltip--right {
+    left: 100%;
+    top: 50%;
+    transform: translate(0.25rem, -50%);
+}
+
+.tooltip--right.tooltip--visible,
+.tooltip--right[data-state="open"] {
+    transform: translate(0, -50%);
+}
+
+/* ---------------------------------------------------------
+   4. TOOLTIP ARROW
+--------------------------------------------------------- */
+
+.tooltip__arrow {
+    position: absolute;
+    width: var(--space-3);
+    height: var(--space-3);
+
+    background-color: inherit;
+    border: inherit;
+    border-left: none;
+    border-top: none;
+
+    transform: rotate(45deg);
+}
+
+.tooltip--top .tooltip__arrow {
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.tooltip--bottom .tooltip__arrow {
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, 50%) rotate(45deg);
+}
+
+.tooltip--left .tooltip__arrow {
+    left: 100%;
+    top: 50%;
+    transform: translate(50%, -50%) rotate(45deg);
+}
+
+.tooltip--right .tooltip__arrow {
+    right: 100%;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+/* ---------------------------------------------------------
+   5. TOOLTIP DENSITY
+--------------------------------------------------------- */
+
+.tooltip--a {
+    padding: var(--space-3) var(--space-4);
+    font-size: var(--text-sm);
+}
+
+.tooltip--c {
+    padding: var(--space-1) var(--space-2);
+    font-size: var(--text-xs);
+}
+
+/* ---------------------------------------------------------
+   6. TOOLTIP SEMANTIC VARIANTS
+--------------------------------------------------------- */
+
+.tooltip--info {
+    background-color: var(--semantic-info-bg);
+    color: var(--semantic-info-text);
+    border-color: var(--semantic-info-border);
+}
+
+.tooltip--success {
+    background-color: var(--semantic-success-bg);
+    color: var(--semantic-success-text);
+    border-color: var(--semantic-success-border);
+}
+
+.tooltip--warning {
+    background-color: var(--semantic-warning-bg);
+    color: var(--semantic-warning-text);
+    border-color: var(--semantic-warning-border);
+}
+
+.tooltip--danger {
+    background-color: var(--semantic-danger-bg);
+    color: var(--semantic-danger-text);
+    border-color: var(--semantic-danger-border);
+}
+
+/* ---------------------------------------------------------
+   7. POPOVER ANCHOR
+--------------------------------------------------------- */
+
+.popover-anchor {
+    position: relative;
+    display: inline-block;
+}
+
+/* ---------------------------------------------------------
+   8. BASE POPOVER
+--------------------------------------------------------- */
+
+.popover {
+    position: absolute;
+    z-index: var(--z-tooltip);
+
+    min-width: 12rem;
+    max-width: 28rem;
+
+    background-color: var(--color-surface);
+    color: var(--color-text);
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border-subtle);
+    box-shadow: var(--shadow-3);
+
+    display: flex;
+    flex-direction: column;
+
+    opacity: 0;
+    transform: translateY(0.25rem);
+    pointer-events: none;
+
+    transition: opacity var(--transition-fast) var(--ease-out), transform var(--transition-fast) var(--ease-out);
+}
+
+.popover--open,
+.popover[data-state="open"] {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+}
+
+/* ---------------------------------------------------------
+   9. POPOVER POSITIONS
+--------------------------------------------------------- */
+
+.popover--top {
+    bottom: 100%;
+    left: 50%;
+    transform: translate(-50%, -0.25rem);
+}
+
+.popover--top.popover--open,
+.popover--top[data-state="open"] {
+    transform: translate(-50%, 0);
+}
+
+.popover--bottom {
+    top: 100%;
+    left: 50%;
+    transform: translate(-50%, 0.25rem);
+}
+
+.popover--bottom.popover--open,
+.popover--bottom[data-state="open"] {
+    transform: translate(-50%, 0);
+}
+
+.popover--left {
+    right: 100%;
+    top: 50%;
+    transform: translate(-0.25rem, -50%);
+}
+
+.popover--left.popover--open,
+.popover--left[data-state="open"] {
+    transform: translate(0, -50%);
+}
+
+.popover--right {
+    left: 100%;
+    top: 50%;
+    transform: translate(0.25rem, -50%);
+}
+
+.popover--right.popover--open,
+.popover--right[data-state="open"] {
+    transform: translate(0, -50%);
+}
+
+.popover--bottom-right {
+    top: 100%;
+    right: 0;
+    transform: translateY(0.25rem);
+}
+
+.popover--bottom-right.popover--open,
+.popover--bottom-right[data-state="open"] {
+    transform: translateY(0);
+}
+
+.popover--bottom-left {
+    top: 100%;
+    left: 0;
+    transform: translateY(0.25rem);
+}
+
+.popover--bottom-left.popover--open,
+.popover--bottom-left[data-state="open"] {
+    transform: translateY(0);
+}
+
+.popover--top-right {
+    bottom: 100%;
+    right: 0;
+    transform: translateY(-0.25rem);
+}
+
+.popover--top-right.popover--open,
+.popover--top-right[data-state="open"] {
+    transform: translateY(0);
+}
+
+.popover--top-left {
+    bottom: 100%;
+    left: 0;
+    transform: translateY(-0.25rem);
+}
+
+.popover--top-left.popover--open,
+.popover--top-left[data-state="open"] {
+    transform: translateY(0);
+}
+
+/* ---------------------------------------------------------
+   10. POPOVER ARROW
+--------------------------------------------------------- */
+
+.popover__arrow {
+    position: absolute;
+    width: var(--space-3);
+    height: var(--space-3);
+
+    background-color: inherit;
+    border: inherit;
+    border-left: none;
+    border-top: none;
+
+    transform: rotate(45deg);
+}
+
+.popover--bottom .popover__arrow,
+.popover--bottom-right .popover__arrow,
+.popover--bottom-left .popover__arrow {
+    bottom: 100%;
+    left: var(--space-6);
+    transform: translateY(50%) rotate(45deg);
+}
+
+.popover--top .popover__arrow,
+.popover--top-right .popover__arrow,
+.popover--top-left .popover__arrow {
+    top: 100%;
+    left: var(--space-6);
+    transform: translateY(-50%) rotate(45deg);
+}
+
+.popover--left .popover__arrow {
+    left: 100%;
+    top: 50%;
+    transform: translate(50%, -50%) rotate(45deg);
+}
+
+.popover--right .popover__arrow {
+    right: 100%;
+    top: 50%;
+    transform: translate(-50%, -50%) rotate(45deg);
+}
+
+/* ---------------------------------------------------------
+   11. POPOVER LAYOUT
+--------------------------------------------------------- */
+
+.popover__header,
+.popover__footer {
+    padding: var(--space-3) var(--space-4);
+    border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.popover__footer {
+    border-top: 1px solid var(--color-border-subtle);
+    border-bottom: none;
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--space-2);
+}
+
+.popover__body {
+    padding: var(--space-3) var(--space-4);
+}
+
+.popover__title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+}
+
+/* ---------------------------------------------------------
+   12. POPOVER DENSITY
+--------------------------------------------------------- */
+
+.popover--a .popover__header,
+.popover--a .popover__footer,
+.popover--a .popover__body {
+    padding: var(--space-4) var(--space-5);
+    font-size: var(--text-sm);
+}
+
+.popover--c .popover__header,
+.popover--c .popover__footer,
+.popover--c .popover__body {
+    padding: var(--space-2) var(--space-3);
+    font-size: var(--text-xs);
+}
+
+/* ---------------------------------------------------------
+   13. POPOVER SEMANTICS
+   (Aligns with overlay-inline semantics)
+--------------------------------------------------------- */
+
+.popover--info {
+    background-color: var(--semantic-info-bg);
+    color: var(--semantic-info-text);
+    border-color: var(--semantic-info-border);
+}
+
+.popover--success {
+    background-color: var(--semantic-success-bg);
+    color: var(--semantic-success-text);
+    border-color: var(--semantic-success-border);
+}
+
+.popover--warning {
+    background-color: var(--semantic-warning-bg);
+    color: var(--semantic-warning-text);
+    border-color: var(--semantic-warning-border);
+}
+
+.popover--danger {
+    background-color: var(--semantic-danger-bg);
+    color: var(--semantic-danger-text);
+    border-color: var(--semantic-danger-border);
+}

package/dist/components/tooltips-popovers.min.css

@@ -0,0 +1 @@
+.tooltip-trigger{align-items:center;display:inline-flex;position:relative}.tooltip{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);box-shadow:var(--shadow-2);color:var(--color-text);font-size:var(--text-xs);line-height:1.4;max-width:24rem;opacity:0;padding:var(--space-2) var(--space-3);pointer-events:none;position:absolute;transform:translateY(.25rem);transition:opacity var(--transition-fast) var(--ease-out),transform var(--transition-fast) var(--ease-out);white-space:normal;z-index:var(--z-tooltip)}.tooltip--visible,.tooltip[data-state=open]{opacity:1;pointer-events:auto;transform:translateY(0)}.tooltip--top{bottom:100%;left:50%;transform:translate(-50%,-.25rem)}.tooltip--top.tooltip--visible,.tooltip--top[data-state=open]{transform:translate(-50%)}.tooltip--bottom{left:50%;top:100%;transform:translate(-50%,.25rem)}.tooltip--bottom.tooltip--visible,.tooltip--bottom[data-state=open]{transform:translate(-50%)}.tooltip--left{right:100%;top:50%;transform:translate(-.25rem,-50%)}.tooltip--left.tooltip--visible,.tooltip--left[data-state=open]{transform:translateY(-50%)}.tooltip--right{left:100%;top:50%;transform:translate(.25rem,-50%)}.tooltip--right.tooltip--visible,.tooltip--right[data-state=open]{transform:translateY(-50%)}.tooltip__arrow{background-color:inherit;border:inherit;border-left:none;border-top:none;height:var(--space-3);position:absolute;transform:rotate(45deg);width:var(--space-3)}.tooltip--top .tooltip__arrow{left:50%;top:100%;transform:translate(-50%,-50%) rotate(45deg)}.tooltip--bottom .tooltip__arrow{bottom:100%;left:50%;transform:translate(-50%,50%) rotate(45deg)}.tooltip--left .tooltip__arrow{left:100%;top:50%;transform:translate(50%,-50%) rotate(45deg)}.tooltip--right .tooltip__arrow{right:100%;top:50%;transform:translate(-50%,-50%) rotate(45deg)}.tooltip--a{font-size:var(--text-sm);padding:var(--space-3) var(--space-4)}.tooltip--c{font-size:var(--text-xs);padding:var(--space-1) var(--space-2)}.tooltip--info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.tooltip--success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.tooltip--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.tooltip--danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}.popover-anchor{display:inline-block;position:relative}.popover{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-3);color:var(--color-text);display:flex;flex-direction:column;max-width:28rem;min-width:12rem;opacity:0;pointer-events:none;position:absolute;transform:translateY(.25rem);transition:opacity var(--transition-fast) var(--ease-out),transform var(--transition-fast) var(--ease-out);z-index:var(--z-tooltip)}.popover--open,.popover[data-state=open]{opacity:1;pointer-events:auto;transform:translateY(0)}.popover--top{bottom:100%;left:50%;transform:translate(-50%,-.25rem)}.popover--top.popover--open,.popover--top[data-state=open]{transform:translate(-50%)}.popover--bottom{left:50%;top:100%;transform:translate(-50%,.25rem)}.popover--bottom.popover--open,.popover--bottom[data-state=open]{transform:translate(-50%)}.popover--left{right:100%;top:50%;transform:translate(-.25rem,-50%)}.popover--left.popover--open,.popover--left[data-state=open]{transform:translateY(-50%)}.popover--right{left:100%;top:50%;transform:translate(.25rem,-50%)}.popover--right.popover--open,.popover--right[data-state=open]{transform:translateY(-50%)}.popover--bottom-right{right:0;top:100%;transform:translateY(.25rem)}.popover--bottom-right.popover--open,.popover--bottom-right[data-state=open]{transform:translateY(0)}.popover--bottom-left{left:0;top:100%;transform:translateY(.25rem)}.popover--bottom-left.popover--open,.popover--bottom-left[data-state=open]{transform:translateY(0)}.popover--top-right{bottom:100%;right:0;transform:translateY(-.25rem)}.popover--top-right.popover--open,.popover--top-right[data-state=open]{transform:translateY(0)}.popover--top-left{bottom:100%;left:0;transform:translateY(-.25rem)}.popover--top-left.popover--open,.popover--top-left[data-state=open]{transform:translateY(0)}.popover__arrow{background-color:inherit;border:inherit;border-left:none;border-top:none;height:var(--space-3);position:absolute;transform:rotate(45deg);width:var(--space-3)}.popover--bottom .popover__arrow,.popover--bottom-left .popover__arrow,.popover--bottom-right .popover__arrow{bottom:100%;left:var(--space-6);transform:translateY(50%) rotate(45deg)}.popover--top .popover__arrow,.popover--top-left .popover__arrow,.popover--top-right .popover__arrow{left:var(--space-6);top:100%;transform:translateY(-50%) rotate(45deg)}.popover--left .popover__arrow{left:100%;top:50%;transform:translate(50%,-50%) rotate(45deg)}.popover--right .popover__arrow{right:100%;top:50%;transform:translate(-50%,-50%) rotate(45deg)}.popover__footer,.popover__header{border-bottom:1px solid var(--color-border-subtle);padding:var(--space-3) var(--space-4)}.popover__footer{border-bottom:none;border-top:1px solid var(--color-border-subtle);display:flex;gap:var(--space-2);justify-content:flex-end}.popover__body{padding:var(--space-3) var(--space-4)}.popover__title{font-size:var(--text-sm);font-weight:600}.popover--a .popover__body,.popover--a .popover__footer,.popover--a .popover__header{font-size:var(--text-sm);padding:var(--space-4) var(--space-5)}.popover--c .popover__body,.popover--c .popover__footer,.popover--c .popover__header{font-size:var(--text-xs);padding:var(--space-2) var(--space-3)}.popover--info{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.popover--success{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.popover--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.popover--danger{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}

package/dist/components/typography.css

@@ -0,0 +1,250 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Typography System
+ *
+ *  Responsibilities:
+ *    - Establish the full text scale, font stacks, weights, and line-heights
+ *    - Style headings, paragraphs, blockquotes, pullquotes, lists, code, pre,
+ *      tables, figures, captions, badges, and footnotes for rich prose
+ *    - Provide consistent spacing rhythm and vertical flow for long-form
+ *      documents and documentation environments
+ *    - Ensure inline elements (code, links, emphasis, badges, refs) integrate
+ *      cleanly inside the prose engine
+ *
+ *  System Notes:
+ *    - 100% token-driven: text sizes, weights, radii, colors, spacing
+ *    - Safe to embed within doc-block, authoring, and content-block systems
+ *    - Code theming inherited from code tokens; tables align with tables.css
+ *    - Designed for predictable behaviour across themes and reduced-motion
+ ************************************************************/
+
+[data-vds-typography],
+.vds-typography {
+    --typography-code-block-border: var(--color-border-subtle);
+    --prose-table-cell-padding: var(--space-2);
+
+    --blockquote-border-width: 3px;
+    --pullquote-border-width: 3px;
+}
+
+.typography {
+    color: var(--color-text);
+    font-size: var(--text-base);
+    line-height: var(--line-height-normal);
+}
+
+.typography h1,
+.typography h2,
+.typography h3,
+.typography h4,
+.typography h5,
+.typography h6 {
+    font-family: var(--font-family-sans), sans-serif;
+    font-weight: 600;
+    color: var(--color-text);
+    margin-top: var(--space-8);
+    margin-bottom: var(--space-4);
+    line-height: var(--line-height-tight);
+}
+
+.typography h1:first-child,
+.typography h2:first-child,
+.typography h3:first-child,
+.typography h4:first-child,
+.typography h5:first-child,
+.typography h6:first-child {
+    margin-top: 0;
+}
+
+.typography h1 {
+    font-size: var(--text-4xl);
+}
+
+.typography h2 {
+    font-size: var(--text-3xl);
+}
+
+.typography h3 {
+    font-size: var(--text-2xl);
+}
+
+.typography h4 {
+    font-size: var(--text-xl);
+}
+
+.typography h5 {
+    font-size: var(--text-lg);
+}
+
+.typography h6 {
+    font-size: var(--text-base);
+}
+
+.typography p {
+    margin-top: var(--space-3);
+    margin-bottom: var(--space-3);
+}
+
+.typography strong {
+    font-weight: 600;
+}
+
+.typography em {
+    font-style: italic;
+}
+
+.typography code {
+    font-family: var(--font-family-mono), monospace;
+    font-size: 0.875em;
+    padding-left: var(--space-1);
+    padding-right: var(--space-1);
+    padding-top: 0.1em;
+    padding-bottom: 0.1em;
+    border-radius: var(--radius-sm);
+    background: var(--code-inline-bg);
+    border: 1px solid var(--code-inline-border);
+}
+
+.table code {
+    padding: 0 !important;
+    border: none !important;
+    background: none !important;
+    font-size: inherit !important;
+    line-height: inherit !important;
+}
+
+.typography pre {
+    font-family: var(--font-family-mono), monospace;
+    font-size: var(--text-sm);
+    background: var(--code-block-bg);
+    border: 1px solid var(--typography-code-block-border);
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+    overflow-x: auto;
+    margin-top: var(--space-4);
+    margin-bottom: var(--space-4);
+}
+
+.typography pre code {
+    background: none !important;
+    border: none !important;
+}
+
+.typography pre code {
+    padding: 0;
+    border-radius: 0;
+}
+
+.typography ul,
+.typography ol {
+    margin-top: var(--space-3);
+    margin-bottom: var(--space-3);
+    padding-left: var(--space-6);
+}
+
+.typography li {
+    margin-top: var(--space-1);
+    margin-bottom: var(--space-1);
+}
+
+.typography ul ul,
+.typography ol ol,
+.typography ul ol,
+.typography ol ul {
+    margin-top: var(--space-1);
+    margin-bottom: var(--space-1);
+}
+
+.typography blockquote {
+    margin-top: var(--space-6);
+    margin-bottom: var(--space-6);
+    padding-left: var(--space-4);
+    border-left: var(--blockquote-border-width) solid var(--blockquote-text);
+    color: var(--color-text-muted);
+    font-style: italic;
+}
+
+.typography .pullquote {
+    margin-top: var(--space-8);
+    margin-bottom: var(--space-8);
+    padding: var(--space-4);
+    border-left: var(--pullquote-border-width) solid var(--blockquote-border);
+    font-size: var(--text-xl);
+    line-height: var(--line-height-tight);
+}
+
+.typography figure {
+    margin-top: var(--space-6);
+    margin-bottom: var(--space-6);
+    text-align: center;
+}
+
+.typography figcaption {
+    margin-top: var(--space-2);
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+}
+
+.typography img {
+    max-width: 100%;
+    border-radius: var(--radius-md);
+}
+
+.typography table:not(.table) {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: var(--space-4);
+    margin-bottom: var(--space-4);
+    font-size: var(--text-sm);
+}
+
+.typography table:not(.table) th,
+.typography table:not(.table) td {
+    border-bottom: 1px solid var(--color-border-subtle);
+    padding: var(--prose-table-cell-padding);
+    text-align: left;
+}
+
+.typography table:not(.table) th {
+    font-weight: 600;
+    background: var(--color-surface-subtle);
+    color: var(--color-text);
+}
+
+.typography table:not(.table) caption {
+    text-align: left;
+    font-size: var(--text-sm);
+    color: var(--color-text-muted);
+    margin-bottom: var(--space-2);
+}
+
+.typography .badge-inline {
+    display: inline-block;
+    padding: 0 var(--space-2);
+    font-size: var(--text-xs);
+    background: var(--color-bg-soft);
+    border-radius: var(--radius-sm);
+    color: var(--color-text-muted);
+}
+
+.typography .footnotes {
+    margin-top: var(--space-8);
+    padding-top: var(--space-4);
+    font-size: var(--footnote-font-size);
+    color: var(--footnote-color);
+    border-top: 1px solid var(--color-border-subtle);
+}
+
+.typography .footnotes ol {
+    padding-left: var(--space-6);
+}
+
+.typography .fn-ref {
+    font-size: 0.75em;
+    vertical-align: super;
+}
+
+.typography .fn-backref {
+    margin-left: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}

package/dist/components/typography.min.css

@@ -0,0 +1 @@
+.vds-typography,[data-vds-typography]{--typography-code-block-border:var(--color-border-subtle);--prose-table-cell-padding:var(--space-2);--blockquote-border-width:3px;--pullquote-border-width:3px}.typography{color:var(--color-text);font-size:var(--text-base);line-height:var(--line-height-normal)}.typography h1,.typography h2,.typography h3,.typography h4,.typography h5,.typography h6{color:var(--color-text);font-family:var(--font-family-sans),sans-serif;font-weight:600;line-height:var(--line-height-tight);margin-bottom:var(--space-4);margin-top:var(--space-8)}.typography h1:first-child,.typography h2:first-child,.typography h3:first-child,.typography h4:first-child,.typography h5:first-child,.typography h6:first-child{margin-top:0}.typography h1{font-size:var(--text-4xl)}.typography h2{font-size:var(--text-3xl)}.typography h3{font-size:var(--text-2xl)}.typography h4{font-size:var(--text-xl)}.typography h5{font-size:var(--text-lg)}.typography h6{font-size:var(--text-base)}.typography p{margin-bottom:var(--space-3);margin-top:var(--space-3)}.typography strong{font-weight:600}.typography em{font-style:italic}.typography code{background:var(--code-inline-bg);border:1px solid var(--code-inline-border);border-radius:var(--radius-sm);font-family:var(--font-family-mono),monospace;font-size:.875em;padding-bottom:.1em;padding-left:var(--space-1);padding-right:var(--space-1);padding-top:.1em}.table code{background:none!important;border:none!important;font-size:inherit!important;line-height:inherit!important;padding:0!important}.typography pre{background:var(--code-block-bg);border:1px solid var(--typography-code-block-border);border-radius:var(--radius-md);font-family:var(--font-family-mono),monospace;font-size:var(--text-sm);margin-bottom:var(--space-4);margin-top:var(--space-4);overflow-x:auto;padding:var(--space-4)}.typography pre code{background:none!important;border:none!important;border-radius:0;padding:0}.typography ol,.typography ul{margin-bottom:var(--space-3);margin-top:var(--space-3);padding-left:var(--space-6)}.typography li,.typography ol ol,.typography ol ul,.typography ul ol,.typography ul ul{margin-bottom:var(--space-1);margin-top:var(--space-1)}.typography blockquote{border-left:var(--blockquote-border-width) solid var(--blockquote-text);color:var(--color-text-muted);font-style:italic;margin-bottom:var(--space-6);margin-top:var(--space-6);padding-left:var(--space-4)}.typography .pullquote{border-left:var(--pullquote-border-width) solid var(--blockquote-border);font-size:var(--text-xl);line-height:var(--line-height-tight);margin-bottom:var(--space-8);margin-top:var(--space-8);padding:var(--space-4)}.typography figure{margin-bottom:var(--space-6);margin-top:var(--space-6);text-align:center}.typography figcaption{color:var(--color-text-muted);font-size:var(--text-sm);margin-top:var(--space-2)}.typography img{border-radius:var(--radius-md);max-width:100%}.typography table:not(.table){border-collapse:collapse;font-size:var(--text-sm);margin-bottom:var(--space-4);margin-top:var(--space-4);width:100%}.typography table:not(.table) td,.typography table:not(.table) th{border-bottom:1px solid var(--color-border-subtle);padding:var(--prose-table-cell-padding);text-align:left}.typography table:not(.table) th{background:var(--color-surface-subtle);color:var(--color-text);font-weight:600}.typography table:not(.table) caption{color:var(--color-text-muted);font-size:var(--text-sm);margin-bottom:var(--space-2);text-align:left}.typography .badge-inline{background:var(--color-bg-soft);border-radius:var(--radius-sm);color:var(--color-text-muted);display:inline-block;font-size:var(--text-xs);padding:0 var(--space-2)}.typography .footnotes{border-top:1px solid var(--color-border-subtle);color:var(--footnote-color);font-size:var(--footnote-font-size);margin-top:var(--space-8);padding-top:var(--space-4)}.typography .footnotes ol{padding-left:var(--space-6)}.typography .fn-ref{font-size:.75em;vertical-align:super}.typography .fn-backref{color:var(--color-text-muted);font-size:var(--text-xs);margin-left:var(--space-2)}