@protolabsai/ui 0.2.0 → 0.4.0

package/src/styles.css

@@ -25,7 +25,7 @@
 .pl-btn:hover {
   border-color: var(--pl-color-fg);
 }
-/* Primary ships as a stronger border, not a violet fill — brand restraint. */
+/* Primary ships as a stronger border, not a lavender fill — brand restraint. */
 .pl-btn--primary {
   border-color: var(--pl-color-fg);
 }
@@ -464,3 +464,645 @@ a.pl-row:hover {
 .pl-link:hover {
   text-decoration-color: var(--pl-color-fg);
 }
+
+/* ── Tabs ──────────────────────────────────────────────────────────────────── */
+.pl-tabs {
+  display: flex;
+  gap: 2px;
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-tab {
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  color: var(--pl-color-fg-muted);
+  font: inherit;
+  font-family: var(--pl-font-sans);
+  padding: 8px 14px;
+  cursor: pointer;
+  border-radius: var(--pl-radius) var(--pl-radius) 0 0;
+}
+.pl-tab:hover:not(:disabled) {
+  color: var(--pl-color-fg);
+}
+.pl-tab--active {
+  color: var(--pl-color-fg);
+  border-bottom-color: var(--pl-color-fg);
+}
+.pl-tab:disabled {
+  opacity: 0.35;
+  cursor: not-allowed;
+}
+.pl-tab__lock {
+  margin-left: 5px;
+  opacity: 0.6;
+}
+
+/* ── Board (kanban) ────────────────────────────────────────────────────────── */
+.pl-board {
+  display: flex;
+  gap: 12px;
+  overflow-x: auto;
+  align-items: flex-start;
+}
+.pl-board-col {
+  flex: 1 0 200px;
+  min-width: 200px;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+  display: flex;
+  flex-direction: column;
+}
+.pl-board-col__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-board-col__count {
+  color: var(--pl-color-fg-muted);
+  font-family: var(--pl-font-mono);
+}
+.pl-board-col__body {
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-height: 40px;
+}
+.pl-board-card {
+  text-align: left;
+  background: var(--pl-color-bg);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-radius: var(--pl-radius);
+  color: var(--pl-color-fg);
+  padding: 10px 12px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font: inherit;
+}
+.pl-board-card:hover {
+  border-color: var(--pl-color-fg);
+}
+
+/* ── Field ─────────────────────────────────────────────────────────────────── */
+.pl-field {
+  display: block;
+}
+.pl-field__label {
+  display: block;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--pl-color-fg-muted);
+  margin-bottom: 6px;
+}
+.pl-field__input {
+  width: 100%;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  color: var(--pl-color-fg);
+  border-radius: var(--pl-radius);
+  padding: 9px 11px;
+  font: inherit;
+  font-family: var(--pl-font-sans);
+  resize: vertical;
+}
+.pl-field__input:focus {
+  outline: none;
+  border-color: var(--pl-color-fg);
+}
+
+/* ── Overlay scrim (Dialog + Drawer) ─────────────────────────────────────────── */
+.pl-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--pl-space-4);
+  background: var(--pl-color-overlay);
+}
+.pl-overlay--drawer {
+  padding: 0;
+}
+
+/* ── Dialog / Modal ──────────────────────────────────────────────────────────── */
+.pl-dialog {
+  display: flex;
+  flex-direction: column;
+  width: 480px;
+  max-width: 100%;
+  max-height: calc(100vh - 2 * var(--pl-space-4));
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: var(--pl-radius);
+  box-shadow: var(--pl-shadow-popover);
+}
+.pl-dialog:focus {
+  outline: none;
+}
+.pl-dialog__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--pl-space-3);
+  padding: var(--pl-space-3) var(--pl-space-4);
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-dialog__title {
+  font-size: 14px;
+  font-weight: var(--pl-font-weight-medium);
+  color: var(--pl-color-fg);
+}
+.pl-dialog__close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 18px;
+  line-height: 1;
+  color: var(--pl-color-fg-muted);
+  background: transparent;
+  border: none;
+  border-radius: var(--pl-radius);
+  cursor: pointer;
+  transition:
+    color var(--pl-motion-fast) var(--pl-motion-ease),
+    background var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-dialog__close:hover {
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-hover);
+}
+.pl-dialog__body {
+  padding: var(--pl-space-4);
+  overflow-y: auto;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--pl-color-fg-muted);
+}
+.pl-dialog__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--pl-space-2);
+  padding: var(--pl-space-3) var(--pl-space-4);
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+}
+
+/* Destructive confirm — error-toned border, fills error on hover. */
+.pl-btn--danger {
+  border-color: color-mix(in oklch, var(--pl-color-status-error) 60%, transparent);
+  color: var(--pl-color-status-error);
+}
+.pl-btn--danger:hover {
+  background: var(--pl-color-status-error);
+  border-color: var(--pl-color-status-error);
+  color: var(--pl-color-bg);
+}
+
+/* ── Drawer (slide-in sheet) ─────────────────────────────────────────────────── */
+.pl-drawer {
+  display: flex;
+  flex-direction: column;
+  width: 420px;
+  max-width: 100%;
+  height: 100%;
+  background: var(--pl-color-bg-raised);
+  box-shadow: var(--pl-shadow-popover);
+  animation: pl-drawer-in var(--pl-motion-base) var(--pl-motion-ease);
+}
+.pl-drawer:focus {
+  outline: none;
+}
+.pl-drawer--right {
+  margin-left: auto;
+  border-left: var(--pl-border-width) solid var(--pl-color-border-strong);
+}
+.pl-drawer--left {
+  margin-right: auto;
+  border-right: var(--pl-border-width) solid var(--pl-color-border-strong);
+  animation-name: pl-drawer-in-left;
+}
+.pl-overlay--drawer:has(.pl-drawer--left) {
+  justify-content: flex-start;
+}
+@keyframes pl-drawer-in {
+  from {
+    transform: translateX(100%);
+  }
+}
+@keyframes pl-drawer-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+.pl-drawer__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--pl-space-3);
+  padding: var(--pl-space-3) var(--pl-space-4);
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-drawer__title {
+  font-size: 14px;
+  font-weight: var(--pl-font-weight-medium);
+  color: var(--pl-color-fg);
+}
+.pl-drawer__body {
+  flex: 1;
+  padding: var(--pl-space-4);
+  overflow-y: auto;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--pl-color-fg-muted);
+}
+.pl-drawer__foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--pl-space-2);
+  padding: var(--pl-space-3) var(--pl-space-4);
+  border-top: var(--pl-border-width) solid var(--pl-color-border);
+}
+
+/* ── Toast ───────────────────────────────────────────────────────────────────── */
+.pl-toast-stack {
+  position: fixed;
+  bottom: var(--pl-space-4);
+  right: var(--pl-space-4);
+  z-index: 1100;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pl-space-2);
+  max-width: min(360px, calc(100vw - 2 * var(--pl-space-4)));
+}
+.pl-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--pl-space-3);
+  padding: var(--pl-space-3);
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  border-left-width: 2px;
+  border-radius: var(--pl-radius);
+  box-shadow: var(--pl-shadow-popover);
+  animation: pl-toast-in var(--pl-motion-base) var(--pl-motion-ease);
+}
+@keyframes pl-toast-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+}
+.pl-toast--success {
+  border-left-color: var(--pl-color-status-success);
+}
+.pl-toast--warning {
+  border-left-color: var(--pl-color-status-warning);
+}
+.pl-toast--error {
+  border-left-color: var(--pl-color-status-error);
+}
+.pl-toast--info {
+  border-left-color: var(--pl-color-status-info);
+}
+.pl-toast__body {
+  flex: 1;
+  min-width: 0;
+}
+.pl-toast__title {
+  font-family: var(--pl-font-mono);
+  font-size: 12px;
+  color: var(--pl-color-fg);
+  margin-bottom: 0.2rem;
+}
+.pl-toast__msg {
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--pl-color-fg-muted);
+}
+.pl-toast__close {
+  flex-shrink: 0;
+  font-size: 16px;
+  line-height: 1;
+  color: var(--pl-color-fg-muted);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+}
+.pl-toast__close:hover {
+  color: var(--pl-color-fg);
+}
+
+/* ── Tooltip (CSS-only) ──────────────────────────────────────────────────────── */
+.pl-tip-wrap {
+  position: relative;
+  display: inline-flex;
+}
+.pl-tip {
+  position: absolute;
+  z-index: 1200;
+  pointer-events: none;
+  white-space: nowrap;
+  padding: 0.25rem 0.5rem;
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  color: var(--pl-color-fg);
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: var(--pl-radius);
+  box-shadow: var(--pl-shadow-popover);
+  opacity: 0;
+  transition: opacity var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-tip-wrap:hover .pl-tip,
+.pl-tip-wrap:focus-within .pl-tip {
+  opacity: 1;
+}
+.pl-tip--top {
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pl-tip--bottom {
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+}
+.pl-tip--left {
+  right: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.pl-tip--right {
+  left: calc(100% + 6px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+/* ── Table (dense data) ──────────────────────────────────────────────────────── */
+.pl-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+.pl-table th {
+  text-align: left;
+  font-family: var(--pl-font-mono);
+  font-size: 11px;
+  font-weight: var(--pl-font-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--pl-color-fg-muted);
+  padding: var(--pl-space-2) var(--pl-space-3);
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-table td {
+  padding: var(--pl-space-2) var(--pl-space-3);
+  color: var(--pl-color-fg);
+  border-bottom: var(--pl-border-width) solid var(--pl-color-border);
+}
+.pl-table tbody tr.pl-tr--interactive {
+  cursor: pointer;
+  transition: background var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-table tbody tr.pl-tr--interactive:hover {
+  background: var(--pl-color-bg-hover);
+}
+.pl-table tbody tr.pl-tr--selected {
+  background: var(--pl-color-bg-subtle);
+}
+
+/* ── Status dot ──────────────────────────────────────────────────────────────── */
+.pl-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--pl-color-fg-muted);
+}
+.pl-dot--success {
+  background: var(--pl-color-status-success);
+}
+.pl-dot--warning {
+  background: var(--pl-color-status-warning);
+}
+.pl-dot--error {
+  background: var(--pl-color-status-error);
+}
+.pl-dot--info {
+  background: var(--pl-color-status-info);
+}
+.pl-dot--pulse {
+  animation: pl-dot-pulse var(--pl-motion-status) var(--pl-motion-ease-in-out) infinite;
+}
+@keyframes pl-dot-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.35;
+  }
+}
+.pl-dot-row {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+}
+.pl-dot-row__label {
+  font-size: 12px;
+  color: var(--pl-color-fg-muted);
+}
+
+/* ── Spinner ─────────────────────────────────────────────────────────────────── */
+.pl-spinner {
+  display: inline-block;
+  border: 2px solid var(--pl-color-border-strong);
+  border-top-color: var(--pl-color-fg);
+  border-radius: 50%;
+  animation: pl-spin var(--pl-motion-loading) var(--pl-motion-linear) infinite;
+}
+@keyframes pl-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ── ScrollArea (thin brand scrollbars) ──────────────────────────────────────── */
+.pl-scroll {
+  overflow: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--pl-color-border-strong) transparent;
+}
+.pl-scroll::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+.pl-scroll::-webkit-scrollbar-thumb {
+  background: var(--pl-color-border-strong);
+  border-radius: var(--pl-radius);
+}
+.pl-scroll::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+/* ── Form controls ───────────────────────────────────────────────────────────── */
+.pl-input {
+  width: 100%;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border);
+  color: var(--pl-color-fg);
+  border-radius: var(--pl-radius);
+  padding: 9px 11px;
+  font: inherit;
+  font-family: var(--pl-font-sans);
+  font-size: 13px;
+}
+.pl-input::placeholder {
+  color: var(--pl-color-fg-muted);
+}
+.pl-input:focus {
+  outline: none;
+  border-color: var(--pl-color-border-strong);
+}
+.pl-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.pl-textarea {
+  resize: vertical;
+  min-height: 72px;
+  line-height: 1.5;
+}
+.pl-select {
+  cursor: pointer;
+}
+
+/* Switch */
+.pl-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+.pl-switch--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.pl-switch__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.pl-switch__track {
+  position: relative;
+  display: inline-block;
+  width: 32px;
+  height: 18px;
+  background: var(--pl-color-bg-subtle);
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: 999px;
+  transition: background var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-switch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  background: var(--pl-color-fg-muted);
+  border-radius: 50%;
+  transition:
+    transform var(--pl-motion-fast) var(--pl-motion-ease),
+    background var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-switch__input:checked + .pl-switch__track {
+  background: var(--pl-color-fg);
+  border-color: var(--pl-color-fg);
+}
+.pl-switch__input:checked + .pl-switch__track .pl-switch__thumb {
+  transform: translateX(14px);
+  background: var(--pl-color-bg);
+}
+.pl-switch__input:focus-visible + .pl-switch__track {
+  outline: 2px solid var(--pl-color-border-strong);
+  outline-offset: 2px;
+}
+.pl-switch__label {
+  font-size: 13px;
+  color: var(--pl-color-fg);
+}
+
+/* Checkbox */
+.pl-checkbox {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+.pl-checkbox--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.pl-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+.pl-checkbox__box {
+  position: relative;
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: var(--pl-color-bg-raised);
+  border: var(--pl-border-width) solid var(--pl-color-border-strong);
+  border-radius: var(--pl-radius);
+  transition:
+    background var(--pl-motion-fast) var(--pl-motion-ease),
+    border-color var(--pl-motion-fast) var(--pl-motion-ease);
+}
+.pl-checkbox__input:checked + .pl-checkbox__box {
+  background: var(--pl-color-fg);
+  border-color: var(--pl-color-fg);
+}
+.pl-checkbox__input:checked + .pl-checkbox__box::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 4px;
+  height: 8px;
+  border: solid var(--pl-color-bg);
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+}
+.pl-checkbox__input:focus-visible + .pl-checkbox__box {
+  outline: 2px solid var(--pl-color-border-strong);
+  outline-offset: 2px;
+}
+.pl-checkbox__label {
+  font-size: 13px;
+  color: var(--pl-color-fg);
+}
+
+/* Respect reduced-motion for every animation this package introduces. */
+@media (prefers-reduced-motion: reduce) {
+  .pl-drawer,
+  .pl-toast,
+  .pl-dot--pulse,
+  .pl-spinner {
+    animation: none;
+  }
+}