@0001-labs/design-system-1 0.3.0-alpha.24 → 0.3.0-alpha.26

package/DS1/0-face/generated/toast-assets.ts

@@ -14,5 +14,5 @@ export const toastIcons: Readonly<Record<ToastIconName, string>> = {
   "check": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M6.68649 11.884L12.443 6.13601L11.736 5.42715L6.68835 10.4827L4.26399 8.0501L3.55696 8.74525L6.68649 11.884Z\" fill=\"currentColor\"/>\n</svg>\n",
   "close": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M12.1215 4.58087L8.70453 7.99397L12.1176 11.4169L11.4106 12.112L7.99847 8.69108L4.58636 12.112L3.87836 11.4031L7.29535 7.99005L3.88226 4.56716L4.58929 3.87201L8.0014 7.29294L11.4145 3.87201L12.1215 4.58087Z\" fill=\"currentColor\"/>\n</svg>\n",
   "notifications": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M4.5 11.5V7.5C4.5 5.567 6.067 4 8 4C9.933 4 11.5 5.567 11.5 7.5V11.5M3 11.5H13M8 2.5V4M6.5 13.5H9.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n</svg>\n",
-  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8ZM7.5 6.3H8.5V10.3H7.5V6.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"#1E1E1E\"/>\n</svg>\n",
+  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.5 3.3H8.5V10.3H7.5V3.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"currentColor\"/>\n</svg>\n",
 };

package/DS1/0-face/shared-words.ts

@@ -3,7 +3,8 @@
  * again, Undo, Redo, Copy, Copy link, Remove, Rename, Duplicate, Download,
  * Refresh, Open, Send, Clear), Saved, Saving…, Untitled, Account, sign-in,
  * empty states, dates, the settings ds-cycle shows, ds-notice's words, the
- * carousel's and slide's (Carousel, Slide, Previous slide, Next slide, Pause, Play…), the feedback module's (OK, Copied, Could not copy, Notifications), a meter's
+ * carousel's and slide's (Carousel, Slide, Previous slide, Next slide, Pause, Play…), a
+ * sheet's moving rows (Move row 3, Row 3 moved to 5), the feedback module's (OK, Copied, Could not copy, Notifications), a meter's
  * words ("7 of 10") and a step's (Done, Failed), the site chrome's (Menu,
  * Contents), the key names keys.ts writes as words (`key.ctrl`, `key.shift` …)
  * and the names of the languages. Keyed by the English sentence,

package/DS1/0-face/translations/da.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} af {count}",
     "Previous slide": "Forrige dias",
     "Next slide": "Næste dias",
+    "Move row {index}": "Flyt række {index}",
+    "Row {from} moved to {to}": "Række {from} flyttet til {to}",
     "Pause": "Pause",
     "Play": "Afspil",
     "Menu": "Menu",

package/DS1/0-face/translations/de.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} von {count}",
     "Previous slide": "Vorherige Folie",
     "Next slide": "Nächste Folie",
+    "Move row {index}": "Zeile {index} verschieben",
+    "Row {from} moved to {to}": "Zeile {from} nach {to} verschoben",
     "Pause": "Pause",
     "Play": "Abspielen",
     "Menu": "Menü",

package/DS1/0-face/translations/en.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} of {count}",
     "Previous slide": "Previous slide",
     "Next slide": "Next slide",
+    "Move row {index}": "Move row {index}",
+    "Row {from} moved to {to}": "Row {from} moved to {to}",
     "Pause": "Pause",
     "Play": "Play",
     "Menu": "Menu",

package/DS1/0-face/translations/es.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} de {count}",
     "Previous slide": "Diapositiva anterior",
     "Next slide": "Diapositiva siguiente",
+    "Move row {index}": "Mover fila {index}",
+    "Row {from} moved to {to}": "Fila {from} movida a {to}",
     "Pause": "Pausar",
     "Play": "Reproducir",
     "Menu": "Menú",

package/DS1/0-face/translations/fi.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index}/{count}",
     "Previous slide": "Edellinen dia",
     "Next slide": "Seuraava dia",
+    "Move row {index}": "Siirrä riviä {index}",
+    "Row {from} moved to {to}": "Rivi {from} siirretty kohtaan {to}",
     "Pause": "Tauko",
     "Play": "Toista",
     "Menu": "Valikko",

package/DS1/0-face/translations/fr.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} sur {count}",
     "Previous slide": "Diapositive précédente",
     "Next slide": "Diapositive suivante",
+    "Move row {index}": "Déplacer la ligne {index}",
+    "Row {from} moved to {to}": "Ligne {from} déplacée en {to}",
     "Pause": "Pause",
     "Play": "Lecture",
     "Menu": "Menu",

package/DS1/0-face/translations/is.json

@@ -85,6 +85,8 @@
     "{index} of {count}": "{index} af {count}",
     "Previous slide": "Fyrri glæra",
     "Next slide": "Næsta glæra",
+    "Move row {index}": "Færa röð {index}",
+    "Row {from} moved to {to}": "Röð {from} færð í {to}",
     "Pause": "Gera hlé",
     "Play": "Spila",
     "Menu": "Valmynd",

package/DS1/0-face/translations/it.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} di {count}",
     "Previous slide": "Slide precedente",
     "Next slide": "Slide successiva",
+    "Move row {index}": "Sposta la riga {index}",
+    "Row {from} moved to {to}": "Riga {from} spostata in {to}",
     "Pause": "Pausa",
     "Play": "Riproduci",
     "Menu": "Menu",

package/DS1/0-face/translations/ja.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{count} 枚中 {index} 枚目",
     "Previous slide": "前のスライド",
     "Next slide": "次のスライド",
+    "Move row {index}": "{index} 行目を移動",
+    "Row {from} moved to {to}": "{from} 行目を {to} 行目に移動しました",
     "Pause": "一時停止",
     "Play": "再生",
     "Menu": "メニュー",

package/DS1/0-face/translations/ko.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{count}개 중 {index}번째",
     "Previous slide": "이전 슬라이드",
     "Next slide": "다음 슬라이드",
+    "Move row {index}": "{index}행 이동",
+    "Row {from} moved to {to}": "{from}행을 {to}행으로 이동함",
     "Pause": "일시정지",
     "Play": "재생",
     "Menu": "메뉴",

package/DS1/0-face/translations/nb.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} av {count}",
     "Previous slide": "Forrige lysbilde",
     "Next slide": "Neste lysbilde",
+    "Move row {index}": "Flytt rad {index}",
+    "Row {from} moved to {to}": "Rad {from} flyttet til {to}",
     "Pause": "Pause",
     "Play": "Spill av",
     "Menu": "Meny",

package/DS1/0-face/translations/pt-BR.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} de {count}",
     "Previous slide": "Slide anterior",
     "Next slide": "Próximo slide",
+    "Move row {index}": "Mover linha {index}",
+    "Row {from} moved to {to}": "Linha {from} movida para {to}",
     "Pause": "Pausar",
     "Play": "Reproduzir",
     "Menu": "Menu",

package/DS1/0-face/translations/pt.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} de {count}",
     "Previous slide": "Diapositivo anterior",
     "Next slide": "Diapositivo seguinte",
+    "Move row {index}": "Mover linha {index}",
+    "Row {from} moved to {to}": "Linha {from} movida para {to}",
     "Pause": "Pausar",
     "Play": "Reproduzir",
     "Menu": "Menu",

package/DS1/0-face/translations/sv.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "{index} av {count}",
     "Previous slide": "Föregående bild",
     "Next slide": "Nästa bild",
+    "Move row {index}": "Flytta rad {index}",
+    "Row {from} moved to {to}": "Rad {from} flyttad till {to}",
     "Pause": "Pausa",
     "Play": "Spela upp",
     "Menu": "Meny",

package/DS1/0-face/translations/zh.json

@@ -92,6 +92,8 @@
     "{index} of {count}": "第 {index} 张，共 {count} 张",
     "Previous slide": "上一张",
     "Next slide": "下一张",
+    "Move row {index}": "移动第 {index} 行",
+    "Row {from} moved to {to}": "第 {from} 行已移到第 {to} 行",
     "Pause": "暂停",
     "Play": "播放",
     "Menu": "菜单",

package/DS1/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.24 */
+/* version 0.3.0-alpha.26 */
 
 /* Noto Sans for Japanese and Chinese, for a product that shows them. Opt in:
    link it beside one.css or fonts.css, or ask Sync 1 for "cjk": true. Without

package/DS1/1-root/fonts.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.24 */
+/* version 0.3.0-alpha.26 */
 
 /* Design system 1's faces and the typeface tokens that name them, on their
    own: a page that does not load one.css links this sheet (one.css imports

package/DS1/1-root/notice.css

@@ -12,7 +12,7 @@
  * the danger colour. The `ds-notice` element draws the same parts.
  *
  *   ds-notice                       the block: mark, words, dismiss
- *   ds-notice__mark                 the square mark; holds an icon in its ink
+ *   ds-notice__mark                 the mark, a picture's 4px corners; holds an icon in its ink
  *   ds-notice__title                one line in the medium face
  *   ds-notice__text                 lines of one square
  *   ds-notice__actions              buttons or links on one row
@@ -84,6 +84,9 @@
   height: var(--ds-control-height);
   margin-block: calc((var(--ds-unit) - var(--ds-control-height)) / 2);
   overflow: hidden;
+  /* Rounded as every icon tile is (Joachim, 19 October 2026). */
+  border-radius: var(--ds-radius);
+  corner-shape: var(--ds-corner-shape, round);
   background: var(--ds-notice-mark);
   color: var(--ds-notice-mark-ink);
   --ds-icon-color: var(--ds-notice-mark-ink);

package/DS1/1-root/one.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.24 */
+/* version 0.3.0-alpha.26 */
 
 @import "./grid.css";
 @import "./component-tokens.css";

package/DS1/1-root/one.semantic.css

@@ -1,4 +1,4 @@
-/* DS1 — version 0.3.0-alpha.24 */
+/* DS1 — version 0.3.0-alpha.26 */
 /* A classless stylesheet for native HTML. No JavaScript is required. */
 
 /* It draws on Design system 1's measures: the 20px square, 14px type on

package/DS1/1-root/table.css

@@ -19,11 +19,25 @@
  *
  * `data-sheet` makes it a spreadsheet: every cell four squares by one (80 by
  * 20), its 1px lines at its end and foot so the words have 79 by 19, set 4px
- * in on the sixteen, as an Ezo item's are. Column letters and the row numbers
+ * in on the sixteen. Words that do not fit fade out over the last square
+ * where they are cut, never an ellipsis: put them in `.ds-table__words`,
+ * which carries the fade (a mask, so it fades to whatever is behind: the
+ * paper, a selected or hovered cell's fill). A table marked `data-fit`
+ * (`<ds-table sheet>` is) measures its cells and marks the cut ones
+ * `data-cut="end"`, or `"start"` for a number it has scrolled to its end, so
+ * words that fit never fade; without it every cell's end fades. Column letters and the row numbers
  * (`.ds-table__letters`, `.ds-table__number`, two squares wide) stay in place
  * while the sheet scrolls both ways inside `.ds-table-scroll`; give the table
  * `--ds-table-columns` (the number of data columns) and the scroll a height
  * with `--ds-table-height`.
+ *
+ * `data-reorderable` (set by `<ds-table sheet reorderable>`) gives each row
+ * number a grip, `.ds-table__handle` with the `handle` icon, in place of the
+ * number while the row is hovered or the grip focused. A lifted row
+ * (`tr[data-lifted]`) keeps the paper behind it and follows the pointer; while
+ * `data-moving` is on the table the other rows step aside in transform alone,
+ * a sortable list's 200ms on cubic-bezier(0.2, 0, 0, 1), and never under
+ * reduced motion.
  */
 
 .ds-table {
@@ -153,11 +167,29 @@
   border-bottom: 1px solid var(--ds-table-rule);
   border-inline-end: 1px solid var(--ds-table-rule);
   overflow: hidden;
-  text-overflow: ellipsis;
 }
 .ds-table[data-sheet] :is(th, td):last-child {
   padding-inline-end: var(--ds-table-text);
 }
+.ds-table[data-sheet] .ds-table__words {
+  --ds-table-fade-to: right;
+  --ds-table-fade-from: left;
+  display: block;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.ds-table[data-sheet]:dir(rtl) .ds-table__words {
+  --ds-table-fade-to: left;
+  --ds-table-fade-from: right;
+}
+/* Cut words fade over their last square to nothing, at the edge where they are cut. */
+.ds-table[data-sheet]:not([data-fit]) .ds-table__words,
+.ds-table[data-sheet] .ds-table__words[data-cut="end"] {
+  mask-image: linear-gradient(to var(--ds-table-fade-to), #000 calc(100% - var(--ds-table-row)), transparent);
+}
+.ds-table[data-sheet] .ds-table__words[data-cut="start"] {
+  mask-image: linear-gradient(to var(--ds-table-fade-from), #000 calc(100% - var(--ds-table-row)), transparent);
+}
 .ds-table[data-sheet] .ds-table__number {
   width: var(--ds-table-index);
   max-width: var(--ds-table-index);
@@ -172,14 +204,14 @@
 .ds-table[data-sheet] thead :is(th, td) {
   position: sticky;
   top: 0;
-  z-index: 2;
+  z-index: 3;
   background: var(--ds-table-paper);
 }
 .ds-table[data-sheet] thead tr + tr :is(th, td) {
   top: var(--ds-table-row);
 }
 .ds-table[data-sheet] thead .ds-table__number {
-  z-index: 3;
+  z-index: 4;
 }
 .ds-table[data-sheet] .ds-table__letters td {
   color: var(--ds-title-color, light-dark(#797979, #9a9a9a));
@@ -198,3 +230,68 @@
   overflow: auto;
   overscroll-behavior: contain;
 }
+
+/* Rows that move: a grip on the number, the lifted row on paper, the others stepping aside. */
+.ds-table[data-sheet][data-reorderable] tbody .ds-table__number {
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-touch-callout: none;
+}
+.ds-table__index {
+  transition: opacity 100ms ease;
+}
+.ds-table__handle {
+  all: unset;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  color: var(--ds-reorder-color, light-dark(#777777, #cccccc));
+  cursor: grab;
+  opacity: 0;
+  transition: opacity 100ms ease;
+}
+.ds-table__handle:hover {
+  color: var(--ds-reorder-active-color, light-dark(#333333, #ffffff));
+}
+.ds-table__handle:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--ds-focus-ring, Highlight);
+}
+@media (hover: hover) {
+  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__handle { opacity: 1; }
+  .ds-table[data-reorderable]:not([data-moving]) tbody tr:hover .ds-table__index { opacity: 0; }
+}
+.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__handle { opacity: 1; }
+.ds-table[data-reorderable] tbody tr:is([data-lifted], :has(.ds-table__handle:focus-visible)) .ds-table__index { opacity: 0; }
+.ds-table[data-moving] tbody tr {
+  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
+}
+.ds-table[data-moving],
+.ds-table[data-moving] * {
+  cursor: grabbing;
+}
+.ds-table[data-sheet] tbody tr[data-lifted] {
+  position: relative;
+  z-index: 2;
+  transition: none;
+}
+.ds-table[data-sheet] tbody tr[data-lifted] > :is(th, td) {
+  background: var(--ds-table-paper);
+  box-shadow: inset 0 1px var(--ds-table-rule);
+}
+.ds-table__status {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+@media (prefers-reduced-motion: reduce) {
+  .ds-table[data-moving] tbody tr,
+  .ds-table__index,
+  .ds-table__handle {
+    transition: none;
+  }
+}

package/DS1/2-core/ds-tooltip.ts

@@ -100,7 +100,29 @@ export class Tooltip extends LitElement {
     trigger.setAttribute("aria-describedby", [...ids, this.description.id].join(" "));
   };
 
-  updated(): void { this.describe(); }
+  updated(): void {
+    this.describe();
+    if (this._visible) this.place();
+  }
+
+  /**
+   * Keeps the bubble inside the window, as the page's tooltips do (0-face/tooltips.ts): four
+   * pixels from its edges, and below the control when there is no room above (or above when
+   * `placement="bottom"` has no room below). A tooltip at a frame's edge is never cut short.
+   */
+  private place(): void {
+    const bubble = this.shadowRoot?.querySelector<HTMLElement>(".bubble");
+    if (!bubble || bubble.hidden) return;
+    const edge = 4 * (parseFloat(getComputedStyle(this).getPropertyValue("--ds-sf")) || 1);
+    bubble.style.removeProperty("--ds-tooltip-shift");
+    bubble.dataset.side = this.placement === "bottom" ? "bottom" : "top";
+    let box = bubble.getBoundingClientRect();
+    if (bubble.dataset.side === "top" && box.top < edge) bubble.dataset.side = "bottom";
+    else if (bubble.dataset.side === "bottom" && box.bottom > innerHeight - edge) bubble.dataset.side = "top";
+    box = bubble.getBoundingClientRect();
+    const shift = box.left < edge ? edge - box.left : box.right > innerWidth - edge ? innerWidth - edge - box.right : 0;
+    if (shift) bubble.style.setProperty("--ds-tooltip-shift", `${shift}px`);
+  }
 
   render() {
     return html`<slot @slotchange=${this.describe}></slot>

package/DS1/2-core/generated/ds-icon-map.ts

@@ -322,7 +322,6 @@ export const iconNameToSvgMap = {
   "toggle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 5L7.5 8L3 11Z\" fill=\"currentColor\"/>\n<path d=\"M9.5 7.5H13.5V8.5H9.5Z\" fill=\"currentColor\"/>\n</svg>",
   "train": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3.25\" y=\"1.75\" width=\"9.5\" height=\"9.5\" rx=\"2.25\"/><path d=\"M3.25 7H12.75\"/><path d=\"M5.75 9.25H5.76M10.24 9.25H10.25\"/><path d=\"M5.25 11.25L3.75 14M10.75 11.25L12.25 14\"/></g>\n</svg>",
   "transfer": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 5.5H12.5M10 3L12.5 5.5L10 8\"/><path d=\"M13 10.5H3.5M6 8L3.5 10.5L6 13\"/></g>\n</svg>",
-  "triangle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "tv": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"1.75\" y=\"3.25\" width=\"12.5\" height=\"8.5\" rx=\"1.75\"/><path d=\"M5.5 13.75H10.5\"/><path d=\"M7 6V9L9.5 7.5Z\"/></g>\n</svg>",
   "underline": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5.5 3.25V8A2.5 2.5 0 0 0 10.5 8V3.25M4 12.75H12\" stroke=\"currentColor\" stroke-width=\"1.1\"/>\n</svg>",
   "undo": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 4L4 1M1 4L4 7M1 4H8C9.65685 4 11 5.34315 11 7V9\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n</svg></svg>",
@@ -341,7 +340,7 @@ export const iconNameToSvgMap = {
   "views": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"7\" cy=\"7\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n<path d=\"M10.2 10.2L13.5 13.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n</svg>",
   "vimeo": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1 1.5 3c-1.052 2 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5\"/>\n</svg></svg>",
   "wallet": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.25 5.25V4.25C12.25 3.7 11.8 3.25 11.25 3.25H3.75C2.92 3.25 2.25 3.92 2.25 4.75\"/><rect x=\"2.25\" y=\"4.75\" width=\"11.5\" height=\"8\" rx=\"1.75\"/><path d=\"M13.75 7.5H11.25C10.42 7.5 9.75 8.17 9.75 9C9.75 9.83 10.42 10.5 11.25 10.5H13.75\"/></g>\n</svg>",
-  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8ZM7.5 6.3H8.5V10.3H7.5V6.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"#1E1E1E\"/>\n</svg>",
+  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.5 3.3H8.5V10.3H7.5V3.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"currentColor\"/>\n</svg>",
   "wifi": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1.75 6.25C5.2 3.25 10.8 3.25 14.25 6.25\"/><path d=\"M3.75 8.5C6.2 6.5 9.8 6.5 12.25 8.5\"/><path d=\"M5.75 10.75C7.05 9.75 8.95 9.75 10.25 10.75\"/><path d=\"M8 12.99V13\"/></g>\n</svg>",
   "window": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"2.5\" y=\"3.5\" width=\"11\" height=\"9\" stroke=\"currentColor\"/>\n<path d=\"M2.5 6H13.5\" stroke=\"currentColor\"/>\n</svg>",
   "work": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.8153 4.78289C13.8153 4.20267 13.3448 3.73213 12.7646 3.73213H8H3.23544C2.65521 3.73213 2.18468 4.20267 2.18468 4.78289V7.31419H13.8153L13.8153 4.78289ZM2.18468 8V11.2171C2.18468 11.7973 2.65521 12.2679 3.23544 12.2679H12.7646C13.3448 12.2679 13.8153 11.7973 13.8153 11.2171L13.8153 8L9.33239 7.98014V8.63222C9.33239 8.92233 9.09712 9.1576 8.807 9.1576H8H7.19299C6.90287 9.1576 6.66761 8.92233 6.66761 8.63222V7.98014L2.18468 8Z\" fill=\"currentColor\"/>\n</svg>",
@@ -670,7 +669,6 @@ export const iconNames = [
   "toggle",
   "train",
   "transfer",
-  "triangle",
   "tv",
   "underline",
   "undo",

package/DS1/2-core/generated/icons-extra.ts

@@ -278,7 +278,6 @@ export const icons: Readonly<Record<string, string>> = {
   "toggle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 5L7.5 8L3 11Z\" fill=\"currentColor\"/>\n<path d=\"M9.5 7.5H13.5V8.5H9.5Z\" fill=\"currentColor\"/>\n</svg>",
   "train": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3.25\" y=\"1.75\" width=\"9.5\" height=\"9.5\" rx=\"2.25\"/><path d=\"M3.25 7H12.75\"/><path d=\"M5.75 9.25H5.76M10.24 9.25H10.25\"/><path d=\"M5.25 11.25L3.75 14M10.75 11.25L12.25 14\"/></g>\n</svg>",
   "transfer": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 5.5H12.5M10 3L12.5 5.5L10 8\"/><path d=\"M13 10.5H3.5M6 8L3.5 10.5L6 13\"/></g>\n</svg>",
-  "triangle": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8Z\" fill=\"#1E1E1E\"/>\n</svg>",
   "tv": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"1.75\" y=\"3.25\" width=\"12.5\" height=\"8.5\" rx=\"1.75\"/><path d=\"M5.5 13.75H10.5\"/><path d=\"M7 6V9L9.5 7.5Z\"/></g>\n</svg>",
   "underline": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M5.5 3.25V8A2.5 2.5 0 0 0 10.5 8V3.25M4 12.75H12\" stroke=\"currentColor\" stroke-width=\"1.1\"/>\n</svg>",
   "undo": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 12 10\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M1 4L4 1M1 4L4 7M1 4H8C9.65685 4 11 5.34315 11 7V9\" stroke=\"currentColor\" stroke-width=\"1.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" fill=\"none\"/>\n</svg></svg>",
@@ -291,7 +290,7 @@ export const icons: Readonly<Record<string, string>> = {
   "video": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"2.5\" y=\"4.5\" width=\"8\" height=\"7\" stroke=\"currentColor\"/>\n<path d=\"M10.5 7L13.5 5V11L10.5 9\" stroke=\"currentColor\"/>\n</svg>",
   "vimeo": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\"><svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M3 8.5l1 1s1.5 -1.102 2 -.5c.509 .609 1.863 7.65 2.5 9c.556 1.184 1.978 2.89 4 1.5c2 -1.5 7.5 -5.5 8.5 -11.5c.444 -2.661 -1 -4 -2.5 -4c-2 0 -4.047 1.202 -4.5 4c2.05 -1.254 2.551 1 1.5 3c-1.052 2 -2 3 -2.5 3c-.49 0 -.924 -1.165 -1.5 -3.5c-.59 -2.42 -.5 -6.5 -3 -6.5s-5.5 4.5 -5.5 4.5\"/>\n</svg></svg>",
   "wallet": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12.25 5.25V4.25C12.25 3.7 11.8 3.25 11.25 3.25H3.75C2.92 3.25 2.25 3.92 2.25 4.75\"/><rect x=\"2.25\" y=\"4.75\" width=\"11.5\" height=\"8\" rx=\"1.75\"/><path d=\"M13.75 7.5H11.25C10.42 7.5 9.75 8.17 9.75 9C9.75 9.83 10.42 10.5 11.25 10.5H13.75\"/></g>\n</svg>",
-  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8 1.8L15.2 14.3H0.8L8 1.8ZM8 3.8L2.53 13.3H13.47L8 3.8ZM7.5 6.3H8.5V10.3H7.5V6.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"#1E1E1E\"/>\n</svg>",
+  "warning": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.5 3.3H8.5V10.3H7.5V3.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z\" fill=\"currentColor\"/>\n</svg>",
   "wifi": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<g stroke=\"currentColor\" stroke-width=\"0.92\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M1.75 6.25C5.2 3.25 10.8 3.25 14.25 6.25\"/><path d=\"M3.75 8.5C6.2 6.5 9.8 6.5 12.25 8.5\"/><path d=\"M5.75 10.75C7.05 9.75 8.95 9.75 10.25 10.75\"/><path d=\"M8 12.99V13\"/></g>\n</svg>",
   "window": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<rect x=\"2.5\" y=\"3.5\" width=\"11\" height=\"9\" stroke=\"currentColor\"/>\n<path d=\"M2.5 6H13.5\" stroke=\"currentColor\"/>\n</svg>",
   "work": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.8153 4.78289C13.8153 4.20267 13.3448 3.73213 12.7646 3.73213H8H3.23544C2.65521 3.73213 2.18468 4.20267 2.18468 4.78289V7.31419H13.8153L13.8153 4.78289ZM2.18468 8V11.2171C2.18468 11.7973 2.65521 12.2679 3.23544 12.2679H12.7646C13.3448 12.2679 13.8153 11.7973 13.8153 11.2171L13.8153 8L9.33239 7.98014V8.63222C9.33239 8.92233 9.09712 9.1576 8.807 9.1576H8H7.19299C6.90287 9.1576 6.66761 8.92233 6.66761 8.63222V7.98014L2.18468 8Z\" fill=\"currentColor\"/>\n</svg>",

package/DS1/2-core/generated/icons-immediate.ts

@@ -46,4 +46,4 @@ export const icons: Readonly<Record<string, string>> = {
   "up": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M7.49645 3.48222V16H8.50702L8.50841 3.48259L11.4156 6.38982L12.1095 5.68299L8.00173 1.57524L3.8905 5.68647L4.59784 6.39381L7.49645 3.48222Z\" fill=\"currentColor\"/>\n</svg>",
   "views": "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<circle cx=\"7\" cy=\"7\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n<path d=\"M10.2 10.2L13.5 13.5\" stroke=\"currentColor\" stroke-width=\"0.92\"/>\n</svg>"
 }
-export const deferredIconNames = ["1x","1xdots","1xgrid","1xlines","2x","2xdots","2xgrid","2xgrid-alt","2xgrid-alt-2","2xgrid-alt-3","2xlines","4x4","airtable","archive-alt","arrange-archive","arrange-check","arrange-chevron","arrange-connect","arrange-draft","arrange-dropdown","arrange-home","arrange-link","arrange-menu","arrange-more","arrange-page","arrange-plus","arrange-site","attach","audio","avatar","badge-bands","badge-bands-3d","badge-blue-fan","badge-blue-fan-3d","badge-bricks","badge-bricks-3d","badge-broken-stripes","badge-broken-stripes-3d","badge-checker","badge-checker-3d","badge-diamond","badge-diamond-3d","badge-fan","badge-fan-3d","badge-fan-dark","badge-fan-dark-3d","badge-halves","badge-halves-3d","badge-halves-green","badge-halves-green-3d","badge-red","badge-red-3d","badge-red-blue-bricks","badge-red-blue-bricks-3d","badge-round-fan","badge-round-fan-3d","badge-shard","badge-shard-3d","badge-split-circle","badge-split-circle-3d","badge-tall-bricks","badge-tall-bricks-3d","badge-weave","badge-weave-3d","bag-alt","bank","banknote","block-accordion","block-banner","block-breadcrumbs","block-button","block-divider","block-forms","block-group","block-heading","block-image","block-logo-marquee","block-page-progress","block-section","block-table","block-tabs","block-text","bold","bolt","book","book-alt","box","briefcase","building","bullet","callout","car","card","cart","categories","check-alt","chevron-down","chevron-left","chevron-right","chevron-up","cloud","code","code-block","coffee","coins","color","column","comment","connect","content","cursor","curve","default","dictate","dislike","divider","dot-bank","dot-banknote","dot-banknotes","dot-card","dot-coin","dot-coins","dot-happy","dot-neutral","dot-receipt","dot-sad","dot-safe","dot-transfer","dot-wallet","download","drive","drop","dropbox","dumbbell","equation","exercise","eye","eye-off","facebook","figma","flame","flip","food","form","fuel","gallery","game","gift","github","globe","group","group-alt","group-alt-2","h1","h2","h3","handle","head","heart","help","help-alt","history","home-alt","icon","image","in","income","indent","info","instagram","italic","item","jpbank","key","keyboard","life","like","link","linkedin","list-line","lock-filled","logo-marquee","loom","map","medical","mention","menu","minimize","minimize-alt","minus","money","moon","move","music","music-alt","navigation-check","note-alt","note-alt-2","note-lines","notifications","notion","numbered","offline","open-alt","open-source","outdent","page","page-18","page-alt","page-note","panel","password-see","password-unsee","pattern-call-to-action","pattern-card","pattern-feature","pattern-hero","pause","paw","pdf","people","percent","phone","pill","plane","play-alt","postal","present","quote","reaction","receipt","redo","refresh","refund","relationships","repeat","rewind","rewind-30","rewind-30-alt","rotate","row","safe","school","school-alt","search-30","see-30","settings","shield","shield-alt","shirt","shop","sign-in","sign-out","slack","slash","sparkle","star-alt","star-alt-2","start","status","status-alt","status-filled","stop","strike","sun","system","table","tag","templates","text","ticket","title","title-struck","titlestyle","todo","toggle","train","transfer","triangle","tv","underline","undo","ungroup","unhead","unicon","untitle","up-right","upload","video","vimeo","wallet","warning","wifi","window","work","wrench","x-brand","youtube"] as const
+export const deferredIconNames = ["1x","1xdots","1xgrid","1xlines","2x","2xdots","2xgrid","2xgrid-alt","2xgrid-alt-2","2xgrid-alt-3","2xlines","4x4","airtable","archive-alt","arrange-archive","arrange-check","arrange-chevron","arrange-connect","arrange-draft","arrange-dropdown","arrange-home","arrange-link","arrange-menu","arrange-more","arrange-page","arrange-plus","arrange-site","attach","audio","avatar","badge-bands","badge-bands-3d","badge-blue-fan","badge-blue-fan-3d","badge-bricks","badge-bricks-3d","badge-broken-stripes","badge-broken-stripes-3d","badge-checker","badge-checker-3d","badge-diamond","badge-diamond-3d","badge-fan","badge-fan-3d","badge-fan-dark","badge-fan-dark-3d","badge-halves","badge-halves-3d","badge-halves-green","badge-halves-green-3d","badge-red","badge-red-3d","badge-red-blue-bricks","badge-red-blue-bricks-3d","badge-round-fan","badge-round-fan-3d","badge-shard","badge-shard-3d","badge-split-circle","badge-split-circle-3d","badge-tall-bricks","badge-tall-bricks-3d","badge-weave","badge-weave-3d","bag-alt","bank","banknote","block-accordion","block-banner","block-breadcrumbs","block-button","block-divider","block-forms","block-group","block-heading","block-image","block-logo-marquee","block-page-progress","block-section","block-table","block-tabs","block-text","bold","bolt","book","book-alt","box","briefcase","building","bullet","callout","car","card","cart","categories","check-alt","chevron-down","chevron-left","chevron-right","chevron-up","cloud","code","code-block","coffee","coins","color","column","comment","connect","content","cursor","curve","default","dictate","dislike","divider","dot-bank","dot-banknote","dot-banknotes","dot-card","dot-coin","dot-coins","dot-happy","dot-neutral","dot-receipt","dot-sad","dot-safe","dot-transfer","dot-wallet","download","drive","drop","dropbox","dumbbell","equation","exercise","eye","eye-off","facebook","figma","flame","flip","food","form","fuel","gallery","game","gift","github","globe","group","group-alt","group-alt-2","h1","h2","h3","handle","head","heart","help","help-alt","history","home-alt","icon","image","in","income","indent","info","instagram","italic","item","jpbank","key","keyboard","life","like","link","linkedin","list-line","lock-filled","logo-marquee","loom","map","medical","mention","menu","minimize","minimize-alt","minus","money","moon","move","music","music-alt","navigation-check","note-alt","note-alt-2","note-lines","notifications","notion","numbered","offline","open-alt","open-source","outdent","page","page-18","page-alt","page-note","panel","password-see","password-unsee","pattern-call-to-action","pattern-card","pattern-feature","pattern-hero","pause","paw","pdf","people","percent","phone","pill","plane","play-alt","postal","present","quote","reaction","receipt","redo","refresh","refund","relationships","repeat","rewind","rewind-30","rewind-30-alt","rotate","row","safe","school","school-alt","search-30","see-30","settings","shield","shield-alt","shirt","shop","sign-in","sign-out","slack","slash","sparkle","star-alt","star-alt-2","start","status","status-alt","status-filled","stop","strike","sun","system","table","tag","templates","text","ticket","title","title-struck","titlestyle","todo","toggle","train","transfer","tv","underline","undo","ungroup","unhead","unicon","untitle","up-right","upload","video","vimeo","wallet","warning","wifi","window","work","wrench","x-brand","youtube"] as const

package/DS1/2-core/styles/ds-tooltip.css

@@ -10,7 +10,8 @@
   position: absolute;
   left: 50%;
   bottom: calc(100% + 2px * var(--ds-sf, var(--sf, 1)));
-  transform: translateX(-50%);
+  /* Centred over its control, shifted to stay four pixels inside the window (ds-tooltip.ts). */
+  transform: translateX(calc(-50% + var(--ds-tooltip-shift, 0px)));
   z-index: var(--ds-tooltip-z-index, 1000);
   width: max-content;
   max-width: min(calc(320px * var(--ds-sf, var(--sf, 1))), calc(100vw - 20px));
@@ -32,7 +33,7 @@
 
 .bubble[hidden] { display: none; }
 
-:host([placement="bottom"]) .bubble {
+.bubble[data-side="bottom"] {
   bottom: auto;
   top: calc(100% + 2px * var(--ds-sf, var(--sf, 1)));
 }