@nukleas/cyberdesign 0.1.0

package/src/css/components/command.css

@@ -0,0 +1,162 @@
+/* ── Command palette / Combobox list ───────────────────────────────────────── */
+
+.cd-command {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  max-width: 520px;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 30%, transparent);
+  font-family: var(--cd-font-mono);
+  box-shadow:
+    0 12px 40px rgba(0, 0, 0, 0.55),
+    0 0 20px color-mix(in srgb, var(--cd-accent) 15%, transparent);
+  overflow: hidden;
+}
+
+.cd-command__input-wrap {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid color-mix(in srgb, var(--cd-accent) 18%, transparent);
+}
+
+.cd-command__input-wrap::before {
+  content: '›';
+  color: var(--cd-accent);
+  font-weight: 700;
+}
+
+.cd-command__input {
+  flex: 1;
+  min-width: 0;
+  background: transparent;
+  border: none;
+  outline: none;
+  color: var(--cd-text);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+}
+
+.cd-command__input::placeholder {
+  color: var(--cd-text-dim);
+  font-style: italic;
+}
+
+.cd-command__list {
+  max-height: 280px;
+  overflow: auto;
+  padding: 6px;
+}
+
+.cd-command__group-label {
+  padding: 6px 8px 4px;
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--cd-text-dim);
+}
+
+.cd-command__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 8px 10px;
+  border: 1px solid transparent;
+  background: transparent;
+  color: var(--cd-text-secondary);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.cd-command__item:hover,
+.cd-command__item[data-selected='true'],
+.cd-command__item.is-selected {
+  background: var(--cd-accent-subtle);
+  border-color: color-mix(in srgb, var(--cd-accent) 25%, transparent);
+  color: var(--cd-accent);
+}
+
+.cd-command__item:disabled,
+.cd-command__item[aria-disabled='true'] {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+
+.cd-command__item-kbd {
+  margin-left: auto;
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-dim);
+}
+
+.cd-command__empty {
+  padding: 24px 12px;
+  text-align: center;
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.cd-command__sep {
+  height: 1px;
+  margin: 6px 4px;
+  background: var(--cd-border-dim);
+}
+
+/* Combobox host reuses popover + command list */
+.cd-combobox {
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+  gap: 0;
+  width: 100%;
+  max-width: 320px;
+}
+
+.cd-combobox__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 500;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 28%, transparent);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+  max-height: 220px;
+  overflow: auto;
+  opacity: 0;
+  pointer-events: none;
+  transform: translateY(-4px);
+  transition: opacity 0.12s ease, transform 0.12s ease;
+}
+
+.cd-combobox.is-open > .cd-combobox__menu {
+  opacity: 1;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+.cd-combobox__option {
+  display: block;
+  width: 100%;
+  padding: 8px 10px;
+  border: none;
+  background: transparent;
+  color: var(--cd-text-secondary);
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  text-align: left;
+  cursor: pointer;
+}
+
+.cd-combobox__option:hover,
+.cd-combobox__option[aria-selected='true'] {
+  background: var(--cd-accent-subtle);
+  color: var(--cd-accent);
+}

package/src/css/components/dropdown.css

@@ -0,0 +1,187 @@
+/* ── Dropdown Menu ────────────────────────────────────────────────────────── */
+
+.cd-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+/* ── Menu panel ───────────────────────────────────────────────────────────── */
+
+.cd-dropdown__menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  z-index: 500;
+  min-width: 180px;
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 25%, transparent);
+  padding: 4px 0;
+  font-family: var(--cd-font-mono);
+  box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 0 16px var(--cd-accent-glow);
+  -webkit-clip-path: polygon(
+    var(--cd-clip-sm) 0%,
+    100% 0%,
+    100% calc(100% - var(--cd-clip-sm)),
+    calc(100% - var(--cd-clip-sm)) 100%,
+    0% 100%,
+    0% var(--cd-clip-sm)
+  );
+  clip-path: polygon(
+    var(--cd-clip-sm) 0%,
+    100% 0%,
+    100% calc(100% - var(--cd-clip-sm)),
+    calc(100% - var(--cd-clip-sm)) 100%,
+    0% 100%,
+    0% var(--cd-clip-sm)
+  );
+  opacity: 0;
+  transform: translateY(-6px) scale(0.97);
+  pointer-events: none;
+  transform-origin: top left;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+}
+
+/* Right-aligned variant */
+.cd-dropdown__menu--right {
+  left: auto;
+  right: 0;
+  -webkit-clip-path: polygon(
+    var(--cd-clip-sm) 0%,
+    100% 0%,
+    100% calc(100% - var(--cd-clip-sm)),
+    calc(100% - var(--cd-clip-sm)) 100%,
+    0% 100%,
+    0% var(--cd-clip-sm)
+  );
+  clip-path: polygon(
+    var(--cd-clip-sm) 0%,
+    100% 0%,
+    100% calc(100% - var(--cd-clip-sm)),
+    calc(100% - var(--cd-clip-sm)) 100%,
+    0% 100%,
+    0% var(--cd-clip-sm)
+  );
+  transform-origin: top right;
+}
+
+/* Open state — toggled by JS or :focus-within */
+.cd-dropdown.is-open > .cd-dropdown__menu,
+.cd-dropdown:focus-within > .cd-dropdown__menu {
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
+}
+
+/* ── Trigger ──────────────────────────────────────────────────────────────── */
+
+.cd-dropdown__trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+/* Chevron indicator */
+.cd-dropdown__trigger::after {
+  content: '▾';
+  font-size: var(--cd-text-sm);
+  color: var(--cd-text-dim);
+  transition: transform 0.15s, color 0.15s;
+  line-height: 1;
+}
+
+.cd-dropdown.is-open .cd-dropdown__trigger::after {
+  transform: rotate(180deg);
+  color: var(--cd-accent);
+}
+
+/* ── Menu items ───────────────────────────────────────────────────────────── */
+
+.cd-dropdown__item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 9px 14px; /* larger tap target */
+  background: none;
+  border: none;
+  font: 700 var(--cd-text-xs)/1 var(--cd-font-mono);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--cd-text-secondary);
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background 0.1s, color 0.1s;
+  text-align: left;
+}
+
+.cd-dropdown__item:hover {
+  background: var(--cd-accent-subtle);
+  color: var(--cd-accent);
+}
+
+.cd-dropdown__item:focus-visible {
+  background: var(--cd-accent-subtle);
+  color: var(--cd-accent);
+  outline-offset: 0; /* tighter for menu items */
+}
+
+.cd-dropdown__item:active {
+  background: color-mix(in srgb, var(--cd-accent) 15%, transparent);
+}
+
+/* Danger item */
+.cd-dropdown__item--danger { color: var(--cd-text-muted); }
+.cd-dropdown__item--danger:hover {
+  background: color-mix(in srgb, var(--cd-red) 10%, transparent);
+  color: var(--cd-red);
+}
+
+/* Disabled item */
+.cd-dropdown__item:disabled,
+.cd-dropdown__item[aria-disabled="true"] {
+  opacity: 0.35;
+  pointer-events: none;
+}
+
+/* Item icon slot */
+.cd-dropdown__item-icon {
+  flex-shrink: 0;
+  font-size: 11px;
+  opacity: 0.6;
+  width: 14px;
+  text-align: center;
+}
+
+/* Item shortcut hint — right-aligned */
+.cd-dropdown__item-kbd {
+  margin-left: auto;
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-dim);
+  letter-spacing: 0.05em;
+}
+
+/* ── Separator ────────────────────────────────────────────────────────────── */
+
+.cd-dropdown__sep {
+  height: 1px;
+  background: var(--cd-border-dim);
+  margin: 4px 0;
+}
+
+/* ── Section label ────────────────────────────────────────────────────────── */
+
+.cd-dropdown__label {
+  padding: 6px 14px 3px;
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  color: var(--cd-text-dim);
+  cursor: default;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .cd-dropdown__menu { transition: none; }
+}

package/src/css/components/form.css

@@ -0,0 +1,280 @@
+/* ── Form label ─────────────────────────────────────────── */
+
+.cd-form-label {
+  display: block;
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-sm);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--cd-text-secondary);
+  user-select: none;
+}
+
+/* Required asterisk */
+.cd-form-label[data-required]::after,
+.cd-form-label--required::after {
+  content: ' *';
+  color: var(--cd-neon-red);
+}
+
+/* ── Form field wrapper ─────────────────────────────────── */
+/*
+  Usage:
+  <div class="cd-field">
+    <label class="cd-label">Field Name</label>
+    <input class="cd-input">
+    <p class="cd-field-desc">Helper text</p>
+    <p class="cd-field-error">Error message</p>
+  </div>
+*/
+
+.cd-field {
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+  width: 100%;
+}
+
+/* Inline layout: label left, control right */
+.cd-field--inline {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.cd-field--inline .cd-label {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.cd-field--inline > *:last-child:not(.cd-label) {
+  flex: 1;
+  min-width: 0;
+}
+
+.cd-field-desc {
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  color: var(--cd-text-muted);
+  line-height: 1.5;
+  letter-spacing: 0.04em;
+  margin: 0;
+}
+
+.cd-field-error {
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  color: var(--cd-neon-red);
+  letter-spacing: 0.04em;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.cd-field-error::before {
+  content: '⚠';
+  font-size: var(--cd-text-xs);
+}
+
+/* ── Form section ───────────────────────────────────────── */
+
+.cd-form-section {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+/* ── Separator ──────────────────────────────────────────── */
+
+.cd-separator {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+}
+
+.cd-separator::before,
+.cd-separator::after {
+  content: '';
+  flex: 1;
+  height: 1px;
+  background: var(--cd-border-dim);
+}
+
+/* With content (e.g. "OR") */
+.cd-separator--label {
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.15em;
+  color: var(--cd-text-dim);
+  white-space: nowrap;
+}
+
+/* No content — pure line */
+.cd-separator--plain::before { flex: 1; }
+.cd-separator--plain::after  { display: none; }
+
+/* Neon variant */
+.cd-separator--neon::before,
+.cd-separator--neon::after {
+  background: linear-gradient(
+    90deg,
+    transparent,
+    color-mix(in srgb, var(--cd-accent) 35%, transparent) 40%,
+    color-mix(in srgb, var(--cd-accent-secondary) 25%, transparent) 60%,
+    transparent
+  );
+}
+
+/* Vertical */
+.cd-separator--vertical {
+  flex-direction: column;
+  width: 1px;
+  height: 100%;
+  gap: 6px;
+}
+
+.cd-separator--vertical::before,
+.cd-separator--vertical::after {
+  flex: 1;
+  width: 1px;
+  height: auto;
+}
+
+/* ── Tooltip (CSS-only) ─────────────────────────────────── */
+/*
+  Usage: <span class="cd-tooltip" data-tip="Helpful hint">hover me</span>
+*/
+
+.cd-tooltip {
+  position: relative;
+  cursor: help;
+}
+
+.cd-tooltip::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: calc(100% + 8px);
+  left: 50%;
+  transform: translateX(-50%);
+  white-space: nowrap;
+  font-family: var(--cd-font-mono);
+  font-size: var(--cd-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--cd-text);
+  background: var(--cd-bg-panel);
+  border: 1px solid color-mix(in srgb, var(--cd-accent) 45%, transparent);
+  padding: 4px 8px;
+  box-shadow:
+    0 0 8px color-mix(in srgb, var(--cd-accent) 20%, transparent),
+    2px 2px 0 color-mix(in srgb, var(--cd-accent-secondary) 20%, transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 120ms ease;
+  z-index: 9998;
+}
+
+/* Arrow */
+.cd-tooltip::before {
+  content: '';
+  position: absolute;
+  bottom: calc(100% + 3px);
+  left: 50%;
+  transform: translateX(-50%);
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid color-mix(in srgb, var(--cd-accent) 45%, transparent);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 120ms ease;
+  z-index: 9999;
+}
+
+.cd-tooltip:hover::after,
+.cd-tooltip:hover::before {
+  opacity: 1;
+}
+
+/* Tooltip below */
+.cd-tooltip--below::after {
+  bottom: auto;
+  top: calc(100% + 8px);
+}
+
+.cd-tooltip--below::before {
+  bottom: auto;
+  top: calc(100% + 3px);
+  border-top: none;
+  border-bottom: 5px solid color-mix(in srgb, var(--cd-accent) 45%, transparent);
+}
+
+/* ── Progress bar ───────────────────────────────────────── */
+/*
+  Usage:
+  <div class="cd-progress">
+    <div class="cd-progress__bar" style="width: 65%"></div>
+  </div>
+*/
+
+.cd-progress {
+  width: 100%;
+  height: 4px;
+  background: var(--cd-bg-panel-hover);
+  border: 1px solid var(--cd-border-dim);
+  overflow: hidden;
+  position: relative;
+}
+
+.cd-progress__bar {
+  height: 100%;
+  background: var(--cd-accent);
+  transition: width 300ms ease;
+  position: relative;
+}
+
+.cd-progress__bar::after {
+  content: '';
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 8px;
+  background: color-mix(in srgb, var(--cd-accent-bright, var(--cd-accent)) 80%, white);
+  filter: blur(2px);
+}
+
+/* Indeterminate / scanning */
+.cd-progress--indeterminate .cd-progress__bar {
+  width: 40% !important;
+  animation: cd-progress-scan 1.8s ease-in-out infinite;
+}
+
+@keyframes cd-progress-scan {
+  0%   { transform: translateX(-150%); }
+  100% { transform: translateX(350%); }
+}
+
+/* Color variants */
+.cd-progress--danger .cd-progress__bar  { background: var(--cd-neon-red); }
+.cd-progress--success .cd-progress__bar { background: var(--cd-neon-green); }
+.cd-progress--warning .cd-progress__bar { background: var(--cd-neon-amber); }
+
+/* Thick variant */
+.cd-progress--thick {
+  height: 8px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .cd-progress--indeterminate .cd-progress__bar {
+    animation-duration: 0.001ms;
+  }
+}