@livx.cc/bare-v3 0.1.0-alpha.35 → 0.1.0-alpha.37

package/dist/bare.css

@@ -149,6 +149,10 @@
     overflow: auto;
   }
 
+  dialog.b3-stack > .b3-scroll {
+    min-block-size: min(6rem, 30dvh);
+  }
+
   .b3-stack:has( > .b3-scroll) > :not(.b3-scroll) {
     flex-shrink: 0;
   }
@@ -1869,7 +1873,7 @@
     max-block-size: min(85dvh, calc(100dvh - env(safe-area-inset-top, 0px) - 1rem));
     overscroll-behavior: contain;
     border: 1px solid var(--b3-color-border);
-    padding: 1.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom, 0px));
+    padding: 1.5rem min(1.5rem, 5vi) max(1.5rem, env(safe-area-inset-bottom, 0px));
     background: var(--b3-color-surface);
     color: var(--b3-color-text);
     border-radius: 1.5rem 1.5rem 0 0;

package/dist/bare.min.css

@@ -1 +1 @@
-@layer bare.reset{:where(.b3-root),:where(.b3-root *){box-sizing:border-box}:where(.b3-root){font-family:var(--b3-font-body);background:var(--b3-color-canvas);color:var(--b3-color-text);color-scheme:light;margin:0;font-size:1rem;line-height:1.5}:where(.b3-root>body){margin:0}:where(.b3-root) :where(button,input,select,textarea){font:inherit}:where(.b3-root) :where(h1,h2,h3,h4,h5,h6,p){margin:0}:where(.b3-root) :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:none;box-shadow:inset 0 0 0 2px}@media (forced-colors:active){:where(.b3-root) :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline-offset:-2px;outline:1px solid highlight}}:where(.b3-root) :where(img,svg){max-inline-size:100%}@media (prefers-reduced-motion:reduce){:where(.b3-root *),:where(.b3-root *):before,:where(.b3-root *):after{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}[data-b3-motion=reduce] *,[data-b3-motion=reduce] :before,[data-b3-motion=reduce] :after,[data-b3-motion=reduce] ::backdrop{scroll-behavior:auto!important;transition:none!important;animation:none!important}:where(.b3-root [hidden]):not([hidden=until-found]){display:none!important}:where(.b3-root) :where(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--b3-color-accent)}}@layer bare.tokens{.b3-root{--b3-color-canvas:#f6f5f0;--b3-color-surface:#fff;--b3-color-text:#202923;--b3-color-muted:#59655d;--b3-color-border:#d5dbd3;--b3-color-accent:#245c42;--b3-color-on-accent:#fff;--b3-color-danger:#a62c35;--b3-color-focus:#276bdd;--b3-font-body:ui-sans-serif, system-ui, sans-serif;--b3-font-display:var(--b3-font-body);--b3-radius:.75rem;--b3-space:1rem;--b3-content:68rem}.b3-root[data-b3-theme=dark]{color-scheme:dark;--b3-color-canvas:#141c19;--b3-color-surface:#202c26;--b3-color-text:#edf3ec;--b3-color-muted:#a8b9ad;--b3-color-border:#415348;--b3-color-accent:#aadbb8;--b3-color-on-accent:#132b1b;--b3-color-danger:#ffadb1;--b3-color-focus:#9ac4ff}.b3-root{--b3-space-1:.25rem;--b3-space-2:.5rem;--b3-space-3:.75rem;--b3-space-4:1rem;--b3-space-6:1.5rem;--b3-space-8:2rem;--b3-space-12:3rem;--b3-radius-small:.375rem;--b3-radius-large:1.25rem;--b3-shadow:0 8px 32px #14231b14;--b3-shadow-raised:0 16px 56px #14231b24;--b3-color-success:#256443;--b3-color-warning:#805100;--b3-color-info:#275f99;--b3-duration:.16s}.b3-root[data-b3-theme=dark]{--b3-shadow:0 8px 32px #0004;--b3-shadow-raised:0 16px 56px #0007;--b3-color-success:#99d9ab;--b3-color-warning:#f2c76c;--b3-color-info:#a2cfff}}@layer bare.layout{.b3-shell{inline-size:min(100%, var(--b3-content));margin-inline:auto;padding:clamp(1rem,4vw,3rem)}.b3-stack{gap:var(--b3-space);flex-direction:column;min-inline-size:0;display:flex}.b3-stack:where(dialog:not([open])){display:none}.b3-scroll{overscroll-behavior:contain;scrollbar-gutter:stable;flex:auto;min-block-size:0;min-inline-size:0;overflow:auto}.b3-stack:has(>.b3-scroll)>:not(.b3-scroll){flex-shrink:0}.b3-cluster{align-items:center;gap:var(--b3-space);flex-wrap:wrap;min-inline-size:0;display:flex}.b3-cluster>*,.b3-split>*{min-inline-size:0}.b3-inline{vertical-align:middle;align-items:center;gap:.5em;min-inline-size:0;max-inline-size:100%;display:inline-flex}.b3-inline>*{min-inline-size:0}.b3-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--b3-grid-min,17rem)), 1fr));gap:var(--b3-space);display:grid}.b3-split{justify-content:space-between;align-items:center;gap:var(--b3-space);flex-wrap:wrap;display:flex}.b3-page{flex-direction:column;min-block-size:100svh;display:flex}.b3-page-body{flex:1;min-inline-size:0}.b3-app-layout{grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);min-block-size:100svh;display:grid}.b3-sidebar{padding:var(--b3-space-6);border-inline-end:1px solid var(--b3-color-border);background:var(--b3-color-surface);min-inline-size:0}.b3-center{padding:var(--b3-space-6);place-items:center;display:grid}.b3-cover{min-block-size:min(42rem,85svh);padding-block:var(--b3-space-12);flex-direction:column;justify-content:center;display:flex}.b3-reel{gap:var(--b3-space);scroll-snap-type:x proximity;padding-block-end:var(--b3-space-2);display:flex;overflow-x:auto}.b3-reel>*{scroll-snap-align:start;flex:0 0 min(85%,20rem)}@media (width<=48rem){.b3-app-layout{grid-template-columns:minmax(0,1fr)}.b3-sidebar{border-inline-end:0;border-block-end:1px solid var(--b3-color-border)}}.b3-reel:has(>.b3-badge){scrollbar-width:none;align-items:center;gap:.5rem;padding-block:.625rem}.b3-reel:has(>.b3-badge)::-webkit-scrollbar{display:none}.b3-reel>.b3-badge{flex:none}.b3-stack>.b3-reel{flex-shrink:0}@supports (animation-timeline:scroll(self inline)){.b3-reel:has(>.b3-badge){mask-image:linear-gradient(to right, #000 calc(100% - var(--b3-reel-fade)), #0000);animation:linear both b3-reel-fade scroll(self inline)}.b3-reel:has(>.b3-badge):dir(rtl){mask-image:linear-gradient(to left, #000 calc(100% - var(--b3-reel-fade)), #0000)}@keyframes b3-reel-fade{90%{--b3-reel-fade:2.5rem}to{--b3-reel-fade:0rem}}}}@layer bare.components{.b3-title{font-family:var(--b3-font-display);letter-spacing:-.04em;overflow-wrap:anywhere;font-size:clamp(2rem,7vw,4rem);line-height:1.05}.b3-heading{font-family:var(--b3-font-display);letter-spacing:-.02em;overflow-wrap:anywhere;font-size:1.375rem;line-height:1.25}.b3-muted{color:var(--b3-color-muted)}.b3-label{letter-spacing:.06em;text-transform:uppercase;font-size:.8125rem;font-weight:650}.b3-surface{background:var(--b3-color-surface);color:var(--b3-color-text);border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);padding:clamp(1rem,3vw,2rem)}.b3-button{border-radius:var(--b3-radius);background:var(--b3-color-accent);min-block-size:2.75rem;color:var(--b3-color-on-accent);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1rem;font-weight:650;text-decoration:none;display:inline-flex}.b3-button :where(svg){flex-shrink:0;display:block}.b3-button>:where([aria-hidden=true]):has(>svg){flex-shrink:0}.b3-button[data-b3-emphasis=quiet]{color:var(--b3-color-text);border-color:var(--b3-color-border);background:0 0}.b3-button:disabled{opacity:.5;cursor:not-allowed}.b3-field{align-content:start;gap:.375rem;min-inline-size:0;display:grid}.b3-input{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);min-block-size:2.75rem;inline-size:100%;min-inline-size:0;color:var(--b3-color-text);padding:.625rem .75rem}.b3-error{color:var(--b3-color-danger);font-size:.875rem}select.b3-input:not([multiple]):not([size]),select.b3-input[size="1"]:not([multiple]){appearance:none;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:right calc(1rem + 5px) center,right 1rem center;background-repeat:no-repeat;background-size:5px 5px;padding-inline-end:2.5rem}select.b3-input:not([multiple]):not([size]):dir(rtl),select.b3-input[size="1"]:not([multiple]):dir(rtl){background-position:1rem,calc(1rem + 5px)}@media (forced-colors:active){select.b3-input:not([multiple]):not([size]),select.b3-input[size="1"]:not([multiple]){appearance:auto;background-image:none}}:where(ul,ol):has(>.b3-row){margin:0;padding-inline-start:0}.b3-row{border-block-end:1px solid var(--b3-color-border);align-items:center;gap:.75rem;padding-block:1rem;display:flex}.b3-row:where(.b3-stack){align-items:stretch;gap:var(--b3-space)}.b3-badge{overflow-wrap:anywhere;border:1px solid var(--b3-color-border);border-radius:100vmax;align-items:center;inline-size:fit-content;max-inline-size:100%;padding:.125rem .5rem;font-size:.75rem;font-weight:650;display:inline-flex}.b3-progress{block-size:.5rem;inline-size:100%;accent-color:var(--b3-color-accent)}.b3-button{transition:box-shadow var(--b3-duration), border-color var(--b3-duration)}@media (hover:hover){.b3-button:not(:disabled):hover{box-shadow:inset 0 0 0 100vmax #00000012}}.b3-button:not(:disabled):active{box-shadow:inset 0 0 0 100vmax #00000024}.b3-button[data-b3-emphasis=outline]{color:var(--b3-color-accent);background:0 0;border-color:currentColor}.b3-button[data-b3-emphasis=danger]{background:var(--b3-color-danger);color:var(--b3-color-canvas)}.b3-button[data-b3-size=small]{padding:.5rem .75rem;font-size:.875rem}.b3-button[data-b3-size=large]{min-block-size:3.25rem;padding:.875rem 1.5rem}.b3-button[aria-busy=true]{cursor:progress}.b3-icon{vertical-align:-.2em;flex:none;block-size:1.25em;inline-size:1.25em;display:inline-block}.b3-input:disabled{opacity:.6;cursor:not-allowed}.b3-input[readonly]{background:var(--b3-color-canvas)}.b3-input::placeholder{color:var(--b3-color-muted);opacity:.8}.b3-input-group{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);align-items:stretch;min-inline-size:0;display:flex;overflow:clip}.b3-input-group>.b3-input{border:0;border-radius:0;flex:1}.b3-input-group:has(>.b3-button){flex-wrap:wrap;justify-content:end}.b3-input-group:has(>.b3-button)>.b3-input{flex-basis:12ch}.b3-input-group:focus-within{outline:none;box-shadow:inset 0 0 0 2px}.b3-input-affix{color:var(--b3-color-muted);background:var(--b3-color-canvas);align-items:center;padding-inline:.75rem;display:flex}.b3-choice{cursor:pointer;align-items:start;gap:.75rem;padding-block:.5rem;display:flex}.b3-choice input{--b3-choice-control:1.125rem;inline-size:var(--b3-choice-control);block-size:var(--b3-choice-control);flex:none;margin:0;margin-block-start:max(0px, calc((1lh - var(--b3-choice-control)) / 2))}.b3-choice>.b3-switch{--b3-choice-control:1.625rem}.b3-switch{appearance:none;background:var(--b3-color-muted);border:2px solid var(--b3-color-muted);cursor:pointer;border-radius:2rem;position:relative;block-size:1.625rem!important;inline-size:2.75rem!important}.b3-switch:before{content:"";background:var(--b3-color-surface);border-radius:50%;block-size:1.125rem;inline-size:1.125rem;position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem}.b3-switch:checked{background:var(--b3-color-accent);border-color:var(--b3-color-accent)}.b3-switch:checked:before{background:var(--b3-color-on-accent);inset-inline-start:calc(100% - 1.25rem)}.b3-switch:disabled{opacity:.5;cursor:not-allowed}.b3-input[type=number]{appearance:textfield}.b3-input[type=number]::-webkit-inner-spin-button,.b3-input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.b3-input::-webkit-datetime-edit,.b3-input::-webkit-datetime-edit-fields-wrapper{padding-block:0}.b3-input-affix{white-space:nowrap}.b3-card-header,.b3-card-footer{justify-content:space-between;align-items:center;gap:var(--b3-space);flex-wrap:wrap;display:flex}.b3-card-header{margin-block-end:var(--b3-space-4)}.b3-card-footer{border-block-start:1px solid var(--b3-color-border);margin-block-start:var(--b3-space-4);padding-block-start:var(--b3-space-4)}.b3-surface[data-b3-elevation=raised]{box-shadow:var(--b3-shadow)}.b3-divider{border:0;border-block-start:1px solid var(--b3-color-border);margin-block:var(--b3-space)}.b3-alert,.b3-toast{overflow-wrap:anywhere;min-inline-size:0}.b3-alert>*,.b3-toast>*{min-inline-size:0}.b3-alert pre{max-inline-size:100%;overflow-x:auto}.b3-alert{--b3-status-color:var(--b3-color-info);border:1px solid var(--b3-status-color);border-radius:var(--b3-radius-small);color:var(--b3-color-text);background:color-mix(in srgb, var(--b3-status-color) 8%, var(--b3-color-surface));border-inline-start-width:4px;align-items:start;gap:.75rem;padding:1rem;display:flex}.b3-alert[data-b3-tone=success],.b3-badge[data-b3-tone=success]{--b3-status-color:var(--b3-color-success)}.b3-alert[data-b3-tone=warning],.b3-badge[data-b3-tone=warning]{--b3-status-color:var(--b3-color-warning)}.b3-alert[data-b3-tone=danger],.b3-badge[data-b3-tone=danger]{--b3-status-color:var(--b3-color-danger)}.b3-badge[data-b3-tone]{color:var(--b3-status-color,var(--b3-color-info));background:color-mix(in srgb, currentColor 7%, transparent);border-color:currentColor}.b3-toast-region{z-index:100;pointer-events:none;gap:.75rem;inline-size:min(24rem,100% - 2rem);display:grid;position:fixed;inset-block-end:1rem;inset-inline-end:1rem}.b3-toast{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);pointer-events:auto;flex-wrap:wrap;align-items:start;gap:1rem;padding:1rem;display:flex}.b3-toast>:not(button,.b3-button){flex:12rem}.b3-toast>:is(button,.b3-button){flex:none;max-inline-size:100%}.b3-spinner{vertical-align:-.125em;border:2px solid;border-inline-end-color:#0000;border-radius:50%;flex:none;block-size:1.125em;inline-size:1.125em;animation:.8s linear infinite b3-spin;display:inline-block}@keyframes b3-spin{to{transform:rotate(360deg)}}.b3-skeleton{background:var(--b3-color-border);border-radius:var(--b3-radius-small);min-block-size:1rem;animation:1.8s ease-in-out infinite b3-pulse}@keyframes b3-pulse{50%{opacity:.45}}:is(button,a).b3-badge{min-block-size:auto;color:var(--b3-color-text);cursor:pointer;background:0 0;gap:.25rem;text-decoration:none;position:relative}:is(button,a).b3-badge:after{content:"";position:absolute;inset:-10px 0}:is(button,a).b3-badge[data-b3-tone]{color:var(--b3-status-color,var(--b3-color-info))}:is(button,a).b3-badge:is([aria-pressed=true],[aria-current]:not([aria-current=false])){color:var(--b3-color-on-accent);background:var(--b3-color-accent);border-color:var(--b3-color-accent)}.b3-avatar{background:var(--b3-color-accent);block-size:2.5rem;inline-size:2.5rem;color:var(--b3-color-on-accent);border-radius:50%;flex:none;place-items:center;font-size:.875rem;font-weight:650;display:inline-grid;overflow:hidden}.b3-avatar>img{object-fit:cover;block-size:100%;inline-size:100%}.b3-avatar-stack{padding-inline-start:.5rem;display:flex}.b3-avatar-stack>.b3-avatar{border:2px solid var(--b3-color-surface);margin-inline-start:-.5rem}.b3-kbd{border:1px solid var(--b3-color-border);background:var(--b3-color-surface);color:var(--b3-color-muted);border-block-end-width:2px;border-radius:.25rem;padding:.15rem .35rem;font:.75rem ui-monospace,monospace}.b3-table-wrap{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);position:relative;overflow-x:auto}.b3-table{border-collapse:collapse;text-align:start;font-variant-numeric:tabular-nums;inline-size:100%}.b3-table th{color:var(--b3-color-muted);background:var(--b3-color-canvas);font-size:.75rem;font-weight:650}.b3-table :is(th,td){border-block-end:1px solid var(--b3-color-border);text-align:start;vertical-align:middle;padding:.875rem 1rem}.b3-table tbody tr:last-child td{border-block-end:0}.b3-table[data-b3-density=compact] :is(th,td){padding:.5rem .75rem}.b3-table tbody tr[aria-selected=true]{background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface))}.b3-definition{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:.75rem 1.5rem;margin:0;display:grid;container:b3-definition/inline-size}.b3-definition dt{overflow-wrap:anywhere;min-inline-size:0;color:var(--b3-color-muted)}.b3-definition dd{overflow-wrap:anywhere;margin:0}@container b3-definition (width<=26rem){.b3-definition>:is(dt,dd){grid-column:1/-1}.b3-definition>dt:not(:first-child){margin-block-start:.75rem}}.b3-stat{gap:.5rem;display:grid}.b3-stat-value{letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-size:clamp(2rem,5vw,3rem);font-weight:650;line-height:1.1}.b3-nav{border-block-end:1px solid var(--b3-color-border);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem;display:flex}.b3-nav[data-b3-orientation=vertical]{border-block-end:0;flex-direction:column;align-items:stretch}.b3-nav-link{border-radius:var(--b3-radius-small);min-block-size:2.75rem;color:var(--b3-color-muted);align-items:center;gap:.5rem;padding:.625rem .875rem;text-decoration:none;display:flex}.b3-nav-link[aria-current=page]{background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface));color:var(--b3-color-accent);font-weight:650}.b3-nav-link:hover{background:var(--b3-color-surface);color:var(--b3-color-text)}.b3-breadcrumbs{color:var(--b3-color-muted);flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;font-size:.875rem;list-style:none;display:flex}.b3-breadcrumbs li+li:before{content:"/";color:var(--b3-color-border);margin-inline-end:.5rem}.b3-tablist{border-block-end:1px solid var(--b3-color-border);gap:.25rem;display:flex;overflow-x:auto}.b3-tab{appearance:none;color:var(--b3-color-muted);font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-block-end:2px solid #0000;min-block-size:2.75rem;padding:.75rem 1rem}.b3-tab[aria-selected=true]{color:var(--b3-color-accent);border-block-end-color:currentColor;font-weight:650}.b3-tab:disabled{opacity:.5;cursor:not-allowed}.b3-tabpanel{padding-block:var(--b3-space-4)}.b3-accordion{border-block-end:1px solid var(--b3-color-border)}.b3-accordion>summary{cursor:pointer;padding:1rem .25rem;font-weight:650}.b3-accordion>:not(summary){padding:0 .25rem 1rem}.b3-dropdown{display:inline-block;position:relative}.b3-dropdown>summary{list-style:none}.b3-dropdown>summary::-webkit-details-marker{display:none}.b3-dropdown-panel{z-index:20;border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);max-block-size:70svh;inline-size:max-content;min-inline-size:min(12rem,85vw);max-inline-size:min(22rem,85vw);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);padding:.5rem;position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-start:0;overflow-y:auto}.b3-dialog{overscroll-behavior:contain;border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-large);background:var(--b3-color-surface);max-block-size:calc(100svh - 2rem);inline-size:min(32rem,100% - 2rem);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);padding:min(1.5rem,5vi);overflow:auto}.b3-dialog::backdrop{background:#101b17a6}.b3-dialog[data-b3-placement=end]{border-radius:0;block-size:100svh;max-block-size:100svh;inline-size:min(28rem,100%);max-inline-size:100%;margin:0;margin-inline-start:auto}@media (prefers-reduced-motion:no-preference){.b3-dialog[open]{animation:.28s cubic-bezier(.16,1,.3,1) b3-dialog-enter}.b3-dialog[open][data-b3-placement=end]{animation-name:b3-drawer-enter}.b3-dialog::backdrop,.b3-sheet::backdrop{transition:opacity .16s ease-out}.b3-dialog[data-b3-closing]::backdrop,.b3-sheet[data-b3-closing]::backdrop{opacity:0}@keyframes b3-dialog-enter{0%{opacity:0;transform:translateY(8px)scale(.96)}}@keyframes b3-drawer-enter{0%{opacity:0;translate:var(--b3-drawer-offset,1rem)}}.b3-dialog[dir=rtl][data-b3-placement=end],[dir=rtl] .b3-dialog[data-b3-placement=end]{--b3-drawer-offset:-1rem}}.b3-dialog>form{gap:var(--b3-space);flex-direction:column;margin:0;display:flex}.b3-dialog>form>header:has(>button:last-child){grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.75rem;display:grid}.b3-dialog>form>header:has(>button:last-child)>:not(:last-child){grid-column:1;min-inline-size:0}.b3-dialog>form>header>button:last-child:not(:first-child){grid-area:1/2}.b3-dialog>form>footer{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.75rem;display:flex}.b3-dialog>form>footer>[data-b3-emphasis=quiet]:first-child:not(:last-child){margin-inline-end:auto}.b3-tree{border-inline-start:1px solid var(--b3-color-border);padding-inline-start:1rem;list-style:none}.b3-tree summary{cursor:pointer;padding-block:.5rem}.b3-prose{overflow-wrap:anywhere;max-inline-size:65ch;line-height:1.75}.b3-prose :is(p,ul,ol,blockquote,pre){margin-block:1rem}.b3-prose :is(h1,h2,h3,h4,h5,h6){margin-block:1.75rem .75rem;line-height:1.25}.b3-prose :is(h5,h6){font-size:1em}.b3-prose>:first-child{margin-block-start:0}.b3-prose img{block-size:auto}.b3-prose blockquote{border-inline-start:3px solid var(--b3-color-accent);color:var(--b3-color-muted);margin-inline:0;padding-inline-start:1rem}.b3-prose pre{background:var(--b3-color-surface);border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-small);padding:1rem;overflow-x:auto}.b3-visually-hidden{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.b3-skip-link{z-index:1000;border-radius:var(--b3-radius-small);background:var(--b3-color-accent);max-inline-size:calc(100% - 1.5rem);color:var(--b3-color-on-accent);padding:.75rem 1rem;font-weight:650;position:fixed;inset-block-start:max(.75rem, env(safe-area-inset-top,0px));inset-inline-start:.75rem}.b3-skip-link:not(:focus){clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;padding:0;overflow:hidden}.b3-hero{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(2rem,6vw,6rem);padding-block:clamp(3rem,8vw,7rem);display:grid}.b3-hero[data-b3-align=center]{text-align:center;grid-template-columns:minmax(0,1fr);justify-items:center}.b3-hero-copy{gap:1.5rem;max-inline-size:40rem;display:grid}.b3-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,5vw,5rem);padding-block:clamp(2rem,6vw,5rem);display:grid}.b3-feature[data-b3-reverse=true]>:first-child{order:2}.b3-feature-icon{border-radius:var(--b3-radius);background:var(--b3-color-accent);block-size:3rem;inline-size:3rem;color:var(--b3-color-on-accent);place-items:center;display:inline-grid}.b3-pricing{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-large);background:var(--b3-color-surface);color:var(--b3-color-text);flex-direction:column;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);display:flex}.b3-pricing[data-b3-featured=true]{border:2px solid var(--b3-color-accent);box-shadow:var(--b3-shadow)}.b3-pricing>.b3-button:last-child{margin-block-start:auto}.b3-price{font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:baseline;gap:.375rem;display:flex}.b3-price>strong{letter-spacing:-.05em;font-size:3.25rem;line-height:1.1}.b3-checklist{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.b3-checklist>li{align-items:start;gap:.625rem;display:flex}.b3-checklist>li:before{content:"✓";color:var(--b3-color-accent);font-weight:700}.b3-quote{border-inline-start:3px solid var(--b3-color-accent);margin:0;padding:1.5rem}.b3-quote blockquote{margin:0 0 1rem;font-size:1.25rem;line-height:1.5}.b3-art{isolation:isolate;border-radius:var(--b3-radius-large);background:var(--b3-color-surface);position:relative;overflow:hidden}.b3-art:before{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0}.b3-art[data-b3-art=dots]:before{background-image:radial-gradient(var(--b3-color-border) 1px,transparent 1px);background-size:16px 16px}.b3-art[data-b3-art=glow]:before{background:radial-gradient(ellipse at 20% 20%,color-mix(in srgb,var(--b3-color-accent) 20%,transparent),transparent 65%)}.b3-art[data-b3-art=wash]:before{background:linear-gradient(135deg,color-mix(in srgb,var(--b3-color-accent) 14%,transparent),transparent 70%)}@media (width<=48rem){.b3-hero,.b3-feature{grid-template-columns:minmax(0,1fr)}.b3-feature[data-b3-reverse=true]>:first-child{order:initial}}.b3-reading{grid-template-columns:minmax(0,1fr) minmax(12rem,16rem);grid-template-areas:"content outline";align-items:start;gap:clamp(2rem,5vw,5rem);display:grid}.b3-reading>:not(.b3-toc){grid-area:content;min-inline-size:0}.b3-toc{max-block-size:calc(100svh - var(--b3-outline-top,1rem) - 1rem);border-inline-start:1px solid var(--b3-color-border);grid-area:outline;padding-inline-start:1rem;font-size:.875rem;position:sticky;inset-block-start:var(--b3-outline-top,1rem);overflow-y:auto}.b3-toc ol{gap:.25rem;margin:.75rem 0 0;padding:0;list-style:none;display:grid}.b3-toc ol ol{margin:.25rem 0;padding-inline-start:1rem}.b3-toc-link{border-radius:var(--b3-radius-small);color:var(--b3-color-muted);overflow-wrap:anywhere;padding:.625rem .75rem;text-decoration:none;display:block}.b3-toc-link:hover{color:var(--b3-color-text);background:var(--b3-color-surface)}.b3-toc-link[aria-current=location]{color:var(--b3-color-accent);background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface));font-weight:650}@media (width<=48rem){.b3-reading{grid-template-columns:minmax(0,1fr);grid-template-areas:"outline""content";gap:2rem}.b3-toc{max-block-size:none;position:static}}.b3-command{inline-size:min(38rem,100% - 2rem);padding:0}.b3-command-search{border-block-end:1px solid var(--b3-color-border);align-items:center;gap:.75rem;padding:1rem;display:flex}.b3-command-search>input{flex:1;min-inline-size:0}.b3-command-list{overscroll-behavior:contain;max-block-size:50svh;padding:.5rem;overflow-y:auto}.b3-command-group+.b3-command-group{border-block-start:1px solid var(--b3-color-border);margin-block-start:.5rem;padding-block-start:.5rem}.b3-command-group>:first-child:not([role=option]){color:var(--b3-color-muted);padding:.5rem .75rem;font-size:.75rem;display:block}.b3-command-item{border-radius:var(--b3-radius-small);cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;min-block-size:2.75rem;padding:.875rem .75rem;display:flex}.b3-command-item>:first-child{overflow-wrap:anywhere;min-inline-size:0}.b3-command-item[aria-selected=true]{background:var(--b3-color-accent);color:var(--b3-color-on-accent)}.b3-command-item[aria-selected=true] .b3-muted{color:inherit}.b3-command-item[aria-disabled=true]{opacity:.5;cursor:not-allowed}.b3-command-item:not([aria-disabled=true]):hover{outline:1px solid var(--b3-color-border);outline-offset:-1px}.b3-form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));align-items:start;gap:1.25rem;display:grid}.b3-form-grid[data-b3-layout=inline]{flex-wrap:wrap;align-items:end;display:flex}.b3-form-grid[data-b3-layout=inline]>.b3-field{flex:12rem;min-inline-size:0}.b3-form-grid[data-b3-layout=inline]>.b3-button{overflow-wrap:anywhere;flex:0 auto;max-inline-size:100%}.b3-fieldset{border:0;min-inline-size:0;margin:0;padding:0}.b3-fieldset>legend{padding:0 0 .75rem;font-weight:650}.b3-help{color:var(--b3-color-muted);font-size:.875rem}.b3-help[data-b3-tone=success]{color:var(--b3-color-success)}.b3-help[data-b3-tone=warning]{color:var(--b3-color-warning)}.b3-input[data-b3-size=small]{padding:.5rem .75rem}.b3-input[data-b3-size=large]{min-block-size:3.25rem;padding:.875rem 1rem}.b3-input[data-b3-emphasis=subtle]{background-color:var(--b3-color-canvas);border-color:#0000}.b3-input[data-b3-emphasis=outline]{background-color:#0000;border-width:2px}.b3-input[data-b3-tone=success]{border-color:var(--b3-color-success)}.b3-input[data-b3-tone=warning]{border-color:var(--b3-color-warning)}.b3-input[aria-invalid=true]{border-color:var(--b3-color-danger)}textarea.b3-input{resize:vertical}select.b3-input[multiple]{min-block-size:8rem}.b3-input[type=file]{padding:.375rem}.b3-input::file-selector-button{font:inherit;border-radius:var(--b3-radius-small);background:var(--b3-color-accent);color:var(--b3-color-on-accent);cursor:pointer;border:0;margin-inline-end:.75rem;padding:.5rem .75rem}.b3-input[type=color]{inline-size:5rem;padding:.25rem}.b3-range{min-block-size:2.75rem;inline-size:100%;accent-color:var(--b3-color-accent);margin:0}.b3-choice-card{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);cursor:pointer;align-items:start;gap:.75rem;padding:1rem;display:flex}.b3-choice-card>input{flex:none;block-size:1.125rem;inline-size:1.125rem;margin-block-start:.3rem}.b3-choice-card:has(input:checked){border-color:var(--b3-color-accent);background:color-mix(in srgb, var(--b3-color-accent) 7%, var(--b3-color-surface));box-shadow:inset 0 0 0 1px var(--b3-color-accent)}.b3-choice-card:has(input:focus-visible){outline:none;box-shadow:inset 0 0 0 2px}.b3-choice-card:has(input:disabled){opacity:.5;cursor:not-allowed}.b3-choice-card:has(input[aria-invalid=true]){border-color:var(--b3-color-danger)}.b3-range[aria-invalid=true]{accent-color:var(--b3-color-danger)}.b3-stepper{flex-wrap:wrap;gap:1rem 2rem;margin:0;padding:0;list-style:none;display:flex}.b3-step{color:var(--b3-color-muted);align-items:center;gap:.625rem;font-size:.875rem;display:flex}.b3-step-marker{border:1px solid var(--b3-color-border);font-variant-numeric:tabular-nums;border-radius:50%;flex:none;place-items:center;block-size:2rem;inline-size:2rem;display:grid}.b3-step[aria-current=step]{color:var(--b3-color-text);font-weight:650}.b3-step[aria-current=step] .b3-step-marker{background:var(--b3-color-accent);color:var(--b3-color-on-accent);border-color:var(--b3-color-accent)}.b3-step[data-b3-complete=true] .b3-step-marker{border-color:var(--b3-color-success);color:var(--b3-color-success)}.b3-conversation{gap:1.5rem;min-inline-size:0;margin:0;padding:0;list-style:none;display:grid}.b3-message{justify-self:start;gap:.375rem;min-inline-size:0;max-inline-size:min(85%,38rem);display:grid}.b3-message[data-b3-side=self]{justify-self:end}.b3-message-body{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);white-space:pre-wrap;overflow-wrap:anywhere;padding:.875rem 1rem}.b3-message[data-b3-side=self]>.b3-message-body{background:var(--b3-color-accent);color:var(--b3-color-on-accent);border-color:#0000}.b3-message-meta{color:var(--b3-color-muted);flex-wrap:wrap;gap:.35rem .75rem;font-size:.8125rem;display:flex}.b3-message[data-b3-side=self]>.b3-message-meta{justify-content:end}.b3-mobile-app{--b3-touch:44px;min-block-size:100svh;max-inline-size:var(--b3-app-width,70rem);margin-inline:auto;padding-block-end:calc(5.5rem + env(safe-area-inset-bottom,0px))}.b3-mobile-app[data-b3-platform=android]{--b3-touch:48px}.b3-mobile-app :where(button,.b3-button,select,input:not([type=checkbox],[type=radio])){min-block-size:var(--b3-touch)}.b3-app-bar{padding:max(.75rem, env(safe-area-inset-top,0px)) 1.25rem .75rem;align-items:center;gap:.75rem;display:flex}.b3-app-bar>:last-child:not(:first-child){margin-inline-start:auto}.b3-bottom-nav{z-index:10;max-inline-size:var(--b3-app-width,70rem);padding:.5rem 1rem max(.5rem, env(safe-area-inset-bottom,0px));background:var(--b3-color-surface);color:var(--b3-color-text);border-block-start:1px solid var(--b3-color-border);justify-content:space-around;gap:.5rem;margin-inline:auto;display:flex;position:fixed;inset-block-end:0;inset-inline:0}.b3-bottom-link{min-block-size:var(--b3-touch,44px);min-inline-size:0;color:var(--b3-color-muted);border-radius:1rem;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.15rem;padding:.25rem .5rem;font-size:.75rem;text-decoration:none;display:flex}.b3-bottom-link[aria-current=page]{color:var(--b3-color-accent);font-weight:700}[data-b3-platform=android] .b3-bottom-link[aria-current=page]{background:var(--b3-color-canvas)}.b3-mobile-list{border:1px solid var(--b3-color-border);background:var(--b3-color-surface);border-radius:1rem;margin:0;padding:0;list-style:none;overflow:hidden}.b3-mobile-list>li+li{border-block-start:1px solid var(--b3-color-border)}.b3-mobile-row{min-block-size:var(--b3-touch,44px);color:var(--b3-color-text);align-items:center;gap:1rem;padding:.875rem 1rem;text-decoration:none;display:flex}.b3-mobile-row>:last-child:not(:first-child){margin-inline-start:auto}.b3-sheet{inline-size:min(100%, var(--b3-overlay-width,32rem));max-inline-size:none;max-block-size:min(85dvh, calc(100dvh - env(safe-area-inset-top,0px) - 1rem));overscroll-behavior:contain;border:1px solid var(--b3-color-border);padding:1.5rem 1.5rem max(1.5rem, env(safe-area-inset-bottom,0px));background:var(--b3-color-surface);color:var(--b3-color-text);border-radius:1.5rem 1.5rem 0 0;margin:0 auto;inset:auto 0 0;overflow-y:auto}.b3-sheet::backdrop{background:#0007}.b3-sheet [data-b3-initial-focus]:focus{outline:none}.b3-sheet-handle{min-block-size:44px;inline-size:5rem;color:var(--b3-color-muted);touch-action:none;cursor:grab;background:0 0;border:0;border-radius:1rem;flex:none;align-self:center;place-items:center;margin-block:-1rem -.5rem;padding:0;display:grid}.b3-sheet-handle:before{content:"";background:currentColor;border-radius:1rem;block-size:.25rem;inline-size:2.25rem}.b3-sheet[data-b3-dragging]{animation:none}.b3-sheet[data-b3-dragging] .b3-sheet-handle{cursor:grabbing}[data-b3-platform=android] .b3-mobile-list{border-radius:1.5rem}@media (prefers-reduced-motion:no-preference){.b3-sheet[open]{animation:.32s cubic-bezier(.16,1,.3,1) b3-sheet-enter}@keyframes b3-sheet-enter{0%{opacity:0;transform:translateY(3rem)}to{opacity:1;transform:translateY(0)}}}.b3-root:has(dialog:modal){overflow:hidden}.b3-bottom-link[aria-current=page]{background:color-mix(in srgb, var(--b3-color-accent) 12%, transparent)}.b3-bottom-link :where(svg:not([width])){flex:none;block-size:1.375rem;inline-size:1.375rem}.b3-app-frame{block-size:var(--b3-frame-height,100dvh);min-block-size:0;max-inline-size:var(--b3-app-width,70rem);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);grid-template-rows:auto minmax(0,1fr) auto;margin-inline:auto;display:grid;overflow:clip}.b3-app-frame>header{grid-row:1;min-inline-size:0}.b3-app-frame>main{overscroll-behavior:contain;grid-area:2/1;min-block-size:0;min-inline-size:0;overflow:auto}.b3-app-frame>:is(nav,footer){grid-row:3;min-inline-size:0;position:relative}.b3-app-frame>.b3-toast-region{overscroll-behavior:contain;grid-area:2/1;place-self:end;min-block-size:0;max-block-size:calc(100% - 2rem);margin:1rem;position:relative;inset:auto;overflow-y:auto}.b3-app-frame>.b3-app-bar{padding-block-start:.75rem}.b3-app-frame .b3-bottom-nav{inline-size:100%;max-inline-size:none;padding-block-end:.5rem;position:static}}@property --b3-reel-fade{syntax:"<length>";inherits:false;initial-value:2.5rem}
+@layer bare.reset{:where(.b3-root),:where(.b3-root *){box-sizing:border-box}:where(.b3-root){font-family:var(--b3-font-body);background:var(--b3-color-canvas);color:var(--b3-color-text);color-scheme:light;margin:0;font-size:1rem;line-height:1.5}:where(.b3-root>body){margin:0}:where(.b3-root) :where(button,input,select,textarea){font:inherit}:where(.b3-root) :where(h1,h2,h3,h4,h5,h6,p){margin:0}:where(.b3-root) :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline:none;box-shadow:inset 0 0 0 2px}@media (forced-colors:active){:where(.b3-root) :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{outline-offset:-2px;outline:1px solid highlight}}:where(.b3-root) :where(img,svg){max-inline-size:100%}@media (prefers-reduced-motion:reduce){:where(.b3-root *),:where(.b3-root *):before,:where(.b3-root *):after{transition:none!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}[data-b3-motion=reduce] *,[data-b3-motion=reduce] :before,[data-b3-motion=reduce] :after,[data-b3-motion=reduce] ::backdrop{scroll-behavior:auto!important;transition:none!important;animation:none!important}:where(.b3-root [hidden]):not([hidden=until-found]){display:none!important}:where(.b3-root) :where(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--b3-color-accent)}}@layer bare.tokens{.b3-root{--b3-color-canvas:#f6f5f0;--b3-color-surface:#fff;--b3-color-text:#202923;--b3-color-muted:#59655d;--b3-color-border:#d5dbd3;--b3-color-accent:#245c42;--b3-color-on-accent:#fff;--b3-color-danger:#a62c35;--b3-color-focus:#276bdd;--b3-font-body:ui-sans-serif, system-ui, sans-serif;--b3-font-display:var(--b3-font-body);--b3-radius:.75rem;--b3-space:1rem;--b3-content:68rem}.b3-root[data-b3-theme=dark]{color-scheme:dark;--b3-color-canvas:#141c19;--b3-color-surface:#202c26;--b3-color-text:#edf3ec;--b3-color-muted:#a8b9ad;--b3-color-border:#415348;--b3-color-accent:#aadbb8;--b3-color-on-accent:#132b1b;--b3-color-danger:#ffadb1;--b3-color-focus:#9ac4ff}.b3-root{--b3-space-1:.25rem;--b3-space-2:.5rem;--b3-space-3:.75rem;--b3-space-4:1rem;--b3-space-6:1.5rem;--b3-space-8:2rem;--b3-space-12:3rem;--b3-radius-small:.375rem;--b3-radius-large:1.25rem;--b3-shadow:0 8px 32px #14231b14;--b3-shadow-raised:0 16px 56px #14231b24;--b3-color-success:#256443;--b3-color-warning:#805100;--b3-color-info:#275f99;--b3-duration:.16s}.b3-root[data-b3-theme=dark]{--b3-shadow:0 8px 32px #0004;--b3-shadow-raised:0 16px 56px #0007;--b3-color-success:#99d9ab;--b3-color-warning:#f2c76c;--b3-color-info:#a2cfff}}@layer bare.layout{.b3-shell{inline-size:min(100%, var(--b3-content));margin-inline:auto;padding:clamp(1rem,4vw,3rem)}.b3-stack{gap:var(--b3-space);flex-direction:column;min-inline-size:0;display:flex}.b3-stack:where(dialog:not([open])){display:none}.b3-scroll{overscroll-behavior:contain;scrollbar-gutter:stable;flex:auto;min-block-size:0;min-inline-size:0;overflow:auto}dialog.b3-stack>.b3-scroll{min-block-size:min(6rem,30dvh)}.b3-stack:has(>.b3-scroll)>:not(.b3-scroll){flex-shrink:0}.b3-cluster{align-items:center;gap:var(--b3-space);flex-wrap:wrap;min-inline-size:0;display:flex}.b3-cluster>*,.b3-split>*{min-inline-size:0}.b3-inline{vertical-align:middle;align-items:center;gap:.5em;min-inline-size:0;max-inline-size:100%;display:inline-flex}.b3-inline>*{min-inline-size:0}.b3-grid{grid-template-columns:repeat(auto-fit, minmax(min(100%, var(--b3-grid-min,17rem)), 1fr));gap:var(--b3-space);display:grid}.b3-split{justify-content:space-between;align-items:center;gap:var(--b3-space);flex-wrap:wrap;display:flex}.b3-page{flex-direction:column;min-block-size:100svh;display:flex}.b3-page-body{flex:1;min-inline-size:0}.b3-app-layout{grid-template-columns:minmax(12rem,16rem) minmax(0,1fr);min-block-size:100svh;display:grid}.b3-sidebar{padding:var(--b3-space-6);border-inline-end:1px solid var(--b3-color-border);background:var(--b3-color-surface);min-inline-size:0}.b3-center{padding:var(--b3-space-6);place-items:center;display:grid}.b3-cover{min-block-size:min(42rem,85svh);padding-block:var(--b3-space-12);flex-direction:column;justify-content:center;display:flex}.b3-reel{gap:var(--b3-space);scroll-snap-type:x proximity;padding-block-end:var(--b3-space-2);display:flex;overflow-x:auto}.b3-reel>*{scroll-snap-align:start;flex:0 0 min(85%,20rem)}@media (width<=48rem){.b3-app-layout{grid-template-columns:minmax(0,1fr)}.b3-sidebar{border-inline-end:0;border-block-end:1px solid var(--b3-color-border)}}.b3-reel:has(>.b3-badge){scrollbar-width:none;align-items:center;gap:.5rem;padding-block:.625rem}.b3-reel:has(>.b3-badge)::-webkit-scrollbar{display:none}.b3-reel>.b3-badge{flex:none}.b3-stack>.b3-reel{flex-shrink:0}@supports (animation-timeline:scroll(self inline)){.b3-reel:has(>.b3-badge){mask-image:linear-gradient(to right, #000 calc(100% - var(--b3-reel-fade)), #0000);animation:linear both b3-reel-fade scroll(self inline)}.b3-reel:has(>.b3-badge):dir(rtl){mask-image:linear-gradient(to left, #000 calc(100% - var(--b3-reel-fade)), #0000)}@keyframes b3-reel-fade{90%{--b3-reel-fade:2.5rem}to{--b3-reel-fade:0rem}}}}@layer bare.components{.b3-title{font-family:var(--b3-font-display);letter-spacing:-.04em;overflow-wrap:anywhere;font-size:clamp(2rem,7vw,4rem);line-height:1.05}.b3-heading{font-family:var(--b3-font-display);letter-spacing:-.02em;overflow-wrap:anywhere;font-size:1.375rem;line-height:1.25}.b3-muted{color:var(--b3-color-muted)}.b3-label{letter-spacing:.06em;text-transform:uppercase;font-size:.8125rem;font-weight:650}.b3-surface{background:var(--b3-color-surface);color:var(--b3-color-text);border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);padding:clamp(1rem,3vw,2rem)}.b3-button{border-radius:var(--b3-radius);background:var(--b3-color-accent);min-block-size:2.75rem;color:var(--b3-color-on-accent);cursor:pointer;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.625rem 1rem;font-weight:650;text-decoration:none;display:inline-flex}.b3-button :where(svg){flex-shrink:0;display:block}.b3-button>:where([aria-hidden=true]):has(>svg){flex-shrink:0}.b3-button[data-b3-emphasis=quiet]{color:var(--b3-color-text);border-color:var(--b3-color-border);background:0 0}.b3-button:disabled{opacity:.5;cursor:not-allowed}.b3-field{align-content:start;gap:.375rem;min-inline-size:0;display:grid}.b3-input{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);min-block-size:2.75rem;inline-size:100%;min-inline-size:0;color:var(--b3-color-text);padding:.625rem .75rem}.b3-error{color:var(--b3-color-danger);font-size:.875rem}select.b3-input:not([multiple]):not([size]),select.b3-input[size="1"]:not([multiple]){appearance:none;background-image:linear-gradient(45deg,#0000 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,#0000 50%);background-position:right calc(1rem + 5px) center,right 1rem center;background-repeat:no-repeat;background-size:5px 5px;padding-inline-end:2.5rem}select.b3-input:not([multiple]):not([size]):dir(rtl),select.b3-input[size="1"]:not([multiple]):dir(rtl){background-position:1rem,calc(1rem + 5px)}@media (forced-colors:active){select.b3-input:not([multiple]):not([size]),select.b3-input[size="1"]:not([multiple]){appearance:auto;background-image:none}}:where(ul,ol):has(>.b3-row){margin:0;padding-inline-start:0}.b3-row{border-block-end:1px solid var(--b3-color-border);align-items:center;gap:.75rem;padding-block:1rem;display:flex}.b3-row:where(.b3-stack){align-items:stretch;gap:var(--b3-space)}.b3-badge{overflow-wrap:anywhere;border:1px solid var(--b3-color-border);border-radius:100vmax;align-items:center;inline-size:fit-content;max-inline-size:100%;padding:.125rem .5rem;font-size:.75rem;font-weight:650;display:inline-flex}.b3-progress{block-size:.5rem;inline-size:100%;accent-color:var(--b3-color-accent)}.b3-button{transition:box-shadow var(--b3-duration), border-color var(--b3-duration)}@media (hover:hover){.b3-button:not(:disabled):hover{box-shadow:inset 0 0 0 100vmax #00000012}}.b3-button:not(:disabled):active{box-shadow:inset 0 0 0 100vmax #00000024}.b3-button[data-b3-emphasis=outline]{color:var(--b3-color-accent);background:0 0;border-color:currentColor}.b3-button[data-b3-emphasis=danger]{background:var(--b3-color-danger);color:var(--b3-color-canvas)}.b3-button[data-b3-size=small]{padding:.5rem .75rem;font-size:.875rem}.b3-button[data-b3-size=large]{min-block-size:3.25rem;padding:.875rem 1.5rem}.b3-button[aria-busy=true]{cursor:progress}.b3-icon{vertical-align:-.2em;flex:none;block-size:1.25em;inline-size:1.25em;display:inline-block}.b3-input:disabled{opacity:.6;cursor:not-allowed}.b3-input[readonly]{background:var(--b3-color-canvas)}.b3-input::placeholder{color:var(--b3-color-muted);opacity:.8}.b3-input-group{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);align-items:stretch;min-inline-size:0;display:flex;overflow:clip}.b3-input-group>.b3-input{border:0;border-radius:0;flex:1}.b3-input-group:has(>.b3-button){flex-wrap:wrap;justify-content:end}.b3-input-group:has(>.b3-button)>.b3-input{flex-basis:12ch}.b3-input-group:focus-within{outline:none;box-shadow:inset 0 0 0 2px}.b3-input-affix{color:var(--b3-color-muted);background:var(--b3-color-canvas);align-items:center;padding-inline:.75rem;display:flex}.b3-choice{cursor:pointer;align-items:start;gap:.75rem;padding-block:.5rem;display:flex}.b3-choice input{--b3-choice-control:1.125rem;inline-size:var(--b3-choice-control);block-size:var(--b3-choice-control);flex:none;margin:0;margin-block-start:max(0px, calc((1lh - var(--b3-choice-control)) / 2))}.b3-choice>.b3-switch{--b3-choice-control:1.625rem}.b3-switch{appearance:none;background:var(--b3-color-muted);border:2px solid var(--b3-color-muted);cursor:pointer;border-radius:2rem;position:relative;block-size:1.625rem!important;inline-size:2.75rem!important}.b3-switch:before{content:"";background:var(--b3-color-surface);border-radius:50%;block-size:1.125rem;inline-size:1.125rem;position:absolute;inset-block-start:.125rem;inset-inline-start:.125rem}.b3-switch:checked{background:var(--b3-color-accent);border-color:var(--b3-color-accent)}.b3-switch:checked:before{background:var(--b3-color-on-accent);inset-inline-start:calc(100% - 1.25rem)}.b3-switch:disabled{opacity:.5;cursor:not-allowed}.b3-input[type=number]{appearance:textfield}.b3-input[type=number]::-webkit-inner-spin-button,.b3-input[type=number]::-webkit-outer-spin-button{appearance:none;margin:0}.b3-input::-webkit-datetime-edit,.b3-input::-webkit-datetime-edit-fields-wrapper{padding-block:0}.b3-input-affix{white-space:nowrap}.b3-card-header,.b3-card-footer{justify-content:space-between;align-items:center;gap:var(--b3-space);flex-wrap:wrap;display:flex}.b3-card-header{margin-block-end:var(--b3-space-4)}.b3-card-footer{border-block-start:1px solid var(--b3-color-border);margin-block-start:var(--b3-space-4);padding-block-start:var(--b3-space-4)}.b3-surface[data-b3-elevation=raised]{box-shadow:var(--b3-shadow)}.b3-divider{border:0;border-block-start:1px solid var(--b3-color-border);margin-block:var(--b3-space)}.b3-alert,.b3-toast{overflow-wrap:anywhere;min-inline-size:0}.b3-alert>*,.b3-toast>*{min-inline-size:0}.b3-alert pre{max-inline-size:100%;overflow-x:auto}.b3-alert{--b3-status-color:var(--b3-color-info);border:1px solid var(--b3-status-color);border-radius:var(--b3-radius-small);color:var(--b3-color-text);background:color-mix(in srgb, var(--b3-status-color) 8%, var(--b3-color-surface));border-inline-start-width:4px;align-items:start;gap:.75rem;padding:1rem;display:flex}.b3-alert[data-b3-tone=success],.b3-badge[data-b3-tone=success]{--b3-status-color:var(--b3-color-success)}.b3-alert[data-b3-tone=warning],.b3-badge[data-b3-tone=warning]{--b3-status-color:var(--b3-color-warning)}.b3-alert[data-b3-tone=danger],.b3-badge[data-b3-tone=danger]{--b3-status-color:var(--b3-color-danger)}.b3-badge[data-b3-tone]{color:var(--b3-status-color,var(--b3-color-info));background:color-mix(in srgb, currentColor 7%, transparent);border-color:currentColor}.b3-toast-region{z-index:100;pointer-events:none;gap:.75rem;inline-size:min(24rem,100% - 2rem);display:grid;position:fixed;inset-block-end:1rem;inset-inline-end:1rem}.b3-toast{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);pointer-events:auto;flex-wrap:wrap;align-items:start;gap:1rem;padding:1rem;display:flex}.b3-toast>:not(button,.b3-button){flex:12rem}.b3-toast>:is(button,.b3-button){flex:none;max-inline-size:100%}.b3-spinner{vertical-align:-.125em;border:2px solid;border-inline-end-color:#0000;border-radius:50%;flex:none;block-size:1.125em;inline-size:1.125em;animation:.8s linear infinite b3-spin;display:inline-block}@keyframes b3-spin{to{transform:rotate(360deg)}}.b3-skeleton{background:var(--b3-color-border);border-radius:var(--b3-radius-small);min-block-size:1rem;animation:1.8s ease-in-out infinite b3-pulse}@keyframes b3-pulse{50%{opacity:.45}}:is(button,a).b3-badge{min-block-size:auto;color:var(--b3-color-text);cursor:pointer;background:0 0;gap:.25rem;text-decoration:none;position:relative}:is(button,a).b3-badge:after{content:"";position:absolute;inset:-10px 0}:is(button,a).b3-badge[data-b3-tone]{color:var(--b3-status-color,var(--b3-color-info))}:is(button,a).b3-badge:is([aria-pressed=true],[aria-current]:not([aria-current=false])){color:var(--b3-color-on-accent);background:var(--b3-color-accent);border-color:var(--b3-color-accent)}.b3-avatar{background:var(--b3-color-accent);block-size:2.5rem;inline-size:2.5rem;color:var(--b3-color-on-accent);border-radius:50%;flex:none;place-items:center;font-size:.875rem;font-weight:650;display:inline-grid;overflow:hidden}.b3-avatar>img{object-fit:cover;block-size:100%;inline-size:100%}.b3-avatar-stack{padding-inline-start:.5rem;display:flex}.b3-avatar-stack>.b3-avatar{border:2px solid var(--b3-color-surface);margin-inline-start:-.5rem}.b3-kbd{border:1px solid var(--b3-color-border);background:var(--b3-color-surface);color:var(--b3-color-muted);border-block-end-width:2px;border-radius:.25rem;padding:.15rem .35rem;font:.75rem ui-monospace,monospace}.b3-table-wrap{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);position:relative;overflow-x:auto}.b3-table{border-collapse:collapse;text-align:start;font-variant-numeric:tabular-nums;inline-size:100%}.b3-table th{color:var(--b3-color-muted);background:var(--b3-color-canvas);font-size:.75rem;font-weight:650}.b3-table :is(th,td){border-block-end:1px solid var(--b3-color-border);text-align:start;vertical-align:middle;padding:.875rem 1rem}.b3-table tbody tr:last-child td{border-block-end:0}.b3-table[data-b3-density=compact] :is(th,td){padding:.5rem .75rem}.b3-table tbody tr[aria-selected=true]{background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface))}.b3-definition{grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:.75rem 1.5rem;margin:0;display:grid;container:b3-definition/inline-size}.b3-definition dt{overflow-wrap:anywhere;min-inline-size:0;color:var(--b3-color-muted)}.b3-definition dd{overflow-wrap:anywhere;margin:0}@container b3-definition (width<=26rem){.b3-definition>:is(dt,dd){grid-column:1/-1}.b3-definition>dt:not(:first-child){margin-block-start:.75rem}}.b3-stat{gap:.5rem;display:grid}.b3-stat-value{letter-spacing:-.045em;font-variant-numeric:tabular-nums;font-size:clamp(2rem,5vw,3rem);font-weight:650;line-height:1.1}.b3-nav{border-block-end:1px solid var(--b3-color-border);flex-wrap:wrap;align-items:center;gap:.5rem;padding:.75rem;display:flex}.b3-nav[data-b3-orientation=vertical]{border-block-end:0;flex-direction:column;align-items:stretch}.b3-nav-link{border-radius:var(--b3-radius-small);min-block-size:2.75rem;color:var(--b3-color-muted);align-items:center;gap:.5rem;padding:.625rem .875rem;text-decoration:none;display:flex}.b3-nav-link[aria-current=page]{background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface));color:var(--b3-color-accent);font-weight:650}.b3-nav-link:hover{background:var(--b3-color-surface);color:var(--b3-color-text)}.b3-breadcrumbs{color:var(--b3-color-muted);flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0;font-size:.875rem;list-style:none;display:flex}.b3-breadcrumbs li+li:before{content:"/";color:var(--b3-color-border);margin-inline-end:.5rem}.b3-tablist{border-block-end:1px solid var(--b3-color-border);gap:.25rem;display:flex;overflow-x:auto}.b3-tab{appearance:none;color:var(--b3-color-muted);font:inherit;white-space:nowrap;cursor:pointer;background:0 0;border:0;border-block-end:2px solid #0000;min-block-size:2.75rem;padding:.75rem 1rem}.b3-tab[aria-selected=true]{color:var(--b3-color-accent);border-block-end-color:currentColor;font-weight:650}.b3-tab:disabled{opacity:.5;cursor:not-allowed}.b3-tabpanel{padding-block:var(--b3-space-4)}.b3-accordion{border-block-end:1px solid var(--b3-color-border)}.b3-accordion>summary{cursor:pointer;padding:1rem .25rem;font-weight:650}.b3-accordion>:not(summary){padding:0 .25rem 1rem}.b3-dropdown{display:inline-block;position:relative}.b3-dropdown>summary{list-style:none}.b3-dropdown>summary::-webkit-details-marker{display:none}.b3-dropdown-panel{z-index:20;border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);max-block-size:70svh;inline-size:max-content;min-inline-size:min(12rem,85vw);max-inline-size:min(22rem,85vw);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);padding:.5rem;position:absolute;inset-block-start:calc(100% + .5rem);inset-inline-start:0;overflow-y:auto}.b3-dialog{overscroll-behavior:contain;border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-large);background:var(--b3-color-surface);max-block-size:calc(100svh - 2rem);inline-size:min(32rem,100% - 2rem);color:var(--b3-color-text);box-shadow:var(--b3-shadow-raised);padding:min(1.5rem,5vi);overflow:auto}.b3-dialog::backdrop{background:#101b17a6}.b3-dialog[data-b3-placement=end]{border-radius:0;block-size:100svh;max-block-size:100svh;inline-size:min(28rem,100%);max-inline-size:100%;margin:0;margin-inline-start:auto}@media (prefers-reduced-motion:no-preference){.b3-dialog[open]{animation:.28s cubic-bezier(.16,1,.3,1) b3-dialog-enter}.b3-dialog[open][data-b3-placement=end]{animation-name:b3-drawer-enter}.b3-dialog::backdrop,.b3-sheet::backdrop{transition:opacity .16s ease-out}.b3-dialog[data-b3-closing]::backdrop,.b3-sheet[data-b3-closing]::backdrop{opacity:0}@keyframes b3-dialog-enter{0%{opacity:0;transform:translateY(8px)scale(.96)}}@keyframes b3-drawer-enter{0%{opacity:0;translate:var(--b3-drawer-offset,1rem)}}.b3-dialog[dir=rtl][data-b3-placement=end],[dir=rtl] .b3-dialog[data-b3-placement=end]{--b3-drawer-offset:-1rem}}.b3-dialog>form{gap:var(--b3-space);flex-direction:column;margin:0;display:flex}.b3-dialog>form>header:has(>button:last-child){grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.75rem;display:grid}.b3-dialog>form>header:has(>button:last-child)>:not(:last-child){grid-column:1;min-inline-size:0}.b3-dialog>form>header>button:last-child:not(:first-child){grid-area:1/2}.b3-dialog>form>footer{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:.75rem;display:flex}.b3-dialog>form>footer>[data-b3-emphasis=quiet]:first-child:not(:last-child){margin-inline-end:auto}.b3-tree{border-inline-start:1px solid var(--b3-color-border);padding-inline-start:1rem;list-style:none}.b3-tree summary{cursor:pointer;padding-block:.5rem}.b3-prose{overflow-wrap:anywhere;max-inline-size:65ch;line-height:1.75}.b3-prose :is(p,ul,ol,blockquote,pre){margin-block:1rem}.b3-prose :is(h1,h2,h3,h4,h5,h6){margin-block:1.75rem .75rem;line-height:1.25}.b3-prose :is(h5,h6){font-size:1em}.b3-prose>:first-child{margin-block-start:0}.b3-prose img{block-size:auto}.b3-prose blockquote{border-inline-start:3px solid var(--b3-color-accent);color:var(--b3-color-muted);margin-inline:0;padding-inline-start:1rem}.b3-prose pre{background:var(--b3-color-surface);border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-small);padding:1rem;overflow-x:auto}.b3-visually-hidden{clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;position:absolute;overflow:hidden}.b3-skip-link{z-index:1000;border-radius:var(--b3-radius-small);background:var(--b3-color-accent);max-inline-size:calc(100% - 1.5rem);color:var(--b3-color-on-accent);padding:.75rem 1rem;font-weight:650;position:fixed;inset-block-start:max(.75rem, env(safe-area-inset-top,0px));inset-inline-start:.75rem}.b3-skip-link:not(:focus){clip-path:inset(50%);white-space:nowrap;block-size:1px;inline-size:1px;padding:0;overflow:hidden}.b3-hero{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center;gap:clamp(2rem,6vw,6rem);padding-block:clamp(3rem,8vw,7rem);display:grid}.b3-hero[data-b3-align=center]{text-align:center;grid-template-columns:minmax(0,1fr);justify-items:center}.b3-hero-copy{gap:1.5rem;max-inline-size:40rem;display:grid}.b3-feature{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,5vw,5rem);padding-block:clamp(2rem,6vw,5rem);display:grid}.b3-feature[data-b3-reverse=true]>:first-child{order:2}.b3-feature-icon{border-radius:var(--b3-radius);background:var(--b3-color-accent);block-size:3rem;inline-size:3rem;color:var(--b3-color-on-accent);place-items:center;display:inline-grid}.b3-pricing{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius-large);background:var(--b3-color-surface);color:var(--b3-color-text);flex-direction:column;gap:1.25rem;padding:clamp(1.25rem,3vw,2rem);display:flex}.b3-pricing[data-b3-featured=true]{border:2px solid var(--b3-color-accent);box-shadow:var(--b3-shadow)}.b3-pricing>.b3-button:last-child{margin-block-start:auto}.b3-price{font-variant-numeric:tabular-nums;flex-wrap:wrap;align-items:baseline;gap:.375rem;display:flex}.b3-price>strong{letter-spacing:-.05em;font-size:3.25rem;line-height:1.1}.b3-checklist{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.b3-checklist>li{align-items:start;gap:.625rem;display:flex}.b3-checklist>li:before{content:"✓";color:var(--b3-color-accent);font-weight:700}.b3-quote{border-inline-start:3px solid var(--b3-color-accent);margin:0;padding:1.5rem}.b3-quote blockquote{margin:0 0 1rem;font-size:1.25rem;line-height:1.5}.b3-art{isolation:isolate;border-radius:var(--b3-radius-large);background:var(--b3-color-surface);position:relative;overflow:hidden}.b3-art:before{content:"";z-index:-1;pointer-events:none;position:absolute;inset:0}.b3-art[data-b3-art=dots]:before{background-image:radial-gradient(var(--b3-color-border) 1px,transparent 1px);background-size:16px 16px}.b3-art[data-b3-art=glow]:before{background:radial-gradient(ellipse at 20% 20%,color-mix(in srgb,var(--b3-color-accent) 20%,transparent),transparent 65%)}.b3-art[data-b3-art=wash]:before{background:linear-gradient(135deg,color-mix(in srgb,var(--b3-color-accent) 14%,transparent),transparent 70%)}@media (width<=48rem){.b3-hero,.b3-feature{grid-template-columns:minmax(0,1fr)}.b3-feature[data-b3-reverse=true]>:first-child{order:initial}}.b3-reading{grid-template-columns:minmax(0,1fr) minmax(12rem,16rem);grid-template-areas:"content outline";align-items:start;gap:clamp(2rem,5vw,5rem);display:grid}.b3-reading>:not(.b3-toc){grid-area:content;min-inline-size:0}.b3-toc{max-block-size:calc(100svh - var(--b3-outline-top,1rem) - 1rem);border-inline-start:1px solid var(--b3-color-border);grid-area:outline;padding-inline-start:1rem;font-size:.875rem;position:sticky;inset-block-start:var(--b3-outline-top,1rem);overflow-y:auto}.b3-toc ol{gap:.25rem;margin:.75rem 0 0;padding:0;list-style:none;display:grid}.b3-toc ol ol{margin:.25rem 0;padding-inline-start:1rem}.b3-toc-link{border-radius:var(--b3-radius-small);color:var(--b3-color-muted);overflow-wrap:anywhere;padding:.625rem .75rem;text-decoration:none;display:block}.b3-toc-link:hover{color:var(--b3-color-text);background:var(--b3-color-surface)}.b3-toc-link[aria-current=location]{color:var(--b3-color-accent);background:color-mix(in srgb, var(--b3-color-accent) 10%, var(--b3-color-surface));font-weight:650}@media (width<=48rem){.b3-reading{grid-template-columns:minmax(0,1fr);grid-template-areas:"outline""content";gap:2rem}.b3-toc{max-block-size:none;position:static}}.b3-command{inline-size:min(38rem,100% - 2rem);padding:0}.b3-command-search{border-block-end:1px solid var(--b3-color-border);align-items:center;gap:.75rem;padding:1rem;display:flex}.b3-command-search>input{flex:1;min-inline-size:0}.b3-command-list{overscroll-behavior:contain;max-block-size:50svh;padding:.5rem;overflow-y:auto}.b3-command-group+.b3-command-group{border-block-start:1px solid var(--b3-color-border);margin-block-start:.5rem;padding-block-start:.5rem}.b3-command-group>:first-child:not([role=option]){color:var(--b3-color-muted);padding:.5rem .75rem;font-size:.75rem;display:block}.b3-command-item{border-radius:var(--b3-radius-small);cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;min-block-size:2.75rem;padding:.875rem .75rem;display:flex}.b3-command-item>:first-child{overflow-wrap:anywhere;min-inline-size:0}.b3-command-item[aria-selected=true]{background:var(--b3-color-accent);color:var(--b3-color-on-accent)}.b3-command-item[aria-selected=true] .b3-muted{color:inherit}.b3-command-item[aria-disabled=true]{opacity:.5;cursor:not-allowed}.b3-command-item:not([aria-disabled=true]):hover{outline:1px solid var(--b3-color-border);outline-offset:-1px}.b3-form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,14rem),1fr));align-items:start;gap:1.25rem;display:grid}.b3-form-grid[data-b3-layout=inline]{flex-wrap:wrap;align-items:end;display:flex}.b3-form-grid[data-b3-layout=inline]>.b3-field{flex:12rem;min-inline-size:0}.b3-form-grid[data-b3-layout=inline]>.b3-button{overflow-wrap:anywhere;flex:0 auto;max-inline-size:100%}.b3-fieldset{border:0;min-inline-size:0;margin:0;padding:0}.b3-fieldset>legend{padding:0 0 .75rem;font-weight:650}.b3-help{color:var(--b3-color-muted);font-size:.875rem}.b3-help[data-b3-tone=success]{color:var(--b3-color-success)}.b3-help[data-b3-tone=warning]{color:var(--b3-color-warning)}.b3-input[data-b3-size=small]{padding:.5rem .75rem}.b3-input[data-b3-size=large]{min-block-size:3.25rem;padding:.875rem 1rem}.b3-input[data-b3-emphasis=subtle]{background-color:var(--b3-color-canvas);border-color:#0000}.b3-input[data-b3-emphasis=outline]{background-color:#0000;border-width:2px}.b3-input[data-b3-tone=success]{border-color:var(--b3-color-success)}.b3-input[data-b3-tone=warning]{border-color:var(--b3-color-warning)}.b3-input[aria-invalid=true]{border-color:var(--b3-color-danger)}textarea.b3-input{resize:vertical}select.b3-input[multiple]{min-block-size:8rem}.b3-input[type=file]{padding:.375rem}.b3-input::file-selector-button{font:inherit;border-radius:var(--b3-radius-small);background:var(--b3-color-accent);color:var(--b3-color-on-accent);cursor:pointer;border:0;margin-inline-end:.75rem;padding:.5rem .75rem}.b3-input[type=color]{inline-size:5rem;padding:.25rem}.b3-range{min-block-size:2.75rem;inline-size:100%;accent-color:var(--b3-color-accent);margin:0}.b3-choice-card{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);cursor:pointer;align-items:start;gap:.75rem;padding:1rem;display:flex}.b3-choice-card>input{flex:none;block-size:1.125rem;inline-size:1.125rem;margin-block-start:.3rem}.b3-choice-card:has(input:checked){border-color:var(--b3-color-accent);background:color-mix(in srgb, var(--b3-color-accent) 7%, var(--b3-color-surface));box-shadow:inset 0 0 0 1px var(--b3-color-accent)}.b3-choice-card:has(input:focus-visible){outline:none;box-shadow:inset 0 0 0 2px}.b3-choice-card:has(input:disabled){opacity:.5;cursor:not-allowed}.b3-choice-card:has(input[aria-invalid=true]){border-color:var(--b3-color-danger)}.b3-range[aria-invalid=true]{accent-color:var(--b3-color-danger)}.b3-stepper{flex-wrap:wrap;gap:1rem 2rem;margin:0;padding:0;list-style:none;display:flex}.b3-step{color:var(--b3-color-muted);align-items:center;gap:.625rem;font-size:.875rem;display:flex}.b3-step-marker{border:1px solid var(--b3-color-border);font-variant-numeric:tabular-nums;border-radius:50%;flex:none;place-items:center;block-size:2rem;inline-size:2rem;display:grid}.b3-step[aria-current=step]{color:var(--b3-color-text);font-weight:650}.b3-step[aria-current=step] .b3-step-marker{background:var(--b3-color-accent);color:var(--b3-color-on-accent);border-color:var(--b3-color-accent)}.b3-step[data-b3-complete=true] .b3-step-marker{border-color:var(--b3-color-success);color:var(--b3-color-success)}.b3-conversation{gap:1.5rem;min-inline-size:0;margin:0;padding:0;list-style:none;display:grid}.b3-message{justify-self:start;gap:.375rem;min-inline-size:0;max-inline-size:min(85%,38rem);display:grid}.b3-message[data-b3-side=self]{justify-self:end}.b3-message-body{border:1px solid var(--b3-color-border);border-radius:var(--b3-radius);background:var(--b3-color-surface);color:var(--b3-color-text);white-space:pre-wrap;overflow-wrap:anywhere;padding:.875rem 1rem}.b3-message[data-b3-side=self]>.b3-message-body{background:var(--b3-color-accent);color:var(--b3-color-on-accent);border-color:#0000}.b3-message-meta{color:var(--b3-color-muted);flex-wrap:wrap;gap:.35rem .75rem;font-size:.8125rem;display:flex}.b3-message[data-b3-side=self]>.b3-message-meta{justify-content:end}.b3-mobile-app{--b3-touch:44px;min-block-size:100svh;max-inline-size:var(--b3-app-width,70rem);margin-inline:auto;padding-block-end:calc(5.5rem + env(safe-area-inset-bottom,0px))}.b3-mobile-app[data-b3-platform=android]{--b3-touch:48px}.b3-mobile-app :where(button,.b3-button,select,input:not([type=checkbox],[type=radio])){min-block-size:var(--b3-touch)}.b3-app-bar{padding:max(.75rem, env(safe-area-inset-top,0px)) 1.25rem .75rem;align-items:center;gap:.75rem;display:flex}.b3-app-bar>:last-child:not(:first-child){margin-inline-start:auto}.b3-bottom-nav{z-index:10;max-inline-size:var(--b3-app-width,70rem);padding:.5rem 1rem max(.5rem, env(safe-area-inset-bottom,0px));background:var(--b3-color-surface);color:var(--b3-color-text);border-block-start:1px solid var(--b3-color-border);justify-content:space-around;gap:.5rem;margin-inline:auto;display:flex;position:fixed;inset-block-end:0;inset-inline:0}.b3-bottom-link{min-block-size:var(--b3-touch,44px);min-inline-size:0;color:var(--b3-color-muted);border-radius:1rem;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.15rem;padding:.25rem .5rem;font-size:.75rem;text-decoration:none;display:flex}.b3-bottom-link[aria-current=page]{color:var(--b3-color-accent);font-weight:700}[data-b3-platform=android] .b3-bottom-link[aria-current=page]{background:var(--b3-color-canvas)}.b3-mobile-list{border:1px solid var(--b3-color-border);background:var(--b3-color-surface);border-radius:1rem;margin:0;padding:0;list-style:none;overflow:hidden}.b3-mobile-list>li+li{border-block-start:1px solid var(--b3-color-border)}.b3-mobile-row{min-block-size:var(--b3-touch,44px);color:var(--b3-color-text);align-items:center;gap:1rem;padding:.875rem 1rem;text-decoration:none;display:flex}.b3-mobile-row>:last-child:not(:first-child){margin-inline-start:auto}.b3-sheet{inline-size:min(100%, var(--b3-overlay-width,32rem));max-inline-size:none;max-block-size:min(85dvh, calc(100dvh - env(safe-area-inset-top,0px) - 1rem));overscroll-behavior:contain;border:1px solid var(--b3-color-border);padding:1.5rem min(1.5rem, 5vi) max(1.5rem, env(safe-area-inset-bottom,0px));background:var(--b3-color-surface);color:var(--b3-color-text);border-radius:1.5rem 1.5rem 0 0;margin:0 auto;inset:auto 0 0;overflow-y:auto}.b3-sheet::backdrop{background:#0007}.b3-sheet [data-b3-initial-focus]:focus{outline:none}.b3-sheet-handle{min-block-size:44px;inline-size:5rem;color:var(--b3-color-muted);touch-action:none;cursor:grab;background:0 0;border:0;border-radius:1rem;flex:none;align-self:center;place-items:center;margin-block:-1rem -.5rem;padding:0;display:grid}.b3-sheet-handle:before{content:"";background:currentColor;border-radius:1rem;block-size:.25rem;inline-size:2.25rem}.b3-sheet[data-b3-dragging]{animation:none}.b3-sheet[data-b3-dragging] .b3-sheet-handle{cursor:grabbing}[data-b3-platform=android] .b3-mobile-list{border-radius:1.5rem}@media (prefers-reduced-motion:no-preference){.b3-sheet[open]{animation:.32s cubic-bezier(.16,1,.3,1) b3-sheet-enter}@keyframes b3-sheet-enter{0%{opacity:0;transform:translateY(3rem)}to{opacity:1;transform:translateY(0)}}}.b3-root:has(dialog:modal){overflow:hidden}.b3-bottom-link[aria-current=page]{background:color-mix(in srgb, var(--b3-color-accent) 12%, transparent)}.b3-bottom-link :where(svg:not([width])){flex:none;block-size:1.375rem;inline-size:1.375rem}.b3-app-frame{block-size:var(--b3-frame-height,100dvh);min-block-size:0;max-inline-size:var(--b3-app-width,70rem);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);grid-template-rows:auto minmax(0,1fr) auto;margin-inline:auto;display:grid;overflow:clip}.b3-app-frame>header{grid-row:1;min-inline-size:0}.b3-app-frame>main{overscroll-behavior:contain;grid-area:2/1;min-block-size:0;min-inline-size:0;overflow:auto}.b3-app-frame>:is(nav,footer){grid-row:3;min-inline-size:0;position:relative}.b3-app-frame>.b3-toast-region{overscroll-behavior:contain;grid-area:2/1;place-self:end;min-block-size:0;max-block-size:calc(100% - 2rem);margin:1rem;position:relative;inset:auto;overflow-y:auto}.b3-app-frame>.b3-app-bar{padding-block-start:.75rem}.b3-app-frame .b3-bottom-nav{inline-size:100%;max-inline-size:none;padding-block-end:.5rem;position:static}}@property --b3-reel-fade{syntax:"<length>";inherits:false;initial-value:2.5rem}

package/dist/elements/date-picker.js

@@ -0,0 +1,506 @@
+// src/elements/date-picker.js
+var Base = typeof HTMLElement === "function" ? HTMLElement : class {
+};
+var pad = (value) => String(value).padStart(2, "0");
+function toIso(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function parse(value) {
+  const match = /^(\d{4})-(\d{2})(?:-(\d{2}))?$/.exec(String(value ?? "").trim());
+  if (!match)
+    return null;
+  const [, year, month, day] = match;
+  const date = new Date(Number(year), Number(month) - 1, day === undefined ? 1 : Number(day));
+  if (date.getMonth() !== Number(month) - 1 || day !== undefined && date.getDate() !== Number(day))
+    return null;
+  return date;
+}
+var today = () => toIso(new Date);
+function addDays(iso, count) {
+  const date = parse(iso);
+  if (!date)
+    return iso;
+  date.setDate(date.getDate() + count);
+  return toIso(date);
+}
+function addMonths(iso, count) {
+  const date = parse(iso);
+  if (!date)
+    return iso;
+  const day = date.getDate();
+  date.setDate(1);
+  date.setMonth(date.getMonth() + count);
+  date.setDate(Math.min(day, daysInMonth(date.getFullYear(), date.getMonth())));
+  return toIso(date);
+}
+var daysInMonth = (year, month) => new Date(year, month + 1, 0).getDate();
+var STYLE_ID = "b3-date-picker-style";
+var STYLE = `
+.b3-date-picker{display:block;position:relative;color:var(--b3-color-text,#202923);
+  background:var(--b3-color-surface,#fff);border:1px solid var(--b3-color-border,#d5dbd3);
+  border-radius:var(--b3-radius,.75rem);padding:var(--b3-space,1rem);
+  -webkit-user-select:none;user-select:none;}
+.b3-date-picker > :not(.b3-date-picker-ui){display:none;}
+/* A required control that is not RENDERED cannot be focused, so Chrome refuses to submit the
+   form and has nowhere to anchor the validation bubble: the button dies silently. Clip that one
+   case instead of removing it, so the constraint still blocks the submit and still SHOWS why. */
+.b3-date-picker > :not(.b3-date-picker-ui):has(input:required),
+.b3-date-picker > input:required{display:block;position:absolute;
+  inset-block-start:var(--b3-space,1rem);inset-inline-start:var(--b3-space,1rem);
+  width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;white-space:nowrap;}
+.b3-date-picker-bar{display:flex;align-items:center;gap:.5rem;margin-block-end:.5rem;}
+.b3-date-picker-title{flex:1;text-align:center;font-weight:600;}
+.b3-date-picker-nav{display:inline-flex;align-items:center;justify-content:center;
+  min-width:var(--b3-touch,44px);min-height:var(--b3-touch,44px);font:inherit;line-height:1;
+  border:1px solid var(--b3-color-border,#d5dbd3);border-radius:var(--b3-radius-small,.375rem);
+  background:var(--b3-color-surface,#fff);color:inherit;cursor:pointer;}
+.b3-date-picker-nav::before{content:"\\2039";font-size:1.25em;}
+.b3-date-picker-nav[data-b3-step="1"]::before{content:"\\203A";}
+.b3-date-picker:dir(rtl) .b3-date-picker-nav::before{content:"\\203A";}
+.b3-date-picker:dir(rtl) .b3-date-picker-nav[data-b3-step="1"]::before{content:"\\2039";}
+.b3-date-picker-nav[disabled]{opacity:.4;cursor:default;}
+.b3-date-picker-grid{width:100%;border-collapse:collapse;table-layout:fixed;}
+.b3-date-picker-grid th{font-weight:500;font-size:.8125em;padding-block:.25rem;
+  color:var(--b3-color-muted,#5d6b60);}
+.b3-date-picker-grid td{padding:1px;text-align:center;}
+.b3-date-picker-grid td[data-b3-date]{cursor:pointer;border-radius:var(--b3-radius-small,.375rem);
+  line-height:calc(var(--b3-touch,44px) - 2px);}
+.b3-date-picker-grid td[data-b3-date]:hover{background:var(--b3-color-canvas,#f6f5f0);}
+.b3-date-picker-grid td:focus-visible{outline:2px solid var(--b3-color-focus,#276bdd);outline-offset:-2px;}
+.b3-date-picker-grid td[data-b3-today]{box-shadow:inset 0 0 0 1px var(--b3-color-border,#d5dbd3);}
+.b3-date-picker-grid td[aria-selected="true"]{background:var(--b3-color-accent,#276bdd);
+  color:var(--b3-color-on-accent,#fff);}
+.b3-date-picker-grid td[aria-disabled="true"]{color:var(--b3-color-muted,#5d6b60);opacity:.45;cursor:default;}
+.b3-date-picker-grid td[aria-disabled="true"]:hover{background:none;}
+`;
+function ensureStyle(document) {
+  if (document.getElementById(STYLE_ID))
+    return;
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = STYLE;
+  document.head.append(style);
+}
+var tokens = (value) => String(value ?? "").split(/[\s,]+/).filter(Boolean);
+
+class B3DatePicker extends Base {
+  static observedAttributes = [
+    "value",
+    "month",
+    "min",
+    "max",
+    "week-start",
+    "locale",
+    "disabled-dates",
+    "disabled-weekdays"
+  ];
+  #upgraded = false;
+  #controller = null;
+  #focus = null;
+  #month = null;
+  #grid = null;
+  #bar = null;
+  #title = null;
+  #ui = null;
+  #observer = null;
+  #titleId = `b3-date-picker-title-${Math.random().toString(36).slice(2, 8)}`;
+  get value() {
+    return this.getAttribute("value") && parse(this.getAttribute("value")) ? this.getAttribute("value") : "";
+  }
+  set value(next) {
+    if (next == null || next === "")
+      this.removeAttribute("value");
+    else
+      this.setAttribute("value", next);
+  }
+  get month() {
+    const explicit = this.#month ?? this.getAttribute("month");
+    return parse(explicit) ? explicit.slice(0, 7) : (this.value || today()).slice(0, 7);
+  }
+  set month(next) {
+    if (next == null)
+      this.removeAttribute("month");
+    else
+      this.setAttribute("month", next);
+  }
+  get min() {
+    return parse(this.getAttribute("min")) ? this.getAttribute("min") : "";
+  }
+  set min(next) {
+    if (next == null)
+      this.removeAttribute("min");
+    else
+      this.setAttribute("min", next);
+  }
+  get max() {
+    return parse(this.getAttribute("max")) ? this.getAttribute("max") : "";
+  }
+  set max(next) {
+    if (next == null)
+      this.removeAttribute("max");
+    else
+      this.setAttribute("max", next);
+  }
+  get weekStart() {
+    const value = Number(this.getAttribute("week-start"));
+    return Number.isInteger(value) && value >= 0 && value <= 6 ? value : 0;
+  }
+  set weekStart(next) {
+    this.setAttribute("week-start", String(next));
+  }
+  get locale() {
+    return this.getAttribute("locale") || this.ownerDocument?.documentElement?.lang || undefined;
+  }
+  set locale(next) {
+    if (next == null)
+      this.removeAttribute("locale");
+    else
+      this.setAttribute("locale", next);
+  }
+  #disabledDates() {
+    return new Set(tokens(this.getAttribute("disabled-dates")).filter(parse));
+  }
+  #disabledWeekdays() {
+    return new Set(tokens(this.getAttribute("disabled-weekdays")).map(Number).filter((day) => day >= 0 && day <= 6));
+  }
+  isDisabled(iso) {
+    const date = parse(iso);
+    if (!date)
+      return true;
+    if (this.min && iso < this.min)
+      return true;
+    if (this.max && iso > this.max)
+      return true;
+    if (this.#disabledWeekdays().has(date.getDay()))
+      return true;
+    return this.#disabledDates().has(iso);
+  }
+  #fallbackInput() {
+    return this.querySelector('input[type="date"], input[type="month"]');
+  }
+  connectedCallback() {
+    if (this.#upgraded)
+      return;
+    this.#upgraded = true;
+    ensureStyle(this.ownerDocument);
+    this.classList.add("b3-date-picker");
+    if (!this.hasAttribute("role"))
+      this.setAttribute("role", "group");
+    if (!this.hasAttribute("aria-label") && !this.hasAttribute("aria-labelledby"))
+      this.setAttribute("aria-label", "Choose a date");
+    const seed = this.#fallbackInput()?.value;
+    if (!this.hasAttribute("value") && seed && parse(seed))
+      this.setAttribute("value", seed);
+    this.#syncInput();
+    this.#ui ??= this.ownerDocument.createElement("div");
+    this.#ui.className = "b3-date-picker-ui";
+    for (const stray of this.querySelectorAll(":scope > .b3-date-picker-ui"))
+      if (stray !== this.#ui)
+        stray.remove();
+    this.append(this.#ui);
+    this.#listen();
+    this.#render();
+    this.#observer = new MutationObserver(() => {
+      if (!this.#ui.isConnected) {
+        this.append(this.#ui);
+      }
+    });
+    this.#observer.observe(this, { childList: true });
+  }
+  disconnectedCallback() {
+    this.#controller?.abort();
+    this.#controller = null;
+    this.#observer?.disconnect();
+    this.#observer = null;
+    this.#upgraded = false;
+  }
+  attributeChangedCallback(name, previous, next) {
+    if (previous === next || !this.#upgraded)
+      return;
+    if (name === "month")
+      this.#month = null;
+    if (name === "value")
+      this.#month = this.value ? this.value.slice(0, 7) : null;
+    this.#render();
+  }
+  select(iso) {
+    if (!parse(iso) || this.isDisabled(iso))
+      return false;
+    const changed = this.value !== iso;
+    this.#focus = iso;
+    this.value = iso;
+    if (!changed)
+      this.#render();
+    const input = this.#fallbackInput();
+    if (input && this.#syncInput()) {
+      for (const type of ["input", "change"])
+        input.dispatchEvent(new Event(type, { bubbles: true }));
+    }
+    this.#emit("b3-select", { value: iso, date: parse(iso) });
+    return true;
+  }
+  #syncInput() {
+    const input = this.#fallbackInput();
+    if (!input)
+      return false;
+    const next = !this.value ? "" : input.type === "month" ? this.value.slice(0, 7) : this.value;
+    if (input.value === next)
+      return false;
+    input.value = next;
+    return true;
+  }
+  #adoptInput() {
+    const input = this.#fallbackInput();
+    if (!input)
+      return;
+    const raw = input.value;
+    const iso = !raw ? "" : input.type === "month" ? `${raw}-01` : raw;
+    if (iso === this.value)
+      return;
+    if (!iso) {
+      this.value = "";
+      this.#emit("b3-select", { value: "", date: null });
+      return;
+    }
+    if (!this.select(iso))
+      this.#syncInput();
+  }
+  goTo(month) {
+    const target = parse(month);
+    if (!target)
+      return false;
+    const next = toIso(target).slice(0, 7);
+    if (next === this.month)
+      return true;
+    this.#month = next;
+    this.#focus = null;
+    this.#render();
+    this.#emit("b3-month", { month: next, year: target.getFullYear(), monthIndex: target.getMonth() });
+    return true;
+  }
+  #emit(type, detail) {
+    this.dispatchEvent(new CustomEvent(type, { bubbles: true, composed: true, detail }));
+  }
+  #weekdayNames() {
+    const long = new Intl.DateTimeFormat(this.locale, { weekday: "long" });
+    const short = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
+    const names = [];
+    for (let index = 0;index < 7; index++) {
+      const date = new Date(2024, 0, 7 + (this.weekStart + index) % 7);
+      names.push({ long: long.format(date), short: short.format(date) });
+    }
+    return names;
+  }
+  #render() {
+    const document = this.ownerDocument;
+    const month = parse(this.month);
+    const year = month.getFullYear(), index = month.getMonth();
+    const total = daysInMonth(year, index);
+    const lead = (month.getDay() - this.weekStart + 7) % 7;
+    const selected = this.value;
+    const now = today();
+    if (!this.#focus || this.#focus.slice(0, 7) !== this.month) {
+      this.#focus = selected.slice(0, 7) === this.month ? selected : now.slice(0, 7) === this.month ? now : `${this.month}-01`;
+    }
+    this.#ensureBar();
+    for (const button of this.#bar.querySelectorAll(".b3-date-picker-nav"))
+      button.disabled = this.#monthOutOfRange(addMonths(`${this.month}-01`, Number(button.dataset.b3Step)));
+    this.#title.textContent = new Intl.DateTimeFormat(this.locale, { month: "long", year: "numeric" }).format(month);
+    const table = document.createElement("table");
+    table.className = "b3-date-picker-grid";
+    table.setAttribute("role", "grid");
+    table.setAttribute("aria-labelledby", this.#title.id);
+    const head = document.createElement("thead");
+    const headRow = document.createElement("tr");
+    for (const name of this.#weekdayNames()) {
+      const cell = document.createElement("th");
+      cell.scope = "col";
+      cell.setAttribute("aria-label", name.long);
+      cell.textContent = name.short;
+      headRow.append(cell);
+    }
+    head.append(headRow);
+    table.append(head);
+    const body = document.createElement("tbody");
+    const label = new Intl.DateTimeFormat(this.locale, { weekday: "long", day: "numeric", month: "long", year: "numeric" });
+    let row = document.createElement("tr");
+    for (let slot = 0;slot < lead; slot++)
+      row.append(document.createElement("td"));
+    for (let day = 1;day <= total; day++) {
+      if (row.children.length === 7) {
+        body.append(row);
+        row = document.createElement("tr");
+      }
+      const iso = `${year}-${pad(index + 1)}-${pad(day)}`;
+      const cell = document.createElement("td");
+      cell.setAttribute("role", "gridcell");
+      cell.dataset.b3Date = iso;
+      cell.textContent = String(day);
+      cell.setAttribute("aria-label", label.format(new Date(year, index, day)));
+      cell.setAttribute("aria-selected", String(iso === selected));
+      if (this.isDisabled(iso))
+        cell.setAttribute("aria-disabled", "true");
+      if (iso === now)
+        cell.dataset.b3Today = "";
+      cell.tabIndex = iso === this.#focus ? 0 : -1;
+      row.append(cell);
+    }
+    while (row.children.length < 7)
+      row.append(document.createElement("td"));
+    body.append(row);
+    table.append(body);
+    if (this.#grid?.parentNode === this.#ui)
+      this.#grid.replaceWith(table);
+    else
+      this.#ui.append(table);
+    this.#grid = table;
+  }
+  #ensureBar() {
+    if (this.#bar?.parentNode === this.#ui)
+      return;
+    const document = this.ownerDocument;
+    this.#bar ??= document.createElement("div");
+    this.#bar.className = "b3-date-picker-bar";
+    if (!this.#title) {
+      this.#title = document.createElement("div");
+      this.#title.className = "b3-date-picker-title";
+      this.#title.id = this.#titleId;
+      this.#title.setAttribute("aria-live", "polite");
+      const nav = [-1, 1].map((step) => {
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "b3-date-picker-nav";
+        button.dataset.b3Step = String(step);
+        button.setAttribute("aria-label", step < 0 ? "Previous month" : "Next month");
+        return button;
+      });
+      this.#bar.append(nav[0], this.#title, nav[1]);
+    }
+    this.#ui.prepend(this.#bar);
+  }
+  #monthOutOfRange(iso) {
+    const date = parse(iso);
+    const last = `${iso.slice(0, 7)}-${pad(daysInMonth(date.getFullYear(), date.getMonth()))}`;
+    return this.max && `${iso.slice(0, 7)}-01` > this.max || this.min && last < this.min;
+  }
+  #cell(iso) {
+    return this.#grid?.querySelector(`td[data-b3-date="${iso}"]`);
+  }
+  #moveFocus(iso) {
+    const date = parse(iso);
+    if (!date)
+      return;
+    const month = iso.slice(0, 7);
+    this.#focus = iso;
+    if (month !== this.month) {
+      this.#month = month;
+      this.#render();
+      this.#emit("b3-month", { month, year: date.getFullYear(), monthIndex: date.getMonth() });
+    } else {
+      for (const cell2 of this.#grid.querySelectorAll("td[data-b3-date]"))
+        cell2.tabIndex = -1;
+    }
+    const cell = this.#cell(iso);
+    if (cell) {
+      cell.tabIndex = 0;
+      cell.focus();
+    }
+  }
+  #listen() {
+    this.#controller = new AbortController;
+    const options = { signal: this.#controller.signal };
+    this.addEventListener("click", (event) => {
+      const nav = event.target.closest?.(".b3-date-picker-nav");
+      if (nav) {
+        this.goTo(addMonths(`${this.month}-01`, Number(nav.dataset.b3Step)));
+        return;
+      }
+      const cell = event.target.closest?.("td[data-b3-date]");
+      if (!cell || cell.getAttribute("aria-disabled") === "true")
+        return;
+      this.#moveFocus(cell.dataset.b3Date);
+      this.select(cell.dataset.b3Date);
+    }, options);
+    for (const type of ["input", "change"])
+      this.addEventListener(type, (event) => {
+        if (event.target === this.#fallbackInput())
+          this.#adoptInput();
+      }, options);
+    this.ownerDocument.addEventListener("reset", (event) => {
+      if (event.target?.contains?.(this))
+        setTimeout(() => this.#adoptInput(), 0);
+    }, options);
+    this.addEventListener("keydown", (event) => {
+      if (event.metaKey || event.altKey || event.ctrlKey)
+        return;
+      const cell = event.target.closest?.("td[data-b3-date]");
+      if (!cell)
+        return;
+      const from = cell.dataset.b3Date;
+      const forward = getComputedStyle(this).direction === "rtl" ? "ArrowLeft" : "ArrowRight";
+      const back = forward === "ArrowRight" ? "ArrowLeft" : "ArrowRight";
+      const weekday = (parse(from).getDay() - this.weekStart + 7) % 7;
+      let next = null;
+      switch (event.key) {
+        case forward:
+          next = addDays(from, 1);
+          break;
+        case back:
+          next = addDays(from, -1);
+          break;
+        case "ArrowDown":
+          next = addDays(from, 7);
+          break;
+        case "ArrowUp":
+          next = addDays(from, -7);
+          break;
+        case "Home":
+          next = addDays(from, -weekday);
+          break;
+        case "End":
+          next = addDays(from, 6 - weekday);
+          break;
+        case "PageUp":
+          next = addMonths(from, event.shiftKey ? -12 : -1);
+          break;
+        case "PageDown":
+          next = addMonths(from, event.shiftKey ? 12 : 1);
+          break;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          this.select(from);
+          this.#cell(from)?.focus();
+          return;
+        default:
+          return;
+      }
+      event.preventDefault();
+      this.#moveFocus(next);
+    }, options);
+  }
+}
+var unused = B3DatePicker;
+function define(name = "b3-date-picker") {
+  if (typeof customElements === "undefined")
+    return null;
+  const existing = customElements.get(name);
+  if (existing)
+    return existing;
+  const constructor = unused;
+  unused = class extends B3DatePicker {
+  };
+  customElements.define(name, constructor);
+  return constructor;
+}
+define();
+export {
+  B3DatePicker,
+  addDays,
+  addMonths,
+  daysInMonth,
+  define,
+  parse,
+  toIso,
+  today
+};

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.1.0-alpha.35",
-  "cssSha256": "b75401967cdd0259eddaf99fb81b78c466d531451278410df3cb8b9e0978ae62",
+  "version": "0.1.0-alpha.37",
+  "cssSha256": "1ddda2ac6a76615e6074a3c1c7cf0154056d6d2e9f2d2c2f756223d8eca2790e",
   "classes": [
     "b3-accordion",
     "b3-alert",
@@ -125,7 +125,7 @@
         "b3-scroll",
         "b3-inline"
       ],
-      "guidance": "Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum useful peer width (e.g. 8rem for concise metrics); the same grid then fits columns without per-screen column counts. Cluster and split children can shrink below intrinsic width, so a label wrapping a full-width select does not force the page wider.",
+      "guidance": "Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. A direct scroll body in dialog.b3-stack retains a minimum reading area; on short screens with enlarged text, the outer dialog scrolls as needed to reach its actions instead of collapsing the body. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum useful peer width (e.g. 8rem for concise metrics); the same grid then fits columns without per-screen column counts. Cluster and split children can shrink below intrinsic width, so a label wrapping a full-width select does not force the page wider.",
       "example": "<main class=\"b3-shell b3-stack\"><header class=\"b3-split\">…</header></main>"
     },
     {
@@ -200,8 +200,8 @@
         "b3-cover",
         "b3-reel"
       ],
-      "guidance": "Page/body form a full-height document. App-layout supplies a sidebar and content region, stacking below 48rem. Center aligns its children. Cover gives a hero room; reel provides intentional horizontal scrolling. Preserve document order and label scrollable collections. A reel whose direct children are b3-badge chips is a chip scroller: intrinsic chip widths, room for hit areas, and an inline-end fade that clears at the scroll end; it does not shrink inside a b3-stack.",
-      "example": "<div class=\"b3-app-layout\"><aside class=\"b3-sidebar\">Navigation</aside><main class=\"b3-page\"><header>Page heading</header><div class=\"b3-page-body b3-shell\">Content</div><footer>Footer</footer></main></div>"
+      "guidance": "Page/body form a full-height document. App-layout supplies a sidebar and content region, stacking below 48rem. Center aligns its children. Cover gives a hero room; reel provides intentional horizontal scrolling. Preserve document order and label scrollable collections. A reel whose direct children are b3-badge chips is a chip scroller: intrinsic chip widths, room for hit areas, and an inline-end fade that clears at the scroll end; it does not shrink inside a b3-stack. Optional mount() wires .b3-reel[data-b3-reel]: reel.b3Reel exposes index (get/set), count and to(index, behavior), the current slide is mirrored on data-b3-reel-index, and a bubbling b3-reel-change CustomEvent carries {index, count}; a smooth scroll passing over slides reports each one, so treat it as a position, not a commit. Index counts direct children and means the slide at the inline-start edge, so RTL needs no separate markup. Dots and arrows are ordinary buttons with data-b3-reel-to set to an index, next or previous, plus aria-controls pointing at the reel id; the current numbered control gets aria-current=true. Arrow keys, Home and End move the reel region only when it is itself focused, respecting RTL, so a control or input inside a slide keeps its own keys; the index clamps and never wraps. That focus is the whole keyboard API, and a reel whose slides hold links or buttons is skipped in tab order entirely, so give a controlled reel tabindex=0 with a label, as a b3-scroll region does; mount() adds tabindex=0 when the markup omits it. Slides with no box (hidden or display:none) are skipped, and a reel with no visible slides reports index -1 and carries no data-b3-reel-index. The cleanup mount() returns removes reel.b3Reel. A reel without data-b3-reel keeps plain CSS scroll-snap behaviour and gains no attribute, controller or listener.",
+      "example": "<div class=\"b3-app-layout\"><aside class=\"b3-sidebar\">Navigation</aside><main class=\"b3-page\"><header>Page heading</header><div class=\"b3-page-body b3-shell\">Content</div><footer>Footer</footer></main></div><div class=\"b3-reel\" id=\"gallery\" data-b3-reel tabindex=\"0\" role=\"region\" aria-label=\"Gallery\"><article class=\"b3-surface\">One</article><article class=\"b3-surface\">Two</article></div><div class=\"b3-cluster\"><button class=\"b3-button\" data-b3-reel-to=\"previous\" aria-controls=\"gallery\" aria-label=\"Previous slide\">‹</button><button class=\"b3-button\" data-b3-reel-to=\"0\" aria-controls=\"gallery\" aria-label=\"Slide 1\">1</button><button class=\"b3-button\" data-b3-reel-to=\"next\" aria-controls=\"gallery\" aria-label=\"Next slide\">›</button></div>"
     },
     {
       "id": "control-structure",
@@ -408,7 +408,7 @@
         "b3-sheet",
         "b3-sheet-handle"
       ],
-      "guidance": "For new apps with persistent navigation, read app-frame.md first: grid owns the navigation height rather than a fixed-padding estimate. Use b3-mobile-app on the app container with data-b3-platform=ios or android. Native anchors carry navigation; app owns URLs/history and aria-current=page. Bottom navigation stays available across primary destinations. Use dialog.b3-sheet with showModal(), a label and explicit cancel; app owns form state and focus restoration. Layout reserves env safe-area insets and targets 44/48 CSS pixels as a starting treatment, not proof of physical platform sizing. Test software keyboard, large text, orientation, real touch and device insets. Never draw fake OS status/gesture bars inside app content. Native runtime and platform fidelity require separate qualification. Default app width supports phone and desktop up to70rem; use intrinsic wrapping grids for content. Set --b3-app-width only for an intentional narrower surface. A platform treatment does not imply a phone-only layout. For a scrollable sheet use dialog.b3-sheet.b3-stack with a direct b3-scroll body and fixed siblings. For optional handle dragging add data-b3-drag=dismiss and button.b3-sheet-handle with data-b3-close and aria-label=\"Close sheet\". mount() handles drag-to-dismiss through the cancel event. Body gestures remain native scrolling. A handle click/keyboard activation also closes. No multiple detents or content-wide drag are implied. The mounted helper gives a labeled sheet heading initial focus unless the app declares an explicit autofocus target; handles remain keyboard reachable. The sheet owns outer padding and the bottom safe area: do not repeat these on its header/body/footer. Keep b3-scroll intrinsic sizing instead of overriding it with flex:1 or a zero flex basis. Sheets fit content up to 85dvh and a 32rem reading width by default; --b3-overlay-width is an explicit width escape hatch for denser content. Use a b3-stack footer for a full-width primary action, and group descriptive row text in a stack rather than competing columns. b3-mobile-app already reserves bottom space for its fixed navigation. Do not add a second matching bottom padding to a child panel. Use b3-app-bar or an explicit comfortable top inset; a safe-area value of zero is not ordinary content spacing. Bottom links carry an icon and a label; the aria-current=page link gets a tinted indicator and unsized svg icons render at 1.375rem.",
+      "guidance": "For new apps with persistent navigation, read app-frame.md first: grid owns the navigation height rather than a fixed-padding estimate. Use b3-mobile-app on the app container with data-b3-platform=ios or android. Native anchors carry navigation; app owns URLs/history and aria-current=page. Bottom navigation stays available across primary destinations. Use dialog.b3-sheet with showModal(), a label and explicit cancel; app owns form state and focus restoration. Layout reserves env safe-area insets and targets 44/48 CSS pixels as a starting treatment, not proof of physical platform sizing. Test software keyboard, large text, orientation, real touch and device insets. Never draw fake OS status/gesture bars inside app content. Native runtime and platform fidelity require separate qualification. Default app width supports phone and desktop up to70rem; use intrinsic wrapping grids for content. Set --b3-app-width only for an intentional narrower surface. A platform treatment does not imply a phone-only layout. For a scrollable sheet use dialog.b3-sheet.b3-stack with a direct b3-scroll body and nonshrinking heading/actions. The outer dialog can scroll when enlarged text exceeds a short viewport; do not assume the footer is always pinned. For optional handle dragging add data-b3-drag=dismiss and button.b3-sheet-handle with data-b3-close and aria-label=\"Close sheet\". mount() handles drag-to-dismiss through the cancel event. Body gestures remain native scrolling. A handle click/keyboard activation also closes. No multiple detents or content-wide drag are implied. The mounted helper gives a labeled sheet heading initial focus unless the app declares an explicit autofocus target; handles remain keyboard reachable. The sheet owns outer padding, viewport-aware horizontal insets and the bottom safe area: do not repeat these on its header/body/footer. Keep b3-scroll intrinsic sizing instead of overriding it with flex:1 or a zero flex basis. Sheets fit content up to 85dvh and a 32rem reading width by default; --b3-overlay-width is an explicit width escape hatch for denser content. Use a b3-stack footer for a full-width primary action, and group descriptive row text in a stack rather than competing columns. b3-mobile-app already reserves bottom space for its fixed navigation. Do not add a second matching bottom padding to a child panel. Use b3-app-bar or an explicit comfortable top inset; a safe-area value of zero is not ordinary content spacing. Bottom links carry an icon and a label; the aria-current=page link gets a tinted indicator and unsized svg icons render at 1.375rem.",
       "example": "<div class=\"b3-mobile-app b3-app-frame\" data-b3-platform=\"ios\"><header class=\"b3-app-bar\">Today</header><main><ul class=\"b3-mobile-list\"><li><a class=\"b3-mobile-row\" href=\"#detail\">Read a few pages</a></li></ul></main><nav class=\"b3-bottom-nav\" aria-label=\"Main\"><a class=\"b3-bottom-link\" href=\"#today\" aria-current=\"page\">Today</a></nav></div>"
     },
     {
@@ -450,6 +450,7 @@
     "mobile.md",
     "app-frame.md",
     "cross-screen.md",
+    "date-picker.md",
     "editable-filtered-rows.md",
     "icons.md",
     "image-viewer.md",

package/dist/references/date-picker.md

@@ -0,0 +1,127 @@
+# Date picker element
+
+`<b3-date-picker>` is an opt-in custom element for the one thing markup and CSS cannot carry: a
+month grid with correct calendar arithmetic. It is not part of `ui.js`; import it only on pages
+that need it. Never hand-roll `daysInMonth`, `getUTCDay` or `toISOString().slice(0,10)` again.
+
+```html
+<link rel="stylesheet" href="@livx.cc/bare-v3/css">
+<script type="module" src="@livx.cc/bare-v3/elements/date-picker"></script>
+
+<!-- Without the module this is just the native input, and the form still works. -->
+<b3-date-picker value="2026-03-18" min="2026-01-05" max="2026-12-20" disabled-weekdays="6">
+  <label class="b3-field">Date <input type="date" name="date"></label>
+</b3-date-picker>
+```
+
+Light DOM, no shadow root: bare.css tokens, `data-b3-theme` and your own selectors all reach
+inside. Always author the `<input type="date">` yourself — that child is the degraded experience,
+it stays the form's value carrier, and the element hides it and renders the grid in its place. It
+never removes or replaces your markup.
+
+The two stay in sync **both ways**. Every selection is mirrored onto the input (firing `input` and
+`change`, so a form library sees what it would see from a real input), an authored `value` reaches
+the input before the user touches anything, and every write *to* the input moves the grid —
+`form.reset()`, a framework binding, autofill. Without that last direction a reset would clear the
+submitted value while the calendar went on showing the old day. Clearing the input emits
+`b3-select` with `value: ''`; a write the element refuses (a disabled or malformed day) is undone
+and the input is put back to the element's own value, so the two never disagree.
+
+`required` on that input works. Because a control that is not rendered cannot be focused — Chrome
+then refuses to submit and has nowhere to put the validation bubble, so the button just dies — the
+element clips a `required` input to a point instead of removing it. The grid is still the visible
+control; the browser's own "please fill in this field" still appears and still blocks the submit.
+
+## Local days, not UTC instants
+
+Every date in and out of this element is a **local calendar day**, `YYYY-MM-DD`. That is the whole
+point: `toISOString().slice(0,10)` is the *UTC* day and is wrong for 14 of 24 hours in Kiritimati
+and 11 of 24 in Niue, and `new Date('2026-03-18')` is UTC midnight, which reads back as the 17th
+anywhere west of Greenwich. Selecting "today" in Auckland at 09:00 with the UTC-naive version
+hands your backend yesterday.
+
+If you need the same arithmetic outside the grid, import it rather than rewriting it:
+
+```js
+import { today, parse, toIso, addDays, addMonths, daysInMonth }
+  from '@livx.cc/bare-v3/elements/date-picker';
+```
+
+`parse` returns `null` for `2026-02-30`, `2026-13-01` and anything that is not a date, instead of
+silently rolling over into March. `addDays` crosses a DST boundary as one calendar day, which
+fixed-millisecond arithmetic does not.
+
+The hand-rolled shape this replaces is `new Date(Date.UTC(y, m + 1, 0)).getUTCDate()` for the
+month's length and `first.getUTCDay()` for the leading blanks. That pair lays out the grid
+consistently, and then quietly disagrees with the user's own device about which cell is today.
+
+## API
+
+| Attribute | Meaning |
+| --- | --- |
+| `value` | The selected day, `YYYY-MM-DD`. An invalid one is ignored, not rendered. |
+| `month` | The month to open on, `YYYY-MM`. Defaults to the selection's month, then to today's. A starting point, not a pin: navigating, or choosing a day in another month, moves the grid. |
+| `min` / `max` | Selectable range, inclusive. Days outside it are disabled, and a month step that leads nowhere is disabled too. |
+| `disabled-dates` | Space- or comma-separated `YYYY-MM-DD` days (booked, sold out, closed). |
+| `disabled-weekdays` | Space- or comma-separated weekday numbers, `0` = Sunday. |
+| `week-start` | First column's weekday, `0`–`6`. Default `0` (Sunday). Anything else is ignored. |
+| `locale` | BCP-47 tag for month and weekday names. Defaults to `<html lang>`, then the browser. |
+
+Properties: `value`, `month`, `min`, `max`, `weekStart`, `locale`.
+Methods: `select(iso)` (returns `false` and changes nothing if the day is disabled or malformed),
+`goTo(month)`, `isDisabled(iso)`.
+Events: `b3-select` (`detail: { value, date }`) and `b3-month`
+(`detail: { month, year, monthIndex }`). Both are plain bubbling `CustomEvent`s, so they work
+without a framework wrapper.
+
+The element never selects on its own and never closes anything: it reports, and the owner decides.
+
+### Decorating days
+
+There is no shadow root and every day is `td[data-b3-date="YYYY-MM-DD"]`, so per-day marks — a
+logged entry, a holiday, a dot — are your own CSS or a one-line `querySelector`, with no API here:
+
+```css
+.b3-date-picker td[data-b3-date="2026-03-18"]::after { content: "\2022"; display: block; }
+```
+
+### Another tag name
+
+`import { define } from '@livx.cc/bare-v3/elements/date-picker'` and call `define('my-calendar')`.
+The default tag registers on import; each further name gets its own subclass. Styling follows the
+`b3-date-picker` class the element adds to itself, not the tag, so a renamed picker looks the same.
+
+## Accessibility
+
+The grid is a `role="grid"` labelled by the month heading, its days are `gridcell`s with
+`aria-selected` and `aria-disabled`, and each one is named with the full spoken date rather than a
+bare number. Focus roves: exactly one cell is in the tab order, so `Tab` enters and leaves the
+grid in one step. The month heading is an `aria-live="polite"` region — the
+*same* node for the life of the element, with only its text rewritten, because an AT announces
+mutations inside a region it is already tracking and a heading rebuilt on every render would
+arrive with its text already in place and go unspoken.
+
+Keyboard: arrows move a day and a week, `Home`/`End` jump to the ends of the week, `PageUp`/
+`PageDown` change month (with `Shift`, year), `Enter`/`Space` select. Arrowing off the edge of the
+month pulls the neighbouring month in rather than stalling.
+
+## RTL and Hebrew
+
+Set `dir="rtl"` (or `lang="he"` with a document `dir`) on an ancestor; the element inherits it and
+needs nothing else. The grid flows right-to-left, the first weekday column lands on the right, the
+month-step chevrons mirror, and `locale` gives Hebrew month and weekday names. Arrow keys follow
+the *visual* neighbour, so `ArrowLeft` moves forward a day in RTL — hard-coding `ArrowRight` as
+"next" is the bug this handles for you.
+
+Israeli calendars start on Sunday, which is the default; European ones want `week-start="1"`.
+
+## Frameworks
+
+Vue 3 binds and listens natively — `:value`, `@b3-select` — once
+`app.config.compilerOptions.isCustomElement` accepts the `b3-` prefix.
+
+React 18 has no custom-element property or event support: every value is stringified onto an
+attribute, so pass `value={value || undefined}` (never `null`), and attach `b3-select` on a ref.
+React 19 removes both caveats. In either, a re-render that re-owns the element's children leaves
+the grid standing — the element keeps its own single node and re-attaches it if the framework
+drops it.

package/dist/references/layout.md

@@ -1,6 +1,6 @@
 # Composition
 
-Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum useful peer width (e.g. 8rem for concise metrics); the same grid then fits columns without per-screen column counts. Cluster and split children can shrink below intrinsic width, so a label wrapping a full-width select does not force the page wider.
+Shell bounds the page. Stack is vertical, cluster wraps horizontal peers, grid fits columns, split separates two groups. Override --b3-space locally. Preserve meaningful DOM order. Default to phone and desktop support. Use intrinsic peer columns and wrapping before media queries; bound reading/forms separately from the page. Set --b3-content for shell width. Read cross-screen.md for composition choices and targeted verification. In a bounded b3-stack, b3-scroll makes one body independently scrollable while sibling heading/actions stay in flow. Supply a meaningful height or max-height; scrolling cannot occur without a bound. Name a keyboard-focusable scroll region with tabindex=0 and aria-labelledby. Reuse the same atom in panels, dialogs and sheets. A direct scroll body in dialog.b3-stack retains a minimum reading area; on short screens with enlarged text, the outer dialog scrolls as needed to reach its actions instead of collapsing the body. Inline keeps a small icon/text or label/badge group together, vertically centers peers and lets the text itself wrap. Use cluster for independently wrapping peers; use inline when wrapping the icon away from its label would break the meaning. Set --b3-grid-min to the minimum useful peer width (e.g. 8rem for concise metrics); the same grid then fits columns without per-screen column counts. Cluster and split children can shrink below intrinsic width, so a label wrapping a full-width select does not force the page wider.
 
 Classes: b3-shell, b3-stack, b3-cluster, b3-grid, b3-split, b3-scroll, b3-inline
 

package/dist/references/mobile.md

@@ -1,6 +1,6 @@
 # Mobile app composition
 
-For new apps with persistent navigation, read app-frame.md first: grid owns the navigation height rather than a fixed-padding estimate. Use b3-mobile-app on the app container with data-b3-platform=ios or android. Native anchors carry navigation; app owns URLs/history and aria-current=page. Bottom navigation stays available across primary destinations. Use dialog.b3-sheet with showModal(), a label and explicit cancel; app owns form state and focus restoration. Layout reserves env safe-area insets and targets 44/48 CSS pixels as a starting treatment, not proof of physical platform sizing. Test software keyboard, large text, orientation, real touch and device insets. Never draw fake OS status/gesture bars inside app content. Native runtime and platform fidelity require separate qualification. Default app width supports phone and desktop up to70rem; use intrinsic wrapping grids for content. Set --b3-app-width only for an intentional narrower surface. A platform treatment does not imply a phone-only layout. For a scrollable sheet use dialog.b3-sheet.b3-stack with a direct b3-scroll body and fixed siblings. For optional handle dragging add data-b3-drag=dismiss and button.b3-sheet-handle with data-b3-close and aria-label="Close sheet". mount() handles drag-to-dismiss through the cancel event. Body gestures remain native scrolling. A handle click/keyboard activation also closes. No multiple detents or content-wide drag are implied. The mounted helper gives a labeled sheet heading initial focus unless the app declares an explicit autofocus target; handles remain keyboard reachable. The sheet owns outer padding and the bottom safe area: do not repeat these on its header/body/footer. Keep b3-scroll intrinsic sizing instead of overriding it with flex:1 or a zero flex basis. Sheets fit content up to 85dvh and a 32rem reading width by default; --b3-overlay-width is an explicit width escape hatch for denser content. Use a b3-stack footer for a full-width primary action, and group descriptive row text in a stack rather than competing columns. b3-mobile-app already reserves bottom space for its fixed navigation. Do not add a second matching bottom padding to a child panel. Use b3-app-bar or an explicit comfortable top inset; a safe-area value of zero is not ordinary content spacing. Bottom links carry an icon and a label; the aria-current=page link gets a tinted indicator and unsized svg icons render at 1.375rem.
+For new apps with persistent navigation, read app-frame.md first: grid owns the navigation height rather than a fixed-padding estimate. Use b3-mobile-app on the app container with data-b3-platform=ios or android. Native anchors carry navigation; app owns URLs/history and aria-current=page. Bottom navigation stays available across primary destinations. Use dialog.b3-sheet with showModal(), a label and explicit cancel; app owns form state and focus restoration. Layout reserves env safe-area insets and targets 44/48 CSS pixels as a starting treatment, not proof of physical platform sizing. Test software keyboard, large text, orientation, real touch and device insets. Never draw fake OS status/gesture bars inside app content. Native runtime and platform fidelity require separate qualification. Default app width supports phone and desktop up to70rem; use intrinsic wrapping grids for content. Set --b3-app-width only for an intentional narrower surface. A platform treatment does not imply a phone-only layout. For a scrollable sheet use dialog.b3-sheet.b3-stack with a direct b3-scroll body and nonshrinking heading/actions. The outer dialog can scroll when enlarged text exceeds a short viewport; do not assume the footer is always pinned. For optional handle dragging add data-b3-drag=dismiss and button.b3-sheet-handle with data-b3-close and aria-label="Close sheet". mount() handles drag-to-dismiss through the cancel event. Body gestures remain native scrolling. A handle click/keyboard activation also closes. No multiple detents or content-wide drag are implied. The mounted helper gives a labeled sheet heading initial focus unless the app declares an explicit autofocus target; handles remain keyboard reachable. The sheet owns outer padding, viewport-aware horizontal insets and the bottom safe area: do not repeat these on its header/body/footer. Keep b3-scroll intrinsic sizing instead of overriding it with flex:1 or a zero flex basis. Sheets fit content up to 85dvh and a 32rem reading width by default; --b3-overlay-width is an explicit width escape hatch for denser content. Use a b3-stack footer for a full-width primary action, and group descriptive row text in a stack rather than competing columns. b3-mobile-app already reserves bottom space for its fixed navigation. Do not add a second matching bottom padding to a child panel. Use b3-app-bar or an explicit comfortable top inset; a safe-area value of zero is not ordinary content spacing. Bottom links carry an icon and a label; the aria-current=page link gets a tinted indicator and unsized svg icons render at 1.375rem.
 
 Classes: b3-mobile-app, b3-app-bar, b3-bottom-nav, b3-bottom-link, b3-mobile-list, b3-mobile-row, b3-sheet, b3-sheet-handle
 

package/dist/references/page-layout.md

@@ -1,9 +1,9 @@
 # Page composition
 
-Page/body form a full-height document. App-layout supplies a sidebar and content region, stacking below 48rem. Center aligns its children. Cover gives a hero room; reel provides intentional horizontal scrolling. Preserve document order and label scrollable collections. A reel whose direct children are b3-badge chips is a chip scroller: intrinsic chip widths, room for hit areas, and an inline-end fade that clears at the scroll end; it does not shrink inside a b3-stack.
+Page/body form a full-height document. App-layout supplies a sidebar and content region, stacking below 48rem. Center aligns its children. Cover gives a hero room; reel provides intentional horizontal scrolling. Preserve document order and label scrollable collections. A reel whose direct children are b3-badge chips is a chip scroller: intrinsic chip widths, room for hit areas, and an inline-end fade that clears at the scroll end; it does not shrink inside a b3-stack. Optional mount() wires .b3-reel[data-b3-reel]: reel.b3Reel exposes index (get/set), count and to(index, behavior), the current slide is mirrored on data-b3-reel-index, and a bubbling b3-reel-change CustomEvent carries {index, count}; a smooth scroll passing over slides reports each one, so treat it as a position, not a commit. Index counts direct children and means the slide at the inline-start edge, so RTL needs no separate markup. Dots and arrows are ordinary buttons with data-b3-reel-to set to an index, next or previous, plus aria-controls pointing at the reel id; the current numbered control gets aria-current=true. Arrow keys, Home and End move the reel region only when it is itself focused, respecting RTL, so a control or input inside a slide keeps its own keys; the index clamps and never wraps. That focus is the whole keyboard API, and a reel whose slides hold links or buttons is skipped in tab order entirely, so give a controlled reel tabindex=0 with a label, as a b3-scroll region does; mount() adds tabindex=0 when the markup omits it. Slides with no box (hidden or display:none) are skipped, and a reel with no visible slides reports index -1 and carries no data-b3-reel-index. The cleanup mount() returns removes reel.b3Reel. A reel without data-b3-reel keeps plain CSS scroll-snap behaviour and gains no attribute, controller or listener.
 
 Classes: b3-page, b3-page-body, b3-app-layout, b3-sidebar, b3-center, b3-cover, b3-reel
 
 ```html
-<div class="b3-app-layout"><aside class="b3-sidebar">Navigation</aside><main class="b3-page"><header>Page heading</header><div class="b3-page-body b3-shell">Content</div><footer>Footer</footer></main></div>
+<div class="b3-app-layout"><aside class="b3-sidebar">Navigation</aside><main class="b3-page"><header>Page heading</header><div class="b3-page-body b3-shell">Content</div><footer>Footer</footer></main></div><div class="b3-reel" id="gallery" data-b3-reel tabindex="0" role="region" aria-label="Gallery"><article class="b3-surface">One</article><article class="b3-surface">Two</article></div><div class="b3-cluster"><button class="b3-button" data-b3-reel-to="previous" aria-controls="gallery" aria-label="Previous slide">‹</button><button class="b3-button" data-b3-reel-to="0" aria-controls="gallery" aria-label="Slide 1">1</button><button class="b3-button" data-b3-reel-to="next" aria-controls="gallery" aria-label="Next slide">›</button></div>
 ```

package/dist/ui.js

@@ -193,6 +193,114 @@ function tabs({ root, document: document2, find, options }) {
   }, options);
 }
 
+// src/interactions/reel.js
+function reel({ root, document: document2, find, options }) {
+  const view = document2.defaultView;
+  const rtl = (element) => view.getComputedStyle(element).direction === "rtl";
+  const slides = (element) => [...element.children].filter((child) => child.getClientRects().length > 0);
+  const offset = (element, slide) => {
+    const box = element.getBoundingClientRect();
+    const item = slide.getBoundingClientRect();
+    return rtl(element) ? box.right - item.right : item.left - box.left;
+  };
+  const read = (element) => {
+    let best = -1;
+    let distance = Infinity;
+    slides(element).forEach((slide, index) => {
+      const gap = Math.abs(offset(element, slide));
+      if (gap < distance - 1) {
+        distance = gap;
+        best = index;
+      }
+    });
+    return best;
+  };
+  const clamp = (element, index) => Math.max(0, Math.min(slides(element).length - 1, Math.trunc(index) || 0));
+  const controls = (element) => [...root.querySelectorAll("[data-b3-reel-to]")].filter((button) => find(button.getAttribute("aria-controls")) === element);
+  const sync = (element, emit = true) => {
+    const index = read(element);
+    const previous = element.dataset.b3ReelIndex;
+    if (index < 0)
+      delete element.dataset.b3ReelIndex;
+    else
+      element.dataset.b3ReelIndex = String(index);
+    for (const button of controls(element)) {
+      const value = button.dataset.b3ReelTo;
+      if (String(index) === value)
+        button.setAttribute("aria-current", "true");
+      else if (Number.isInteger(Number(value)))
+        button.removeAttribute("aria-current");
+    }
+    if (emit && previous !== undefined && previous !== String(index))
+      element.dispatchEvent(new CustomEvent("b3-reel-change", { bubbles: true, detail: { index, count: slides(element).length } }));
+  };
+  const go = (element, index, behavior = "smooth") => {
+    const slide = slides(element)[clamp(element, index)];
+    if (!slide)
+      return;
+    const distance = offset(element, slide);
+    element.scrollBy({ left: rtl(element) ? -distance : distance, behavior });
+  };
+  for (const element of root.querySelectorAll(".b3-reel[data-b3-reel]")) {
+    if (!element.hasAttribute("tabindex"))
+      element.tabIndex = 0;
+    element.b3Reel = {
+      get index() {
+        return read(element);
+      },
+      set index(value) {
+        go(element, value);
+      },
+      get count() {
+        return slides(element).length;
+      },
+      to: (index, behavior) => go(element, index, behavior)
+    };
+    const observer = new view.ResizeObserver(() => sync(element, false));
+    observer.observe(element);
+    options?.signal?.addEventListener("abort", () => {
+      delete element.b3Reel;
+      observer.disconnect();
+    }, { once: true });
+    let frame = 0;
+    element.addEventListener("scroll", () => {
+      view.cancelAnimationFrame(frame);
+      frame = view.requestAnimationFrame(() => sync(element));
+    }, options);
+    sync(element, false);
+  }
+  root.addEventListener("click", (event) => {
+    const button = event.target.closest?.("[data-b3-reel-to]");
+    const element = button && find(button.getAttribute("aria-controls"));
+    if (!element?.b3Reel)
+      return;
+    const value = button.dataset.b3ReelTo;
+    const index = element.b3Reel.index;
+    go(element, value === "next" ? index + 1 : value === "previous" ? index - 1 : Number(value));
+  }, options);
+  root.addEventListener("keydown", (event) => {
+    const element = event.target;
+    if (!element.b3Reel)
+      return;
+    const index = element.b3Reel.index;
+    const forward = rtl(element) ? "ArrowLeft" : "ArrowRight";
+    const back = rtl(element) ? "ArrowRight" : "ArrowLeft";
+    let destination;
+    if (event.key === forward)
+      destination = index + 1;
+    if (event.key === back)
+      destination = index - 1;
+    if (event.key === "Home")
+      destination = 0;
+    if (event.key === "End")
+      destination = slides(element).length - 1;
+    if (destination === undefined)
+      return;
+    event.preventDefault();
+    go(element, destination);
+  }, options);
+}
+
 // src/interactions/disclosures.js
 function disclosures({ root, document: document2, options }) {
   function placeDisclosure(disclosure) {
@@ -604,6 +712,7 @@ function mount(root = document) {
   };
   const context = { root, document: document2, find, options };
   tabs(context);
+  reel(context);
   disclosures(context);
   dialogs(context);
   toasts(context);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livx.cc/bare-v3",
-  "version": "0.1.0-alpha.35",
+  "version": "0.1.0-alpha.37",
   "type": "module",
   "files": [
     "dist",
@@ -12,7 +12,8 @@
     "./manifest": "./dist/manifest.json",
     "./references/*": "./dist/references/*",
     "./ui": "./dist/ui.js",
-    "./elements/image-viewer": "./dist/elements/image-viewer.js"
+    "./elements/image-viewer": "./dist/elements/image-viewer.js",
+    "./elements/date-picker": "./dist/elements/date-picker.js"
   },
   "scripts": {
     "build": "bun scripts/build.ts",