@24vlh/vds 0.1.10 → 0.2.1

package/dist/components/action-bar.css

@@ -0,0 +1,111 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Action Bar
+ *
+ *  Responsibilities:
+ *    - Provide bulk-action surfaces for tables and lists
+ *    - Support sticky and floating layouts
+ *    - Provide meta, count, actions, and dismiss slots
+ *
+ *  System Notes:
+ *    - Pure CSS; use buttons/links for actions
+ *    - Token-driven spacing, shadows, and borders
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. TOKENS
+--------------------------------------------------------- */
+
+[data-vds-action-bar],
+.vds-action-bar {
+    --action-bar-bg: var(--color-surface);
+    --action-bar-border: var(--color-border-subtle);
+    --action-bar-shadow: var(--shadow-2);
+    --action-bar-radius: var(--radius-lg);
+    --action-bar-gap: var(--space-4);
+    --action-bar-pad-y: var(--space-4);
+    --action-bar-pad-x: var(--space-6);
+}
+
+/* ---------------------------------------------------------
+   2. BASE BAR
+--------------------------------------------------------- */
+
+.action-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--action-bar-gap);
+    padding: var(--action-bar-pad-y) var(--action-bar-pad-x);
+    border-radius: var(--action-bar-radius);
+    border: 1px solid var(--action-bar-border);
+    background: var(--action-bar-bg);
+    box-shadow: var(--action-bar-shadow);
+}
+
+.action-bar__meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    font-size: var(--text-sm);
+    color: var(--color-text);
+}
+
+.action-bar__count {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 var(--space-2);
+    height: var(--space-6);
+    border-radius: var(--radius-full);
+    background: var(--color-accent-soft);
+    color: var(--color-text);
+    font-size: var(--text-xs);
+    font-weight: 600;
+}
+
+.action-bar__actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--space-3);
+}
+
+.action-bar__dismiss {
+    margin-left: auto;
+}
+
+/* ---------------------------------------------------------
+   3. VARIANTS
+--------------------------------------------------------- */
+
+.action-bar--compact {
+    --action-bar-pad-y: var(--space-3);
+    --action-bar-pad-x: var(--space-4);
+    --action-bar-gap: var(--space-3);
+}
+
+.action-bar--sticky {
+    position: sticky;
+    bottom: var(--space-4);
+    z-index: var(--z-sticky);
+}
+
+.action-bar--floating {
+    border-color: transparent;
+    box-shadow: var(--shadow-3);
+}
+
+@media (max-width: 768px) {
+    .action-bar {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .action-bar__meta {
+        justify-content: space-between;
+    }
+
+    .action-bar__actions {
+        justify-content: flex-start;
+    }
+}

package/dist/components/action-bar.min.css

@@ -0,0 +1 @@
+.vds-action-bar,[data-vds-action-bar]{--action-bar-bg:var(--color-surface);--action-bar-border:var(--color-border-subtle);--action-bar-shadow:var(--shadow-2);--action-bar-radius:var(--radius-lg);--action-bar-gap:var(--space-4);--action-bar-pad-y:var(--space-4);--action-bar-pad-x:var(--space-6)}.action-bar{background:var(--action-bar-bg);border:1px solid var(--action-bar-border);border-radius:var(--action-bar-radius);box-shadow:var(--action-bar-shadow);gap:var(--action-bar-gap);justify-content:space-between;padding:var(--action-bar-pad-y) var(--action-bar-pad-x)}.action-bar,.action-bar__meta{align-items:center;display:flex}.action-bar__meta{color:var(--color-text);font-size:var(--text-sm);gap:var(--space-3)}.action-bar__count{align-items:center;background:var(--color-accent-soft);border-radius:var(--radius-full);color:var(--color-text);display:inline-flex;font-size:var(--text-xs);font-weight:600;height:var(--space-6);justify-content:center;padding:0 var(--space-2)}.action-bar__actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-3)}.action-bar__dismiss{margin-left:auto}.action-bar--compact{--action-bar-pad-y:var(--space-3);--action-bar-pad-x:var(--space-4);--action-bar-gap:var(--space-3)}.action-bar--sticky{bottom:var(--space-4);position:sticky;z-index:var(--z-sticky)}.action-bar--floating{border-color:transparent;box-shadow:var(--shadow-3)}@media (max-width:768px){.action-bar{align-items:stretch;flex-direction:column}.action-bar__meta{justify-content:space-between}.action-bar__actions{justify-content:flex-start}}

package/dist/components/authoring.css

@@ -24,7 +24,9 @@
 --------------------------------------------------------- */
 
 [data-vds-authoring],
-.vds-authoring {
+.vds-authoring,
+.authoring,
+.doc-authoring {
     --highlight-border-width: var(--border-width-strong);
 
     --admonition-radius: var(--radius-md);
@@ -32,12 +34,19 @@
     --admonition-gap: var(--space-3);
     --admonition-pad-y: var(--space-3);
     --admonition-pad-x: var(--space-4);
+    --admonition-bg: var(--color-surface-subtle);
+    --admonition-border-color: var(--color-border-subtle);
+    --admonition-text: var(--color-text);
+    --admonition-title-color: var(--color-text);
+    --admonition-icon-color: var(--color-text);
+    --admonition-shadow: none;
 
     --footnote-size: var(--text-xs);
-    --footnote-color: var(--footnote-color, var(--color-text-muted));
 
     --marker-bg: var(--color-muted-bg);
     --marker-border: var(--color-muted-border);
+    --marker-text: var(--color-text);
+    --marker-radius: var(--radius-sm);
 }
 
 /* ---------------------------------------------------------
@@ -53,16 +62,19 @@
     align-items: flex-start;
     gap: var(--admonition-gap);
 
+    border: 0;
     border-radius: var(--admonition-radius);
-    border-left: var(--admonition-border) solid var(--color-border-subtle);
-    background-color: var(--color-surface-subtle);
-    color: var(--color-text);
+    border-left: var(--admonition-border) solid var(--admonition-border-color);
+    background-color: var(--admonition-bg);
+    color: var(--admonition-text);
+    box-shadow: var(--admonition-shadow);
 }
 
 .admonition__icon {
     flex-shrink: 0;
     margin-top: 0.15em;
     font-size: var(--text-lg);
+    color: var(--admonition-icon-color);
     opacity: 0.85;
 }
 
@@ -77,6 +89,7 @@
     text-transform: uppercase;
     letter-spacing: 0.06em;
     margin-bottom: var(--space-1);
+    color: var(--admonition-title-color);
 }
 
 .admonition__body {
@@ -84,48 +97,145 @@
     line-height: var(--line-height-relaxed);
 }
 
+.admonition__meta {
+    font-size: var(--text-xs);
+    opacity: 0.8;
+    margin-top: var(--space-1);
+}
+
+.admonition__footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+    margin-top: var(--space-2);
+    font-size: var(--text-xs);
+    opacity: 0.85;
+}
+
+.admonition__actions {
+    display: inline-flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--space-2);
+}
+
+.admonition__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-gap: var(--space-1);
+    gap: var(--space-1);
+}
+
+.admonition__list li {
+    position: relative;
+    padding-left: var(--space-4);
+}
+
+.admonition__list li::before {
+    content: "";
+    position: absolute;
+    width: 0.4rem;
+    height: 0.4rem;
+    border-radius: 999px;
+    background-color: var(--admonition-border-color);
+    left: 0;
+    top: 0.35rem;
+}
+
 .admonition--compact {
     padding-top: var(--space-2);
     padding-bottom: var(--space-2);
     padding-left: var(--space-3);
     padding-right: var(--space-3);
+    gap: var(--space-2);
 }
 
 /* ---------------------------------------------------------
    2.1 ADMONITION VARIANTS
 --------------------------------------------------------- */
 
+:where(.admonition)[data-variant="info"],
 .admonition--note,
 .admonition--info {
-    background-color: var(--semantic-info-bg);
-    border-color: var(--semantic-info-border);
-    color: var(--semantic-info-text);
+    --admonition-bg: var(--semantic-info-bg);
+    --admonition-border-color: var(--semantic-info-border);
+    --admonition-text: var(--semantic-info-text);
+    --admonition-title-color: var(--semantic-info-text);
+    --admonition-icon-color: var(--semantic-info-text);
 }
 
+:where(.admonition)[data-variant="success"],
 .admonition--tip,
 .admonition--success {
-    background-color: var(--semantic-success-bg);
-    border-color: var(--semantic-success-border);
-    color: var(--semantic-success-text);
+    --admonition-bg: var(--semantic-success-bg);
+    --admonition-border-color: var(--semantic-success-border);
+    --admonition-text: var(--semantic-success-text);
+    --admonition-title-color: var(--semantic-success-text);
+    --admonition-icon-color: var(--semantic-success-text);
 }
 
+:where(.admonition)[data-variant="warning"],
 .admonition--warning {
-    background-color: var(--semantic-warning-bg);
-    border-color: var(--semantic-warning-border);
-    color: var(--semantic-warning-text);
+    --admonition-bg: var(--semantic-warning-bg);
+    --admonition-border-color: var(--semantic-warning-border);
+    --admonition-text: var(--semantic-warning-text);
+    --admonition-title-color: var(--semantic-warning-text);
+    --admonition-icon-color: var(--semantic-warning-text);
 }
 
+:where(.admonition)[data-variant="danger"],
 .admonition--danger,
 .admonition--important {
-    background-color: var(--semantic-danger-bg);
-    border-color: var(--semantic-danger-border);
-    color: var(--semantic-danger-text);
+    --admonition-bg: var(--semantic-danger-bg);
+    --admonition-border-color: var(--semantic-danger-border);
+    --admonition-text: var(--semantic-danger-text);
+    --admonition-title-color: var(--semantic-danger-text);
+    --admonition-icon-color: var(--semantic-danger-text);
+}
+
+:where(.admonition)[data-variant="accent"],
+.admonition--accent {
+    --admonition-bg: var(--accent-soft-surface, var(--color-accent-soft));
+    --admonition-border-color: var(--accent-soft-border, var(--color-accent));
+    --admonition-text: var(--accent-soft-on, var(--color-on-accent));
+    --admonition-title-color: var(--accent-soft-on, var(--color-on-accent));
+    --admonition-icon-color: var(--accent-soft-on, var(--color-on-accent));
+}
+
+:where(.admonition)[data-variant="neutral"],
+.admonition--neutral {
+    --admonition-bg: var(--color-surface-subtle);
+    --admonition-border-color: var(--color-border-strong);
+    --admonition-text: var(--color-text);
+    --admonition-title-color: var(--color-text);
+    --admonition-icon-color: var(--color-text-muted);
+}
+
+.admonition--bordered {
+    border: var(--admonition-border) solid var(--admonition-border-color);
+    border-left-width: var(--admonition-border);
+}
+
+.admonition--outline {
+    border: var(--admonition-border) solid var(--admonition-border-color);
+    border-left-width: var(--admonition-border);
+    background-color: transparent;
+}
+
+.admonition--plain {
+    border: 0;
+    background-color: transparent;
+    padding: 0;
 }
 
 /* ---------------------------------------------------------
    3. MDX / MARKDOWN CALLOUTS
 --------------------------------------------------------- */
 
+.md-callout,
 .md-note,
 .md-info,
 .md-tip,
@@ -138,31 +248,74 @@
     padding: var(--space-3) var(--space-4);
     border-radius: var(--radius-md);
     border-left: var(--highlight-border-width) solid currentColor;
+    border-left: var(--highlight-border-width) solid var(--callout-border-color, currentColor);
+    background-color: var(--callout-bg, var(--color-surface-subtle));
+    color: var(--callout-text, var(--color-text));
     font-size: var(--text-sm);
     line-height: var(--line-height-relaxed);
 }
 
+.md-callout[data-variant="info"] {
+    --callout-bg: var(--semantic-info-bg);
+    --callout-border-color: var(--semantic-info-border);
+    --callout-text: var(--semantic-info-text);
+}
+
+.md-callout[data-variant="success"] {
+    --callout-bg: var(--semantic-success-bg);
+    --callout-border-color: var(--semantic-success-border);
+    --callout-text: var(--semantic-success-text);
+}
+
+.md-callout[data-variant="warning"] {
+    --callout-bg: var(--semantic-warning-bg);
+    --callout-border-color: var(--semantic-warning-border);
+    --callout-text: var(--semantic-warning-text);
+}
+
+.md-callout[data-variant="danger"] {
+    --callout-bg: var(--semantic-danger-bg);
+    --callout-border-color: var(--semantic-danger-border);
+    --callout-text: var(--semantic-danger-text);
+}
+
+.md-callout[data-variant="accent"] {
+    --callout-bg: var(--accent-soft-surface, var(--color-accent-soft));
+    --callout-border-color: var(--accent-soft-border, var(--color-accent));
+    --callout-text: var(--accent-soft-on, var(--color-on-accent));
+}
+
+.md-callout[data-variant="neutral"] {
+    --callout-bg: var(--color-surface-subtle);
+    --callout-border-color: var(--color-border-strong);
+    --callout-text: var(--color-text);
+}
+
 .md-note,
 .md-info {
-    background-color: var(--semantic-info-bg);
-    color: var(--semantic-info-text);
+    --callout-bg: var(--semantic-info-bg);
+    --callout-border-color: var(--semantic-info-border);
+    --callout-text: var(--semantic-info-text);
 }
 
 .md-tip,
 .md-success {
-    background-color: var(--semantic-success-bg);
-    color: var(--semantic-success-text);
+    --callout-bg: var(--semantic-success-bg);
+    --callout-border-color: var(--semantic-success-border);
+    --callout-text: var(--semantic-success-text);
 }
 
 .md-warning {
-    background-color: var(--semantic-warning-bg);
-    color: var(--semantic-warning-text);
+    --callout-bg: var(--semantic-warning-bg);
+    --callout-border-color: var(--semantic-warning-border);
+    --callout-text: var(--semantic-warning-text);
 }
 
 .md-danger,
 .md-important {
-    background-color: var(--semantic-danger-bg);
-    color: var(--semantic-danger-text);
+    --callout-bg: var(--semantic-danger-bg);
+    --callout-border-color: var(--semantic-danger-border);
+    --callout-text: var(--semantic-danger-text);
 }
 
 /* ---------------------------------------------------------
@@ -198,6 +351,16 @@ h6:focus-within .heading-anchor {
     opacity: 1;
 }
 
+.heading-anchor--always {
+    opacity: 1;
+}
+
+@media (hover: none) {
+    .heading-anchor {
+        opacity: 1;
+    }
+}
+
 /* ---------------------------------------------------------
    5. FOOTNOTES
 --------------------------------------------------------- */
@@ -205,7 +368,7 @@ h6:focus-within .heading-anchor {
 .fn-ref {
     font-size: var(--footnote-size);
     vertical-align: super;
-    color: var(--footnote-color);
+    color: var(--footnote-color, var(--color-text-muted));
     -webkit-text-decoration: none;
     text-decoration: none;
     margin-left: 0.15em;
@@ -219,7 +382,7 @@ h6:focus-within .heading-anchor {
     font-size: var(--footnote-size);
     -webkit-text-decoration: none;
     text-decoration: none;
-    color: var(--footnote-color);
+    color: var(--footnote-color, var(--color-text-muted));
 }
 
 .footnotes {
@@ -244,36 +407,62 @@ h6:focus-within .heading-anchor {
 .inline-marker {
     display: inline-block;
     padding: 0 var(--space-1_5);
-    border-radius: var(--radius-sm);
+    border-radius: var(--marker-radius);
     background: var(--marker-bg);
     border: 1px solid var(--marker-border);
     font-size: var(--text-xs);
     line-height: 1.3;
-    color: var(--color-text);
+    color: var(--marker-text);
 }
 
+:where(.inline-marker)[data-variant="info"],
 .inline-marker--info {
-    background: var(--semantic-info-bg);
-    border-color: var(--semantic-info-border);
-    color: var(--semantic-info-text);
+    --marker-bg: var(--semantic-info-bg);
+    --marker-border: var(--semantic-info-border);
+    --marker-text: var(--semantic-info-text);
 }
 
+:where(.inline-marker)[data-variant="success"],
 .inline-marker--success {
-    background: var(--semantic-success-bg);
-    border-color: var(--semantic-success-border);
-    color: var(--semantic-success-text);
+    --marker-bg: var(--semantic-success-bg);
+    --marker-border: var(--semantic-success-border);
+    --marker-text: var(--semantic-success-text);
 }
 
+:where(.inline-marker)[data-variant="warning"],
 .inline-marker--warning {
-    background: var(--semantic-warning-bg);
-    border-color: var(--semantic-warning-border);
-    color: var(--semantic-warning-text);
+    --marker-bg: var(--semantic-warning-bg);
+    --marker-border: var(--semantic-warning-border);
+    --marker-text: var(--semantic-warning-text);
 }
 
+:where(.inline-marker)[data-variant="danger"],
 .inline-marker--danger {
-    background: var(--semantic-danger-bg);
-    border-color: var(--semantic-danger-border);
-    color: var(--semantic-danger-text);
+    --marker-bg: var(--semantic-danger-bg);
+    --marker-border: var(--semantic-danger-border);
+    --marker-text: var(--semantic-danger-text);
+}
+
+:where(.inline-marker)[data-variant="accent"],
+.inline-marker--accent {
+    --marker-bg: var(--accent-soft-surface, var(--color-accent-soft));
+    --marker-border: var(--accent-soft-border, var(--color-accent));
+    --marker-text: var(--accent-soft-on, var(--color-on-accent));
+}
+
+:where(.inline-marker)[data-variant="neutral"],
+.inline-marker--neutral {
+    --marker-bg: var(--color-surface-subtle);
+    --marker-border: var(--color-border-strong);
+    --marker-text: var(--color-text);
+}
+
+.inline-marker--outline {
+    background: transparent;
+}
+
+.inline-marker--pill {
+    --marker-radius: var(--radius-pill);
 }
 
 /* ---------------------------------------------------------
@@ -305,10 +494,40 @@ h6:focus-within .heading-anchor {
     gap: var(--space-6);
 }
 
+.prose-grid-3 {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-gap: var(--space-6);
+    gap: var(--space-6);
+}
+
+.prose-grid-1-2 {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+    grid-gap: var(--space-6);
+    gap: var(--space-6);
+}
+
+.prose-grid-2-1 {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
+    grid-gap: var(--space-6);
+    gap: var(--space-6);
+}
+
 @media (max-width: 1024px) {
     .prose-grid-2 {
         grid-template-columns: 1fr;
     }
+
+    .prose-grid-3 {
+        grid-template-columns: 1fr;
+    }
+
+    .prose-grid-1-2,
+    .prose-grid-2-1 {
+        grid-template-columns: 1fr;
+    }
 }
 
 /* ---------------------------------------------------------
@@ -326,7 +545,8 @@ h6:focus-within .heading-anchor {
 .doc-block__body .md-success,
 .doc-block__body .md-warning,
 .doc-block__body .md-danger,
-.doc-block__body .md-important {
+.doc-block__body .md-important,
+.doc-block__body .md-callout {
     margin-top: var(--space-3);
     margin-bottom: var(--space-3);
 }

package/dist/components/authoring.min.css

@@ -1 +1 @@
-.vds-authoring,[data-vds-authoring]{--highlight-border-width:var(--border-width-strong);--admonition-radius:var(--radius-md);--admonition-border:var(--highlight-border-width);--admonition-gap:var(--space-3);--admonition-pad-y:var(--space-3);--admonition-pad-x:var(--space-4);--footnote-size:var(--text-xs);--footnote-color:var(--footnote-color,var(--color-text-muted));--marker-bg:var(--color-muted-bg);--marker-border:var(--color-muted-border)}.admonition{align-items:flex-start;background-color:var(--color-surface-subtle);border-left:var(--admonition-border) solid var(--color-border-subtle);border-radius:var(--admonition-radius);color:var(--color-text);display:flex;gap:var(--admonition-gap);margin-bottom:var(--space-4);margin-top:var(--space-4);padding:var(--admonition-pad-y) var(--admonition-pad-x)}.admonition__icon{flex-shrink:0;font-size:var(--text-lg);margin-top:.15em;opacity:.85}.admonition__content{flex:1 1 auto;min-width:0}.admonition__title{font-size:var(--text-sm);font-weight:600;letter-spacing:.06em;margin-bottom:var(--space-1);text-transform:uppercase}.admonition__body{font-size:var(--text-sm);line-height:var(--line-height-relaxed)}.admonition--compact{padding:var(--space-2) var(--space-3)}.admonition--info,.admonition--note{background-color:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.admonition--success,.admonition--tip{background-color:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.admonition--warning{background-color:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.admonition--danger,.admonition--important{background-color:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}.md-danger,.md-important,.md-info,.md-note,.md-success,.md-tip,.md-warning{border-left:var(--highlight-border-width) solid;border-radius:var(--radius-md);font-size:var(--text-sm);line-height:var(--line-height-relaxed);margin-bottom:var(--space-4);margin-top:var(--space-4);padding:var(--space-3) var(--space-4)}.md-info,.md-note{background-color:var(--semantic-info-bg);color:var(--semantic-info-text)}.md-success,.md-tip{background-color:var(--semantic-success-bg);color:var(--semantic-success-text)}.md-warning{background-color:var(--semantic-warning-bg);color:var(--semantic-warning-text)}.md-danger,.md-important{background-color:var(--semantic-danger-bg);color:var(--semantic-danger-text)}.heading-anchor{color:var(--color-text-soft);font-size:.8em;margin-left:var(--space-1);opacity:0;-webkit-text-decoration:none;text-decoration:none;transition:opacity var(--transition-fast)}.heading-anchor:hover{color:var(--link-text-hover)}h1:focus-within .heading-anchor,h1:hover .heading-anchor,h2:focus-within .heading-anchor,h2:hover .heading-anchor,h3:focus-within .heading-anchor,h3:hover .heading-anchor,h4:focus-within .heading-anchor,h4:hover .heading-anchor,h5:focus-within .heading-anchor,h5:hover .heading-anchor,h6:focus-within .heading-anchor,h6:hover .heading-anchor{opacity:1}.fn-ref{color:var(--footnote-color);font-size:var(--footnote-size);margin-left:.15em;-webkit-text-decoration:none;text-decoration:none;vertical-align:super}.fn-ref:hover{color:var(--link-text-hover)}.fn-back{color:var(--footnote-color);-webkit-text-decoration:none;text-decoration:none}.fn-back,.footnotes{font-size:var(--footnote-size)}.footnotes{border-top:1px solid var(--color-border-subtle);margin-top:var(--space-8);padding-top:var(--space-6)}.footnotes ol{padding-left:var(--space-6)}.footnotes li{margin-bottom:var(--space-3)}.inline-marker{background:var(--marker-bg);border:1px solid var(--marker-border);border-radius:var(--radius-sm);color:var(--color-text);display:inline-block;font-size:var(--text-xs);line-height:1.3;padding:0 var(--space-1_5)}.inline-marker--info{background:var(--semantic-info-bg);border-color:var(--semantic-info-border);color:var(--semantic-info-text)}.inline-marker--success{background:var(--semantic-success-bg);border-color:var(--semantic-success-border);color:var(--semantic-success-text)}.inline-marker--warning{background:var(--semantic-warning-bg);border-color:var(--semantic-warning-border);color:var(--semantic-warning-text)}.inline-marker--danger{background:var(--semantic-danger-bg);border-color:var(--semantic-danger-border);color:var(--semantic-danger-text)}.prose-lead{color:var(--color-text);font-size:var(--text-md);line-height:var(--line-height-relaxed)}.prose-muted{color:var(--color-text-muted)}.prose-tight>*+*{margin-top:var(--space-2)}.prose-relaxed>*+*{margin-top:var(--space-6)}.prose-grid-2{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:repeat(2,1fr)}@media (max-width:1024px){.prose-grid-2{grid-template-columns:1fr}}.doc-block__body .admonition,.doc-block__body .md-danger,.doc-block__body .md-important,.doc-block__body .md-info,.doc-block__body .md-note,.doc-block__body .md-success,.doc-block__body .md-tip,.doc-block__body .md-warning{margin-bottom:var(--space-3);margin-top:var(--space-3)}
+.authoring,.doc-authoring,.vds-authoring,[data-vds-authoring]{--highlight-border-width:var(--border-width-strong);--admonition-radius:var(--radius-md);--admonition-border:var(--highlight-border-width);--admonition-gap:var(--space-3);--admonition-pad-y:var(--space-3);--admonition-pad-x:var(--space-4);--admonition-bg:var(--color-surface-subtle);--admonition-border-color:var(--color-border-subtle);--admonition-text:var(--color-text);--admonition-title-color:var(--color-text);--admonition-icon-color:var(--color-text);--admonition-shadow:none;--footnote-size:var(--text-xs);--marker-bg:var(--color-muted-bg);--marker-border:var(--color-muted-border);--marker-text:var(--color-text);--marker-radius:var(--radius-sm)}.admonition{align-items:flex-start;background-color:var(--admonition-bg);border:0;border-left:var(--admonition-border) solid var(--admonition-border-color);border-radius:var(--admonition-radius);box-shadow:var(--admonition-shadow);color:var(--admonition-text);display:flex;gap:var(--admonition-gap);margin-bottom:var(--space-4);margin-top:var(--space-4);padding:var(--admonition-pad-y) var(--admonition-pad-x)}.admonition__icon{color:var(--admonition-icon-color);flex-shrink:0;font-size:var(--text-lg);margin-top:.15em;opacity:.85}.admonition__content{flex:1 1 auto;min-width:0}.admonition__title{color:var(--admonition-title-color);font-size:var(--text-sm);font-weight:600;letter-spacing:.06em;margin-bottom:var(--space-1);text-transform:uppercase}.admonition__body{font-size:var(--text-sm);line-height:var(--line-height-relaxed)}.admonition__meta{font-size:var(--text-xs);margin-top:var(--space-1);opacity:.8}.admonition__footer{display:flex;font-size:var(--text-xs);margin-top:var(--space-2);opacity:.85}.admonition__actions,.admonition__footer{align-items:center;flex-wrap:wrap;gap:var(--space-2)}.admonition__actions{display:inline-flex}.admonition__list{grid-gap:var(--space-1);display:grid;gap:var(--space-1);list-style:none;margin:0;padding:0}.admonition__list li{padding-left:var(--space-4);position:relative}.admonition__list li:before{background-color:var(--admonition-border-color);border-radius:999px;content:"";height:.4rem;left:0;position:absolute;top:.35rem;width:.4rem}.admonition--compact{gap:var(--space-2);padding:var(--space-2) var(--space-3)}.admonition--info,.admonition--note,:where(.admonition)[data-variant=info]{--admonition-bg:var(--semantic-info-bg);--admonition-border-color:var(--semantic-info-border);--admonition-text:var(--semantic-info-text);--admonition-title-color:var(--semantic-info-text);--admonition-icon-color:var(--semantic-info-text)}.admonition--success,.admonition--tip,:where(.admonition)[data-variant=success]{--admonition-bg:var(--semantic-success-bg);--admonition-border-color:var(--semantic-success-border);--admonition-text:var(--semantic-success-text);--admonition-title-color:var(--semantic-success-text);--admonition-icon-color:var(--semantic-success-text)}.admonition--warning,:where(.admonition)[data-variant=warning]{--admonition-bg:var(--semantic-warning-bg);--admonition-border-color:var(--semantic-warning-border);--admonition-text:var(--semantic-warning-text);--admonition-title-color:var(--semantic-warning-text);--admonition-icon-color:var(--semantic-warning-text)}.admonition--danger,.admonition--important,:where(.admonition)[data-variant=danger]{--admonition-bg:var(--semantic-danger-bg);--admonition-border-color:var(--semantic-danger-border);--admonition-text:var(--semantic-danger-text);--admonition-title-color:var(--semantic-danger-text);--admonition-icon-color:var(--semantic-danger-text)}.admonition--accent,:where(.admonition)[data-variant=accent]{--admonition-bg:var(--accent-soft-surface,var(--color-accent-soft));--admonition-border-color:var(--accent-soft-border,var(--color-accent));--admonition-text:var(--accent-soft-on,var(--color-on-accent));--admonition-title-color:var(--accent-soft-on,var(--color-on-accent));--admonition-icon-color:var(--accent-soft-on,var(--color-on-accent))}.admonition--neutral,:where(.admonition)[data-variant=neutral]{--admonition-bg:var(--color-surface-subtle);--admonition-border-color:var(--color-border-strong);--admonition-text:var(--color-text);--admonition-title-color:var(--color-text);--admonition-icon-color:var(--color-text-muted)}.admonition--bordered,.admonition--outline{border:var(--admonition-border) solid var(--admonition-border-color);border-left-width:var(--admonition-border)}.admonition--outline,.admonition--plain{background-color:transparent}.admonition--plain{border:0;padding:0}.md-callout,.md-danger,.md-important,.md-info,.md-note,.md-success,.md-tip,.md-warning{background-color:var(--callout-bg,var(--color-surface-subtle));border-left:var(--highlight-border-width) solid var(--callout-border-color,currentColor);border-radius:var(--radius-md);color:var(--callout-text,var(--color-text));font-size:var(--text-sm);line-height:var(--line-height-relaxed);margin-bottom:var(--space-4);margin-top:var(--space-4);padding:var(--space-3) var(--space-4)}.md-callout[data-variant=info]{--callout-bg:var(--semantic-info-bg);--callout-border-color:var(--semantic-info-border);--callout-text:var(--semantic-info-text)}.md-callout[data-variant=success]{--callout-bg:var(--semantic-success-bg);--callout-border-color:var(--semantic-success-border);--callout-text:var(--semantic-success-text)}.md-callout[data-variant=warning]{--callout-bg:var(--semantic-warning-bg);--callout-border-color:var(--semantic-warning-border);--callout-text:var(--semantic-warning-text)}.md-callout[data-variant=danger]{--callout-bg:var(--semantic-danger-bg);--callout-border-color:var(--semantic-danger-border);--callout-text:var(--semantic-danger-text)}.md-callout[data-variant=accent]{--callout-bg:var(--accent-soft-surface,var(--color-accent-soft));--callout-border-color:var(--accent-soft-border,var(--color-accent));--callout-text:var(--accent-soft-on,var(--color-on-accent))}.md-callout[data-variant=neutral]{--callout-bg:var(--color-surface-subtle);--callout-border-color:var(--color-border-strong);--callout-text:var(--color-text)}.md-info,.md-note{--callout-bg:var(--semantic-info-bg);--callout-border-color:var(--semantic-info-border);--callout-text:var(--semantic-info-text)}.md-success,.md-tip{--callout-bg:var(--semantic-success-bg);--callout-border-color:var(--semantic-success-border);--callout-text:var(--semantic-success-text)}.md-warning{--callout-bg:var(--semantic-warning-bg);--callout-border-color:var(--semantic-warning-border);--callout-text:var(--semantic-warning-text)}.md-danger,.md-important{--callout-bg:var(--semantic-danger-bg);--callout-border-color:var(--semantic-danger-border);--callout-text:var(--semantic-danger-text)}.heading-anchor{color:var(--color-text-soft);font-size:.8em;margin-left:var(--space-1);opacity:0;-webkit-text-decoration:none;text-decoration:none;transition:opacity var(--transition-fast)}.heading-anchor:hover{color:var(--link-text-hover)}h1:focus-within .heading-anchor,h1:hover .heading-anchor,h2:focus-within .heading-anchor,h2:hover .heading-anchor,h3:focus-within .heading-anchor,h3:hover .heading-anchor,h4:focus-within .heading-anchor,h4:hover .heading-anchor,h5:focus-within .heading-anchor,h5:hover .heading-anchor,h6:focus-within .heading-anchor,h6:hover .heading-anchor{opacity:1}.heading-anchor--always{opacity:1}@media (hover:none){.heading-anchor{opacity:1}}.fn-ref{color:var(--footnote-color,var(--color-text-muted));font-size:var(--footnote-size);margin-left:.15em;-webkit-text-decoration:none;text-decoration:none;vertical-align:super}.fn-ref:hover{color:var(--link-text-hover)}.fn-back{color:var(--footnote-color,var(--color-text-muted));-webkit-text-decoration:none;text-decoration:none}.fn-back,.footnotes{font-size:var(--footnote-size)}.footnotes{border-top:1px solid var(--color-border-subtle);margin-top:var(--space-8);padding-top:var(--space-6)}.footnotes ol{padding-left:var(--space-6)}.footnotes li{margin-bottom:var(--space-3)}.inline-marker{background:var(--marker-bg);border:1px solid var(--marker-border);border-radius:var(--marker-radius);color:var(--marker-text);display:inline-block;font-size:var(--text-xs);line-height:1.3;padding:0 var(--space-1_5)}.inline-marker--info,:where(.inline-marker)[data-variant=info]{--marker-bg:var(--semantic-info-bg);--marker-border:var(--semantic-info-border);--marker-text:var(--semantic-info-text)}.inline-marker--success,:where(.inline-marker)[data-variant=success]{--marker-bg:var(--semantic-success-bg);--marker-border:var(--semantic-success-border);--marker-text:var(--semantic-success-text)}.inline-marker--warning,:where(.inline-marker)[data-variant=warning]{--marker-bg:var(--semantic-warning-bg);--marker-border:var(--semantic-warning-border);--marker-text:var(--semantic-warning-text)}.inline-marker--danger,:where(.inline-marker)[data-variant=danger]{--marker-bg:var(--semantic-danger-bg);--marker-border:var(--semantic-danger-border);--marker-text:var(--semantic-danger-text)}.inline-marker--accent,:where(.inline-marker)[data-variant=accent]{--marker-bg:var(--accent-soft-surface,var(--color-accent-soft));--marker-border:var(--accent-soft-border,var(--color-accent));--marker-text:var(--accent-soft-on,var(--color-on-accent))}.inline-marker--neutral,:where(.inline-marker)[data-variant=neutral]{--marker-bg:var(--color-surface-subtle);--marker-border:var(--color-border-strong);--marker-text:var(--color-text)}.inline-marker--outline{background:transparent}.inline-marker--pill{--marker-radius:var(--radius-pill)}.prose-lead{color:var(--color-text);font-size:var(--text-md);line-height:var(--line-height-relaxed)}.prose-muted{color:var(--color-text-muted)}.prose-tight>*+*{margin-top:var(--space-2)}.prose-relaxed>*+*{margin-top:var(--space-6)}.prose-grid-2{grid-gap:var(--space-6);grid-template-columns:repeat(2,1fr)}.prose-grid-2,.prose-grid-3{display:grid;gap:var(--space-6)}.prose-grid-3{grid-gap:var(--space-6);grid-template-columns:repeat(3,1fr)}.prose-grid-1-2{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:minmax(0,1fr) minmax(0,2fr)}.prose-grid-2-1{grid-gap:var(--space-6);display:grid;gap:var(--space-6);grid-template-columns:minmax(0,2fr) minmax(0,1fr)}@media (max-width:1024px){.prose-grid-1-2,.prose-grid-2,.prose-grid-2-1,.prose-grid-3{grid-template-columns:1fr}}.doc-block__body .admonition,.doc-block__body .md-callout,.doc-block__body .md-danger,.doc-block__body .md-important,.doc-block__body .md-info,.doc-block__body .md-note,.doc-block__body .md-success,.doc-block__body .md-tip,.doc-block__body .md-warning{margin-bottom:var(--space-3);margin-top:var(--space-3)}