@nvidia-elements/styles - npm Package Compare versions

Comparing version 2.0.2 to 2.1.0

CHANGELOG.md

@@ -0,1 +1,49 @@
+## 2.1.0 (2026-07-18)
+
+* chore(ci): add slack release hook ([4a8fd85](https://github.com/NVIDIA/elements/commit/4a8fd85))
+* chore(ci): improve test coverage ([4ef2eb3](https://github.com/NVIDIA/elements/commit/4ef2eb3))
+* chore(ci): update installations via mise ([054992e](https://github.com/NVIDIA/elements/commit/054992e))
+* chore(ci): update lighthouse ([4bffdb2](https://github.com/NVIDIA/elements/commit/4bffdb2))
+* chore(ci): update stylelint to version ([522e1c4](https://github.com/NVIDIA/elements/commit/522e1c4))
+* chore(ci): upgrade built to ts7 rc ([77117a1](https://github.com/NVIDIA/elements/commit/77117a1))
+* chore(core): remove unused controllers ([59d8349](https://github.com/NVIDIA/elements/commit/59d8349))
+* chore(deps): bump vite from 8.0.14 to 8.0.16 ([dfdea58](https://github.com/NVIDIA/elements/commit/dfdea58))
+* chore(deps): update ([cc12511](https://github.com/NVIDIA/elements/commit/cc12511))
+* chore(docs): add adoption metrics generation and service ([29e3795](https://github.com/NVIDIA/elements/commit/29e3795))
+* chore(docs): cleanup readme ([7f92252](https://github.com/NVIDIA/elements/commit/7f92252))
+* chore(docs): fix base url paths ([f97acb6](https://github.com/NVIDIA/elements/commit/f97acb6))
+* chore(docs): fix url asset paths ([1cda122](https://github.com/NVIDIA/elements/commit/1cda122))
+* chore(docs): improved site metadata and tests ([c58c856](https://github.com/NVIDIA/elements/commit/c58c856))
+* chore(docs): update minification config ([0ff44a6](https://github.com/NVIDIA/elements/commit/0ff44a6))
+* chore(docs): update notice file ([21da17a](https://github.com/NVIDIA/elements/commit/21da17a))
+* chore(release): @nvidia-elements/cli-v2.1.0 [skip ci] ([f51dbc3](https://github.com/NVIDIA/elements/commit/f51dbc3))
+* chore(release): @nvidia-elements/cli-v2.1.1 [skip ci] ([4a0c00c](https://github.com/NVIDIA/elements/commit/4a0c00c))
+* chore(release): @nvidia-elements/cli-v2.1.2 [skip ci] ([089acec](https://github.com/NVIDIA/elements/commit/089acec))
+* chore(release): @nvidia-elements/cli-v2.1.3 [skip ci] ([a9a0571](https://github.com/NVIDIA/elements/commit/a9a0571))
+* chore(release): @nvidia-elements/cli-v2.1.4 [skip ci] ([5433ff2](https://github.com/NVIDIA/elements/commit/5433ff2))
+* chore(release): @nvidia-elements/core-v2.0.2 [skip ci] ([d01f774](https://github.com/NVIDIA/elements/commit/d01f774))
+* chore(release): @nvidia-elements/core-v2.0.3 [skip ci] ([2365253](https://github.com/NVIDIA/elements/commit/2365253))
+* chore(release): @nvidia-elements/core-v2.0.4 [skip ci] ([d91da36](https://github.com/NVIDIA/elements/commit/d91da36))
+* chore(release): @nvidia-elements/forms-v2.0.1 [skip ci] ([adb732e](https://github.com/NVIDIA/elements/commit/adb732e))
+* chore(release): @nvidia-elements/forms-v2.0.2 [skip ci] ([35e1073](https://github.com/NVIDIA/elements/commit/35e1073))
+* chore(release): @nvidia-elements/forms-v2.0.3 [skip ci] ([5285c80](https://github.com/NVIDIA/elements/commit/5285c80))
+* chore(starters): cleanup starter readme and templates ([e2e225c](https://github.com/NVIDIA/elements/commit/e2e225c))
+* feat(cli): improve installer script ([0379d0e](https://github.com/NVIDIA/elements/commit/0379d0e))
+* feat(core): gauge ([70e115d](https://github.com/NVIDIA/elements/commit/70e115d))
+* feat(starters): add htmx+go and fix go starter ([d2ecd86](https://github.com/NVIDIA/elements/commit/d2ecd86))
+* feat(styles): add grow option for nve-text ([0b895ff](https://github.com/NVIDIA/elements/commit/0b895ff))
+* fix(cli): correct case sensitive identifiers ([6c8cd2b](https://github.com/NVIDIA/elements/commit/6c8cd2b))
+* fix(cli): correct metadata description length limit ([1682f8d](https://github.com/NVIDIA/elements/commit/1682f8d))
+* fix(cli): improve skills validation ([fe42614](https://github.com/NVIDIA/elements/commit/fe42614))
+* fix(cli): version and updater checks ([e6979e0](https://github.com/NVIDIA/elements/commit/e6979e0))
+* fix(core): coordinate interest and popover interactions ([6f40256](https://github.com/NVIDIA/elements/commit/6f40256))
+* fix(core): memory leaks from connected callback states ([f49c0bd](https://github.com/NVIDIA/elements/commit/f49c0bd))
+* fix(core): restore preferences input label capitalization ([45f9dd1](https://github.com/NVIDIA/elements/commit/45f9dd1))
+* fix(docs): enhance decorator transpilation ([a08584b](https://github.com/NVIDIA/elements/commit/a08584b))
+* fix(docs): iframe example paths ([eddbd96](https://github.com/NVIDIA/elements/commit/eddbd96))
+* fix(forms): coordinate interest and popover interactions ([168f218](https://github.com/NVIDIA/elements/commit/168f218))
+* fix(forms): export controller ([1808462](https://github.com/NVIDIA/elements/commit/1808462))
+* fix(forms): improve aria attribute management ([daab45f](https://github.com/NVIDIA/elements/commit/daab45f))
+* fix(internals): add url length validation for url generation ([1bc197e](https://github.com/NVIDIA/elements/commit/1bc197e))
+
 ## <small>2.0.2 (2026-06-10)</small>
@@ -2,0 +50,0 @@

dist/bundles/index.css

@@ -1,1 +0,1 @@
-@layer nve-layout,nve-viewport,nve-container;[nve-text~=body],[nve-text~=display],[nve-text~=heading],[nve-text~=label],[nve-text~=list],[nve-text~=list] li{font-family:var(--nve-ref-font-family)!important;font-weight:var(--nve-ref-font-weight-regular)!important;color:var(--nve-sys-text-color)!important;white-space:normal;margin:0}[nve-text~=body],[nve-text~=code],[nve-text~=display],[nve-text~=heading],[nve-text~=label],[nve-text~=link]{text-box:trim-both cap alphabetic;outline:var(--nve-debug-typography-outline,initial)}[nve-text~="trim:none"],body[nve-text]{text-box:none!important}@supports not (text-box:trim-both cap alphabetic){[nve-text]{--_capsize-offset:-.1818em}:is([nve-text~=display],[nve-text~=heading],[nve-text~=body],[nve-text~=label]):before{content:"";margin-block-end:var(--_capsize-offset);display:table}:is([nve-text~=display],[nve-text~=heading],[nve-text~=body],[nve-text~=label])[nve-text]:after{content:"";margin-block-start:var(--_capsize-offset);display:table}[nve-text~="trim:none"]:after,[nve-text~="trim:none"]:before{content:none!important}[nve-text~=truncate]{&:after{--_capsize-offset:0}}}[nve-text~=display]{font-size:var(--nve-ref-font-size-1000)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-1200)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-1100)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-900)!important}}[nve-text~=heading]{font-size:var(--nve-ref-font-size-400)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-600)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-500)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=xs]{font-size:var(--nve-ref-font-size-200)!important}}[nve-text~=body]{font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-regular)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}}[nve-text~=label]{font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-medium)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}}[nve-text~=list]{margin:0!important;padding-block:0!important;padding-inline:var(--nve-ref-size-400) 0!important;list-style-position:outside!important;li{margin:0!important}&[nve-text~=unstyled]{list-style:none!important}}ul[nve-text~=nav],ul[nve-text~=nav] ul{padding:0!important;margin:0!important}ul[nve-text~=nav] li{font-size:var(--nve-ref-font-size-200);padding:0;list-style:none!important;color:var(--nve-sys-text-muted-color)!important;margin-block:0 var(--nve-ref-space-sm)!important;margin-inline:0!important;>a{text-decoration:none!important}>a:not(:hover){color:var(--nve-sys-text-muted-color)!important}>a[aria-current=page]{color:var(--nve-sys-text-link-hover-color)!important;font-weight:var(--nve-ref-font-weight-semibold)!important}}ul[nve-text~=nav] ul li{font-size:var(--nve-ref-font-size-100);margin-block:0 var(--nve-ref-space-sm)!important;margin-inline:var(--nve-ref-space-lg) 0!important}[nve-text~=link]{color:var(--nve-sys-text-link-color)!important;text-decoration:underline!important;line-height:inherit!important;width:auto!important;&[nve-text~=disabled]{color:var(--nve-sys-text-link-disabled-color)!important}&:visited,&[nve-text~=visited]{color:var(--nve-sys-text-link-visited-color)!important}&:focus-visible{outline:2px solid Highlight!important;outline:5px auto -webkit-focus-ring-color!important}&[nve-text~=no-visit]{color:var(--nve-sys-text-link-color)!important}&[nve-text~=no-underline]{text-decoration:none!important}&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}&[nve-text~=emphasis]{color:var(--nve-sys-text-link-emphasis-color)!important}&:hover,&[nve-text~=hover]{color:var(--nve-sys-text-link-hover-color)!important}}[nve-text~=emphasis]{color:var(--nve-sys-text-emphasis-color)!important}[nve-text~=muted]{color:var(--nve-sys-text-muted-color)!important}[nve-text~=white]{color:var(--nve-sys-text-white-color)!important}[nve-text~=black]{color:var(--nve-sys-text-black-color)!important}[nve-text~=inherit]{color:inherit!important}[nve-text~=bold]{font-weight:var(--nve-ref-font-weight-bold)!important}[nve-text~=semibold]{font-weight:var(--nve-ref-font-weight-semibold)!important}[nve-text~=regular]{font-weight:var(--nve-ref-font-weight-regular)!important}[nve-text~=medium]{font-weight:var(--nve-ref-font-weight-medium)!important}[nve-text~=light]{font-weight:var(--nve-ref-font-weight-light)!important}[nve-text~=uppercase]{text-transform:uppercase!important}[nve-text~=lowercase]{text-transform:lowercase!important}[nve-text~=capitalize]{text-transform:capitalize!important}[nve-text~=tight]{line-height:var(--nve-ref-font-line-height-tight)!important}[nve-text~=snug]{line-height:var(--nve-ref-font-line-height-snug)!important}[nve-text~=moderate]{line-height:var(--nve-ref-font-line-height-moderate)!important}[nve-text~=relaxed]{line-height:var(--nve-ref-font-line-height-relaxed)!important}[nve-text~=loose]{line-height:var(--nve-ref-font-line-height-loose)!important}[nve-text~=start]{text-align:start!important}[nve-text~=center]{text-align:center!important}[nve-text~=end]{text-align:end!important}[nve-text~=truncate]{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-box:none!important}[nve-text~=nowrap]{text-wrap:nowrap}[nve-text~=code]{background:var(--nve-sys-interaction-field-background)!important;border-radius:var(--nve-ref-border-radius-xs)!important;padding:var(--nve-ref-size-50) var(--nve-ref-size-100)!important;color:var(--nve-sys-text-color)!important;font-family:monospace!important;display:inline-block!important}[nve-text~=code][nve-text~=flat]{background:transparent!important}[nve-text~=monospace]{font-family:monospace!important}@layer nve-layout{*,:after,:before{box-sizing:border-box}[nve-layout]{outline:var(--nve-debug-layout-outline,initial);outline-offset:1px;&[hidden]{display:none!important}&[nve-layout~=column],&[nve-layout~=row]{display:flex;margin:0}&[nve-layout~=full]{height:100%;min-height:0}&[nve-layout~="full:width"],&[nve-layout~=full]{width:100%;min-width:0}&[nve-layout~="full:height"]{height:100%;min-height:0}&[nve-layout~=row]{flex-direction:row;place-items:flex-start;&[nve-layout~="align:left"]{justify-content:flex-start}&[nve-layout~="align:right"]{justify-content:flex-end}&[nve-layout~="align:top"]{align-items:flex-start}&[nve-layout~="align:bottom"]{align-items:flex-end}&[nve-layout~="align:horizontal-center"]{justify-content:center}&[nve-layout~="align:vertical-center"]{align-items:center;align-content:center}&[nve-layout~="align:horizontal-stretch"]{>*{flex-grow:1}}&[nve-layout~="align:vertical-stretch"]{align-items:stretch;flex-grow:1}&[nve-layout~="align:wrap"]{flex-wrap:wrap}}&[nve-layout~=column]{flex-direction:column;width:100%;align-items:start;justify-content:flex-start;&[nve-layout~="align:left"]{align-items:flex-start}&[nve-layout~="align:right"]{align-items:flex-end}&[nve-layout~="align:top"]{justify-content:flex-start}&[nve-layout~="align:bottom"]{justify-content:flex-end}&[nve-layout~="align:horizontal-center"]{align-items:center;align-content:center}&[nve-layout~="align:vertical-center"]{justify-content:center}&[nve-layout~="align:horizontal-stretch"]{align-items:stretch}&[nve-layout~="align:vertical-stretch"]{justify-content:stretch;>*{flex-grow:1}}}&[nve-layout~=row]>[nve-layout~=column]{width:auto}&[nve-layout~="align:center"]{place-items:center;place-content:center}&[nve-layout~="align:stretch"]{align-items:stretch;>*{flex-grow:1}}&[nve-layout~="align:space-around"]{justify-content:space-around;gap:var(--nve-ref-space-none)}&[nve-layout~="align:space-between"]{justify-content:space-between;gap:var(--nve-ref-space-none)}&[nve-layout~="align:space-evenly"]{justify-content:space-evenly;gap:var(--nve-ref-space-none)}&[nve-layout~="gap:none"]{gap:var(--nve-ref-space-none)}&[nve-layout~="gap:xxs"]{gap:var(--nve-ref-space-xxs)}&[nve-layout~="gap:xs"]{gap:var(--nve-ref-space-xs)}&[nve-layout~="gap:sm"]{gap:var(--nve-ref-space-sm)}&[nve-layout~="gap:md"]{gap:var(--nve-ref-space-md)}&[nve-layout~="gap:lg"]{gap:var(--nve-ref-space-lg)}&[nve-layout~="gap:xl"]{gap:var(--nve-ref-space-xl)}&[nve-layout~="gap:xxl"]{gap:var(--nve-ref-space-xxl)}&[nve-layout~="pad:none"]{padding:var(--nve-ref-space-none)}&[nve-layout~="pad-top:none"]{padding-block-start:var(--nve-ref-space-none)}&[nve-layout~="pad-left:none"]{padding-inline-start:var(--nve-ref-space-none)}&[nve-layout~="pad-right:none"]{padding-inline-end:var(--nve-ref-space-none)}&[nve-layout~="pad-bottom:none"]{padding-block-end:var(--nve-ref-space-none)}&[nve-layout~="pad-x:none"]{padding-inline:var(--nve-ref-space-none)}&[nve-layout~="pad-y:none"]{padding-block:var(--nve-ref-space-none)}&[nve-layout~="pad:xxs"]{padding:var(--nve-ref-space-xxs)}&[nve-layout~="pad-top:xxs"]{padding-block-start:var(--nve-ref-space-xxs)}&[nve-layout~="pad-left:xxs"]{padding-inline-start:var(--nve-ref-space-xxs)}&[nve-layout~="pad-right:xxs"]{padding-inline-end:var(--nve-ref-space-xxs)}&[nve-layout~="pad-bottom:xxs"]{padding-block-end:var(--nve-ref-space-xxs)}&[nve-layout~="pad-x:xxs"]{padding-inline:var(--nve-ref-space-xxs)}&[nve-layout~="pad-y:xxs"]{padding-block:var(--nve-ref-space-xxs)}&[nve-layout~="pad:xs"]{padding:var(--nve-ref-space-xs)}&[nve-layout~="pad-top:xs"]{padding-block-start:var(--nve-ref-space-xs)}&[nve-layout~="pad-left:xs"]{padding-inline-start:var(--nve-ref-space-xs)}&[nve-layout~="pad-right:xs"]{padding-inline-end:var(--nve-ref-space-xs)}&[nve-layout~="pad-bottom:xs"]{padding-block-end:var(--nve-ref-space-xs)}&[nve-layout~="pad-x:xs"]{padding-inline:var(--nve-ref-space-xs)}&[nve-layout~="pad-y:xs"]{padding-block:var(--nve-ref-space-xs)}&[nve-layout~="pad:sm"]{padding:var(--nve-ref-space-sm)}&[nve-layout~="pad-top:sm"]{padding-block-start:var(--nve-ref-space-sm)}&[nve-layout~="pad-left:sm"]{padding-inline-start:var(--nve-ref-space-sm)}&[nve-layout~="pad-right:sm"]{padding-inline-end:var(--nve-ref-space-sm)}&[nve-layout~="pad-bottom:sm"]{padding-block-end:var(--nve-ref-space-sm)}&[nve-layout~="pad-x:sm"]{padding-inline:var(--nve-ref-space-sm)}&[nve-layout~="pad-y:sm"]{padding-block:var(--nve-ref-space-sm)}&[nve-layout~="pad:md"]{padding:var(--nve-ref-space-md)}&[nve-layout~="pad-top:md"]{padding-block-start:var(--nve-ref-space-md)}&[nve-layout~="pad-left:md"]{padding-inline-start:var(--nve-ref-space-md)}&[nve-layout~="pad-right:md"]{padding-inline-end:var(--nve-ref-space-md)}&[nve-layout~="pad-bottom:md"]{padding-block-end:var(--nve-ref-space-md)}&[nve-layout~="pad-x:md"]{padding-inline:var(--nve-ref-space-md)}&[nve-layout~="pad-y:md"]{padding-block:var(--nve-ref-space-md)}&[nve-layout~="pad:lg"]{padding:var(--nve-ref-space-lg)}&[nve-layout~="pad-top:lg"]{padding-block-start:var(--nve-ref-space-lg)}&[nve-layout~="pad-left:lg"]{padding-inline-start:var(--nve-ref-space-lg)}&[nve-layout~="pad-right:lg"]{padding-inline-end:var(--nve-ref-space-lg)}&[nve-layout~="pad-bottom:lg"]{padding-block-end:var(--nve-ref-space-lg)}&[nve-layout~="pad-x:lg"]{padding-inline:var(--nve-ref-space-lg)}&[nve-layout~="pad-y:lg"]{padding-block:var(--nve-ref-space-lg)}&[nve-layout~="pad:xl"]{padding:var(--nve-ref-space-xl)}&[nve-layout~="pad-top:xl"]{padding-block-start:var(--nve-ref-space-xl)}&[nve-layout~="pad-left:xl"]{padding-inline-start:var(--nve-ref-space-xl)}&[nve-layout~="pad-right:xl"]{padding-inline-end:var(--nve-ref-space-xl)}&[nve-layout~="pad-bottom:xl"]{padding-block-end:var(--nve-ref-space-xl)}&[nve-layout~="pad-x:xl"]{padding-inline:var(--nve-ref-space-xl)}&[nve-layout~="pad-y:xl"]{padding-block:var(--nve-ref-space-xl)}&[nve-layout~="pad:xxl"]{padding:var(--nve-ref-space-xxl)}&[nve-layout~="pad-top:xxl"]{padding-block-start:var(--nve-ref-space-xxl)}&[nve-layout~="pad-left:xxl"]{padding-inline-start:var(--nve-ref-space-xxl)}&[nve-layout~="pad-right:xxl"]{padding-inline-end:var(--nve-ref-space-xxl)}&[nve-layout~="pad-bottom:xxl"]{padding-block-end:var(--nve-ref-space-xxl)}&[nve-layout~="pad-x:xxl"]{padding-inline:var(--nve-ref-space-xxl)}&[nve-layout~="pad-y:xxl"]{padding-block:var(--nve-ref-space-xxl)}&[nve-layout~=grid]{display:grid;align-items:start;align-content:start;grid-template-columns:repeat(12,1fr);width:100%;&[nve-layout~="span-items:1"]>*,[nve-layout~="span:1"]{grid-column:span 1/span 1}&[nve-layout~="span-items:2"]>*,[nve-layout~="span:2"]{grid-column:span 2/span 2}&[nve-layout~="span-items:3"]>*,[nve-layout~="span:3"]{grid-column:span 3/span 3}&[nve-layout~="span-items:4"]>*,[nve-layout~="span:4"]{grid-column:span 4/span 4}&[nve-layout~="span-items:5"]>*,[nve-layout~="span:5"]{grid-column:span 5/span 5}&[nve-layout~="span-items:6"]>*,[nve-layout~="span:6"]{grid-column:span 6/span 6}&[nve-layout~="span-items:7"]>*,[nve-layout~="span:7"]{grid-column:span 7/span 7}&[nve-layout~="span-items:8"]>*,[nve-layout~="span:8"]{grid-column:span 8/span 8}&[nve-layout~="span-items:9"]>*,[nve-layout~="span:9"]{grid-column:span 9/span 9}&[nve-layout~="span-items:10"]>*,[nve-layout~="span:10"]{grid-column:span 10/span 10}&[nve-layout~="span-items:11"]>*,[nve-layout~="span:11"]{grid-column:span 11/span 11}&[nve-layout~="span-items:12"]>*,[nve-layout~="span:12"]{grid-column:span 12/span 12}&[nve-layout~="align:left"]{justify-content:start;grid-auto-flow:column;grid-template-columns:none}&[nve-layout~="align:right"]{justify-content:end;grid-auto-flow:column;grid-template-columns:none}&[nve-layout~="align:top"]{align-content:start}&[nve-layout~="align:bottom"]{align-content:end}&[nve-layout~="align:horizontal-center"]{justify-items:center;justify-content:center;grid-auto-flow:column;grid-template-columns:none}&[nve-layout~="align:vertical-center"]{align-items:center;align-content:center}&[nve-layout~="align:horizontal-stretch"]{justify-items:stretch;justify-content:stretch;grid-auto-flow:column;grid-template-columns:none}&[nve-layout~="align:vertical-stretch"]{align-items:stretch;align-content:stretch}&[nve-layout~="align:stretch"]{place-items:stretch;place-content:stretch;grid-auto-flow:column;grid-template-columns:none}&[nve-layout~="align:center"]{place-items:center;place-content:center;grid-auto-flow:column;grid-template-columns:none}}}:not([nve-layout~=row])>[nve-layout~=row]:not([nve-layout*="align:"]){width:100%}}@view-transition{navigation:auto}@layer nve-transitions{nve-page:not(:defined){visibility:hidden}::view-transition-group(*){animation-duration:var(--nve-ref-animation-duration-400)}[nve-transition=auto]:active-view-transition-type(forwards,backwards){:root{view-transition-name:none}nve-page>:not([slot]){view-transition-name:page-content}&::view-transition-old(page-content){animation-name:_nve-fade-out}&::view-transition-new(page-content){animation-name:_nve-fade-in}}@keyframes _nve-fade-in{0%{opacity:0}}@keyframes _nve-fade-out{to{opacity:0}}}
+@layer nve-layout,nve-viewport,nve-container;[nve-text~=body],[nve-text~=display],[nve-text~=heading],[nve-text~=label],[nve-text~=list],[nve-text~=list] li{font-family:var(--nve-ref-font-family)!important;font-weight:var(--nve-ref-font-weight-regular)!important;color:var(--nve-sys-text-color)!important;white-space:normal;margin:0}[nve-text~=body],[nve-text~=code],[nve-text~=display],[nve-text~=heading],[nve-text~=label],[nve-text~=link]{text-box:trim-both cap alphabetic;outline:var(--nve-debug-typography-outline,initial)}[nve-text~="trim:none"],body[nve-text]{text-box:none!important}@supports not (text-box:trim-both cap alphabetic){[nve-text]{--_capsize-offset:-.1818em}:is([nve-text~=display],[nve-text~=heading],[nve-text~=body],[nve-text~=label]):before{content:"";margin-block-end:var(--_capsize-offset);display:table}:is([nve-text~=display],[nve-text~=heading],[nve-text~=body],[nve-text~=label])[nve-text]:after{content:"";margin-block-start:var(--_capsize-offset);display:table}[nve-text~="trim:none"]:after,[nve-text~="trim:none"]:before{content:none!important}[nve-text~=truncate]{&:after{--_capsize-offset:0}}}[nve-text~=display]{font-size:var(--nve-ref-font-size-1000)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-1200)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-1100)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-900)!important}}[nve-text~=heading]{font-size:var(--nve-ref-font-size-400)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-600)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-500)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=xs]{font-size:var(--nve-ref-font-size-200)!important}}[nve-text~=body]{font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-regular)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}}[nve-text~=label]{font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-medium)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}}[nve-text~=list]{margin:0!important;padding-block:0!important;padding-inline:var(--nve-ref-size-400) 0!important;list-style-position:outside!important;li{margin:0!important}&[nve-text~=unstyled]{list-style:none!important}}ul[nve-text~=nav],ul[nve-text~=nav] ul{padding:0!important;margin:0!important}ul[nve-text~=nav] li{font-size:var(--nve-ref-font-size-200);padding:0;list-style:none!important;color:var(--nve-sys-text-muted-color)!important;margin-block:0 var(--nve-ref-space-sm)!important;margin-inline:0!important;>a{text-decoration:none!important}>a:not(:hover){color:var(--nve-sys-text-muted-color)!important}>a[aria-current=page]{color:var(--nve-sys-text-link-hover-color)!important;font-weight:var(--nve-ref-font-weight-semibold)!important}}ul[nve-text~=nav] ul li{font-size:var(--nve-ref-font-size-100);margin-block:0 var(--nve-ref-space-sm)!important;margin-inline:var(--nve-ref-space-lg) 0!important}[nve-text~=link]{color:var(--nve-sys-text-link-color)!important;text-decoration:underline!important;line-height:inherit!important;width:auto!important;&[nve-text~=disabled]{color:var(--nve-sys-text-link-disabled-color)!important}&:visited,&[nve-text~=visited]{color:var(--nve-sys-text-link-visited-color)!important}&:focus-visible{outline:2px solid Highlight!important;outline:5px auto -webkit-focus-ring-color!important}&[nve-text~=no-visit]{color:var(--nve-sys-text-link-color)!important}&[nve-text~=no-underline]{text-decoration:none!important}&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}&[nve-text~=emphasis]{color:var(--nve-sys-text-link-emphasis-color)!important}&:hover,&[nve-text~=hover]{color:var(--nve-sys-text-link-hover-color)!important}}[nve-text~=emphasis]{color:var(--nve-sys-text-emphasis-color)!important}[nve-text~=muted]{color:var(--nve-sys-text-muted-color)!important}[nve-text~=white]{color:var(--nve-sys-text-white-color)!important}[nve-text~=black]{color:var(--nve-sys-text-black-color)!important}[nve-text~=inherit]{color:inherit!important}[nve-text~=bold]{font-weight:var(--nve-ref-font-weight-bold)!important}[nve-text~=semibold]{font-weight:var(--nve-ref-font-weight-semibold)!important}[nve-text~=regular]{font-weight:var(--nve-ref-font-weight-regular)!important}[nve-text~=medium]{font-weight:var(--nve-ref-font-weight-medium)!important}[nve-text~=light]{font-weight:var(--nve-ref-font-weight-light)!important}[nve-text~=uppercase]{text-transform:uppercase!important}[nve-text~=lowercase]{text-transform:lowercase!important}[nve-text~=capitalize]{text-transform:capitalize!important}[nve-text~=tight]{line-height:var(--nve-ref-font-line-height-tight)!important}[nve-text~=snug]{line-height:var(--nve-ref-font-line-height-snug)!important}[nve-text~=moderate]{line-height:var(--nve-ref-font-line-height-moderate)!important}[nve-text~=relaxed]{line-height:var(--nve-ref-font-line-height-relaxed)!important}[nve-text~=loose]{line-height:var(--nve-ref-font-line-height-loose)!important}[nve-text~=start]{text-align:start!important}[nve-text~=center]{text-align:center!important}[nve-text~=end]{text-align:end!important}[nve-text~=truncate]{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-box:none!important}[nve-text~=nowrap]{text-wrap:nowrap}[nve-text~=code]{background:var(--nve-sys-interaction-field-background)!important;border-radius:var(--nve-ref-border-radius-xs)!important;padding:var(--nve-ref-size-50) var(--nve-ref-size-100)!important;color:var(--nve-sys-text-color)!important;font-family:monospace!important;display:inline-block!important}[nve-text~=code][nve-text~=flat]{background:transparent!important}[nve-text~=monospace]{font-family:monospace!important}[nve-text~=grow]{text-fit:grow;width:100%}@layer nve-layout{*,:after,:before{box-sizing:border-box}[nve-layout]{outline:var(--nve-debug-layout-outline,initial);outline-offset:1px;&[hidden]{display:none!important}&[nve-layout~=column],&[nve-layout~=row]{display:flex;margin:0}&[nve-layout~=full]{height:100%;min-height:0}&[nve-layout~="full:width"],&[nve-layout~=full]{width:100%;min-width:0}&[nve-layout~="full:height"]{height:100%;min-height:0}&[nve-layout~=row]{flex-direction:row;place-items:flex-start;&[nve-layout~="align:left"]{justify-content:flex-start}&[nve-layout~="align:right"]{justify-content:flex-end}&[nve-layout~="align:top"]{align-items:flex-start}&[nve-layout~="align:bottom"]{align-items:flex-end}&[nve-layout~="align:horizontal-center"]{justify-content:center}&[nve-layout~="align:vertical-center"]{align-items:center;align-content:center}&[nve-layout~="align:horizontal-stretch"]{>*{flex-grow:1}}&[nve-layout~="align:vertical-stretch"]{align-items:stretch;flex-grow:1}&[nve-layout~="align:wrap"]{flex-wrap:wrap}}&[nve-layout~=column]{flex-direction:column;width:100%;align-items:start;justify-content:flex-start;&[nve-layout~="align:left"]{align-items:flex-start}&[nve-layout~="align:right"]{align-items:flex-end}&[nve-layout~="align:top"]{justify-content:flex-start}&[nve-layout~="align:bottom"]{justify-content:flex-end}&[nve-layout~="align:horizontal-center"]{align-items:center;align-content:center}&[nve-layout~="align:vertical-center"]{justify-content:center}&[nve-layout~="align:horizontal-stretch"]{align-items:stretch}&[nve-layout~="align:vertical-stretch"]{justify-content:stretch;>*{flex-grow:1}}}&[nve-layout~=row]>[nve-layout~=column]{width:auto}&[nve-layout~="align:center"]{place-items:center;place-content:center}&[nve-layout~="align:stretch"]{align-items:stretch;>*{flex-grow:1}}&[nve-layout~="align:space-around"]{justify-content:space-around;gap:var(--nve-ref-space-none)}&[nve-layout~="align:space-between"]{justify-content:space-between;gap:var(--nve-ref-space-none)}&[nve-layout~="align:space-evenly"]{justify-content:space-evenly;gap:var(--nve-ref-space-none)}&[nve-layout~="gap:none"]{gap:var(--nve-ref-space-none)}&[nve-layout~="gap:xxs"]{gap:var(--nve-ref-space-xxs)}&[nve-layout~="gap:xs"]{gap:var(--nve-ref-space-xs)}&[nve-layout~="gap:sm"]{gap:var(--nve-ref-space-sm)}&[nve-layout~="gap:md"]{gap:var(--nve-ref-space-md)}&[nve-layout~="gap:lg"]{gap:var(--nve-ref-space-lg)}&[nve-layout~="gap:xl"]{gap:var(--nve-ref-space-xl)}&[nve-layout~="gap:xxl"]{gap:var(--nve-ref-space-xxl)}&[nve-layout~="pad:none"]{padding:var(--nve-ref-space-none)}&[nve-layout~="pad-top:none"]{padding-block-start:var(--nve-ref-space-none)}&[nve-layout~="pad-left:none"]{padding-inline-start:var(--nve-ref-space-none)}&[nve-layout~="pad-right:none"]{padding-inline-end:var(--nve-ref-space-none)}&[nve-layout~="pad-bottom:none"]{padding-block-end:var(--nve-ref-space-none)}&[nve-layout~="pad-x:none"]{padding-inline:var(--nve-ref-space-none)}&[nve-layout~="pad-y:none"]{padding-block:var(--nve-ref-space-none)}&[nve-layout~="pad:xxs"]{padding:var(--nve-ref-space-xxs)}&[nve-layout~="pad-top:xxs"]{padding-block-start:var(--nve-ref-space-xxs)}&[nve-layout~="pad-left:xxs"]{padding-inline-start:var(--nve-ref-space-xxs)}&[nve-layout~="pad-right:xxs"]{padding-inline-end:var(--nve-ref-space-xxs)}&[nve-layout~="pad-bottom:xxs"]{padding-block-end:var(--nve-ref-space-xxs)}&[nve-layout~="pad-x:xxs"]{padding-inline:var(--nve-ref-space-xxs)}&[nve-layout~="pad-y:xxs"]{padding-block:var(--nve-ref-space-xxs)}&[nve-layout~="pad:xs"]{padding:var(--nve-ref-space-xs)}&[nve-layout~="pad-top:xs"]{padding-block-start:var(--nve-ref-space-xs)}&[nve-layout~="pad-left:xs"]{padding-inline-start:var(--nve-ref-space-xs)}&[nve-layout~="pad-right:xs"]{padding-inline-end:var(--nve-ref-space-xs)}&[nve-layout~="pad-bottom:xs"]{padding-block-end:var(--nve-ref-space-xs)}&[nve-layout~="pad-x:xs"]{padding-inline:var(--nve-ref-space-xs)}&[nve-layout~="pad-y:xs"]{padding-block:var(--nve-ref-space-xs)}&[nve-layout~="pad:sm"]{padding:var(--nve-ref-space-sm)}&[nve-layout~="pad-top:sm"]{padding-block-start:var(--nve-ref-space-sm)}&[nve-layout~="pad-left:sm"]{padding-inline-start:var(--nve-ref-space-sm)}&[nve-layout~="pad-right:sm"]{padding-inline-end:var(--nve-ref-space-sm)}&[nve-layout~="pad-bottom:sm"]{padding-block-end:var(--nve-ref-space-sm)}&[nve-layout~="pad-x:sm"]{padding-inline:var(--nve-ref-space-sm)}&[nve-layout~="pad-y:sm"]{padding-block:var(--nve-ref-space-sm)}&[nve-layout~="pad:md"]{padding:var(--nve-ref-space-md)}&[nve-layout~="pad-top:md"]{padding-block-start:var(--nve-ref-space-md)}&[nve-layout~="pad-left:md"]{padding-inline-start:var(--nve-ref-space-md)}&[nve-layout~="pad-right:md"]{padding-inline-end:var(--nve-ref-space-md)}&[nve-layout~="pad-bottom:md"]{padding-block-end:var(--nve-ref-space-md)}&[nve-layout~="pad-x:md"]{padding-inline:var(--nve-ref-space-md)}&[nve-layout~="pad-y:md"]{padding-block:var(--nve-ref-space-md)}&[nve-layout~="pad:lg"]{padding:var(--nve-ref-space-lg)}&[nve-layout~="pad-top:lg"]{padding-block-start:var(--nve-ref-space-lg)}&[nve-layout~="pad-left:lg"]{padding-inline-start:var(--nve-ref-space-lg)}&[nve-layout~="pad-right:lg"]{padding-inline-end:var(--nve-ref-space-lg)}&[nve-layout~="pad-bottom:lg"]{padding-block-end:var(--nve-ref-space-lg)}&[nve-layout~="pad-x:lg"]{padding-inline:var(--nve-ref-space-lg)}&[nve-layout~="pad-y:lg"]{padding-block:var(--nve-ref-space-lg)}&[nve-layout~="pad:xl"]{padding:var(--nve-ref-space-xl)}&[nve-layout~="pad-top:xl"]{padding-block-start:var(--nve-ref-space-xl)}&[nve-layout~="pad-left:xl"]{padding-inline-start:var(--nve-ref-space-xl)}&[nve-layout~="pad-right:xl"]{padding-inline-end:var(--nve-ref-space-xl)}&[nve-layout~="pad-bottom:xl"]{padding-block-end:var(--nve-ref-space-xl)}&[nve-layout~="pad-x:xl"]{padding-inline:var(--nve-ref-space-xl)}&[nve-layout~="pad-y:xl"]{padding-block:var(--nve-ref-space-xl)}&[nve-layout~="pad:xxl"]{padding:var(--nve-ref-space-xxl)}&[nve-layout~="pad-top:xxl"]{padding-block-start:var(--nve-ref-space-xxl)}&[nve-layout~="pad-left:xxl"]{padding-inline-start:var(--nve-ref-space-xxl)}&[nve-layout~="pad-right:xxl"]{padding-inline-end:var(--nve-ref-space-xxl)}&[nve-layout~="pad-bottom:xxl"]{padding-block-end:var(--nve-ref-space-xxl)}&[nve-layout~="pad-x:xxl"]{padding-inline:var(--nve-ref-space-xxl)}&[nve-layout~="pad-y:xxl"]{padding-block:var(--nve-ref-space-xxl)}&[nve-layout~=grid]{display:grid;align-items:start;align-content:start;grid-template-columns:repeat(12,1fr);width:100%;&[nve-layout~="span-items:1"]>*,[nve-layout~="span:1"]{grid-column:span 1/span 1}&[nve-layout~="span-items:2"]>*,[nve-layout~="span:2"]{grid-column:span 2/span 2}&[nve-layout~="span-items:3"]>*,[nve-layout~="span:3"]{grid-column:span 3/span 3}&[nve-layout~="span-items:4"]>*,[nve-layout~="span:4"]{grid-column:span 4/span 4}&[nve-layout~="span-items:5"]>*,[nve-layout~="span:5"]{grid-column:span 5/span 5}&[nve-layout~="span-items:6"]>*,[nve-layout~="span:6"]{grid-column:span 6/span 6}&[nve-layout~="span-items:7"]>*,[nve-layout~="span:7"]{grid-column:span 7/span 7}&[nve-layout~="span-items:8"]>*,[nve-layout~="span:8"]{grid-column:span 8/span 8}&[nve-layout~="span-items:9"]>*,[nve-layout~="span:9"]{grid-column:span 9/span 9}&[nve-layout~="span-items:10"]>*,[nve-layout~="span:10"]{grid-column:span 10/span 10}&[nve-layout~="span-items:11"]>*,[nve-layout~="span:11"]{grid-column:span 11/span 11}&[nve-layout~="span-items:12"]>*,[nve-layout~="span:12"]{grid-column:span 12/span 12}&[nve-layout~="align:left"]{justify-content:start;grid-auto-flow:column;grid-template-columns:none}&[nve-layout~="align:right"]{justify-content:end;grid-auto-flow:column;grid-template-columns:none}&[nve-layout~="align:top"]{align-content:start}&[nve-layout~="align:bottom"]{align-content:end}&[nve-layout~="align:horizontal-center"]{justify-items:center;justify-content:center;grid-auto-flow:column;grid-template-columns:none}&[nve-layout~="align:vertical-center"]{align-items:center;align-content:center}&[nve-layout~="align:horizontal-stretch"]{justify-items:stretch;justify-content:stretch;grid-auto-flow:column;grid-template-columns:none}&[nve-layout~="align:vertical-stretch"]{align-items:stretch;align-content:stretch}&[nve-layout~="align:stretch"]{place-items:stretch;place-content:stretch;grid-auto-flow:column;grid-template-columns:none}&[nve-layout~="align:center"]{place-items:center;place-content:center;grid-auto-flow:column;grid-template-columns:none}}}:not([nve-layout~=row])>[nve-layout~=row]:not([nve-layout*="align:"]){width:100%}}@view-transition{navigation:auto}@layer nve-transitions{nve-page:not(:defined){visibility:hidden}::view-transition-group(*){animation-duration:var(--nve-ref-animation-duration-400)}[nve-transition=auto]:active-view-transition-type(forwards,backwards){:root{view-transition-name:none}nve-page>:not([slot]){view-transition-name:page-content}&::view-transition-old(page-content){animation-name:_nve-fade-out}&::view-transition-new(page-content){animation-name:_nve-fade-in}}@keyframes _nve-fade-in{0%{opacity:0}}@keyframes _nve-fade-out{to{opacity:0}}}

dist/data.html.json

@@ -1988,2 +1988,5 @@ {
           "name": "monospace"
+        },
+        {
+          "name": "grow"
         }
@@ -1990,0 +1993,0 @@ ]

dist/index.js

 //#region src/index.ts
-var e = "2.0.2";
+var e = "2.1.0";
 //#endregion
@@ -4,0 +4,0 @@ export { e as VERSION };

dist/typography.css

@@ -1,1 +0,1 @@
-[nve-text~=body],[nve-text~=display],[nve-text~=heading],[nve-text~=label],[nve-text~=list],[nve-text~=list] li{font-family:var(--nve-ref-font-family)!important;font-weight:var(--nve-ref-font-weight-regular)!important;color:var(--nve-sys-text-color)!important;white-space:normal;margin:0}[nve-text~=body],[nve-text~=code],[nve-text~=display],[nve-text~=heading],[nve-text~=label],[nve-text~=link]{text-box:trim-both cap alphabetic;outline:var(--nve-debug-typography-outline,initial)}[nve-text~="trim:none"],body[nve-text]{text-box:none!important}@supports not (text-box:trim-both cap alphabetic){[nve-text]{--_capsize-offset:-.1818em}:is([nve-text~=display],[nve-text~=heading],[nve-text~=body],[nve-text~=label]):before{content:"";margin-block-end:var(--_capsize-offset);display:table}:is([nve-text~=display],[nve-text~=heading],[nve-text~=body],[nve-text~=label])[nve-text]:after{content:"";margin-block-start:var(--_capsize-offset);display:table}[nve-text~="trim:none"]:after,[nve-text~="trim:none"]:before{content:none!important}[nve-text~=truncate]{&:after{--_capsize-offset:0}}}[nve-text~=display]{font-size:var(--nve-ref-font-size-1000)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-1200)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-1100)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-900)!important}}[nve-text~=heading]{font-size:var(--nve-ref-font-size-400)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-600)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-500)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=xs]{font-size:var(--nve-ref-font-size-200)!important}}[nve-text~=body]{font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-regular)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}}[nve-text~=label]{font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-medium)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}}[nve-text~=list]{margin:0!important;padding-block:0!important;padding-inline:var(--nve-ref-size-400) 0!important;list-style-position:outside!important;li{margin:0!important}&[nve-text~=unstyled]{list-style:none!important}}ul[nve-text~=nav],ul[nve-text~=nav] ul{padding:0!important;margin:0!important}ul[nve-text~=nav] li{font-size:var(--nve-ref-font-size-200);padding:0;list-style:none!important;color:var(--nve-sys-text-muted-color)!important;margin-block:0 var(--nve-ref-space-sm)!important;margin-inline:0!important;>a{text-decoration:none!important}>a:not(:hover){color:var(--nve-sys-text-muted-color)!important}>a[aria-current=page]{color:var(--nve-sys-text-link-hover-color)!important;font-weight:var(--nve-ref-font-weight-semibold)!important}}ul[nve-text~=nav] ul li{font-size:var(--nve-ref-font-size-100);margin-block:0 var(--nve-ref-space-sm)!important;margin-inline:var(--nve-ref-space-lg) 0!important}[nve-text~=link]{color:var(--nve-sys-text-link-color)!important;text-decoration:underline!important;line-height:inherit!important;width:auto!important;&[nve-text~=disabled]{color:var(--nve-sys-text-link-disabled-color)!important}&:visited,&[nve-text~=visited]{color:var(--nve-sys-text-link-visited-color)!important}&:focus-visible{outline:2px solid Highlight!important;outline:5px auto -webkit-focus-ring-color!important}&[nve-text~=no-visit]{color:var(--nve-sys-text-link-color)!important}&[nve-text~=no-underline]{text-decoration:none!important}&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}&[nve-text~=emphasis]{color:var(--nve-sys-text-link-emphasis-color)!important}&:hover,&[nve-text~=hover]{color:var(--nve-sys-text-link-hover-color)!important}}[nve-text~=emphasis]{color:var(--nve-sys-text-emphasis-color)!important}[nve-text~=muted]{color:var(--nve-sys-text-muted-color)!important}[nve-text~=white]{color:var(--nve-sys-text-white-color)!important}[nve-text~=black]{color:var(--nve-sys-text-black-color)!important}[nve-text~=inherit]{color:inherit!important}[nve-text~=bold]{font-weight:var(--nve-ref-font-weight-bold)!important}[nve-text~=semibold]{font-weight:var(--nve-ref-font-weight-semibold)!important}[nve-text~=regular]{font-weight:var(--nve-ref-font-weight-regular)!important}[nve-text~=medium]{font-weight:var(--nve-ref-font-weight-medium)!important}[nve-text~=light]{font-weight:var(--nve-ref-font-weight-light)!important}[nve-text~=uppercase]{text-transform:uppercase!important}[nve-text~=lowercase]{text-transform:lowercase!important}[nve-text~=capitalize]{text-transform:capitalize!important}[nve-text~=tight]{line-height:var(--nve-ref-font-line-height-tight)!important}[nve-text~=snug]{line-height:var(--nve-ref-font-line-height-snug)!important}[nve-text~=moderate]{line-height:var(--nve-ref-font-line-height-moderate)!important}[nve-text~=relaxed]{line-height:var(--nve-ref-font-line-height-relaxed)!important}[nve-text~=loose]{line-height:var(--nve-ref-font-line-height-loose)!important}[nve-text~=start]{text-align:start!important}[nve-text~=center]{text-align:center!important}[nve-text~=end]{text-align:end!important}[nve-text~=truncate]{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-box:none!important}[nve-text~=nowrap]{text-wrap:nowrap}[nve-text~=code]{background:var(--nve-sys-interaction-field-background)!important;border-radius:var(--nve-ref-border-radius-xs)!important;padding:var(--nve-ref-size-50) var(--nve-ref-size-100)!important;color:var(--nve-sys-text-color)!important;font-family:monospace!important;display:inline-block!important}[nve-text~=code][nve-text~=flat]{background:transparent!important}[nve-text~=monospace]{font-family:monospace!important}
+[nve-text~=body],[nve-text~=display],[nve-text~=heading],[nve-text~=label],[nve-text~=list],[nve-text~=list] li{font-family:var(--nve-ref-font-family)!important;font-weight:var(--nve-ref-font-weight-regular)!important;color:var(--nve-sys-text-color)!important;white-space:normal;margin:0}[nve-text~=body],[nve-text~=code],[nve-text~=display],[nve-text~=heading],[nve-text~=label],[nve-text~=link]{text-box:trim-both cap alphabetic;outline:var(--nve-debug-typography-outline,initial)}[nve-text~="trim:none"],body[nve-text]{text-box:none!important}@supports not (text-box:trim-both cap alphabetic){[nve-text]{--_capsize-offset:-.1818em}:is([nve-text~=display],[nve-text~=heading],[nve-text~=body],[nve-text~=label]):before{content:"";margin-block-end:var(--_capsize-offset);display:table}:is([nve-text~=display],[nve-text~=heading],[nve-text~=body],[nve-text~=label])[nve-text]:after{content:"";margin-block-start:var(--_capsize-offset);display:table}[nve-text~="trim:none"]:after,[nve-text~="trim:none"]:before{content:none!important}[nve-text~=truncate]{&:after{--_capsize-offset:0}}}[nve-text~=display]{font-size:var(--nve-ref-font-size-1000)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-1200)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-1100)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-900)!important}}[nve-text~=heading]{font-size:var(--nve-ref-font-size-400)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-600)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-500)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=xs]{font-size:var(--nve-ref-font-size-200)!important}}[nve-text~=body]{font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-regular)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}}[nve-text~=label]{font-size:var(--nve-ref-font-size-200)!important;font-weight:var(--nve-ref-font-weight-medium)!important;&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}}[nve-text~=list]{margin:0!important;padding-block:0!important;padding-inline:var(--nve-ref-size-400) 0!important;list-style-position:outside!important;li{margin:0!important}&[nve-text~=unstyled]{list-style:none!important}}ul[nve-text~=nav],ul[nve-text~=nav] ul{padding:0!important;margin:0!important}ul[nve-text~=nav] li{font-size:var(--nve-ref-font-size-200);padding:0;list-style:none!important;color:var(--nve-sys-text-muted-color)!important;margin-block:0 var(--nve-ref-space-sm)!important;margin-inline:0!important;>a{text-decoration:none!important}>a:not(:hover){color:var(--nve-sys-text-muted-color)!important}>a[aria-current=page]{color:var(--nve-sys-text-link-hover-color)!important;font-weight:var(--nve-ref-font-weight-semibold)!important}}ul[nve-text~=nav] ul li{font-size:var(--nve-ref-font-size-100);margin-block:0 var(--nve-ref-space-sm)!important;margin-inline:var(--nve-ref-space-lg) 0!important}[nve-text~=link]{color:var(--nve-sys-text-link-color)!important;text-decoration:underline!important;line-height:inherit!important;width:auto!important;&[nve-text~=disabled]{color:var(--nve-sys-text-link-disabled-color)!important}&:visited,&[nve-text~=visited]{color:var(--nve-sys-text-link-visited-color)!important}&:focus-visible{outline:2px solid Highlight!important;outline:5px auto -webkit-focus-ring-color!important}&[nve-text~=no-visit]{color:var(--nve-sys-text-link-color)!important}&[nve-text~=no-underline]{text-decoration:none!important}&[nve-text~=xl]{font-size:var(--nve-ref-font-size-400)!important}&[nve-text~=lg]{font-size:var(--nve-ref-font-size-300)!important}&[nve-text~=sm]{font-size:var(--nve-ref-font-size-100)!important}&[nve-text~=emphasis]{color:var(--nve-sys-text-link-emphasis-color)!important}&:hover,&[nve-text~=hover]{color:var(--nve-sys-text-link-hover-color)!important}}[nve-text~=emphasis]{color:var(--nve-sys-text-emphasis-color)!important}[nve-text~=muted]{color:var(--nve-sys-text-muted-color)!important}[nve-text~=white]{color:var(--nve-sys-text-white-color)!important}[nve-text~=black]{color:var(--nve-sys-text-black-color)!important}[nve-text~=inherit]{color:inherit!important}[nve-text~=bold]{font-weight:var(--nve-ref-font-weight-bold)!important}[nve-text~=semibold]{font-weight:var(--nve-ref-font-weight-semibold)!important}[nve-text~=regular]{font-weight:var(--nve-ref-font-weight-regular)!important}[nve-text~=medium]{font-weight:var(--nve-ref-font-weight-medium)!important}[nve-text~=light]{font-weight:var(--nve-ref-font-weight-light)!important}[nve-text~=uppercase]{text-transform:uppercase!important}[nve-text~=lowercase]{text-transform:lowercase!important}[nve-text~=capitalize]{text-transform:capitalize!important}[nve-text~=tight]{line-height:var(--nve-ref-font-line-height-tight)!important}[nve-text~=snug]{line-height:var(--nve-ref-font-line-height-snug)!important}[nve-text~=moderate]{line-height:var(--nve-ref-font-line-height-moderate)!important}[nve-text~=relaxed]{line-height:var(--nve-ref-font-line-height-relaxed)!important}[nve-text~=loose]{line-height:var(--nve-ref-font-line-height-loose)!important}[nve-text~=start]{text-align:start!important}[nve-text~=center]{text-align:center!important}[nve-text~=end]{text-align:end!important}[nve-text~=truncate]{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;text-box:none!important}[nve-text~=nowrap]{text-wrap:nowrap}[nve-text~=code]{background:var(--nve-sys-interaction-field-background)!important;border-radius:var(--nve-ref-border-radius-xs)!important;padding:var(--nve-ref-size-50) var(--nve-ref-size-100)!important;color:var(--nve-sys-text-color)!important;font-family:monospace!important;display:inline-block!important}[nve-text~=code][nve-text~=flat]{background:transparent!important}[nve-text~=monospace]{font-family:monospace!important}[nve-text~=grow]{text-fit:grow;width:100%}

dist/typography.examples.js.map

@@ -1,1 +0,1 @@
-{"version":3,"file":"typography.examples.js","names":[],"sources":["../src/typography.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/card/define.js';\n\nexport default {\n  title: 'Styles/Typography',\n  component: 'nve-text'\n};\n\n/**\n * @summary Foundational text types (display, heading, body, label) for establishing visual hierarchy in the design system.\n */\nexport const Default = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"display\">display</p>\n  <p nve-text=\"heading\">heading</p>\n  <p nve-text=\"body\">body</p>\n  <p nve-text=\"label\">label</p>\n</div>\n  `\n}\n\n/**\n * @summary Text types applied to semantic HTML heading elements for accessible content structure.\n */\nexport const Headings = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <h1 nve-text=\"display\">display</h1>\n  <h2 nve-text=\"heading\">heading</h2>\n  <h3 nve-text=\"body\">body</h3>\n  <h4 nve-text=\"label\">label</h4>\n</div>\n  `\n}\n\n/**\n * @summary Displays the complete range of size modifiers for each text type, enabling precise typographic scale and size control.\n */\nexport const Size = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"display xl\">display xl</p>\n  <p nve-text=\"display lg\">display lg</p>\n  <p nve-text=\"display\">display</p>\n  <p nve-text=\"display sm\">display sm</p>\n  <p nve-text=\"heading xl\">heading xl</p>\n  <p nve-text=\"heading lg\">heading lg</p>\n  <p nve-text=\"heading\">heading</p>\n  <p nve-text=\"heading sm\">heading sm</p>\n  <p nve-text=\"heading xs\">heading xs</p>\n  <p nve-text=\"body xl\">body xl</p>\n  <p nve-text=\"body lg\">body lg</p>\n  <p nve-text=\"body\">body</p>\n  <p nve-text=\"body sm\">body sm</p>\n  <p nve-text=\"label xl\">label xl</p>\n  <p nve-text=\"label lg\">label lg</p>\n  <p nve-text=\"label\">label</p>\n  <p nve-text=\"label sm\">label sm</p>\n</div>\n  `\n}\n\n/**\n * @summary Color variations for text to convey importance levels and ensure proper contrast in light and dark themes.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body\">default</p>\n  <p nve-text=\"body emphasis\">emphasis</p>\n  <p nve-text=\"body muted\">muted</p>\n  <div nve-theme=\"root dark\" nve-layout=\"column gap:lg\">\n    <p nve-text=\"body white\">white</p>\n  </div>\n  <div nve-theme=\"root light\" nve-layout=\"column gap:lg\">\n    <p nve-text=\"body black\">black</p>\n  </div>\n</div>\n  `\n}\n\n/**\n * @summary Available font weight options for creating visual emphasis and hierarchy within text content.\n */\nexport const Weights = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body bold\">bold</p>\n  <p nve-text=\"body semibold\">semibold</p>\n  <p nve-text=\"body medium\">medium</p>\n  <p nve-text=\"body\">default</p>\n  <p nve-text=\"body light\">light</p>\n</div>\n  `\n}\n\n/**\n * @summary Styled unordered list with consistent spacing and bullet markers.\n */\nexport const List = {\n  render: () => html`\n<ul nve-text=\"list\">\n  <li>list item 1</li>\n  <li>list item 2</li>\n  <li>list item 3</li>\n  <li>Long line of text.. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</li>\n</ul>\n  `\n}\n\n/**\n * @summary Styled ordered list with sequential numbering for step-by-step or prioritized content.\n */\nexport const OrderedList = {\n  render: () => html`\n<ol nve-text=\"list\">\n  <li>list item</li>\n  <li>list item</li>\n  <li>list item</li>\n</ol>\n  `\n}\n\n/**\n * @summary Displays a list without bullets or default styling, useful for custom layouts or semantic markup without visual indicators.\n * @tags test-case\n */\nexport const UnstyledList = {\n  render: () => html`\n<ul nve-text=\"list unstyled\">\n  <li>list item</li>\n  <li>list item</li>\n  <li>list item</li>\n</ul>\n  `\n}\n/**\n * @summary Presents a navigation-optimized list with nested structure, ideal for sidebars and table of contents.\n * @tags test-case\n */\nexport const NavList = {\n  render: () => html`\n<ul nve-text=\"list nav\">\n  <li><a nve-text=\"link\" href=\"#navigation-list\">Welcome</a></li>\n\n  <li><a nve-text=\"link\" href=\"#navigation-list\" aria-current=\"page\">Installation</a></li>\n  <li>\n    <ul nve-text=\"list\">\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Installing Dependencies</a></li>\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Configure Library</a></li>\n    </ul>\n  </li>\n\n  <li><a nve-text=\"link\" href=\"#navigation-list\">Basic Usage</a></li>\n  <li>\n    <ul nve-text=\"list\">\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Architecture</a></li>\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Reference</a></li>\n      <li><a nve-text=\"link\" href=\"#navigation-list\">API</a></li>\n    </ul>\n  </li>\n\n  <li>External Links</li>\n  <li>\n    <ul nve-text=\"list\">\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Join the Community</a></li>\n\n      <li>Submit an Issue</li>\n      <li>\n        <ul nve-text=\"list\">\n          <li><a nve-text=\"link\" href=\"#navigation-list\">Feature</a></li>\n          <li><a nve-text=\"link\" href=\"#navigation-list\">Fix</a></li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n</ul>\n  `\n}\n\n/**\n * @summary Link styles including states, emphasis levels, and sizes for clear interactive affordances.\n * @tags test-case\n */\nexport const Link = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <a nve-text=\"body link\" href=\"#\">link</a>\n  <a nve-text=\"body link hover\" href=\"#\">link (hover)</a>\n  <a nve-text=\"body link visited\" href=\"#\">link (visited)</a>\n\n  <nve-divider></nve-divider>\n\n  <a nve-text=\"link\" href=\"#\">link</a>\n  <a nve-text=\"link muted\" href=\"#\">link muted</a>\n  <a nve-text=\"link emphasis\" href=\"#\">link emphasis</a>\n\n  <nve-divider></nve-divider>\n  \n  <a nve-text=\"link sm\" href=\"#\">link sm</a>\n  <a nve-text=\"link\" href=\"#\">link</a>\n  <a nve-text=\"link lg\" href=\"#\">link lg</a>\n  <a nve-text=\"link xl\" href=\"#\">link xl</a>\n\n</div>\n  `\n}\n\n/**\n * @summary Text transformation utilities for case changes and truncation to handle overflow gracefully.\n */\nexport const Transforms = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body uppercase\">uppercase</p>\n  <p nve-text=\"body lowercase\">LOWERCASE</p>\n  <p nve-text=\"body capitalize\">capitalize</p>\n  <p nve-text=\"body truncate\" style=\"width: 350px;\">truncate: dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>\n</div>\n  `\n}\n\n/**\n * @summary Relative line height options that scale with font size, optimizing readability for different text densities.\n * @tags test-case\n */\nexport const LineHeightRelative = {\n  render: () => html`\n<div nve-layout=\"column\">\n  <p nve-text=\"tight\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  <p nve-text=\"snug\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  <p nve-text=\"moderate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  <p nve-text=\"relaxed\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n</div>\n  `\n}\n\n/**\n * @summary Description list layout with consistent spacing and typography styles.\n */\nexport const DescriptionList = {\n  render: () => html`\n<dl nve-layout=\"column gap:md\">\n  <dt nve-text=\"body muted medium\">Knot</dt>\n  <dd nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n\n  <dt nve-text=\"body muted medium\">Port</dt>\n  <dd nve-text=\"body\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n\n  <dt nve-text=\"body muted medium\">Starboard</dt>\n  <dd nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n</dl>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}
+{"version":3,"file":"typography.examples.js","names":[],"sources":["../src/typography.examples.ts"],"sourcesContent":["// SPDX-FileCopyrightText: Copyright (c) 2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport { html } from 'lit';\nimport '@nvidia-elements/core/card/define.js';\n\nexport default {\n  title: 'Styles/Typography',\n  component: 'nve-text'\n};\n\n/**\n * @summary Foundational text types (display, heading, body, label) for establishing visual hierarchy in the design system.\n */\nexport const Default = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"display\">display</p>\n  <p nve-text=\"heading\">heading</p>\n  <p nve-text=\"body\">body</p>\n  <p nve-text=\"label\">label</p>\n</div>\n  `\n}\n\n/**\n * @summary Text types applied to semantic HTML heading elements for accessible content structure.\n */\nexport const Headings = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <h1 nve-text=\"display\">display</h1>\n  <h2 nve-text=\"heading\">heading</h2>\n  <h3 nve-text=\"body\">body</h3>\n  <h4 nve-text=\"label\">label</h4>\n</div>\n  `\n}\n\n/**\n * @summary Displays the complete range of size modifiers for each text type, enabling precise typographic scale and size control.\n */\nexport const Size = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"display xl\">display xl</p>\n  <p nve-text=\"display lg\">display lg</p>\n  <p nve-text=\"display\">display</p>\n  <p nve-text=\"display sm\">display sm</p>\n  <p nve-text=\"heading xl\">heading xl</p>\n  <p nve-text=\"heading lg\">heading lg</p>\n  <p nve-text=\"heading\">heading</p>\n  <p nve-text=\"heading sm\">heading sm</p>\n  <p nve-text=\"heading xs\">heading xs</p>\n  <p nve-text=\"body xl\">body xl</p>\n  <p nve-text=\"body lg\">body lg</p>\n  <p nve-text=\"body\">body</p>\n  <p nve-text=\"body sm\">body sm</p>\n  <p nve-text=\"label xl\">label xl</p>\n  <p nve-text=\"label lg\">label lg</p>\n  <p nve-text=\"label\">label</p>\n  <p nve-text=\"label sm\">label sm</p>\n</div>\n  `\n}\n\n/**\n * @summary Grow text to fill the available width via the CSS `text-fit` property.\n */\nexport const Grow = {\n  render: () => html`\n<div nve-layout=\"column gap:xl\" >\n  <p nve-text=\"body grow\" style=\"width: 400px;\">grow text</p>\n  <p nve-text=\"body grow\" style=\"width: 300px;\">grow text</p>\n  <p nve-text=\"body grow\" style=\"width: 200px;\">grow text</p>\n</div>\n  `\n}\n\n/**\n * @summary Color variations for text to convey importance levels and ensure proper contrast in light and dark themes.\n * @tags test-case\n */\nexport const Color = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body\">default</p>\n  <p nve-text=\"body emphasis\">emphasis</p>\n  <p nve-text=\"body muted\">muted</p>\n  <div nve-theme=\"root dark\" nve-layout=\"column gap:lg\">\n    <p nve-text=\"body white\">white</p>\n  </div>\n  <div nve-theme=\"root light\" nve-layout=\"column gap:lg\">\n    <p nve-text=\"body black\">black</p>\n  </div>\n</div>\n  `\n}\n\n/**\n * @summary Available font weight options for creating visual emphasis and hierarchy within text content.\n */\nexport const Weights = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body bold\">bold</p>\n  <p nve-text=\"body semibold\">semibold</p>\n  <p nve-text=\"body medium\">medium</p>\n  <p nve-text=\"body\">default</p>\n  <p nve-text=\"body light\">light</p>\n</div>\n  `\n}\n\n/**\n * @summary Styled unordered list with consistent spacing and bullet markers.\n */\nexport const List = {\n  render: () => html`\n<ul nve-text=\"list\">\n  <li>list item 1</li>\n  <li>list item 2</li>\n  <li>list item 3</li>\n  <li>Long line of text.. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</li>\n</ul>\n  `\n}\n\n/**\n * @summary Styled ordered list with sequential numbering for step-by-step or prioritized content.\n */\nexport const OrderedList = {\n  render: () => html`\n<ol nve-text=\"list\">\n  <li>list item</li>\n  <li>list item</li>\n  <li>list item</li>\n</ol>\n  `\n}\n\n/**\n * @summary Displays a list without bullets or default styling, useful for custom layouts or semantic markup without visual indicators.\n * @tags test-case\n */\nexport const UnstyledList = {\n  render: () => html`\n<ul nve-text=\"list unstyled\">\n  <li>list item</li>\n  <li>list item</li>\n  <li>list item</li>\n</ul>\n  `\n}\n/**\n * @summary Presents a navigation-optimized list with nested structure, ideal for sidebars and table of contents.\n * @tags test-case\n */\nexport const NavList = {\n  render: () => html`\n<ul nve-text=\"list nav\">\n  <li><a nve-text=\"link\" href=\"#navigation-list\">Welcome</a></li>\n\n  <li><a nve-text=\"link\" href=\"#navigation-list\" aria-current=\"page\">Installation</a></li>\n  <li>\n    <ul nve-text=\"list\">\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Installing Dependencies</a></li>\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Configure Library</a></li>\n    </ul>\n  </li>\n\n  <li><a nve-text=\"link\" href=\"#navigation-list\">Basic Usage</a></li>\n  <li>\n    <ul nve-text=\"list\">\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Architecture</a></li>\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Reference</a></li>\n      <li><a nve-text=\"link\" href=\"#navigation-list\">API</a></li>\n    </ul>\n  </li>\n\n  <li>External Links</li>\n  <li>\n    <ul nve-text=\"list\">\n      <li><a nve-text=\"link\" href=\"#navigation-list\">Join the Community</a></li>\n\n      <li>Submit an Issue</li>\n      <li>\n        <ul nve-text=\"list\">\n          <li><a nve-text=\"link\" href=\"#navigation-list\">Feature</a></li>\n          <li><a nve-text=\"link\" href=\"#navigation-list\">Fix</a></li>\n        </ul>\n      </li>\n    </ul>\n  </li>\n</ul>\n  `\n}\n\n/**\n * @summary Link styles including states, emphasis levels, and sizes for clear interactive affordances.\n * @tags test-case\n */\nexport const Link = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <a nve-text=\"body link\" href=\"#\">link</a>\n  <a nve-text=\"body link hover\" href=\"#\">link (hover)</a>\n  <a nve-text=\"body link visited\" href=\"#\">link (visited)</a>\n\n  <nve-divider></nve-divider>\n\n  <a nve-text=\"link\" href=\"#\">link</a>\n  <a nve-text=\"link muted\" href=\"#\">link muted</a>\n  <a nve-text=\"link emphasis\" href=\"#\">link emphasis</a>\n\n  <nve-divider></nve-divider>\n  \n  <a nve-text=\"link sm\" href=\"#\">link sm</a>\n  <a nve-text=\"link\" href=\"#\">link</a>\n  <a nve-text=\"link lg\" href=\"#\">link lg</a>\n  <a nve-text=\"link xl\" href=\"#\">link xl</a>\n\n</div>\n  `\n}\n\n/**\n * @summary Text transformation utilities for case changes and truncation to handle overflow gracefully.\n */\nexport const Transforms = {\n  render: () => html`\n<div nve-layout=\"column gap:lg\">\n  <p nve-text=\"body uppercase\">uppercase</p>\n  <p nve-text=\"body lowercase\">LOWERCASE</p>\n  <p nve-text=\"body capitalize\">capitalize</p>\n  <p nve-text=\"body truncate\" style=\"width: 350px;\">truncate: dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi</p>\n</div>\n  `\n}\n\n/**\n * @summary Relative line height options that scale with font size, optimizing readability for different text densities.\n * @tags test-case\n */\nexport const LineHeightRelative = {\n  render: () => html`\n<div nve-layout=\"column\">\n  <p nve-text=\"tight\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  <p nve-text=\"snug\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  <p nve-text=\"moderate\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n  <p nve-text=\"relaxed\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>\n</div>\n  `\n}\n\n/**\n * @summary Description list layout with consistent spacing and typography styles.\n */\nexport const DescriptionList = {\n  render: () => html`\n<dl nve-layout=\"column gap:md\">\n  <dt nve-text=\"body muted medium\">Knot</dt>\n  <dd nve-text=\"body\">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>\n\n  <dt nve-text=\"body muted medium\">Port</dt>\n  <dd nve-text=\"body\">Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n\n  <dt nve-text=\"body muted medium\">Starboard</dt>\n  <dd nve-text=\"body\">Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing towards the bow (the front of the vessel).</dd>\n</dl>\n  `\n}\n"],"mappings":";AAGA,IAAA,IAAS"}

dist/typography.examples.json

@@ -33,2 +33,11 @@ {
     {
+      "id": "styles-typography-grow",
+      "name": "Grow",
+      "template": "<div nve-layout=\"column gap:xl\">\n  <p nve-text=\"body grow\" style=\"width: 400px\">grow text</p>\n  <p nve-text=\"body grow\" style=\"width: 300px\">grow text</p>\n  <p nve-text=\"body grow\" style=\"width: 200px\">grow text</p>\n</div>\n",
+      "summary": "Grow text to fill the available width via the CSS `text-fit` property.",
+      "description": "",
+      "composition": false,
+      "tags": []
+    },
+    {
       "id": "styles-typography-color",
@@ -35,0 +44,0 @@ "name": "Color",

package.json

 {
   "name": "@nvidia-elements/styles",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "release": {
@@ -63,6 +63,6 @@ "extends": "../../release.config.js"
     "@eslint/js": "10.0.1",
-    "@vitest/browser": "4.1.7",
-    "@vitest/coverage-istanbul": "4.1.7",
+    "@vitest/browser": "4.1.10",
+    "@vitest/coverage-istanbul": "4.1.10",
     "cssnano": "8.0.0",
-    "eslint": "10.4.0",
+    "eslint": "10.6.0",
     "lit": "3.3.3",
@@ -74,11 +74,11 @@ "postcss": "8.5.15",
     "publint": "0.3.21",
-    "stylelint": "17.12.0",
+    "stylelint": "17.14.0",
     "stylelint-config-standard": "40.0.0",
     "typescript": "6.0.3",
-    "vite": "8.0.14",
-    "vitest": "4.1.7",
+    "vite": "8.1.4",
+    "vitest": "4.1.10",
     "@internals/testing": "0.0.0",
-    "@nvidia-elements/lint": "2.0.1",
     "@internals/vite": "0.0.0",
-    "@nvidia-elements/themes": "2.0.0"
+    "@nvidia-elements/themes": "2.0.0",
+    "@nvidia-elements/lint": "2.0.1"
   },
@@ -85,0 +85,0 @@ "wireit": {

README.md

 # @nvidia-elements/styles
 
+NVIDIA Design System and UI Agent Harness for AI/ML Factories, Robotics, and Autonomous Vehicles.
+
 Core CSS foundation for the Elements design system, providing layout utilities, typography styles, and view transitions.
@@ -4,0 +6,0 @@

No alert changes

Improved metrics

Total package byte prevSize

259888

2.39%

Lines of code

3510

0.37%

Number of lines in readme file

25

8.7%

No dependency changes