twico-ui 1.47.0 → 1.49.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 All notable changes to Twico UI are documented here (newest first). This file is generated automatically on each release by [semantic-release](https://semantic-release.gitbook.io/) from [Conventional Commits](https://www.conventionalcommits.org/) — do not edit it by hand. The same notes appear on each [GitHub Release](https://github.com/EncryptionL/twico-ui/releases).
 
+# [1.49.0](https://github.com/EncryptionL/twico-ui/compare/v1.48.0...v1.49.0) (2026-11-05)
+
+
+### Bug Fixes
+
+* **tokens:** make the plain tones clear 4.5:1 against their own ink ([78a727d](https://github.com/EncryptionL/twico-ui/commit/78a727d193010a717405ee14af038e39f1baf65b)), closes [#455](https://github.com/EncryptionL/twico-ui/issues/455) [#504](https://github.com/EncryptionL/twico-ui/issues/504) [#504](https://github.com/EncryptionL/twico-ui/issues/504) [#1e1b4b](https://github.com/EncryptionL/twico-ui/issues/1e1b4b) [#e11d48](https://github.com/EncryptionL/twico-ui/issues/e11d48) [#1e1b4b](https://github.com/EncryptionL/twico-ui/issues/1e1b4b) [#818cf8](https://github.com/EncryptionL/twico-ui/issues/818cf8) [#052e1d](https://github.com/EncryptionL/twico-ui/issues/052e1d) [#10b981](https://github.com/EncryptionL/twico-ui/issues/10b981) [#2c0610](https://github.com/EncryptionL/twico-ui/issues/2c0610) [#f43f5e](https://github.com/EncryptionL/twico-ui/issues/f43f5e)
+
+
+### Features
+
+* **button:** widen tone to the full Tone scale, not just primary|danger ([ec640c3](https://github.com/EncryptionL/twico-ui/commit/ec640c3f4c0faa5c19b6cab4b73a8a5758628864)), closes [#451a03](https://github.com/EncryptionL/twico-ui/issues/451a03) [#082f49](https://github.com/EncryptionL/twico-ui/issues/082f49)
+
+# [1.48.0](https://github.com/EncryptionL/twico-ui/compare/v1.47.0...v1.48.0) (2026-10-23)
+
+
+### Features
+
+* **datatable:** vertical alignment at three levels — table, row, column ([221978b](https://github.com/EncryptionL/twico-ui/commit/221978b1db3527d97b93335a9b36b9274d2c8b10))
+
 # [1.47.0](https://github.com/EncryptionL/twico-ui/compare/v1.46.0...v1.47.0) (2026-10-23)
 
 

package/dist/icons.d.cts

@@ -56,4 +56,5 @@ declare const brandIcons: BrandIconMeta[];
 /** Just the exported component names of every brand icon. */
 declare const brandIconNames: string[];
 
-export { AppleBrandIcon, BlueskyIcon, type BrandIcon, type BrandIconMeta, type BrandIconProps, DiscordIcon, DockerIcon, DribbbleIcon, FacebookIcon, FigmaIcon, GithubIcon, GitlabIcon, GoogleIcon, InstagramIcon, MastodonIcon, MediumIcon, NextjsIcon, NodejsIcon, NpmIcon, PinterestIcon, ReactjsIcon, RedditIcon, SpotifyIcon, StackOverflowIcon, TailwindIcon, TelegramIcon, ThreadsIcon, TikTokIcon, TwitchIcon, TypeScriptIcon, VercelIcon, WhatsAppIcon, XTwitterIcon, YoutubeIcon, brandIconNames, brandIcons };
+export { AppleBrandIcon, BlueskyIcon, DiscordIcon, DockerIcon, DribbbleIcon, FacebookIcon, FigmaIcon, GithubIcon, GitlabIcon, GoogleIcon, InstagramIcon, MastodonIcon, MediumIcon, NextjsIcon, NodejsIcon, NpmIcon, PinterestIcon, ReactjsIcon, RedditIcon, SpotifyIcon, StackOverflowIcon, TailwindIcon, TelegramIcon, ThreadsIcon, TikTokIcon, TwitchIcon, TypeScriptIcon, VercelIcon, WhatsAppIcon, XTwitterIcon, YoutubeIcon, brandIconNames, brandIcons };
+export type { BrandIcon, BrandIconMeta, BrandIconProps };

package/dist/icons.d.ts

@@ -56,4 +56,5 @@ declare const brandIcons: BrandIconMeta[];
 /** Just the exported component names of every brand icon. */
 declare const brandIconNames: string[];
 
-export { AppleBrandIcon, BlueskyIcon, type BrandIcon, type BrandIconMeta, type BrandIconProps, DiscordIcon, DockerIcon, DribbbleIcon, FacebookIcon, FigmaIcon, GithubIcon, GitlabIcon, GoogleIcon, InstagramIcon, MastodonIcon, MediumIcon, NextjsIcon, NodejsIcon, NpmIcon, PinterestIcon, ReactjsIcon, RedditIcon, SpotifyIcon, StackOverflowIcon, TailwindIcon, TelegramIcon, ThreadsIcon, TikTokIcon, TwitchIcon, TypeScriptIcon, VercelIcon, WhatsAppIcon, XTwitterIcon, YoutubeIcon, brandIconNames, brandIcons };
+export { AppleBrandIcon, BlueskyIcon, DiscordIcon, DockerIcon, DribbbleIcon, FacebookIcon, FigmaIcon, GithubIcon, GitlabIcon, GoogleIcon, InstagramIcon, MastodonIcon, MediumIcon, NextjsIcon, NodejsIcon, NpmIcon, PinterestIcon, ReactjsIcon, RedditIcon, SpotifyIcon, StackOverflowIcon, TailwindIcon, TelegramIcon, ThreadsIcon, TikTokIcon, TwitchIcon, TypeScriptIcon, VercelIcon, WhatsAppIcon, XTwitterIcon, YoutubeIcon, brandIconNames, brandIcons };
+export type { BrandIcon, BrandIconMeta, BrandIconProps };

package/dist/index.cjs

@@ -455,6 +455,22 @@ var ICONBTN_CSS = `
   --_accent-fg: var(--color-primary-fg); --_accent-subtle: var(--color-primary-subtle); --_accent-subtle-fg: var(--color-primary-subtle-fg); }
 .twc-iconbtn[data-tone="danger"] { --_accent: var(--color-danger); --_accent-hover: var(--color-danger-hover);
   --_accent-fg: var(--color-danger-fg); --_accent-subtle: var(--color-danger-subtle); --_accent-subtle-fg: var(--color-danger-subtle-fg); }
+/* #504: the full Tone scale, not just primary|danger. A standalone affirmative action - a row-level
+   confirm sitting next to a danger sibling, reading as "yes / no" - could not be green, so the colour
+   that carried the distinction came out the same blue as every neutral action on the page.
+   success/warning/info now have real -hover/-active tokens (added in tokens/colors.css on the same
+   step rule as primary and danger: light goes darker, dark goes lighter), so hover always moves AWAY
+   from the ink and contrast only improves. neutral has no accent tokens anywhere and is mapped the way
+   Badge already maps it - --color-text on --color-surface solid, --color-surface-sunken soft - with its
+   hover mixed from currentColor, since there is no --color-text-hover to point at. */
+.twc-iconbtn[data-tone="success"] { --_accent: var(--color-success); --_accent-hover: var(--color-success-hover);
+  --_accent-fg: var(--color-success-fg); --_accent-subtle: var(--color-success-subtle); --_accent-subtle-fg: var(--color-success-subtle-fg); }
+.twc-iconbtn[data-tone="warning"] { --_accent: var(--color-warning); --_accent-hover: var(--color-warning-hover);
+  --_accent-fg: var(--color-warning-fg); --_accent-subtle: var(--color-warning-subtle); --_accent-subtle-fg: var(--color-warning-subtle-fg); }
+.twc-iconbtn[data-tone="info"] { --_accent: var(--color-info); --_accent-hover: var(--color-info-hover);
+  --_accent-fg: var(--color-info-fg); --_accent-subtle: var(--color-info-subtle); --_accent-subtle-fg: var(--color-info-subtle-fg); }
+.twc-iconbtn[data-tone="neutral"] { --_accent: var(--color-text); --_accent-hover: color-mix(in srgb, var(--color-text) 88%, var(--color-surface));
+  --_accent-fg: var(--color-surface); --_accent-subtle: var(--color-surface-sunken); --_accent-subtle-fg: var(--color-text-muted); }
 .twc-iconbtn[data-variant="solid"] { background: var(--_accent); color: var(--_accent-fg); }
 .twc-iconbtn[data-variant="solid"]:hover:not(:disabled) { background: var(--_accent-hover); box-shadow: var(--shadow-brand); }
 .twc-iconbtn[data-variant="solid"]:active:not(:disabled) { filter: brightness(0.92); }
@@ -1832,6 +1848,31 @@ var CSS2 = `
   --_accent: var(--color-danger); --_accent-hover: var(--color-danger-hover); --_accent-active: var(--color-danger-hover);
   --_accent-fg: var(--color-danger-fg); --_accent-subtle: var(--color-danger-subtle); --_accent-subtle-fg: var(--color-danger-subtle-fg);
 }
+/* #504: the full Tone scale, not just primary|danger. A standalone affirmative action - a row-level
+   confirm sitting next to a danger sibling, reading as "yes / no" - could not be green, so the colour
+   that carried the distinction came out the same blue as every neutral action on the page.
+   success/warning/info now have real -hover/-active tokens (added in tokens/colors.css on the same
+   step rule as primary and danger: light goes darker, dark goes lighter), so hover always moves AWAY
+   from the ink and contrast only improves. neutral has no accent tokens anywhere and is mapped the way
+   Badge already maps it - --color-text on --color-surface solid, --color-surface-sunken soft - with its
+   hover mixed from currentColor, since there is no --color-text-hover to point at. */
+.twc-btn[data-tone="success"] {
+  --_accent: var(--color-success); --_accent-hover: var(--color-success-hover); --_accent-active: var(--color-success-active);
+  --_accent-fg: var(--color-success-fg); --_accent-subtle: var(--color-success-subtle); --_accent-subtle-fg: var(--color-success-subtle-fg);
+}
+.twc-btn[data-tone="warning"] {
+  --_accent: var(--color-warning); --_accent-hover: var(--color-warning-hover); --_accent-active: var(--color-warning-active);
+  --_accent-fg: var(--color-warning-fg); --_accent-subtle: var(--color-warning-subtle); --_accent-subtle-fg: var(--color-warning-subtle-fg);
+}
+.twc-btn[data-tone="info"] {
+  --_accent: var(--color-info); --_accent-hover: var(--color-info-hover); --_accent-active: var(--color-info-active);
+  --_accent-fg: var(--color-info-fg); --_accent-subtle: var(--color-info-subtle); --_accent-subtle-fg: var(--color-info-subtle-fg);
+}
+.twc-btn[data-tone="neutral"] {
+  --_accent: var(--color-text); --_accent-hover: color-mix(in srgb, var(--color-text) 88%, var(--color-surface));
+  --_accent-active: color-mix(in srgb, var(--color-text) 78%, var(--color-surface));
+  --_accent-fg: var(--color-surface); --_accent-subtle: var(--color-surface-sunken); --_accent-subtle-fg: var(--color-text-muted);
+}
 /* solid */
 .twc-btn[data-variant="solid"] { background: var(--_accent); color: var(--_accent-fg); }
 .twc-btn[data-variant="solid"]:hover:not(:disabled) { background: var(--_accent-hover); box-shadow: var(--shadow-brand); }
@@ -9378,9 +9419,20 @@ var DT_CSS = `
   font-size: var(--text-sm); color: var(--color-text); background: var(--twc-dt-row-bg, var(--color-surface));
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; }
 /* Wrap-text columns: content flows onto multiple lines (the row grows down) instead of
-   clipping to one line. height stays a per-row minimum, so single-line cells are unchanged. */
+   clipping to one line. height stays a per-row minimum, so single-line cells are unchanged.
+   The top alignment here is only a DEFAULT for wrapped cells - an explicit verticalAlign at any
+   level resolves to data-valign below, which is more specific and wins. Before that existed, a row
+   mixing a wrapped column with normal ones was silently inconsistent: the wrapped cell sat top and
+   its neighbours sat middle, with no way to say otherwise. */
 .twc-dt__td[data-wrap="true"] { white-space: normal; overflow: hidden; text-overflow: clip;
   word-break: break-word; overflow-wrap: anywhere; vertical-align: top; padding-block: 10px; line-height: 1.45; }
+/* Vertical alignment. One attribute, already resolved: column > row > table default, computed in
+   renderLeaf rather than left to three competing selectors, so the precedence is readable in the
+   code and cannot be reordered by an unrelated CSS edit. Matters whenever rows vary in height -
+   wrapText, a multi-line renderCell, or a drag-resized row. */
+.twc-dt__td[data-valign="top"] { vertical-align: top; }
+.twc-dt__td[data-valign="middle"] { vertical-align: middle; }
+.twc-dt__td[data-valign="bottom"] { vertical-align: bottom; }
 /* #338: "combined" column cell \u2014 one column showing several source columns' values. */
 .twc-dt__combine--stack { display: flex; flex-direction: column; gap: 1px; }
 .twc-dt__combine-sep { color: var(--color-text-subtle); padding-inline: 3px; }
@@ -10149,6 +10201,8 @@ function Datatable({
   batchActions = [],
   onRowSelectionChange,
   selectionSummary,
+  verticalAlign,
+  getRowVerticalAlign,
   getRowStyle,
   getRowClassName,
   showExport = false,
@@ -12728,6 +12782,7 @@ function Datatable({
     const h = rowHeights[k];
     const userRowStyle = getRowStyle ? getRowStyle(row, ri) : void 0;
     const userRowClass = getRowClassName ? getRowClassName(row, ri) : void 0;
+    const rowValign = getRowVerticalAlign ? getRowVerticalAlign(row, ri) : void 0;
     const { background: _rowBgShorthand, backgroundColor: _rowBgColor, ...restRowStyle } = userRowStyle || {};
     const usable = (v) => typeof v === "string" && v.trim() !== "" ? v : void 0;
     const rowBg = usable(_rowBgShorthand) ?? usable(_rowBgColor);
@@ -12838,6 +12893,7 @@ function Datatable({
                   "data-num": c.type === "number" || void 0,
                   "data-actions": isActions || void 0,
                   "data-align": c.align !== dtNaturalAlign(c) ? c.align : void 0,
+                  "data-valign": c.verticalAlign ?? rowValign ?? verticalAlign,
                   "data-editable": editable && !isEditing || void 0,
                   "data-editing": isEditing || void 0,
                   "data-cell-active": cellActive || void 0,