@govnepal/css 0.2.1 → 0.4.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 (816565b5).
+ * Built against design-guidelines 0.2.0-dev (43560eec).
  *
  * 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
@@ -802,6 +802,144 @@ a:visited,
   color: var(--gov-color-text-placeholder);
 }
 
+/* Toggle switch, textarea, character count (components/toggle.md, textarea.md, character-count.md). */
+
+/* Toggle — on/off with immediate effect; the ON state is interactive, therefore blue (§5.2), and
+ * the state is shown by more than colour (position + label/word), never colour alone (§4.1). */
+.gov-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gov-space-3);
+  cursor: pointer;
+  min-block-size: var(--gov-target-min-size);
+}
+
+.gov-toggle__track {
+  position: relative;
+  inline-size: 44px;
+  block-size: 24px;
+  flex-shrink: 0;
+  border-radius: var(--gov-radius-full);
+  background: var(--gov-color-control-track);
+  border: var(--gov-border-width-md) solid var(--gov-color-border-input);
+  transition: background-color var(--gov-motion-duration-fast) var(--gov-motion-easing-standard);
+}
+
+.gov-toggle__handle {
+  position: absolute;
+  inset-block-start: 1px;
+  inset-inline-start: 1px;
+  inline-size: 18px;
+  block-size: 18px;
+  border-radius: var(--gov-radius-full);
+  background: var(--gov-color-control-handle);
+  transition: transform var(--gov-motion-duration-fast) var(--gov-motion-easing-standard);
+}
+
+.gov-toggle[aria-checked="true"] .gov-toggle__track {
+  background: var(--gov-color-control-indicator);
+  border-color: var(--gov-color-control-indicator);
+}
+
+.gov-toggle[aria-checked="true"] .gov-toggle__handle {
+  transform: translateX(20px);
+}
+
+/* Textarea — multi-line free text; shares the input border/error treatment. */
+.gov-textarea {
+  inline-size: 100%;
+  min-block-size: calc(var(--gov-type-body-line-height) * 3);
+  padding: var(--gov-space-3);
+  background: var(--gov-color-background-surface);
+  color: var(--gov-color-text-primary);
+  border: var(--gov-border-width-md) solid var(--gov-color-border-input);
+  border-radius: var(--gov-radius-sm);
+  resize: vertical;
+  font-family: var(--gov-font-family-ui);
+  font-size: var(--gov-type-body-font-size);
+  line-height: var(--gov-type-body-line-height);
+}
+
+.gov-textarea[aria-invalid="true"] {
+  border-color: var(--gov-color-status-error-border);
+}
+
+/* Character count — a polite remaining-characters message below a limited field. */
+.gov-character-count {
+  color: var(--gov-color-text-secondary);
+  font-size: var(--gov-type-small-font-size);
+  line-height: var(--gov-type-small-line-height);
+}
+
+.gov-character-count--over {
+  color: var(--gov-color-status-error-text);
+  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
@@ -1010,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
@@ -1072,6 +1248,358 @@ a:visited,
   color: var(--gov-color-status-error-text);
 }
 
+/* Card (components/card.md) — group everything about one subject into one bounded, opaque surface.
+ * Low shadow, per Civic Calm's restraint (§2.1); surfaces are always fully opaque (§5.2). */
+.gov-card {
+  background: var(--gov-color-background-surface);
+  border: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+  border-radius: var(--gov-radius-lg);
+  padding: var(--gov-space-6);
+  box-shadow: var(--gov-elevation-1);
+}
+
+.gov-card > * + * {
+  margin-block-start: var(--gov-space-3);
+}
+
+/* The interactive variant makes the WHOLE card one link/target — never nest independent links
+ * inside it (a nested-interactive failure). */
+.gov-card--interactive {
+  display: block;
+  color: inherit;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.gov-card--interactive:hover {
+  border-color: var(--gov-color-border-strong);
+}
+
+/* Icon button (components/icon-button.md) — an icon-only action with a required accessible name.
+ * 44x44 minimum hit area even though the icon is smaller; never a primary action (§5.4). */
+.gov-icon-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--gov-target-min-size);
+  min-block-size: var(--gov-target-min-size);
+  padding: var(--gov-space-2);
+  border: 0;
+  border-radius: var(--gov-radius-sm);
+  background: transparent;
+  color: var(--gov-color-text-primary);
+  cursor: pointer;
+}
+
+.gov-icon-button:hover {
+  background: var(--gov-color-interactive-hover-surface);
+}
+
+.gov-icon-button:active {
+  background: var(--gov-color-interactive-pressed-surface);
+}
+
+.gov-icon-button[disabled],
+.gov-icon-button[aria-disabled="true"] {
+  color: var(--gov-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.gov-icon-button__icon {
+  inline-size: var(--gov-icon-size-md);
+  block-size: var(--gov-icon-size-md);
+}
+
+[data-density="kiosk-counter"] .gov-icon-button {
+  min-inline-size: var(--gov-target-recommended-size);
+  min-block-size: var(--gov-target-recommended-size);
+}
+
+/* Modal, confirmation dialog, and toast (components/modal.md, confirmation-dialog.md, toast.md).
+ * Overlays sit above content; surfaces stay fully opaque even over the scrim (§5.2). */
+
+.gov-modal__scrim {
+  position: fixed;
+  inset: 0;
+  z-index: var(--gov-z-overlay);
+  background: var(--gov-color-overlay-scrim);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gov-space-4);
+}
+
+.gov-modal {
+  position: relative;
+  z-index: var(--gov-z-modal);
+  inline-size: 100%;
+  max-inline-size: 32rem;
+  max-block-size: calc(100vh - var(--gov-space-8));
+  overflow: auto;
+  background: var(--gov-color-background-surface);
+  border-radius: var(--gov-radius-lg);
+  padding: var(--gov-space-6);
+  box-shadow: var(--gov-elevation-3);
+}
+
+.gov-modal__title {
+  font-size: var(--gov-type-h3-font-size);
+  line-height: var(--gov-type-h3-line-height);
+  font-weight: var(--gov-font-weight-semibold);
+  margin-block-end: var(--gov-space-3);
+}
+
+.gov-modal__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gov-space-3);
+  margin-block-start: var(--gov-space-6);
+}
+
+/* Toast — a small floating confirmation that auto-dismisses. Success/info only, never errors. */
+.gov-toast-region {
+  position: fixed;
+  inset-block-end: var(--gov-space-6);
+  inset-inline: 0;
+  z-index: var(--gov-z-toast);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--gov-space-2);
+  pointer-events: none;
+}
+
+.gov-toast {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gov-space-2);
+  padding: var(--gov-space-3) var(--gov-space-4);
+  border-radius: var(--gov-radius-md);
+  box-shadow: var(--gov-elevation-2);
+  pointer-events: auto;
+}
+
+.gov-toast--success {
+  background: var(--gov-color-status-success-background);
+  color: var(--gov-color-status-success-text);
+  border: var(--gov-border-width-sm) solid var(--gov-color-status-success-border);
+}
+
+.gov-toast--info {
+  background: var(--gov-color-status-info-background);
+  color: var(--gov-color-status-info-text);
+  border: var(--gov-border-width-sm) solid var(--gov-color-status-info-border);
+}
+
+/* Tag and summary list (components/tag.md, summary-list.md). */
+
+/* Tag — a neutral categorical label, NEVER a status colour (that belongs to badge). */
+.gov-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gov-space-1);
+  padding-inline: var(--gov-space-2);
+  padding-block: var(--gov-space-1);
+  border-radius: var(--gov-radius-full);
+  background: var(--gov-color-background-secondary);
+  color: var(--gov-color-text-secondary);
+  border: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+  font-size: var(--gov-type-small-font-size);
+  font-weight: var(--gov-font-weight-medium);
+  white-space: nowrap;
+}
+
+/* Summary list — review-your-answers rows (key / value / change). */
+.gov-summary-list {
+  margin: 0;
+}
+
+.gov-summary-list__row {
+  display: grid;
+  gap: var(--gov-space-2) var(--gov-space-4);
+  grid-template-columns: 1fr;
+  padding-block: var(--gov-space-3);
+  border-block-end: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+  break-inside: avoid;
+}
+
+@media (min-width: 640px) {
+  .gov-summary-list__row {
+    grid-template-columns: 1fr 2fr auto;
+    align-items: baseline;
+  }
+}
+
+.gov-summary-list__key {
+  font-weight: var(--gov-font-weight-medium);
+  margin: 0;
+}
+
+.gov-summary-list__value {
+  margin: 0;
+}
+
+.gov-summary-list__action {
+  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. */
 
@@ -1186,6 +1714,122 @@ a:visited,
   color: var(--gov-color-text-secondary);
 }
 
+/* Breadcrumb, tabs, pagination, footer (components/breadcrumb.md, tabs.md, pagination.md, footer.md). */
+
+/* Breadcrumb — hierarchy links, current page as plain text. */
+.gov-breadcrumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gov-space-2);
+  list-style: none;
+  padding: 0;
+  color: var(--gov-color-text-secondary);
+  font-size: var(--gov-type-small-font-size);
+}
+
+.gov-breadcrumb__sep {
+  color: var(--gov-color-text-secondary);
+}
+
+.gov-breadcrumb [aria-current="page"] {
+  color: var(--gov-color-text-primary);
+  font-weight: var(--gov-font-weight-medium);
+}
+
+/* Tabs — the selected tab marked by weight + underline, never colour alone. */
+.gov-tabs__list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gov-space-2);
+  border-block-end: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+}
+
+.gov-tabs__tab {
+  min-block-size: var(--gov-target-min-size);
+  padding: var(--gov-space-3) var(--gov-space-4);
+  border: 0;
+  background: transparent;
+  color: var(--gov-color-text-secondary);
+  cursor: pointer;
+  border-block-end: var(--gov-border-width-md) solid transparent;
+  margin-block-end: calc(-1 * var(--gov-border-width-sm));
+}
+
+.gov-tabs__tab[aria-selected="true"] {
+  color: var(--gov-color-text-primary);
+  font-weight: var(--gov-font-weight-semibold);
+  border-block-end-color: var(--gov-color-interactive-selected-indicator);
+}
+
+.gov-tabs__panel {
+  padding-block-start: var(--gov-space-4);
+}
+
+/* Pagination — numbered links, current marked by more than colour. */
+.gov-pagination {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--gov-space-2);
+  list-style: none;
+  padding: 0;
+}
+
+.gov-pagination__link {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: var(--gov-target-min-size);
+  min-block-size: var(--gov-target-min-size);
+  padding-inline: var(--gov-space-2);
+  border-radius: var(--gov-radius-sm);
+  text-decoration: none;
+  color: var(--gov-color-link-default);
+}
+
+.gov-pagination__link[aria-current="page"] {
+  background: var(--gov-color-interactive-selected-background);
+  color: var(--gov-color-text-primary);
+  font-weight: var(--gov-font-weight-semibold);
+}
+
+.gov-pagination__link[aria-disabled="true"] {
+  color: var(--gov-color-text-disabled);
+  pointer-events: none;
+}
+
+/* Footer — a two-column trust band, single column on mobile. */
+.gov-footer {
+  background: var(--gov-color-background-secondary);
+  border-block-start: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+  padding-block: var(--gov-space-8);
+}
+
+.gov-footer__grid {
+  display: grid;
+  gap: var(--gov-space-8);
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 768px) {
+  .gov-footer__grid {
+    grid-template-columns: 2fr 1fr;
+  }
+}
+
+.gov-footer__links {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gov-space-2);
+}
+
+.gov-footer__office-en {
+  color: var(--gov-color-text-secondary);
+}
+
 /* 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.2.1",
+  "version": "0.4.0",
   "description": "Civic Calm — the framework-agnostic stylesheet. Semantic HTML plus .gov-* classes, no JavaScript.",
   "license": "MIT",
   "type": "module",