@govnepal/css 0.2.0 → 0.3.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 (417ba0b6).
  *
  * 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
@@ -343,8 +343,21 @@ code, kbd, samp, pre,
   margin-inline-start: var(--gov-target-min-spacing);
 }
 
+/* A button may be rendered as a link (<a class="gov-button">) for a primary call-to-action that
+ * navigates — a "start" button. The generic `a` and `a:visited` rules (link.css) would otherwise
+ * win: `a:visited` has higher specificity (0,1,1) than a single button class (0,1,0), so after one
+ * click the label would turn the link-visited colour — invisible on a filled button. Pinning the
+ * label colour on `:link`/`:visited` per variant restores the correct specificity, and the
+ * inherited underline is removed. */
+.gov-button:link,
+.gov-button:visited {
+  text-decoration: none;
+}
+
 /* --- Variants ---------------------------------------------------------------------------- */
-.gov-button--primary {
+.gov-button--primary,
+.gov-button--primary:link,
+.gov-button--primary:visited {
   background: var(--gov-color-action-primary-default);
   color: var(--gov-color-text-on-action);
 }
@@ -357,7 +370,9 @@ code, kbd, samp, pre,
   background: var(--gov-color-action-primary-active);
 }
 
-.gov-button--secondary {
+.gov-button--secondary,
+.gov-button--secondary:link,
+.gov-button--secondary:visited {
   background: transparent;
   color: var(--gov-color-action-secondary-text);
   border-color: currentColor;
@@ -370,7 +385,9 @@ code, kbd, samp, pre,
 /* Always paired with a confirmation dialog (components/button.md) — the colour is a warning, not
  * the safeguard. Its red is deliberately the FUNCTIONAL red, never Simrik: "the colour of the
  * nation is never the colour of failure" (§2.1). */
-.gov-button--destructive {
+.gov-button--destructive,
+.gov-button--destructive:link,
+.gov-button--destructive:visited {
   background: var(--gov-color-action-destructive-default);
   color: var(--gov-color-text-on-action);
 }
@@ -785,6 +802,80 @@ 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);
+}
+
 /* 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
@@ -1055,6 +1146,201 @@ 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;
+}
+
 /* Phase banner (components/phase-banner.md), stepper (components/stepper.md), and language
  * switcher (components/language-switcher.md) — the standalone navigation pieces. */
 
@@ -1169,6 +1455,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.0",
+  "version": "0.3.0",
   "description": "Civic Calm — the framework-agnostic stylesheet. Semantic HTML plus .gov-* classes, no JavaScript.",
   "license": "MIT",
   "type": "module",