@twentyfirstmedia/halo 0.4.0 → 0.6.0

package/dist/styles.css

@@ -335,6 +335,11 @@
   --chart-lilac: var(--lilac);
   --chart-butter: var(--butter);
   --chart-blush: var(--blush);
+  --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+  --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+  --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+  --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+  --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
   --ok: #2f5d16;
   --ok-bg: #d6efc3;
   --info: #1f4f8a;
@@ -483,6 +488,11 @@
     --chart-lilac: var(--lilac-ink);
     --chart-butter: var(--butter-ink);
     --chart-blush: var(--blush-ink);
+    --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+    --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+    --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+    --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+    --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
     --ok: #a8db86;
     --ok-bg: #24401a;
     --info: #9cc6f7;
@@ -632,6 +642,11 @@
     --chart-lilac: var(--lilac-ink);
     --chart-butter: var(--butter-ink);
     --chart-blush: var(--blush-ink);
+    --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+    --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+    --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+    --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+    --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
     --ok: #a8db86;
     --ok-bg: #24401a;
     --info: #9cc6f7;
@@ -781,6 +796,11 @@
     --chart-lilac: var(--lilac);
     --chart-butter: var(--butter);
     --chart-blush: var(--blush);
+    --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+    --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+    --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+    --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+    --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
     --ok: #2f5d16;
     --ok-bg: #d6efc3;
     --info: #1f4f8a;
@@ -929,6 +949,11 @@
   --chart-lilac: var(--lilac-ink);
   --chart-butter: var(--butter-ink);
   --chart-blush: var(--blush-ink);
+  --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+  --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+  --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+  --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+  --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
   --ok: #a8db86;
   --ok-bg: #24401a;
   --info: #9cc6f7;
@@ -1076,6 +1101,11 @@
   --chart-lilac: var(--lilac);
   --chart-butter: var(--butter);
   --chart-blush: var(--blush);
+  --ramp-1: color-mix(in oklab, var(--chart-1) 12%, var(--background));
+  --ramp-2: color-mix(in oklab, var(--chart-1) 28%, var(--background));
+  --ramp-3: color-mix(in oklab, var(--chart-1) 46%, var(--background));
+  --ramp-4: color-mix(in oklab, var(--chart-1) 66%, var(--background));
+  --ramp-5: color-mix(in oklab, var(--chart-1) 88%, var(--background));
   --ok: #2f5d16;
   --ok-bg: #d6efc3;
   --info: #1f4f8a;
@@ -1620,7 +1650,8 @@ select.tf-input {
   border-radius: var(--radius-pill);
   background: var(--surface-sunken);
   color: var(--ink-muted);
-  min-width: 220px;
+  min-width: min(220px, 100%);
+  box-sizing: border-box;
 }
 .tf-search input {
   border: 0;
@@ -1629,6 +1660,7 @@ select.tf-input {
   font: 500 14px/20px var(--font-sans);
   color: var(--ink);
   width: 100%;
+  min-width: 0;
 }
 .tf-search input::placeholder {
   color: var(--ink-subtle);
@@ -1710,7 +1742,7 @@ select.tf-input {
   display: flex;
 }
 .tf-tabs-block .tf-tab {
-  flex: 1;
+  flex: 1 1 0;
 }
 
 /* StatTile */
@@ -2027,6 +2059,36 @@ select.tf-input {
   background: var(--accent);
   color: var(--accent-foreground);
 }
+/* expanded: names next to the icons (the sheet's first column follows the rail's width) */
+.tf-rail {
+  transition: width var(--dur-base) var(--ease-out);
+}
+.tf-rail.expanded {
+  width: 200px;
+}
+.tf-rail.expanded .tf-rail-group {
+  align-items: stretch;
+}
+.tf-rail.expanded .tf-rail-btn {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 0 10px;
+  box-sizing: border-box;
+  border-radius: var(--radius-pill);
+}
+.tf-rail-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 600 13px/18px var(--font-sans);
+}
+.tf-rail.expanded .tf-dotcount {
+  position: static;
+  margin-left: auto;
+}
 .tf-rail-btn[aria-current="page"] {
   background: var(--primary);
   color: var(--primary-foreground);
@@ -2176,9 +2238,28 @@ select.tf-input {
 .tf-shell .tf-topbar {
   padding: 0 var(--space-6);
 }
+/* AppShell with navigation="sidebar": the labelled sidebar on the frame, the sheet beside it */
+.tf-shell.tf-shell-sidebar {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: stretch;
+  padding: 8px;
+}
+.tf-shell-tools {
+  display: flex;
+  justify-content: flex-end;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.tf-sheet.tf-sheet-norail {
+  grid-template-columns: minmax(0, 1fr) 300px;
+}
+.tf-sheet.tf-sheet-norail.tf-sheet-2 {
+  grid-template-columns: minmax(0, 1fr);
+}
 .tf-sheet {
   display: grid;
-  grid-template-columns: 44px 1fr 300px;
+  grid-template-columns: auto 1fr 300px;
   gap: var(--space-6);
   padding: var(--space-6);
   background: var(--canvas);
@@ -2695,6 +2776,64 @@ select.tf-input {
   background: var(--accent);
   color: var(--accent-foreground);
 }
+a.tf-row-item {
+  text-decoration: none;
+}
+.tf-row-text {
+  min-width: 0;
+}
+/* not interactive: no hover, no pointer */
+.tf-row-item.static {
+  cursor: default;
+}
+.tf-row-item.static:hover {
+  background: transparent;
+  color: var(--ink);
+}
+/* own buttons: the title is the link or button and its hit area stretches over the row */
+.tf-row-item.has-hit {
+  position: relative;
+}
+.tf-row-item.has-hit:hover {
+  background: transparent;
+  color: var(--ink);
+}
+.tf-row-item.has-hit:has(.tf-row-hit:hover) {
+  background: var(--accent);
+  color: var(--accent-foreground);
+}
+.tf-row-item.has-hit:has(.tf-row-hit:focus-visible) {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-row-hit {
+  display: block;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+}
+.tf-row-hit::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+}
+.tf-row-item.has-actions {
+  grid-template-columns: auto 1fr auto auto;
+}
+.tf-row-actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
 .tf-row-item[aria-current="true"] {
   background: var(--surface);
   box-shadow: var(--shadow-card);
@@ -2706,12 +2845,27 @@ select.tf-input {
   gap: 8px;
 }
 .tf-row-sub {
+  display: block;
   font: 500 13px/18px var(--font-sans);
   color: var(--ink-muted);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
+/* titleLines / subtitleLines: wrap, then end in an ellipsis after that many lines */
+.tf-row-sub.clamp,
+.tf-row-clamp {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--lines, 2);
+  line-clamp: var(--lines, 2);
+  white-space: normal;
+  overflow: hidden;
+  min-width: 0;
+}
+.tf-row-title.clamp {
+  align-items: flex-start;
+}
 .tf-row-meta {
   font: 600 12px/16px var(--font-sans);
   color: var(--ink-muted);
@@ -2898,6 +3052,13 @@ select.tf-input {
   font: 600 13px/1 var(--font-sans);
   cursor: pointer;
 }
+a.tf-page {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  text-decoration: none;
+}
 .tf-page:hover {
   background: var(--accent);
   color: var(--ink);
@@ -2908,18 +3069,42 @@ select.tf-input {
 }
 .tf-crumbs {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 6px;
+  min-width: 0;
   font: 600 13px/18px var(--font-sans);
   color: var(--ink-muted);
 }
-.tf-crumbs a {
+/* links and buttons get a 24px target without moving the text */
+.tf-crumb {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  max-width: 100%;
+  padding: 0 4px;
+  /* the target grows to 24px around the 18px line without moving the text */
+  margin: -3px -4px;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: none;
   color: inherit;
+  font: inherit;
   text-decoration: none;
+  overflow-wrap: anywhere;
+}
+a.tf-crumb,
+button.tf-crumb {
+  cursor: pointer;
 }
-.tf-crumbs a:hover {
+a.tf-crumb:hover,
+button.tf-crumb:hover {
   color: var(--ink);
 }
+.tf-crumb:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 0;
+}
 .tf-crumbs [aria-current] {
   color: var(--ink);
 }
@@ -2961,7 +3146,7 @@ select.tf-input {
   cursor: pointer;
 }
 .tf-sheet-2 {
-  grid-template-columns: 44px 1fr;
+  grid-template-columns: auto 1fr;
 }
 .tf-main {
   display: flex;
@@ -3031,6 +3216,26 @@ select.tf-input {
     justify-content: center;
   }
 }
+/* the TopBar measured that the labels do not fit: icons only, at any width */
+.tf-nav.tight .tf-nav-label {
+  display: none;
+}
+.tf-nav.tight .tf-nav-item {
+  position: relative;
+  width: 36px;
+  padding: 0;
+  justify-content: center;
+}
+.tf-nav.tight .tf-nav-item .tf-nav-count {
+  position: absolute;
+  top: -2px;
+  right: -4px;
+  min-width: 16px;
+  height: 16px;
+  padding: 0 4px;
+  font-size: 10px;
+  line-height: 16px;
+}
 .tf-main {
   animation: none;
 }
@@ -3156,6 +3361,19 @@ select.tf-input {
 .tf-user-text {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  max-width: 200px;
+}
+/* a long name or address ends in an ellipsis instead of pushing the nav out (title has it whole) */
+.tf-user-name,
+.tf-user-mail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tf-user {
+  min-width: 0;
+  flex-shrink: 1;
 }
 
 /* Checkbox: real box + SVG check (no pseudo-elements on the input) */
@@ -3168,9 +3386,12 @@ select.tf-input {
 }
 .tf-checkbox input {
   position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
+  /* the box keeps its size; the hit area is at least 24px (WCAG 2.2 target size) */
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  width: max(24px, 100%);
+  height: max(24px, 100%);
   margin: 0;
   opacity: 0;
   cursor: pointer;
@@ -4244,6 +4465,23 @@ select.tf-input {
   font: 600 13px/18px var(--font-sans);
   pointer-events: none;
 }
+/* an interactive control at the end (reveal password, clear, copy) */
+.tf-input-action {
+  position: absolute;
+  right: 4px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+}
+.tf-inputwrap.has-action .tf-input {
+  padding-right: 44px;
+}
+.tf-inputwrap.has-action.has-suffix .tf-input {
+  padding-right: 72px;
+}
+.tf-inputwrap.has-action .tf-input-suffix {
+  right: 44px;
+}
 .tf-input-suffix.err {
   color: var(--blush-ink);
 }
@@ -4403,7 +4641,7 @@ select.tf-input {
   display: flex;
 }
 .tf-seg.block .tf-seg-item {
-  flex: 1;
+  flex: 1 1 0;
 }
 .tf-seg-item {
   position: relative;
@@ -5015,6 +5253,10 @@ label.tf-menu-item {
     border-color var(--dur-fast) ease,
     background-color var(--dur-fast) ease;
 }
+.tf-drop.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
 .tf-drop b {
   font: 600 14px/20px var(--font-sans);
   margin-top: 4px;
@@ -5077,6 +5319,7 @@ label.tf-menu-item {
 /* Alert, confirm, toaster */
 .tf-alert {
   display: flex;
+  flex-wrap: wrap;
   align-items: flex-start;
   gap: 12px;
   padding: 12px 12px 12px 16px;
@@ -5120,7 +5363,8 @@ label.tf-menu-item {
   color: var(--lilac-ink);
 }
 .tf-alert-body {
-  flex: 1;
+  /* when the alert is too narrow for text and actions, the actions move to their own line */
+  flex: 1 1 200px;
   min-width: 0;
   display: flex;
   flex-direction: column;
@@ -5136,8 +5380,11 @@ label.tf-menu-item {
 .tf-alert-actions {
   flex: none;
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   gap: 4px;
+  max-width: 100%;
+  margin-left: auto;
 }
 .tf-alert .tf-iconbtn-ghost {
   background: transparent;
@@ -6141,14 +6388,29 @@ label.tf-menu-item {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  height: 32px;
-  padding: 0 12px 0 4px;
+  /* grows with a long title (two lines at most) instead of spilling over */
+  min-height: 32px;
+  box-sizing: border-box;
+  padding: 4px 12px 4px 4px;
   border-radius: var(--radius-pill);
   background: var(--surface-sunken);
   color: var(--ink);
   text-decoration: none;
   font: 600 12px/16px var(--font-sans);
-  max-width: 260px;
+  max-width: min(260px, 100%);
+}
+.tf-source-title {
+  min-width: 0;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+}
+.tf-source > .tf-ico,
+.tf-source-n {
+  flex: none;
 }
 .tf-source:hover {
   background: var(--line);
@@ -7271,17 +7533,25 @@ label.tf-menu-item {
   color: var(--ink-muted);
 }
 .tf-csteps {
+  /* one row at every width: steps shrink to their numbers instead of wrapping */
+  container: tf-csteps / inline-size;
   display: flex;
   gap: 8px;
   margin: 0;
   padding: 0;
   list-style: none;
-  flex-wrap: wrap;
 }
 .tf-csteps li {
   display: flex;
   align-items: center;
   gap: 8px;
+  min-width: 0;
+}
+.tf-cstep-label {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .tf-csteps li + li::before {
   content: "";
@@ -7310,6 +7580,40 @@ label.tf-menu-item {
 .tf-csteps button:disabled {
   cursor: default;
 }
+.tf-csteps button {
+  min-width: 0;
+  max-width: 100%;
+}
+.tf-csteps.compact li:not(.cur) .tf-cstep-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.tf-csteps.compact li:not(.cur) button {
+  padding: 0 4px;
+}
+.tf-csteps.compact li + li::before {
+  width: 12px;
+}
+@container tf-csteps (max-width: 560px) {
+  .tf-csteps li:not(.cur) .tf-cstep-label {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  .tf-csteps li:not(.cur) button {
+    padding: 0 4px;
+  }
+  .tf-csteps li + li::before {
+    width: 12px;
+  }
+}
 .tf-csteps li.cur button {
   background: var(--surface);
   color: var(--ink);
@@ -7476,7 +7780,7 @@ label.tf-menu-item {
   color: var(--on-frame);
   box-shadow: var(--shadow-float);
 }
-.tf-plan.featured .tf-plan-head span,
+.tf-plan.featured .tf-plan-head span:not(.tf-badge),
 .tf-plan.featured .tf-plan-price span,
 .tf-plan.featured .tf-plan-price s,
 .tf-plan.featured .tf-plan-feats li.no {
@@ -7507,10 +7811,22 @@ label.tf-menu-item {
 .tf-plan-head b {
   font: 700 20px/26px var(--font-sans);
 }
-.tf-plan-head span {
+.tf-plan-head span:not(.tf-badge) {
   font: 500 13px/18px var(--font-sans);
   color: var(--ink-muted);
 }
+/* "Current plan" next to the name, and the note under the price */
+.tf-plan-head .tf-plan-current {
+  align-self: flex-start;
+}
+.tf-plan-note {
+  margin: -4px 0 0;
+  font: 500 12px/16px var(--font-sans);
+  color: var(--ink-muted);
+}
+a.tf-plan-cta {
+  text-decoration: none;
+}
 .tf-plan-price {
   display: flex;
   align-items: baseline;
@@ -9610,7 +9926,7 @@ label.tf-menu-item {
 .tf-tabbar {
   display: grid;
   grid-auto-flow: column;
-  grid-auto-columns: 1fr;
+  grid-auto-columns: minmax(0, 1fr);
   padding: 4px 8px calc(4px + env(safe-area-inset-bottom, 0px));
   background: var(--frame);
   border-radius: 24px 24px 0 0;
@@ -9629,6 +9945,17 @@ label.tf-menu-item {
   cursor: pointer;
   border-radius: 16px;
 }
+.tf-tabbar-item {
+  min-width: 0;
+}
+.tf-tabbar-label {
+  max-width: 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .tf-tabbar-item.on {
   color: var(--on-frame);
   background: var(--frame-hover);
@@ -9936,6 +10263,22 @@ label.tf-menu-item {
   padding-bottom: 10px;
   color: var(--ink-muted);
 }
+/* in a narrow column (a filter sidebar) the number fields give their padding to the digits */
+.tf-range {
+  container: tf-range / inline-size;
+}
+@container tf-range (max-width: 280px) {
+  .tf-range-inputs {
+    gap: 4px;
+  }
+  .tf-range-num .tf-input {
+    padding-left: 10px;
+    padding-right: 24px;
+  }
+  .tf-range-num > span {
+    right: 10px;
+  }
+}
 .tf-range-vals {
   display: flex;
   justify-content: space-between;
@@ -10089,6 +10432,31 @@ label.tf-menu-item {
   font: 500 12px/16px var(--font-sans);
   color: var(--ink-muted);
 }
+/* layout="list": compact rows */
+.tf-tiles.list {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 8px;
+}
+.tf-tiles.list .tf-tile {
+  flex-direction: row;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 44px 8px 8px;
+}
+.tf-tiles.list .tf-tile-art {
+  flex: none;
+  width: 40px;
+  height: 40px;
+  aspect-ratio: auto;
+}
+.tf-tiles.list .tf-tile-label {
+  min-width: 0;
+  padding: 0;
+}
+.tf-tiles.list .tf-tile-check {
+  top: 50%;
+  translate: 0 -50%;
+}
 .tf-tile-check {
   position: absolute;
   top: 14px;
@@ -11198,6 +11566,16 @@ button.tf-runs-main[aria-expanded]:hover {
   color: var(--paper-ink);
   box-shadow: inset 0 0 0 1px var(--line);
 }
+/* QrCode: dark modules on paper, in every theme (scanners expect dark on light) */
+.tf-qr {
+  display: block;
+  width: 100%;
+  height: auto;
+  color: var(--paper-ink);
+}
+.tf-qr-bg {
+  fill: var(--paper);
+}
 .tf-2fa-qr > * {
   max-width: 100%;
   max-height: 100%;
@@ -11449,7 +11827,8 @@ button.tf-runs-main[aria-expanded]:hover {
   border-radius: var(--radius-md);
   overflow: hidden;
   background: var(--surface-sunken);
-  touch-action: none;
+  /* sideways drags move the divider; the page still scrolls up and down over it */
+  touch-action: pan-y;
   user-select: none;
   cursor: ew-resize;
 }
@@ -12348,6 +12727,14 @@ button.tf-runs-main[aria-expanded]:hover {
 .tf-togglegroup .tf-toggle {
   height: 32px;
 }
+.tf-togglegroup.block {
+  display: flex;
+  flex-wrap: nowrap;
+  width: auto;
+}
+.tf-togglegroup.block .tf-toggle {
+  flex: 1 1 0;
+}
 .tf-togglegroup .tf-toggle.icon {
   width: 32px;
 }
@@ -12558,6 +12945,11 @@ button.tf-runs-main[aria-expanded]:hover {
   text-align: left;
   cursor: pointer;
 }
+.tf-selectmenu.sm {
+  height: 32px;
+  padding: 0 12px;
+  font-size: 13px;
+}
 .tf-selectmenu.empty .tf-selectmenu-value {
   color: var(--ink-subtle);
 }
@@ -12834,26 +13226,44 @@ button.tf-runs-main[aria-expanded]:hover {
   outline-offset: -2px;
 }
 
-/* Sidebar */
+/* Sidebar: floating (a card), attached (flush with the screen's edge) or on the AppShell frame */
 .tf-sidebar {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  flex: none;
+  gap: 12px;
   width: 248px;
   padding: 12px;
   box-sizing: border-box;
   border-radius: var(--radius-lg);
   background: var(--surface);
   box-shadow: var(--shadow-card);
+  color: var(--ink);
   transition: width var(--dur-base) var(--ease-out);
 }
 .tf-sidebar.collapsed {
   width: 64px;
 }
+.tf-sidebar.attached {
+  align-self: stretch;
+  min-height: 100%;
+  border-radius: 0;
+  box-shadow: none;
+  background: var(--sidebar);
+  border-right: 1px solid var(--sidebar-border);
+}
+.tf-sidebar-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 40px;
+  padding: 0 4px;
+}
 .tf-sidebar-body {
   display: flex;
   flex-direction: column;
-  gap: 16px;
+  /* groups sit clearly apart; a label sits close to its own items */
+  gap: 20px;
   flex: 1;
   min-height: 0;
   overflow-y: auto;
@@ -12866,13 +13276,49 @@ button.tf-runs-main[aria-expanded]:hover {
   padding: 0;
   list-style: none;
 }
+.tf-sidebar-grouphead {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  min-height: 24px;
+  margin-bottom: 8px;
+  padding: 0 4px 0 12px;
+}
 .tf-sidebar-grouplabel {
-  padding: 0 12px 6px;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex: 1;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
   font: 600 11px/14px var(--font-sans);
   letter-spacing: 0.06em;
   text-transform: uppercase;
+  text-align: left;
   color: var(--ink-muted);
 }
+button.tf-sidebar-grouplabel {
+  cursor: pointer;
+}
+button.tf-sidebar-grouplabel:hover {
+  color: var(--ink);
+}
+button.tf-sidebar-grouplabel:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-sidebar-grouplabel[aria-expanded="false"] .tf-sidebar-chev {
+  transform: rotate(-90deg);
+}
+.tf-sidebar-groupaction {
+  flex: none;
+  margin-left: auto;
+}
+.tf-sidebar-li {
+  position: relative;
+}
 .tf-sidebar-item {
   display: flex;
   align-items: center;
@@ -12880,15 +13326,86 @@ button.tf-runs-main[aria-expanded]:hover {
   width: 100%;
   height: 40px;
   padding: 0 12px;
+  box-sizing: border-box;
   border: 0;
   border-radius: var(--radius-pill);
   background: transparent;
   color: var(--ink-muted);
   font: 600 13px/18px var(--font-sans);
   text-align: left;
+  text-decoration: none;
   cursor: pointer;
 }
-.tf-sidebar-item:hover {
+/* Filter options (Sidebar as="aside"): a checkbox or radio mark, the label and a count */
+.tf-sidebar-option {
+  position: relative;
+}
+.tf-sidebar-option.disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+.tf-sidebar-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+.tf-sidebar-mark {
+  display: grid;
+  place-items: center;
+  flex: none;
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+  border-radius: 6px;
+  border: 1.5px solid var(--line-strong);
+  background: var(--surface);
+  color: var(--primary-foreground);
+  transition:
+    background-color var(--dur-fast) var(--ease-out),
+    border-color var(--dur-fast) var(--ease-out);
+}
+.tf-sidebar-mark.radio {
+  border-radius: 50%;
+}
+.tf-sidebar-mark svg {
+  opacity: 0;
+}
+.tf-sidebar-input:checked + .tf-sidebar-mark {
+  background: var(--primary);
+  border-color: var(--primary);
+}
+.tf-sidebar-input:checked + .tf-sidebar-mark.radio {
+  box-shadow: inset 0 0 0 3px var(--surface);
+}
+.tf-sidebar-input:checked + .tf-sidebar-mark svg {
+  opacity: 1;
+}
+.tf-sidebar-input:focus-visible + .tf-sidebar-mark {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-sidebar-option:has(.tf-sidebar-input:checked) {
+  color: var(--ink);
+}
+/* free content in a group (sliders, date fields, chips) */
+.tf-sidebar-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 4px 12px 0;
+  min-width: 0;
+}
+.tf-sidebar-groupbody {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+.tf-sidebar-item:hover,
+.tf-sidebar-item.flying {
   background: var(--sidebar-accent);
   color: var(--ink);
 }
@@ -12903,10 +13420,21 @@ button.tf-runs-main[aria-expanded]:hover {
   outline: 2px solid var(--focus);
   outline-offset: 2px;
 }
+.tf-sidebar-item:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+.tf-sidebar-item:disabled:hover {
+  background: transparent;
+  color: var(--ink-muted);
+}
 .tf-sidebar-item.nested {
   height: 32px;
   padding-left: 40px;
 }
+.tf-sidebar-sub {
+  margin-top: 2px !important;
+}
 .tf-sidebar-label {
   flex: 1;
   min-width: 0;
@@ -12915,22 +13443,107 @@ button.tf-runs-main[aria-expanded]:hover {
   white-space: nowrap;
 }
 .tf-sidebar-chev {
+  flex: none;
   transition: transform var(--dur-base) var(--ease-out);
 }
 .tf-sidebar-item[aria-expanded="true"] .tf-sidebar-chev {
   transform: rotate(180deg);
 }
+.tf-sidebar-ext {
+  flex: none;
+  opacity: 0.7;
+}
+.tf-sidebar-count {
+  flex: none;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  box-sizing: border-box;
+  border-radius: var(--radius-pill);
+  background: var(--count);
+  color: var(--on-count);
+  font: 700 11px/20px var(--font-sans);
+  text-align: center;
+}
+.tf-sidebar-badge {
+  flex: none;
+  height: 20px;
+  padding: 0 8px;
+  box-sizing: border-box;
+  border-radius: var(--radius-pill);
+  background: var(--count);
+  color: var(--on-count);
+  font: 700 10px/20px var(--font-sans);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+.tf-sidebar-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--count);
+}
+.tf-sidebar-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+/* the "…" menu of an item shows on hover and focus */
+.tf-sidebar-li.with-actions > .tf-sidebar-item {
+  padding-right: 40px;
+}
+.tf-sidebar-more {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  opacity: 0;
+  transition: opacity var(--dur-fast) var(--ease-out);
+}
+.tf-sidebar-li:hover > .tf-sidebar-more,
+.tf-sidebar-more:focus-visible,
+.tf-sidebar-more[aria-expanded="true"] {
+  opacity: 1;
+}
 .tf-sidebar-foot {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 8px;
   padding-top: 12px;
   border-top: 1px solid var(--sidebar-border);
 }
+.tf-sidebar-foot > :not(.tf-sidebar-toggle) {
+  flex: 1;
+  min-width: 0;
+}
+.tf-sidebar-toggle {
+  flex: none;
+  margin-left: auto;
+}
+.tf-sidebar-head .tf-pop-anchor,
+.tf-sidebar-foot .tf-pop-anchor {
+  display: block;
+  min-width: 0;
+}
+.tf-sidebar-head .tf-wssw {
+  width: 100%;
+}
+.tf-sidebar-head .tf-wssw .tf-option-text {
+  flex: 1;
+  min-width: 0;
+}
+
+/* collapsed: icons only; labels stay the accessible names, tooltips and flyouts show them */
+.tf-sidebar.collapsed .tf-sidebar-body {
+  gap: 12px;
+}
 .tf-sidebar.collapsed .tf-sidebar-label,
 .tf-sidebar.collapsed .tf-sidebar-chev,
-.tf-sidebar.collapsed .tf-sidebar-grouplabel {
+.tf-sidebar.collapsed .tf-sidebar-ext,
+.tf-sidebar.collapsed .tf-sidebar-grouphead {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -12938,12 +13551,19 @@ button.tf-runs-main[aria-expanded]:hover {
   clip-path: inset(50%);
   white-space: nowrap;
 }
+.tf-sidebar.collapsed .tf-sidebar-group + .tf-sidebar-group {
+  padding-top: 12px;
+  border-top: 1px solid var(--sidebar-border);
+}
 .tf-sidebar.collapsed .tf-sidebar-item {
   position: relative;
   justify-content: center;
   padding: 0;
 }
-.tf-sidebar.collapsed .tf-subnav-count {
+.tf-sidebar.collapsed .tf-sidebar-item.has-current {
+  background: var(--sidebar-accent);
+}
+.tf-sidebar.collapsed .tf-sidebar-count {
   position: absolute;
   top: -2px;
   right: -2px;
@@ -12953,13 +13573,273 @@ button.tf-runs-main[aria-expanded]:hover {
   font-size: 10px;
   line-height: 16px;
 }
+.tf-sidebar.collapsed .tf-sidebar-dot,
+.tf-sidebar.collapsed .tf-sidebar-badge {
+  position: absolute;
+  top: 6px;
+  right: 8px;
+  width: 8px;
+  height: 8px;
+  padding: 0;
+  font-size: 0;
+}
+.tf-sidebar.collapsed .tf-sidebar-head {
+  justify-content: center;
+  padding: 0;
+}
 .tf-sidebar.collapsed .tf-sidebar-foot {
   flex-direction: column;
 }
+.tf-sidebar.collapsed .tf-sidebar-foot > :not(.tf-sidebar-toggle) {
+  flex: none;
+}
+.tf-sidebar.collapsed .tf-sidebar-toggle {
+  margin-left: 0;
+}
+
+/* tooltips, flyouts and item menus float in the portal, so the scrolling body does not clip them */
+.tf-sidebar-layer {
+  position: fixed;
+  z-index: var(--z-palette);
+}
+.tf-sidebar-tip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--frame);
+  color: var(--on-frame);
+  font: 600 12px/16px var(--font-sans);
+  white-space: nowrap;
+  pointer-events: none;
+  animation: tf-fade var(--dur-fast) var(--ease-out) both;
+}
+.tf-sidebar-tipcount {
+  color: var(--on-frame-muted);
+}
+.tf-sidebar-flyout {
+  min-width: 200px;
+  padding: 6px;
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  color: var(--ink);
+  box-shadow: var(--shadow-float);
+  animation: tf-fade var(--dur-fast) var(--ease-out) both;
+}
+.tf-sidebar-flyout ul {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.tf-sidebar-flytitle {
+  padding: 6px 12px 8px;
+  font: 600 11px/14px var(--font-sans);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-muted);
+}
+.tf-sidebar-flyout .tf-sidebar-item.nested {
+  padding-left: 12px;
+}
+
+/* on the AppShell frame */
+.tf-sidebar.shell {
+  align-self: stretch;
+  padding: 16px 8px 8px;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-sidebar-item,
+.tf-sidebar.shell .tf-sidebar-grouplabel {
+  color: var(--on-frame-muted);
+}
+.tf-sidebar.shell .tf-sidebar-item:hover,
+.tf-sidebar.shell .tf-sidebar-item.flying,
+.tf-sidebar.shell.collapsed .tf-sidebar-item.has-current {
+  background: var(--frame-hover);
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-sidebar-item.has-current,
+.tf-sidebar.shell button.tf-sidebar-grouplabel:hover {
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-sidebar-item[aria-current="page"] {
+  background: var(--frame-active);
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-sidebar-item:disabled:hover {
+  background: transparent;
+  color: var(--on-frame-muted);
+}
+.tf-sidebar.shell .tf-sidebar-foot,
+.tf-sidebar.shell.collapsed .tf-sidebar-group + .tf-sidebar-group {
+  border-color: var(--frame-hover);
+}
+.tf-sidebar.shell .tf-iconbtn-ghost {
+  color: var(--on-frame-muted);
+}
+.tf-sidebar.shell .tf-iconbtn-ghost:hover {
+  background: var(--frame-hover);
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-sidebar-head {
+  min-height: 44px;
+}
+
+/* UserMenu: the signed-in person, opening their account menu */
+.tf-usermenu {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  min-height: 44px;
+  padding: 4px 8px 4px 4px;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--ink);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.tf-usermenu.compact {
+  width: auto;
+  padding: 4px;
+}
+.tf-usermenu:hover,
+.tf-usermenu[aria-expanded="true"] {
+  background: var(--sidebar-accent);
+}
+.tf-usermenu:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.tf-usermenu-avatar {
+  display: inline-flex;
+  flex: none;
+}
+.tf-usermenu-text {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+}
+.tf-usermenu-name {
+  font: 600 13px/18px var(--font-sans);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tf-usermenu-mail {
+  font: 500 11px/14px var(--font-sans);
+  color: var(--ink-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.tf-sidebar.shell .tf-usermenu {
+  color: var(--on-frame);
+}
+.tf-sidebar.shell .tf-usermenu:hover,
+.tf-sidebar.shell .tf-usermenu[aria-expanded="true"] {
+  background: var(--frame-hover);
+}
+.tf-sidebar.shell .tf-usermenu-mail {
+  color: var(--on-frame-muted);
+}
+.tf-wssw.compact {
+  padding: 4px;
+}
+
+/* the bar that opens the sidebar as a drawer on phones */
+.tf-sidebar-bar,
+.tf-sidebar-scrim {
+  display: none;
+}
 @media (max-width: 760px) {
-  .tf-sidebar {
-    width: 100%;
+  .tf-sidebar-bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-height: 52px;
+    padding: 6px 12px 6px 6px;
+    box-sizing: border-box;
+    border-radius: var(--radius-lg);
+    background: var(--surface);
+    box-shadow: var(--shadow-card);
+    color: var(--ink);
+  }
+  .tf-sidebar-bar.attached {
+    border-radius: 0;
+    box-shadow: none;
+    background: var(--sidebar);
+    border-bottom: 1px solid var(--sidebar-border);
+  }
+  .tf-sidebar-bar.shell {
+    min-height: 56px;
+    padding: 8px 8px 8px 0;
+    border-radius: 0;
+    box-shadow: none;
+    background: transparent;
+    color: var(--on-frame);
+  }
+  .tf-sidebar-bar.shell .tf-iconbtn-ghost {
+    color: var(--on-frame);
+  }
+  .tf-sidebar-bar > :not(.tf-iconbtn) {
+    min-width: 0;
+  }
+  .tf-sidebar,
+  .tf-sidebar.attached,
+  .tf-sidebar.shell {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: var(--z-overlay);
+    width: min(300px, 86vw);
+    min-height: 0;
+    padding: 12px;
+    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
+    box-shadow: var(--shadow-float);
+    transform: translateX(-105%);
+    visibility: hidden;
+    transition:
+      transform var(--dur-base) var(--ease-out),
+      visibility 0s linear var(--dur-base);
+  }
+  .tf-sidebar.shell {
+    background: var(--frame);
+  }
+  .tf-sidebar.attached {
+    background: var(--sidebar);
+  }
+  .tf-sidebar.open {
+    transform: none;
+    visibility: visible;
+    transition: transform var(--dur-base) var(--ease-out);
   }
+  .tf-sidebar-toggle {
+    display: none;
+  }
+  .tf-sidebar-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: var(--z-overlay);
+    background: var(--scrim-strong);
+    animation: tf-fade var(--dur-base) var(--ease-out) both;
+  }
+}
+
+@media (max-width: 760px) {
   .tf-navmenu-panel.with-feature {
     grid-template-columns: minmax(0, 1fr);
   }
@@ -13141,7 +14021,7 @@ a.tf-iconbtn {
 /* Tablet: asides move below the main column, nav labels and the page nav shrink to icons */
 @container tf-shell (max-width: 1180px) {
   .tf-sheet:not(.tf-sheet-2):not(.tf-sheet-nav) {
-    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr);
   }
   .tf-sheet-nav.tf-sheet-aside {
     grid-template-columns: 208px minmax(0, 1fr);
@@ -13149,6 +14029,13 @@ a.tf-iconbtn {
   .tf-sheet > .tf-main ~ :not(.tf-dock-float) {
     grid-column: 2;
   }
+  /* with the sidebar there is no rail column: asides go below the main column */
+  .tf-sheet.tf-sheet-norail:not(.tf-sheet-2) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .tf-sheet-norail > .tf-main ~ :not(.tf-dock-float) {
+    grid-column: 1;
+  }
   /* the dock floats over the end of the sheet, not of the main column (asides follow it) */
   .tf-main-dock {
     padding-bottom: 0;
@@ -13179,7 +14066,7 @@ a.tf-iconbtn {
 @container tf-shell (max-width: 1040px) {
   .tf-sheet-nav,
   .tf-sheet-nav.tf-sheet-aside {
-    grid-template-columns: 44px minmax(0, 1fr);
+    grid-template-columns: auto minmax(0, 1fr);
   }
   .tf-subnav-eyebrow {
     display: none;
@@ -13276,6 +14163,21 @@ a.tf-iconbtn {
   .tf-rail-group {
     flex-direction: row;
   }
+  /* on phones the rail is a row of icons, expanded or not */
+  .tf-rail.expanded {
+    width: auto;
+  }
+  .tf-rail.expanded .tf-rail-btn {
+    display: grid;
+    width: 40px;
+    padding: 0;
+  }
+  .tf-rail.expanded .tf-rail-label {
+    display: none;
+  }
+  .tf-rail.expanded .tf-dotcount {
+    position: absolute;
+  }
   .tf-main {
     gap: var(--space-4);
   }
@@ -13367,6 +14269,56 @@ a.tf-iconbtn {
   max-width: 100%;
   overflow-x: auto;
 }
+/* Table stack: narrow boxes show every row as a card, each cell with its column label */
+.tf-table-stackbox {
+  container: tf-table / inline-size;
+}
+@container tf-table (max-width: 600px) {
+  .tf-table.stack thead {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+  }
+  .tf-table.stack,
+  .tf-table.stack tbody,
+  .tf-table.stack tr {
+    display: block;
+  }
+  .tf-table.stack tr {
+    padding: 8px 0;
+    border-bottom: 1px solid var(--line);
+  }
+  .tf-table.stack tr:last-child {
+    border-bottom: 0;
+  }
+  .tf-table.stack td {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    height: auto;
+    min-height: 32px;
+    padding: 4px 0;
+    border-bottom: 0;
+    text-align: right;
+    white-space: normal;
+  }
+  .tf-table.stack td::before {
+    content: attr(data-label);
+    flex: none;
+    max-width: 50%;
+    text-align: left;
+    font: 600 11px/14px var(--font-sans);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--ink-muted);
+  }
+  .tf-table.stack tbody tr:hover td {
+    background: transparent;
+  }
+}
 
 /* ── Phone: components ── */
 @media (max-width: 760px) {
@@ -13401,15 +14353,15 @@ a.tf-iconbtn {
     height: 52px;
   }
 
-  /* segmented controls and tabs scroll sideways when the labels do not fit */
-  .tf-seg,
-  .tf-tabs {
+  /* segmented controls and tabs scroll sideways when the labels do not fit (block ones shrink) */
+  .tf-seg:not(.block),
+  .tf-tabs:not(.tf-tabs-block) {
     max-width: 100%;
     overflow-x: auto;
     scrollbar-width: none;
   }
-  .tf-seg-item,
-  .tf-tab {
+  .tf-seg:not(.block) .tf-seg-item,
+  .tf-tabs:not(.tf-tabs-block) .tf-tab {
     flex: none;
   }
   .tf-seg,
@@ -13558,6 +14510,40 @@ a.tf-iconbtn {
   }
 }
 
+/* AppShell with a sidebar on phones: the sidebar's bar on top of the frame, the sheet below */
+@media (max-width: 760px) {
+  .tf-shell.tf-shell-sidebar {
+    grid-template-columns: minmax(0, 1fr);
+    padding: 0 8px 8px;
+  }
+}
+
+/* Fluid at every width: segmented controls, tabs and toggle groups never push past their
+   container. When space runs short the items shrink and their labels end in an ellipsis. */
+.tf-tabs {
+  max-width: 100%;
+  box-sizing: border-box;
+}
+.tf-seg-item,
+.tf-tab,
+.tf-togglegroup .tf-toggle {
+  min-width: 0;
+}
+.tf-seg-label,
+.tf-tab,
+.tf-toggle-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* key hints mean nothing on touch screens */
+@media (pointer: coarse) {
+  .tf-search .tf-kbd {
+    display: none;
+  }
+}
+
 /* 07-polish.css */
 /* ───────────── Polish ─────────────
    Small consistency fixes found by auditing every preview in both kits and themes. Zero
@@ -13987,11 +14973,13 @@ textarea.tf-input,
   inset: 0;
   z-index: 1;
   display: grid;
-  grid-template-columns: minmax(0, 320px) minmax(0, 1fr) minmax(0, 340px);
+  grid-template-columns:
+    minmax(0, var(--floating-start, 320px)) minmax(0, 1fr)
+    minmax(0, var(--floating-end, 340px));
   grid-template-rows: auto minmax(0, 1fr) auto;
   grid-template-areas:
     "top top top"
-    "start . end"
+    "start controls end"
     "bottom bottom bottom";
   gap: var(--space-4);
   padding: var(--space-4);
@@ -14022,6 +15010,32 @@ textarea.tf-input,
   grid-area: bottom;
   justify-self: center;
 }
+/* background controls and source notes: the free corner, clear of the panels and the dock */
+.tf-floating-ui > .tf-floating-controls {
+  grid-area: controls;
+  align-self: end;
+  justify-self: end;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--space-2);
+  pointer-events: none;
+}
+.tf-floating-controls > * {
+  pointer-events: auto;
+}
+.tf-floating-attribution {
+  max-width: 100%;
+  padding: 2px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-muted);
+  font: 500 11px/16px var(--font-sans);
+  overflow-wrap: anywhere;
+}
+.tf-floating-handle {
+  display: none;
+}
 .tf-floating-ui > :is(.tf-floating-top, .tf-floating-bottom) {
   pointer-events: none;
 }
@@ -14047,6 +15061,75 @@ textarea.tf-input,
     gap: var(--space-3);
     padding: var(--space-3);
   }
+  .tf-floating-ui > .tf-floating-controls {
+    grid-area: auto;
+    grid-row: 3;
+  }
+  /* the end slot as a bottom sheet over the background: a peek, or most of the height */
+  .tf-floating.has-sheet .tf-floating-ui {
+    grid-template-rows: auto auto minmax(120px, 1fr) auto;
+    grid-template-areas:
+      "top"
+      "start"
+      "."
+      "bottom";
+    padding-bottom: calc(var(--space-3) + 96px);
+  }
+  .tf-floating.has-sheet .tf-floating-end {
+    position: absolute;
+    left: var(--space-3);
+    right: var(--space-3);
+    bottom: 0;
+    z-index: 2;
+    max-height: 96px;
+    overflow: hidden;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    background: var(--surface);
+    box-shadow: var(--shadow-card);
+    transition: max-height var(--dur-base) var(--ease-out);
+  }
+  [data-surface="glass"].tf-floating.has-sheet .tf-floating-end {
+    background: var(--glass);
+    -webkit-backdrop-filter: var(--glass-filter);
+    backdrop-filter: var(--glass-filter);
+  }
+  .tf-floating.has-sheet.sheet-full .tf-floating-end {
+    max-height: 75%;
+    overflow-y: auto;
+  }
+  .tf-floating.has-sheet .tf-floating-handle {
+    display: block;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    width: 100%;
+    height: 24px;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    cursor: pointer;
+  }
+  .tf-floating.has-sheet .tf-floating-handle::before {
+    content: "";
+    display: block;
+    width: 40px;
+    height: 4px;
+    margin: 10px auto;
+    border-radius: var(--radius-pill);
+    background: var(--line-strong);
+  }
+  .tf-floating.has-sheet .tf-floating-handle:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: -2px;
+  }
+}
+
+/* in a glass layout the attribution is glass too */
+[data-surface="glass"] .tf-floating-attribution {
+  background: var(--glass);
+  -webkit-backdrop-filter: var(--glass-filter);
+  backdrop-filter: var(--glass-filter);
 }
 
 /* 09-motion.css */