@teseor/css 1.12.0 → 1.14.0

package/dist/index.css

@@ -23,7 +23,7 @@
 @layer primitives{.ui-container{--ui-_unit: var(--ui-unit);--ui-_space-4: var(--ui-space-4);max-inline-size:var(--ui-container-width, calc(var(--ui-_unit) * 120));padding-inline:var(--ui-_space-4)}.ui-container--center{margin-inline:auto}.ui-container--sm{--ui-container-width: calc(var(--ui-_unit) * 80)}.ui-container--md{--ui-container-width: calc(var(--ui-_unit) * 100)}.ui-container--lg{--ui-container-width: calc(var(--ui-_unit) * 120)}.ui-container--xl{--ui-container-width: calc(var(--ui-_unit) * 160)}.ui-container--full{max-inline-size:none}}
 @layer primitives{.ui-content{--ui-_unit: var(--ui-unit);--ui-_padding-block: var(--ui-content-padding-block, var(--ui-space-4));--ui-_padding-inline: var(--ui-content-padding-inline, var(--ui-space-4));--ui-_gap: var(--ui-content-gap, var(--ui-space-3));display:flex;flex-direction:column;gap:var(--ui-_gap);padding-block:var(--ui-_padding-block);padding-inline:var(--ui-_padding-inline)}.ui-content--prose{max-inline-size:calc(var(--ui-_unit)*80)}.ui-content--flush{padding-block:0;padding-inline:0}}
 @layer primitives{.ui-footer{--ui-_space-2: var(--ui-space-2);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_hue-primary: var(--ui-hue-primary, 220);--ui-_height: var(--ui-footer-height, var(--ui-row-3));--ui-_bg: var(--ui-footer-bg, var(--ui-color-bg));--ui-_padding-inline: var(--ui-footer-padding-inline, var(--ui-space-3));--ui-_border-color: var(--ui-footer-border-color, var(--ui-color-border));--ui-_z: var(--ui-footer-z, var(--ui-z-sticky));display:flex;align-items:center;z-index:var(--ui-_z);block-size:var(--ui-_height);padding-inline:var(--ui-_padding-inline);background:var(--ui-_bg)}.ui-footer__start{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-footer__center{display:flex;flex:1;align-items:center;justify-content:center;gap:var(--ui-_space-2)}.ui-footer__end{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-footer--sticky{position:sticky;inset-block-end:0}.ui-footer--fixed{position:fixed;inset-block-end:0;inset-inline:0}.ui-footer--bordered{box-shadow:inset 0 var(--ui-_border-width-sm) 0 0 var(--ui-_border-color)}.ui-footer--raised{box-shadow:0 calc(var(--ui-_border-width-sm)*-1) 6px hsl(var(--ui-_hue-primary), 10%, 20%, 0.08)}}
-@layer primitives{.ui-grid{--ui-_space-4: var(--ui-space-4);display:grid;gap:var(--ui-grid-gap, var(--ui-_space-4));grid-template-columns:repeat(var(--ui-grid-cols, 1), minmax(0, 1fr))}.ui-grid--2{--ui-grid-cols: 2}.ui-grid--3{--ui-grid-cols: 3}.ui-grid--4{--ui-grid-cols: 4}.ui-grid--auto{grid-template-columns:repeat(auto-fit, minmax(var(--ui-grid-min, 16rem), 1fr))}}
+@layer primitives{.ui-grid{--ui-_space-4: var(--ui-space-4);display:grid;gap:var(--ui-grid-gap, var(--ui-_space-4));grid-template-columns:repeat(var(--ui-grid-cols, 1), minmax(0, 1fr))}.ui-grid--2{--ui-grid-cols: 2}.ui-grid--3{--ui-grid-cols: 3}.ui-grid--4{--ui-grid-cols: 4}.ui-grid--auto{grid-template-columns:repeat(auto-fit, minmax(var(--ui-grid-min, 16rem), 1fr))}.ui-grid--subgrid{display:grid;grid-template-columns:subgrid}.ui-grid--subgrid-rows{display:grid;grid-template-rows:subgrid}.ui-grid--subgrid-both{display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid}.ui-grid-col-span-2{grid-column:span 2}.ui-grid-col-span-3{grid-column:span 3}.ui-grid-col-span-4{grid-column:span 4}.ui-grid-col-span-full{grid-column:1/-1}.ui-grid-row-span-2{grid-row:span 2}.ui-grid-row-span-3{grid-row:span 3}.ui-grid-row-span-full{grid-row:1/-1}}
 @layer primitives{.ui-main{--ui-_unit: var(--ui-unit);padding-block-start:var(--ui-topbar-height, 0);margin-inline-start:var(--ui-sidebar-width, calc(var(--ui-_unit) * 30))}.ui-main--sidebar-end{margin-inline-start:0;margin-inline-end:var(--ui-sidebar-width, calc(var(--ui-_unit) * 30))}.ui-main--full{margin-inline-start:0;margin-inline-end:0}}
 @layer primitives{.ui-nav-rail{--ui-_space-2: var(--ui-space-2);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_width: var(--ui-nav-rail-width, var(--ui-row-4));--ui-_bg: var(--ui-nav-rail-bg, var(--ui-color-bg-subtle));--ui-_border-color: var(--ui-nav-rail-border-color, var(--ui-color-border));--ui-_gap: var(--ui-nav-rail-gap, var(--ui-space-1));--ui-_z: var(--ui-nav-rail-z, var(--ui-z-sticky));display:flex;flex-direction:column;align-items:center;position:fixed;inset-block:var(--ui-topbar-height, 0);inset-inline-start:0;z-index:var(--ui-_z);inline-size:var(--ui-_width);padding-block:var(--ui-_space-2);background:var(--ui-_bg);box-shadow:inset calc(var(--ui-_border-width-sm)*-1) 0 0 0 var(--ui-_border-color)}.ui-nav-rail__items{display:flex;flex:1;flex-direction:column;align-items:center;gap:var(--ui-_gap)}.ui-nav-rail__actions{display:flex;flex-direction:column;align-items:center;gap:var(--ui-_gap);margin-block-start:auto}.ui-nav-rail--end{inset-inline-start:auto;inset-inline-end:0;box-shadow:inset var(--ui-_border-width-sm) 0 0 0 var(--ui-_border-color)}}
 @layer primitives{.ui-page-header{--ui-_body-line-height: var(--ui-body-line-height);--ui-_space-1: var(--ui-space-1);--ui-_space-2: var(--ui-space-2);--ui-_border-width-sm: var(--ui-border-width-sm);--ui-_z-sticky: var(--ui-z-sticky);--ui-_color-bg: var(--ui-color-bg);--ui-_padding-block: var(--ui-page-header-padding-block, var(--ui-space-3));--ui-_padding-inline: var(--ui-page-header-padding-inline, 0);--ui-_gap: var(--ui-page-header-gap, var(--ui-space-2));--ui-_border-color: var(--ui-page-header-border-color, var(--ui-color-border));display:flex;flex-wrap:wrap;align-items:center;gap:var(--ui-_gap);padding-block:var(--ui-_padding-block);padding-inline:var(--ui-_padding-inline);line-height:var(--ui-_body-line-height)}.ui-page-header__title{display:flex;flex:1;flex-direction:column;gap:var(--ui-_space-1)}.ui-page-header__actions{display:flex;flex-shrink:0;align-items:center;gap:var(--ui-_space-2)}.ui-page-header__breadcrumb{flex-basis:100%}.ui-page-header--bordered{box-shadow:inset 0 calc(var(--ui-_border-width-sm)*-1) 0 0 var(--ui-_border-color)}.ui-page-header--sticky{position:sticky;inset-block-start:0;z-index:var(--ui-_z-sticky);background:var(--ui-_color-bg)}}
@@ -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.12.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/layout/grid/grid.api.json

@@ -5,6 +5,15 @@
   "modifiers": {
     "columns": {
       "values": ["2", "3", "4", "auto"]
+    },
+    "subgrid": {
+      "type": "boolean"
+    },
+    "subgrid-rows": {
+      "type": "boolean"
+    },
+    "subgrid-both": {
+      "type": "boolean"
     }
   },
   "cssVars": []