@24vlh/vds 0.1.0

package/dist/components/command.css

@@ -0,0 +1,521 @@
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Command Palette / Spotlight
+ *
+ *  Responsibilities:
+ *    - Implement the global spotlight surface: overlay, backdrop,
+ *      animated panel, header, search input, hints, and keyboard guides
+ *    - Define the command list architecture: sections, labels, items,
+ *      metadata, icons, disabled/active/selected states
+ *    - Provide empty states and footer guidance for fuzzy-search systems
+ *    - Support compact density mode and optional leading/trailing icons
+ *    - Maintain predictable accessibility: focus-visible, aria-selected,
+ *      aria-disabled, and reduced motion
+ *
+ *  System Notes:
+ *    - 100% CSS-driven; no JS dependencies or logic assumptions
+ *    - Markup aligns with canonical VDS command-block structure
+ *    - Themes supply all colors, borders, radii, shadows, and motion tokens
+ *    - Supports both centered and top-aligned invocation modes
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. ROOT OVERLAY CONTAINER
+   - Covers viewport
+   - Backdrop + centering
+   - Open/closed states via class or data attribute
+--------------------------------------------------------- */
+
+[data-vds-commands],
+.vds-commands {
+    --command-backdrop-bg: color-mix(in srgb, var(--color-bg) 60%, #000 55%);
+    --command-panel-bg: var(--color-surface);
+    --command-panel-border: var(--color-border-subtle);
+    --command-panel-radius: var(--radius-xl);
+    --command-panel-shadow: var(--shadow-xl);
+    --command-panel-max-width: 42rem;
+    --command-panel-max-height: min(26rem, 70vh);
+    --command-header-bg: var(--color-surface-subtle);
+    --command-input-bg: transparent;
+    --command-input-border: transparent;
+    --command-input-placeholder: var(--color-placeholder);
+    --command-item-radius: var(--radius-md);
+    --command-item-gap: var(--space-3);
+    --command-item-pad-y: var(--space-2);
+    --command-item-pad-x: var(--space-3);
+    --command-item-bg-hover: var(--color-surface-subtle);
+    --command-item-bg-active: var(--color-accent-soft);
+    --command-item-border-active: var(--color-accent);
+    --command-divider: var(--color-border-subtle);
+    --command-label-muted: var(--color-text-muted);
+    --command-scrollbar-thumb: var(--color-border-subtle);
+    --command-scrollbar-track: transparent;
+}
+
+.command {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 90;
+    z-index: var(--z-modal, 90);
+
+    display: flex;
+    justify-content: center;
+    align-items: flex-start;
+
+    padding: var(--space-10) var(--space-4) var(--space-6);
+    pointer-events: none;
+    opacity: 0;
+    visibility: hidden;
+
+    transition: opacity 180ms ease-out, visibility 180ms ease-out;
+
+    transition: opacity var(--transition-normal, 180ms ease-out), visibility var(--transition-normal, 180ms ease-out);
+}
+
+.command::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: var(--command-backdrop-bg);
+    opacity: 0;
+    transition: opacity 180ms ease-out;
+    transition: opacity var(--transition-normal, 180ms ease-out);
+}
+
+.command--open,
+.command[data-command-open="true"],
+.command[aria-hidden="false"] {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+}
+
+.command--open::before,
+.command[data-command-open="true"]::before,
+.command[aria-hidden="false"]::before {
+    opacity: 1;
+}
+
+.command--center {
+    align-items: center;
+}
+
+@media (max-width: 640px) {
+    .command {
+        align-items: stretch;
+        padding: var(--space-6) var(--space-2);
+    }
+}
+
+/* ---------------------------------------------------------
+   2. PANEL SHELL
+   - Actual dialog surface
+--------------------------------------------------------- */
+
+.command__panel {
+    position: relative;
+    width: 100%;
+    max-width: var(--command-panel-max-width);
+    max-height: var(--command-panel-max-height);
+
+    display: flex;
+    flex-direction: column;
+    background: var(--command-panel-bg);
+    border-radius: var(--command-panel-radius);
+    border: 1px solid var(--command-panel-border);
+    border: var(--border-width, 1px) solid var(--command-panel-border);
+    box-shadow: var(--command-panel-shadow);
+
+    overflow: hidden;
+    color: var(--color-text);
+
+    transform: translateY(8px) scale(0.98);
+    opacity: 0;
+    transition: opacity 180ms ease-out, transform 180ms ease-out;
+    transition: opacity var(--transition-normal, 180ms ease-out), transform var(--transition-normal, 180ms ease-out);
+}
+
+.command--open .command__panel,
+.command[data-command-open="true"] .command__panel,
+.command[aria-hidden="false"] .command__panel {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+}
+
+@media (max-width: 640px) {
+    .command__panel {
+        max-width: 100%;
+        max-height: calc(100vh - var(--space-12));
+        border-radius: var(--radius-lg);
+    }
+}
+
+/* ---------------------------------------------------------
+   3. HEADER & SEARCH ROW
+--------------------------------------------------------- */
+
+.command__header {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr) auto;
+    align-items: center;
+    grid-gap: var(--space-3);
+    gap: var(--space-3);
+
+    padding: var(--space-3) var(--space-4);
+    background: var(--command-header-bg);
+    border-bottom: 1px solid var(--command-panel-border);
+    border-bottom: var(--border-width, 1px) solid var(--command-panel-border);
+}
+
+.command__leading-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    width: var(--icon-md, 1.25rem);
+    height: 1.25rem;
+    height: var(--icon-md, 1.25rem);
+    color: var(--command-label-muted);
+}
+
+.command__leading-icon svg,
+.command__leading-icon .icon {
+    width: 100%;
+    height: 100%;
+}
+
+.command__input {
+    width: 100%;
+    border: 0;
+    padding: 0;
+    background: var(--command-input-bg);
+    color: var(--color-text);
+    font: inherit;
+    line-height: inherit;
+
+    min-width: 0;
+}
+
+.command__input::-moz-placeholder {
+    color: var(--command-input-placeholder);
+}
+
+.command__input::placeholder {
+    color: var(--command-input-placeholder);
+}
+
+.command__input:focus {
+    outline: none;
+}
+
+.command__hint {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--command-label-muted);
+    font-size: var(--text-xs);
+    white-space: nowrap;
+}
+
+.command__hint-text {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+.command__shortcut {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+.command__kbd-key {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 1.6em;
+    padding: 0.05em 0.45em;
+
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--command-panel-border);
+    border: var(--border-width, 1px) solid var(--command-panel-border);
+    background: var(--color-surface-subtle);
+    box-shadow: var(--shadow-xs);
+    font-family: var(--font-family-mono), monospace;
+    font-size: 0.8em;
+    line-height: 1.4;
+}
+
+@media (max-width: 640px) {
+    .command__header {
+        padding-left: var(--space-3);
+        padding-right: var(--space-3);
+        gap: var(--space-2);
+    }
+
+    .command__hint-text {
+        display: none;
+    }
+}
+
+/* ---------------------------------------------------------
+   4. BODY, SECTIONS & LIST
+--------------------------------------------------------- */
+
+.command__body {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-2) var(--space-2) var(--space-3);
+    overflow: hidden;
+}
+
+.command__scroll {
+    max-height: 100%;
+    overflow-y: auto;
+    padding-left: var(--space-2);
+    padding-right: var(--space-2);
+}
+
+.command__body {
+    overflow-y: auto;
+}
+
+.command__section {
+    padding: var(--space-2) var(--space-2) var(--space-1);
+}
+
+.command__section + .command__section {
+    border-top: 1px solid var(--command-divider);
+    border-top: var(--border-width, 1px) solid var(--command-divider);
+    margin-top: var(--space-1);
+    padding-top: var(--space-3);
+}
+
+.command__section-label {
+    font-size: var(--text-xs);
+    font-weight: 500;
+    font-weight: var(--font-weight-medium, 500);
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--command-label-muted);
+    margin-bottom: var(--space-1);
+}
+
+.command__list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.command__item {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--command-item-gap);
+
+    padding: var(--command-item-pad-y) var(--command-item-pad-x);
+    border-radius: var(--command-item-radius);
+    cursor: pointer;
+
+    color: var(--color-text);
+    background: transparent;
+
+    transition: background-color 120ms ease-out, border-color 120ms ease-out, box-shadow 120ms ease-out, transform 120ms ease-out;
+
+    transition: background-color var(--transition-fast, 120ms ease-out), border-color var(--transition-fast, 120ms ease-out), box-shadow var(--transition-fast, 120ms ease-out), transform var(--transition-fast, 120ms ease-out);
+}
+
+.command__item-main {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+    min-width: 0;
+}
+
+.command__item-label {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    font-weight: var(--font-weight-medium, 500);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.command__item-description {
+    font-size: var(--text-xs);
+    color: var(--command-label-muted);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.command__item-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: var(--space-2);
+    width: 1rem;
+    width: var(--icon-sm, 1rem);
+    height: 1rem;
+    height: var(--icon-sm, 1rem);
+    color: var(--command-label-muted);
+}
+
+.command__item-icon svg,
+.command__item-icon .icon {
+    width: 100%;
+    height: 100%;
+}
+
+.command__item-meta {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+    margin-left: auto;
+    white-space: nowrap;
+    font-size: var(--text-xs);
+    color: var(--command-label-muted);
+}
+
+.command__item:hover {
+    background-color: var(--command-item-bg-hover);
+}
+
+.command__item:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 2px var(--focus-ring-color, var(--color-accent));
+    box-shadow: 0 0 0 var(--border-width-strong, 2px) var(--focus-ring-color, var(--color-accent));
+}
+
+.command__item--active,
+.command__item[aria-selected="true"] {
+    background-color: var(--command-item-bg-active);
+    border: 1px solid var(--command-item-border-active);
+    border: var(--border-width, 1px) solid var(--command-item-border-active);
+    box-shadow: 0 0 0 1px color-mix(in srgb, var(--command-item-border-active) 40%, transparent);
+}
+
+@supports (color: color-mix(in lch, red, blue)) and (top: var(--f)) {
+.command__item--active,
+.command__item[aria-selected="true"] {
+    box-shadow: 0 0 0 var(--border-width, 1px) color-mix(in srgb, var(--command-item-border-active) 40%, transparent);
+}
+}
+
+.command__item--active .command__item-label,
+.command__item[aria-selected="true"] .command__item-label {
+    color: var(--color-on-accent);
+}
+
+.command__item--active .command__item-meta,
+.command__item[aria-selected="true"] .command__item-meta {
+    color: color-mix(in srgb, var(--color-on-accent) 65%, transparent);
+}
+
+.command__item[aria-disabled="true"],
+.command__item--disabled {
+    opacity: 0.55;
+    cursor: not-allowed;
+}
+
+.command--compact .command__item {
+    padding-top: var(--space-1_5);
+    padding-bottom: var(--space-1_5);
+    padding-left: var(--space-2_5);
+    padding-right: var(--space-2_5);
+    font-size: var(--text-xs);
+}
+
+/* ---------------------------------------------------------
+   5. EMPTY STATE
+--------------------------------------------------------- */
+
+.command__empty {
+    padding: var(--space-6) var(--space-4) var(--space-5);
+    text-align: center;
+    color: var(--command-label-muted);
+    font-size: var(--text-sm);
+}
+
+.command__empty p {
+    margin: 0;
+}
+
+/* ---------------------------------------------------------
+   6. FOOTER (HELPER TEXT / STATUS)
+--------------------------------------------------------- */
+
+.command__footer {
+    padding: var(--space-2_5) var(--space-4);
+    border-top: 1px solid var(--command-panel-border);
+    border-top: var(--border-width, 1px) solid var(--command-panel-border);
+    font-size: var(--text-xs);
+    color: var(--command-label-muted);
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-2);
+    background: var(--color-surface-subtle);
+}
+
+.command__footer span {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-1);
+}
+
+@media (max-width: 640px) {
+    .command__footer {
+        padding-left: var(--space-3);
+        padding-right: var(--space-3);
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+/* ---------------------------------------------------------
+   7. SCROLLBARS & OVERRIDES
+--------------------------------------------------------- */
+
+.command__body,
+.command__scroll {
+    scrollbar-width: thin;
+    scrollbar-color: var(--command-scrollbar-thumb) var(--command-scrollbar-track);
+}
+
+.command__body::-webkit-scrollbar,
+.command__scroll::-webkit-scrollbar {
+    width: 6px;
+}
+
+.command__body::-webkit-scrollbar-track,
+.command__scroll::-webkit-scrollbar-track {
+    background: var(--command-scrollbar-track);
+}
+
+.command__body::-webkit-scrollbar-thumb,
+.command__scroll::-webkit-scrollbar-thumb {
+    background: var(--command-scrollbar-thumb);
+    border-radius: 999px;
+}
+
+/* ---------------------------------------------------------
+   8. REDUCED MOTION SAFETY (optional extra)
+--------------------------------------------------------- */
+
+@media (prefers-reduced-motion: reduce) {
+    .command,
+    .command::before,
+    .command__panel,
+    .command__item {
+        transition: none !important;
+    }
+}

package/dist/components/command.min.css

@@ -0,0 +1 @@
+.vds-commands,[data-vds-commands]{--command-backdrop-bg:color-mix(in srgb,var(--color-bg) 60%,#000 55%);--command-panel-bg:var(--color-surface);--command-panel-border:var(--color-border-subtle);--command-panel-radius:var(--radius-xl);--command-panel-shadow:var(--shadow-xl);--command-panel-max-width:42rem;--command-panel-max-height:min(26rem,70vh);--command-header-bg:var(--color-surface-subtle);--command-input-bg:transparent;--command-input-border:transparent;--command-input-placeholder:var(--color-placeholder);--command-item-radius:var(--radius-md);--command-item-gap:var(--space-3);--command-item-pad-y:var(--space-2);--command-item-pad-x:var(--space-3);--command-item-bg-hover:var(--color-surface-subtle);--command-item-bg-active:var(--color-accent-soft);--command-item-border-active:var(--color-accent);--command-divider:var(--color-border-subtle);--command-label-muted:var(--color-text-muted);--command-scrollbar-thumb:var(--color-border-subtle);--command-scrollbar-track:transparent}.command{align-items:flex-start;display:flex;justify-content:center;padding:var(--space-10) var(--space-4) var(--space-6);pointer-events:none;transition:opacity .18s ease-out,visibility .18s ease-out;transition:opacity var(--transition-normal,.18s ease-out),visibility var(--transition-normal,.18s ease-out);visibility:hidden;z-index:90;z-index:var(--z-modal,90)}.command,.command:before{bottom:0;left:0;opacity:0;position:fixed;right:0;top:0}.command:before{background:var(--command-backdrop-bg);content:"";transition:opacity .18s ease-out;transition:opacity var(--transition-normal,.18s ease-out)}.command--open,.command[aria-hidden=false],.command[data-command-open=true]{opacity:1;pointer-events:auto;visibility:visible}.command--open:before,.command[aria-hidden=false]:before,.command[data-command-open=true]:before{opacity:1}.command--center{align-items:center}@media (max-width:640px){.command{align-items:stretch;padding:var(--space-6) var(--space-2)}}.command__panel{background:var(--command-panel-bg);border:var(--border-width,1px) solid var(--command-panel-border);border-radius:var(--command-panel-radius);box-shadow:var(--command-panel-shadow);color:var(--color-text);display:flex;flex-direction:column;max-height:var(--command-panel-max-height);max-width:var(--command-panel-max-width);opacity:0;overflow:hidden;position:relative;transform:translateY(8px) scale(.98);transition:opacity .18s ease-out,transform .18s ease-out;transition:opacity var(--transition-normal,.18s ease-out),transform var(--transition-normal,.18s ease-out);width:100%}.command--open .command__panel,.command[aria-hidden=false] .command__panel,.command[data-command-open=true] .command__panel{opacity:1;transform:translateY(0) scale(1)}@media (max-width:640px){.command__panel{border-radius:var(--radius-lg);max-height:calc(100vh - var(--space-12));max-width:100%}}.command__header{grid-gap:var(--space-3);align-items:center;background:var(--command-header-bg);border-bottom:var(--border-width,1px) solid var(--command-panel-border);display:grid;gap:var(--space-3);grid-template-columns:auto minmax(0,1fr) auto;padding:var(--space-3) var(--space-4)}.command__leading-icon{align-items:center;color:var(--command-label-muted);display:inline-flex;height:1.25rem;height:var(--icon-md,1.25rem);justify-content:center;width:1.25rem;width:var(--icon-md,1.25rem)}.command__leading-icon .icon,.command__leading-icon svg{height:100%;width:100%}.command__input{background:var(--command-input-bg);border:0;color:var(--color-text);font:inherit;line-height:inherit;min-width:0;padding:0;width:100%}.command__input::-moz-placeholder{color:var(--command-input-placeholder)}.command__input::placeholder{color:var(--command-input-placeholder)}.command__input:focus{outline:none}.command__hint{align-items:center;color:var(--command-label-muted);display:inline-flex;font-size:var(--text-xs);gap:var(--space-2);white-space:nowrap}.command__hint-text,.command__shortcut{align-items:center;display:inline-flex;gap:var(--space-1)}.command__kbd-key{align-items:center;background:var(--color-surface-subtle);border:var(--border-width,1px) solid var(--command-panel-border);border-radius:var(--radius-sm);box-shadow:var(--shadow-xs);display:inline-flex;font-family:var(--font-family-mono),monospace;font-size:.8em;justify-content:center;line-height:1.4;min-width:1.6em;padding:.05em .45em}@media (max-width:640px){.command__header{gap:var(--space-2);padding-left:var(--space-3);padding-right:var(--space-3)}.command__hint-text{display:none}}.command__body{display:flex;flex-direction:column;overflow:hidden;padding:var(--space-2) var(--space-2) var(--space-3);position:relative}.command__scroll{max-height:100%;overflow-y:auto;padding-left:var(--space-2);padding-right:var(--space-2)}.command__body{overflow-y:auto}.command__section{padding:var(--space-2) var(--space-2) var(--space-1)}.command__section+.command__section{border-top:var(--border-width,1px) solid var(--command-divider);margin-top:var(--space-1);padding-top:var(--space-3)}.command__section-label{color:var(--command-label-muted);font-size:var(--text-xs);font-weight:500;font-weight:var(--font-weight-medium,500);letter-spacing:.08em;margin-bottom:var(--space-1);text-transform:uppercase}.command__list{list-style:none;margin:0;padding:0}.command__item{align-items:center;background:transparent;border-radius:var(--command-item-radius);color:var(--color-text);cursor:pointer;display:flex;gap:var(--command-item-gap);justify-content:space-between;padding:var(--command-item-pad-y) var(--command-item-pad-x);position:relative;transition:background-color .12s ease-out,border-color .12s ease-out,box-shadow .12s ease-out,transform .12s ease-out;transition:background-color var(--transition-fast,.12s ease-out),border-color var(--transition-fast,.12s ease-out),box-shadow var(--transition-fast,.12s ease-out),transform var(--transition-fast,.12s ease-out)}.command__item-main{display:flex;flex-direction:column;gap:0;min-width:0}.command__item-label{font-size:var(--text-sm);font-weight:500;font-weight:var(--font-weight-medium,500)}.command__item-description,.command__item-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.command__item-description{color:var(--command-label-muted);font-size:var(--text-xs)}.command__item-icon{align-items:center;color:var(--command-label-muted);display:inline-flex;height:1rem;height:var(--icon-sm,1rem);justify-content:center;margin-right:var(--space-2);width:1rem;width:var(--icon-sm,1rem)}.command__item-icon .icon,.command__item-icon svg{height:100%;width:100%}.command__item-meta{align-items:center;color:var(--command-label-muted);display:inline-flex;font-size:var(--text-xs);gap:var(--space-1);margin-left:auto;white-space:nowrap}.command__item:hover{background-color:var(--command-item-bg-hover)}.command__item:focus-visible{box-shadow:0 0 0 2px var(--focus-ring-color,var(--color-accent));box-shadow:0 0 0 var(--border-width-strong,2px) var(--focus-ring-color,var(--color-accent));outline:none}.command__item--active,.command__item[aria-selected=true]{background-color:var(--command-item-bg-active);border:var(--border-width,1px) solid var(--command-item-border-active);box-shadow:0 0 0 1px color-mix(in srgb,var(--command-item-border-active) 40%,transparent)}@supports (color:color-mix(in lch,red,blue)) and (top:var(--f )){.command__item--active,.command__item[aria-selected=true]{box-shadow:0 0 0 var(--border-width,1px) color-mix(in srgb,var(--command-item-border-active) 40%,transparent)}}.command__item--active .command__item-label,.command__item[aria-selected=true] .command__item-label{color:var(--color-on-accent)}.command__item--active .command__item-meta,.command__item[aria-selected=true] .command__item-meta{color:color-mix(in srgb,var(--color-on-accent) 65%,transparent)}.command__item--disabled,.command__item[aria-disabled=true]{cursor:not-allowed;opacity:.55}.command--compact .command__item{font-size:var(--text-xs);padding:var(--space-1_5) var(--space-2_5)}.command__empty{color:var(--command-label-muted);font-size:var(--text-sm);padding:var(--space-6) var(--space-4) var(--space-5);text-align:center}.command__empty p{margin:0}.command__footer{align-items:center;background:var(--color-surface-subtle);border-top:var(--border-width,1px) solid var(--command-panel-border);color:var(--command-label-muted);display:flex;font-size:var(--text-xs);gap:var(--space-2);justify-content:space-between;padding:var(--space-2_5) var(--space-4)}.command__footer span{align-items:center;display:inline-flex;gap:var(--space-1)}@media (max-width:640px){.command__footer{align-items:flex-start;flex-direction:column;padding-left:var(--space-3);padding-right:var(--space-3)}}.command__body,.command__scroll{scrollbar-color:var(--command-scrollbar-thumb) var(--command-scrollbar-track);scrollbar-width:thin}.command__body::-webkit-scrollbar,.command__scroll::-webkit-scrollbar{width:6px}.command__body::-webkit-scrollbar-track,.command__scroll::-webkit-scrollbar-track{background:var(--command-scrollbar-track)}.command__body::-webkit-scrollbar-thumb,.command__scroll::-webkit-scrollbar-thumb{background:var(--command-scrollbar-thumb);border-radius:999px}@media (prefers-reduced-motion:reduce){.command,.command:before,.command__item,.command__panel{transition:none!important}}