@echelon-foundry/design-system 0.7.0 → 0.8.0-main.250.1

package/CHANGELOG.md

@@ -7,6 +7,22 @@ published as GitHub release tarballs
 and to npm. Earlier releases are described in `docs/CONSUMING-FORMA.md` and
 `HANDOFF.md`.
 
+## 0.8.0
+
+Minor release: Design by Construction forms and fully operable form examples.
+
+### Added
+- A versioned `forma.design/1.0.0` JSON contract, capability declaration, validator, deterministic HTML renderer, valid NASA fixture and refusal fixtures for unsupported versions, presentation overrides, invalid nesting, misalignment and unbound actions.
+- A complete form catalog page with functional basic, advanced, validation and mobile examples built from native custom-element HTML.
+- Package exports for the design schema, capabilities and examples, while preserving hand-authored HTML and audited extended/custom escape paths.
+
+### Fixed
+- Forms now have a bounded responsive root, aligned grid-field tracks, stable validation-message placement and visible fragment-targeted success feedback.
+- Native controls and buttons have explicit disabled, read-only and invalid presentation without relying on colour alone.
+- Catalog reset examples are outcome-tested by preparing and observing a native field value; submit examples remain URL-outcome tested.
+
+No existing component, class, token or icon was renamed or removed. Forma remains zero-runtime HTML and CSS; design validation and rendering are build-time tools.
+
 ## 0.7.0
 
 Minor release: shared layout and interaction conformance with

package/LICENSE

@@ -1,21 +1,131 @@
-MIT License
-
-Copyright (c) 2026 Kevin Miller
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+# PolyForm Noncommercial License 1.0.0
+
+<https://polyformproject.org/licenses/noncommercial/1.0.0>
+
+## Acceptance
+
+In order to get any license under these terms, you must agree
+to them as both strict obligations and conditions to all
+your licenses.
+
+## Copyright License
+
+The licensor grants you a copyright license for the
+software to do everything you might do with the software
+that would otherwise infringe the licensor's copyright
+in it for any permitted purpose.  However, you may
+only distribute the software according to [Distribution
+License](#distribution-license) and make changes or new works
+based on the software according to [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Distribution License
+
+The licensor grants you an additional copyright license
+to distribute copies of the software.  Your license
+to distribute covers distributing the software with
+changes and new works permitted by [Changes and New Works
+License](#changes-and-new-works-license).
+
+## Notices
+
+You must ensure that anyone who gets a copy of any part of
+the software from you also gets a copy of these terms or the
+URL for them above, as well as copies of any plain-text lines
+beginning with `Required Notice:` that the licensor provided
+with the software.  For example:
+
+> Required Notice: Copyright Yoyodyne, Inc. (http://example.com)
+
+## Changes and New Works License
+
+The licensor grants you an additional copyright license to
+make changes and new works based on the software for any
+permitted purpose.
+
+## Patent License
+
+The licensor grants you a patent license for the software that
+covers patent claims the licensor can license, or becomes able
+to license, that you would infringe by using the software.
+
+## Noncommercial Purposes
+
+Any noncommercial purpose is a permitted purpose.
+
+## Personal Uses
+
+Personal use for research, experiment, and testing for
+the benefit of public knowledge, personal study, private
+entertainment, hobby projects, amateur pursuits, or religious
+observance, without any anticipated commercial application,
+is use for a permitted purpose.
+
+## Noncommercial Organizations
+
+Use by any charitable organization, educational institution,
+public research organization, public safety or health
+organization, environmental protection organization,
+or government institution is use for a permitted purpose
+regardless of the source of funding or obligations resulting
+from the funding.
+
+## Fair Use
+
+You may have "fair use" rights for the software under the
+law. These terms do not limit them.
+
+## No Other Rights
+
+These terms do not allow you to sublicense or transfer any of
+your licenses to anyone else, or prevent the licensor from
+granting licenses to anyone else.  These terms do not imply
+any other licenses.
+
+## Patent Defense
+
+If you make any written claim that the software infringes or
+contributes to infringement of any patent, your patent license
+for the software granted under these terms ends immediately. If
+your company makes such a claim, your patent license ends
+immediately for work on behalf of your company.
+
+## Violations
+
+The first time you are notified in writing that you have
+violated any of these terms, or done anything with the software
+not covered by your licenses, your licenses can nonetheless
+continue if you come into full compliance with these terms,
+and take practical steps to correct past violations, within
+32 days of receiving notice.  Otherwise, all your licenses
+end immediately.
+
+## No Liability
+
+***As far as the law allows, the software comes as is, without
+any warranty or condition, and the licensor will not be liable
+to you for any damages arising out of these terms or the use
+or nature of the software, under any kind of legal claim.***
+
+## Definitions
+
+The **licensor** is the individual or entity offering these
+terms, and the **software** is the software the licensor makes
+available under these terms.
+
+**You** refers to the individual or entity agreeing to these
+terms.
+
+**Your company** is any legal entity, sole proprietorship,
+or other kind of organization that you work for, plus all
+organizations that have control over, are under the control of,
+or are under common control with that organization.  **Control**
+means ownership of substantially all the assets of an entity,
+or the power to direct its management and policies by vote,
+contract, or otherwise.  Control can be direct or indirect.
+
+**Your licenses** are all the licenses granted to you for the
+software under these terms.
+
+**Use** means anything you do with the software requiring one
+of your licenses.

package/README.md

@@ -155,3 +155,8 @@ See [docs/FIGMA.md](docs/FIGMA.md) for the variable, component, and Code Connect
 workflow. The public package also exposes `./tokens.json` and
 `./figma/components.json` for design tooling.
 
+## License
+
+Source available under PolyForm Noncommercial 1.0.0 for permitted noncommercial uses. Commercial use requires a separate license from Echelon Foundry. Previously distributed versions remain subject to the licenses under which they were released.
+
+Commercial licensing information is forthcoming.

package/contracts/design-capabilities.json

@@ -0,0 +1,13 @@
+{
+  "format": "forma.design-capabilities",
+  "schemaVersion": "1.0.0",
+  "contractVersions": ["1.0.0"],
+  "modes": ["standard", "extended", "custom"],
+  "formLayouts": ["stack", "grid"],
+  "catalogLayoutModels": ["stack", "grid", "split", "dock", "flow", "canvas", "overlay", "page", "repeater"],
+  "controls": ["text", "email", "tel", "url", "number", "date", "time", "datetime-local", "textarea", "select", "checkbox", "radio-group", "toggle"],
+  "standardActionBindings": ["form.submit", "form.reset"],
+  "minimumViewportCssPx": 320,
+  "standardOverflow": "wrap",
+  "runtime": "none"
+}

package/dist/all.css

@@ -631,6 +631,12 @@
     transition-duration: var(--ef-motion-direct-duration, 0ms);
   }
 
+  :where(button, .ef-button):disabled {
+    border-style: dashed;
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
   :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
     box-sizing: border-box;
     min-block-size: 2.75rem;
@@ -686,6 +692,28 @@
     text-align: start;
   }
 
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):disabled {
+    --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
+    border-style: dashed;
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea):read-only:not(:disabled) {
+    border-style: dashed;
+    background: color-mix(in srgb, var(--ef-color-surface-secondary, #e3e0d7) 55%, transparent);
+  }
+
+  /* Invalid state keeps native semantics and adds a shape cue. The associated
+     recovery message remains the non-colour explanation of what to fix. */
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):where([aria-invalid="true"], :user-invalid) {
+    border-inline-start-width: 0.3rem;
+    border-inline-start-color: var(--ef-color-status-danger, #8d3027);
+  }
+
   :where(:focus-visible) {
     outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
     outline-offset: 2px;
@@ -870,6 +898,39 @@
   .ef-form-row > .ef-field > :not(.ef-field__label, .ef-field__description, .ef-validation-message) { grid-row: 3; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
   .ef-form-row > .ef-field > .ef-validation-message { grid-row: 4; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
 
+  /* Form contract ------------------------------------------------------- */
+  .ef-form {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--ef-form-gap, var(--ef-primitive-spacing-5, 1.5rem));
+    min-inline-size: 0;
+    max-inline-size: var(--ef-form-max, 64rem);
+  }
+
+  .ef-form > :where(h1, h2, h3, p) { margin-block: 0; }
+
+  /* Native constraint validation owns validity. The recovery text is in the
+     DOM and programmatically associated from first render, but appears only
+     after the browser marks the control user-invalid. */
+  .ef-validation-message--when-invalid { display: none; }
+  .ef-field:has(> :user-invalid) > .ef-validation-message--when-invalid { display: flex; }
+
+  /* GET submission to the declared fragment is a real, script-free outcome.
+     The status remains absent from layout and the accessibility tree until it
+     is the URL target. */
+  .ef-form__outcome { display: none; }
+  .ef-form__outcome:target {
+    --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
+    display: block;
+    padding: var(--ef-primitive-spacing-3, 0.75rem);
+    border-inline-start: 0.25rem solid var(--ef-color-status-success, #2f6f4e);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    color: var(--ef-color-text-on-secondary-surface, #3a403c);
+    font-weight: 650;
+  }
+
   .ef-field > :is(input[type="date"], input[type="time"], input[type="datetime-local"]) {
     min-inline-size: 0;
     inline-size: 100%;
@@ -6235,7 +6296,6 @@
   }
 }
 
-
 @layer echelon.assessment {
   /* Question shell ------------------------------------------------------ */
   .ef-question {

package/dist/build-metrics.json

@@ -232,6 +232,7 @@
     "patterns/flyout.html",
     "patterns/focus-stage.html",
     "patterns/form-row.html",
+    "patterns/form.html",
     "patterns/frame.html",
     "patterns/freshness.html",
     "patterns/grid.html",
@@ -340,13 +341,13 @@
     "tokens.css"
   ],
   "bytes": {
-    "all.css": 326931,
+    "all.css": 329656,
     "assessment.css": 36343,
     "brands/echelon.css": 3621,
     "brands/example-harbor.css": 3637,
     "brands/index.json": 335,
-    "components.css": 209407,
-    "foundations.css": 14098,
+    "components.css": 210904,
+    "foundations.css": 15326,
     "icons/add.svg": 216,
     "icons/agent.svg": 354,
     "icons/archive.svg": 248,
@@ -572,6 +573,7 @@
     "patterns/flyout.html": 2488,
     "patterns/focus-stage.html": 377,
     "patterns/form-row.html": 848,
+    "patterns/form.html": 2000,
     "patterns/frame.html": 365,
     "patterns/freshness.html": 187,
     "patterns/grid.html": 305,

package/dist/components.css

@@ -64,6 +64,39 @@
   .ef-form-row > .ef-field > :not(.ef-field__label, .ef-field__description, .ef-validation-message) { grid-row: 3; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
   .ef-form-row > .ef-field > .ef-validation-message { grid-row: 4; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
 
+  /* Form contract ------------------------------------------------------- */
+  .ef-form {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--ef-form-gap, var(--ef-primitive-spacing-5, 1.5rem));
+    min-inline-size: 0;
+    max-inline-size: var(--ef-form-max, 64rem);
+  }
+
+  .ef-form > :where(h1, h2, h3, p) { margin-block: 0; }
+
+  /* Native constraint validation owns validity. The recovery text is in the
+     DOM and programmatically associated from first render, but appears only
+     after the browser marks the control user-invalid. */
+  .ef-validation-message--when-invalid { display: none; }
+  .ef-field:has(> :user-invalid) > .ef-validation-message--when-invalid { display: flex; }
+
+  /* GET submission to the declared fragment is a real, script-free outcome.
+     The status remains absent from layout and the accessibility tree until it
+     is the URL target. */
+  .ef-form__outcome { display: none; }
+  .ef-form__outcome:target {
+    --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
+    display: block;
+    padding: var(--ef-primitive-spacing-3, 0.75rem);
+    border-inline-start: 0.25rem solid var(--ef-color-status-success, #2f6f4e);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    color: var(--ef-color-text-on-secondary-surface, #3a403c);
+    font-weight: 650;
+  }
+
   .ef-field > :is(input[type="date"], input[type="time"], input[type="datetime-local"]) {
     min-inline-size: 0;
     inline-size: 100%;
@@ -5428,4 +5461,3 @@
     .ef-icon { color: CanvasText; }
   }
 }
-

package/dist/foundations.css

@@ -96,6 +96,12 @@
     transition-duration: var(--ef-motion-direct-duration, 0ms);
   }
 
+  :where(button, .ef-button):disabled {
+    border-style: dashed;
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
   :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
     box-sizing: border-box;
     min-block-size: 2.75rem;
@@ -151,6 +157,28 @@
     text-align: start;
   }
 
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):disabled {
+    --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
+    border-style: dashed;
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea):read-only:not(:disabled) {
+    border-style: dashed;
+    background: color-mix(in srgb, var(--ef-color-surface-secondary, #e3e0d7) 55%, transparent);
+  }
+
+  /* Invalid state keeps native semantics and adds a shape cue. The associated
+     recovery message remains the non-colour explanation of what to fix. */
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):where([aria-invalid="true"], :user-invalid) {
+    border-inline-start-width: 0.3rem;
+    border-inline-start-color: var(--ef-color-status-danger, #8d3027);
+  }
+
   :where(:focus-visible) {
     outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
     outline-offset: 2px;

package/dist/icons/registry.json

@@ -1,6 +1,6 @@
 {
   "schemaVersion": 1,
-  "formaVersion": "0.7.0",
+  "formaVersion": "0.8.0",
   "grid": 24,
   "icons": [
     {

package/dist/marketing/forma-all.css

@@ -1,4 +1,4 @@
-/*! Forma 0.7.0 | forma-all.css | bundle echelon-marketing
+/*! Forma 0.8.0 | forma-all.css | bundle echelon-marketing
     Complete Forma surface (application components, assessment, and marketing layers) for sites that also present Forma application patterns such as data grids or status lozenges.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -636,6 +636,12 @@
     transition-duration: var(--ef-motion-direct-duration, 0ms);
   }
 
+  :where(button, .ef-button):disabled {
+    border-style: dashed;
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
   :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
     box-sizing: border-box;
     min-block-size: 2.75rem;
@@ -691,6 +697,28 @@
     text-align: start;
   }
 
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):disabled {
+    --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
+    border-style: dashed;
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea):read-only:not(:disabled) {
+    border-style: dashed;
+    background: color-mix(in srgb, var(--ef-color-surface-secondary, #e3e0d7) 55%, transparent);
+  }
+
+  /* Invalid state keeps native semantics and adds a shape cue. The associated
+     recovery message remains the non-colour explanation of what to fix. */
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):where([aria-invalid="true"], :user-invalid) {
+    border-inline-start-width: 0.3rem;
+    border-inline-start-color: var(--ef-color-status-danger, #8d3027);
+  }
+
   :where(:focus-visible) {
     outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
     outline-offset: 2px;
@@ -875,6 +903,39 @@
   .ef-form-row > .ef-field > :not(.ef-field__label, .ef-field__description, .ef-validation-message) { grid-row: 3; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
   .ef-form-row > .ef-field > .ef-validation-message { grid-row: 4; margin-block-start: var(--ef-primitive-spacing-2, 0.5rem); }
 
+  /* Form contract ------------------------------------------------------- */
+  .ef-form {
+    container-type: inline-size;
+    display: grid;
+    gap: var(--ef-form-gap, var(--ef-primitive-spacing-5, 1.5rem));
+    min-inline-size: 0;
+    max-inline-size: var(--ef-form-max, 64rem);
+  }
+
+  .ef-form > :where(h1, h2, h3, p) { margin-block: 0; }
+
+  /* Native constraint validation owns validity. The recovery text is in the
+     DOM and programmatically associated from first render, but appears only
+     after the browser marks the control user-invalid. */
+  .ef-validation-message--when-invalid { display: none; }
+  .ef-field:has(> :user-invalid) > .ef-validation-message--when-invalid { display: flex; }
+
+  /* GET submission to the declared fragment is a real, script-free outcome.
+     The status remains absent from layout and the accessibility tree until it
+     is the URL target. */
+  .ef-form__outcome { display: none; }
+  .ef-form__outcome:target {
+    --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
+    display: block;
+    padding: var(--ef-primitive-spacing-3, 0.75rem);
+    border-inline-start: 0.25rem solid var(--ef-color-status-success, #2f6f4e);
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    color: var(--ef-color-text-on-secondary-surface, #3a403c);
+    font-weight: 650;
+  }
+
   .ef-field > :is(input[type="date"], input[type="time"], input[type="datetime-local"]) {
     min-inline-size: 0;
     inline-size: 100%;
@@ -6240,7 +6301,6 @@
   }
 }
 
-
 @layer echelon.assessment {
   /* Question shell ------------------------------------------------------ */
   .ef-question {

package/dist/marketing/forma-echelon-marketing.css

@@ -1,4 +1,4 @@
-/*! Forma 0.7.0 | forma-echelon-marketing.css | bundle echelon-marketing
+/*! Forma 0.8.0 | forma-echelon-marketing.css | bundle echelon-marketing
     Single-file Echelon marketing presentation: forma-marketing.css followed by the Echelon theme. Most sites load only this file.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -736,6 +736,12 @@
     transition-duration: var(--ef-motion-direct-duration, 0ms);
   }
 
+  :where(button, .ef-button):disabled {
+    border-style: dashed;
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
   :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
     box-sizing: border-box;
     min-block-size: 2.75rem;
@@ -791,6 +797,28 @@
     text-align: start;
   }
 
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):disabled {
+    --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
+    border-style: dashed;
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea):read-only:not(:disabled) {
+    border-style: dashed;
+    background: color-mix(in srgb, var(--ef-color-surface-secondary, #e3e0d7) 55%, transparent);
+  }
+
+  /* Invalid state keeps native semantics and adds a shape cue. The associated
+     recovery message remains the non-colour explanation of what to fix. */
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):where([aria-invalid="true"], :user-invalid) {
+    border-inline-start-width: 0.3rem;
+    border-inline-start-color: var(--ef-color-status-danger, #8d3027);
+  }
+
   :where(:focus-visible) {
     outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
     outline-offset: 2px;

package/dist/marketing/forma-marketing-theme-echelon.css

@@ -1,4 +1,4 @@
-/*! Forma 0.7.0 | forma-marketing-theme-echelon.css | bundle echelon-marketing
+/*! Forma 0.8.0 | forma-marketing-theme-echelon.css | bundle echelon-marketing
     Echelon Marketing Theme: compiled theme tokens and theme hooks. Load after forma-marketing.css.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 

package/dist/marketing/forma-marketing.css

@@ -1,4 +1,4 @@
-/*! Forma 0.7.0 | forma-marketing.css | bundle echelon-marketing
+/*! Forma 0.8.0 | forma-marketing.css | bundle echelon-marketing
     Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.
     Generated by tools/PresentationBundler. Do not edit; pin by version and sha256. */
 
@@ -735,6 +735,12 @@
     transition-duration: var(--ef-motion-direct-duration, 0ms);
   }
 
+  :where(button, .ef-button):disabled {
+    border-style: dashed;
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
   :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select) {
     box-sizing: border-box;
     min-block-size: 2.75rem;
@@ -790,6 +796,28 @@
     text-align: start;
   }
 
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):disabled {
+    --ef-color-text-secondary: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-color-text-muted: var(--ef-color-text-on-secondary-surface, #3a403c);
+    --ef-surface-accent-text-color: var(--ef-color-text-primary, #171a18);
+    border-style: dashed;
+    background: var(--ef-color-surface-secondary, #e3e0d7);
+    cursor: not-allowed;
+    opacity: 0.62;
+  }
+
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea):read-only:not(:disabled) {
+    border-style: dashed;
+    background: color-mix(in srgb, var(--ef-color-surface-secondary, #e3e0d7) 55%, transparent);
+  }
+
+  /* Invalid state keeps native semantics and adds a shape cue. The associated
+     recovery message remains the non-colour explanation of what to fix. */
+  :where(input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select):where([aria-invalid="true"], :user-invalid) {
+    border-inline-start-width: 0.3rem;
+    border-inline-start-color: var(--ef-color-status-danger, #8d3027);
+  }
+
   :where(:focus-visible) {
     outline: 3px solid var(--ef-color-focus-gap, #f2efe7);
     outline-offset: 2px;

package/dist/marketing/forma-marketing.manifest.json

@@ -1,15 +1,15 @@
 {
   "schemaVersion": 1,
-  "forma": "0.7.0",
+  "forma": "0.8.0",
   "bundle": "echelon-marketing",
   "description": "Forma presentation artifacts for Echelon marketing sites. Every artifact is a single self-contained CSS file with no imports or relative URLs.",
-  "releaseTag": "v0.7.0",
+  "releaseTag": "v0.8.0",
   "artifacts": [
     {
       "file": "forma-marketing.css",
       "description": "Brand-neutral marketing layer: core tokens, role defaults, Forma foundations, marketing foundations, components, and layouts.",
-      "bytes": 81740,
-      "sha256": "171d3cb1485da7a9f83f6bdfc80c8043b0d194a32eadc3e0b5e09b12fade2f80",
+      "bytes": 82968,
+      "sha256": "3089398445d5898cdae9cc0dc2ec4629e8130a1a885291d9ae1bfdf9141dab48",
       "sources": [
         "dist/tokens.css",
         "src/marketing/roles.css",
@@ -23,7 +23,7 @@
       "file": "forma-marketing-theme-echelon.css",
       "description": "Echelon Marketing Theme: compiled theme tokens and theme hooks. Load after forma-marketing.css.",
       "bytes": 6295,
-      "sha256": "027334d7946a3342812dca297967630cb5f5b1e96dd849672c8e146bf257b153",
+      "sha256": "970b7986b609331c1bc12d51173c8e185f48906df5d8b2fcc585c3187be3e9fd",
       "sources": [
         "build/marketing/echelon-marketing.tokens.css",
         "themes/echelon/marketing.css"
@@ -32,8 +32,8 @@
     {
       "file": "forma-echelon-marketing.css",
       "description": "Single-file Echelon marketing presentation: forma-marketing.css followed by the Echelon theme. Most sites load only this file.",
-      "bytes": 87880,
-      "sha256": "2baacb6423cc930e15b1da5cbf39289bed5bd3c721e35ef2e97cb73f48c0c0fc",
+      "bytes": 89108,
+      "sha256": "ee17288af3ae5ba708b8fd1b471835a14ea93da588a39206dcc27db2ee2f98ba",
       "sources": [
         "artifact:forma-marketing.css",
         "artifact:forma-marketing-theme-echelon.css"
@@ -42,8 +42,8 @@
     {
       "file": "forma-all.css",
       "description": "Complete Forma surface (application components, assessment, and marketing layers) for sites that also present Forma application patterns such as data grids or status lozenges.",
-      "bytes": 327293,
-      "sha256": "5aae64c6fa2e8784347b2207fe7324dae2492a5f45f6b134463e243f419b4dec",
+      "bytes": 330018,
+      "sha256": "93cafe35f219e7297b8ad5cd8b3a22ad660e753a2ce247c0709eb75281701cad",
       "sources": [
         "dist/all.css"
       ]