@teseor/css 1.13.0 → 1.14.0

package/dist/index.css

@@ -69,10 +69,12 @@
 @layer components.styles{.ui-disclosure{box-sizing:border-box;border-radius:var(--ui-_radius);outline:var(--ui-_border-width) solid var(--ui-_border-color);outline-offset:calc(var(--ui-_border-width)*-1)}.ui-disclosure:not([open]){block-size:var(--ui-_trigger-height)}.ui-disclosure__trigger{display:flex;align-items:center;justify-content:space-between;gap:calc(0.5rem*2);block-size:var(--ui-_trigger-height);inline-size:100%;padding-inline:var(--ui-_padding-x);font-weight:var(--ui-_weight-medium);line-height:1;text-align:start;cursor:pointer;list-style:none}.ui-disclosure__trigger::-webkit-details-marker{display:none}.ui-disclosure__trigger::marker{display:none}.ui-disclosure__trigger:hover{background:var(--ui-_color-bg-subtle)}.ui-disclosure__icon{flex-shrink:0;transition:transform var(--ui-_duration-fast) var(--ui-_ease-default)}.ui-disclosure[open] .ui-disclosure__icon{transform:rotate(180deg)}.ui-disclosure__content{padding:0 var(--ui-_padding-x) var(--ui-_padding-y)}.ui-disclosure--animate .ui-disclosure__content{animation:disclosure-open var(--ui-_duration-normal) var(--ui-_ease-default)}@keyframes disclosure-open{from{opacity:0;transform:translateY(calc(0.5rem * -1))}to{opacity:1;transform:translateY(0)}}.ui-disclosure--borderless{border:none;border-radius:0}.ui-disclosure--flush .ui-disclosure__trigger{padding-inline:0}.ui-disclosure--flush .ui-disclosure__content{padding-inline:0}@media(prefers-reduced-motion: reduce){.ui-disclosure--animate .ui-disclosure__content{animation:none}.ui-disclosure__icon{transition:none}}}
 @layer components.tokens{.ui-alert{--ui-_weight-medium: var(--ui-weight-medium, 500);--ui-_row-1: var(--ui-row-1, 1rem);--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_color-text: var(--ui-color-text, hsl(220, 10%, 10%));--ui-_accent: var(--ui-alert-accent, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_padding: var(--ui-alert-padding, var(--ui-space-2, 1rem));--ui-_border-width: var(--ui-alert-border-width, var(--ui-border-width-sm, 0.0625rem));--ui-_gap: var(--ui-alert-gap, var(--ui-space-1, 0.5rem));--ui-_radius: var(--ui-alert-radius, var(--ui-radius-md, 0.5rem));--ui-_bg: color-mix(in oklch, var(--ui-_accent) 8%, white);--ui-_border-color: var(--ui-_accent);--ui-_color: var(--ui-alert-color, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_font-size: var(--ui-alert-font-size, inherit);--ui-_padding-end: 0;--ui-_icon-color: var(--ui-_accent)}.ui-alert--info{--ui-_accent: var(--ui-color-primary, oklch(55% 0.22 250deg))}.ui-alert--success{--ui-_accent: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-alert--warning{--ui-_accent: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-alert--danger{--ui-_accent: var(--ui-color-danger, oklch(60% 0.22 25deg))}.ui-alert--sm{--ui-_padding: var(--ui-alert-padding-sm, var(--ui-space-1, 0.5rem));--ui-_gap: var(--ui-alert-gap-sm, calc(0.5rem * 0.5));--ui-_font-size: var(--ui-alert-font-size-sm, var(--ui-font-size-sm, 0.875rem))}.ui-alert--lg{--ui-_padding: var(--ui-alert-padding-lg, var(--ui-space-4, 2rem));--ui-_gap: var(--ui-alert-gap-lg, var(--ui-space-2, 1rem));--ui-_font-size: var(--ui-alert-font-size-lg, var(--ui-font-size-lg, 1.25rem))}.ui-alert--dismissible{--ui-_padding-end: var(--ui-alert-padding-end, calc(0.5rem * 5))}}
 @layer components.styles{.ui-alert{display:flex;align-items:flex-start;gap:var(--ui-_gap);padding:calc(var(--ui-_padding) - var(--ui-_border-width));padding-inline:var(--ui-_padding);padding-inline-end:calc(var(--ui-_padding) + var(--ui-_padding-end));font-size:var(--ui-_font-size);color:var(--ui-_color);background:var(--ui-_bg);border:var(--ui-_border-width) solid var(--ui-_border-color);border-radius:var(--ui-_radius);border-inline-start-width:calc(0.5rem*.5)}.ui-alert__icon{flex-shrink:0;color:var(--ui-_icon-color)}.ui-alert__content{flex:1;min-inline-size:0}.ui-alert__title{margin:0;font-weight:var(--ui-_weight-medium);line-height:var(--ui-_row-1)}.ui-alert__description{margin:0;margin-block-start:calc(0.5rem*1);font-size:var(--ui-_font-size-sm);line-height:var(--ui-_row-1);color:var(--ui-_color-text-muted)}.ui-alert__close{flex-shrink:0;align-self:flex-start;padding:0;color:var(--ui-_color-text-muted);background:none;border:none;cursor:pointer}.ui-alert__close:hover{color:var(--ui-_color-text)}}
+@property --ui-progress-value{syntax:"<percentage>";inherits:false;initial-value:0%}
 @layer components.tokens{.ui-progress{--ui-_duration-normal: var(--ui-duration-normal, 200ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_height: var(--ui-progress-height, calc(0.5rem * 1));--ui-_bg: var(--ui-progress-bg, var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.1)));--ui-_fill: var(--ui-progress-fill, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_radius: var(--ui-progress-radius, var(--ui-radius-full, 9999px))}.ui-progress--sm{--ui-_height: calc(0.5rem * 1)}.ui-progress--lg{--ui-_height: calc(0.5rem * 2)}}
-@layer components.styles{.ui-progress{position:relative;block-size:var(--ui-_height);overflow:hidden;background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-progress__bar{block-size:100%;background:var(--ui-_fill);border-radius:var(--ui-_radius);transition:inline-size var(--ui-_duration-normal) var(--ui-_ease-default)}.ui-progress--indeterminate .ui-progress__bar{inline-size:30%;animation:progress-indeterminate 1.5s infinite ease-in-out}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.ui-progress--striped .ui-progress__bar{background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size:0.5rem 0.5rem}.ui-progress--animated .ui-progress__bar{animation:progress-stripes 1s linear infinite}@keyframes progress-stripes{from{background-position:0.5rem 0}to{background-position:0 0}}@media(prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{animation:none}.ui-progress--animated .ui-progress__bar{animation:none}}.ui-progress--success{--ui-_fill: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-progress--warning{--ui-_fill: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-progress--danger{--ui-_fill: var(--ui-color-danger, oklch(60% 0.22 25deg))}}
+@layer components.styles{.ui-progress{position:relative;block-size:var(--ui-_height);overflow:hidden;background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-progress__bar{block-size:100%;inline-size:var(--ui-progress-value, auto);background:var(--ui-_fill);border-radius:var(--ui-_radius);transition:inline-size var(--ui-_duration-normal) var(--ui-_ease-default),--ui-progress-value var(--ui-_duration-normal) var(--ui-_ease-default)}.ui-progress--indeterminate .ui-progress__bar{inline-size:30%;animation:progress-indeterminate 1.5s infinite ease-in-out}@keyframes progress-indeterminate{0%{transform:translateX(-100%)}100%{transform:translateX(400%)}}.ui-progress--striped .ui-progress__bar{background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);background-size:0.5rem 0.5rem}.ui-progress--animated .ui-progress__bar{animation:progress-stripes 1s linear infinite}@keyframes progress-stripes{from{background-position:0.5rem 0}to{background-position:0 0}}@media(prefers-reduced-motion: reduce){.ui-progress--indeterminate .ui-progress__bar{animation:none}.ui-progress--animated .ui-progress__bar{animation:none}}.ui-progress--success{--ui-_fill: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-progress--warning{--ui-_fill: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-progress--danger{--ui-_fill: var(--ui-color-danger, oklch(60% 0.22 25deg))}}
+@property --ui-progress-circle-value{syntax:"<number>";inherits:false;initial-value:0}
 @layer components.tokens{.ui-progress-circle{--ui-_duration-slow: var(--ui-duration-slow, 250ms);--ui-_ease-default: var(--ui-ease-default, cubic-bezier(0.4, 0, 0.2, 1));--ui-_size: var(--ui-progress-circle-size, calc(var(--ui-unit, 0.5rem) * 6));--ui-_stroke-width: var(--ui-progress-circle-stroke-width, 8);--ui-_fill-color: var(--ui-progress-circle-fill-color, var(--ui-color-primary, oklch(55% 0.22 250deg)));--ui-_track-color: var(--ui-progress-circle-track-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_value: var(--ui-progress-circle-value, 0);--ui-_circumference: 282.743}.ui-progress-circle--sm{--ui-_size: var(--ui-progress-circle-size-sm, calc(var(--ui-unit, 0.5rem) * 4))}.ui-progress-circle--lg{--ui-_size: var(--ui-progress-circle-size-lg, calc(var(--ui-unit, 0.5rem) * 8))}.ui-progress-circle--xl{--ui-_size: var(--ui-progress-circle-size-xl, calc(var(--ui-unit, 0.5rem) * 12))}.ui-progress-circle--success{--ui-_fill-color: var(--ui-color-success, oklch(60% 0.18 145deg))}.ui-progress-circle--warning{--ui-_fill-color: var(--ui-color-warning, oklch(75% 0.18 70deg))}.ui-progress-circle--danger{--ui-_fill-color: var(--ui-color-danger, oklch(60% 0.22 25deg))}}
-@layer components.styles{.ui-progress-circle{display:inline-block;flex-shrink:0;block-size:var(--ui-_size);inline-size:var(--ui-_size);vertical-align:middle;transform:rotate(-90deg)}.ui-progress-circle__track{fill:none;stroke:var(--ui-_track-color);stroke-width:var(--ui-_stroke-width)}.ui-progress-circle__fill{fill:none;stroke:var(--ui-_fill-color);stroke-width:var(--ui-_stroke-width);stroke-linecap:round;stroke-dasharray:var(--ui-_circumference);stroke-dashoffset:calc(var(--ui-_circumference)*(1 - var(--ui-_value)/100));transition:stroke-dashoffset var(--ui-_duration-slow) var(--ui-_ease-default)}.ui-progress-circle--indeterminate{animation:progress-circle-rotate 1.4s linear infinite}.ui-progress-circle--indeterminate .ui-progress-circle__fill{stroke-dashoffset:calc(var(--ui-_circumference)*.25);transition:none}@keyframes progress-circle-rotate{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@media(prefers-reduced-motion: reduce){.ui-progress-circle--indeterminate{animation:none}}}
+@layer components.styles{.ui-progress-circle{display:inline-block;flex-shrink:0;block-size:var(--ui-_size);inline-size:var(--ui-_size);vertical-align:middle;transform:rotate(-90deg)}.ui-progress-circle__track{fill:none;stroke:var(--ui-_track-color);stroke-width:var(--ui-_stroke-width)}.ui-progress-circle__fill{fill:none;stroke:var(--ui-_fill-color);stroke-width:var(--ui-_stroke-width);stroke-linecap:round;stroke-dasharray:var(--ui-_circumference);stroke-dashoffset:calc(var(--ui-_circumference)*(1 - var(--ui-_value)/100));transition:stroke-dashoffset var(--ui-_duration-slow) var(--ui-_ease-default),--ui-progress-circle-value var(--ui-_duration-slow) var(--ui-_ease-default)}.ui-progress-circle--indeterminate{animation:progress-circle-rotate 1.4s linear infinite}.ui-progress-circle--indeterminate .ui-progress-circle__fill{stroke-dashoffset:calc(var(--ui-_circumference)*.25);transition:none}@keyframes progress-circle-rotate{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}@media(prefers-reduced-motion: reduce){.ui-progress-circle--indeterminate{animation:none}}}
 @layer components.tokens{.ui-skeleton{--ui-_bg: var(--ui-skeleton-bg, var(--ui-color-bg-subtle, rgba(0, 0, 0, 0.1)));--ui-_shimmer: var(--ui-skeleton-shimmer, rgba(255, 255, 255, 0.5));--ui-_radius: var(--ui-skeleton-radius, var(--ui-radius-sm, calc(0.5rem / 2)))}}
 @layer components.styles{.ui-skeleton{display:block;position:relative;overflow:hidden;background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, var(--ui-_shimmer) 50%, transparent 100%);animation:skeleton-shimmer 1.5s infinite;transform:translateX(-100%)}@keyframes skeleton-shimmer{100%{transform:translateX(100%)}}.ui-skeleton--text{block-size:calc(0.5rem*2);inline-size:100%}.ui-skeleton--heading{block-size:calc(0.5rem*3);inline-size:60%}.ui-skeleton--circle{block-size:calc(0.5rem*5);inline-size:calc(0.5rem*5);border-radius:50%}.ui-skeleton--rect{block-size:calc(0.5rem*20);inline-size:100%}.ui-skeleton--static::after{animation:none}.ui-skeleton--pulse{animation:skeleton-pulse 1.5s infinite ease-in-out}.ui-skeleton--pulse::after{display:none}@keyframes skeleton-pulse{0%,100%{opacity:1}50%{opacity:.5}}@media(prefers-reduced-motion: reduce){.ui-skeleton::after{animation:none}.ui-skeleton--pulse{animation:none}}}
 @layer components.tokens{.ui-spinner{--ui-_size: var(--ui-spinner-size, calc(var(--ui-unit, 0.5rem) * 4));--ui-_border-width: var(--ui-spinner-border-width, var(--ui-border-width-md, 0.125rem));--ui-_color: var(--ui-spinner-color, currentcolor);--ui-_track-color: var(--ui-spinner-track-color, transparent);--ui-_duration: var(--ui-spinner-duration, 750ms)}.ui-spinner--xs{--ui-_size: var(--ui-spinner-size-xs, calc(var(--ui-unit, 0.5rem) * 2));--ui-_border-width: var(--ui-spinner-border-width-xs, var(--ui-border-width-sm, 0.0625rem))}.ui-spinner--sm{--ui-_size: var(--ui-spinner-size-sm, calc(var(--ui-unit, 0.5rem) * 3));--ui-_border-width: var(--ui-spinner-border-width-sm, var(--ui-border-width-md, 0.125rem))}.ui-spinner--lg{--ui-_size: var(--ui-spinner-size-lg, calc(var(--ui-unit, 0.5rem) * 5));--ui-_border-width: var(--ui-spinner-border-width-lg, var(--ui-border-width-md, 0.125rem))}.ui-spinner--xl{--ui-_size: var(--ui-spinner-size-xl, calc(var(--ui-unit, 0.5rem) * 6));--ui-_border-width: var(--ui-spinner-border-width-xl, var(--ui-border-width-lg, 0.25rem))}}
@@ -138,7 +140,7 @@
 @layer components.tokens{.ui-popover{--ui-_row-1: var(--ui-row-1, 1rem);--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_font-size-md: var(--ui-font-size-md, 1rem);--ui-_weight-semibold: var(--ui-weight-semibold, 600);--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_bg: var(--ui-popover-bg, var(--ui-color-bg, white));--ui-_border-color: var(--ui-popover-border-color, var(--ui-color-border, hsl(220, 10%, 90%)));--ui-_radius: var(--ui-popover-radius, var(--ui-radius-md, calc(0.5rem * 1)));--ui-_shadow: var(--ui-popover-shadow, 0 calc(0.5rem / 2) calc(0.5rem * 2) rgb(0 0 0 / 0.15));--ui-_padding: var(--ui-popover-padding, calc(0.5rem * 2));--ui-_max-width: var(--ui-popover-max-width, calc(0.5rem * 40));--ui-_z: var(--ui-popover-z, var(--ui-z-popover, 500));--ui-_arrow-size: var(--ui-popover-arrow-size, calc(0.5rem))}}
 @layer components.styles{.ui-popover{position:absolute;z-index:var(--ui-_z);max-inline-size:var(--ui-_max-width);padding:var(--ui-_padding);line-height:var(--ui-_row-1);background:var(--ui-_bg);border-radius:var(--ui-_radius);outline:var(--ui-_border-width-sm) solid var(--ui-_border-color);box-shadow:var(--ui-_shadow);outline-offset:calc(var(--ui-_border-width-sm)*-1)}.ui-popover__header{padding-block-end:calc(0.5rem*2);margin-block-end:calc(0.5rem*2);box-shadow:inset 0 calc(var(--ui-_border-width-sm)*-1) 0 var(--ui-_border-color)}.ui-popover__title{margin:0;font-size:var(--ui-_font-size-md);font-weight:var(--ui-_weight-semibold)}.ui-popover--top::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-start-color:var(--ui-_bg);transform:translateX(-50%)}.ui-popover--top::before{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:calc(var(--ui-_arrow-size) + 1px) solid rgba(0,0,0,0);border-block-start-color:var(--ui-_border-color);transform:translateX(-50%)}.ui-popover--bottom::after{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-end-color:var(--ui-_bg);transform:translateX(-50%)}.ui-popover--bottom::before{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:calc(var(--ui-_arrow-size) + 1px) solid rgba(0,0,0,0);border-block-end-color:var(--ui-_border-color);transform:translateX(-50%)}.ui-popover--visible{opacity:1}.ui-popover--hidden{opacity:0;pointer-events:none}.ui-popover--animate{transition:opacity var(--ui-_duration-fast) var(--ui-_ease-default)}}
 @layer components.tokens{.ui-tooltip{--ui-_duration-fast: var(--ui-duration-fast, 100ms);--ui-_ease-default: var(--ui-ease-default, ease);--ui-_bg: var(--ui-tooltip-bg, var(--ui-color-text, hsl(220, 10%, 10%)));--ui-_color: var(--ui-tooltip-color, var(--ui-color-bg, hsl(220, 10%, 98%)));--ui-_radius: var(--ui-tooltip-radius, var(--ui-radius-sm, calc(0.5rem / 2)));--ui-_padding-x: var(--ui-tooltip-padding-x, calc(0.5rem * 1));--ui-_padding-y: var(--ui-tooltip-padding-y, calc(0.5rem / 2));--ui-_font-size: var(--ui-tooltip-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_z: var(--ui-tooltip-z, var(--ui-z-tooltip, 600));--ui-_arrow-size: var(--ui-tooltip-arrow-size, calc(0.5rem / 2))}}
-@layer components.styles{.ui-tooltip{position:absolute;z-index:var(--ui-_z);max-inline-size:calc(0.5rem*25);padding:var(--ui-_padding-y) var(--ui-_padding-x);font-size:var(--ui-_font-size);line-height:calc(0.5rem*2);text-align:center;white-space:nowrap;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-tooltip--top::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-start-color:var(--ui-_bg);transform:translateX(-50%)}.ui-tooltip--bottom::after{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-end-color:var(--ui-_bg);transform:translateX(-50%)}.ui-tooltip--start::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:100%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-inline-start-color:var(--ui-_bg);transform:translateY(-50%)}.ui-tooltip--end::after{content:"";position:absolute;inset-block-start:50%;inset-inline-end:100%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-inline-end-color:var(--ui-_bg);transform:translateY(-50%)}.ui-tooltip--visible{opacity:1}.ui-tooltip--hidden{opacity:0;pointer-events:none}.ui-tooltip--animate{transition:opacity var(--ui-_duration-fast) var(--ui-_ease-default)}}
+@layer components.styles{.ui-tooltip{position:absolute;z-index:var(--ui-_z);max-inline-size:calc(0.5rem*25);padding:var(--ui-_padding-y) var(--ui-_padding-x);font-size:var(--ui-_font-size);line-height:calc(0.5rem*2);text-align:center;white-space:nowrap;color:var(--ui-_color);background:var(--ui-_bg);border-radius:var(--ui-_radius)}.ui-tooltip--top::after{content:"";position:absolute;inset-block-start:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-start-color:var(--ui-_bg);transform:translateX(-50%)}.ui-tooltip--bottom::after{content:"";position:absolute;inset-block-end:100%;inset-inline-start:50%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-block-end-color:var(--ui-_bg);transform:translateX(-50%)}.ui-tooltip--start::after{content:"";position:absolute;inset-block-start:50%;inset-inline-start:100%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-inline-start-color:var(--ui-_bg);transform:translateY(-50%)}.ui-tooltip--end::after{content:"";position:absolute;inset-block-start:50%;inset-inline-end:100%;border:var(--ui-_arrow-size) solid rgba(0,0,0,0);border-inline-end-color:var(--ui-_bg);transform:translateY(-50%)}.ui-tooltip--visible{opacity:1}.ui-tooltip--hidden{opacity:0;pointer-events:none}.ui-tooltip--animate{transition:opacity var(--ui-_duration-fast) var(--ui-_ease-default)}@supports(anchor-name: --tooltip){.ui-tooltip--anchored{position:fixed;position-anchor:--tooltip;inset:auto;inset-area:block-start center;position-try-fallbacks:flip-block,flip-inline,flip-block flip-inline;margin-block-end:var(--ui-_arrow-size)}.ui-tooltip--anchored::after{content:none}.ui-tooltip-anchor{anchor-name:--tooltip}}}
 @layer components.tokens{.ui-blockquote{--ui-_space-1: var(--ui-space-1, 0.5rem);--ui-_font-size-sm: var(--ui-font-size-sm, 0.875rem);--ui-_leading-sm: var(--ui-leading-sm, 1.5rem);--ui-_color-text-muted: var(--ui-color-text-muted, hsl(220, 10%, 45%));--ui-_border-color: var(--ui-blockquote-border-color, var(--ui-color-border-strong, hsl(220, 10%, 80%)));--ui-_border-width: var(--ui-blockquote-border-width, var(--ui-border-width-lg, 0.25rem));--ui-_padding-inline: var(--ui-blockquote-padding-inline, var(--ui-space-3, 1.5rem));--ui-_color: var(--ui-blockquote-color, var(--ui-color-text-muted, hsl(220, 10%, 45%)));--ui-_font-size: var(--ui-blockquote-font-size, var(--ui-font-size-lg, 1.25rem));--ui-_line-height: var(--ui-blockquote-line-height, var(--ui-leading-lg, 2rem))}.ui-blockquote--accent{--ui-_border-color: var(--ui-color-primary, oklch(55% 0.22 250deg))}}
 @layer components.styles{.ui-blockquote{padding-inline-start:var(--ui-_padding-inline);margin:0;font-size:var(--ui-_font-size);font-style:italic;line-height:var(--ui-_line-height);color:var(--ui-_color);border-inline-start:var(--ui-_border-width) solid var(--ui-_border-color)}.ui-blockquote__cite{display:block;margin-block-start:var(--ui-_space-1);font-size:var(--ui-_font-size-sm);font-style:normal;line-height:var(--ui-_leading-sm);color:var(--ui-_color-text-muted)}}
 @layer components.tokens{.ui-code{--ui-_font-mono: var(--ui-font-mono, ui-monospace, sfmono-regular, SF Mono, menlo, consolas, Liberation Mono, monospace);--ui-_leading-tight-sm: var(--ui-leading-tight-sm, 1rem);--ui-_border-width-sm: var(--ui-border-width-sm, 0.0625rem);--ui-_font-size: var(--ui-code-font-size, var(--ui-font-size-sm, 0.875rem));--ui-_bg: var(--ui-code-bg, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_padding-x: var(--ui-code-padding-x, var(--ui-space-1, 0.5rem));--ui-_padding-y: var(--ui-code-padding-y, var(--ui-space-0, 0.25rem));--ui-_radius: var(--ui-code-radius, var(--ui-radius-sm, 0.25rem))}.ui-code--sm{--ui-_font-size: var(--ui-font-size-xs, 0.75rem)}.ui-code-block{--ui-_font-size: var(--ui-code-font-size-block, var(--ui-font-size-sm, 0.875rem));--ui-_bg: var(--ui-code-bg-block, var(--ui-color-bg-muted, hsl(220, 10%, 90%)));--ui-_padding: var(--ui-code-padding-block, var(--ui-space-3, 1.5rem));--ui-_radius: var(--ui-code-radius-block, var(--ui-radius-md, 0.5rem));--ui-_border-color: var(--ui-code-border-color-block, var(--ui-color-border, hsl(220, 10%, 90%)))}}
@@ -163,6 +165,7 @@
 @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)}}
+@layer utilities{@supports(animation-timeline: scroll()){.ui-scroll-progress{position:fixed;inset-block-start:0;inset-inline-start:0;z-index:var(--ui-z-toast, 700);block-size:var(--ui-scroll-progress-height, var(--ui-space-half, 0.25rem));inline-size:100%;background:var(--ui-scroll-progress-bg, var(--ui-color-primary));transform-origin:inline-start;scale:0 1;animation:scroll-progress-fill auto linear;animation-timeline:scroll()}@keyframes scroll-progress-fill{to{scale:1 1}}.ui-view-fade{animation:view-fade-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-fade-in{from{opacity:0}to{opacity:1}}.ui-view-slide-up{animation:view-slide-up-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-slide-up-in{from{opacity:0;transform:translateY(var(--ui-space-4, 2rem))}to{opacity:1;transform:translateY(0)}}.ui-view-slide-start{animation:view-slide-start-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-slide-start-in{from{opacity:0;transform:translateX(calc(var(--ui-space-4, 2rem) * -1))}to{opacity:1;transform:translateX(0)}}.ui-view-scale{animation:view-scale-in auto linear both;animation-timeline:view();animation-range:entry 0% entry 100%}@keyframes view-scale-in{from{opacity:0;scale:.9}to{opacity:1;scale:1}}@media(prefers-reduced-motion: reduce){.ui-scroll-progress,.ui-view-fade,.ui-view-slide-up,.ui-view-slide-start,.ui-view-scale{opacity:1;transform:none;scale:1 1;animation:none}}}}
 @layer utilities{.ui-container-inline{container-type:inline-size}.ui-container-size{container-type:size}.ui-container-normal{container-type:normal}}
 .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)}

package/package.json

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

package/src/components/feedback/progress/index.scss

@@ -5,6 +5,15 @@
 // Progress - progress bar indicator
 // Shows completion status of a task
 
+// Register --ui-progress-value as typed property so browsers can
+// interpolate percentage values — enables smooth CSS-only transitions
+// when value changes via JS (no inline width needed)
+@property --ui-progress-value {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 0%;
+}
+
 @layer components.tokens {
   .progress {
     --_duration-normal: var(--ui-duration-normal, #{t.$duration-normal});
@@ -42,11 +51,16 @@
 
   .progress__bar {
     block-size: 100%;
+    // Typed --ui-progress-value enables CSS-only transitions;
+    // falls back to inline style width for older browsers
+    inline-size: var(--ui-progress-value, auto);
 
     background: var(--_fill);
     border-radius: var(--_radius);
 
-    transition: inline-size var(--_duration-normal) var(--_ease-default);
+    transition:
+      inline-size var(--_duration-normal) var(--_ease-default),
+      --ui-progress-value var(--_duration-normal) var(--_ease-default);
   }
 
   // Indeterminate state - animated stripe

package/src/components/feedback/progress/progress.docs.json

@@ -230,6 +230,59 @@
           "code": "<div class=\"ui-progress ui-progress--indeterminate\"\n     role=\"progressbar\" aria-label=\"Loading\">\n  <div class=\"ui-progress__bar\"></div>\n</div>"
         }
       ]
+    },
+    {
+      "title": "Typed Custom Property",
+      "description": "Set value via --ui-progress-value instead of inline width. The @property registration enables smooth CSS transitions when JS updates the value.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "display: flex; flex-direction: column; gap: var(--ui-space-2);"
+              },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-progress",
+                  "attrs": {
+                    "role": "progressbar",
+                    "aria-valuenow": "25",
+                    "aria-valuemin": "0",
+                    "aria-valuemax": "100"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-progress__bar",
+                      "style": { "--ui-progress-value": "25%" }
+                    }
+                  ]
+                },
+                {
+                  "tag": "div",
+                  "class": "ui-progress",
+                  "attrs": {
+                    "role": "progressbar",
+                    "aria-valuenow": "75",
+                    "aria-valuemin": "0",
+                    "aria-valuemax": "100"
+                  },
+                  "children": [
+                    {
+                      "tag": "div",
+                      "class": "ui-progress__bar",
+                      "style": { "--ui-progress-value": "75%" }
+                    }
+                  ]
+                }
+              ]
+            }
+          ],
+          "code": "<!-- CSS-only smooth transitions via @property -->\n<div class=\"ui-progress\" role=\"progressbar\" aria-valuenow=\"75\">\n  <div class=\"ui-progress__bar\"\n       style=\"--ui-progress-value: 75%;\"></div>\n</div>\n\n<!-- Update from JS: el.style.setProperty('--ui-progress-value', '90%') -->"
+        }
+      ]
     }
   ],
   "customization": [
@@ -252,6 +305,11 @@
       "token": "--ui-progress-radius",
       "default": "var(--ui-radius-full)",
       "description": "Border radius"
+    },
+    {
+      "token": "--ui-progress-value",
+      "default": "0%",
+      "description": "Progress value as percentage (typed via @property for smooth transitions)"
     }
   ]
 }

package/src/components/feedback/progress-circle/index.scss

@@ -5,6 +5,14 @@
 // Progress Circle - circular progress indicator
 // Uses SVG circles with stroke-dasharray/dashoffset driven by --ui-progress-circle-value
 
+// Register typed property so browsers can interpolate the value
+// — enables smooth stroke-dashoffset transitions via CSS alone
+@property --ui-progress-circle-value {
+  syntax: "<number>";
+  inherits: false;
+  initial-value: 0;
+}
+
 @layer components.tokens {
   .progress-circle {
     --_duration-slow: var(--ui-duration-slow, #{t.$duration-slow});
@@ -78,7 +86,9 @@
     stroke-dasharray: var(--_circumference);
     stroke-dashoffset: calc(var(--_circumference) * (1 - var(--_value) / 100));
 
-    transition: stroke-dashoffset var(--_duration-slow) var(--_ease-default);
+    transition:
+      stroke-dashoffset var(--_duration-slow) var(--_ease-default),
+      --ui-progress-circle-value var(--_duration-slow) var(--_ease-default);
   }
 
   // Indeterminate - rotating partial arc

package/src/components/overlays/tooltip/index.scss

@@ -114,4 +114,29 @@
   .tooltip--animate {
     transition: opacity var(--_duration-fast) var(--_ease-default);
   }
+
+  // Anchor-positioned tooltip (progressive enhancement)
+  // Browser auto-positions relative to anchor element, no JS needed
+  // @modifier boolean anchored
+  @supports (anchor-name: --tooltip) {
+    .tooltip--anchored {
+      position: fixed;
+      position-anchor: --tooltip;
+      inset: auto;
+      inset-area: block-start center;
+      position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
+
+      margin-block-end: var(--_arrow-size);
+    }
+
+    // Hide CSS arrows — browser handles positioning
+    .tooltip--anchored::after {
+      content: none;
+    }
+
+    // Anchor source: place on trigger element
+    .tooltip-anchor {
+      anchor-name: --tooltip;
+    }
+  }
 }

package/src/components/overlays/tooltip/tooltip.api.json

@@ -11,6 +11,9 @@
     },
     "animate": {
       "type": "boolean"
+    },
+    "anchored": {
+      "type": "boolean"
     }
   },
   "cssVars": [

package/src/components/overlays/tooltip/tooltip.docs.json

@@ -64,6 +64,36 @@
           "code": "<span class=\"ui-tooltip ui-tooltip--top ui-tooltip--animate ui-tooltip--visible\">\n  Animated tooltip\n</span>"
         }
       ]
+    },
+    {
+      "title": "Anchor Positioned",
+      "description": "Browser-native positioning via CSS Anchor Positioning. No JS needed for placement. Wrapped in @supports — falls back to manual positioning in unsupported browsers.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": {
+                "style": "position: relative; padding: var(--ui-space-4); display: flex; gap: var(--ui-space-4);"
+              },
+              "children": [
+                {
+                  "tag": "button",
+                  "class": "ui-button",
+                  "attrs": { "style": "anchor-name: --tooltip;" },
+                  "text": "Hover me"
+                },
+                {
+                  "tag": "span",
+                  "class": "ui-tooltip ui-tooltip--anchored ui-tooltip--visible",
+                  "text": "Anchored tooltip"
+                }
+              ]
+            }
+          ],
+          "code": "<!-- Add anchor-name: --tooltip to trigger -->\n<button class=\"ui-button\" style=\"anchor-name: --tooltip\">Hover me</button>\n<span class=\"ui-tooltip ui-tooltip--anchored ui-tooltip--visible\">\n  Anchored tooltip\n</span>\n\n<!-- Or use the helper class -->\n<button class=\"ui-button\" style=\"anchor-name: --tooltip\">Trigger</button>"
+        }
+      ]
     }
   ],
   "customization": [

package/src/utilities/index.scss

@@ -5,4 +5,5 @@
 @forward "./visually-hidden/index";
 @forward "./view-transition/index";
 @forward "./scroll-snap/index";
+@forward "./scroll-animation/index";
 @forward "./container/index";

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

@@ -0,0 +1,136 @@
+@use '../../config/tokens/variables' as t;
+// Scroll-driven animation utilities
+// Progressive enhancement: all rules wrapped in @supports
+
+@layer utilities {
+  @supports (animation-timeline: scroll()) {
+    // ========================================================================
+    // SCROLL PROGRESS INDICATOR
+    // Fixed bar at top of viewport showing page scroll progress
+    // ========================================================================
+    .scroll-progress {
+      position: fixed;
+      inset-block-start: 0;
+      inset-inline-start: 0;
+      z-index: var(--ui-z-toast, #{t.$z-toast});
+
+      block-size: var(--ui-scroll-progress-height, var(--ui-space-half, #{t.$space-0}));
+      inline-size: 100%;
+
+      background: var(--ui-scroll-progress-bg, var(--ui-color-primary));
+      transform-origin: inline-start;
+      scale: 0 1;
+
+      animation: scroll-progress-fill auto linear;
+      animation-timeline: scroll();
+    }
+
+    @keyframes scroll-progress-fill {
+      to {
+        scale: 1 1;
+      }
+    }
+
+    // ========================================================================
+    // VIEW-DRIVEN FADE IN
+    // Fade in when element enters viewport
+    // ========================================================================
+    .view-fade {
+      animation: view-fade-in auto linear both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 100%;
+    }
+
+    @keyframes view-fade-in {
+      from {
+        opacity: 0;
+      }
+
+      to {
+        opacity: 1;
+      }
+    }
+
+    // ========================================================================
+    // VIEW-DRIVEN SLIDE UP
+    // Slide up and fade in when element enters viewport
+    // ========================================================================
+    .view-slide-up {
+      animation: view-slide-up-in auto linear both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 100%;
+    }
+
+    @keyframes view-slide-up-in {
+      from {
+        opacity: 0;
+        transform: translateY(var(--ui-space-4, #{t.$space-4}));
+      }
+
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+
+    // ========================================================================
+    // VIEW-DRIVEN SLIDE START (left in LTR)
+    // ========================================================================
+    .view-slide-start {
+      animation: view-slide-start-in auto linear both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 100%;
+    }
+
+    @keyframes view-slide-start-in {
+      from {
+        opacity: 0;
+        transform: translateX(calc(var(--ui-space-4, #{t.$space-4}) * -1));
+      }
+
+      to {
+        opacity: 1;
+        transform: translateX(0);
+      }
+    }
+
+    // ========================================================================
+    // VIEW-DRIVEN SCALE
+    // Scale up and fade in on viewport entry
+    // ========================================================================
+    .view-scale {
+      animation: view-scale-in auto linear both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 100%;
+    }
+
+    @keyframes view-scale-in {
+      from {
+        opacity: 0;
+        scale: 0.9;
+      }
+
+      to {
+        opacity: 1;
+        scale: 1;
+      }
+    }
+
+    // ========================================================================
+    // ACCESSIBILITY: disable all scroll-driven animations for reduced motion
+    // ========================================================================
+    @media (prefers-reduced-motion: reduce) {
+      .scroll-progress,
+      .view-fade,
+      .view-slide-up,
+      .view-slide-start,
+      .view-scale {
+        opacity: 1;
+        transform: none;
+        scale: 1 1;
+
+        animation: none;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,17 @@
+{
+  "name": "scroll-animation",
+  "type": "utility",
+  "utilities": ["scroll-progress", "view-fade", "view-slide-up", "view-slide-start", "view-scale"],
+  "cssVars": [
+    {
+      "name": "--ui-scroll-progress-height",
+      "default": "var(--ui-space-half)",
+      "description": "Scroll progress indicator height"
+    },
+    {
+      "name": "--ui-scroll-progress-bg",
+      "default": "var(--ui-color-primary)",
+      "description": "Scroll progress indicator color"
+    }
+  ]
+}

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

@@ -0,0 +1,100 @@
+{
+  "id": "scroll-animation-utils",
+  "type": "utility",
+  "title": "Scroll Animation",
+  "description": "Scroll-driven animation utilities for progress indicators and viewport-triggered effects. Wrapped in @supports — no impact on unsupported browsers.",
+  "api": "scroll-animation.api.json",
+  "sections": [
+    {
+      "title": "Scroll Progress Indicator",
+      "description": "Fixed bar at the top of the viewport that fills as the user scrolls down.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "attrs": { "style": "position: relative; block-size: 12rem; overflow-y: auto;" },
+              "children": [
+                {
+                  "tag": "div",
+                  "class": "ui-scroll-progress",
+                  "attrs": { "style": "position: absolute;" }
+                },
+                {
+                  "tag": "div",
+                  "attrs": { "style": "block-size: 40rem; padding: var(--ui-space-2);" },
+                  "children": [{ "tag": "p", "text": "Scroll down to see the progress bar fill." }]
+                }
+              ]
+            }
+          ],
+          "code": "<div class=\"ui-scroll-progress\"></div>\n<!-- Fills as page scrolls -->"
+        }
+      ]
+    },
+    {
+      "title": "View Fade",
+      "description": "Elements fade in as they enter the viewport.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-view-fade ui-card ui-p-2",
+              "text": "I fade in on scroll"
+            }
+          ],
+          "code": "<div class=\"ui-view-fade\">I fade in on scroll</div>"
+        }
+      ]
+    },
+    {
+      "title": "View Slide Up",
+      "description": "Elements slide up and fade in on viewport entry.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-view-slide-up ui-card ui-p-2",
+              "text": "I slide up into view"
+            }
+          ],
+          "code": "<div class=\"ui-view-slide-up\">I slide up into view</div>"
+        }
+      ]
+    },
+    {
+      "title": "View Slide Start",
+      "description": "Elements slide in from the start edge (left in LTR) on viewport entry.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-view-slide-start ui-card ui-p-2",
+              "text": "I slide from the start"
+            }
+          ],
+          "code": "<div class=\"ui-view-slide-start\">I slide from the start</div>"
+        }
+      ]
+    },
+    {
+      "title": "View Scale",
+      "description": "Elements scale up and fade in on viewport entry.",
+      "examples": [
+        {
+          "items": [
+            {
+              "tag": "div",
+              "class": "ui-view-scale ui-card ui-p-2",
+              "text": "I scale into view"
+            }
+          ],
+          "code": "<div class=\"ui-view-scale\">I scale into view</div>"
+        }
+      ]
+    }
+  ]
+}