@24vlh/vds 0.1.0 → 0.1.1

package/dist/components/command.css

@@ -1,521 +1 @@
-/************************************************************
- * 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;
-    }
-}
+.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}}