@govnepal/css 0.1.0 → 0.2.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 (7af0babf).
+ * Built against design-guidelines 0.2.0-dev (816565b5).
  *
  * 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
@@ -659,6 +659,194 @@ a:visited,
   letter-spacing: 0.1em;
 }
 
+/* Checkbox and radio (components/checkbox.md, radio.md).
+ *
+ * Both are the native input with a styled indicator, and both follow the §5.2 colour hierarchy:
+ * the checked mark is color.action.primary — if it is interactive, it is blue. The whole row
+ * (input + label) is the hit target, 44px minimum, so a mistap on a phone still lands. */
+
+.gov-choice {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gov-space-3);
+  min-block-size: var(--gov-target-min-size);
+  padding-block: var(--gov-space-2);
+  cursor: pointer;
+}
+
+/* The native input is kept (not replaced) so it stays fully accessible; it is visually sized to
+ * the 24px indicator and its focus ring is drawn by the shared focus rule. */
+.gov-choice__input {
+  inline-size: 24px;
+  block-size: 24px;
+  flex-shrink: 0;
+  margin: 0;
+  accent-color: var(--gov-color-action-primary-default);
+  cursor: pointer;
+}
+
+.gov-choice__label {
+  /* Line up the label with the indicator, allowing for the taller Devanagari line. */
+  padding-block-start: 0.1em;
+}
+
+.gov-choice__hint {
+  display: block;
+  color: var(--gov-color-text-secondary);
+  font-size: var(--gov-type-small-font-size);
+  line-height: var(--gov-type-small-line-height);
+}
+
+/* A group of choices — the fieldset carries the question as its legend (components/checkbox.md,
+ * radio.md). Errors mark the group, never one option. */
+.gov-choice-group {
+  border: 0;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gov-space-2);
+}
+
+.gov-choice-group__legend {
+  padding: 0;
+  font-weight: var(--gov-font-weight-medium);
+  margin-block-end: var(--gov-space-2);
+}
+
+.gov-choice-group--error {
+  /* The whole group gets a lead edge so the error attaches to the question, not a single row. */
+  border-inline-start: var(--gov-border-width-lg) solid var(--gov-color-status-error-border);
+  padding-inline-start: var(--gov-space-4);
+}
+
+.gov-choice-group__error {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gov-space-2);
+  color: var(--gov-color-status-error-text);
+  font-weight: var(--gov-font-weight-medium);
+}
+
+/* Kiosk: options render as large pressable rows (§8.1.4) — a bordered card per choice. */
+[data-density="kiosk-counter"] .gov-choice {
+  border: var(--gov-border-width-md) solid var(--gov-color-border-input);
+  border-radius: var(--gov-radius-md);
+  padding: var(--gov-space-4);
+}
+
+/* Select (components/select.md).
+ *
+ * The native <select> is the baseline on every platform — it inherits the OS picker on mobile,
+ * which beats any custom dropdown on a small screen and works with every assistive technology.
+ * Styling touches only the closed control; the option list is never restyled. */
+
+.gov-select {
+  inline-size: 100%;
+  min-block-size: var(--gov-target-min-size);
+  padding-inline: var(--gov-space-3);
+  padding-block: var(--gov-space-3);
+  /* Room for the chevron on the trailing side (logical, so it flips for RTL if ever needed). */
+  padding-inline-end: var(--gov-space-8);
+
+  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);
+
+  font-size: var(--gov-type-body-font-size);
+  cursor: pointer;
+
+  /* The chevron is a background SVG using currentColor via a data URI — no icon font, no extra
+   * request. appearance:none removes the OS chevron so ours sits consistently. */
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231F1F1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--gov-space-3) center;
+}
+
+/* The chevron colour can't read a token from inside a data URI, so restate it per dark surface. */
+[data-mode="dark"] .gov-select {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23F1F1EF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+}
+
+.gov-select[aria-invalid="true"] {
+  border-color: var(--gov-color-status-error-border);
+}
+
+.gov-select[disabled] {
+  background-color: var(--gov-color-background-secondary);
+  color: var(--gov-color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* The disabled first option ("Select your province") reads as an instruction, not a value. */
+.gov-select option[disabled] {
+  color: var(--gov-color-text-placeholder);
+}
+
+/* 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
+ * reader announces collapsed/expanded for free and Enter/Space just work. The label states what is
+ * inside ("Why we ask this"), never a bare "More". */
+
+.gov-details {
+  border-block-start: var(--gov-border-width-sm) solid var(--gov-color-border-default);
+  padding-block: var(--gov-space-2);
+}
+
+.gov-details__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--gov-space-2);
+  min-block-size: var(--gov-target-min-size);
+  cursor: pointer;
+  color: var(--gov-color-link-default);
+  font-weight: var(--gov-font-weight-medium);
+  /* Remove the default triangle; a rotating chevron replaces it. */
+  list-style: none;
+}
+
+.gov-details__summary::-webkit-details-marker {
+  display: none;
+}
+
+.gov-details__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-details[open] .gov-details__chevron {
+  transform: rotate(90deg);
+}
+
+.gov-details__content {
+  padding-block-start: var(--gov-space-3);
+  padding-inline-start: var(--gov-space-6);
+  color: var(--gov-color-text-secondary);
+}
+
+/* Warning text — an inline icon + a short sentence, left-aligned with what it warns about. No
+ * card, border, or fill: that treatment belongs to alert. The SENTENCE carries the meaning; the
+ * icon and colour reinforce it (rules/status-not-color-alone). */
+.gov-warning-text {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gov-space-2);
+  color: var(--gov-color-status-warning-text);
+  font-weight: var(--gov-font-weight-medium);
+}
+
+.gov-warning-text__icon {
+  inline-size: var(--gov-icon-size-sm);
+  block-size: var(--gov-icon-size-sm);
+  flex-shrink: 0;
+  margin-block-start: 0.15em;
+}
+
 /* Error summary (components/error-summary.md).
  *
  * Mandatory on every form, on any failed validation (§7.1) — alongside the inline errors, never
@@ -867,6 +1055,140 @@ a:visited,
   color: var(--gov-color-status-error-text);
 }
 
+/* Phase banner (components/phase-banner.md), stepper (components/stepper.md), and language
+ * switcher (components/language-switcher.md) — the standalone navigation pieces. */
+
+/* Phase banner: a single-line band directly below the government header, above content. Plain
+ * text, never colour alone. A thin Simrik-free band using a status tint. */
+.gov-phase-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--gov-space-2);
+  padding-block: var(--gov-space-2);
+  background: var(--gov-color-status-info-background);
+  border-block-end: var(--gov-border-width-sm) solid var(--gov-color-status-info-border);
+}
+
+.gov-phase-banner__tag {
+  font-weight: var(--gov-font-weight-semibold);
+  color: var(--gov-color-status-info-text);
+  text-transform: uppercase;
+  font-size: var(--gov-type-small-font-size);
+  letter-spacing: 0.03em;
+}
+
+/* Stepper: an ordered list of named steps — completed / current / upcoming. */
+.gov-stepper {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--gov-space-4);
+  padding: 0;
+}
+
+.gov-stepper__step {
+  display: flex;
+  align-items: center;
+  gap: var(--gov-space-2);
+  color: var(--gov-color-text-secondary);
+}
+
+.gov-stepper__step--complete {
+  color: var(--gov-color-status-success-text);
+}
+
+.gov-stepper__step--current {
+  color: var(--gov-color-text-primary);
+  font-weight: var(--gov-font-weight-semibold);
+}
+
+.gov-stepper__marker {
+  inline-size: 28px;
+  block-size: 28px;
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--gov-radius-full);
+  border: var(--gov-border-width-md) solid currentColor;
+  font-size: var(--gov-type-small-font-size);
+  font-weight: var(--gov-font-weight-semibold);
+}
+
+.gov-stepper__step--current .gov-stepper__marker {
+  background: var(--gov-color-interactive-selected-indicator);
+  color: var(--gov-color-text-on-action);
+  border-color: var(--gov-color-interactive-selected-indicator);
+}
+
+.gov-stepper__link {
+  color: inherit;
+}
+
+/* Condensed "Step 2 of 5" for mobile — shown instead of the full rail below the breakpoint. */
+.gov-stepper__condensed {
+  display: none;
+  font-weight: var(--gov-font-weight-medium);
+}
+
+@media (max-width: 767px) {
+  .gov-stepper {
+    display: none;
+  }
+  .gov-stepper__condensed {
+    display: block;
+  }
+}
+
+/* Language switcher: a compact text toggle, each language shown by its autonym, current one
+ * distinguished by weight + underline (never colour alone). */
+.gov-language-switcher {
+  display: flex;
+  align-items: center;
+  gap: var(--gov-space-2);
+}
+
+.gov-language-switcher a {
+  min-block-size: var(--gov-target-min-size);
+  display: inline-flex;
+  align-items: center;
+  padding-inline: var(--gov-space-2);
+  text-decoration: none;
+  color: var(--gov-color-link-default);
+}
+
+.gov-language-switcher [aria-current="true"] {
+  color: var(--gov-color-text-primary);
+  font-weight: var(--gov-font-weight-semibold);
+  text-decoration: underline;
+  text-underline-offset: 0.2em;
+}
+
+.gov-language-switcher__divider {
+  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
+ * background plate. The flag in particular has NO rectangular canvas — its double-pennant
+ * silhouette sits directly on the page background (identity/flag), so it never gets a border or
+ * fill here. */
+
+.gov-emblem {
+  block-size: auto;
+  max-inline-size: 100%;
+}
+
+.gov-flag {
+  block-size: auto;
+  max-inline-size: 100%;
+  /* Explicitly no border, background, or box — the constitutional shape must show as-is. */
+  background: none;
+  border: 0;
+}
+
 /* Government header (components/header.md, implementing identity/government-header).
  *
  * "The most-rendered identity surface in the whole system — every service, every page. It is
@@ -901,32 +1223,17 @@ a:visited,
   margin-inline-end: auto;
 }
 
-/* The emblem is loaded from the verified master in design-assets. It is NEVER drawn here — not
- * as an inline SVG, not as a font glyph, not as an approximation. Recreating, recolouring, or
- * tracing it is prohibited (identity/emblem), and an outdated or redrawn emblem is a legal error,
- * not a style choice. The reversed variant is selected for dark surfaces by the behavior layer. */
+/* The emblem is loaded from the verified master (identity/emblem), never drawn here — not as an
+ * inline SVG, not as a font glyph, not an approximation. Recreating, recolouring, or tracing it is
+ * prohibited; an outdated or redrawn emblem is a legal error, not a style choice. */
 .gov-header__emblem {
-  block-size: 48px;
-  inline-size: auto;
+  display: inline-flex;
   flex-shrink: 0;
 }
 
-/* Dev-only: shown when no emblem asset has been supplied. It is deliberately ugly and says so.
- * design-assets/emblems/files/ is currently EMPTY — no verified master exists yet — and the one
- * thing this system must not do is invent a stand-in that looks plausible enough to ship. */
-.gov-header__emblem-missing {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.gov-header__emblem .gov-emblem {
   block-size: 48px;
-  inline-size: 48px;
-  flex-shrink: 0;
-  border: var(--gov-border-width-md) dashed var(--gov-color-status-error-border);
-  color: var(--gov-color-status-error-text);
-  font-size: var(--gov-type-caption-font-size);
-  line-height: 1.1;
-  text-align: center;
-  font-weight: var(--gov-font-weight-semibold);
+  inline-size: auto;
 }
 
 /* Nepali first, English second — Article 7 makes Nepali in Devanagari the language of official