Phase 5 - TypeScript 7 Compatibility

Contract change type: additive

Changed

• Widened the typescript peer dependency range to add TypeScript 7 support: ^5.9 || ^6.0 → ^5.0 || ^6.0 || ^7.0.
• Kept ESLint/typescript-eslint tooling on the TypeScript 6 compatibility alias while exposing TypeScript 7 native compiler coverage through the @typescript/native development alias.
• Synchronized current token and development tooling dependencies.

Validation

• Full npm run check release gate passed.
• 23 test files and 363 tests passed.
• Latest published @phcdevworks/spectre-tokens@3.5.0 contract verified.
• Package dry run produced the expected @phcdevworks/spectre-ui@2.10.0 artifact.

Phase 5 P0 - Nav Alignment and Readability Polish

Contract change type: semantic change

Added

• Nav alignment option: added align (start, center, or end) to getNavClasses(), with matching token-free structural CSS classes and the exported NavAlign type for downstream adapters.

Changed

• Nav link readability and spacing: increased nav link weight using the existing medium typography token and added token-backed inline-start spacing between nav identity content and its links.

Validation

• Full npm run check release gate passed.
• 23 test files and 363 tests passed.
• Package dry run produced the expected @phcdevworks/spectre-ui@2.9.0 artifact.

Phase 5 P0 - Collapsible Sidebar Groups and Toggle Hardening

Contract change type: additive

Added

• Collapsible sidebar group helpers: added getSidebarGroupClasses() and
  getSidebarGroupSummaryClasses() with matching token-backed CSS for native
  details/summary navigation groups, including hover, focus-visible, open
  icon rotation, separators, and content spacing.
• Complete sidebar toggle styling: .sp-sidebar-toggle now supplies its
  token-backed layout, spacing, color, hover, and focus-visible treatment while
  adapters continue to own markup and interaction behavior.

Fixed

• Sidebar drawer stacking: corrected the sidebar and backdrop z-index token
  assignments so the open drawer renders above its backdrop while the toggle
  remains available above both layers.

Changed

• Development dependency maintenance: updated the TypeScript ESLint
  packages to 8.64.0 and PostCSS to 8.5.19 with synchronized lockfile metadata.
• CSS contract budget: raised the components.css regression ceiling from
  121,000 to 124,000 bytes for the intentional sidebar group and toggle styles.

Phase 5 P0 - Sidebar Basis Mobile Layout Fix

Contract change type: additive

Fixed

• Sidebar basis no longer reserves mobile layout width: changed .sp-stack--basis-sidebar to use a zero basis and width below the published breakpoints.md value, then restore --sp-layout-sidebar-width at min-width: 768px. This keeps the off-canvas sidebar from consuming flex layout space on small screens while preserving the existing docked desktop layout and recipe API.

Changed

• Documentation and tooling maintenance: documented the complete Select/Textarea state recipe surface, refreshed the package description and roadmap status, moved the declared package manager to npm 12.0.1, and updated development dependencies and their lockfile resolutions.

Phase 5 P0 - Sidebar Toggle Desktop Visibility Fix

Contract change type: additive

Fixed

• Sidebar toggle button no longer stays visible on desktop: the
  @media (min-width: 768px) block in components.css reset .sp-sidebar
  and .sp-sidebar-backdrop for the docked layout but never hid
  .sp-sidebar-toggle, so the off-canvas hamburger button rendered on top
  of the docked sidebar at all viewport widths. Added
  .sp-sidebar-toggle { display: none; } to the same media query.

Phase 5 P0 - Select and Textarea State Parity

Contract change type: additive

Added

• Select/Textarea size and shape options: getSelectClasses and
  getTextareaClasses gained size (sm md lg), fullWidth, and
  pill options, matching getInputClasses's structural option shape.
  Resolves the Phase 5 P0 downstream ask from spectre-components for
  partial option parity.
• Select/Textarea invalid/success/loading states: getSelectClasses
  and getTextareaClasses gained a state option (default | invalid |
  success) and a loading flag, completing the Phase 5 P0 option-parity
  ask. Bumped the declared @phcdevworks/spectre-tokens dependency to
  ^3.3.1, which fixed a CSS-generation bug that had silently dropped the
  component.select/component.textarea borderInvalid/bgInvalid/
  borderSuccess/bgSuccess token variables from 3.3.0's published CSS.
  loading stays structural-only (opacity/pointer-events via
  .sp-select--loading/.sp-textarea--loading), matching
  getInputClasses's existing sp-input--loading precedent - no new color
  token needed. spectre-components's sp-select/sp-textarea can now
  drop their getInputClasses() workaround for these states.

Phase 4e/3 - Semantic Primitives and Form-Field Recipes

Contract change type: additive

Added

• Link utility: Added a token-backed .sp-link class
  (--sp-link-default --sp-link-hover --sp-link-active
--sp-link-visited) for inline text links. Plain CSS, no recipe wrapper -
  there is no variant or size axis to validate.
• Interactive surface state utilities: Added .sp-surface--hover,
  .sp-surface--selected, and .sp-surface--active modifier classes backed
  by --sp-surface-hover, --sp-surface-selected, and --sp-surface-active
  for clickable list items, menu items, table rows, and selectable surfaces.
• Divider utility: Added a token-backed .sp-divider class
  (--sp-surface-divider) for <hr>, section separators, and table borders.
• Form-field recipes: Added getCheckboxClasses (.sp-checkbox-indicator,
  --sp-checkbox-*), getRadioClasses (.sp-radio-indicator,
  --sp-radio-*), getSelectClasses (.sp-select, --sp-select-*),
  getTextareaClasses (.sp-textarea, --sp-textarea-*),
  getFieldsetClasses/getFieldsetLegendClasses (.sp-fieldset,
  .sp-fieldset__legend, --sp-fieldset-*), and getLabelClasses
  (.sp-form-label, --sp-label-*). These back the previously
  recipe-less sp-checkbox, sp-radio, sp-select, sp-textarea,
  sp-fieldset, and sp-label Lit components in spectre-components. New
  class names are distinct from the pre-existing .sp-label (input-scoped,
  via getInputLabelClasses) to avoid colliding with that existing contract.

Phase 4d - Sidebar Navigation Hardening

Contract change type: additive

Added

• Sidebar docked full height: .sp-sidebar now stretches to
  height: 100% once docked inline above breakpoints.md, so a short link
  list matches the height of a taller sibling content column instead of
  leaving a gap below it.
• Sidebar link level option: Added a level option (parent child)
  to getSidebarLinkClasses, mapping to a new .sp-sidebar__link--child
  modifier that indents nested links. Defaults to parent to preserve
  existing call sites.
• Sidebar header recipe: Added getSidebarHeaderClasses, wrapping a new
  .sp-sidebar__header class styled as a muted eyebrow/section label,
  visually distinct from .sp-sidebar__link.

Phase 4d - App Shell Hardening

Contract change type: additive

Added

• Stack align option: Added an align option (center stretch) to
  getStackClasses, mapping to align-items via the new
  .sp-stack--align-stretch modifier class. Defaults to center to preserve
  .sp-hstack's existing hardcoded behavior. Fixes a downstream gap where
  .sp-hstack could not stretch a docked SpSidebar to match a taller main
  content column.
• Sidebar toggle recipe: Added getSidebarToggleClasses, wrapping a new
  .sp-sidebar-toggle component class with an explicit
  --sp-component-sidebar-toggle-z-index (--sp-z-index-modal) above
  --sp-component-sidebar-backdrop-z-index, so a consumer-rendered toggle
  button stays clickable above the backdrop once the sidebar is open.

Phase 4d - App Shell Recipe Expansion

Contract change type: additive

Added

• Stack basis option: Added a basis option (sidebar) to
  getStackClasses, mapping a flex child to a fixed width via the new
  --sp-layout-sidebar-width token (@phcdevworks/spectre-tokens@3.1.0),
  distinct from the default flex: 1 auto-sizing behavior.
• Container maxWidth option: Added a maxWidth option (prose) to
  getContainerClasses, mapping to the new
  --sp-layout-container-max-width-prose token, distinct from the existing
  page-level --sp-layout-container-max-width.
• Sidebar recipe: Added getSidebarClasses, getSidebarLinkClasses, and
  getSidebarBackdropClasses, wrapping new .sp-sidebar / .sp-sidebar__link
  / .sp-sidebar-backdrop component classes in src/styles/components.css.
  Reuses the existing component.nav token roles (bg/text/link/border) as
  the vertical counterpart to SpNav's top-bar pattern; sidebar width comes
  from the same --sp-layout-sidebar-width token used by Stack's basis
  option. Below breakpoints.md, the sidebar is an off-canvas drawer
  (transform: translateX(-100%)) with a backdrop, toggled via a
  data-sidebar-open="true" attribute contract - this is the first recipe
  family with an interactive-state CSS contract. This package owns the CSS
  reaction only; toggle behavior, click handling, and state management
  belong to the consuming adapter.
• Footer recipe: Added getFooterClasses, wrapping a new .sp-footer
  component class in src/styles/components.css, modeled on SpNav's
  bordered/fullWidth option shape (no sticky, per the deferred-unless-
  needed decision in TODO.md).

This is Phase 4d in TODO.md - real downstream need surfaced in
docs-phcdevworks-com's app shell (top bar + sidebar + main content).