@odx/foundation 1.0.0-beta.21 → 1.0.0-beta.211

package/dist/styles-native.css

@@ -0,0 +1 @@
+@layer base{table{--cell-size:var(--odx-size-300);box-sizing:border-box;border-collapse:collapse;background-color:#0000;width:100%;max-width:100%;& thead{background-color:inherit}& tr{transition:var(--odx-transition-reduced);background-color:var(--odx-color-background-transparent);transition-property:background-color,color}& tr:has(td):hover{background-color:var(--odx-color-background-transparent-hover)}& th,td{padding:var(--odx-control-spacing-md)var(--odx-control-spacing-inline-md);min-height:var(--odx-size-250);text-align:start;font-size:inherit}& td{height:var(--cell-size);vertical-align:middle}& th,tr:not(:last-child) td{border-bottom:var(--odx-border-width-thin)solid var(--odx-color-stroke-neutral-subtle)}& th{cursor:default;vertical-align:top;font-weight:var(--odx-typography-font-weight-medium);-webkit-user-select:none;user-select:none;border-bottom-color:#0000}& th :is(odx-input,odx-select){margin-inline:var(--odx-spacing-negative-50)}}}

package/dist/styles.css

@@ -1 +1 @@
-@layer reset,base,variant,state,theme;@layer reset{:is(*){box-sizing:border-box;scrollbar-width:thin}:not(:defined){display:none}:before,:after{box-sizing:border-box}[popover]{border:none;outline:none}img,picture,video,canvas,svg{display:block;max-width:100%;margin:0}input,button,textarea,select{font:inherit;margin:0}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word;margin:0}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}#root,#__next{isolation:isolate;margin:0}}@layer base{odx-stack{display:block}.odx-stack{&.odx-stack-horizontal{flex-flow:row}&.odx-stack-wrap{flex-flow:column wrap}&.odx-stack-horizontal.odx-stack-wrap{flex-flow:row wrap}--flow: column;display:flex;flex-flow:var(--flow);max-inline-size:100%;align-items:stretch;justify-content:flex-start;gap:var(--odx-size-75);text-align:start}}@layer base{.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}}@layer base{.odx-gap-none{gap:0}.odx-gap-xs{gap:var(--odx-size-25)}.odx-gap-sm{gap:var(--odx-size-50)}.odx-gap-md{gap:var(--odx-size-75)}.odx-gap-lg{gap:var(--odx-size-150)}.odx-gap-xl{gap:var(--odx-size-225)}}@layer base{h1,h2,h3,h4,h5,h6{display:block;font-family:var(--odx-typography-font-family-brand);font-size:var(--_font-size);font-weight:var(--odx-typography-font-weight-semibold);line-height:var(--_line-height)}h6{--_font-size: var(--odx-breakpoint-font-size-heading-6);--_line-height: var(--odx-breakpoint-line-height-heading-6)}h5{--_font-size: var(--odx-breakpoint-font-size-heading-5);--_line-height: var(--odx-breakpoint-line-height-heading-5)}h4{--_font-size: var(--odx-breakpoint-font-size-heading-4);--_line-height: var(--odx-breakpoint-line-height-heading-4)}h3{--_font-size: var(--odx-breakpoint-font-size-heading-3);--_line-height: var(--odx-breakpoint-line-height-heading-3)}h2{--_font-size: var(--odx-breakpoint-font-size-heading-2);--_line-height: var(--odx-breakpoint-line-height-heading-2)}h1{--_font-size: var(--odx-breakpoint-font-size-heading-1);--_line-height: var(--odx-breakpoint-line-height-heading-1)}odx-icon{--rotate: 0deg;transition:var(--odx-transition-default);transition-property:transform;transform:rotate(var(--rotate))}[odxPreventTextOverflow]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}odx-list-item:has(:is(odx-button,odx-icon-button,odx-list-item::part(control)):not([aria-disabled=true]):active){--_color-background-pressed: var(--_color-background-hover)}odx-button:has(odx-icon:only-child),odx-button:has(odx-avatar){--_min-inline-size: 0}odx-accordion[control-position=start] odx-accordion-header::part(expand-control){--icon-rotation: -90deg;order:-1}odx-accordion[control-position=start] odx-accordion-header[expanded]::part(expand-control){--icon-rotation: 0}odx-input:has([slot=suffix])::part(base){padding-inline-end:var(--odx-size-px)}}@layer base{:root{--odx-transition-default: all var(--odx-motion-duration-default) var(--odx-motion-easing-default);--odx-transition-slow: all var(--odx-motion-duration-slow) var(--odx-motion-easing-default);--odx-transition-reduced: all var(--odx-motion-duration-fast) var(--odx-motion-easing-reduced);--odx-page-max-inline-size: 1600px;--odx-page-max-inline-size-narrow: 1200px;--odx-page-max-inline-size-wide: 2400px;scrollbar-color:var(--odx-color-primary-rest) var(--odx-palette-transparent)}html,body{margin:0;padding:0}html{scroll-behavior:smooth}body{color:var(--odx-color-foreground-base);background-color:var(--odx-color-background-cool);font-family:var(--odx-typography-font-family-base),"Noto Sans","Kanit",sans-serif;font-size:var(--odx-typography-font-size-base);line-height:var(--odx-typography-line-height-base)}}
+@layer reset{:where(*){scrollbar-width:thin;box-sizing:border-box}:where(body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,code,img,svg,small,strike,strong,sub,sup,b,u,i,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,main,article,aside,canvas,footer,header,nav,section,time,button,video,textarea,input){appearance:none;box-sizing:border-box;border:0;margin:0;padding:0}:where(img,picture,video,canvas){max-width:100%;display:block}:where(input,button,textarea,select){appearance:none;font-feature-settings:inherit;font-family:inherit;font-size:inherit}:where(a){color:var(--odx-color-foreground-accent-rest);text-decoration:underline}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(p){text-wrap:pretty}:where(h1,h2,h3,h4,h5,h6){text-wrap:balance}:where([popover]){border:none;outline:none}@media (prefers-reduced-motion:reduce){:where(*){scroll-behavior:auto!important;transition-duration:0s!important;animation-duration:0s!important;animation-iteration-count:1!important}}:where(*):not(:defined){display:none}}@layer base{.odx-content-box>a,.odx-content>a,.odx-link{gap:var(--odx-spacing-25);transition:var(--odx-transition-reduced);margin-inline:var(--odx-spacing-negative-12);border-radius:var(--odx-control-border-radius);cursor:pointer;padding-inline:var(--odx-spacing-12);-webkit-text-decoration:inherit;text-decoration:inherit;line-height:inherit;color:var(--odx-color-foreground-accent-rest);outline:none;align-items:center;transition-property:color;display:inline-flex;&:focus-visible{outline:var(--odx-focus-ring-outer);outline-offset:var(--odx-focus-ring-offset-sm)}&:hover:not([disabled]){color:var(--odx-color-foreground-accent-hover);text-decoration:underline}&[disabled]{cursor:not-allowed;color:var(--odx-color-foreground-rest-subtle);-webkit-user-select:none;user-select:none;pointer-events:none}>:is(odx-icon,.odx-icon){vertical-align:middle}}odx-title,[class*=odx-title],:where(h1,h2,h3,h4,h5,h6){font-family:var(--odx-typography-font-family-brand);font-weight:var(--odx-typography-font-weight-semibold);display:block}[class*=odx-title-display-]{font-weight:var(--odx-typography-font-weight-medium)}odx-title,.odx-title{line-height:inherit;font-size:inherit}odx-title[size=xs],.odx-title-xs,:where(h6){line-height:var(--odx-typography-line-height-heading-xs);font-size:var(--odx-typography-font-size-heading-xs)}odx-title[size=sm],.odx-title-sm,:where(h5){line-height:var(--odx-typography-line-height-heading-sm);font-size:var(--odx-typography-font-size-heading-sm)}odx-title[size=md],.odx-title-md,:where(h4){line-height:var(--odx-typography-line-height-heading-md);font-size:var(--odx-typography-font-size-heading-md)}odx-title[size=lg],.odx-title-lg,:where(h3){line-height:var(--odx-typography-line-height-heading-lg);font-size:var(--odx-typography-font-size-heading-lg)}odx-title[size=xl],.odx-title-xl,:where(h2){line-height:var(--odx-typography-line-height-heading-xl);font-size:var(--odx-typography-font-size-heading-xl)}odx-title[size=xxl],.odx-title-xxl,:where(h1){line-height:var(--odx-typography-line-height-heading-xxl);font-size:var(--odx-typography-font-size-heading-xxl)}odx-title[size=display-sm],.odx-title-display-sm{line-height:var(--odx-typography-line-height-display-sm);font-size:var(--odx-typography-font-size-display-sm)}odx-title[size=display-md],.odx-title-display-md{line-height:var(--odx-typography-line-height-display-md);font-size:var(--odx-typography-font-size-display-md)}odx-title[size=display-lg],.odx-title-display-lg{line-height:var(--odx-typography-line-height-display-lg);font-size:var(--odx-typography-font-size-display-lg)}odx-title[size=display-xl],.odx-title-display-xl{line-height:var(--odx-typography-line-height-display-xl);font-size:var(--odx-typography-font-size-display-xl)}odx-text,.odx-text{display:block}odx-text[inline],.odx-text-inline{display:inline-block}odx-text[strong],.odx-text-strong{font-weight:var(--odx-typography-font-weight-medium)}:where(:is(.odx-content,.odx-content-box)>:is(p,odx-text,.odx-text)),odx-text[size=md],.odx-text-md{line-height:var(--odx-typography-line-height-text-md);font-size:var(--odx-typography-font-size-text-md)}odx-text[size=xs],.odx-text-xs{line-height:var(--odx-typography-line-height-text-xs);font-size:var(--odx-typography-font-size-text-xs)}odx-text[size=sm],.odx-text-sm{line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm)}odx-text[size=lg],.odx-text-lg{line-height:var(--odx-typography-line-height-text-lg);font-size:var(--odx-typography-font-size-text-lg)}:where(.odx-typeset,.odx-content){line-height:var(--odx-typography-line-height-text-md);>:where(odx-title,[class*=odx-title]),:where(h1,h2,h3,h4,h5,h6){margin-block:0 var(--odx-layout-spacing-sm);margin-inline:0}>:where(.odx-text,odx-text),:where(p,li,dt,dd,blockquote,figcaption,small,pre,code,cite){margin:var(--odx-layout-spacing-md)0}:where(h2,h3,h4,h5,h6){margin-block-start:var(--odx-layout-spacing-lg)}:where(ul,ol,dl,blockquote){margin-block:var(--odx-layout-spacing-sm);margin-inline:0;padding-inline-start:var(--odx-spacing-200)}:where(blockquote){padding-inline-end:var(--odx-spacing-200)}:where(dt){font-weight:var(--odx-typography-font-weight-medium)}:where(small){font-size:var(--odx-typography-font-size-text-sm)}}:where(.odx-typeset-sm){line-height:var(--odx-typography-line-height-text-sm);font-size:var(--odx-typography-font-size-text-sm);:where(ul,ol,dl,blockquote){padding-inline-start:var(--odx-spacing-150)}:where(blockquote){padding-inline-end:var(--odx-spacing-150)}:where(h2,h3,h4,h5,h6){margin-block-start:var(--odx-layout-spacing-md)}>:where(.odx-text,odx-text),:where(p,li,dt,dd,blockquote,figcaption,small,pre,code,cite){margin-block:var(--odx-layout-spacing-sm)}}.odx-content-box{background-color:var(--odx-color-background-level-1);padding:var(--odx-layout-spacing-md)}.odx-cluster,.odx-flank,.odx-stack{gap:var(--odx-layout-spacing-md);max-width:100%;text-align:inherit;flex-direction:column;justify-content:flex-start;align-items:center;display:flex}.odx-cluster{flex-flow:wrap;align-items:center}.odx-flank{flex-direction:row}.odx-stack{align-items:stretch}.odx-flank:not(.odx-justify-end)>:not(:first-child),.odx-flank.odx-justify-end>:not(:last-child),.odx-fill{flex:1}.odx-align-baseline,.odx-align-start{align-items:flex-start}.odx-align-center{align-items:center}.odx-align-end{align-items:end}.odx-justify-start{justify-content:flex-start}.odx-justify-end{justify-content:flex-end}.odx-justify-center{justify-content:center}.odx-justify-space-between{justify-content:space-between}.odx-justify-space-around{justify-content:space-around}.odx-justify-space-evenly{justify-content:space-evenly}.odx-nowrap{flex-wrap:nowrap}[class*=odx-auto-grid]{--max-columns:6;--min-column-size:250px;--gap:var(--odx-layout-spacing-md);--_max-column-size:calc((100% - var(--gap)*(var(--max-columns) + 1))/var(--max-columns));--_min-column-size:min(100%,max(var(--min-column-size),var(--_max-column-size)));--_column-size:minmax(var(--_min-column-size),1fr);grid-template-columns:repeat(auto-fit,var(--_column-size));gap:var(--gap);place-content:center;display:grid}.odx-auto-grid-fill{grid-template-columns:repeat(auto-fill,var(--_column-size))}:root{scrollbar-color:var(--odx-color-background-brand)transparent}.odx-dark-mode{color-scheme:dark}.odx-light-mode{color-scheme:light}html{scroll-behavior:smooth}body{background-color:var(--odx-color-background-base);line-height:var(--odx-typography-line-height-base);color:var(--odx-color-foreground-rest);font-family:var(--odx-typography-font-family-base),"Noto Sans",Kanit,sans-serif;font-size:var(--odx-typography-font-size-base)}:where(.odx-content),.odx-content-box{>odx-area-header:first-of-type{margin-block-start:calc(-1*var(--odx-layout-spacing-md))}>odx-key-value-list,>odx-list{margin-block:var(--odx-layout-spacing-md)}}odx-card>odx-area-header[slot=header]:first-child{margin-block-start:calc(-1*var(--odx-layout-spacing-md))}odx-page-layout [id]{scroll-margin-top:calc(var(--page-offset-top))}odx-icon{transition:var(--odx-transition-default);transition-property:transform,color,opacity}input[type=time]::-webkit-calendar-picker-indicator{display:none}[odx-control]:has([odx-control]:not([disabled]):active){--_color-background-pressed:var(--_color-background-hover)}[odx-button]:has(odx-icon:only-child){--_min-width:var(--_height)}odx-rail-navigation :is(odx-navigation-item,odx-navigation-item-group)::part(label){transition:var(--odx-transition-reduced);transition-delay:var(--odx-motion-duration-fast);transition-property:opacity}odx-rail-navigation[collapsed] :is(odx-navigation-item,odx-navigation-item-group)::part(label){opacity:0;white-space:nowrap}}@layer variant,state,theme;@layer utils{.odx-m-auto{margin:auto}.odx-mx-auto{margin-inline:auto}.odx-ml-auto{margin-inline-start:auto}.odx-mr-auto{margin-inline-end:auto}.odx-my-auto{margin-block:auto}.odx-mt-auto{margin-block-start:auto}.odx-mb-auto{margin-block-end:auto}.odx-g-0{--gap:0px;gap:0}.odx-gx-0{column-gap:0}.odx-gy-0{row-gap:0}.odx-p-0{padding:0}.odx-px-0{padding-inline:0}.odx-pl-0{padding-inline-start:0}.odx-pr-0{padding-inline-end:0}.odx-py-0{padding-block:0}.odx-pt-0{padding-block-start:0}.odx-pb-0{padding-block-end:0}.odx-m-0{margin:0}.odx-mx-0{margin-inline:0}.odx-ml-0{margin-inline-start:0}.odx-mr-0{margin-inline-end:0}.odx-my-0{margin-block:0}.odx-mt-0{margin-block-start:0}.odx-mb-0{margin-block-end:0}.odx-g-12{--gap:var(--odx-spacing-12);gap:var(--odx-spacing-12)}.odx-gx-12{column-gap:var(--odx-spacing-12)}.odx-gy-12{row-gap:var(--odx-spacing-12)}.odx-p-12{padding:var(--odx-spacing-12)}.odx-px-12{padding-inline:var(--odx-spacing-12)}.odx-pl-12{padding-inline-start:var(--odx-spacing-12)}.odx-pr-12{padding-inline-end:var(--odx-spacing-12)}.odx-py-12{padding-block:var(--odx-spacing-12)}.odx-pt-12{padding-block-start:var(--odx-spacing-12)}.odx-pb-12{padding-block-end:var(--odx-spacing-12)}.odx-m-12{margin:var(--odx-spacing-12)}.odx-mx-12{margin-inline:var(--odx-spacing-12)}.odx-ml-12{margin-inline-start:var(--odx-spacing-12)}.odx-mr-12{margin-inline-end:var(--odx-spacing-12)}.odx-my-12{margin-block:var(--odx-spacing-12)}.odx-mt-12{margin-block-start:var(--odx-spacing-12)}.odx-mb-12{margin-block-end:var(--odx-spacing-12)}.odx-g-25{--gap:var(--odx-spacing-25);gap:var(--odx-spacing-25)}.odx-gx-25{column-gap:var(--odx-spacing-25)}.odx-gy-25{row-gap:var(--odx-spacing-25)}.odx-p-25{padding:var(--odx-spacing-25)}.odx-px-25{padding-inline:var(--odx-spacing-25)}.odx-pl-25{padding-inline-start:var(--odx-spacing-25)}.odx-pr-25{padding-inline-end:var(--odx-spacing-25)}.odx-py-25{padding-block:var(--odx-spacing-25)}.odx-pt-25{padding-block-start:var(--odx-spacing-25)}.odx-pb-25{padding-block-end:var(--odx-spacing-25)}.odx-m-25{margin:var(--odx-spacing-25)}.odx-mx-25{margin-inline:var(--odx-spacing-25)}.odx-ml-25{margin-inline-start:var(--odx-spacing-25)}.odx-mr-25{margin-inline-end:var(--odx-spacing-25)}.odx-my-25{margin-block:var(--odx-spacing-25)}.odx-mt-25{margin-block-start:var(--odx-spacing-25)}.odx-mb-25{margin-block-end:var(--odx-spacing-25)}.odx-g-37{--gap:var(--odx-spacing-37);gap:var(--odx-spacing-37)}.odx-gx-37{column-gap:var(--odx-spacing-37)}.odx-gy-37{row-gap:var(--odx-spacing-37)}.odx-p-37{padding:var(--odx-spacing-37)}.odx-px-37{padding-inline:var(--odx-spacing-37)}.odx-pl-37{padding-inline-start:var(--odx-spacing-37)}.odx-pr-37{padding-inline-end:var(--odx-spacing-37)}.odx-py-37{padding-block:var(--odx-spacing-37)}.odx-pt-37{padding-block-start:var(--odx-spacing-37)}.odx-pb-37{padding-block-end:var(--odx-spacing-37)}.odx-m-37{margin:var(--odx-spacing-37)}.odx-mx-37{margin-inline:var(--odx-spacing-37)}.odx-ml-37{margin-inline-start:var(--odx-spacing-37)}.odx-mr-37{margin-inline-end:var(--odx-spacing-37)}.odx-my-37{margin-block:var(--odx-spacing-37)}.odx-mt-37{margin-block-start:var(--odx-spacing-37)}.odx-mb-37{margin-block-end:var(--odx-spacing-37)}.odx-g-50{--gap:var(--odx-spacing-50);gap:var(--odx-spacing-50)}.odx-gx-50{column-gap:var(--odx-spacing-50)}.odx-gy-50{row-gap:var(--odx-spacing-50)}.odx-p-50{padding:var(--odx-spacing-50)}.odx-px-50{padding-inline:var(--odx-spacing-50)}.odx-pl-50{padding-inline-start:var(--odx-spacing-50)}.odx-pr-50{padding-inline-end:var(--odx-spacing-50)}.odx-py-50{padding-block:var(--odx-spacing-50)}.odx-pt-50{padding-block-start:var(--odx-spacing-50)}.odx-pb-50{padding-block-end:var(--odx-spacing-50)}.odx-m-50{margin:var(--odx-spacing-50)}.odx-mx-50{margin-inline:var(--odx-spacing-50)}.odx-ml-50{margin-inline-start:var(--odx-spacing-50)}.odx-mr-50{margin-inline-end:var(--odx-spacing-50)}.odx-my-50{margin-block:var(--odx-spacing-50)}.odx-mt-50{margin-block-start:var(--odx-spacing-50)}.odx-mb-50{margin-block-end:var(--odx-spacing-50)}.odx-g-75{--gap:var(--odx-spacing-75);gap:var(--odx-spacing-75)}.odx-gx-75{column-gap:var(--odx-spacing-75)}.odx-gy-75{row-gap:var(--odx-spacing-75)}.odx-p-75{padding:var(--odx-spacing-75)}.odx-px-75{padding-inline:var(--odx-spacing-75)}.odx-pl-75{padding-inline-start:var(--odx-spacing-75)}.odx-pr-75{padding-inline-end:var(--odx-spacing-75)}.odx-py-75{padding-block:var(--odx-spacing-75)}.odx-pt-75{padding-block-start:var(--odx-spacing-75)}.odx-pb-75{padding-block-end:var(--odx-spacing-75)}.odx-m-75{margin:var(--odx-spacing-75)}.odx-mx-75{margin-inline:var(--odx-spacing-75)}.odx-ml-75{margin-inline-start:var(--odx-spacing-75)}.odx-mr-75{margin-inline-end:var(--odx-spacing-75)}.odx-my-75{margin-block:var(--odx-spacing-75)}.odx-mt-75{margin-block-start:var(--odx-spacing-75)}.odx-mb-75{margin-block-end:var(--odx-spacing-75)}.odx-g-100{--gap:var(--odx-spacing-100);gap:var(--odx-spacing-100)}.odx-gx-100{column-gap:var(--odx-spacing-100)}.odx-gy-100{row-gap:var(--odx-spacing-100)}.odx-p-100{padding:var(--odx-spacing-100)}.odx-px-100{padding-inline:var(--odx-spacing-100)}.odx-pl-100{padding-inline-start:var(--odx-spacing-100)}.odx-pr-100{padding-inline-end:var(--odx-spacing-100)}.odx-py-100{padding-block:var(--odx-spacing-100)}.odx-pt-100{padding-block-start:var(--odx-spacing-100)}.odx-pb-100{padding-block-end:var(--odx-spacing-100)}.odx-m-100{margin:var(--odx-spacing-100)}.odx-mx-100{margin-inline:var(--odx-spacing-100)}.odx-ml-100{margin-inline-start:var(--odx-spacing-100)}.odx-mr-100{margin-inline-end:var(--odx-spacing-100)}.odx-my-100{margin-block:var(--odx-spacing-100)}.odx-mt-100{margin-block-start:var(--odx-spacing-100)}.odx-mb-100{margin-block-end:var(--odx-spacing-100)}.odx-g-150{--gap:var(--odx-spacing-150);gap:var(--odx-spacing-150)}.odx-gx-150{column-gap:var(--odx-spacing-150)}.odx-gy-150{row-gap:var(--odx-spacing-150)}.odx-p-150{padding:var(--odx-spacing-150)}.odx-px-150{padding-inline:var(--odx-spacing-150)}.odx-pl-150{padding-inline-start:var(--odx-spacing-150)}.odx-pr-150{padding-inline-end:var(--odx-spacing-150)}.odx-py-150{padding-block:var(--odx-spacing-150)}.odx-pt-150{padding-block-start:var(--odx-spacing-150)}.odx-pb-150{padding-block-end:var(--odx-spacing-150)}.odx-m-150{margin:var(--odx-spacing-150)}.odx-mx-150{margin-inline:var(--odx-spacing-150)}.odx-ml-150{margin-inline-start:var(--odx-spacing-150)}.odx-mr-150{margin-inline-end:var(--odx-spacing-150)}.odx-my-150{margin-block:var(--odx-spacing-150)}.odx-mt-150{margin-block-start:var(--odx-spacing-150)}.odx-mb-150{margin-block-end:var(--odx-spacing-150)}.odx-g-sm{--gap:var(--odx-layout-spacing-sm);gap:var(--odx-layout-spacing-sm)}.odx-gx-sm{column-gap:var(--odx-layout-spacing-sm)}.odx-gy-sm{row-gap:var(--odx-layout-spacing-sm)}.odx-p-sm{padding:var(--odx-layout-spacing-sm)}.odx-px-sm{padding-inline:var(--odx-layout-spacing-sm)}.odx-pl-sm{padding-inline-start:var(--odx-layout-spacing-sm)}.odx-pr-sm{padding-inline-end:var(--odx-layout-spacing-sm)}.odx-py-sm{padding-block:var(--odx-layout-spacing-sm)}.odx-pt-sm{padding-block-start:var(--odx-layout-spacing-sm)}.odx-pb-sm{padding-block-end:var(--odx-layout-spacing-sm)}.odx-m-sm{margin:var(--odx-layout-spacing-sm)}.odx-mx-sm{margin-inline:var(--odx-layout-spacing-sm)}.odx-ml-sm{margin-inline-start:var(--odx-layout-spacing-sm)}.odx-mr-sm{margin-inline-end:var(--odx-layout-spacing-sm)}.odx-my-sm{margin-block:var(--odx-layout-spacing-sm)}.odx-mt-sm{margin-block-start:var(--odx-layout-spacing-sm)}.odx-mb-sm{margin-block-end:var(--odx-layout-spacing-sm)}.odx-g-md{--gap:var(--odx-layout-spacing-md);gap:var(--odx-layout-spacing-md)}.odx-gx-md{column-gap:var(--odx-layout-spacing-md)}.odx-gy-md{row-gap:var(--odx-layout-spacing-md)}.odx-p-md{padding:var(--odx-layout-spacing-md)}.odx-px-md{padding-inline:var(--odx-layout-spacing-md)}.odx-pl-md{padding-inline-start:var(--odx-layout-spacing-md)}.odx-pr-md{padding-inline-end:var(--odx-layout-spacing-md)}.odx-py-md{padding-block:var(--odx-layout-spacing-md)}.odx-pt-md{padding-block-start:var(--odx-layout-spacing-md)}.odx-pb-md{padding-block-end:var(--odx-layout-spacing-md)}.odx-m-md{margin:var(--odx-layout-spacing-md)}.odx-mx-md{margin-inline:var(--odx-layout-spacing-md)}.odx-ml-md{margin-inline-start:var(--odx-layout-spacing-md)}.odx-mr-md{margin-inline-end:var(--odx-layout-spacing-md)}.odx-my-md{margin-block:var(--odx-layout-spacing-md)}.odx-mt-md{margin-block-start:var(--odx-layout-spacing-md)}.odx-mb-md{margin-block-end:var(--odx-layout-spacing-md)}.odx-g-lg{--gap:var(--odx-layout-spacing-lg);gap:var(--odx-layout-spacing-lg)}.odx-gx-lg{column-gap:var(--odx-layout-spacing-lg)}.odx-gy-lg{row-gap:var(--odx-layout-spacing-lg)}.odx-p-lg{padding:var(--odx-layout-spacing-lg)}.odx-px-lg{padding-inline:var(--odx-layout-spacing-lg)}.odx-pl-lg{padding-inline-start:var(--odx-layout-spacing-lg)}.odx-pr-lg{padding-inline-end:var(--odx-layout-spacing-lg)}.odx-py-lg{padding-block:var(--odx-layout-spacing-lg)}.odx-pt-lg{padding-block-start:var(--odx-layout-spacing-lg)}.odx-pb-lg{padding-block-end:var(--odx-layout-spacing-lg)}.odx-m-lg{margin:var(--odx-layout-spacing-lg)}.odx-mx-lg{margin-inline:var(--odx-layout-spacing-lg)}.odx-ml-lg{margin-inline-start:var(--odx-layout-spacing-lg)}.odx-mr-lg{margin-inline-end:var(--odx-layout-spacing-lg)}.odx-my-lg{margin-block:var(--odx-layout-spacing-lg)}.odx-mt-lg{margin-block-start:var(--odx-layout-spacing-lg)}.odx-mb-lg{margin-block-end:var(--odx-layout-spacing-lg)}.odx-no-interaction{-webkit-user-select:none;user-select:none;pointer-events:none}.odx-no-overflow{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.odx-visually-hidden:not(:focus-within),.odx-visually-hidden-force{white-space:nowrap!important;width:1px!important;height:1px!important;clip-path:rect(0 0 0 0)!important;border:none!important;padding:0!important;position:absolute!important;overflow:hidden!important}}:root{--odx-transition-default:all var(--odx-motion-duration-default)var(--odx-motion-easing-default);--odx-transition-slow:all var(--odx-motion-duration-slow)var(--odx-motion-easing-default);--odx-transition-reduced:all var(--odx-motion-duration-fast)var(--odx-motion-easing-reduced);--odx-motion-delay-reduced:50ms;--odx-focus-ring-outer:var(--odx-border-width-thick)solid var(--odx-color-stroke-focus-outer);--odx-focus-ring-inner:0 0 0 calc(-1*var(--odx-focus-ring-offset))var(--odx-color-stroke-focus-inner)inset;--odx-focus-ring-offset:calc(-1*var(--odx-border-width-thick));--odx-focus-ring-offset-sm:calc(-1*var(--odx-border-width-thin));--odx-z-level-background:-1;--odx-z-level-base:0;--odx-z-level-foreground:1;--odx-z-level-interactive:5;--odx-z-level-sticky:10;--odx-z-level-sticky-foreground:15;--odx-z-level-overlay:100;--odx-z-level-topmost:9999}

package/dist/utils/attribute-directive.d.ts

@@ -0,0 +1,20 @@
+export interface AttributeDirectiveOptions<T extends string, R> {
+    name: T;
+    getValue: (host: HTMLElement) => R;
+}
+export interface AttributeDirective<T extends string, R> {
+    selector: `[${T}]`;
+    attribute: T;
+    applied<E extends HTMLElement = HTMLElement>(element?: HTMLElement | null): element is E;
+    value: (element: HTMLElement) => R;
+}
+export type BooleanAttributeDirectiveOptions<T extends string> = Omit<AttributeDirectiveOptions<T, boolean>, 'getValue'> & {
+    onUpdate?(element: HTMLElement, value: boolean): void;
+};
+export type BooleanAttributeDirective<T extends string> = AttributeDirective<T, boolean> & {
+    toggle(element: HTMLElement, state?: boolean): void;
+};
+export declare function booleanAttributeDirective<const T extends string>(options: BooleanAttributeDirectiveOptions<T>): BooleanAttributeDirective<T>;
+export type StringAttributeDirective<T extends string> = AttributeDirective<T, string | null>;
+export declare function stringAttributeDirective<const T extends string>(name: T): StringAttributeDirective<T>;
+//# sourceMappingURL=attribute-directive.d.ts.map

package/dist/utils/command-directive.d.ts

@@ -0,0 +1,22 @@
+import { StringAttributeDirective } from './attribute-directive.js';
+export declare class InvokerCommandEvent extends CustomEvent<{
+    source: HTMLElement;
+    command: string;
+}> {
+    static readonly type = "odx-invoker-command";
+    constructor(detail: InvokerCommandEvent['detail'] & {
+        bubbles?: boolean;
+    });
+}
+export interface CommandDirectiveOptions<T extends string> {
+    name: T;
+    command: string | ((source: HTMLElement) => string | null);
+}
+export interface CommandDirective<T extends string> extends StringAttributeDirective<T> {
+    connect: () => void;
+    disconnect: () => void;
+    subscribe: (target: HTMLElement, handler: (event: InvokerCommandEvent) => void) => () => void;
+    invoke: (source: HTMLElement, command: string, targetOrId?: HTMLElement | string | null) => boolean;
+}
+export declare function commandDirective<const T extends string>(options: CommandDirectiveOptions<T>): CommandDirective<T>;
+//# sourceMappingURL=command-directive.d.ts.map

package/dist/utils/dom-events.d.ts

@@ -0,0 +1,49 @@
+export declare function createCustomEvent<Payload = never, const T extends string = string>(name: T, options?: CustomEventInit<Payload>): {
+    new (eventInit?: CustomEventInit<Payload>): {
+        readonly detail: Payload;
+        initCustomEvent(type: string, bubbles?: boolean, cancelable?: boolean, detail?: Payload | undefined): void;
+        readonly bubbles: boolean;
+        cancelBubble: boolean;
+        readonly cancelable: boolean;
+        readonly composed: boolean;
+        readonly currentTarget: EventTarget | null;
+        readonly defaultPrevented: boolean;
+        readonly eventPhase: number;
+        readonly isTrusted: boolean;
+        returnValue: boolean;
+        readonly srcElement: EventTarget | null;
+        readonly target: EventTarget | null;
+        readonly timeStamp: DOMHighResTimeStamp;
+        readonly type: string;
+        composedPath(): EventTarget[];
+        initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;
+        preventDefault(): void;
+        stopImmediatePropagation(): void;
+        stopPropagation(): void;
+        readonly NONE: 0;
+        readonly CAPTURING_PHASE: 1;
+        readonly AT_TARGET: 2;
+        readonly BUBBLING_PHASE: 3;
+    };
+    readonly type: T;
+    dispatch(target: HTMLElement, eventInit?: CustomEventInit<Payload>): boolean;
+};
+export declare function createToggleEvent(oldState: boolean, newState: boolean, eventInit?: EventInit): ToggleEvent;
+export declare function isToggleOpen(event: ToggleEvent): boolean;
+export declare function clickedOutside(event: Event, element?: Element | null, allowSelf?: boolean): boolean;
+export declare function forwardEvent(target: HTMLElement, eventInit?: EventInit): EventListener;
+export declare function getElementFromEvent<T = HTMLElement>(event: Event, filterFn: (node: HTMLElement) => boolean): T | undefined;
+export declare function getKeyInfo(event: KeyboardEvent): {
+    up: boolean;
+    right: boolean;
+    down: boolean;
+    left: boolean;
+    enter: boolean;
+    escape: boolean;
+    space: boolean;
+    backTab: boolean;
+    tab: boolean;
+    start: boolean;
+    end: boolean;
+};
+//# sourceMappingURL=dom-events.d.ts.map

package/dist/{lib/types/a11y.d.ts → utils/dom-types.d.ts}

@@ -1,20 +1,4 @@
 export type ARIARole = 'alert' | 'alertdialog' | 'button' | 'checkbox' | 'dialog' | 'gridcell' | 'link' | 'log' | 'marquee' | 'menuitem' | 'menuitemcheckbox' | 'menuitemradio' | 'option' | 'progressbar' | 'radio' | 'scrollbar' | 'searchbox' | 'slider' | 'spinbutton' | 'status' | 'switch' | 'tab' | 'tabpanel' | 'textbox' | 'timer' | 'tooltip' | 'treeitem' | 'combobox' | 'grid' | 'listbox' | 'menu' | 'menubar' | 'radiogroup' | 'tablist' | 'tree' | 'treegrid' | 'application' | 'article' | 'cell' | 'columnheader' | 'definition' | 'directory' | 'document' | 'feed' | 'figure' | 'group' | 'heading' | 'img' | 'list' | 'listitem' | 'math' | 'none' | 'note' | 'presentation' | 'region' | 'row' | 'rowgroup' | 'rowheader' | 'separator' | 'table' | 'term' | 'text' | 'toolbar' | 'banner' | 'complementary' | 'contentinfo' | 'form' | 'main' | 'navigation' | 'region' | 'search' | 'doc-abstract' | 'doc-acknowledgments' | 'doc-afterword' | 'doc-appendix' | 'doc-backlink' | 'doc-biblioentry' | 'doc-bibliography' | 'doc-biblioref' | 'doc-chapter' | 'doc-colophon' | 'doc-conclusion' | 'doc-cover' | 'doc-credit' | 'doc-credits' | 'doc-dedication' | 'doc-endnote' | 'doc-endnotes' | 'doc-epigraph' | 'doc-epilogue' | 'doc-errata' | 'doc-example' | 'doc-footnote' | 'doc-foreword' | 'doc-glossary' | 'doc-glossref' | 'doc-index' | 'doc-introduction' | 'doc-noteref' | 'doc-notice' | 'doc-pagebreak' | 'doc-pagelist' | 'doc-part' | 'doc-preface' | 'doc-prologue' | 'doc-pullquote' | 'doc-qna' | 'doc-subtitle' | 'doc-tip' | 'doc-toc';
-/**
- * An extension of `ARIAMixin` that enforces strict value types for aria
- * properties.
- *
- * This is needed for correct typing in render functions with lit analyzer.
- *
- * @example
- * render() {
- *   const {ariaLabel} = this as ARIAMixinStrict;
- *   return html`
- *     <button aria-label=${ariaLabel || nothing}>
- *       <slot></slot>
- *     </button>
- *   `;
- * }
- */
 export interface ARIAMixinStrict extends ARIAMixin {
     ariaAtomic: 'true' | 'false' | null;
     ariaAutoComplete: 'none' | 'inline' | 'list' | 'both' | null;
@@ -55,4 +39,4 @@ export interface ARIAMixinStrict extends ARIAMixin {
     ariaValueText: string | null;
     role: ARIARole | null;
 }
-//# sourceMappingURL=a11y.d.ts.map
+//# sourceMappingURL=dom-types.d.ts.map

package/dist/utils/dom.d.ts

@@ -0,0 +1,17 @@
+export declare function supportsHover(): boolean;
+export declare function parseDate(value: number | string | Date): Date | null;
+export declare function findClosestDocument(node: Node): Document | ShadowRoot;
+export declare function toAriaBooleanAttribute(value: boolean, removeOnFalse?: false | undefined): 'true' | 'false';
+export declare function toAriaBooleanAttribute(value: boolean, removeOnFalse?: true): null;
+export declare function toPx(value?: number | null): string | null;
+export declare function querySlotSelector<S extends string | string[], R = S extends string[] ? HTMLSlotElement[] : HTMLSlotElement | null>(root: DocumentFragment | HTMLElement, slot?: S): R;
+export interface GetAssignedElementOptions<T extends HTMLElement = HTMLElement> {
+    slot?: string | string[];
+    selector?: ((element: T) => boolean) | string;
+    flatten?: boolean;
+}
+export declare function getAssignedElements<T extends HTMLElement = HTMLElement>(root: DocumentFragment | HTMLElement, options?: GetAssignedElementOptions<T>): T[];
+export declare function setFocusable(target: HTMLElement, interactive: boolean): void;
+export declare function waitForAnimations(element?: Element | null, subtree?: boolean): Promise<Animation[]>;
+export declare function interactionResponse(): Promise<unknown>;
+//# sourceMappingURL=dom.d.ts.map

package/dist/utils/lit.d.ts

@@ -0,0 +1,4 @@
+import { nothing, ReactiveElement, TemplateResult } from 'lit';
+export declare function optionalAttr<T>(value: T): NonNullable<T>;
+export declare function optionalSlot(host: ReactiveElement, slotName: string, classNames?: string): TemplateResult | typeof nothing;
+//# sourceMappingURL=lit.d.ts.map

package/dist/utils/main.d.ts

@@ -0,0 +1,11 @@
+export * from './attribute-directive.js';
+export * from './command-directive.js';
+export * from './dom.js';
+export * from './dom-events.js';
+export * from './dom-types.js';
+export * from './lit.js';
+export * from './shared-event-listener.js';
+export * from './shared-resize-observer.js';
+export * from './types.js';
+export * from './unique-id.js';
+//# sourceMappingURL=main.d.ts.map

package/dist/utils/shared-event-listener.d.ts

@@ -0,0 +1,3 @@
+export declare function addGlobalEventListener(type: string, listener: EventListener, options?: boolean | AddEventListenerOptions): () => void;
+export declare function removeGlobalEventListener(type: string, listener: EventListener): void;
+//# sourceMappingURL=shared-event-listener.d.ts.map

package/dist/utils/shared-resize-observer.d.ts

@@ -0,0 +1,7 @@
+export interface ObserveElementResizeOptions {
+    edges?: Array<'leading' | 'trailing'>;
+    fpsLimit?: number;
+}
+export declare function observeElementResize(target: Element, handler: ResizeObserverCallback, options?: ObserveElementResizeOptions): () => void;
+export declare function unobserveElementResize(target: Element): void;
+//# sourceMappingURL=shared-resize-observer.d.ts.map

package/dist/utils/types.d.ts

@@ -0,0 +1,5 @@
+export declare type Constructor<T> = new (...args: any[]) => T;
+export type Loose<T extends string> = T | (string & {});
+export type ExpandUnion<T> = T extends unknown ? T : never;
+export type ValuesOf<T extends object> = T[keyof T];
+//# sourceMappingURL=types.d.ts.map

package/dist/utils/unique-id.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Generates a unique identifier for a given key. If the prefix has previously been used,
+ * the function increments a counter associated with that prefix to ensure uniqueness.
+ * The generated ID is in the format of `${prefix}-${counter}`.
+ *
+ * @param {string} key - The prefix for which to generate a unique identifier.
+ * @returns {string} A unique identifier string based on the provided prefix.
+ *
+ * @example
+ * ```ts
+ * const id1 = getUniqueId('component');
+ * console.log(id1); // Outputs: "component-1"
+ *
+ * const id2 = getUniqueId('component');
+ * console.log(id2); // Outputs: "component-2"
+ * ```
+ */
+export declare function getUniqueId(key: string): string;
+export declare function resetUniqueId(key?: string): void;
+//# sourceMappingURL=unique-id.d.ts.map

package/dist/utils.js

@@ -0,0 +1,299 @@
+import { r as round, t as throttle } from './vendor.js';
+import { nothing, html } from 'lit';
+
+function attributeDirective({ name, getValue }) {
+  return {
+    selector: `[${name}]`,
+    attribute: name,
+    applied(element) {
+      return Boolean(element?.hasAttribute(name));
+    },
+    value(element) {
+      return this.applied(element) ? getValue(element) : null;
+    }
+  };
+}
+function booleanAttributeDirective(options) {
+  return {
+    ...attributeDirective({ ...options, getValue: (element) => element.getAttribute(options.name) !== "false" }),
+    toggle(element, state) {
+      if (state === element.hasAttribute(options.name)) return;
+      element.toggleAttribute(options.name, state);
+      options.onUpdate?.(element, element.hasAttribute(options.name));
+    }
+  };
+}
+function stringAttributeDirective(name) {
+  return attributeDirective({ name, getValue: (element) => element.getAttribute(name) });
+}
+
+function supportsHover() {
+  return "matchMedia" in globalThis && globalThis.matchMedia("(hover: hover)").matches;
+}
+const createDate = (value) => Number.isNaN(value) ? null : new Date(value);
+function parseDate(value) {
+  if (value instanceof Date) {
+    return createDate(value.getTime());
+  }
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime()) && typeof value === "string") {
+    return createDate(Number(value));
+  }
+  return createDate(date.getTime());
+}
+function findClosestDocument(node) {
+  let parent = node.parentNode;
+  while (parent && parent.nodeType !== Node.DOCUMENT_FRAGMENT_NODE && parent.nodeType !== Node.DOCUMENT_NODE) {
+    parent = parent.parentNode;
+  }
+  return parent ?? document;
+}
+function toAriaBooleanAttribute(value, removeOnFalse = true) {
+  if (removeOnFalse && !value) return null;
+  return String(value);
+}
+function toPx(value) {
+  if (value == null || Number.isNaN(value)) return null;
+  return `${round(value, 2)}px`;
+}
+function querySlotSelector(root, slot) {
+  if (Array.isArray(slot)) {
+    if (slot.length === 0) return [];
+    const slotSelector = slot.map((s) => `slot[name="${s}"]`).join(", ");
+    return Array.from(root.querySelectorAll(slotSelector));
+  } else {
+    const slotSelector = slot ? `slot[name="${slot}"]` : "slot:not([name])";
+    return root.querySelector(slotSelector);
+  }
+}
+function getAssignedElements(root, options) {
+  const { flatten = true, selector, slot } = options ?? {};
+  let elements;
+  const slotElement = querySlotSelector(root, slot);
+  if (Array.isArray(slotElement)) {
+    elements = slotElement.flatMap((slotElement2) => slotElement2.assignedElements({ flatten }));
+  } else {
+    elements = slotElement?.assignedElements({ flatten }) ?? [];
+  }
+  if (!selector) {
+    return elements;
+  }
+  const selectorFn = typeof selector === "string" ? (element) => element.matches(selector) : selector;
+  return elements.filter(selectorFn);
+}
+function setFocusable(target, interactive) {
+  if (interactive) {
+    target.tabIndex = target.hasAttribute("tabindex") ? target.tabIndex : 0;
+  } else {
+    target.removeAttribute("tabindex");
+  }
+}
+async function waitForAnimations(element, subtree = false) {
+  if (!element) return [];
+  try {
+    const animations = element.getAnimations({ subtree });
+    if (animations.length === 0) return [];
+    await Promise.all(animations.map((animation) => animation.finished));
+    return animations;
+  } catch {
+    return [];
+  }
+}
+function interactionResponse() {
+  return new Promise((resolve) => {
+    setTimeout(resolve, 100);
+    requestAnimationFrame(() => {
+      setTimeout(resolve, 0);
+    });
+  });
+}
+
+function createCustomEvent(name, options) {
+  const defaultOptions = { bubbles: false, composed: false, cancelable: true, ...options };
+  class CustomEventClass extends CustomEvent {
+    static {
+      this.type = name;
+    }
+    constructor(eventInit) {
+      super(name, Object.assign({}, defaultOptions, eventInit));
+    }
+    static dispatch(target, eventInit) {
+      return target.dispatchEvent(new CustomEventClass(eventInit));
+    }
+  }
+  return CustomEventClass;
+}
+function createToggleEvent(oldState, newState, eventInit) {
+  return new ToggleEvent("toggle", {
+    ...eventInit,
+    oldState: oldState ? "open" : "closed",
+    newState: newState ? "open" : "closed"
+  });
+}
+function isToggleOpen(event) {
+  return event.newState === "open";
+}
+function clickedOutside(event, element, allowSelf = false) {
+  if (!element?.isConnected) return true;
+  return !getElementFromEvent(event, (node) => node === element) && (allowSelf || event.target !== element);
+}
+function forwardEvent(target, eventInit) {
+  return (event) => {
+    event.stopPropagation();
+    const shouldPreventDefault = target.dispatchEvent(
+      new Event(event.type, {
+        bubbles: event.bubbles,
+        composed: event.composed,
+        cancelable: event.cancelable,
+        ...eventInit
+      })
+    );
+    if (shouldPreventDefault) return;
+    event.preventDefault();
+  };
+}
+function getElementFromEvent(event, filterFn) {
+  return event.composedPath().find((node) => node instanceof HTMLElement && filterFn(node));
+}
+function getKeyInfo(event) {
+  const { code, shiftKey } = event;
+  return {
+    up: code === "ArrowUp",
+    right: code === "ArrowRight",
+    down: code === "ArrowDown",
+    left: code === "ArrowLeft",
+    enter: code === "Enter",
+    escape: code === "Escape",
+    space: code === "Space",
+    backTab: code === "Tab" && shiftKey,
+    tab: code === "Tab" && !shiftKey,
+    start: code === "Home",
+    end: code === "End"
+  };
+}
+
+const globalListeners = /* @__PURE__ */ new Map();
+const eventListenerRegistry = /* @__PURE__ */ new Map();
+function handleGlobalEvent(event) {
+  const listeners = eventListenerRegistry.get(event.type);
+  if (!listeners?.size) return;
+  for (const listener of Array.from(listeners).toReversed()) {
+    if (event.defaultPrevented) return;
+    listener(event);
+  }
+}
+function addGlobalEventListener(type, listener, options) {
+  const listeners = eventListenerRegistry.get(type) ?? /* @__PURE__ */ new Set();
+  listeners.add(listener);
+  eventListenerRegistry.set(type, listeners);
+  if (!globalListeners.get(type)) {
+    globalListeners.set(type, handleGlobalEvent);
+    globalThis.addEventListener(type, handleGlobalEvent, options);
+  }
+  return () => removeGlobalEventListener(type, listener);
+}
+function removeGlobalEventListener(type, listener) {
+  const listeners = eventListenerRegistry.get(type);
+  if (!listeners?.delete(listener)) return;
+  if (listeners.size > 0) return;
+  globalListeners.delete(type);
+  globalThis.removeEventListener(type, handleGlobalEvent);
+}
+
+class InvokerCommandEvent extends CustomEvent {
+  static {
+    this.type = "odx-invoker-command";
+  }
+  constructor(detail) {
+    super(InvokerCommandEvent.type, { detail, bubbles: detail.bubbles });
+  }
+}
+function commandDirective(options) {
+  const isCommandSource = (node) => directive.applied(node);
+  const isCommandFunction = typeof options.command === "function";
+  function handleGlobalEvent(event) {
+    const source = getElementFromEvent(event, isCommandSource);
+    if (!source) return;
+    const command = isCommandFunction ? options.command(source) : options.command;
+    if (!command) return;
+    directive.invoke(source, command, directive.value(source));
+  }
+  const directive = {
+    ...stringAttributeDirective(options.name),
+    connect() {
+      removeGlobalEventListener("click", handleGlobalEvent);
+      addGlobalEventListener("click", handleGlobalEvent);
+    },
+    disconnect() {
+      removeGlobalEventListener("click", handleGlobalEvent);
+    },
+    subscribe(target, handler) {
+      const handleCommand = ((event) => {
+        if (!this.applied(event.detail.source)) return;
+        handler(event);
+      });
+      target.addEventListener(InvokerCommandEvent.type, handleCommand);
+      return () => target.removeEventListener(InvokerCommandEvent.type, handleCommand);
+    },
+    invoke(source, command, targetOrId) {
+      const root = findClosestDocument(source);
+      const target = typeof targetOrId === "string" ? root.getElementById(targetOrId) : targetOrId;
+      if (target) {
+        return !target.dispatchEvent(new InvokerCommandEvent({ source, command }));
+      }
+      return !source.dispatchEvent(new InvokerCommandEvent({ source, command, bubbles: true }));
+    }
+  };
+  return directive;
+}
+
+function optionalAttr(value) {
+  return value == null || value === "" ? nothing : value;
+}
+function handleOptionalSlotChange(host) {
+  let showSlot;
+  return (event) => {
+    const hasContent = event.target.assignedElements().length > 0;
+    if (showSlot === hasContent) return;
+    showSlot = hasContent;
+    host.requestUpdate();
+  };
+}
+function optionalSlot(host, slotName, classNames) {
+  if (!host.querySelector(`& > [slot="${slotName}"]`)) return nothing;
+  return html`<div class="${classNames ? `${slotName} ${classNames}` : slotName}"><slot name="${slotName}" @slotchange="${handleOptionalSlotChange(host)}"></slot></div>`;
+}
+
+const callbackRegistry = /* @__PURE__ */ new WeakMap();
+let resizeObserver;
+function observeElementResize(target, handler, options) {
+  resizeObserver?.unobserve(target);
+  callbackRegistry.set(target, throttle(handler, 1e3 / (options?.fpsLimit ?? 30), options));
+  resizeObserver ??= new ResizeObserver((entries, observer) => {
+    for (const entry of entries) {
+      callbackRegistry.get(entry.target)?.(entries, observer);
+    }
+  });
+  resizeObserver.observe(target);
+  return () => unobserveElementResize(target);
+}
+function unobserveElementResize(target) {
+  callbackRegistry.delete(target);
+  resizeObserver?.unobserve(target);
+}
+
+const uniqueIdCounter = /* @__PURE__ */ new Map();
+function getUniqueId(key) {
+  const count = (uniqueIdCounter.get(key) ?? 0) + 1;
+  uniqueIdCounter.set(key, count);
+  return `${key}-${count}`;
+}
+function resetUniqueId(key) {
+  if (key) {
+    uniqueIdCounter.delete(key);
+  } else {
+    uniqueIdCounter.clear();
+  }
+}
+
+export { InvokerCommandEvent, addGlobalEventListener, booleanAttributeDirective, clickedOutside, commandDirective, createCustomEvent, createToggleEvent, findClosestDocument, forwardEvent, getAssignedElements, getElementFromEvent, getKeyInfo, getUniqueId, interactionResponse, isToggleOpen, observeElementResize, optionalAttr, optionalSlot, parseDate, querySlotSelector, removeGlobalEventListener, resetUniqueId, setFocusable, stringAttributeDirective, supportsHover, toAriaBooleanAttribute, toPx, unobserveElementResize, waitForAnimations };