contain-css-svelte 1.1.15 → 1.1.17

package/dist/controls/Checkbox.svelte

@@ -155,6 +155,10 @@ label::before {
   display: inline-grid;
   place-content: center;
   content: " ";
+  /* Fixed-size flex item: without this, a narrow container (long label
+     text with nowhere to wrap) shrinks the box itself instead of only
+     wrapping the text, turning the square into a rectangle. */
+  flex-shrink: 0;
   width: var(--checkbox-size, var(--font-size, var(--size, 1em)));
   height: var(--checkbox-size, var(--font-size, var(--size, 1em)));
   --link-bg: var(--checkbox-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, inherit))));

package/dist/controls/RadioButton.svelte

@@ -134,6 +134,9 @@ label.radio-item::before {
   display: inline-grid;
   place-content: center;
   content: " ";
+  /* Fixed-size flex item: without this, a narrow container shrinks the
+     circle itself instead of only the label text. */
+  flex-shrink: 0;
   width: var(--radio-button-size, var(--font-size, var(--size, 1em)));
   height: var(--radio-button-size, var(--font-size, var(--size, 1em)));
   --link-bg: var(--radio-button-link-bg, var(--toggle-link-bg, var(--inactive-link-bg, var(--secondary-link-bg, inherit))));

package/dist/dropdowns/DropdownMenu.svelte

@@ -846,7 +846,7 @@ button {
   border-bottom: var(--search-hint-border-bottom, var(--tag-border-bottom, var(--border-bottom, var(--search-hint-border, var(--tag-border, var(--border, none))))));
   border-left: var(--search-hint-border-left, var(--tag-border-left, var(--border-left, var(--search-hint-border, var(--tag-border, var(--border, none))))));
   border-radius: var(--search-hint-border-radius, var(--tag-border-radius, var(--border-radius, none)));
-  font-size: var(--search-hint-font-size, var(--font-size-tiny, 0.75em));
+  font-size: var(--search-hint-font-size, var(--font-size-tiny, 0.75rem));
   padding: var(--search-hint-padding, 0.2em 0.55em);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;

package/dist/layout/DataListItem.svelte

@@ -577,7 +577,7 @@ function handleKeydown(event) {
 .main :global(h4 + p),
 .main :global(h5 + p),
 .main :global(h6 + p) {
-  font-size: var(--data-list-item-paragraph-font-size, var(--data-list-paragraph-font-size, var(--paragraph-font-size, var(--data-list-item-body-font-size, var(--data-list-body-font-size, var(--body-font-size, var(--font-size-small, 0.9em)))))));
+  font-size: var(--data-list-item-paragraph-font-size, var(--data-list-paragraph-font-size, var(--paragraph-font-size, var(--data-list-item-body-font-size, var(--data-list-body-font-size, var(--body-font-size, var(--font-size-small, 0.9rem)))))));
   line-height: var(--data-list-item-paragraph-line-height, var(--data-list-paragraph-line-height, var(--paragraph-line-height, var(--data-list-item-body-line-height, var(--data-list-body-line-height, var(--body-line-height, 1.35))))));
   opacity: var(--data-list-item-body-opacity, var(--data-list-body-opacity, var(--body-opacity, 0.9)));
 }

package/dist/misc/Tag.svelte

@@ -145,7 +145,7 @@ let style = $derived(injectVars(restProps, "tag", [
   border-bottom: var(--tag-border-bottom, var(--border-bottom, var(--tag-border, var(--border, none))));
   border-left: var(--tag-border-left, var(--border-left, var(--tag-border, var(--border, none))));
   border-radius: var(--tag-border-radius, var(--border-radius, none));
-  font-size: var(--tag-font-size, var(--font-size-tiny, 0.75em));
+  font-size: var(--tag-font-size, var(--font-size-tiny, 0.75rem));
   padding: var(--tag-padding, 0.2em 0.55em);
   margin-inline-start: var(--space);
   margin-inline-end: var(--space);

package/dist/vars/defaults.css

@@ -1,10 +1,15 @@
 :root {
   --font-size: 16px;
-  /* Relative units so these track --font-size at each responsive breakpoint
-     (see responsive-typography.css) and any local context set by a container
-     like Card, rather than being pinned to one absolute pixel value. */
-  --font-size-tiny: 0.75em;
-  --font-size-small: 0.9em;
+  /* rem, not em: these should track --font-size at each responsive breakpoint
+     (see responsive-typography.css, which keeps the root element's font-size
+     equal to --font-size) but stay a fixed, predictable size regardless of
+     what font-size a component happens to be nested inside -- a Tag dropped
+     into a heading shouldn't inherit the heading's scale just because em
+     resolves against the nearest ancestor's computed font-size. A component
+     that wants deliberate local-context scaling (like Card) opts in
+     explicitly via its own private --_font-size, not these tokens. */
+  --font-size-tiny: 0.75rem;
+  --font-size-small: 0.9rem;
   --heading-font-size: revert;
   --text-font-size: 1.2rem;
   --font-family: sans-serif;

package/dist/vars/typography.css

@@ -1,10 +1,15 @@
 :root {
   --font-size: 16px;
-  /* Relative units so these track --font-size at each responsive breakpoint
-     (see responsive-typography.css) and any local context set by a container
-     like Card, rather than being pinned to one absolute pixel value. */
-  --font-size-tiny: 0.75em;
-  --font-size-small: 0.9em;
+  /* rem, not em: these should track --font-size at each responsive breakpoint
+     (see responsive-typography.css, which keeps the root element's font-size
+     equal to --font-size) but stay a fixed, predictable size regardless of
+     what font-size a component happens to be nested inside -- a Tag dropped
+     into a heading shouldn't inherit the heading's scale just because em
+     resolves against the nearest ancestor's computed font-size. A component
+     that wants deliberate local-context scaling (like Card) opts in
+     explicitly via its own private --_font-size, not these tokens. */
+  --font-size-tiny: 0.75rem;
+  --font-size-small: 0.9rem;
   --heading-font-size: revert;
   --text-font-size: 1.2rem;
   --font-family: sans-serif;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contain-css-svelte",
-  "version": "1.1.15",
+  "version": "1.1.17",
   "license": "MIT",
   "scripts": {
     "capture:review": "node scripts/capture-review.mjs",