v0.7.0

Release Notes — @kidthales/picotol v0.7.0 (Pre-release)

Ninth public open-source pre-release of @kidthales/picotol. Major breaking API consolidation release completing the v0.6 transition by removing @layer picotol.legacy, deprecated bare semantic selectors, legacy unprefixed class aliases, deprecated status dot primitives/vocabulary aliases, and legacy --marker-pos property reads (#275). Refactors demo presentation to reframe standalone bundle metrics (#273) and refines documentation copy to tone down repetitive brand references (#274).

Note

SemVer 2.0.0 Pre-release: In accordance with SemVer 2.0.0 §4, versions in the 0.y.z range represent initial development releases with evolving APIs. True stable major releases commence at v1.0.0.

---

Highlights

1. Removal of @layer picotol.legacy & Bare Selectors (#275)

• Elimination of Legacy Layer: Completely removed @layer picotol.legacy from all source stylesheets and distribution builds. Cascade layer preamble is now @layer picotol.tokens, picotol.reset, picotol.base, picotol.components, picotol.utilities;.
• Strict Component Classes: Removed deprecated bare semantic element selectors (aside:not(...), [role="alert"], [role="status"]). Semantic banners and indicators now strictly require explicit class primitives (.pt-callout, .pt-badge, .pt-indicator).

2. Removal of Unprefixed Class Aliases (#275)

• Zero Namespace Collisions: Completely removed all legacy unprefixed class aliases (.card, .grid, .flex, .button, .btn, .sheet, .dialog, .primary, .secondary, .contrast, .outline, .small, .sm, .striped, .solid, .swatch, .nowrap, .end, .fill, .show, .sr-only, .visually-hidden, .skip-to-content, .overflow-auto, .table-container, etc.).
• Canonical pt- Prefixing: All public utility, component, and layout classes are now strictly prefixed with pt- (.pt-card, .pt-grid, .pt-btn, etc.), ensuring zero class name collisions when composing with host applications or other CSS frameworks.

3. Canonical Four-State Status Vocabulary & Dot Primitives (#275)

• Status Vocabulary Consolidation: Removed legacy .success/.danger, .pt-status-dot*, .pulse, .pt-callout-success, .pt-callout-danger, .pt-progress-success, .pt-progress-danger, .pt-dot--success, .pt-dot--danger, and bare status classes (.ok, .info, .warning, .critical, .success, .danger, .valid, .invalid).
• Unified Status Model: Statuses are strictly canonical across tokens, attributes, and classes: ok | info | warning | critical, using .pt-dot, .pt-dot--pulse (with @keyframes pt-pulse), .pt-progress-ok, .pt-progress-critical, .pt-callout-ok, and .pt-callout-critical.

4. Removal of Deprecated --marker-pos Fallback (#275)

• Clean Token Surface: Removed the legacy --marker-pos custom property fallback read in src/components.css and purged from DEPRECATED_CUSTOM_PROPERTY_ALLOWLIST in favor of canonical --pt-marker-pos.

5. Standalone Showcase Presentation & Metric Refactoring (#273)

• Self-Contained Value Proposition: Retired upstream comparison percentages and bundle comparison tables in favor of standalone tier metrics and architectural virtues across dist/demo/index.html and tools/generate-demo.mjs.

6. Copy Polish & Clean Documentation Hierarchy (#274)

• Focused Technical Tone: Streamlined documentation copy across README.md, demo pages, and package descriptions, eliminating repetitive brand phrasing while maintaining rigorous attribution.

---

Installation

npm (Public Registry — Zero Config)

npm install @kidthales/picotol@0.7.0

GitHub Packages (Alternative)

Add the @kidthales registry to your .npmrc:

@kidthales:registry=https://npm.pkg.github.com

Then install:

npm install @kidthales/picotol@0.7.0

CDN (Drop-In)

<!-- Core bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.7.0/dist/picotol.core.min.css" integrity="sha384-nGAcEABzYVEdQXVaQ+bi5T48Kn+T0ruJJxoBSnZALyOnAV5w/D1HMCPoNh2CU5W8" crossorigin="anonymous">

<!-- Full bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.7.0/dist/picotol.min.css" integrity="sha384-idbC1E3B+9TK8Mj8UjtRE3CIc6DJn9dlwbo8EyChacdNCkkly+9+mZznntWhDItE" crossorigin="anonymous">

<!-- Layered bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.7.0/dist/picotol.layer.min.css" integrity="sha384-idbC1E3B+9TK8Mj8UjtRE3CIc6DJn9dlwbo8EyChacdNCkkly+9+mZznntWhDItE" crossorigin="anonymous">

Standalone Offline Bundle & Checksums

Download picotol-v0.7.0.zip, manifest.json, and SHA256SUMS.txt directly from GitHub Releases.

---

Attribution & Acknowledgements

• Dr. Paul Tol: Qualitative colour schemes, palette constants, and accessibility principles sourced from SRON Netherlands Institute for Space Research technical note "Colour Schemes" (SRON/EPS/TN/09-002, 3-Clause BSD). See NOTICE for full attribution.
• Lucas Larroche (Lucas Driscoll) / Pico CSS: Semantic HTML selector patterns and class-light design inspiration under the MIT License.

v0.6.0 (Pre-release)

Release Notes — @kidthales/picotol v0.6.0 (Pre-release)

Eighth public open-source pre-release of @kidthales/picotol. Major breaking API consolidation milestone introducing namespaced cascade layers (@layer picotol.*), canonical pt-* class prefixing, four-state status vocabulary (ok | info | warning | critical), opt-in flex column body layout (body.pt-app), and removal of deprecated derived density tokens.

Note

SemVer 2.0.0 Pre-release: In accordance with SemVer 2.0.0 §4, versions in the 0.y.z range represent initial development releases with evolving APIs. True stable major releases commence at v1.0.0.

---

Highlights

1. Namespaced Cascade Layers (@layer picotol.*) (#206, #210)

• Zero Collision Precedence: All internal cascade layers are now namespaced under @layer picotol.legacy, picotol.tokens, picotol.reset, picotol.base, picotol.components, picotol.utilities across all distribution stylesheets (dist/picotol.css, dist/picotol.core.css, dist/picotol.layer.css).
• Seamless Tailwind & Host Coexistence: Namespacing prevents collisions with Tailwind CSS and consumer application layers (base, components, utilities), allowing downstream layers to override semantic defaults cleanly without specificity hacks or !important. See ADR 0001.

2. Quarantined Bare Selectors & Explicit Component Classes (#207, #210)

• picotol.legacy Deprecation Quarantine: Bare aside:not(nav *), [role="alert"], and [role="status"] are quarantined in the lowest-precedence @layer picotol.legacy with @deprecated annotations.
• Explicit Class Contracts: Semantic banner and indicator styling now requires explicit class primitives: .pt-callout, .pt-badge, and .pt-indicator in @layer picotol.components.

3. Four-State Status Vocabulary & .pt-dot Primitive (#208, #210, #227)

• Canonical Four-State Status Model: Unified status vocabulary across tokens, attributes, and classes on ok | info | warning | critical. Deprecated .success/.danger, .pt-status-dot*, and ad-hoc backlog/no-status in favor of canonical [data-status="ok|critical"], .pt-callout-ok/.pt-callout-critical, and .pt-dot--*.
• Tokenized .pt-dot Primitive: Standardized inline status dot affordance with high-contrast borders under forced-colors: active and full WCAG 2.2 SC 1.4.11 boundary contrast.

4. Generic Class Prefixing & --pt-marker-pos Hook (#214, #210)

• Scoped Class Hierarchy: Standardized generic component classes with the pt- prefix (.pt-badge, .pt-callout, .pt-progress, .pt-meter, .pt-dot, .pt-card, .pt-chip) to prevent namespace collisions in host applications.
• Token Hook Renaming: Renamed gauge needle position property hook from --marker-pos to --pt-marker-pos.

5. Opt-In Sticky Footer Flex Column Layout via <body class="pt-app"> (#215, #210)

• Normal Flow Default: Bare <body> elements now preserve standard CSS block layout (margin: 0).
• Application Shell Opt-In: Full-viewport sticky footer flex column layout (min-height: 100dvh; display: flex; flex-direction: column;) requires explicit opt-in via <body class="pt-app">.

6. Derived Density Token Removal (#209, #210)

• Streamlined Design Tokens: Removed deprecated derived :root density aliases (vertical/horizontal element spacing and button padding block) in favor of direct base-token overrides (--pt-form-y, --pt-form-x).
• Late-Bound Fallback Chains: Retained late-bound fallback chains in component declarations for backward compatibility.

7. Migration Guide & Reverse Doc-Lint Enforcement (#205, #227)

• Comprehensive Migration Runbook: Published v0.6 Migration Guide detailing 1:1 before/after syntax transformations, codemods, and deprecation timelines.
• Reverse Doc-Lint CI Guard: Static documentation linter guarantees 100% documentation coverage for all public classes, attributes, and design tokens.

---

Installation

npm (Public Registry — Zero Config)

npm install @kidthales/picotol@0.6.0

GitHub Packages (Alternative)

Add the @kidthales registry to your .npmrc:

@kidthales:registry=https://npm.pkg.github.com

Then install:

npm install @kidthales/picotol@0.6.0

CDN (Drop-In)

<!-- Core bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.6.0/dist/picotol.core.min.css" integrity="sha384-AHsVlTgRqWtbUdeJAJEHivJsbBXnm1EF5FsQeijERFEtTEg4jYKxECvQBPGC12LW" crossorigin="anonymous">

<!-- Full bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.6.0/dist/picotol.min.css" integrity="sha384-nrNLsgH1BLMYZSz54HA5tYuAq0ZcR7/r7ru4t/GltEX794pCjrJA19L9UF4eUJTE" crossorigin="anonymous">

<!-- Layered bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.6.0/dist/picotol.layer.min.css" integrity="sha384-nrNLsgH1BLMYZSz54HA5tYuAq0ZcR7/r7ru4t/GltEX794pCjrJA19L9UF4eUJTE" crossorigin="anonymous">

Standalone Offline Bundle & Checksums

Download picotol-v0.6.0.zip, manifest.json, and SHA256SUMS.txt directly from GitHub Releases.

---

Attribution & Acknowledgements

• Dr. Paul Tol: Qualitative colour schemes, palette constants, and accessibility principles sourced from SRON Netherlands Institute for Space Research technical note "Colour Schemes" (SRON/EPS/TN/09-002, 3-Clause BSD). See NOTICE for full attribution.
• Lucas Larroche (Lucas Driscoll) / Pico CSS: Semantic HTML selector patterns and class-light design inspiration under the MIT License.

@kidthales/picotol v0.5.1 (Pre-release)

Release Notes — @kidthales/picotol v0.5.1 (Pre-release)

Seventh public open-source pre-release of @kidthales/picotol, consolidating 22 quality, accessibility, security, and developer ergonomics audit remediations across tokens, bidirectional (RTL) layout, interactive primitives, workflow pipelines, and domain test suites prior to the breaking v0.6.0 API consolidation.

Note

SemVer 2.0.0 Pre-release: In accordance with SemVer 2.0.0 §4, versions in the 0.y.z range represent initial development releases with evolving APIs. True stable major releases commence at v1.0.0.

---

Highlights

1. High-Contrast Status Callout & Badge Contrast Calibration (#202, #218, #221)

• WCAG 2.2 AA Foreground Standardization: Standardized status callout and badge text to the high-contrast body foreground token (--pt-color), reserving Paul Tol hues exclusively for non-text signals (borders, status dots, and icons via --pt-icon-color).
• Switch Thumb & Forced Colors: Added foreground outline shadow (box-shadow: 0 0 0 1px var(--pt-color)) on the switch thumb ([role="switch"]::before) ensuring $\ge 3:1$ boundary contrast in light and dark modes, backed by explicit fallback borders under forced-colors: active.
• Z-Index Token Hierarchy: Eliminated hardcoded z-index magic numbers in favor of structured tokens (--pt-z-backdrop, --pt-z-tooltip, --pt-z-dropdown, --pt-z-modal, --pt-z-toast, --pt-z-skip-link).

2. Bidirectional (RTL) Layout & CSS Logical Properties (#217)

• Full Logical Property Migration: Transitioned physical layout properties to logical properties (margin-inline, padding-inline, inset-inline-start, inset-inline-end, border-inline) across all component primitives.
• Automated AST Lint Protection: Enforced logical property usage via static AST cascade linting to prevent directional regressions while preserving bundle size under the 40 KB ceiling.

3. Interactive Primitives Accessibility Invariants (#220)

• WCAG 2.1 SC 1.4.13 Hoverable Tooltips: Pure CSS tooltips ([data-tooltip]) feature pointer-events: auto and a centered hover bridge spanning the trigger-to-bubble gap, preventing premature dismissal when moving pointers into the tooltip content.
• Toast Accessibility & Hidden State: Toast activation standardized on .show (visibility: visible; transition-delay: 0s;), safely hiding inactive toasts from the accessibility tree and keyboard navigation via delayed visibility: hidden.

4. Palette Data Typing & Monotonic Lightness (#219)

• Comprehensive Scheme Kinds: Declared TolSchemeKind ('qualitative' | 'diverging' | 'sequential'), TolSchemeId, and backward-compatible aliases in @kidthales/picotol/palette-data.
• SRON/EPS/TN/09-002 Documentation: Clarified Paul Tol color scheme mixing guidelines and documented the WCAG 2.2 AA monotonic lightness progression justifying cross-scheme accent ladder composition in README.md.

5. Deterministic Builds & Standalone Asset Distribution (#197, #211)

• Reproducible ZIP Archives: Asset packaging incorporates SOURCE_DATE_EPOCH with automatic fallback to latest git commit timestamps for bit-for-bit reproducible offline archives (dist/assets/picotol-v0.5.1.zip).
• Complete Release Assets: Shipped raw unminified stylesheets (dist/picotol.css, dist/picotol.core.css, dist/picotol.layer.css) alongside minified bundles and bundled LICENSE and NOTICE in release distributions.

6. CI/CD Hardening, Security Remediations & Domain Test Suite (#198, #199, #204, #212, #213, #222, #223, #224, #225, #226, #253)

• Zizmor Security Remediations: Remediated GitHub Actions code scanning alerts, mitigating runner cache-poisoning risks, configuring Dependabot cooldowns, and scoping permissions (#253).
• Workflow Integrity & Hygiene: Added tag-version validation gates, eliminated step injection vulnerabilities, deduplicated notification hooks, and SHA-pinned third-party actions (#198, #212).
• Domain-Partitioned Test Suite: Decomposed monolithic test suite into specialized domains (tokens, components, a11y, packaging, tools) with shared fixtures and version-agnostic assertions (#223, #224).
• Governance & Doc Linting: Rewrote SECURITY.md and CONTRIBUTING.md, validated documentation CDN URLs with SRI digests, and enforced zero phantom token references (#199, #225, #226).

---

Installation

npm (Public Registry — Zero Config)

npm install @kidthales/picotol@0.5.1

GitHub Packages (Alternative)

Add the @kidthales registry to your .npmrc:

@kidthales:registry=https://npm.pkg.github.com

Then install:

npm install @kidthales/picotol@0.5.1

CDN (Drop-In)

<!-- Core bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.5.1/dist/picotol.core.min.css" integrity="sha384-aYq3LTMij2LHPuc5rTo1uttmCXnIvOIVTXInMOQEJ483jJhXZKNuv7INYsOC+PTT" crossorigin="anonymous">

<!-- Full bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.5.1/dist/picotol.min.css" integrity="sha384-o4vcyaGHZHbXWpVzVTkf+qHpxjUr9OYQBNsh4oeqfMr9Ua8dbn5ruX3ZfYkoQUXc" crossorigin="anonymous">

<!-- Layered bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.5.1/dist/picotol.layer.min.css" integrity="sha384-y7KIhSrvSGKobcL6UNQ9GoNQRnVyD0k7s5l3Ud6Zb/ycUj/I4nHI16Ox4n8G+N0E" crossorigin="anonymous">

Standalone Offline Bundle & Checksums

Download picotol-v0.5.1.zip, manifest.json, and SHA256SUMS.txt directly from GitHub Releases.

---

Attribution & Acknowledgements

• Dr. Paul Tol: Qualitative colour schemes, palette constants, and accessibility principles sourced from SRON Netherlands Institute for Space Research technical note "Colour Schemes" (SRON/EPS/TN/09-002, 3-Clause BSD). See NOTICE for full attribution.
• Lucas Larroche (Lucas Driscoll) / Pico CSS: Semantic HTML selector patterns and class-light design inspiration under the MIT License.

v0.5.0: Dashboard Ergonomics, Floating Popovers, Status Dots & Meter Containment

Release Notes — @kidthales/picotol v0.5.0 (Pre-release)

Sixth public open-source pre-release of @kidthales/picotol, introducing native floating popover primitives, tokenized status dots, clamped meter boundary marker pins, tabular numeric badges, compact density margin auto-collapsing in flex and grid layouts, and single-source-of-truth CI verification.

Note

SemVer 2.0.0 Pre-release: In accordance with SemVer 2.0.0 §4, versions in the 0.y.z range represent initial development releases with evolving APIs. True stable major releases commence at v1.0.0.

---

Highlights

1. Native Zero-JS Floating Popovers (<details class="pt-popover">) (#175)

• Accessible HTML5 Popover Primitive: Native <details class="pt-popover"> and <summary> trigger styling with .pt-popover__surface, delivering accessible floating menus with zero runtime JavaScript.
• Directional & Alignment Modifiers: Supports .pt-popover--align-end, .pt-popover--align-center, and .pt-popover--top for robust positioning across tight IDE auxiliary panes and wide viewports.
• Elevation & Theme Adaptation: Tokenized elevation shadows (--pt-popover-shadow), subtle borders, and seamless light/dark mode adaptation.

2. Tokenized Status Dot Primitives (.pt-dot) (#173)

• Micro-Scale Status Primitive: Standalone pure-CSS status indicator dots (.pt-dot, .pt-dot--sm) with 8px and 6px tokenized dimensions.
• Paul Tol Semantic States: Bound directly to calibrated semantic color tokens (.pt-dot--ok, .pt-dot--warning, .pt-dot--critical, .pt-dot--info).
• Pulse Animation & High Contrast: Optional .pt-dot--pulse modifier for streaming alerts and live feeds, with full Windows High Contrast Mode (forced-colors: active) support.

3. Meter Boundary Marker Pin Clamping & Anatomy Disambiguation (#172, #183)

• Pin Clamping Invariants: Clamps threshold marker pins to track border-radius via --pin-left and --pin-right calculations, preventing visual corner overhang at 0% and 100% track boundaries.
• Terminus v1 Nested Compatibility: Disambiguates .pt-meter anatomy to support both direct child markers (.pt-meter > .pt-meter__marker) and track-nested structures (.pt-meter__track > .pt-meter__marker) without regression.

4. Tabular Numerics Badges & Right-Alignment Utilities (#174, #190)

• Jitter-Free Streaming Metrics: .pt-badge--numeric activates font-variant-numeric: tabular-nums lining-nums with minimum width stability to prevent layout shifts during high-frequency telemetry updates.
• Showcase Alignment: Refined flex-gap spacing in badge/dot pairing rows and integrated the .pt-tabular--align-end utility class.

5. Compact Density Margin Auto-Collapsing (#176)

• Container Margin Resets: Cascades [data-density="compact"], [data-density="tight"], and .pt-compact into block margins of child <section>, <article>, and <hr> elements inside flex and grid containers.
• Dense Dashboard Ergonomics: Eliminates redundant whitespace voids and vertical gaps across multi-column dashboard cards and observability consoles.

6. Single-Source-of-Truth CI Pipeline & Theme Polish (#185, #188)

• Canonical CI Runner: Standardized local and remote validation onto scripts/ci-local.ps1 -CI, covering AST validation, agent leak checks, distribution sync, and package verification.
• Selection Contrast & Clearance: Calibrated dark mode selection contrast ratios and adjusted Section 7 demo meter clearances to prevent text overlap.

---

Installation

npm (Public Registry — Zero Config)

npm install @kidthales/picotol@0.5.0

GitHub Packages (Alternative)

Add the @kidthales registry to your .npmrc:

@kidthales:registry=https://npm.pkg.github.com

Then install:

npm install @kidthales/picotol@0.5.0

CDN (Drop-In)

<!-- Core bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.5.0/dist/picotol.core.min.css">

<!-- Full bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.5.0/dist/picotol.min.css">

<!-- Layered bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.5.0/dist/picotol.layer.min.css">

Standalone Offline Bundle & Checksums

Download picotol-v0.5.0.zip, manifest.json, and SHA256SUMS.txt directly from GitHub Releases.

---

Attribution & Acknowledgements

• Dr. Paul Tol: Qualitative colour schemes, palette constants, and accessibility principles sourced from SRON Netherlands Institute for Space Research technical note "Colour Schemes" (SRON/EPS/TN/09-002, 3-Clause BSD). See NOTICE for full attribution.
• Lucas Larroche (Lucas Driscoll) / Pico CSS: Semantic HTML selector patterns and class-light design inspiration under the MIT License.

v0.4.1 — Bundle Size & Compression Budget Enforcement (Pre-release)

Release Notes — @kidthales/picotol v0.4.1 (Pre-release)

Fifth public open-source pre-release of @kidthales/picotol, introducing an automated bundle size and compression budget auditor across all 6 CSS distribution bundles, synchronized README documentation and badge boundaries, and 5-gate CI parity across GitHub Actions and local verification.

Note

SemVer 2.0.0 Pre-release: In accordance with SemVer 2.0.0 §4, versions in the 0.y.z range represent initial development releases with evolving APIs. True stable major releases commence at v1.0.0.

---

Highlights

1. Automated Bundle Size & Compression Budget Enforcement (tools/check-budgets.mjs) (#167)

• Zero-Dependency Compression Auditor: Introduced tools/check-budgets.mjs using native node:zlib (gzipSync level 9, brotliCompressSync quality 11) to compute raw, minified, gzip, and brotli byte lengths across all 6 CSS distribution bundles (picotol.core.css, picotol.core.min.css, picotol.css, picotol.min.css, picotol.layer.css, picotol.layer.min.css).
• Hard CI Budget Ceilings: Enforces deterministic ceilings (picotol.core.min.css $\le 14.0\text{ KB}$ minified / $\le 4.5\text{ KB}$ gzip; picotol.min.css and picotol.layer.min.css $\le 38.0\text{ KB}$ minified / $\le 9.0\text{ KB}$ gzip) and fails immediately on any budget breach.
• Step Summary Telemetry: Automatically emits a formatted Markdown telemetry table to $GITHUB_STEP_SUMMARY in GitHub Actions workflows alongside console output.

2. Documentation & Badge Synchronization (#167)

• Badge & Tier Alignment: Updated README.md bundle size badge (<= 38 KB min | <= 9 KB gzip) and Two-Tier Bundle Architecture documentation to match enforced automated budget ceilings.
• Documentation Drift Guard: tools/check-budgets.mjs inspects README.md directly during every test and CI run to guarantee documented size claims remain synchronized with enforced thresholds.

3. Five-Gate Local & Remote CI Parity (#167)

• Dedicated Budget Gate: Added npm run check:budgets to package.json, .github/workflows/ci.yml, and Gate 5 of scripts/ci-local.ps1, maintaining 1:1 parity between local pre-push verification and remote GitHub Actions pipelines.

---

Installation

npm (Public Registry — Zero Config)

npm install @kidthales/picotol@0.4.1

GitHub Packages (Alternative)

Add the @kidthales registry to your .npmrc:

@kidthales:registry=https://npm.pkg.github.com

Then install:

npm install @kidthales/picotol@0.4.1

CDN (Drop-In)

<!-- Core bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.4.1/dist/picotol.core.min.css">

<!-- Full bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.4.1/dist/picotol.min.css">

<!-- Layered bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.4.1/dist/picotol.layer.min.css">

Standalone Offline Bundle & Checksums

Download picotol-v0.4.1.zip, manifest.json, and SHA256SUMS.txt directly from GitHub Releases.

---

Attribution & Acknowledgements

• Dr. Paul Tol: Qualitative colour schemes, palette constants, and accessibility principles sourced from SRON Netherlands Institute for Space Research technical note "Colour Schemes" (SRON/EPS/TN/09-002, 3-Clause BSD). See NOTICE for full attribution.
• Lucas Larroche (Lucas Driscoll) / Pico CSS: Semantic HTML selector patterns and class-light design inspiration under the MIT License.

@kidthales/picotol v0.4.0 (Pre-release)

Release Notes — @kidthales/picotol v0.4.0 (Pre-release)

Fourth public open-source pre-release of @kidthales/picotol, incorporating configurable typography accessibility floors, nested cascade layer taxonomy, edge-aligned meter markers, tabular numerics for status telemetry, WCAG 2.2 AAA light-mode contrast guarantees, and block formatting context for equal-fill segmented items.

Note

SemVer 2.0.0 Pre-release: In accordance with SemVer 2.0.0 §4, versions in the 0.y.z range represent initial development releases with evolving APIs. True stable major releases commence at v1.0.0.

---

Highlights

1. Configurable Typography Accessibility Floor (--pt-font-size-floor) (#152)

• Readability Protection: Enforces an explicit typography floor token (--pt-font-size-floor: 12px;) within @layer tokens.
• Accessibility Clamping: --pt-font-size-xs is clamped via max(var(--pt-font-size-floor, 12px), 0.75rem), guaranteeing micro-scale UI elements (.pt-indicator, .pt-badge, [data-density="tight"], .pt-tight) never compute below 12px even when the host document root font size scales down below 16px.
• Consumer Scoping: Host applications can override --pt-font-size-floor globally on :root or locally within specific auxiliary panels.

2. Nested @layer Taxonomy (@layer picotol.*) (#153)

• Hierarchical Sublayers: dist/picotol.layer.css explicitly declares and exports its 5-tier nested sublayer hierarchy upfront:

  @layer picotol.tokens, picotol.reset, picotol.base, picotol.components, picotol.utilities;

• Granular Downstream Hooking: Downstream applications can inject custom rules directly into sublayers (e.g. @layer picotol.tokens, @layer picotol.components) or interleave host application layers without battling specificity or resorting to !important.

3. Edge-Aligned Meter Markers (--start / --end) (#154)

• Boundary-Aligned Modifiers: Introduced .pt-meter-mark--start (data-align="start") and .pt-meter-mark--end (data-align="end").
• Clipping Resilience: Markers positioned at track extremes (0% and 100%) apply transform: translateX(0) and transform: translateX(-100%) respectively, eliminating text clipping against parent overflow containers while maintaining pin indicator alignment.

4. Tabular Numerics for Streaming Telemetry & Badges (#155)

• Jitter-Free Counters: Dynamic status badges (.pt-badge) and status indicators (.pt-indicator) apply font-variant-numeric: tabular-nums by default.
• Explicit Modifiers: Supported explicit modifier parity via .pt-badge--numeric, .pt-indicator--numeric, and the standalone .pt-tabular utility class, preventing dynamic layout shifts during high-frequency telemetry updates (token rates, latency timers, turn counters).

5. WCAG 2.2 AAA Contrast Verification for Light-Mode Status Triads (#156)

• Elevated Contrast Standard: Light-mode semantic status triads (--pt-status-ok-*, --pt-status-warning-*, --pt-status-critical-*, --pt-status-info-*) calibrated against WCAG 2.2 AAA contrast standards ($\ge 7:1$ for normal text) on primary background surfaces.
• Greyscale Luminance Separation: Verified distinct perceptual luminance steps across status triads in greyscale conversions for robust color-blind accessibility.

6. Block Formatting Context for Equal-Fill Segmented Controls (#163)

• Ellipsis Restoration: Applied min-width: 0 alongside flex: 1 1 0 on equal-fill segmented items (.segmented-control--fill > .segmented-item, .segmented-fill > *).
• Narrow-Corridor Containment: Eliminates horizontal overflow in tight IDE auxiliary panes ($\le 360\text{px}$), ensuring single-line labels truncate cleanly with CSS ellipsis (text-overflow: ellipsis).

---

Installation

npm (Public Registry — Zero Config)

npm install @kidthales/picotol@0.4.0

GitHub Packages (Alternative)

Add the @kidthales registry to your .npmrc:

@kidthales:registry=https://npm.pkg.github.com

Then install:

npm install @kidthales/picotol@0.4.0

CDN (Drop-In)

<!-- Core bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.4.0/dist/picotol.core.min.css">

<!-- Full bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.4.0/dist/picotol.min.css">

<!-- Layered bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.4.0/dist/picotol.layer.min.css">

Standalone Offline Bundle & Checksums

Download picotol-v0.4.0.zip, manifest.json, and SHA256SUMS.txt directly from GitHub Releases.

---

Attribution & Acknowledgements

• Dr. Paul Tol: Qualitative colour schemes, palette constants, and accessibility principles sourced from SRON Netherlands Institute for Space Research technical note "Colour Schemes" (SRON/EPS/TN/09-002, 3-Clause BSD). See NOTICE for full attribution.
• Lucas Larroche (Lucas Driscoll) / Pico CSS: Semantic HTML selector patterns and class-light design inspiration under the MIT License.

@kidthales/picotol v0.3.0 (Pre-release)

Release Notes — @kidthales/picotol v0.3.0 (Pre-release)

Third public open-source pre-release of @kidthales/picotol, incorporating advanced developer ergonomics, component stacking context guarantees, native status badge primitives, and ultra-compact UI density.

Note

SemVer 2.0.0 Pre-release: In accordance with SemVer 2.0.0 §4, versions in the 0.y.z range represent initial development releases with evolving APIs. True stable major releases commence at v1.0.0.

---

Highlights

1. Tokenized Meter Z-Index Stacking Layers (#138)

• Deterministic Stacking Context: Introduced tokenized z-index custom properties for all meter sub-primitives (--pt-meter-z-track: 1;, --pt-meter-z-range: 2;, --pt-meter-z-fill: 3;, --pt-meter-z-marker: 4;, --pt-meter-z-label: 5;, --pt-meter-z-pin: 6;).
• Zero-Clipping Overlays: Guarantees gauge pins, threshold markers, and range band labels render in front of filled tracks without accidental element occlusion or z-index wars in complex embedded dashboards.

2. Native Status Badges & Indicator Primitives (#139)

• Status Badges (.pt-badge): High-contrast, pill-shaped badge primitives with integrated border and background styling natively bound to Paul Tol semantic status triads (--pt-status-*-{fg,bg,border}) across ok, warning, critical, info, and neutral.
• Status Indicators (.pt-indicator): Compact, inline-flex status tags designed for operational monitoring, node health, and service telemetry.
• Accessibility & Contrast: Built-in :focus-visible focus rings, high-contrast outlines for Windows Forced Colors mode (@media (forced-colors: active)), and WCAG 2.2 AA non-text ($\ge 3:1$) and text ($\ge 4.5:1$) contrast compliance in both light and dark themes.

3. Structured Machine-Readable Release Manifest (dist/manifest.json) (#140)

• Release Verification Schema: Release builds automatically emit dist/manifest.json conforming to https://schema.kidthales.com/picotol/manifest/v1.json.
• Automated Vendoring: Provides downstream CI pipelines and build scripts with machine-readable file names, SHA-256 hashes, and byte sizes across all 6 compiled CSS distribution bundles.

4. Downstream CSS @layer Cascade Ordering Guide (#141)

• Cascade Isolation: Documented the canonical @layer reset, picotol, theme, app; cascade declaration pattern in README.
• Specificity Freedom: Allows downstream host applications and component libraries to override picotol rules cleanly without resorting to specificity hacks (!important) or selector duplication.

5. Ultra-Compact Density Modifier ([data-density="tight"]) (#142)

• Micro-Dashboards & IDE Corridors: Introduced [data-density="tight"] and .pt-tight density modifier alongside compact.
• Space Optimization: Applies a 50% tighter vertical padding on form controls (0.25rem), compact buttons (0.25rem 0.5rem), condensed table cell spacing (0.25rem 0.5rem), and tight grid/flex container gaps (--pt-gap-tight: 0.375rem), while strictly preserving mobile reflow at 320px CSS width.

---

Installation

npm (Public Registry — Zero Config)

npm install @kidthales/picotol@0.3.0

GitHub Packages (Alternative)

Add the @kidthales registry to your .npmrc:

@kidthales:registry=https://npm.pkg.github.com

Then install:

npm install @kidthales/picotol@0.3.0

CDN (Drop-In)

<!-- Core bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.3.0/dist/picotol.core.min.css">

<!-- Full bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.3.0/dist/picotol.min.css">

<!-- Layered bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.3.0/dist/picotol.layer.min.css">

Standalone Offline Bundle & Checksums

Download picotol-v0.3.0.zip, manifest.json, and SHA256SUMS.txt directly from GitHub Releases.

---

Attribution & Acknowledgements

• Dr. Paul Tol: Qualitative colour schemes, palette constants, and accessibility principles sourced from SRON Netherlands Institute for Space Research technical note "Colour Schemes" (SRON/EPS/TN/09-002, 3-Clause BSD). See NOTICE for full attribution.
• Lucas Larroche (Lucas Driscoll) / Pico CSS: Semantic HTML selector patterns and class-light design inspiration under the MIT License.

@kidthales/picotol v0.2.0 (Pre-release)

Release Notes — @kidthales/picotol v0.2.0 (Pre-release)

Second public open-source pre-release of @kidthales/picotol, incorporating production dogfooding feedback from downstream integrations (e.g. Terminus HTTP UI in kidthales/foundation).

Note

SemVer 2.0.0 Pre-release: In accordance with SemVer 2.0.0 §4, versions in the 0.y.z range represent initial development releases with evolving APIs. True stable major releases commence at v1.0.0.

---

Highlights

1. Card Flex-Column Layout & Auto-Docking Footers (#128)

• Zero-Void Stretched Cards: Cards (article, .card) now use display: flex; flex-direction: column; with height: 100% when nested inside CSS Grid or Flex containers (.grid, .flex).
• Auto-Docked Footers: Nested <footer> elements apply margin-block-start: auto; alongside negative block-end margins (calc(-1 * var(--pt-card-padding))), ensuring footers dock cleanly at the bottom edge across uneven multi-column grid tracks.
• Vertical Body Fill: Added native support for <main>, .card-body, .body, and [data-card-body] children within cards to expand vertically (flex: 1 1 auto; min-width: 0;), eliminating stranded footers and awkward white-space voids.

2. Meter Pin Labels & Multi-Marker Range Bands (#124)

• Canonical Marker Placement: Standardized pin orientation via data-placement="top|bottom" on .pt-gauge-marker and .pt-meter-pin (retaining .top and .bottom utility classes for backwards compatibility).
• Aligned Pin Labels: Introduced .pt-meter-label and [data-label] child elements automatically aligned to --pt-marker-pos without requiring bespoke consumer positioning CSS.
• Declarative Range Bands: Added .pt-meter-range component primitive supporting shaded threshold ranges configured declaratively via --pt-range-start, --pt-range-end, and --pt-range-color with semantic variants (ok, warning, critical).

3. Cascading Compact Density (#125)

• Beyond Block Margins: Extended [data-density="compact"] (and .pt-compact) beyond block margins into interactive components and layout structures.
• Form Controls & Tables: Compact mode reduces vertical and horizontal padding on input, select, textarea, and buttons via --pt-form-element-spacing-vertical, --pt-form-element-spacing-horizontal, and --pt-btn-padding-block, and tightens table cell padding (th, td).
• Pills, Chips & Gaps: Compact density cascades into .pt-copy-pill, .pt-chip, segmented button controls, and grid/flex container gaps (--pt-gap-compact), preserving full 320px mobile reflow.

4. Calibrated Semantic Status Tokens & Dark Mode Contrast (#126)

• High-Level Semantic Triads: Introduced standardized background, foreground, and border CSS custom property triads for light and dark themes:
  • --pt-status-ok-bg, --pt-status-ok-fg, --pt-status-ok-border (Paul Tol green #228833 / #44AA99)
  • --pt-status-warning-bg, --pt-status-warning-fg, --pt-status-warning-border (Calibrated Paul Tol yellow #DDAA33 / #EE8866)
  • --pt-status-critical-bg, --pt-status-critical-fg, --pt-status-critical-border (Paul Tol red #EE6677 / #CC3311)
  • --pt-status-info-bg, --pt-status-info-fg, --pt-status-info-border (Paul Tol cyan #66CCEE / Tol blue #4477AA)
  • --pt-status-neutral-bg, --pt-status-neutral-fg, --pt-status-neutral-border (Paul Tol grey #BBBBBB / #777777)
• Dark Mode Contrast Calibration: Specifically re-calibrated warning/yellow tokens against dark theme surfaces ([data-theme="dark"]), guaranteeing WCAG 2.2 AA non-text contrast ($\ge 3:1$) and text contrast ($\ge 4.5:1$).
• Component Integration: Wired semantic status triads into .pt-status-dot, .status-dot, .pt-callout, and gauge marker primitives.

5. Developer Experience: Standalone Release Checksums (#127)

• Cryptographic Checksum Manifest: Added automated generation and release attachment of dist/SHA256SUMS.txt, providing deterministic verification for downstream scripts and automated vendoring.
• Downstream Vendoring Workflows: Documented official bash and PowerShell recipes for vendoring and verifying @kidthales/picotol builds.

---

Installation

npm (Public Registry — Zero Config)

npm install @kidthales/picotol@0.2.0

GitHub Packages (Alternative)

Add the @kidthales registry to your .npmrc:

@kidthales:registry=https://npm.pkg.github.com

Then install:

npm install @kidthales/picotol@0.2.0

CDN (Drop-In)

<!-- Core bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.2.0/dist/picotol.core.min.css">

<!-- Full bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.2.0/dist/picotol.min.css">

<!-- Layered bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.2.0/dist/picotol.layer.min.css">

Standalone Offline Bundle & Checksums

Download picotol-v0.2.0.zip and SHA256SUMS.txt directly from GitHub Releases.

---

Attribution & Acknowledgements

• Dr. Paul Tol: Qualitative colour schemes, palette constants, and accessibility principles sourced from SRON Netherlands Institute for Space Research technical note "Colour Schemes" (SRON/EPS/TN/09-002, 3-Clause BSD). See NOTICE for full attribution.
• Lucas Larroche (Lucas Driscoll) / Pico CSS: Semantic HTML selector patterns and class-light design inspiration under the MIT License.

v0.1.0 (Pre-release)

Release Notes — @kidthales/picotol v0.1.0 (Pre-release)

Initial public open-source pre-release of @kidthales/picotol.

Note

SemVer 2.0.0 Pre-release: In accordance with SemVer 2.0.0 §4, versions in the 0.y.z range represent initial development releases with evolving APIs. True stable major releases commence at v1.0.0.

---

Highlights

100% Pure Modern CSS & 7-Layer Cascade Architecture

• Cascade Layer Isolation: Built entirely on native CSS @layer tokens, base, layout, content, forms, nav, components; ensuring consistent cascade priority.
• Opt-in Host Encapsulation: Ships dist/picotol.layer.min.css wrapping the full framework in @layer picotol { ... } so consumer design systems can override styles without specificity wars.
• Zero Preprocessors: Written in modern native CSS with CSS Nesting, light-dark(), and color-mix(). Zero Sass/SCSS build dependencies.
• Namespace Purity: All framework tokens reside under --pt-* with raw Paul Tol colour constants under --tol-*.

100% Canonical Paul Tol Palette Purity

• Empirical Scientific Colours: Every hex code is drawn directly from Dr. Paul Tol's qualitative colour schemes (bright, vibrant, high-contrast, medium-contrast, muted, light, dark, pale). Zero synthetic RGB/HSL color ramps or invented hex values.
• Perceptual Lightness Ladder: Interactive states step across Paul Tol's calibrated schemes:
  $$\text{pale} \longrightarrow \text{light} \longrightarrow \text{medium-contrast} \longrightarrow \text{bright} \longrightarrow \text{dark} \longrightarrow \text{high-contrast}$$
• Runtime Theme & Accent Switching: Supports [data-theme="light|dark"] and 6 qualitative accent ladders (blue, cyan, green, yellow, red, purple) via [data-accent] on a single stylesheet.

Ultra-Minified Distribution Tiers & Subresource Integrity

• dist/picotol.core.min.css ($\le 12.0\text{ KB}$ minified, $\sim 4.0\text{ KB}$ gzip): Lightweight core bundle containing semantic HTML landmarks (body > header, main, footer), .container, .grid (min-width: 0), fluid typography, tables, code blocks, native forms, and configurable nav.
• dist/picotol.min.css ($\le 32.0\text{ KB}$ minified, $\sim 7.7\text{ KB}$ gzip): Full framework bundle adding <article> cards, <details> accordions & dropdowns, <dialog> modals and drawer sheets, .status-dot, .pt-callout banners, .pt-copy-pill & .pt-chip, segmented controls, square icon buttons, meters, progress bars, gauge pins, and tooltips.
• dist/picotol.layer.min.css ($\le 32.0\text{ KB}$ minified, $\sim 7.7\text{ KB}$ gzip): Full framework wrapped in @layer picotol { ... } for host application integration.
• SHA-384 Subresource Integrity: Bundled and AST-minified using LightningCSS with strict SHA-384 hashes documented in dist/sri.json.

WCAG 2.2 AA / AAA Accessibility & Mobile Reflow

• Universal High-Contrast Focus: 2px solid high-contrast outline (outline-offset: 2px) surviving Windows High Contrast Mode (@media (forced-colors: active)).
• Non-Color Validation: Form fields with aria-invalid="true" or aria-invalid="false" display 2px borders and automated ✓ / ✗ prefix cues on subsequent <small> helpers.
• Target Size Compliance: All interactive controls satisfy WCAG 2.2 SC 2.5.8 ($\ge 24\times24\text{px}$).
• Reflow at 320px: Complete elimination of horizontal scrolling at 320 CSS pixels width (WCAG 2.2 SC 1.4.10 Reflow).
• Screen Reader UX: Bundled .skip-to-content, .sr-only, .visually-hidden, .sr-only-focusable, and .visually-hidden-focusable utility classes.

Interactive Component Primitives

• Slide-Over Drawer Sheet: Native <dialog class="sheet"> with [data-placement="left|right|top|bottom"], smooth hardware-accelerated transforms, and backdrop blur.
• Paul Tol Status Dots: Accessible .status-dot and .pt-status-dot indicators with semantic status mapping (online, offline, away, busy, unknown), forced-colors preservation, and SC 1.4.11 contrast.
• Segmented Controls & Icon Buttons: Equal-fill segmented button groups (.segmented-fill) and square icon button primitives (.btn-icon).
• Gauges & Meters: Cross-engine <meter> and <progress> styling with gauge pin threshold markers.

Multi-Ecosystem Distribution & Packaging

• npm Public Registry: Published under @kidthales/picotol with provenance and public access.
• GitHub Packages: Dual-published to npm.pkg.github.com/@kidthales.
• Standalone Offline Bundles: Automated release packaging producing dist/assets/picotol-v0.1.0.zip containing all CSS bundles, tokens, palettes, SRI hashes, and showcase HTML.
• First-Class TypeScript Support: Ambient declarations in types/index.d.ts covering CSS bundles, tokens, palettes, and qualitative JSON data with typed subpaths in package.json.
• Live Documentation Showcase: Deployed to picotol.kidthales.com with interactive theme and accent switches, live code snippets, and accessibility verification.

Open-Source Governance & Local Quality CI

• Community Standards: Contributor Covenant v2.1 (CODE_OF_CONDUCT.md), CONTRIBUTING.md, SECURITY.md, and structured issue templates.
• Citation Metadata: Machine-readable CITATION.cff (v1.2.0) with formal academic attribution for Dr. Paul Tol and Pico CSS.
• 1:1 Local CI Runner: Deterministic scripts/ci-local.ps1 runner validating 4 local quality gates (leak audit, AST/linting, automated test runner, and distribution drift check).

---

Installation

npm (Public Registry — Zero Config)

npm install @kidthales/picotol

GitHub Packages (Alternative)

Add the @kidthales registry to your .npmrc:

@kidthales:registry=https://npm.pkg.github.com

Then install:

npm install @kidthales/picotol

CDN (Drop-In)

<!-- Core bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.1.0/dist/picotol.core.min.css">

<!-- Full bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.1.0/dist/picotol.min.css">

<!-- Layered bundle -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kidthales/picotol@0.1.0/dist/picotol.layer.min.css">

Standalone Offline Bundle

Download picotol-v0.1.0.zip directly from GitHub Releases.

---

Attribution & Acknowledgements

• Dr. Paul Tol: Qualitative colour schemes, palette constants, and accessibility principles sourced from SRON Netherlands Institute for Space Research technical note "Colour Schemes" (SRON/EPS/TN/09-002, 3-Clause BSD). See NOTICE for full attribution.
• Lucas Driscoll / Lucas Larroche: Semantic HTML architecture and class-light inspiration from Pico CSS (v2.1.1, MIT).