@livx.cc/bare-v3 0.1.0-alpha.7 → 0.1.0-alpha.71

package/dist/bare.css

@@ -21,22 +21,29 @@
     font: inherit;
   }
 
-  :where(.b3-root) :where(h1, h2, h3, p) {
+  :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: 3px solid var(--b3-color-focus);
-    outline-offset: 3px;
+    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) {
+  :where(.b3-root) :where(img, svg:not([width])) {
     max-inline-size: 100%;
   }
 
   @media (prefers-reduced-motion: reduce) {
     :where(.b3-root *), :where(.b3-root *):before, :where(.b3-root *):after {
-      transition-duration: .01ms !important;
+      transition: none !important;
       animation-duration: .01ms !important;
       animation-iteration-count: 1 !important;
     }
@@ -58,7 +65,7 @@
 }
 
 @layer bare.tokens {
-  .b3-root {
+  .b3-root:where(:not(.b3-root .b3-root)), .b3-root[data-b3-theme="light"] {
     --b3-color-canvas: #f6f5f0;
     --b3-color-surface: #fff;
     --b3-color-text: #202923;
@@ -88,7 +95,7 @@
     --b3-color-focus: #9ac4ff;
   }
 
-  .b3-root {
+  .b3-root:where(:not(.b3-root .b3-root)), .b3-root[data-b3-theme="light"] {
     --b3-space-1: .25rem;
     --b3-space-2: .5rem;
     --b3-space-3: .75rem;
@@ -113,6 +120,36 @@
     --b3-color-warning: #f2c76c;
     --b3-color-info: #a2cfff;
   }
+
+  .b3-root[data-b3-density="compact"] {
+    --b3-d-control: 2.25rem;
+    --b3-d-control-small: 1.875rem;
+    --b3-d-pad-block: .4375rem;
+    --b3-d-pad-inline: .875rem;
+    --b3-d-label: .875rem;
+    --b3-d-heading: 1.0625rem;
+    --b3-d-avatar: 2.25rem;
+    --b3-d-message-pad: .625rem .875rem;
+    --b3-d-meta: .75rem;
+    --b3-d-gap: 1rem;
+    --b3-d-surface-pad: 1rem;
+  }
+
+  @media (pointer: fine) and (width >= 48rem) {
+    .b3-root[data-b3-density="auto"] {
+      --b3-d-control: 2.25rem;
+      --b3-d-control-small: 1.875rem;
+      --b3-d-pad-block: .4375rem;
+      --b3-d-pad-inline: .875rem;
+      --b3-d-label: .875rem;
+      --b3-d-heading: 1.0625rem;
+      --b3-d-avatar: 2.25rem;
+      --b3-d-message-pad: .625rem .875rem;
+      --b3-d-meta: .75rem;
+      --b3-d-gap: 1rem;
+      --b3-d-surface-pad: 1rem;
+    }
+  }
 }
 
 @layer bare.layout {
@@ -142,6 +179,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;
   }
@@ -154,6 +195,10 @@
     display: flex;
   }
 
+  .b3-cluster > *, .b3-split > * {
+    min-inline-size: 0;
+  }
+
   .b3-inline {
     vertical-align: middle;
     align-items: center;
@@ -167,6 +212,18 @@
     min-inline-size: 0;
   }
 
+  .b3-inline:has( > .b3-badge) {
+    flex-wrap: wrap;
+  }
+
+  .b3-inline > .b3-badge {
+    flex-shrink: 0;
+  }
+
+  .b3-inline:has( > .b3-badge) > :not(.b3-badge, .b3-icon, svg) {
+    flex: 1 1 min-content;
+  }
+
   .b3-grid {
     grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--b3-grid-min, 17rem)), 1fr));
     gap: var(--b3-space);
@@ -242,6 +299,46 @@
       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 {
@@ -256,7 +353,9 @@
   .b3-heading {
     font-family: var(--b3-font-display);
     letter-spacing: -.02em;
+    overflow-wrap: anywhere;
     font-size: 1.375rem;
+    font-weight: 650;
     line-height: 1.25;
   }
 
@@ -295,6 +394,15 @@
     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);
@@ -349,6 +457,11 @@
     }
   }
 
+  :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;
@@ -357,10 +470,99 @@
     display: flex;
   }
 
+  .b3-row:where(.b3-stack) {
+    align-items: stretch;
+    gap: var(--b3-space);
+  }
+
+  :is(a, button, [role="button"]).b3-row {
+    padding-inline: var(--b3-space-4);
+    color: inherit;
+    text-align: start;
+    cursor: pointer;
+    transition: background-color var(--b3-duration);
+    text-decoration: none;
+  }
+
+  button.b3-row {
+    appearance: none;
+    border: 0;
+    border-block-end: 1px solid var(--b3-color-border);
+    background: none;
+    inline-size: 100%;
+  }
+
+  @media (hover: hover) {
+    :is(a, button, [role="button"]).b3-row:hover {
+      background: color-mix(in srgb, var(--b3-color-text) 4%, transparent);
+    }
+  }
+
+  :is(a, button, [role="button"]).b3-row:focus-visible {
+    background: color-mix(in srgb, var(--b3-color-text) 4%, transparent);
+  }
+
+  :is(a, button, [role="button"]).b3-row:active {
+    background: color-mix(in srgb, var(--b3-color-text) 8%, transparent);
+  }
+
+  .b3-clamp {
+    -webkit-line-clamp: var(--b3-clamp, 2);
+    line-clamp: var(--b3-clamp, 2);
+    -webkit-box-orient: vertical;
+    display: -webkit-box;
+    overflow: hidden;
+  }
+
+  .b3-count {
+    box-sizing: border-box;
+    background: var(--b3-color-danger);
+    block-size: 1.25rem;
+    min-inline-size: 1.25rem;
+    color: var(--b3-color-canvas);
+    font-variant-numeric: tabular-nums;
+    white-space: nowrap;
+    border-radius: 100vmax;
+    flex: none;
+    place-items: center;
+    padding-inline: .3125rem;
+    font-size: .6875rem;
+    font-weight: 700;
+    line-height: 1;
+    display: inline-grid;
+  }
+
+  .b3-count[data-b3-tone="accent"] {
+    background: var(--b3-color-accent);
+    color: var(--b3-color-on-accent);
+  }
+
+  .b3-nav-link > .b3-count {
+    margin-inline-start: auto;
+  }
+
+  .b3-bottom-link {
+    position: relative;
+  }
+
+  .b3-bottom-link > .b3-count {
+    box-shadow: 0 0 0 2px var(--b3-color-surface);
+    position: absolute;
+    inset-block-start: .125rem;
+    inset-inline-start: calc(50% + .375rem);
+  }
+
+  :is(a, button, [role="button"]).b3-row:is([aria-current]:not([aria-current="false"]), [aria-selected="true"]) {
+    background: color-mix(in srgb, var(--b3-color-accent) 12%, transparent);
+  }
+
   .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;
@@ -421,6 +623,17 @@
     display: inline-block;
   }
 
+  [data-b3-confirm][data-b3-armed] {
+    outline: 2px solid var(--b3-color-danger) !important;
+    outline-offset: 2px !important;
+  }
+
+  .b3-button[data-b3-armed] {
+    background: var(--b3-color-danger);
+    color: var(--b3-color-canvas);
+    border-color: var(--b3-color-danger);
+  }
+
   .b3-input:disabled {
     opacity: .6;
     cursor: not-allowed;
@@ -438,7 +651,8 @@
   .b3-input-group {
     border: 1px solid var(--b3-color-border);
     border-radius: var(--b3-radius);
-    background: var(--b3-color-surface);
+    background: var(--b3-color-canvas);
+    flex-wrap: wrap;
     align-items: stretch;
     min-inline-size: 0;
     display: flex;
@@ -448,15 +662,22 @@
   .b3-input-group > .b3-input {
     border: 0;
     border-radius: 0;
-    flex: 1;
+    flex: 12ch;
+  }
+
+  .b3-input-group:has( > .b3-button) {
+    justify-content: end;
   }
 
   .b3-input-group:focus-within {
-    outline: 3px solid var(--b3-color-focus);
-    outline-offset: 3px;
+    outline: none;
+    box-shadow: inset 0 0 0 2px;
   }
 
   .b3-input-affix {
+    overflow-wrap: anywhere;
+    min-inline-size: 0;
+    max-inline-size: 100%;
     color: var(--b3-color-muted);
     background: var(--b3-color-canvas);
     align-items: center;
@@ -466,12 +687,19 @@
 
   .b3-choice {
     cursor: pointer;
+    flex-wrap: wrap;
     align-items: start;
     gap: .75rem;
     padding-block: .5rem;
     display: flex;
   }
 
+  .b3-choice > :not(input) {
+    overflow-wrap: anywhere;
+    flex: 12ch;
+    min-inline-size: 0;
+  }
+
   .b3-choice input {
     --b3-choice-control: 1.125rem;
     inline-size: var(--b3-choice-control);
@@ -522,6 +750,34 @@
     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:is([type="date"], [type="time"], [type="datetime-local"], [type="month"], [type="week"]) {
+    appearance: none;
+    max-inline-size: 100%;
+    display: block;
+  }
+
+  .b3-input::-webkit-date-and-time-value {
+    text-align: start;
+    min-block-size: 1lh;
+  }
+
+  .b3-input-affix {
+    white-space: nowrap;
+  }
+
   .b3-card-header, .b3-card-footer {
     justify-content: space-between;
     align-items: center;
@@ -547,9 +803,29 @@
   .b3-divider {
     border: 0;
     border-block-start: 1px solid var(--b3-color-border);
+    inline-size: 100%;
+    margin-inline: 0;
     margin-block: var(--b3-space);
   }
 
+  .b3-stack > .b3-divider {
+    margin-block: 0;
+  }
+
+  .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);
@@ -599,12 +875,22 @@
     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 {
     border: 2px solid;
     vertical-align: -.125em;
@@ -636,6 +922,32 @@
     }
   }
 
+  :is(button, a).b3-badge {
+    min-block-size: auto;
+    color: var(--b3-color-text);
+    cursor: pointer;
+    background: none;
+    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;
@@ -656,6 +968,27 @@
     inline-size: 100%;
   }
 
+  .b3-avatar[data-b3-unread] {
+    position: relative;
+    overflow: visible;
+  }
+
+  .b3-avatar[data-b3-unread] > img {
+    border-radius: inherit;
+  }
+
+  .b3-avatar[data-b3-unread]:after {
+    content: "";
+    background: var(--b3-color-accent);
+    block-size: .75rem;
+    inline-size: .75rem;
+    box-shadow: 0 0 0 2px var(--b3-color-surface);
+    border-radius: 50%;
+    position: absolute;
+    inset-block-start: -.0625rem;
+    inset-inline-end: -.0625rem;
+  }
+
   .b3-avatar-stack {
     padding-inline-start: .5rem;
     display: flex;
@@ -679,6 +1012,7 @@
   .b3-table-wrap {
     border: 1px solid var(--b3-color-border);
     border-radius: var(--b3-radius);
+    position: relative;
     overflow-x: auto;
   }
 
@@ -716,13 +1050,16 @@
   }
 
   .b3-definition {
-    grid-template-columns: minmax(7rem, 1fr) minmax(0, 2fr);
+    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);
   }
 
@@ -731,15 +1068,27 @@
     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 {
+    grid-template-columns: minmax(0, 1fr);
     gap: .5rem;
     display: grid;
   }
 
   .b3-stat-value {
+    overflow-wrap: anywhere;
     letter-spacing: -.045em;
     font-variant-numeric: tabular-nums;
-    font-size: clamp(2rem, 5vw, 3rem);
+    font-size: clamp(1.5rem, 5vw, 3rem);
     font-weight: 650;
     line-height: 1.1;
   }
@@ -749,7 +1098,7 @@
     flex-wrap: wrap;
     align-items: center;
     gap: .5rem;
-    padding: .75rem;
+    padding: .75rem min(.75rem, 3%);
     display: flex;
   }
 
@@ -760,12 +1109,16 @@
   }
 
   .b3-nav-link {
+    overflow-wrap: anywhere;
     border-radius: var(--b3-radius-small);
     min-block-size: 2.75rem;
+    min-inline-size: 0;
+    max-inline-size: 100%;
     color: var(--b3-color-muted);
+    flex-wrap: wrap;
     align-items: center;
     gap: .5rem;
-    padding: .625rem .875rem;
+    padding: .625rem min(.875rem, 4%);
     text-decoration: none;
     display: flex;
   }
@@ -810,13 +1163,16 @@
     appearance: none;
     color: var(--b3-color-muted);
     font: inherit;
-    white-space: nowrap;
+    white-space: normal;
+    overflow-wrap: anywhere;
     cursor: pointer;
     background: none;
     border: 0;
     border-block-end: 2px solid #0000;
+    flex-shrink: 0;
     min-block-size: 2.75rem;
-    padding: .75rem 1rem;
+    max-inline-size: 100%;
+    padding: .75rem min(1rem, 4vi);
   }
 
   .b3-tab[aria-selected="true"] {
@@ -834,6 +1190,75 @@
     padding-block: var(--b3-space-4);
   }
 
+  .b3-segmented {
+    border-radius: var(--b3-radius);
+    background: color-mix(in srgb, var(--b3-color-text) 7%, var(--b3-color-canvas));
+    border: 0;
+    flex-wrap: wrap;
+    gap: .25rem;
+    min-inline-size: 0;
+    margin: 0;
+    padding: .25rem;
+    display: flex;
+  }
+
+  .b3-segmented > label {
+    border-radius: calc(var(--b3-radius) - .25rem);
+    min-block-size: 2.75rem;
+    max-inline-size: 100%;
+    color: var(--b3-color-muted);
+    text-align: center;
+    cursor: pointer;
+    flex: 1 0 auto;
+    justify-content: center;
+    align-items: center;
+    gap: .375rem;
+    padding-inline: .875rem;
+    font-weight: 600;
+    display: inline-flex;
+    position: relative;
+  }
+
+  .b3-segmented > label > input {
+    opacity: 0;
+    block-size: 100%;
+    inline-size: 100%;
+    cursor: inherit;
+    margin: 0;
+    position: absolute;
+    inset: 0;
+  }
+
+  .b3-segmented > label:has(input:checked) {
+    background: var(--b3-color-surface);
+    color: var(--b3-color-text);
+    box-shadow: 0 1px 2px #0000001f, 0 0 0 1px var(--b3-color-border);
+  }
+
+  .b3-segmented > label:has(input:focus-visible) {
+    box-shadow: inset 0 0 0 2px;
+  }
+
+  @media (forced-colors: active) {
+    .b3-segmented > label {
+      border: 2px solid canvas;
+    }
+
+    .b3-segmented > label:has(input:checked) {
+      border-color: canvastext;
+    }
+
+    .b3-segmented > label:has(input:focus-visible) {
+      outline-offset: 1px;
+      outline: 2px solid highlight;
+    }
+  }
+
+  .b3-segmented > label:has(input:disabled) {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
   .b3-accordion {
     border-block-end: 1px solid var(--b3-color-border);
   }
@@ -888,7 +1313,7 @@
     inline-size: min(32rem, 100% - 2rem);
     color: var(--b3-color-text);
     box-shadow: var(--b3-shadow-raised);
-    padding: 1.5rem;
+    padding: min(1.5rem, 5vi);
     overflow: auto;
   }
 
@@ -901,6 +1326,7 @@
     block-size: 100svh;
     max-block-size: 100svh;
     inline-size: min(28rem, 100%);
+    max-inline-size: 100%;
     margin: 0;
     margin-inline-start: auto;
   }
@@ -941,9 +1367,45 @@
     }
   }
 
-  .b3-tree {
+  .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, .b3-tree ul {
+    overflow-wrap: anywhere;
     border-inline-start: 1px solid var(--b3-color-border);
-    padding-inline-start: 1rem;
+    padding-inline-start: min(1rem, 5%);
     list-style: none;
   }
 
@@ -962,11 +1424,23 @@
     margin-block: 1rem;
   }
 
-  .b3-prose :is(h2, h3, h4) {
+  .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);
@@ -1077,6 +1551,7 @@
 
   .b3-price {
     font-variant-numeric: tabular-nums;
+    flex-wrap: wrap;
     align-items: baseline;
     gap: .375rem;
     display: flex;
@@ -1176,7 +1651,7 @@
     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;
+    padding-inline-start: min(1rem, 5%);
     font-size: .875rem;
     position: sticky;
     inset-block-start: var(--b3-outline-top, 1rem);
@@ -1193,14 +1668,14 @@
 
   .b3-toc ol ol {
     margin: .25rem 0;
-    padding-inline-start: 1rem;
+    padding-inline-start: min(1rem, 5%);
   }
 
   .b3-toc-link {
     border-radius: var(--b3-radius-small);
     color: var(--b3-color-muted);
     overflow-wrap: anywhere;
-    padding: .625rem .75rem;
+    padding: .625rem min(.75rem, 5%);
     text-decoration: none;
     display: block;
   }
@@ -1235,16 +1710,28 @@
     padding: 0;
   }
 
+  .b3-command[open]:has( > .b3-scroll) {
+    grid-template-rows: auto minmax(0, 1fr);
+    display: grid;
+  }
+
+  .b3-command > .b3-scroll > .b3-command-list {
+    max-block-size: none;
+    overflow: visible;
+  }
+
   .b3-command-search {
     border-block-end: 1px solid var(--b3-color-border);
+    flex-wrap: wrap;
+    justify-content: end;
     align-items: center;
     gap: .75rem;
-    padding: 1rem;
+    padding: min(1rem, 4vw);
     display: flex;
   }
 
   .b3-command-search > input {
-    flex: 1;
+    flex: 12ch;
     min-inline-size: 0;
   }
 
@@ -1273,9 +1760,9 @@
     cursor: pointer;
     justify-content: space-between;
     align-items: center;
-    gap: 1rem;
+    gap: min(1rem, 2vw);
     min-block-size: 2.75rem;
-    padding: .875rem .75rem;
+    padding: min(.875rem, 2svh) min(.75rem, 3vw);
     display: flex;
   }
 
@@ -1310,6 +1797,23 @@
     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;
@@ -1427,8 +1931,8 @@
   }
 
   .b3-choice-card:has(input:focus-visible) {
-    outline: 3px solid var(--b3-color-focus);
-    outline-offset: 3px;
+    outline: none;
+    box-shadow: inset 0 0 0 2px;
   }
 
   .b3-choice-card:has(input:disabled) {
@@ -1498,6 +2002,7 @@
   }
 
   .b3-message {
+    grid-template-columns: minmax(0, 1fr);
     justify-self: start;
     gap: .375rem;
     min-inline-size: 0;
@@ -1516,7 +2021,7 @@
     color: var(--b3-color-text);
     white-space: pre-wrap;
     overflow-wrap: anywhere;
-    padding: .875rem 1rem;
+    padding: .75rem 1rem;
   }
 
   .b3-message[data-b3-side="self"] > .b3-message-body {
@@ -1537,6 +2042,53 @@
     justify-content: end;
   }
 
+  .b3-conversation {
+    align-content: start;
+  }
+
+  .b3-message-body:has( > :is(div, p, ul, ol, table, pre, blockquote, b3-markdown-stream)) {
+    white-space: normal;
+  }
+
+  .b3-composer {
+    align-items: end;
+    gap: var(--b3-space-2);
+    padding: var(--b3-space-3);
+    border-block-start: 1px solid var(--b3-color-border);
+    background: var(--b3-color-canvas);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .b3-composer > .b3-input, .b3-composer > .b3-button {
+    border-radius: var(--b3-radius);
+    min-block-size: var(--b3-d-control, 2.75rem);
+  }
+
+  .b3-composer > .b3-input {
+    resize: none;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    padding-block: calc((var(--b3-d-control, 2.75rem) - 1.5em - 2px) / 2);
+    flex: 12ch;
+    line-height: 1.5;
+  }
+
+  .b3-composer > .b3-button {
+    block-size: var(--b3-d-control, 2.75rem);
+    min-inline-size: var(--b3-d-control, 2.75rem);
+    flex-shrink: 0;
+    margin-inline-start: auto;
+  }
+
+  .b3-message-body :where(p, ul, ol, pre, table, blockquote, h1, h2, h3, h4, h5, h6, div, figure):first-child {
+    margin-block-start: 0;
+  }
+
+  .b3-message-body :where(p, ul, ol, pre, table, blockquote, h1, h2, h3, h4, h5, h6, div, figure):last-child {
+    margin-block-end: 0;
+  }
+
   .b3-mobile-app {
     --b3-touch: 44px;
     min-block-size: 100svh;
@@ -1560,17 +2112,18 @@
     display: flex;
   }
 
-  .b3-app-bar > :last-child {
+  .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));
+    padding: .5rem clamp(.5rem, 2vw, 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);
+    flex-wrap: wrap;
     justify-content: space-around;
     gap: .5rem;
     margin-inline: auto;
@@ -1581,21 +2134,36 @@
   }
 
   .b3-bottom-link {
+    appearance: none;
+    cursor: pointer;
+    overflow-wrap: normal;
+    text-align: center;
     min-block-size: var(--b3-touch, 44px);
     min-inline-size: 0;
     color: var(--b3-color-muted);
+    background: none;
+    border: 0;
     border-radius: 1rem;
     flex-direction: column;
-    flex: 1;
+    flex: 5ch;
     justify-content: center;
     align-items: center;
     gap: .15rem;
-    padding: .25rem .5rem;
+    padding: .25rem clamp(.125rem, 1vw, .5rem);
     font-size: .75rem;
     text-decoration: none;
     display: flex;
   }
 
+  .b3-bottom-link:disabled {
+    opacity: .5;
+    cursor: not-allowed;
+  }
+
+  .b3-bottom-link:has(svg) {
+    justify-content: flex-start;
+  }
+
   .b3-bottom-link[aria-current="page"] {
     color: var(--b3-color-accent);
     font-weight: 700;
@@ -1639,7 +2207,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;
@@ -1653,6 +2221,7 @@
   }
 
   .b3-sheet [data-b3-initial-focus]:focus {
+    box-shadow: none;
     outline: none;
   }
 
@@ -1715,7 +2284,30 @@
     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-bottom-link > :where(span, strong):not(.b3-count) {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-inline-size: 100%;
+    overflow: hidden;
+  }
+
+  :has( > .b3-bottom-link:nth-of-type(5)) > .b3-bottom-link {
+    padding-inline: .125rem;
+    font-size: .6875rem;
+  }
+
   .b3-app-frame {
+    inline-size: 100%;
     block-size: var(--b3-frame-height, 100dvh);
     min-block-size: 0;
     max-inline-size: var(--b3-app-width, 70rem);
@@ -1733,7 +2325,7 @@
 
   .b3-app-frame > main {
     overscroll-behavior: contain;
-    grid-row: 2;
+    grid-area: 2 / 1;
     min-block-size: 0;
     min-inline-size: 0;
     overflow: auto;
@@ -1745,14 +2337,184 @@
     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:has( > .b3-bottom-nav,  > footer .b3-bottom-nav) {
+    padding-block-end: 0;
+  }
+
   .b3-app-frame .b3-bottom-nav {
     inline-size: 100%;
     max-inline-size: none;
-    padding-block-end: .5rem;
+    padding-block-end: max(.5rem, env(safe-area-inset-bottom, 0px));
     position: static;
   }
+
+  :where(.b3-root[data-b3-density]) .b3-button {
+    min-block-size: var(--b3-d-control, 2.75rem);
+    padding: var(--b3-d-pad-block, .625rem) var(--b3-d-pad-inline, 1rem);
+    font-size: var(--b3-d-label, inherit);
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-button[data-b3-size="small"] {
+    min-block-size: var(--b3-d-control-small, auto);
+    padding: calc(var(--b3-d-pad-block, .5rem) - .125rem) calc(var(--b3-d-pad-inline, .75rem) - .25rem);
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-input {
+    min-block-size: var(--b3-d-control, 2.75rem);
+    padding: calc((var(--b3-d-control, 2.75rem) - 1.5em - 2px) / 2) .75rem;
+    line-height: 1.5;
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-nav-link {
+    min-block-size: var(--b3-d-control, 2.75rem);
+    padding: var(--b3-d-pad-block, .625rem) min(var(--b3-d-pad-inline, .875rem), 4%);
+    font-size: var(--b3-d-label, inherit);
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-heading {
+    font-size: var(--b3-d-heading, 1.375rem);
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-avatar {
+    block-size: var(--b3-d-avatar, 2.5rem);
+    inline-size: var(--b3-d-avatar, 2.5rem);
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-conversation {
+    gap: var(--b3-d-gap, 1.5rem);
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-message-body {
+    padding: var(--b3-d-message-pad, .75rem 1rem);
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-message-meta {
+    font-size: var(--b3-d-meta, .8125rem);
+  }
+
+  .b3-button[data-b3-emphasis="ghost"] {
+    color: var(--b3-color-muted);
+    background: none;
+    border-color: #0000;
+  }
+
+  .b3-button[data-b3-emphasis="ghost"]:not(:disabled):hover {
+    color: var(--b3-color-text);
+  }
+
+  .b3-button[data-b3-emphasis="ghost"][aria-pressed="true"] {
+    color: var(--b3-color-accent);
+  }
+
+  .b3-button[data-b3-icon] {
+    min-inline-size: var(--b3-d-control, 2.75rem);
+    padding-inline: 0;
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-button[data-b3-icon][data-b3-size="small"] {
+    min-inline-size: var(--b3-d-control-small, 2.25rem);
+  }
+
+  .b3-button:disabled {
+    opacity: 1;
+    background: color-mix(in srgb, var(--b3-color-muted) 14%, var(--b3-color-surface));
+    color: var(--b3-color-muted);
+    border-color: #0000;
+  }
+
+  .b3-button[data-b3-emphasis="ghost"]:disabled {
+    background: none;
+  }
+
+  .b3-truncate {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    min-inline-size: 0;
+    overflow: hidden;
+  }
+
+  .b3-strong {
+    font-size: inherit;
+    font-weight: 650;
+  }
+
+  .b3-caption {
+    color: var(--b3-color-muted);
+    font-size: .8125rem;
+    line-height: 1.4;
+  }
+
+  .b3-heading[data-b3-size="small"] {
+    font-size: 1.0625rem;
+    line-height: 1.3;
+  }
+
+  :is(a, button).b3-caption {
+    color: var(--b3-color-accent);
+    cursor: pointer;
+    text-underline-offset: .15em;
+    background: none;
+    border: 0;
+    padding: 0;
+  }
+
+  :is(a, button).b3-caption:is(:hover, :focus-visible) {
+    text-decoration: underline;
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-caption {
+    font-size: var(--b3-d-meta, .8125rem);
+  }
+
+  .b3-badge {
+    gap: .25rem;
+  }
+
+  :where(.b3-root[data-b3-density]) .b3-surface {
+    padding: var(--b3-d-surface-pad, clamp(1rem, 3vw, 2rem));
+  }
+
+  .b3-input-group, .b3-input-group > .b3-input-affix, .b3-input-group > .b3-input {
+    background: var(--b3-color-surface);
+  }
+
+  .b3-root[data-b3-theme="dark"] .b3-message[data-b3-side="self"] > .b3-message-body {
+    background: color-mix(in srgb, var(--b3-color-accent) 22%, var(--b3-color-surface));
+    color: var(--b3-color-text);
+  }
+
+  .b3-empty {
+    justify-items: center;
+    gap: var(--b3-space-2);
+    padding: var(--b3-space-12) var(--b3-space-4);
+    text-align: center;
+    color: var(--b3-color-muted);
+    display: grid;
+  }
+
+  .b3-empty > svg {
+    color: var(--b3-color-muted);
+  }
+}
+
+@property --b3-reel-fade {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 2.5rem;
 }