feat: add shared utility classes to livetemplate.css

[adnaan]

Summary

• Adds shared CSS utility classes to livetemplate.css that all example apps now depend on (see feat: comprehensive E2E test coverage, visual validation, and template fixes examples#55)
• .container — narrow 640px container for focused single-purpose apps
• .compact — compact buttons/inputs for inline use in tables and toolbars
• .visually-hidden — accessible screen-reader-only utility
• .inline — zero-margin form for table/toolbar embedding
• .messages / .message / .message.mine — chat message list styling

These classes use Pico CSS variables (--pico-*) for consistent theming and are designed as reusable patterns across LiveTemplate apps.

Test plan

• Verify CSS loads without errors
• Verify example apps render correctly with CDN-served livetemplate.css
• Check that .container overrides Pico's breakpoint-based max-width
• Check that .compact reduces button/input padding appropriately
• Check that chat .messages container scrolls and .message.mine highlights

🤖 Generated with Claude Code

[claude]

Review

Two issues worth addressing before merge:

1. .container is a breaking global override (high)

Overriding Pico's .container with a hardcoded max-width: 640px removes all responsive behavior for anyone using this class. Pico sets different max-widths per breakpoint — this clobbers all of them site-wide. Any app that uses .container expecting Pico's default responsive behavior will silently break.

Consider a scoped name like .container-narrow or use a CSS custom property override instead of redefining .container globally.

2. Chat-specific styles don't belong in a shared utility file (medium)

.messages, .message, and .message.mine are application-domain styles for a chat UI, not general-purpose utilities. They also have a fixed height: 400px which isn't responsive. These should live in the example app's own stylesheet rather than being published as part of the library.

---

.compact, .visually-hidden, and .inline are well-implemented and appropriate for a shared utility file. The package.json change to include livetemplate.css in the published files is correct.

[Copilot]

Pull request overview

Adds shared, Pico-themed CSS utility classes to livetemplate.css and ensures the stylesheet is published with the npm package so LiveTemplate example apps can depend on it via CDN/package install.

Changes:

• Publish livetemplate.css in the npm package by adding it to package.json files.
• Add shared utility/layout/chat styling classes to livetemplate.css (.container, .compact, .visually-hidden, .inline, .messages/.message).

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
package.json	Includes livetemplate.css in the published package artifacts.
livetemplate.css	Adds reusable layout/utility/chat CSS classes using Pico custom properties.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

The top-of-file docstring describes this stylesheet as only providing “CSS Custom Property Defaults” for lvt-fx:* directives, but the file now also defines general-purpose layout/utility/chat classes. Please update the file-level documentation (or add a short note near these new sections) so consumers understand this file includes opinionated utility selectors, not just directive variables.

[Copilot]

The comment says this .container rule “Overrides Pico's breakpoint-based max-width values”, but that’s only true if livetemplate.css is loaded after Pico (or if the rule wins specificity). Consider either documenting the required load order here, or making the override resilient (e.g., via higher specificity or !important) so the intended behavior is reliable.

Suggested change

	Overrides Pico's breakpoint-based max-width values. */
	.container {
	max-width: 640px;
	Reliably overrides Pico's breakpoint-based max-width values,
	regardless of stylesheet load order. */
	.container {
	max-width: 640px !important;

[Copilot]

These new selectors introduce very generic class names (.container, .compact, .inline, .messages, .message) into a published package stylesheet. Since most of the library’s public-facing surface is namespaced with lvt-* (e.g., lvt-fx:* in dom/directives.ts), these unprefixed utilities are more likely to collide with app/framework styles. Consider prefixing (e.g., .lvt-container, .lvt-compact, etc.) or scoping them under a LiveTemplate root selector to avoid unintended global overrides.