@teseor/css 1.10.1 → 1.11.0

package/dist/index.css

@@ -9,7 +9,7 @@
 @layer tokens{:root{--ui-z-base: 0;--ui-z-sticky: 100;--ui-z-dropdown: 200;--ui-z-overlay: 300;--ui-z-modal: 400;--ui-z-popover: 500;--ui-z-tooltip: 600;--ui-z-toast: 700;--ui-z-drawer: 800;--ui-z-debug: 9999}}
 @layer tokens{:root{--ui-duration-instant: 50ms;--ui-duration-fast: 100ms;--ui-duration-base: 150ms;--ui-duration-normal: 200ms;--ui-duration-slow: 250ms;--ui-duration-slower: 400ms;--ui-ease-default: cubic-bezier(0.4, 0, 0.2, 1);--ui-ease-in: cubic-bezier(0.4, 0, 1, 1);--ui-ease-out: cubic-bezier(0, 0, 0.2, 1);--ui-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)}@media(prefers-reduced-motion: reduce){:root{--ui-duration-instant: 0ms;--ui-duration-fast: 0ms;--ui-duration-base: 0ms;--ui-duration-normal: 0ms;--ui-duration-slow: 0ms;--ui-duration-slower: 0ms}}}
 @layer tokens{:root{--ui-color-text: var(--ui-color-neutral-900);--ui-color-text-muted: var(--ui-color-neutral-500);--ui-color-text-inverse: var(--ui-color-neutral-50);--ui-color-bg: var(--ui-color-neutral-50);--ui-color-bg-subtle: var(--ui-color-neutral-100);--ui-color-bg-muted: var(--ui-color-neutral-200);--ui-color-border: var(--ui-color-neutral-200);--ui-color-border-strong: var(--ui-color-neutral-300);--ui-color-interactive: var(--ui-color-primary);--ui-color-interactive-hover: var(--ui-color-primary-dark);--ui-color-focus: var(--ui-color-primary-light);--ui-opacity-disabled: 0.5;--ui-opacity-loading: 0.7;--ui-overlay-bg: rgb(0 0 0 / 0.5);--ui-overlay-bg-light: rgb(255 255 255 / 0.7);--ui-overlay-bg-blur: rgb(0 0 0 / 0.3);--ui-overlay-bg-subtle: rgb(0 0 0 / 0.1)}}
-@layer themes{[data-theme=dark]{--ui-color-text: var(--ui-color-neutral-100);--ui-color-text-muted: var(--ui-color-neutral-400);--ui-color-text-inverse: var(--ui-color-neutral-900);--ui-color-bg: var(--ui-color-neutral-900);--ui-color-bg-subtle: var(--ui-color-neutral-800);--ui-color-bg-muted: var(--ui-color-neutral-700);--ui-color-border: var(--ui-color-neutral-700);--ui-color-border-strong: var(--ui-color-neutral-600)}@media(prefers-color-scheme: dark){:root:not([data-theme]){--ui-color-text: var(--ui-color-neutral-100);--ui-color-text-muted: var(--ui-color-neutral-400);--ui-color-text-inverse: var(--ui-color-neutral-900);--ui-color-bg: var(--ui-color-neutral-900);--ui-color-bg-subtle: var(--ui-color-neutral-800);--ui-color-bg-muted: var(--ui-color-neutral-700);--ui-color-border: var(--ui-color-neutral-700);--ui-color-border-strong: var(--ui-color-neutral-600)}}@media(forced-colors: active){:root{--ui-color-focus: Highlight}}}
+@layer themes{[data-theme=dark]{--ui-color-text: var(--ui-color-neutral-100);--ui-color-text-muted: var(--ui-color-neutral-400);--ui-color-text-inverse: var(--ui-color-neutral-900);--ui-color-bg: var(--ui-color-neutral-900);--ui-color-bg-subtle: var(--ui-color-neutral-800);--ui-color-bg-muted: var(--ui-color-neutral-700);--ui-color-border: var(--ui-color-neutral-700);--ui-color-border-strong: var(--ui-color-neutral-600)}@media(prefers-color-scheme: dark){:root:not([data-theme]){--ui-color-text: var(--ui-color-neutral-100);--ui-color-text-muted: var(--ui-color-neutral-400);--ui-color-text-inverse: var(--ui-color-neutral-900);--ui-color-bg: var(--ui-color-neutral-900);--ui-color-bg-subtle: var(--ui-color-neutral-800);--ui-color-bg-muted: var(--ui-color-neutral-700);--ui-color-border: var(--ui-color-neutral-700);--ui-color-border-strong: var(--ui-color-neutral-600)}}@media(forced-colors: active){:root{--ui-color-focus: Highlight}}@media(prefers-contrast: more){:root{--ui-color-border: var(--ui-color-neutral-400);--ui-color-border-strong: var(--ui-color-neutral-600);--ui-color-text-muted: var(--ui-color-neutral-600);--ui-color-bg-subtle: var(--ui-color-neutral-200)}[data-theme=dark]{--ui-color-border: var(--ui-color-neutral-400);--ui-color-border-strong: var(--ui-color-neutral-300);--ui-color-text-muted: var(--ui-color-neutral-300);--ui-color-bg-subtle: var(--ui-color-neutral-700)}}@media(prefers-contrast: less){:root{--ui-color-border: var(--ui-color-neutral-150);--ui-color-border-strong: var(--ui-color-neutral-200)}}}
 @layer tokens{:root{--ui-spacing-xs: var(--ui-space-1);--ui-spacing-sm: var(--ui-space-2);--ui-spacing-md: var(--ui-space-4);--ui-spacing-lg: var(--ui-space-6);--ui-spacing-xl: var(--ui-space-8);--ui-spacing-gutter: var(--ui-space-4);--ui-spacing-section: var(--ui-space-8)}}
 :root{--ui-input-height: var(--ui-row-2);--ui-input-padding-x: var(--ui-space-2);--ui-input-padding-y: var(--ui-space-1);--ui-input-radius: var(--ui-radius-md);--ui-input-border-width: var(--ui-border-width-sm);--ui-input-bg: var(--ui-color-bg);--ui-input-border: var(--ui-color-border);--ui-input-border-focus: var(--ui-color-interactive);--ui-input-text: var(--ui-color-text);--ui-input-placeholder: var(--ui-color-text-muted)}
 @layer reset{*,*::before,*::after{box-sizing:border-box;margin:0}}
@@ -146,7 +146,7 @@
 @layer components.tokens{.ui-code-block{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_font-mono: var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace);--ui-_space-4: var(--ui-space-4, 2rem);--ui-_space-2: var(--ui-space-2, 1rem);--ui-_bg: var(--ui-code-block-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_color: var(--ui-code-block-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_border-color: var(--ui-code-block-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_padding: var(--ui-code-block-padding, var(--ui-space-3, 1.5rem));--ui-_font-size: var(--ui-code-block-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_line-height: var(--ui-code-block-line-height, var(--ui-leading-tight-sm, 1rem));--ui-_radius: var(--ui-code-block-radius, var(--ui-radius-md, 0.5rem))}.ui-code-block--compact{--ui-_padding: var(--ui-code-block-padding-compact, var(--ui-space-1, 0.5rem))}.ui-code-block--line-numbers{--ui-_line-number-color: var(--ui-code-block-line-number-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_line-number-border-color: var(--ui-code-block-line-number-border-color, var(--ui-color-border, hsl(220, 10%, 90%)))}}
 @layer components.styles{.ui-code-block{display:block;padding:calc(var(--ui-_padding) - var(--ui-_border-width-sm));overflow-x:auto;font-family:var(--ui-_font-mono);font-size:var(--ui-_font-size);line-height:var(--ui-_line-height);white-space:pre;color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius)}.ui-code-block__code{padding:0;font:inherit;color:inherit;background:none;border:none}.ui-code-block--line-numbers{counter-reset:line-number;padding-inline-start:0}.ui-code-block--line-numbers .ui-code-block__line{display:block}.ui-code-block--line-numbers .ui-code-block__line-number{display:inline-block;counter-increment:line-number;box-sizing:border-box;min-inline-size:var(--ui-_space-4);padding-inline-end:var(--ui-_space-2);margin-inline-end:var(--ui-_space-2);font-variant-numeric:tabular-nums;text-align:end;color:var(--ui-_line-number-color);border-inline-end:var(--ui-_border-width-sm) solid var(--ui-_line-number-border-color);user-select:none}.ui-code-block--line-numbers .ui-code-block__line-number::before{content:counter(line-number)}}
 @layer components.tokens{.ui-heading{--ui-_font-size: var(--ui-heading-font-size, var(--ui-font-size-xl, 1.5rem));--ui-_line-height: var(--ui-heading-line-height, var(--ui-leading-xl, 2rem));--ui-_weight: var(--ui-heading-weight, var(--ui-weight-bold, 700));--ui-_color: var(--ui-heading-color, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-heading--4xl{--ui-_font-size: var(--ui-heading-font-size-4xl, var(--ui-font-size-4xl, 2.5rem));--ui-_line-height: var(--ui-heading-line-height-4xl, var(--ui-leading-4xl, 3rem))}.ui-heading--3xl{--ui-_font-size: var(--ui-heading-font-size-3xl, var(--ui-font-size-3xl, 2rem));--ui-_line-height: var(--ui-heading-line-height-3xl, var(--ui-leading-3xl, 2.5rem))}.ui-heading--2xl{--ui-_font-size: var(--ui-heading-font-size-2xl, var(--ui-font-size-2xl, 1.75rem));--ui-_line-height: var(--ui-heading-line-height-2xl, var(--ui-leading-2xl, 2rem))}.ui-heading--xl{--ui-_font-size: var(--ui-heading-font-size-xl, var(--ui-font-size-xl, 1.5rem));--ui-_line-height: var(--ui-heading-line-height-xl, var(--ui-leading-xl, 2rem))}.ui-heading--lg{--ui-_font-size: var(--ui-heading-font-size-lg, var(--ui-font-size-lg, 1.25rem));--ui-_line-height: var(--ui-heading-line-height-lg, var(--ui-leading-lg, 2rem))}.ui-heading--md{--ui-_font-size: var(--ui-heading-font-size-md, var(--ui-font-size-md, 1rem));--ui-_line-height: var(--ui-heading-line-height-md, var(--ui-leading-tight-md, 1.5rem))}.ui-heading--sm{--ui-_font-size: var(--ui-heading-font-size-sm, var(--ui-font-size-sm, 0.875rem));--ui-_line-height: var(--ui-heading-line-height-sm, var(--ui-leading-tight-sm, 1rem))}}
-@layer components.styles{.ui-heading{margin:0;font-size:var(--ui-_font-size);font-weight:var(--ui-_weight);line-height:var(--ui-_line-height);color:var(--ui-_color)}}
+@layer components.styles{.ui-heading{margin:0;text-wrap:balance;font-size:var(--ui-_font-size);font-weight:var(--ui-_weight);line-height:var(--ui-_line-height);color:var(--ui-_color)}}
 @layer components.tokens{.ui-kbd{--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_space-quarter: var(--ui-space-quarter, 0.125rem);--ui-_font-size: var(--ui-kbd-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_font-family: var(--ui-kbd-font-family, var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace));--ui-_padding-x: var(--ui-kbd-padding-x, var(--ui-space-0, 0.25rem));--ui-_padding-y: var(--ui-kbd-padding-y, var(--ui-space-0, 0.25rem));--ui-_bg: var(--ui-kbd-bg, var(--ui-color-bg-subtle, hsl(220, 10%, 96%)));--ui-_border-color: var(--ui-kbd-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-kbd-radius, var(--ui-radius-sm, 0.25rem));--ui-_color: var(--ui-kbd-color, var(--ui-color-text, hsl(220, 10%, 10%)))}}
 @layer components.styles{.ui-kbd{display:inline-flex;align-items:center;padding:var(--ui-_padding-y) var(--ui-_padding-x);font-family:var(--ui-_font-family);font-size:var(--ui-_font-size);line-height:1;color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-_border-width-sm) solid var(--ui-_border-color);border-radius:var(--ui-_radius);box-shadow:0 var(--ui-_space-quarter) 0 var(--ui-_border-color)}}
 @layer components.tokens{.ui-link{--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_color-focus: var(--ui-color-focus, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_color: var(--ui-link-color, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_color-hover: var(--ui-link-color-hover, var(--ui-color-primary-hover, color-mix(in srgb, var(--ui-_color) 85%, black)));--ui-_color-visited: var(--ui-link-color-visited, var(--ui-_color));--ui-_decoration: var(--ui-link-decoration, underline);--ui-_decoration-hover: var(--ui-link-decoration-hover, underline)}.ui-link--muted{--ui-_color: var(--ui-link-color-muted, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_color-hover: var(--ui-link-color-muted-hover, var(--ui-color-text, hsl(220, 10%, 10%)))}.ui-link--subtle{--ui-_decoration: none;--ui-_decoration-hover: underline}}
@@ -157,11 +157,12 @@
 @layer components.styles{.ui-mark{padding:var(--ui-_padding-y) var(--ui-_padding-x);color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}}
 @layer utilities{.ui-m-0{margin:0}.ui-m-1{margin:var(--ui-space-1)}.ui-m-2{margin:var(--ui-space-2)}.ui-m-3{margin:var(--ui-space-3)}.ui-m-4{margin:var(--ui-space-4)}.ui-m-6{margin:var(--ui-space-6)}.ui-m-8{margin:var(--ui-space-8)}.ui-mt-0{margin-block-start:0}.ui-mt-1{margin-block-start:var(--ui-space-1)}.ui-mt-2{margin-block-start:var(--ui-space-2)}.ui-mt-3{margin-block-start:var(--ui-space-3)}.ui-mt-4{margin-block-start:var(--ui-space-4)}.ui-mt-6{margin-block-start:var(--ui-space-6)}.ui-mt-8{margin-block-start:var(--ui-space-8)}.ui-me-0{margin-inline-end:0}.ui-me-1{margin-inline-end:var(--ui-space-1)}.ui-me-2{margin-inline-end:var(--ui-space-2)}.ui-me-3{margin-inline-end:var(--ui-space-3)}.ui-me-4{margin-inline-end:var(--ui-space-4)}.ui-me-6{margin-inline-end:var(--ui-space-6)}.ui-me-8{margin-inline-end:var(--ui-space-8)}.ui-mb-0{margin-block-end:0}.ui-mb-1{margin-block-end:var(--ui-space-1)}.ui-mb-2{margin-block-end:var(--ui-space-2)}.ui-mb-3{margin-block-end:var(--ui-space-3)}.ui-mb-4{margin-block-end:var(--ui-space-4)}.ui-mb-6{margin-block-end:var(--ui-space-6)}.ui-mb-8{margin-block-end:var(--ui-space-8)}.ui-ms-0{margin-inline-start:0}.ui-ms-1{margin-inline-start:var(--ui-space-1)}.ui-ms-2{margin-inline-start:var(--ui-space-2)}.ui-ms-3{margin-inline-start:var(--ui-space-3)}.ui-ms-4{margin-inline-start:var(--ui-space-4)}.ui-ms-6{margin-inline-start:var(--ui-space-6)}.ui-ms-8{margin-inline-start:var(--ui-space-8)}.ui-mx-0{margin-inline:0}.ui-mx-1{margin-inline:var(--ui-space-1)}.ui-mx-2{margin-inline:var(--ui-space-2)}.ui-mx-3{margin-inline:var(--ui-space-3)}.ui-mx-4{margin-inline:var(--ui-space-4)}.ui-mx-auto{margin-inline:auto}.ui-my-0{margin-block:0}.ui-my-1{margin-block:var(--ui-space-1)}.ui-my-2{margin-block:var(--ui-space-2)}.ui-my-3{margin-block:var(--ui-space-3)}.ui-my-4{margin-block:var(--ui-space-4)}.ui-p-0{padding:0}.ui-p-1{padding:var(--ui-space-1)}.ui-p-2{padding:var(--ui-space-2)}.ui-p-3{padding:var(--ui-space-3)}.ui-p-4{padding:var(--ui-space-4)}.ui-p-6{padding:var(--ui-space-6)}.ui-p-8{padding:var(--ui-space-8)}.ui-pt-0{padding-block-start:0}.ui-pt-1{padding-block-start:var(--ui-space-1)}.ui-pt-2{padding-block-start:var(--ui-space-2)}.ui-pt-3{padding-block-start:var(--ui-space-3)}.ui-pt-4{padding-block-start:var(--ui-space-4)}.ui-pt-6{padding-block-start:var(--ui-space-6)}.ui-pt-8{padding-block-start:var(--ui-space-8)}.ui-pe-0{padding-inline-end:0}.ui-pe-1{padding-inline-end:var(--ui-space-1)}.ui-pe-2{padding-inline-end:var(--ui-space-2)}.ui-pe-3{padding-inline-end:var(--ui-space-3)}.ui-pe-4{padding-inline-end:var(--ui-space-4)}.ui-pe-6{padding-inline-end:var(--ui-space-6)}.ui-pe-8{padding-inline-end:var(--ui-space-8)}.ui-pb-0{padding-block-end:0}.ui-pb-1{padding-block-end:var(--ui-space-1)}.ui-pb-2{padding-block-end:var(--ui-space-2)}.ui-pb-3{padding-block-end:var(--ui-space-3)}.ui-pb-4{padding-block-end:var(--ui-space-4)}.ui-pb-6{padding-block-end:var(--ui-space-6)}.ui-pb-8{padding-block-end:var(--ui-space-8)}.ui-ps-0{padding-inline-start:0}.ui-ps-1{padding-inline-start:var(--ui-space-1)}.ui-ps-2{padding-inline-start:var(--ui-space-2)}.ui-ps-3{padding-inline-start:var(--ui-space-3)}.ui-ps-4{padding-inline-start:var(--ui-space-4)}.ui-ps-6{padding-inline-start:var(--ui-space-6)}.ui-ps-8{padding-inline-start:var(--ui-space-8)}.ui-px-0{padding-inline:0}.ui-px-1{padding-inline:var(--ui-space-1)}.ui-px-2{padding-inline:var(--ui-space-2)}.ui-px-3{padding-inline:var(--ui-space-3)}.ui-px-4{padding-inline:var(--ui-space-4)}.ui-py-0{padding-block:0}.ui-py-1{padding-block:var(--ui-space-1)}.ui-py-2{padding-block:var(--ui-space-2)}.ui-py-3{padding-block:var(--ui-space-3)}.ui-py-4{padding-block:var(--ui-space-4)}.ui-gap-0{gap:0}.ui-gap-1{gap:var(--ui-space-1)}.ui-gap-2{gap:var(--ui-space-2)}.ui-gap-3{gap:var(--ui-space-3)}.ui-gap-4{gap:var(--ui-space-4)}.ui-gap-6{gap:var(--ui-space-6)}.ui-gap-8{gap:var(--ui-space-8)}}
 @layer utilities{.ui-block{display:block}.ui-inline-block{display:inline-block}.ui-inline{display:inline}.ui-flex{display:flex}.ui-inline-flex{display:inline-flex}.ui-grid{display:grid}.ui-inline-grid{display:inline-grid}.ui-hidden{display:none}.ui-flex-row{flex-direction:row}.ui-flex-row-reverse{flex-direction:row-reverse}.ui-flex-col{flex-direction:column}.ui-flex-col-reverse{flex-direction:column-reverse}.ui-flex-wrap{flex-wrap:wrap}.ui-flex-nowrap{flex-wrap:nowrap}.ui-flex-wrap-reverse{flex-wrap:wrap-reverse}.ui-flex-1{flex:1 1 0%}.ui-flex-auto{flex:1 1 auto}.ui-flex-initial{flex:0 1 auto}.ui-flex-none{flex:none}.ui-grow{flex-grow:1}.ui-grow-0{flex-grow:0}.ui-shrink{flex-shrink:1}.ui-shrink-0{flex-shrink:0}.ui-justify-start{justify-content:flex-start}.ui-justify-end{justify-content:flex-end}.ui-justify-center{justify-content:center}.ui-justify-between{justify-content:space-between}.ui-justify-around{justify-content:space-around}.ui-justify-evenly{justify-content:space-evenly}.ui-items-start{align-items:flex-start}.ui-items-end{align-items:flex-end}.ui-items-center{align-items:center}.ui-items-baseline{align-items:baseline}.ui-items-stretch{align-items:stretch}.ui-self-auto{align-self:auto}.ui-self-start{align-self:flex-start}.ui-self-end{align-self:flex-end}.ui-self-center{align-self:center}.ui-self-stretch{align-self:stretch}.ui-visible{visibility:visible}.ui-invisible{visibility:hidden}.ui-sr-only{position:absolute;block-size:1px;inline-size:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border-width:0;clip-path:inset(50%)}}
-@layer utilities{.ui-text-start{text-align:start}.ui-text-center{text-align:center}.ui-text-end{text-align:end}.ui-text-justify{text-align:justify}.ui-font-normal{font-weight:var(--ui-weight-normal)}.ui-font-medium{font-weight:var(--ui-weight-medium)}.ui-font-semibold{font-weight:var(--ui-weight-semibold)}.ui-font-bold{font-weight:var(--ui-weight-bold)}.ui-text-xs{font-size:var(--ui-font-size-xs);line-height:var(--ui-leading-xs)}.ui-text-sm{font-size:var(--ui-font-size-sm);line-height:var(--ui-leading-sm)}.ui-text-md{font-size:var(--ui-font-size-md);line-height:var(--ui-leading-md)}.ui-text-lg{font-size:var(--ui-font-size-lg);line-height:var(--ui-leading-lg)}.ui-text-xl{font-size:var(--ui-font-size-xl);line-height:var(--ui-leading-xl)}.ui-text-2xl{font-size:var(--ui-font-size-2xl);line-height:var(--ui-leading-2xl)}.ui-text-3xl{font-size:var(--ui-font-size-3xl);line-height:var(--ui-leading-3xl)}.ui-text-4xl{font-size:var(--ui-font-size-4xl);line-height:var(--ui-leading-4xl)}.ui-text-lead{font-size:var(--ui-lead-size);font-weight:var(--ui-lead-weight);line-height:var(--ui-lead-line-height);letter-spacing:var(--ui-lead-tracking)}.ui-text-eyebrow{font-size:var(--ui-eyebrow-size);font-weight:var(--ui-eyebrow-weight);line-height:var(--ui-eyebrow-line-height);letter-spacing:var(--ui-eyebrow-tracking);text-transform:uppercase}.ui-text-caption{font-size:var(--ui-caption-size);font-weight:var(--ui-caption-weight);line-height:var(--ui-caption-line-height);letter-spacing:var(--ui-caption-tracking)}.ui-text-body-sm{font-size:var(--ui-body-sm-size);font-weight:var(--ui-body-sm-weight);line-height:var(--ui-body-sm-line-height);letter-spacing:var(--ui-body-sm-tracking)}.ui-font-sans{font-family:var(--ui-font-sans)}.ui-font-mono{font-family:var(--ui-font-mono)}.ui-underline{text-decoration:underline}.ui-line-through{text-decoration:line-through}.ui-no-underline{text-decoration:none}.ui-uppercase{text-transform:uppercase}.ui-lowercase{text-transform:lowercase}.ui-capitalize{text-transform:capitalize}.ui-normal-case{text-transform:none}.ui-text-primary{color:var(--ui-color-primary)}.ui-text-muted{color:var(--ui-color-text-muted)}.ui-text-success{color:var(--ui-color-success)}.ui-text-warning{color:var(--ui-color-warning)}.ui-text-danger{color:var(--ui-color-danger)}.ui-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-whitespace-normal{white-space:normal}.ui-whitespace-nowrap{white-space:nowrap}.ui-whitespace-pre{white-space:pre}.ui-whitespace-pre-wrap{white-space:pre-wrap}.ui-prose{max-inline-size:65ch}.ui-prose-sm{max-inline-size:45ch}.ui-prose-lg{max-inline-size:75ch}.ui-tracking-display{letter-spacing:var(--ui-tracking-display)}.ui-tracking-body{letter-spacing:var(--ui-tracking-body)}.ui-tracking-caps{letter-spacing:var(--ui-tracking-caps)}}
+@layer utilities{.ui-text-start{text-align:start}.ui-text-center{text-align:center}.ui-text-end{text-align:end}.ui-text-justify{text-align:justify}.ui-font-normal{font-weight:var(--ui-weight-normal)}.ui-font-medium{font-weight:var(--ui-weight-medium)}.ui-font-semibold{font-weight:var(--ui-weight-semibold)}.ui-font-bold{font-weight:var(--ui-weight-bold)}.ui-text-xs{font-size:var(--ui-font-size-xs);line-height:var(--ui-leading-xs)}.ui-text-sm{font-size:var(--ui-font-size-sm);line-height:var(--ui-leading-sm)}.ui-text-md{font-size:var(--ui-font-size-md);line-height:var(--ui-leading-md)}.ui-text-lg{font-size:var(--ui-font-size-lg);line-height:var(--ui-leading-lg)}.ui-text-xl{font-size:var(--ui-font-size-xl);line-height:var(--ui-leading-xl)}.ui-text-2xl{font-size:var(--ui-font-size-2xl);line-height:var(--ui-leading-2xl)}.ui-text-3xl{font-size:var(--ui-font-size-3xl);line-height:var(--ui-leading-3xl)}.ui-text-4xl{font-size:var(--ui-font-size-4xl);line-height:var(--ui-leading-4xl)}.ui-text-lead{font-size:var(--ui-lead-size);font-weight:var(--ui-lead-weight);line-height:var(--ui-lead-line-height);letter-spacing:var(--ui-lead-tracking)}.ui-text-eyebrow{font-size:var(--ui-eyebrow-size);font-weight:var(--ui-eyebrow-weight);line-height:var(--ui-eyebrow-line-height);letter-spacing:var(--ui-eyebrow-tracking);text-transform:uppercase}.ui-text-caption{font-size:var(--ui-caption-size);font-weight:var(--ui-caption-weight);line-height:var(--ui-caption-line-height);letter-spacing:var(--ui-caption-tracking)}.ui-text-body-sm{font-size:var(--ui-body-sm-size);font-weight:var(--ui-body-sm-weight);line-height:var(--ui-body-sm-line-height);letter-spacing:var(--ui-body-sm-tracking)}.ui-font-sans{font-family:var(--ui-font-sans)}.ui-font-mono{font-family:var(--ui-font-mono)}.ui-underline{text-decoration:underline}.ui-line-through{text-decoration:line-through}.ui-no-underline{text-decoration:none}.ui-uppercase{text-transform:uppercase}.ui-lowercase{text-transform:lowercase}.ui-capitalize{text-transform:capitalize}.ui-normal-case{text-transform:none}.ui-text-primary{color:var(--ui-color-primary)}.ui-text-muted{color:var(--ui-color-text-muted)}.ui-text-success{color:var(--ui-color-success)}.ui-text-warning{color:var(--ui-color-warning)}.ui-text-danger{color:var(--ui-color-danger)}.ui-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-whitespace-normal{white-space:normal}.ui-whitespace-nowrap{white-space:nowrap}.ui-whitespace-pre{white-space:pre}.ui-whitespace-pre-wrap{white-space:pre-wrap}.ui-text-balance{text-wrap:balance}.ui-text-pretty{text-wrap:pretty}.ui-text-nowrap{text-wrap:nowrap}.ui-truncate-2{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.ui-truncate-3{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}.ui-truncate-4{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}.ui-prose{max-inline-size:65ch}.ui-prose-sm{max-inline-size:45ch}.ui-prose-lg{max-inline-size:75ch}.ui-tracking-display{letter-spacing:var(--ui-tracking-display)}.ui-tracking-body{letter-spacing:var(--ui-tracking-body)}.ui-tracking-caps{letter-spacing:var(--ui-tracking-caps)}}
 @layer utilities{.ui-border{border:var(--ui-border-width-sm) solid var(--ui-color-border)}.ui-border-0{border:none}.ui-rounded{border-radius:var(--ui-radius-md)}.ui-rounded-none{border-radius:0}.ui-rounded-sm{border-radius:var(--ui-radius-sm)}.ui-rounded-lg{border-radius:var(--ui-radius-lg)}.ui-rounded-full{border-radius:var(--ui-radius-full)}.ui-bg{background:var(--ui-color-bg)}.ui-bg-subtle{background:var(--ui-color-bg-subtle)}.ui-bg-muted{background:var(--ui-color-bg-muted)}.ui-bg-transparent{background:rgba(0,0,0,0)}}
 @layer utilities{.ui-visually-hidden{position:absolute;block-size:calc(0.5rem/8);inline-size:calc(0.5rem/8);padding:0;margin:calc(0.5rem/-8);overflow:hidden;white-space:nowrap;border:0;clip:rect(0 0 0 0);clip-path:inset(50%)}.ui-visually-hidden--focusable:focus-visible,.ui-visually-hidden--focusable:active{position:static;block-size:auto;inline-size:auto;margin:0;overflow:visible;white-space:normal;clip:auto;clip-path:none}}
 @view-transition{navigation:auto}
 @layer utilities{@keyframes vt-fade-in{from{opacity:0}}@keyframes vt-fade-out{to{opacity:0}}@keyframes vt-slide-in-up{from{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-out-up{to{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-in-down{from{opacity:0;transform:translateY(-1.25rem)}}@keyframes vt-slide-out-down{to{opacity:0;transform:translateY(1.25rem)}}@keyframes vt-slide-in-start{from{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-out-start{to{opacity:0;transform:translateX(-1.25rem)}}@keyframes vt-slide-in-end{from{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-slide-out-end{to{opacity:0;transform:translateX(1.25rem)}}@keyframes vt-scale-in{from{opacity:0;transform:scale(0.95)}}@keyframes vt-scale-out{to{opacity:0;transform:scale(1.05)}}.ui-transition-name-sidebar{view-transition-name:sidebar}.ui-transition-name-main{view-transition-name:main}.ui-transition-name-header{view-transition-name:header}.ui-transition-name-hero{view-transition-name:hero}.ui-transition-name-card{view-transition-name:card}.ui-transition-name-modal{view-transition-name:modal}.ui-transition-name-slide-up{view-transition-name:slide-up}.ui-transition-name-slide-down{view-transition-name:slide-down}.ui-transition-name-slide-start{view-transition-name:slide-start}.ui-transition-name-slide-end{view-transition-name:slide-end}.ui-transition-name-scale{view-transition-name:scale}.ui-transition-name-fade{view-transition-name:fade}.ui-transition-name-none{view-transition-name:none}::view-transition-old(sidebar),::view-transition-new(sidebar),::view-transition-old(header),::view-transition-new(header){animation:none}::view-transition-old(root),::view-transition-new(root){animation-duration:var(--ui-duration-base);animation-timing-function:var(--ui-ease-default)}::view-transition-old(fade){animation:vt-fade-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(fade){animation:vt-fade-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-up),::view-transition-old(main){animation:vt-slide-out-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-up),::view-transition-new(main){animation:vt-slide-in-up var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-down){animation:vt-slide-out-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-down){animation:vt-slide-in-down var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-start){animation:vt-slide-out-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-start){animation:vt-slide-in-start var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(slide-end){animation:vt-slide-out-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(slide-end){animation:vt-slide-in-end var(--ui-duration-base) var(--ui-ease-out)}::view-transition-old(scale),::view-transition-old(modal),::view-transition-old(card){animation:vt-scale-out var(--ui-duration-base) var(--ui-ease-out)}::view-transition-new(scale),::view-transition-new(modal),::view-transition-new(card){animation:vt-scale-in var(--ui-duration-base) var(--ui-ease-out)}::view-transition-group(hero){animation-duration:var(--ui-duration-slow);animation-timing-function:var(--ui-ease-in-out)}@media(prefers-reduced-motion: reduce){::view-transition-old(*),::view-transition-new(*),::view-transition-group(*){animation-duration:0s !important}}}
+@layer utilities{.ui-snap-x{overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}.ui-snap-y{overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior-y:contain}.ui-snap-x-proximity{overflow-x:auto;scroll-snap-type:x proximity}.ui-snap-y-proximity{overflow-y:auto;scroll-snap-type:y proximity}.ui-snap-none{scroll-snap-type:none}.ui-snap-start{scroll-snap-align:start}.ui-snap-center{scroll-snap-align:center}.ui-snap-end{scroll-snap-align:end}.ui-snap-always{scroll-snap-stop:always}.ui-snap-p-1{scroll-padding:var(--ui-space-1)}.ui-snap-p-2{scroll-padding:var(--ui-space-2)}.ui-snap-p-4{scroll-padding:var(--ui-space-4)}}
 .ui-debug-grid,.ui-debug-grid-rows,.ui-debug-baseline{position:relative}
 .ui-debug-grid{--ui-debug-color: hsl(var(--ui-hue-primary, 220) 80% 50% / 0.15)}
 .ui-debug-grid::after{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-debug);block-size:100%;inline-size:100%;min-block-size:100vh;background-image:linear-gradient(to right, var(--ui-debug-color) 1px, transparent 1px),linear-gradient(to bottom, var(--ui-debug-color) 1px, transparent 1px);pointer-events:none;background-size:var(--ui-unit) var(--ui-unit);background-position:0 0}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teseor/css",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "CSS library - reset, primitives, components, utilities",
   "license": "MIT",
   "author": "letanure",

package/src/components/typography/heading/index.scss

@@ -70,6 +70,7 @@
 @layer components.styles {
   .heading {
     margin: 0;
+    text-wrap: balance;
 
     font-size: var(--_font-size);
     font-weight: var(--_weight);

package/src/config/tokens/accessibility.docs.json

@@ -84,6 +84,27 @@
         }
       ]
     },
+    {
+      "title": "Contrast Preference",
+      "description": "Adapts border visibility, muted text, and subtle backgrounds when users request more or less contrast via OS settings.",
+      "examples": [
+        {
+          "title": "High contrast",
+          "description": "When prefers-contrast: more is active, borders become stronger, muted text becomes more readable, and subtle backgrounds become more distinct.",
+          "code": "@media (prefers-contrast: more) {\n  :root {\n    --ui-color-border: var(--ui-color-neutral-400);\n    --ui-color-border-strong: var(--ui-color-neutral-600);\n    --ui-color-text-muted: var(--ui-color-neutral-600);\n    --ui-color-bg-subtle: var(--ui-color-neutral-200);\n  }\n}"
+        },
+        {
+          "title": "Low contrast",
+          "description": "When prefers-contrast: less is active, borders become softer.",
+          "code": "@media (prefers-contrast: less) {\n  :root {\n    --ui-color-border: var(--ui-color-neutral-150);\n    --ui-color-border-strong: var(--ui-color-neutral-200);\n  }\n}"
+        },
+        {
+          "title": "Affected tokens",
+          "description": "Overrides apply to semantic color tokens. All components using these tokens automatically adapt: cards, inputs, buttons, dividers, and any element with borders or muted text.",
+          "code": "// Tokens affected by prefers-contrast:\n// --ui-color-border (default: neutral-200 -> more: neutral-400)\n// --ui-color-border-strong (default: neutral-300 -> more: neutral-600)\n// --ui-color-text-muted (default: neutral-500 -> more: neutral-600)\n// --ui-color-bg-subtle (default: neutral-100 -> more: neutral-200)"
+        }
+      ]
+    },
     {
       "title": "Forced Colors (High Contrast)",
       "description": "Windows High Contrast Mode support. Focus rings use transparent outlines that become visible in forced-colors mode, and the focus color maps to the system Highlight color.",

package/src/config/tokens/semantic/colors/index.scss

@@ -64,4 +64,29 @@
       --ui-color-focus: Highlight;
     }
   }
+
+  // Increased contrast preference
+  @media (prefers-contrast: more) {
+    :root {
+      --ui-color-border: var(--ui-color-neutral-400);
+      --ui-color-border-strong: var(--ui-color-neutral-600);
+      --ui-color-text-muted: var(--ui-color-neutral-600);
+      --ui-color-bg-subtle: var(--ui-color-neutral-200);
+    }
+
+    [data-theme="dark"] {
+      --ui-color-border: var(--ui-color-neutral-400);
+      --ui-color-border-strong: var(--ui-color-neutral-300);
+      --ui-color-text-muted: var(--ui-color-neutral-300);
+      --ui-color-bg-subtle: var(--ui-color-neutral-700);
+    }
+  }
+
+  // Decreased contrast preference
+  @media (prefers-contrast: less) {
+    :root {
+      --ui-color-border: var(--ui-color-neutral-150);
+      --ui-color-border-strong: var(--ui-color-neutral-200);
+    }
+  }
 }

package/src/utilities/index.scss

@@ -4,3 +4,4 @@
 @forward "./border/index";
 @forward "./visually-hidden/index";
 @forward "./view-transition/index";
+@forward "./scroll-snap/index";

package/src/utilities/scroll-snap/index.scss

@@ -0,0 +1,66 @@
+// Scroll-snap utilities
+
+@layer utilities {
+  // ==========================================================================
+  // SCROLL SNAP CONTAINERS
+  // ==========================================================================
+  .snap-x {
+    overflow-x: auto;
+    scroll-snap-type: x mandatory;
+    overscroll-behavior-x: contain;
+  }
+
+  .snap-y {
+    overflow-y: auto;
+    scroll-snap-type: y mandatory;
+    overscroll-behavior-y: contain;
+  }
+
+  .snap-x-proximity {
+    overflow-x: auto;
+    scroll-snap-type: x proximity;
+  }
+
+  .snap-y-proximity {
+    overflow-y: auto;
+    scroll-snap-type: y proximity;
+  }
+
+  .snap-none {
+    scroll-snap-type: none;
+  }
+
+  // ==========================================================================
+  // SCROLL SNAP CHILDREN
+  // ==========================================================================
+  .snap-start {
+    scroll-snap-align: start;
+  }
+
+  .snap-center {
+    scroll-snap-align: center;
+  }
+
+  .snap-end {
+    scroll-snap-align: end;
+  }
+
+  .snap-always {
+    scroll-snap-stop: always;
+  }
+
+  // ==========================================================================
+  // SCROLL PADDING (on container, for fixed headers/offsets)
+  // ==========================================================================
+  .snap-p-1 {
+    scroll-padding: var(--ui-space-1);
+  }
+
+  .snap-p-2 {
+    scroll-padding: var(--ui-space-2);
+  }
+
+  .snap-p-4 {
+    scroll-padding: var(--ui-space-4);
+  }
+}

package/src/utilities/scroll-snap/scroll-snap.api.json

@@ -0,0 +1,19 @@
+{
+  "name": "scroll-snap",
+  "type": "utility",
+  "utilities": [
+    "snap-x",
+    "snap-y",
+    "snap-x-proximity",
+    "snap-y-proximity",
+    "snap-none",
+    "snap-start",
+    "snap-center",
+    "snap-end",
+    "snap-always",
+    "snap-p-1",
+    "snap-p-2",
+    "snap-p-4"
+  ],
+  "cssVars": []
+}

package/src/utilities/scroll-snap/scroll-snap.docs.json

@@ -0,0 +1,144 @@
+{
+  "id": "scroll-snap-utils",
+  "type": "utility",
+  "title": "Scroll Snap",
+  "description": "Scroll-snap utilities for carousels, horizontal lists, and snap-to-position scrolling.",
+  "api": "scroll-snap.api.json",
+  "sections": [
+    {
+      "title": "Horizontal Snap",
+      "description": "Snap children to start position on horizontal scroll.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-x ui-flex ui-gap-2 ui-p-2",
+              "style": { "max-inline-size": "20rem" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Item 1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Item 2"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Item 3"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Item 4"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-x ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">Item 1</div>\n  <div class=\"ui-snap-start\">Item 2</div>\n  <div class=\"ui-snap-start\">Item 3</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Center Snap",
+      "description": "Snap children to center position.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-x ui-flex ui-gap-2 ui-p-2",
+              "style": { "max-inline-size": "20rem" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-snap-center ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Center 1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-center ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Center 2"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-center ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Center 3"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-x ui-flex ui-gap-2\">\n  <div class=\"ui-snap-center\">Center 1</div>\n  <div class=\"ui-snap-center\">Center 2</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Vertical Snap",
+      "description": "Snap children on vertical scroll.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-y",
+              "style": { "max-block-size": "8rem" },
+              "children": [
+                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 1" },
+                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 2" },
+                { "tag": "div", "class": "ui-snap-start ui-card ui-p-2", "text": "Section 3" }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-y\" style=\"max-block-size: 8rem\">\n  <div class=\"ui-snap-start\">Section 1</div>\n  <div class=\"ui-snap-start\">Section 2</div>\n</div>"
+        }
+      ]
+    },
+    {
+      "title": "Scroll Padding",
+      "description": "Offset snap position for fixed headers or insets.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-snap-x ui-snap-p-2 ui-flex ui-gap-2 ui-p-2",
+              "style": { "max-inline-size": "20rem" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Padded 1"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Padded 2"
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-snap-start ui-card ui-p-2",
+                  "style": { "min-inline-size": "10rem" },
+                  "text": "Padded 3"
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-snap-x ui-snap-p-2 ui-flex ui-gap-2\">\n  <div class=\"ui-snap-start\">Padded 1</div>\n  <div class=\"ui-snap-start\">Padded 2</div>\n</div>"
+        }
+      ]
+    }
+  ]
+}

package/src/utilities/text/text.api.json

@@ -32,7 +32,13 @@
     "text-danger",
     "text-start",
     "text-center",
-    "text-end"
+    "text-end",
+    "text-balance",
+    "text-pretty",
+    "text-nowrap",
+    "truncate-2",
+    "truncate-3",
+    "truncate-4"
   ],
   "cssVars": []
 }

package/src/utilities/text/text.docs.json

@@ -127,6 +127,65 @@
           ]
         }
       ]
+    },
+    {
+      "title": "Text Wrap",
+      "description": "Control how text wraps across lines.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "p",
+              "class": "ui-text-balance ui-text-2xl ui-font-bold",
+              "style": { "max-inline-size": "20rem" },
+              "text": "Balanced: distributes text evenly across lines"
+            },
+            {
+              "tag": "p",
+              "class": "ui-text-pretty",
+              "style": { "max-inline-size": "20rem" },
+              "text": "Pretty: avoids orphans and widows for cleaner body text paragraphs that wrap naturally"
+            },
+            {
+              "tag": "p",
+              "class": "ui-text-nowrap",
+              "text": "Nowrap: prevents text from wrapping to the next line"
+            }
+          ],
+          "code": "<p class=\"ui-text-balance\">Balanced heading text</p>\n<p class=\"ui-text-pretty\">Pretty body text</p>\n<p class=\"ui-text-nowrap\">No wrap text</p>"
+        }
+      ]
+    },
+    {
+      "title": "Multi-line Truncation",
+      "description": "Clamp text to a specific number of lines with ellipsis.",
+      "examples": [
+        {
+          "layout": "column",
+          "items": [
+            {
+              "tag": "p",
+              "class": "ui-truncate-2",
+              "style": { "max-inline-size": "20rem" },
+              "text": "Truncate to 2 lines: This is a long paragraph that will be clamped after two lines of text. Any overflow content will be hidden and replaced with an ellipsis character."
+            },
+            {
+              "tag": "p",
+              "class": "ui-truncate-3",
+              "style": { "max-inline-size": "20rem" },
+              "text": "Truncate to 3 lines: This is a long paragraph that will be clamped after three lines of text. Any overflow content beyond the third line will be hidden and replaced with an ellipsis character at the end."
+            },
+            {
+              "tag": "p",
+              "class": "ui-truncate-4",
+              "style": { "max-inline-size": "20rem" },
+              "text": "Truncate to 4 lines: This is a long paragraph that will be clamped after four lines. It gives more room for content previews while still maintaining a consistent height. Overflow beyond line four is hidden with ellipsis."
+            }
+          ],
+          "code": "<p class=\"ui-truncate-2\">Long text clamped to 2 lines...</p>\n<p class=\"ui-truncate-3\">Long text clamped to 3 lines...</p>\n<p class=\"ui-truncate-4\">Long text clamped to 4 lines...</p>"
+        }
+      ]
     }
   ]
 }

package/src/utilities/text/text.scss

@@ -214,6 +214,48 @@
     white-space: pre-wrap;
   }
 
+  // ==========================================================================
+  // TEXT WRAP
+  // ==========================================================================
+  .text-balance {
+    text-wrap: balance;
+  }
+
+  .text-pretty {
+    text-wrap: pretty;
+  }
+
+  .text-nowrap {
+    text-wrap: nowrap;
+  }
+
+  // ==========================================================================
+  // MULTI-LINE TRUNCATION
+  // ==========================================================================
+  .truncate-2 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+
+    overflow: hidden;
+  }
+
+  .truncate-3 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+
+    overflow: hidden;
+  }
+
+  .truncate-4 {
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 4;
+
+    overflow: hidden;
+  }
+
   // ==========================================================================
   // LINE LENGTH (for readable text)
   // ==========================================================================