@govnepal/css 0.3.0 → 0.5.0

package/dist/civic-calm.css

@@ -1,7 +1,7 @@
 /*!
  * Civic Calm — @govnepal/css
  * The framework-agnostic visual layer. Semantic HTML plus .gov-* classes; no JavaScript.
- * Built against design-guidelines 0.2.0-dev (417ba0b6).
+ * Built against design-guidelines 0.2.0-dev (8c2cd94f).
  *
  * This stylesheet holds ALL of Civic Calm's visual decisions. @govnepal/ui adds only behavior
  * (ARIA, keyboard, focus management) on top of these classes — so a plain-HTML site or a CMS
@@ -876,6 +876,70 @@ a:visited,
   font-weight: var(--gov-font-weight-medium);
 }
 
+/* OTP, password, search, masked value (components/otp-input.md, password-input.md, search-box.md,
+ * masked-value.md). Password and amount reuse .gov-input; these add what's specific. */
+
+/* OTP — segmented numeric boxes; a single accessible field underneath in the behavior layer. */
+.gov-otp {
+  display: flex;
+  gap: var(--gov-space-2);
+}
+
+.gov-otp__box {
+  inline-size: 3ch;
+  min-block-size: var(--gov-target-min-size);
+  padding: var(--gov-space-2);
+  text-align: center;
+  font-family: var(--gov-font-family-mono);
+  font-size: var(--gov-type-body-large-font-size);
+  background: var(--gov-color-background-surface);
+  border: var(--gov-border-width-md) solid var(--gov-color-border-input);
+  border-radius: var(--gov-radius-sm);
+}
+
+/* Password — a field with a trailing show/hide toggle. */
+.gov-password {
+  display: flex;
+  align-items: stretch;
+}
+
+.gov-password .gov-input {
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+  flex: 1;
+}
+
+.gov-password__toggle {
+  display: inline-flex;
+  align-items: center;
+  padding-inline: var(--gov-space-3);
+  border: var(--gov-border-width-md) solid var(--gov-color-border-input);
+  border-inline-start: 0;
+  border-start-end-radius: var(--gov-radius-sm);
+  border-end-end-radius: var(--gov-radius-sm);
+  background: var(--gov-color-background-secondary);
+  color: var(--gov-color-action-secondary-text);
+  cursor: pointer;
+}
+
+/* Search — a field with a leading icon and a submit. */
+.gov-search {
+  display: flex;
+  gap: var(--gov-space-2);
+}
+
+.gov-search .gov-input {
+  flex: 1;
+}
+
+/* Masked value — a monospace value plus a reveal control. */
+.gov-masked {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gov-space-2);
+  font-family: var(--gov-font-family-mono);
+}
+
 /* Details (components/details.md) and warning text (components/warning-text.md).
  *
  * Details is native <details>/<summary> — the platform's own disclosure semantics, so a screen
@@ -1084,6 +1148,44 @@ a:visited,
   color: var(--gov-color-text-on-action);
 }
 
+/* Cookie banner and offline banner (components/cookie-banner.md, offline-banner.md). */
+
+/* Cookie banner — non-blocking; Reject exactly as prominent as Accept (§9.1.2). */
+.gov-cookie-banner {
+  position: fixed;
+  inset-inline: 0;
+  inset-block-end: 0;
+  z-index: var(--gov-z-sticky);
+  background: var(--gov-color-background-surface);
+  border-block-start: var(--gov-border-width-md) solid var(--gov-color-border-strong);
+  box-shadow: var(--gov-elevation-2);
+  padding: var(--gov-space-4) 0;
+}
+
+.gov-cookie-banner__inner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gov-space-4);
+  justify-content: space-between;
+}
+
+.gov-cookie-banner__actions {
+  display: flex;
+  gap: var(--gov-space-3);
+}
+
+/* Offline banner — warning treatment, below the header, clears on reconnect. */
+.gov-offline-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gov-space-2);
+  padding: var(--gov-space-3) var(--gov-space-4);
+  background: var(--gov-color-status-warning-background);
+  color: var(--gov-color-status-warning-text);
+  border-block-end: var(--gov-border-width-lg) solid var(--gov-color-status-warning-border);
+}
+
 /* Status badge (components/badge.md).
  *
  * Renders the official status taxonomy (data/status-taxonomy.yaml) — Draft, Submitted, Under
@@ -1341,6 +1443,163 @@ a:visited,
   justify-self: start;
 }
 
+/* Table (components/table.md) — semantic rows/columns for comparison. */
+.gov-table {
+  inline-size: 100%;
+  border-collapse: collapse;
+}
+
+.gov-table caption {
+  text-align: start;
+  font-weight: var(--gov-font-weight-semibold);
+  margin-block-end: var(--gov-space-2);
+}
+
+.gov-table th,
+.gov-table td {
+  text-align: start;
+  padding: var(--gov-space-2) var(--gov-space-3);
+  border-block-end: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+}
+
+.gov-table th {
+  background: var(--gov-color-background-secondary);
+  font-weight: var(--gov-font-weight-semibold);
+}
+
+.gov-table__num {
+  text-align: end;
+  font-variant-numeric: tabular-nums;
+}
+
+.gov-table--sticky thead th {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: var(--gov-z-sticky);
+}
+
+/* Empty state and loading state (components/empty-state.md, loading-state.md). */
+.gov-empty-state {
+  text-align: center;
+  padding-block: var(--gov-space-8);
+  color: var(--gov-color-text-secondary);
+}
+
+.gov-empty-state__title {
+  font-size: var(--gov-type-h3-font-size);
+  line-height: var(--gov-type-h3-line-height);
+  font-weight: var(--gov-font-weight-semibold);
+  color: var(--gov-color-text-primary);
+  margin-block-end: var(--gov-space-2);
+}
+
+.gov-empty-state__action {
+  margin-block-start: var(--gov-space-4);
+}
+
+/* Spinner — the one sanctioned continuous loop (§5.5); stops under reduced-motion. */
+.gov-spinner {
+  display: inline-block;
+  inline-size: var(--gov-icon-size-lg, 24px);
+  block-size: var(--gov-icon-size-lg, 24px);
+  border: var(--gov-border-width-md) solid var(--gov-color-border-default);
+  border-block-start-color: var(--gov-color-control-indicator);
+  border-radius: var(--gov-radius-full);
+  animation: gov-spin var(--gov-motion-duration-slow) linear infinite;
+}
+
+@keyframes gov-spin {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gov-spinner { animation: none; }
+}
+[data-reduced-motion="true"] .gov-spinner { animation: none; }
+
+/* Skeleton — pulses no faster than slow (a fast pulse reads as error, §5.5). */
+.gov-skeleton {
+  background: var(--gov-color-background-secondary);
+  border-radius: var(--gov-radius-md);
+  animation: gov-pulse var(--gov-motion-duration-slow) ease-in-out infinite alternate;
+}
+
+@keyframes gov-pulse {
+  to { opacity: 0.5; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .gov-skeleton { animation: none; }
+}
+[data-reduced-motion="true"] .gov-skeleton { animation: none; }
+
+/* Accordion (components/accordion.md) — several independent expandable sections. */
+.gov-accordion {
+  border-block-start: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+}
+
+.gov-accordion__section {
+  border-block-end: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+}
+
+.gov-accordion__header {
+  inline-size: 100%;
+  display: flex;
+  align-items: center;
+  gap: var(--gov-space-2);
+  justify-content: space-between;
+  min-block-size: var(--gov-target-min-size);
+  padding: var(--gov-space-3) 0;
+  background: transparent;
+  border: 0;
+  text-align: start;
+  font-weight: var(--gov-font-weight-medium);
+  color: var(--gov-color-text-primary);
+  cursor: pointer;
+}
+
+.gov-accordion__chevron {
+  inline-size: var(--gov-icon-size-md);
+  block-size: var(--gov-icon-size-md);
+  flex-shrink: 0;
+  transition: transform var(--gov-motion-duration-base) var(--gov-motion-easing-standard);
+}
+
+.gov-accordion__header[aria-expanded="true"] .gov-accordion__chevron {
+  transform: rotate(180deg);
+}
+
+.gov-accordion__panel {
+  padding-block-end: var(--gov-space-4);
+  color: var(--gov-color-text-secondary);
+}
+
+/* Progress bar (components/progress-bar.md) — determinate, forward-only, with a text percentage. */
+.gov-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gov-space-2);
+}
+
+.gov-progress__track {
+  block-size: 8px;
+  background: var(--gov-color-control-track);
+  border-radius: var(--gov-radius-full);
+  overflow: hidden;
+}
+
+.gov-progress__fill {
+  block-size: 100%;
+  background: var(--gov-color-control-indicator);
+  border-radius: var(--gov-radius-full);
+  transition: inline-size var(--gov-motion-duration-base) var(--gov-motion-easing-standard);
+}
+
+.gov-progress__label {
+  font-size: var(--gov-type-small-font-size);
+  color: var(--gov-color-text-secondary);
+}
+
 /* Phase banner (components/phase-banner.md), stepper (components/stepper.md), and language
  * switcher (components/language-switcher.md) — the standalone navigation pieces. */
 
@@ -1571,6 +1830,146 @@ a:visited,
   color: var(--gov-color-text-secondary);
 }
 
+/* Officer + citizen navigation and government display components (batch C). */
+
+/* Bottom navigation — mobile primary nav, fixed, labels always shown. */
+.gov-bottom-nav {
+  display: flex;
+  border-block-start: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+  background: var(--gov-color-background-surface);
+}
+
+.gov-bottom-nav__item {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gov-space-1);
+  min-block-size: var(--gov-target-recommended-size);
+  padding: var(--gov-space-2);
+  text-decoration: none;
+  color: var(--gov-color-text-secondary);
+  font-size: var(--gov-type-caption-font-size);
+}
+
+.gov-bottom-nav__item[aria-current="page"] {
+  color: var(--gov-color-interactive-selected-indicator);
+  font-weight: var(--gov-font-weight-semibold);
+}
+
+/* Sidebar — officer left rail. */
+.gov-sidebar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gov-space-1);
+  padding: var(--gov-space-3);
+  background: var(--gov-color-background-secondary);
+  border-inline-end: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+}
+
+.gov-sidebar__link {
+  display: block;
+  padding: var(--gov-space-2) var(--gov-space-3);
+  border-radius: var(--gov-radius-sm);
+  text-decoration: none;
+  color: var(--gov-color-text-primary);
+  min-block-size: var(--gov-target-min-size);
+}
+
+.gov-sidebar__link[aria-current="page"] {
+  background: var(--gov-color-interactive-selected-background);
+  font-weight: var(--gov-font-weight-semibold);
+}
+
+/* Status tracker — vertical list of taxonomy statuses. */
+.gov-status-tracker {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gov-space-4);
+}
+
+.gov-status-tracker__step {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gov-space-3);
+  color: var(--gov-color-text-secondary);
+}
+
+.gov-status-tracker__step--complete { color: var(--gov-color-status-success-text); }
+.gov-status-tracker__step--current {
+  color: var(--gov-color-text-primary);
+  font-weight: var(--gov-font-weight-semibold);
+}
+
+.gov-status-tracker__marker {
+  inline-size: 24px;
+  block-size: 24px;
+  flex-shrink: 0;
+  border-radius: var(--gov-radius-full);
+  border: var(--gov-border-width-md) solid currentColor;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--gov-type-small-font-size);
+}
+
+/* Audit log item — an immutable record row. */
+.gov-audit-item {
+  padding-block: var(--gov-space-3);
+  border-block-end: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+}
+
+.gov-audit-item__meta {
+  color: var(--gov-color-text-secondary);
+  font-size: var(--gov-type-small-font-size);
+}
+
+.gov-audit-item__ref { font-family: var(--gov-font-family-mono); }
+
+/* Feedback widget — "was this page useful?" plus a report link. */
+.gov-feedback {
+  border-block-start: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+  padding-block: var(--gov-space-4);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gov-space-3);
+}
+
+/* Biometric capture status indicators (batch C, NID). Status by icon + text + colour, never
+ * colour alone (§4.1); the raw biometric sample is NEVER rendered (§9.1). */
+.gov-capture-status {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gov-space-2);
+  padding: var(--gov-space-3);
+  border: var(--gov-border-width-md) solid var(--gov-color-border-default);
+  border-radius: var(--gov-radius-md);
+}
+
+.gov-capture-status__icon {
+  inline-size: var(--gov-icon-size-lg, 24px);
+  block-size: var(--gov-icon-size-lg, 24px);
+  flex-shrink: 0;
+}
+
+.gov-capture-status--pass { border-color: var(--gov-color-status-success-border); color: var(--gov-color-status-success-text); }
+.gov-capture-status--retry { border-color: var(--gov-color-status-warning-border); color: var(--gov-color-status-warning-text); }
+.gov-capture-status--error { border-color: var(--gov-color-status-error-border); color: var(--gov-color-status-error-text); }
+
+.gov-capture-frame {
+  aspect-ratio: 4 / 3;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--gov-color-background-inverse);
+  color: var(--gov-color-text-inverse);
+  border-radius: var(--gov-radius-md);
+  border: var(--gov-border-width-lg) dashed var(--gov-color-border-strong);
+}
+
 /* National identity marks — the emblem and flag (identity/emblem, identity/flag).
  *
  * Base sizing only. Both are <img> of verified masters; neither is boxed, recoloured, or given a

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@govnepal/css",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Civic Calm — the framework-agnostic stylesheet. Semantic HTML plus .gov-* classes, no JavaScript.",
   "license": "MIT",
   "type": "module",