@0001-labs/design-system-1 0.3.0-alpha.25 → 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/1-root/cjk.css

@@ -1,4 +1,4 @@
-/* version 0.3.0-alpha.25 */
+/* 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.25 */
+/* 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.25 */
+/* 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.25 */
+/* 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,7 +19,13 @@
  *
  * `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
@@ -161,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);

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)));
 }

package/DS1/3-unit/ds-table.ts

@@ -4,7 +4,8 @@
 // `sheet` it is a spreadsheet: every cell four squares by one, lettered
 // columns and numbered rows held in place while it scrolls both ways, and with
 // `reorderable` its rows move by the grip on their number: dragged with a
-// mouse, after a long press on a touch screen, or with Alt+↑/↓.
+// mouse, after a long press on a touch screen, or with Alt+↑/↓. A sheet's
+// words that do not fit fade out over their last square, never an ellipsis.
 
 import { LitElement, html, nothing, unsafeCSS, type PropertyValues } from "lit";
 import { getText } from "../0-face/i18n";
@@ -102,6 +103,9 @@ export class DsTable extends LitElement {
   /** A move waiting for the page's data, and the time it settles back without it. */
   private settle: { from: number; to: number; timer: ReturnType<typeof setTimeout> } | undefined;
   private status = "";
+  /** Measures the cells again when the sheet's size changes, as its scale does. */
+  private resize: ResizeObserver | undefined;
+  private watched: Element | undefined;
 
   constructor() {
     super();
@@ -114,8 +118,16 @@ export class DsTable extends LitElement {
 
   static styles = [unsafeCSS(metrics), unsafeCSS(table), unsafeCSS(styles)];
 
+  connectedCallback() {
+    super.connectedCallback();
+    // The faces may arrive after the first measure and change every width.
+    void document.fonts?.ready.then(() => { if (this.isConnected && this.sheet) this.fit(); });
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback();
+    this.resize?.disconnect();
+    this.watched = undefined;
     this.release();
     if (this.settle) clearTimeout(this.settle.timer);
     this.settle = undefined;
@@ -128,6 +140,42 @@ export class DsTable extends LitElement {
     if (this.grip >= this.data.length) this.grip = Math.max(0, this.data.length - 1);
   }
 
+  protected updated(changed: PropertyValues<this>) {
+    super.updated(changed);
+    if (!this.sheet) return;
+    // Before the first paint, so words that fit never show a fade.
+    if (["data", "columns", "footer", "sheet"].some(name => changed.has(name as keyof DsTable))) this.fit();
+    const table = this.table;
+    if (!table || table === this.watched || typeof ResizeObserver === "undefined") return;
+    this.resize ??= new ResizeObserver(() => this.fit());
+    this.resize.disconnect();
+    this.resize.observe(table);
+    this.watched = table;
+  }
+
+  /**
+   * Marks the cells whose words are cut, so only they fade where they are
+   * cut; a label fades at its end. A number always shows its last digits and loses its first: in a
+   * left-to-right sheet it is scrolled to its end and fades at its start;
+   * in a right-to-left one its digits already overflow on the left, the
+   * cell's end. All the reads come before any write, so it lays out once.
+   */
+  private fit() {
+    const words = [...this.renderRoot.querySelectorAll<HTMLElement>(".ds-table__words")];
+    if (!words.length) return;
+    const rtl = getComputedStyle(words[0]!).direction === "rtl";
+    const over = words.map(element => element.scrollWidth - element.clientWidth);
+    const scrolled = words.map((element, index) => !rtl && over[index]! > 0 && Boolean(element.parentElement?.matches("td[data-numeric]")));
+    words.forEach((element, index) => {
+      const left = scrolled[index] ? over[index]! : 0;
+      if (element.scrollLeft !== left) element.scrollLeft = left;
+    });
+    words.forEach((element, index) => {
+      const cut = over[index]! <= 0 ? undefined : scrolled[index] ? "start" : "end";
+      if (element.dataset.cut !== cut) { if (cut) element.dataset.cut = cut; else delete element.dataset.cut; }
+    });
+  }
+
   private resolvedColumns(): TableColumn[] {
     const named = this.columns.length > 0;
     const given = named
@@ -156,7 +204,7 @@ export class DsTable extends LitElement {
   private sheetRow(row: TableRow, columns: TableColumn[], number: string, index?: number) {
     const grip = this.reorderable && index !== undefined;
     return html`<tr><th scope="row" class="ds-table__number">${grip ? this.gripCell(number, index) : number}</th>${columns.map((column, index) =>
-      html`<td ?data-numeric=${column.numeric}>${text(cell(row, column.key, index))}</td>`)}</tr>`;
+      html`<td ?data-numeric=${column.numeric}><span class="ds-table__words">${text(cell(row, column.key, index))}</span></td>`)}</tr>`;
   }
 
   private gripCell(number: string, index: number) {
@@ -398,10 +446,10 @@ export class DsTable extends LitElement {
   private renderSheet(columns: TableColumn[]) {
     return html`
       <div class="ds-table-scroll" part="scroll" @pointerdown=${this.press} @touchmove=${{ handleEvent: this.holdTouch, passive: false }} @contextmenu=${this.holdMenu}>
-        <table class="ds-table" part="table" data-sheet ?data-reorderable=${this.reorderable} style=${`--ds-table-columns: ${columns.length}`} aria-label=${this.label ?? nothing}>
+        <table class="ds-table" part="table" data-sheet data-fit ?data-reorderable=${this.reorderable} style=${`--ds-table-columns: ${columns.length}`} aria-label=${this.label ?? nothing}>
           <thead>
             <tr class="ds-table__letters" aria-hidden="true"><td class="ds-table__number"></td>${columns.map((_, index) => html`<td>${columnLetter(index)}</td>`)}</tr>
-            <tr><td class="ds-table__number"></td>${columns.map(column => html`<th scope="col" ?data-numeric=${column.numeric}>${column.label}</th>`)}</tr>
+            <tr><td class="ds-table__number"></td>${columns.map(column => html`<th scope="col" ?data-numeric=${column.numeric}><span class="ds-table__words">${column.label}</span></th>`)}</tr>
           </thead>
           <tbody>${this.data.map((row, index) => this.sheetRow(row, columns, String(index + 1), index))}</tbody>
           ${this.footer ? html`<tfoot>${this.sheetRow(this.footer, columns, "")}</tfoot>` : nothing}

package/DS1/x-icon/warning.svg

@@ -1,3 +1,3 @@
 <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<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"/>
+<path d="M7.5 3.3H8.5V10.3H7.5V3.3ZM7.5 11.3H8.5V12.3H7.5V11.3Z" fill="currentColor"/>
 </svg>

package/dist/0-face/generated/toast-assets.js

@@ -10,5 +10,5 @@ export const toastIcons = {
     "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/dist/2-core/ds-tooltip.d.ts

@@ -38,6 +38,12 @@ export declare class Tooltip extends LitElement {
     private releaseDescription;
     private describe;
     updated(): void;
+    /**
+     * 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;
     render(): import("lit").TemplateResult<1>;
 }
 declare global {

package/dist/2-core/ds-tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-tooltip.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAOlD,6DAA6D;AAC7D,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;MAMf;IAEM,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;IACpC,QAAgB,QAAQ,CAAU;IAClC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAC,CAAc;IAC9B,OAAO,CAAC,WAAW,CAAC,CAAkB;;IAsBtC,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,eAAe,CAA8B;IAErD,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,KAAK,KAAK,GAKhB;IAED,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,QAAQ,CAgBd;IAEF,OAAO,IAAI,IAAI;IAEf,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,YAAY,EAAE,OAAO,CAAC;KAAE;CAC3D"}
+{"version":3,"file":"ds-tooltip.d.ts","sourceRoot":"","sources":["../../DS1/2-core/ds-tooltip.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,MAAM,KAAK,CAAC;AAOlD,6DAA6D;AAC7D,qBAAa,OAAQ,SAAQ,UAAU;IACrC,MAAM,CAAC,UAAU;;;;;;;;;;;;;;;;;;MAMf;IAEM,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,KAAK,GAAG,QAAQ,CAAC;IACpC,QAAgB,QAAQ,CAAU;IAClC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,OAAO,CAAC,CAAc;IAC9B,OAAO,CAAC,WAAW,CAAC,CAAkB;;IAsBtC,MAAM,CAAC,MAAM,0BAAqB;IAElC,OAAO,CAAC,eAAe,CAA8B;IAErD,iBAAiB,IAAI,IAAI;IAOzB,oBAAoB,IAAI,IAAI;IAQ5B,OAAO,KAAK,KAAK,GAKhB;IAED,OAAO,CAAC,kBAAkB;IAW1B,OAAO,CAAC,QAAQ,CAgBd;IAEF,OAAO,IAAI,IAAI;IAKf;;;;OAIG;IACH,OAAO,CAAC,KAAK;IAcb,MAAM;CAIP;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAAG,YAAY,EAAE,OAAO,CAAC;KAAE;CAC3D"}

package/dist/2-core/ds-tooltip.js

@@ -82,7 +82,33 @@ export class Tooltip extends LitElement {
             this.trigger.removeAttribute("aria-describedby");
         this.trigger = undefined;
     }
-    updated() { this.describe(); }
+    updated() {
+        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.
+     */
+    place() {
+        const bubble = this.shadowRoot?.querySelector(".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>
       <span class="bubble" role="tooltip" aria-hidden="true" ?hidden=${!this._visible || !this.label}>${this.label}</span>`;

package/dist/2-core/generated/ds-icon-map.d.ts

@@ -321,7 +321,6 @@ export declare const iconNameToSvgMap: {
     readonly 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>";
     readonly 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>";
     readonly 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>";
-    readonly 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>";
     readonly 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>";
     readonly 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>";
     readonly 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>";
@@ -340,7 +339,7 @@ export declare const iconNameToSvgMap: {
     readonly 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>";
     readonly 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>";
     readonly 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>";
-    readonly 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>";
+    readonly 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>";
     readonly 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>";
     readonly 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>";
     readonly 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>";
@@ -349,5 +348,5 @@ export declare const iconNameToSvgMap: {
     readonly youtube: "<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=\"M2 8a4 4 0 0 1 4 -4h12a4 4 0 0 1 4 4v8a4 4 0 0 1 -4 4h-12a4 4 0 0 1 -4 -4v-8\"/>\n<path d=\"M10 9l5 3l-5 3l0 -6\"/>\n</svg></svg>";
 };
 export type IconName = keyof typeof iconNameToSvgMap;
-export declare const iconNames: readonly ["1x", "1xdots", "1xgrid", "1xlines", "2x", "2xdots", "2xgrid", "2xgrid-alt", "2xgrid-alt-2", "2xgrid-alt-3", "2xlines", "4x4", "airtable", "app", "apple", "archive", "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", "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", "calendar", "callout", "camera", "car", "card", "cart", "categories", "check", "check-alt", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "close", "cloud", "code", "code-block", "coffee", "coins", "collapse", "color", "column", "comment", "compose", "connect", "content", "cursor", "curve", "default", "delete", "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", "down", "download", "drive", "drop", "dropbox", "dumbbell", "duplicate", "email", "equation", "exercise", "expand", "eye", "eye-off", "facebook", "figma", "flame", "flip", "folder", "food", "form", "fuel", "gallery", "game", "gift", "github", "globe", "google", "group", "group-alt", "group-alt-2", "h1", "h2", "h3", "handle", "head", "heart", "help", "help-alt", "history", "home", "home-alt", "icon", "image", "in", "income", "indent", "info", "instagram", "italic", "item", "jpbank", "key", "keyboard", "left", "life", "like", "link", "linkedin", "list-line", "lists", "lock", "lock-filled", "logo-marquee", "loom", "loop", "map", "medical", "mention", "menu", "mic", "minimize", "minimize-alt", "minus", "money", "moon", "more", "move", "music", "music-alt", "navigation-check", "note", "note-alt", "note-alt-2", "note-lines", "notifications", "notion", "numbered", "offline", "open", "open-alt", "open-source", "outdent", "pad", "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", "pen", "people", "percent", "phone", "pill", "plane", "play-alt", "plus", "postal", "present", "quote", "reaction", "receipt", "redo", "refresh", "refund", "relationships", "repeat", "rewind", "rewind-30", "rewind-30-alt", "right", "rotate", "row", "safe", "school", "school-alt", "sdown", "search", "search-30", "see", "see-30", "settings", "shared", "shield", "shield-alt", "shirt", "shop", "sign-in", "sign-out", "slack", "slash", "sparkle", "star", "star-alt", "star-alt-2", "start", "stats", "status", "status-alt", "status-filled", "stop", "store", "strike", "sun", "sup", "system", "table", "tag", "template", "templates", "text", "ticket", "title", "title-struck", "titlestyle", "todo", "toggle", "train", "transfer", "triangle", "tv", "underline", "undo", "ungroup", "unhead", "unicon", "unlock", "unmic", "unsee", "unstar", "untitle", "up", "up-right", "upload", "video", "views", "vimeo", "wallet", "warning", "wifi", "window", "work", "wrench", "x-brand", "youtube"];
+export declare const iconNames: readonly ["1x", "1xdots", "1xgrid", "1xlines", "2x", "2xdots", "2xgrid", "2xgrid-alt", "2xgrid-alt-2", "2xgrid-alt-3", "2xlines", "4x4", "airtable", "app", "apple", "archive", "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", "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", "calendar", "callout", "camera", "car", "card", "cart", "categories", "check", "check-alt", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "close", "cloud", "code", "code-block", "coffee", "coins", "collapse", "color", "column", "comment", "compose", "connect", "content", "cursor", "curve", "default", "delete", "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", "down", "download", "drive", "drop", "dropbox", "dumbbell", "duplicate", "email", "equation", "exercise", "expand", "eye", "eye-off", "facebook", "figma", "flame", "flip", "folder", "food", "form", "fuel", "gallery", "game", "gift", "github", "globe", "google", "group", "group-alt", "group-alt-2", "h1", "h2", "h3", "handle", "head", "heart", "help", "help-alt", "history", "home", "home-alt", "icon", "image", "in", "income", "indent", "info", "instagram", "italic", "item", "jpbank", "key", "keyboard", "left", "life", "like", "link", "linkedin", "list-line", "lists", "lock", "lock-filled", "logo-marquee", "loom", "loop", "map", "medical", "mention", "menu", "mic", "minimize", "minimize-alt", "minus", "money", "moon", "more", "move", "music", "music-alt", "navigation-check", "note", "note-alt", "note-alt-2", "note-lines", "notifications", "notion", "numbered", "offline", "open", "open-alt", "open-source", "outdent", "pad", "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", "pen", "people", "percent", "phone", "pill", "plane", "play-alt", "plus", "postal", "present", "quote", "reaction", "receipt", "redo", "refresh", "refund", "relationships", "repeat", "rewind", "rewind-30", "rewind-30-alt", "right", "rotate", "row", "safe", "school", "school-alt", "sdown", "search", "search-30", "see", "see-30", "settings", "shared", "shield", "shield-alt", "shirt", "shop", "sign-in", "sign-out", "slack", "slash", "sparkle", "star", "star-alt", "star-alt-2", "start", "stats", "status", "status-alt", "status-filled", "stop", "store", "strike", "sun", "sup", "system", "table", "tag", "template", "templates", "text", "ticket", "title", "title-struck", "titlestyle", "todo", "toggle", "train", "transfer", "tv", "underline", "undo", "ungroup", "unhead", "unicon", "unlock", "unmic", "unsee", "unstar", "untitle", "up", "up-right", "upload", "video", "views", "vimeo", "wallet", "warning", "wifi", "window", "work", "wrench", "x-brand", "youtube"];
 //# sourceMappingURL=ds-icon-map.d.ts.map

package/dist/2-core/generated/ds-icon-map.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-icon-map.d.ts","sourceRoot":"","sources":["../../../DS1/2-core/generated/ds-icon-map.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwVnB,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAErD,eAAO,MAAM,SAAS,uhIAwVZ,CAAC"}
+{"version":3,"file":"ds-icon-map.d.ts","sourceRoot":"","sources":["../../../DS1/2-core/generated/ds-icon-map.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuVnB,CAAC;AAEX,MAAM,MAAM,QAAQ,GAAG,MAAM,OAAO,gBAAgB,CAAC;AAErD,eAAO,MAAM,SAAS,2gIAuVZ,CAAC"}

package/dist/2-core/generated/ds-icon-map.js

@@ -321,7 +321,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>",
@@ -340,7 +339,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>",
@@ -666,7 +665,6 @@ export const iconNames = [
     "toggle",
     "train",
     "transfer",
-    "triangle",
     "tv",
     "underline",
     "undo",

package/dist/2-core/generated/icons-extra.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icons-extra.d.ts","sourceRoot":"","sources":["../../../DS1/2-core/generated/icons-extra.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA2SlD,CAAA"}
+{"version":3,"file":"icons-extra.d.ts","sourceRoot":"","sources":["../../../DS1/2-core/generated/icons-extra.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,KAAK,EAAE,QAAQ,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CA0SlD,CAAA"}

package/dist/2-core/generated/icons-extra.js

@@ -278,7 +278,6 @@ export const icons = {
     "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 = {
     "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>",