Make small icon buttons square (32px) instead of 44px wide

[thomasgallagher]

Combining l-ui-button--icon with l-ui-button--small left the button 44px wide because --small only shrank the height. Add a combined modifier so a small icon button becomes a 32px square, still above the WCAG 2.2 AA 24px target-size minimum.

Document the variant in the dummy app buttons page and the skill CSS reference.

[claude]

Review

Adds a compound CSS modifier so combining l-ui-button--icon and l-ui-button--small produces a 32px square hit area instead of the previous 44×32px rectangle, and documents the variant in the dummy app and skill reference.

The implementation is correct. The compound selector .l-ui-button--icon.l-ui-button--small (specificity 0,2,0) properly wins over both single-class selectors, min-w-[32px] overrides the min-w-[44px] from --icon, and p-1.5 overrides both p-2 (from --icon) and px-3 (from --small). The min-h-[32px] from --small carries through unaffected, giving a correct 32px square.

✅ Ship

[claude]

Review

Adds a combined CSS modifier to produce a 32px square icon button, and applies it to the panel close button.

The implementation is correct: the compound selector carries higher specificity than either single-class rule, so cleanly overrides from --icon, and p-1.5 overrides p-2. Height is handled by the existing --small rule (min-h-[32px]), so no duplication is needed in the combined rule.

WCAG 2.2 AA compliance is retained (32px > 24px minimum). Dummy app docs follow the established heading/description/live-example/modal pattern.

✅ Ship