@neuravision/construct 2.1.2 → 2.1.4

package/CHANGELOG.md

@@ -5,6 +5,33 @@ All notable changes to `@neuravision/construct` will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [2.1.4] - 2026-07-17
+
+### Fixed
+
+- Button: custom icons composed into the `.ct-button__icon` slot (a `.ct-icon` — also when
+  wrapped by a framework component host — or a bare `<svg>`) now adopt the slot's size,
+  completing the composition contract introduced for the chip slot in 2.1.3. The slot size
+  is expressed as `--ct-button-icon-size` (default `--icon-sm`); context overrides like the
+  modal header's larger close icon set the custom property and flow through to composed
+  content. Consumers that override `.ct-button__icon` dimensions directly should switch to
+  `--ct-button-icon-size` so composed icons follow.
+- Card & Modal: header/footer slots hidden via the `hidden` attribute (e.g. by framework
+  wrappers when no content is projected) now actually disappear. The slots' `display: flex`
+  previously overrode the UA stylesheet's `[hidden] { display: none }`, so every card
+  without footer content rendered a ghost divider plus spacing at the bottom edge (same
+  for modals without a footer). New guards: `.ct-card__header[hidden]`,
+  `.ct-card__footer[hidden]`, `.ct-modal__footer[hidden]`.
+
+## [2.1.3] - 2026-07-17
+
+### Fixed
+
+- Chip: custom icons composed into the `.ct-chip__icon` slot (a `.ct-icon` — also when wrapped
+  by a framework component host — or a bare `<svg>`) now adopt the slot's 1em size. Previously
+  `.ct-icon` kept its fixed `--icon-md` box and overflowed the slot onto the chip label
+  (visible as a copy icon overlapping the first characters of ID chips).
+
 ## [2.1.2] - 2026-07-16
 
 ### Added

package/components/button.css

@@ -186,13 +186,29 @@
 }
 
 .ct-button__icon {
-  width: var(--icon-sm);
-  height: var(--icon-sm);
+  --ct-button-icon-size: var(--icon-sm);
+
+  width: var(--ct-button-icon-size);
+  height: var(--ct-button-icon-size);
   display: inline-flex;
   align-items: center;
   justify-content: center;
 }
 
+/* Composed icon content adopts the slot's size — same composition
+   contract as `.ct-chip__icon` (see chip.css). `.ct-icon` carries a
+   fixed `--icon-md` box of its own that would overflow the slot; the
+   size is restated via the slot's custom property because `width: 100%`
+   does not resolve through an intermediate framework component host.
+   Context overrides (e.g. `.ct-modal__header`) set
+   `--ct-button-icon-size` and flow through to composed content. */
+.ct-button__icon .ct-icon,
+.ct-button__icon > svg {
+  width: var(--ct-button-icon-size);
+  height: var(--ct-button-icon-size);
+  font-size: var(--ct-button-icon-size);
+}
+
 @media (pointer: coarse) {
   .ct-button {
     min-width: var(--control-height-sm);

package/components/card.css

@@ -46,6 +46,15 @@
   border-top: var(--border-thin) solid var(--color-border-subtle);
 }
 
+/* Wrappers hide empty slots via the `hidden` attribute (e.g. framework
+   integrations when no content is projected). The display rules above would
+   otherwise override the UA stylesheet's `[hidden] { display: none }` and
+   leave a ghost divider + spacing behind. */
+.ct-card__header[hidden],
+.ct-card__footer[hidden] {
+  display: none;
+}
+
 :is(a, button, [role='button'], [role='link']).ct-card--interactive {
   cursor: pointer;
   transition: box-shadow var(--duration-fast) var(--easing-standard),

package/components/chip.css

@@ -206,6 +206,18 @@
   color: var(--ct-chip-accent);
 }
 
+/* Composed icon content adopts the slot's size. `.ct-icon` carries a
+   fixed `--icon-md` box of its own; inside the 1em chip slot that box
+   would overflow onto the label (an intermediate wrapper — e.g. a
+   framework component host — keeps `width: 100%` from resolving, so
+   the slot size is restated in em). */
+.ct-chip__icon .ct-icon,
+.ct-chip__icon > svg {
+  width: 1em;
+  height: 1em;
+  font-size: 1em;
+}
+
 /* ── Built-in semantic icons via CSS mask-image ──────────────── */
 
 .ct-chip__icon--info,

package/components/modal.css

@@ -46,8 +46,7 @@
 }
 
 .ct-modal__header .ct-button__icon {
-  width: var(--icon-lg);
-  height: var(--icon-lg);
+  --ct-button-icon-size: var(--icon-lg);
 }
 
 .ct-modal__body {
@@ -65,6 +64,13 @@
   flex-wrap: wrap;
 }
 
+/* Wrappers hide the footer via the `hidden` attribute when no content is
+   projected; `display: flex` above would otherwise override the UA
+   stylesheet's `[hidden]` rule and leave a ghost divider behind. */
+.ct-modal__footer[hidden] {
+  display: none;
+}
+
 /* Modal size variants */
 
 .ct-modal--sm .ct-modal__dialog {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neuravision/construct",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "Construct Design System - Accessible, token-based design system for modern web applications",
   "license": "MIT",
   "repository": {