@ponchia/ui 0.2.0 → 0.2.2

package/css/disclosure.css

@@ -0,0 +1,311 @@
+/* ==========================================================================
+   disclosure — tabs / accordion / segmented / breadcrumb / pagination / avatar
+   Tabs use an ARIA + .is-active contract (toggle via your framework or the
+   shipped behaviors); accordion is native <details>; segmented is a
+   CSS-only :has() radio group. All Nothing-flat with the dot cue.
+   ========================================================================== */
+
+/* --- Tabs --- */
+
+.ui-tabs {
+  display: grid;
+  gap: var(--space-md);
+}
+
+.ui-tabs__list {
+  border-block-end: 1px solid var(--line);
+  display: flex;
+  gap: 0.1rem;
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.ui-tabs__list::-webkit-scrollbar {
+  display: none;
+}
+
+.ui-tab {
+  background: transparent;
+  border: 0;
+  border-block-end: 2px solid transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  gap: 0.4rem;
+  letter-spacing: var(--tracking-wide);
+  margin-block-end: -1px;
+  padding: 0.6rem 0.85rem;
+  text-transform: uppercase;
+  transition:
+    color var(--duration-fast) var(--ease-standard),
+    border-color var(--duration-fast) var(--ease-standard);
+}
+
+.ui-tab.is-active {
+  border-block-end-color: var(--accent);
+  color: var(--accent);
+}
+
+.ui-tabs__panel[hidden] {
+  display: none;
+}
+
+@media (hover: hover) {
+  .ui-tab:hover:not(.is-active) {
+    color: var(--text);
+  }
+}
+
+/* --- Accordion — styled native <details> --- */
+
+.ui-accordion {
+  display: grid;
+}
+
+.ui-accordion__item {
+  border-block-end: 1px solid var(--line);
+}
+
+.ui-accordion__summary {
+  align-items: center;
+  color: var(--text);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--mono);
+  font-size: var(--text-sm);
+  gap: 0.6rem;
+  letter-spacing: var(--tracking-wide);
+  list-style: none;
+  padding: 0.85rem 0.2rem;
+  text-transform: uppercase;
+}
+
+.ui-accordion__summary::-webkit-details-marker {
+  display: none;
+}
+
+/* Dot marker rotates into an arrow cue when open. */
+.ui-accordion__summary::before {
+  border-inline-end: 1.5px solid var(--text-dim);
+  border-block-end: 1.5px solid var(--text-dim);
+  content: '';
+  block-size: 0.4rem;
+  transform: rotate(-45deg);
+  transition: transform var(--duration-fast) var(--ease-spring);
+  inline-size: 0.4rem;
+}
+
+.ui-accordion__item[open] .ui-accordion__summary {
+  color: var(--accent);
+}
+
+.ui-accordion__item[open] .ui-accordion__summary::before {
+  border-color: var(--accent);
+  transform: rotate(45deg);
+}
+
+.ui-accordion__body {
+  color: var(--text-soft);
+  padding: 0 0.2rem 0.95rem;
+}
+
+.ui-accordion__body > :first-child {
+  margin-block-start: 0;
+}
+
+/* --- Segmented control — CSS-only radio group --- */
+
+.ui-segmented {
+  background: var(--panel-soft);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  display: inline-flex;
+  gap: 1px;
+  overflow: hidden;
+  padding: 2px;
+}
+
+.ui-segmented__option {
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  cursor: pointer;
+  flex: 1 0 auto;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  letter-spacing: var(--tracking-wide);
+  padding: 0.42rem 0.8rem;
+  text-align: center;
+  text-transform: uppercase;
+  transition:
+    background-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+  white-space: nowrap;
+}
+
+.ui-segmented__option input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.ui-segmented__option:has(input:checked) {
+  background: var(--accent);
+  color: var(--button-text);
+}
+
+.ui-segmented__option:has(input:focus-visible) {
+  outline: 2px solid var(--accent);
+  outline-offset: 2px;
+}
+
+@media (hover: hover) {
+  .ui-segmented__option:hover:not(:has(input:checked)) {
+    color: var(--text);
+  }
+}
+
+/* --- Breadcrumb --- */
+
+.ui-breadcrumb {
+  align-items: center;
+  color: var(--text-dim);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  gap: 0.5rem;
+  letter-spacing: var(--tracking-wide);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-transform: uppercase;
+}
+
+.ui-breadcrumb__item {
+  align-items: center;
+  color: var(--text-dim);
+  display: inline-flex;
+  gap: 0.5rem;
+}
+
+.ui-breadcrumb__item:not(:last-child)::after {
+  background: var(--line-strong);
+  border-radius: 50%;
+  content: '';
+  block-size: 0.22rem;
+  inline-size: 0.22rem;
+}
+
+.ui-breadcrumb__item[aria-current] {
+  color: var(--text);
+}
+
+.ui-breadcrumb__item a {
+  color: inherit;
+}
+
+@media (hover: hover) {
+  .ui-breadcrumb__item a:hover {
+    color: var(--accent);
+  }
+}
+
+/* --- Pagination --- */
+
+.ui-pagination {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.3rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ui-pagination__item {
+  align-items: center;
+  background: transparent;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+  color: var(--text-soft);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--mono);
+  font-size: var(--text-xs);
+  justify-content: center;
+  min-block-size: 2rem;
+  min-inline-size: 2rem;
+  padding: 0 0.5rem;
+  transition:
+    border-color var(--duration-fast) var(--ease-standard),
+    color var(--duration-fast) var(--ease-standard);
+}
+
+.ui-pagination__item.is-active {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.ui-pagination__item[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: 0.4;
+}
+
+@media (hover: hover) {
+  .ui-pagination__item:not(.is-active, [aria-disabled='true']):hover {
+    border-color: var(--line-strong);
+    color: var(--text);
+  }
+}
+
+/* --- Avatar — sharp, monospace initials or image --- */
+
+.ui-avatar {
+  --av-size: 2.2rem;
+
+  align-items: center;
+  background: var(--panel-soft);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-sm);
+  color: var(--text);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-family: var(--mono);
+  font-size: calc(var(--av-size) * 0.38);
+  font-weight: 700;
+  block-size: var(--av-size);
+  justify-content: center;
+  letter-spacing: 0.04em;
+  overflow: hidden;
+  text-transform: uppercase;
+  inline-size: var(--av-size);
+}
+
+.ui-avatar img {
+  block-size: 100%;
+  object-fit: cover;
+  inline-size: 100%;
+}
+
+.ui-avatar--sm {
+  --av-size: 1.5rem;
+}
+
+.ui-avatar--lg {
+  --av-size: 3.2rem;
+}
+
+.ui-avatar-group {
+  display: inline-flex;
+}
+
+.ui-avatar-group .ui-avatar {
+  box-shadow: 0 0 0 2px var(--bg);
+}
+
+.ui-avatar-group .ui-avatar:not(:first-child) {
+  margin-inline-start: -0.5rem;
+}

package/css/dots.css

@@ -39,9 +39,9 @@
   background-position: 0 50%;
   background-size: 9px 9px;
   border: 0;
-  height: 3px;
+  block-size: 3px;
   margin: var(--space-md) 0;
-  width: 100%;
+  inline-size: 100%;
 }
 
 /* Status dot — the glyph-style state indicator. */
@@ -50,8 +50,8 @@
   border-radius: 50%;
   display: inline-block;
   flex: 0 0 auto;
-  height: 0.55rem;
-  width: 0.55rem;
+  block-size: 0.55rem;
+  inline-size: 0.55rem;
 }
 
 .ui-dot--accent {
@@ -108,8 +108,8 @@
   animation: pulseDot 1s var(--ease-standard) infinite;
   background: var(--accent);
   border-radius: 50%;
-  height: 0.42rem;
-  width: 0.42rem;
+  block-size: 0.42rem;
+  inline-size: 0.42rem;
 }
 
 .ui-dotloader span:nth-child(2) {
@@ -120,6 +120,83 @@
   animation-delay: 0.32s;
 }
 
+/* Dot spinner — the Nothing-signature loader: a ring of dots, the lit
+   one stepping around the circle. Pure CSS: a steps() rotation of the
+   container plus a static opacity ramp on the dots reads as a comet.
+   Markup: <span class="ui-dotspinner"><i></i> ×8</span>. Size via
+   --ds-box / --ds-dot. */
+.ui-dotspinner {
+  --ds-box: 1.6rem;
+  --ds-dot: 0.26rem;
+
+  animation: uiSpin 1s steps(8) infinite;
+  display: inline-block;
+  flex: 0 0 auto;
+  block-size: var(--ds-box);
+  position: relative;
+  inline-size: var(--ds-box);
+}
+
+.ui-dotspinner i {
+  background: var(--accent);
+  border-radius: 50%;
+  block-size: var(--ds-dot);
+  inset: 0;
+  margin: auto;
+  position: absolute;
+  inline-size: var(--ds-dot);
+}
+
+.ui-dotspinner i:nth-child(1) {
+  opacity: 1;
+  transform: rotate(0deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(2) {
+  opacity: 0.85;
+  transform: rotate(45deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(3) {
+  opacity: 0.7;
+  transform: rotate(90deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(4) {
+  opacity: 0.56;
+  transform: rotate(135deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(5) {
+  opacity: 0.44;
+  transform: rotate(180deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(6) {
+  opacity: 0.34;
+  transform: rotate(225deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(7) {
+  opacity: 0.25;
+  transform: rotate(270deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner i:nth-child(8) {
+  opacity: 0.16;
+  transform: rotate(315deg) translateY(calc(var(--ds-box) / -2 + var(--ds-dot) / 2));
+}
+
+.ui-dotspinner--sm {
+  --ds-box: 1.05rem;
+  --ds-dot: 0.18rem;
+}
+
+.ui-dotspinner--lg {
+  --ds-box: 2.6rem;
+  --ds-dot: 0.42rem;
+}
+
 /* Dot progress meter — segmented LED bar. */
 .ui-dotbar {
   display: flex;
@@ -130,13 +207,46 @@
   background: var(--field-dot);
   border-radius: 1px;
   flex: 1;
-  height: 0.5rem;
+  block-size: 0.5rem;
 }
 
 .ui-dotbar i.is-on {
   background: var(--accent);
 }
 
+/* Indeterminate: the lit cell sweeps left→right across the segments. */
+.ui-dotbar--indeterminate i {
+  animation: pulseDot 1.1s var(--ease-standard) infinite;
+}
+
+.ui-dotbar--indeterminate i:nth-child(2) {
+  animation-delay: 0.09s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(3) {
+  animation-delay: 0.18s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(4) {
+  animation-delay: 0.27s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(5) {
+  animation-delay: 0.36s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(6) {
+  animation-delay: 0.45s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(7) {
+  animation-delay: 0.54s;
+}
+
+.ui-dotbar--indeterminate i:nth-child(n + 8) {
+  animation-delay: 0.63s;
+}
+
 /* Matrix-reveal wrapper — content wipes in left→right on .is-in. */
 .ui-matrix {
   clip-path: inset(0 100% 0 0);
@@ -149,10 +259,17 @@
 
 @media (prefers-reduced-motion: reduce) {
   .ui-dot--live::after,
-  .ui-dotloader span {
+  .ui-dotloader span,
+  .ui-dotspinner,
+  .ui-dotbar--indeterminate i {
     animation: none;
   }
 
+  /* Keep the spinner legible while static. */
+  .ui-dotspinner i {
+    opacity: 0.6;
+  }
+
   .ui-matrix {
     clip-path: none;
   }

package/css/feedback.css

@@ -0,0 +1,243 @@
+/* ==========================================================================
+   feedback — alert / toast / tooltip / progress
+   Status is carried by a single leading dot + a rationed tone colour,
+   never a fill. Nothing-flat, hairline, sharp.
+   ========================================================================== */
+
+/* --- Alert / callout — inline, dismissible-compatible --- */
+
+.ui-alert {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-inline-start: 2px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  color: var(--text-soft);
+  display: grid;
+  font-size: var(--text-sm);
+  gap: 0.3rem;
+  grid-template-columns: auto 1fr;
+  padding: 0.8rem 0.9rem;
+}
+
+/* Leading status glyph — the Nothing state cue. */
+.ui-alert::before {
+  background: var(--text-dim);
+  border-radius: 50%;
+  content: '';
+  block-size: 0.5rem;
+  margin-block-start: 0.32rem;
+  inline-size: 0.5rem;
+}
+
+.ui-alert > * {
+  grid-column: 2;
+}
+
+.ui-alert__title {
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-alert__body {
+  margin: 0;
+}
+
+.ui-alert__dismiss {
+  background: transparent;
+  border: 0;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-family: var(--mono);
+  grid-column: 3;
+  grid-row: 1;
+  line-height: 1;
+  padding: 0.1rem 0.3rem;
+}
+
+.ui-alert:has(.ui-alert__dismiss) {
+  grid-template-columns: auto 1fr auto;
+}
+
+.ui-alert--accent {
+  border-inline-start-color: var(--accent);
+}
+
+.ui-alert--accent::before {
+  background: var(--accent);
+}
+
+.ui-alert--success {
+  border-inline-start-color: var(--success);
+}
+
+.ui-alert--success::before {
+  background: var(--success);
+}
+
+.ui-alert--warning {
+  border-inline-start-color: var(--warning);
+}
+
+.ui-alert--warning::before {
+  background: var(--warning);
+}
+
+.ui-alert--danger {
+  border-inline-start-color: var(--danger);
+}
+
+.ui-alert--danger::before {
+  background: var(--danger);
+}
+
+@media (hover: hover) {
+  .ui-alert__dismiss:hover {
+    color: var(--text);
+  }
+}
+
+/* --- Toast — transient, stacked, screen-anchored --- */
+
+.ui-toast-stack {
+  display: grid;
+  gap: 0.5rem;
+
+  /* Logical so the stack anchors bottom inline-end and mirrors in RTL. */
+  inset-block: auto 1.25rem;
+  inset-inline: auto 1.25rem;
+  justify-items: end;
+  max-inline-size: min(22rem, calc(100vw - 2rem));
+  pointer-events: none;
+  position: fixed;
+  z-index: 60;
+}
+
+.ui-toast {
+  align-items: flex-start;
+  animation: uiToastIn var(--duration-base) var(--ease-spring) both;
+  background: var(--panel-strong);
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  box-shadow: var(--shadow-raised);
+  color: var(--text-soft);
+  display: grid;
+  font-size: var(--text-sm);
+  gap: 0.2rem 0.55rem;
+  grid-template-columns: auto 1fr;
+  padding: 0.7rem 0.85rem;
+  pointer-events: auto;
+  inline-size: 100%;
+}
+
+.ui-toast::before {
+  background: var(--text-dim);
+  border-radius: 50%;
+  content: '';
+  grid-row: 1 / -1;
+  block-size: 0.5rem;
+  margin-block-start: 0.3rem;
+  inline-size: 0.5rem;
+}
+
+.ui-toast__title {
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  font-weight: 700;
+  letter-spacing: var(--tracking-wide);
+  margin: 0;
+  text-transform: uppercase;
+}
+
+.ui-toast--accent::before {
+  background: var(--accent);
+}
+
+.ui-toast--success::before {
+  background: var(--success);
+}
+
+.ui-toast--warning::before {
+  background: var(--warning);
+}
+
+.ui-toast--danger::before {
+  background: var(--danger);
+}
+
+/* --- Tooltip — CSS-only, hover/focus, no JS --- */
+
+.ui-tooltip {
+  display: inline-flex;
+  position: relative;
+}
+
+.ui-tooltip__bubble {
+  background: var(--text);
+  border-radius: var(--radius-sm);
+  inset-block-end: calc(100% + 0.5rem);
+  color: var(--bg);
+  font-family: var(--mono);
+  font-size: var(--text-2xs);
+  inset-inline-start: 50%;
+  letter-spacing: var(--tracking-wide);
+  opacity: 0;
+  padding: 0.34rem 0.5rem;
+  pointer-events: none;
+  position: absolute;
+  text-transform: uppercase;
+  transform: translate(-50%, 4px);
+  transition:
+    opacity var(--duration-fast) var(--ease-standard),
+    transform var(--duration-fast) var(--ease-standard);
+  white-space: nowrap;
+  z-index: 50;
+}
+
+.ui-tooltip:hover .ui-tooltip__bubble,
+.ui-tooltip:focus-within .ui-tooltip__bubble {
+  opacity: 1;
+  transform: translate(-50%, 0);
+}
+
+/* --- Progress — linear, determinate or indeterminate --- */
+
+.ui-progress {
+  background: var(--panel-soft);
+  border: 1px solid var(--line);
+  border-radius: var(--radius-pill);
+  block-size: 0.5rem;
+  overflow: hidden;
+  position: relative;
+  inline-size: 100%;
+}
+
+.ui-progress__bar {
+  background: var(--accent);
+  block-size: 100%;
+  transition: inline-size var(--duration-base) var(--ease-out);
+  inline-size: calc(clamp(0, var(--value, 0), 100) * 1%);
+}
+
+.ui-progress--indeterminate .ui-progress__bar {
+  animation: uiTrack 1.1s var(--ease-standard) infinite;
+  position: absolute;
+  inline-size: 45%;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ui-progress--indeterminate .ui-progress__bar {
+    animation-duration: 0.01ms;
+    inset-inline-start: 0;
+    inline-size: 100%;
+  }
+
+  .ui-toast {
+    animation: none;
+  }
+}