adapt-showcase-demo-page{display:block}adapt-showcase-demo-page *,adapt-showcase-demo-page :before,adapt-showcase-demo-page :after{box-sizing:border-box}.angular-demo .sec__head{max-width:1100px}.angular-kits{display:flex}.angular-kit{cursor:pointer}.angular-kit>input{opacity:0;width:1px;height:1px;position:absolute}.angular-kit:focus-within{outline:2px solid var(--brand);outline-offset:-3px}.angular-options{background:var(--page-surface);flex-wrap:wrap;justify-content:flex-start;align-items:end;gap:16px 20px;padding:14px 16px;display:flex}.angular-options label{min-width:0;color:var(--ink-2);align-items:center;gap:8px;font-size:12px;font-weight:500;display:inline-flex}.angular-options label:has(select){flex-direction:column;flex:145px;align-items:stretch;gap:4px;max-width:180px;font-size:11px}.angular-options select{appearance:none;background-color:var(--page-surface);width:100%;min-width:0;min-height:34px;color:var(--ink);border:1px solid var(--page-border);font:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23717786' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;border-radius:6px;padding:6px 28px 6px 10px;font-size:13px}[dir=rtl] .angular-options select{background-position:10px;padding-inline:10px 28px}.angular-options input[type=checkbox]{appearance:none;background:var(--page-border);cursor:pointer;border:0;border-radius:12px;flex:none;width:40px;height:22px;margin:0;transition:background .15s;position:relative}.angular-options input[type=checkbox]:before{content:"";background:var(--page-surface);border-radius:50%;width:18px;height:18px;transition:inset-inline-start .15s;position:absolute;inset-block-start:2px;inset-inline-start:2px;box-shadow:0 1px 2px #0002}.angular-options input[type=checkbox]:checked{background:var(--brand)}.angular-options input[type=checkbox]:checked:before{inset-inline-start:20px}.angular-options input:disabled{cursor:not-allowed}.angular-options :is(input,select):focus-visible{outline:2px solid var(--brand);outline-offset:2px}.angular-lab-options{border:1px solid var(--page-border);border-radius:.65rem;margin-bottom:1rem;padding:1rem}.angular-demo .demo-surface{border:0;border-radius:12px;padding:0;overflow:visible}@media (width<=920px){.angular-kits{display:flex}}@media (width<=700px){.angular-demo .demo-surface{padding:0}.angular-options{padding:12px}}.angular-no-motion *,.angular-no-motion :before,.angular-no-motion :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.angular-highlight{background-color:color-mix(in srgb, var(--kit) 18%, transparent)}.angular-cell-flash{animation:1.1s ease-out angular-cell-flash;display:block}@keyframes angular-cell-flash{0%{background-color:color-mix(in srgb, var(--kit) 42%, transparent)}to{background-color:#0000}}@media (prefers-reduced-motion:reduce){.angular-cell-flash{animation:none}}.angular-replaced-error{text-align:center;padding:2rem}.angular-options label:has(input:disabled){opacity:.6}dialog.angular-lab-options{color:var(--ink);background:var(--page-surface);border:1px solid var(--page-border);border-radius:0;width:min(680px,94vw);max-width:94vw;height:100dvh;max-height:100dvh;margin:0 0 0 auto;padding:1.5rem;overflow-y:auto}dialog.angular-lab-options::backdrop{background:#0007}dialog.angular-lab-options header{justify-content:space-between;align-items:center;display:flex}dialog.angular-lab-options .angular-options{align-items:flex-start}dialog.angular-lab-options .angular-options>label,dialog.angular-lab-options .angular-choice{flex:230px;min-width:0;max-width:100%}dialog.angular-lab-options .angular-options select{min-width:0;max-width:100%}.angular-transition-warning{z-index:2147483647;max-width:650px;color:var(--ink);background:var(--page-surface);border:2px solid var(--kit,var(--brand));border-radius:.75rem;margin-inline:auto;padding:1rem;position:fixed;inset-block-start:1rem;inset-inline:1rem;box-shadow:0 8px 28px #0004}.angular-transition-warning p{margin:0 0 .75rem}.angular-transition-warning button{font:inherit;cursor:pointer;padding:.4rem .7rem}.controls.angular-options{border-radius:8px}html:has(dialog.angular-lab-options[open]){overflow:hidden}.angular-options label:has(input[type=checkbox]){flex-direction:row-reverse;gap:10px;font-size:13px}.angular-options-switches{border-inline-start:1px solid var(--page-border);flex-wrap:wrap;align-items:center;gap:16px 20px;padding-inline-start:20px;display:flex}.angular-demo .hint{margin-block:8px 20px;font-size:12px}.angular-demo .demo-surface{margin-block-start:12px}.demo-status[data-tone]{color:var(--demo-status-ink);background:var(--demo-status-bg);--mat-chip-container-height:24px;--mat-chip-outline-color:transparent;--mat-chip-outline-width:0px;--mat-chip-container-shape-radius:4px;--mat-chip-elevated-container-color:var(--demo-status-bg);--mat-chip-label-text-color:var(--demo-status-ink);--mat-chip-label-text-size:12px;border-radius:4px;padding:3px 8px;font-size:12px;line-height:18px;display:inline-flex}.demo-status[data-tone=info]{--demo-status-bg:var(--lightningcss-light,#e6efff)var(--lightningcss-dark,#1b355d);--demo-status-ink:var(--lightningcss-light,#174fa6)var(--lightningcss-dark,#aacaff)}.demo-status[data-tone=success]{--demo-status-bg:var(--lightningcss-light,#dff5e9)var(--lightningcss-dark,#173d2e);--demo-status-ink:var(--lightningcss-light,#176b42)var(--lightningcss-dark,#93e3ba)}.demo-status[data-tone=error]{--demo-status-bg:var(--lightningcss-light,#ffe4e6)var(--lightningcss-dark,#4d232b);--demo-status-ink:var(--lightningcss-light,#ac2338)var(--lightningcss-dark,#ffadb9)}.demo-status[data-tone=neutral]{--demo-status-bg:var(--lightningcss-light,#e9ebf0)var(--lightningcss-dark,#303746);--demo-status-ink:var(--lightningcss-light,#485367)var(--lightningcss-dark,#cbd3e1)}mat-chip.demo-status[data-tone]{padding:0}@media (width<=700px){.angular-options label:has(select){flex:calc(50% - 20px)}.angular-options label:has([data-demo-control=grouping]){border:0;padding-inline-start:0}}.demo-state{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.angular-options .angular-choice__options>label{flex:auto;gap:0}.angular-options .angular-choice__options span{flex:1}.angular-options-switches{min-block-size:40px}@media (width<=700px){.angular-options-switches{border-inline-start:0;padding-inline-start:0}}.vue-demo{padding-block:2rem 4rem}.vue-demo__intro h1{margin:0 0 .75rem;font-size:clamp(1.4rem,3vw,2rem)}.vue-demo__intro p{color:var(--ink-2);margin-block-end:1.5rem}.vue-demo .adapterbar{padding-block:.25rem;overflow-x:auto}.vue-demo .adtab{min-inline-size:8rem}.vue-demo .adtab.is-on{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}.vue-demo__install,.vue-demo__options{border:1px solid var(--line);background:var(--page-surface);border-radius:12px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-block:1rem;padding:1rem;display:flex}.vue-demo__options p{color:var(--ink-2);margin:.25rem 0 0}.vue-demo .controls{border-radius:12px;flex-wrap:wrap;gap:.75rem 1rem;margin-block:1rem;padding:.875rem 1rem;display:flex}.vue-demo .angular-options-switches{border-inline-start:0;flex:100%;gap:1rem;padding-inline-start:0}.vue-demo__toggle{align-items:center;gap:.5rem;min-block-size:44px;display:inline-flex}.vue-demo__toggle input{accent-color:var(--brand)}.vue-demo .mx-demo__body{padding:0}.vue-demo__dialog{border:1px solid var(--line);max-block-size:calc(100dvh - 2rem);inline-size:min(28rem,100vw - 2rem);color:var(--ink);background:var(--page-surface);border-radius:12px;padding:1.25rem;overflow:auto}.vue-demo__dialog::backdrop{background:#00000073}.vue-demo__dialog header{justify-content:space-between;align-items:center;gap:1rem;display:flex}.vue-demo__dialog h2{font-size:1.2rem}.vue-demo__dialog label{display:flex}.vue-demo__dialog button{border:1px solid var(--line);color:var(--ink);background:var(--page-surface);border-radius:8px;min-block-size:44px;padding:.5rem 1rem}.vue-demo__discovery a{margin-inline-end:1rem;padding-block:.5rem;display:inline-block}@media (width<=600px){.vue-demo__install code{white-space:normal;overflow-wrap:anywhere}.vue-demo__options .nav__docs{display:inline-flex}}.vue-demo__dialog footer{flex-wrap:wrap;justify-content:space-between;gap:.75rem;margin-block-start:1rem;display:flex}