@dynatrace/strato-components 3.12.1 → 3.13.0

package/CHANGELOG.md

@@ -1,5 +1,156 @@
 # components
 
+## 3.13.0
+
+### Dependency updates
+
+- Changed peerDependency version range for `@dynatrace-sdk/dqlint` from `^1.3.0` to `^1.6.0`. (APPDEV-19649)
+- `@dynatrace/strato-design-tokens` was updated to version `1.7.0`.
+- `@dynatrace/strato-icons` was updated to version `2.6.0`.
+
+### Deprecations
+
+#### TimeseriesChart
+
+- Deprecated `TimeseriesChart.DownloadCSV` slot. Download is now always active. (APPDEV-18865)
+- Deprecated `gapPolicy` on `TimeseriesChart.Line`, `TimeseriesChart.Area`, and `TimeseriesChart.Band` slots. Use root-level `gapPolicy` on `TimeseriesChart` instead. (APPDEV-18865)
+- Deprecated `onMessage` from the public API. It was never internally wired and has no effect. (APPDEV-18865)
+- Deprecated `strokeOnly` on `TimeseriesChart.Band`. This prop no longer has any effect. (APPDEV-18865)
+- Deprecated `valueRepresentation` on `TimeseriesChart.Line`, `TimeseriesChart.Area`, and `TimeseriesChart.Bar` slots. Use root-level `valueRepresentation` on `TimeseriesChart` instead. (APPDEV-18865)
+
+### Updates
+
+#### Charts
+
+- Fixed the series actions menu positioning on narrow viewports. The menu now opens below the tooltip when there is insufficient horizontal space. (APPDEV-19140)
+- Fixed the legend item label always being announced as "Series name" by screen readers instead of the actual series name, and the visibility toggle button not reporting its pressed state. (APPDEV-19178)
+- Increased height of the legend items to comply with accessibility requirements. (APPDEV-19542)
+- Fixed the issue that prevented strings without line breaks from being properly truncated. (APPDEV-18898)
+- Fixed the error thrown when hovering over a chart while its datapoints were being reprocessed. (APPDEV-19413)
+- Fixed hidden legend series reappearing after a resize when `initialRatio` was set on the legend. (APPDEV-19410)
+
+#### Editors
+
+- The gutter column is now properly hidden when `hideLineNumbers` or `singleLine` is enabled in the `BaseCodeEditor`. (APPDEV-19609)
+
+#### Forms
+
+- Fixed a missing `getServerSnapshot` argument in `useFormRuntimeRegistration` that caused server-side builds to fail.
+
+#### AnnotationsChart
+
+- Fixed the missing `aria-describedby` attribute on trigger elements inside the chart when a tooltip is visible. (APPDEV-19480)
+
+#### Chip
+
+- The emphasized variants now have a 1px border in their semantic border color, and the neutral emphasized variant uses the base background color. These updates apply when the visual refresh is enabled. (APPDEV-19764)
+
+#### ChipGroup
+
+- Focus is now moved to the first chip revealed after "Show more" is clicked, improving accessibility. (APPDEV-19291)
+
+#### Code
+
+- The background and text color are now purple instead of neutral, with dedicated values for light and dark mode. (APPDEV-19763)
+
+#### CodeEditor
+
+- Introduced the new `showOffScreenDiagnosticIndicators` prop that renders floating pill buttons at the top and bottom edges of the editor indicating off-screen `error`-severity diagnostics, each showing the count of off-screen errors. Clicking a pill scrolls the nearest such error into view. (APPDEV-17072)
+
+#### DataTable
+
+- `datetime` columns now correctly format ISO-8601 string cell values in both the built-in cell renderer and the `format()` callback in custom cell renderers. (APPDEV-19591)
+- Cell action trigger buttons no longer share an identical accessible name. Each button now includes the column and row, so screen readers can distinguish between them. (APPDEV-19656)
+- Fixed the column actions trigger visibility not updating correctly on hover and sort interactions. (APPDEV-19739)
+- Fixed the row not activating when clicking on a cell that contained an element with `tabindex="-1"`, such as `<CodeSnippet />`. (APPDEV-19744)
+- Fixed the native browser context menu being suppressed on right-click when no cell or column actions are configured. (APPDEV-19561)
+
+#### DonutChart
+
+- Fixed the missing `aria-describedby` attribute on svg elements inside the chart when a tooltip is visible. (APPDEV-19480)
+
+#### FilterField
+
+- Complete filter statements now use the base background with a neutral border and incomplete statements use a subdued border when the visual refresh is enabled. (APPDEV-19754)
+- Switching from a comparison operator to a wildcard operator (`= value*`, `= *value`, `= *value*`) now automatically wraps the existing value with the appropriate wildcards. (APPDEV-18941)
+- Wildcard characters (`*`) inside filter values are now highlighted in the `FilterField` editor to make it clear which asterisks are interpreted as wildcards. (APPDEV-18748)
+- You can now enable wildcard-in-middle matching via the `matchesWildcardConversion` flag, which accepts `*` in any position of a value (e.g. `eu-*-prod`) and produces the new `matches-wildcard` and `not-matches-wildcard` operator nodes. (APPDEV-18747)
+- Fixed recent and pinned filter suggestions not being restored in apps that do not mount an `AppStateProvider`. (APPDEV-19694)
+- Reduced verbosity of suggestions overlay announcements for screen reader users. (APPDEV-19200)
+
+#### FocusScope
+
+- Fixed the focus containment so that elements the browser never tabs to, such as hidden controls, no longer let the focus escape to the document. (APPDEV-19493)
+
+#### FormField
+
+- The `FormFieldMessages` render function now receives a second argument with `showErrors` and `isValid`, so you can tell whether a potential error would now be visible for the field. (APPDEV-19340)
+- You can now set `showImmediately` on a `FormFieldMessages.Item` with `variant="error"` to reveal it as soon as it mounts, bypassing the field's normal reveal gate (first blur, overlay close, or immediate-on-click). (APPDEV-19340)
+
+#### GaugeChart
+
+- Fixed the missing `aria-describedby` attribute on svg elements inside the chart when a tooltip is visible. (APPDEV-19480)
+
+#### HelpMenu
+
+- Fixed the app version not being announced by screen readers. It is now a focusable menu entry that users can reach with the arrow keys. (APPDEV-18962)
+
+#### InlineButton
+
+- You can now use the new `InlineButton` component for inline, text-flowing action triggers. It wraps naturally across line breaks like surrounding text, and supports `color`, `loading`, and `disabled`/`aria-disabled` states, plus optional `Prefix`/`Suffix` icon slots. It also accepts `aria-expanded`, `aria-haspopup`, and `aria-controls` for composing it as a disclosure or popup trigger. (APPDEV-18446)
+- You can now use an `as` prop to render a different underlying element (e.g. `as="button"` to produce a native `<button>`). The default remains `'span'`, which preserves multi-line wrapping via `box-decoration-break: clone`. Other values opt out of that wrapping behavior. This is an accepted trade-off, useful when you need a specific element type to keep a forwarded ref correctly typed (e.g. `HTMLButtonElement` instead of `HTMLSpanElement`). (APPDEV-18446)
+
+#### Markdown
+
+- Inline code is now purple instead of neutral, with dedicated values for light and dark mode. (APPDEV-19763)
+- The YAML frontmatter at the start of a document now renders as a metadata table, making its key-value pairs easier to scan than a raw text block. (APPDEV-17777)
+
+#### Menu
+
+- `Menu.Group` now accepts a `label` prop that renders a heading and names the group for assistive technology. A `Menu.Label` rendered inside a `Menu.Group` also becomes that group's accessible name automatically, so you no longer have to pair an `id` with `aria-labelledby` yourself. (APPDEV-18962)
+- You can now soft-disable a `Menu.Item` with `aria-disabled` to keep it focusable and announced to screen readers while showing its `Menu.ItemTooltip` on desktop, so you can explain why an item is unavailable. Unlike the hard `disabled` prop, a soft-disabled item stays interactive and still fires `onSelect`, leaving the behavior to you, and selecting it does not close the menu. (APPDEV-19690)
+
+#### MeterBarChart
+
+- Fixed the missing `aria-describedby` attribute on svg elements inside the chart when a tooltip is visible. (APPDEV-19480)
+
+#### MultiMeterBarChart
+
+- Fixed the missing `aria-describedby` attribute on svg elements inside the chart when a tooltip is visible. (APPDEV-19480)
+
+#### NumberInput
+
+- Controlled value now correctly reflects transformations applied by the `onChange` handler in the same render (e.g. clamping to a minimum). (APPDEV-19356)
+
+#### PieChart
+
+- Fixed the missing `aria-describedby` attribute on svg elements inside the chart when a tooltip is visible. (APPDEV-19480)
+
+#### Sheet
+
+- Fixed the extra tab stop with no visible focus that appeared after the last interactive element. (APPDEV-19493)
+
+#### Sparkline
+
+- Fixed the bar variant opacity to align with other chart components. (APPDEV-19641)
+
+#### TimeframeSelector
+
+- The overlay now has a descriptive accessible name for the "Learn more" link. (APPDEV-18613)
+
+#### XYChart
+
+- Custom tooltip in XYChart now displays the selected truncation mode. (APPDEV-19728)
+- Fixed "Zoom to selection" becoming non-clickable after pressing Escape on a finished selection and selecting again. (APPDEV-19593)
+
+## 3.12.2
+
+### Updates
+
+#### FilterField
+
+- Fixed recent and pinned filter suggestions not being restored in apps that do not mount an `AppStateProvider`. (APPDEV-19694)
+
 ## 3.12.1
 
 ### Updates
@@ -21,6 +172,16 @@
 
 - Hint component is deprecated in favor of `FormFieldMessages`. (APPDEV-18361)
 
+## 3.11.4
+
+### Updates
+
+#### FilterField
+
+- Fixed recent and pinned filter suggestions not being restored in apps that do not mount an `AppStateProvider`. (APPDEV-19694)
+
+## 3.11.3
+
 ### Updates
 
 #### Charts
@@ -365,6 +526,14 @@
 - Fixed the `colorRule` `colorPalette` on `BarSeries` from resolving to the palette's first color for every matching bar instead of the color matching the series' own index. (APPDEV-19198)
 - Simplified the `toolbar` so it only shows one button when interactions are disabled. (APPDEV-18812)
 
+## 3.10.6
+
+### Updates
+
+#### FilterField
+
+- Fixed recent and pinned filter suggestions not being restored in apps that do not mount an `AppStateProvider`. (APPDEV-19694)
+
 ## 3.10.5
 
 ### Updates
@@ -537,6 +706,14 @@
 - Fixed the `min` and `max` axis props to default to `'auto'` when `undefined` is passed explicitly. (APPDEV-19012)
 - The shared tooltip now highlights the hovered series and scrolls it into view when the series list is longer than the visible area. (APPDEV-18366)
 
+## 3.9.2
+
+### Updates
+
+#### FilterField
+
+- Fixed recent and pinned filter suggestions not being restored in apps that do not mount an `AppStateProvider`. (APPDEV-19694)
+
 ## 3.9.1
 
 ### Updates
@@ -682,6 +859,14 @@
 - Fixed `XYChart.BarSeriesBar` labels using wrong color contrast when a ColorRule overrides the bar color. (APPDEV-18660)
 - `XYChart.BarSeries` now allows configuring color rules per datapoint. When every bar in the series is recolored to the same rule color, the legend swatch adopts that color; if only some bars match (or match different colors), the legend keeps the original series color. (APPDEV-18262)
 
+## 3.8.3
+
+### Updates
+
+#### FilterField
+
+- Fixed recent and pinned filter suggestions not being restored in apps that do not mount an `AppStateProvider`. (APPDEV-19694)
+
 ## 3.8.2
 
 ### Updates

package/buttons/button/Button.css

@@ -1,13 +1,13 @@
-._10kgnsa0-3-12-1 {
+._10kgnsa0-3-13-0 {
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   font-size: var(--dt-typography-text-base-default-size, 14px);
   line-height: var(--dt-typography-text-base-default-line-height, 1.4285714286);
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: none;
-  background: var(--_bx32h3-3-12-1);
-  box-shadow: var(--_bx32h4-3-12-1);
-  color: var(--_bx32h0-3-12-1);
+  background: var(--_bx32h3-3-13-0);
+  box-shadow: var(--_bx32h4-3-13-0);
+  color: var(--_bx32h0-3-13-0);
   display: inline-flex;
   position: relative;
   align-items: center;
@@ -24,38 +24,38 @@
   transition-duration: var(--dt-animations-hover-duration-base, 150ms);
   transition-property: color, background-color, box-shadow, transform;
 }
-._10kgnsa1-3-12-1 {
+._10kgnsa1-3-13-0 {
   text-align: start;
   justify-content: space-between;
 }
-._10kgnsa2-3-12-1 {
+._10kgnsa2-3-13-0 {
   text-align: center;
   justify-content: center;
 }
-._10kgnsa3-3-12-1 {
+._10kgnsa3-3-13-0 {
   padding-top: var(--dt-spacings-size-2, 2px);
   padding-bottom: var(--dt-spacings-size-2, 2px);
   padding-left: var(--dt-spacings-size-4, 4px);
   padding-right: var(--dt-spacings-size-4, 4px);
   gap: var(--dt-spacings-size-2, 2px);
 }
-._10kgnsa4-3-12-1 {
+._10kgnsa4-3-13-0 {
   padding-top: var(--dt-spacings-size-6, 6px);
   padding-bottom: var(--dt-spacings-size-6, 6px);
   padding-left: var(--dt-spacings-size-8, 8px);
   padding-right: var(--dt-spacings-size-8, 8px);
   gap: var(--dt-spacings-size-4, 4px);
 }
-._10kgnsa5-3-12-1 {
+._10kgnsa5-3-13-0 {
   cursor: not-allowed;
 }
-._10kgnsa6-3-12-1 {
+._10kgnsa6-3-13-0 {
   width: 100%;
 }
-._10kgnsa7-3-12-1 {
+._10kgnsa7-3-13-0 {
   width: fit-content;
 }
-._10kgnsa8-3-12-1 {
+._10kgnsa8-3-13-0 {
   position: absolute;
   top: 0;
   left: 0;
@@ -67,19 +67,19 @@
   align-items: center;
   z-index: 1;
 }
-._10kgnsa3-3-12-1 ._10kgnsa9-3-12-1:not(:has(svg:only-child)) {
+._10kgnsa3-3-13-0 ._10kgnsa9-3-13-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 2px;
   padding-right: 2px;
 }
-._10kgnsa4-3-12-1 ._10kgnsa9-3-12-1:not(:has(svg:only-child)) {
+._10kgnsa4-3-13-0 ._10kgnsa9-3-13-0:not(:has(svg:only-child)) {
   padding-top: 0;
   padding-bottom: 0;
   padding-left: 4px;
   padding-right: 4px;
 }
-._10kgnsab-3-12-1 {
+._10kgnsab-3-13-0 {
   display: inline-flex;
   min-width: 0;
   max-width: 100%;

package/buttons/button/Button.sty.js

@@ -28,7 +28,7 @@ var import_AppRoot_css_ts_vanilla = require("../../core/components/app-root/AppR
 var import_field_css_ts_vanilla = require("../../styles/field.css");
 var import_Button_css_ts_vanilla = require("./Button.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var button = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-3-12-1", variantClassNames: { textAlign: { start: "_10kgnsa1-3-12-1", center: "_10kgnsa2-3-12-1" }, size: { condensed: "_10kgnsa3-3-12-1", "default": "_10kgnsa4-3-12-1" }, disabled: { true: "_10kgnsa5-3-12-1" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
-var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa9-3-12-1", variantClassNames: { textual: { true: "_oqqp1n0-3-12-1", false: "_10kgnsab-3-12-1" } }, defaultVariants: {}, compoundVariants: [] });
-var loading = "_10kgnsa8-3-12-1";
-var widths = { full: "_10kgnsa6-3-12-1", content: "_10kgnsa7-3-12-1" };
+var button = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa0-3-13-0", variantClassNames: { textAlign: { start: "_10kgnsa1-3-13-0", center: "_10kgnsa2-3-13-0" }, size: { condensed: "_10kgnsa3-3-13-0", "default": "_10kgnsa4-3-13-0" }, disabled: { true: "_10kgnsa5-3-13-0" } }, defaultVariants: { size: "default", textAlign: "center", disabled: false }, compoundVariants: [] });
+var label = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_10kgnsa9-3-13-0", variantClassNames: { textual: { true: "_oqqp1n0-3-13-0", false: "_10kgnsab-3-13-0" } }, defaultVariants: {}, compoundVariants: [] });
+var loading = "_10kgnsa8-3-13-0";
+var widths = { full: "_10kgnsa6-3-13-0", content: "_10kgnsa7-3-13-0" };

package/buttons/index.d.ts

@@ -13,4 +13,8 @@ export { RunQueryButton, queryStateOptions, } from './run-query-button/RunQueryB
 export type { QueryStateType, RunQueryButtonProps, } from './run-query-button/RunQueryButton.js';
 export { IntentButton, type IntentButtonProps, } from './intent-button/IntentButton.js';
 export { type OpenWithProps } from './intent-button/OpenWith.js';
+export { InlineButton } from './inline-button/InlineButton.js';
+export type { InlineButtonOwnProps, InlineButtonProps, } from './inline-button/InlineButton.js';
+export type { InlineButtonPrefixProps } from './inline-button/Prefix.js';
+export type { InlineButtonSuffixProps } from './inline-button/Suffix.js';
 //# sourceMappingURL=index.d.ts.map

package/buttons/index.js

@@ -18,6 +18,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var buttons_exports = {};
 __export(buttons_exports, {
   Button: () => import_Button.Button,
+  InlineButton: () => import_InlineButton.InlineButton,
   IntentButton: () => import_IntentButton.IntentButton,
   NotifyButton: () => import_NotifyButton.NotifyButton,
   RunQueryButton: () => import_RunQueryButton.RunQueryButton,
@@ -33,3 +34,4 @@ var import_is_virtual_event = require("./button/utils/is-virtual-event.js");
 var import_NotifyButton = require("./notify-button/NotifyButton.js");
 var import_RunQueryButton = require("./run-query-button/RunQueryButton.js");
 var import_IntentButton = require("./intent-button/IntentButton.js");
+var import_InlineButton = require("./inline-button/InlineButton.js");

package/buttons/inline-button/InlineButton.css

@@ -0,0 +1,145 @@
+._19ncm8a7-3-13-0 {
+  --_19ncm8a5-3-13-0: var(--dt-colors-border-neutral-accent, #595a7d);
+  --_19ncm8a6-3-13-0: var(--dt-colors-border-neutral-default, #dadbe4);
+  display: inline;
+  border: none;
+  background: transparent;
+  padding: var(--dt-spacings-size-0, 0);
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  cursor: pointer;
+  outline: none;
+}
+._19ncm8a9-3-13-0 {
+  --_19ncm8a0-3-13-0: var(--dt-colors-text-primary-default, #464cce);
+  --_19ncm8a1-3-13-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_19ncm8a2-3-13-0: var(--dt-colors-background-field-primary-default-hover, #d5dbf6);
+  --_19ncm8a3-3-13-0: var(--dt-colors-background-field-primary-default-active, #c9d1f4);
+  --_19ncm8a5-3-13-0: var(--dt-colors-border-primary-accent, #464cce);
+  --_19ncm8a6-3-13-0: var(--dt-colors-border-primary-default, #d5dbf6);
+}
+._19ncm8aa-3-13-0 {
+  --_19ncm8a0-3-13-0: var(--dt-colors-text-success-default, #2d6761);
+  --_19ncm8a1-3-13-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_19ncm8a2-3-13-0: var(--dt-colors-background-field-success-default-hover, #d3dedd);
+  --_19ncm8a3-3-13-0: var(--dt-colors-background-field-success-default-active, #c7d5d3);
+  --_19ncm8a5-3-13-0: var(--dt-colors-border-success-accent, #2d6761);
+  --_19ncm8a6-3-13-0: var(--dt-colors-border-success-default, #d3dedd);
+}
+._19ncm8ab-3-13-0 {
+  --_19ncm8a0-3-13-0: var(--dt-colors-text-warning-default, #855400);
+  --_19ncm8a1-3-13-0: var(--dt-colors-border-warning-accent, #855400);
+  --_19ncm8a2-3-13-0: var(--dt-colors-background-field-warning-default-hover, #f9ebdb);
+  --_19ncm8a3-3-13-0: var(--dt-colors-background-field-warning-default-active, #f9e6d0);
+  --_19ncm8a5-3-13-0: var(--dt-colors-border-warning-accent, #855400);
+  --_19ncm8a6-3-13-0: var(--dt-colors-border-warning-default, #f9ebdb);
+}
+._19ncm8ac-3-13-0 {
+  --_19ncm8a0-3-13-0: var(--dt-colors-text-critical-default, #bb0731);
+  --_19ncm8a1-3-13-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_19ncm8a2-3-13-0: var(--dt-colors-background-field-critical-default-hover, #f6d6d5);
+  --_19ncm8a3-3-13-0: var(--dt-colors-background-field-critical-default-active, #f5cac9);
+  --_19ncm8a5-3-13-0: var(--dt-colors-border-critical-accent, #bb0731);
+  --_19ncm8a6-3-13-0: var(--dt-colors-border-critical-default, #f6d6d5);
+}
+._19ncm8ad-3-13-0 {
+  cursor: not-allowed;
+}
+._19ncm8ag-3-13-0 {
+  display: inline;
+  position: relative;
+  border-radius: var(--dt-borders-radius-field-subdued, 3px);
+  color: var(--_19ncm8a0-3-13-0, var(--dt-colors-text-neutral-default, #2f2f4f));
+  padding-inline: var(--dt-spacings-size-2, 2px);
+  padding-block: 0.2em;
+  text-decoration: underline;
+  text-decoration-style: dashed;
+  text-underline-offset: 0.25em;
+  text-decoration-thickness: 0.08em;
+  text-decoration-color: var(--_19ncm8a1-3-13-0, var(--dt-colors-border-neutral-accent, #595a7d));
+  overflow-wrap: anywhere;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+  transition: background-color var(--dt-animations-hover-duration-base, 150ms) var(--dt-animations-hover-easing, cubic-bezier(0, 0, 0.2, 1));
+}
+._19ncm8a7-3-13-0:hover ._19ncm8ag-3-13-0 {
+  background-color: var(--_19ncm8a2-3-13-0, var(--dt-colors-background-field-neutral-default-hover, #dadbe4));
+}
+._19ncm8a7-3-13-0._19ncm8af-3-13-0 ._19ncm8ag-3-13-0 {
+  background-color: var(--_19ncm8a2-3-13-0, var(--dt-colors-background-field-neutral-default-hover, #dadbe4));
+}
+._19ncm8a7-3-13-0:active ._19ncm8ag-3-13-0 {
+  background-color: var(--_19ncm8a3-3-13-0, var(--dt-colors-background-field-neutral-default-active, #d0d1dc));
+}
+._19ncm8a7-3-13-0._19ncm8ae-3-13-0 ._19ncm8ag-3-13-0 {
+  background-color: var(--_19ncm8a3-3-13-0, var(--dt-colors-background-field-neutral-default-active, #d0d1dc));
+}
+._19ncm8a7-3-13-0:focus-visible ._19ncm8ag-3-13-0 {
+  box-shadow: 0 0 0 var(--dt-borders-width-emphasized, 2px) var(--_19ncm8a5-3-13-0) inset, 0 0 0 calc(var(--dt-borders-width-emphasized, 2px) + 1px) var(--_19ncm8a6-3-13-0) inset;
+}
+._19ncm8ah-3-13-0 {
+  color: var(--dt-colors-text-neutral-disabled, #595a7d80);
+  text-decoration-color: var(--dt-colors-border-neutral-disabled, #dadbe480);
+}
+._19ncm8a7-3-13-0:hover ._19ncm8ah-3-13-0 {
+  background-color: transparent;
+}
+._19ncm8a7-3-13-0._19ncm8af-3-13-0 ._19ncm8ah-3-13-0 {
+  background-color: transparent;
+}
+._19ncm8a7-3-13-0:active ._19ncm8ah-3-13-0 {
+  background-color: transparent;
+}
+._19ncm8a7-3-13-0._19ncm8ae-3-13-0 ._19ncm8ah-3-13-0 {
+  background-color: transparent;
+}
+._19ncm8ai-3-13-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}
+._19ncm8aj-3-13-0 {
+  --_19ncm8a4-3-13-0: 0px;
+  padding-inline: var(--dt-spacings-size-0, 0);
+  padding-block: calc((1lh - 1em) / 2);
+}
+._19ncm8ak-3-13-0 {
+  padding-inline-start: var(--dt-spacings-size-0, 0);
+}
+._19ncm8al-3-13-0 {
+  padding-inline-end: var(--dt-spacings-size-0, 0);
+}
+._19ncm8am-3-13-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}
+._19ncm8an-3-13-0 {
+  display: inline-flex;
+  align-items: center;
+  vertical-align: top;
+}
+._19ncm8ao-3-13-0 {
+  margin-inline-end: var(--_19ncm8a4-3-13-0, var(--dt-spacings-size-2, 2px));
+}
+._19ncm8ap-3-13-0 {
+  margin-inline-start: var(--_19ncm8a4-3-13-0, var(--dt-spacings-size-2, 2px));
+}
+._19ncm8an-3-13-0 svg {
+  width: 1lh;
+  height: 1lh;
+}
+._19ncm8aq-3-13-0 {
+  --_kvldjh3-3-13-0: 1em;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: -0.165em;
+  margin-inline-start: var(--dt-spacings-size-2, 2px);
+}
+@supports not (width: 1lh) {
+  ._19ncm8aj-3-13-0 {
+    padding-block: 0.2em;
+  }
+  ._19ncm8an-3-13-0 svg {
+    width: 1em;
+    height: 1em;
+  }
+}

package/buttons/inline-button/InlineButton.css.d.ts

@@ -0,0 +1,107 @@
+declare const textColor: `var(--${string})`;
+declare const underlineColor: `var(--${string})`;
+declare const hoverBackgroundColor: `var(--${string})`;
+declare const activeBackgroundColor: `var(--${string})`;
+declare const slotGap: `var(--${string})`;
+declare const focusRingOuter: `var(--${string})`;
+declare const focusRingInner: `var(--${string})`;
+export declare const outerButton: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: {
+        neutral: {};
+        primary: {
+            vars: {
+                [textColor]: string;
+                [underlineColor]: string;
+                [hoverBackgroundColor]: string;
+                [activeBackgroundColor]: string;
+                [focusRingOuter]: string;
+                [focusRingInner]: string;
+            };
+        };
+        success: {
+            vars: {
+                [textColor]: string;
+                [underlineColor]: string;
+                [hoverBackgroundColor]: string;
+                [activeBackgroundColor]: string;
+                [focusRingOuter]: string;
+                [focusRingInner]: string;
+            };
+        };
+        warning: {
+            vars: {
+                [textColor]: string;
+                [underlineColor]: string;
+                [hoverBackgroundColor]: string;
+                [activeBackgroundColor]: string;
+                [focusRingOuter]: string;
+                [focusRingInner]: string;
+            };
+        };
+        critical: {
+            vars: {
+                [textColor]: string;
+                [underlineColor]: string;
+                [hoverBackgroundColor]: string;
+                [activeBackgroundColor]: string;
+                [focusRingOuter]: string;
+                [focusRingInner]: string;
+            };
+        };
+    };
+    visuallyDisabled: {
+        true: {
+            cursor: "not-allowed";
+        };
+    };
+}>;
+export declare const keyboardActive: string;
+export declare const openState: string;
+export declare const innerChrome: import("@vanilla-extract/recipes").RuntimeFn<{
+    visuallyDisabled: {
+        true: {
+            color: string;
+            textDecorationColor: string;
+            selectors: {
+                [x: string]: {
+                    backgroundColor: "transparent";
+                };
+            };
+        };
+    };
+    loadingText: {
+        true: {
+            color: string;
+        };
+    };
+    iconOnly: {
+        true: {
+            paddingInline: string;
+            paddingBlock: "calc((1lh - 1em) / 2)";
+            vars: {
+                [slotGap]: string;
+            };
+            '@supports': {
+                'not (width: 1lh)': {
+                    paddingBlock: "0.2em";
+                };
+            };
+        };
+    };
+    hasPrefix: {
+        true: {
+            paddingInlineStart: string;
+        };
+    };
+    hasSuffix: {
+        true: {
+            paddingInlineEnd: string;
+        };
+    };
+}>;
+export declare const iconSlot: string;
+export declare const prefixSlot: string;
+export declare const suffixSlot: string;
+export declare const loadingSpinner: string;
+export {};
+//# sourceMappingURL=InlineButton.css.d.ts.map

package/buttons/inline-button/InlineButton.d.ts

@@ -0,0 +1,62 @@
+import { type ElementType, type MouseEventHandler, type ReactElement } from 'react';
+import type { AriaDisabledProps, AriaLabelingProps } from '../../core/types/a11y-props.js';
+import type { BehaviorTrackingProps } from '../../core/types/behavior-tracking-props.js';
+import type { DataTestId } from '../../core/types/data-props.js';
+import type { MaskingProps } from '../../core/types/masking-props.js';
+import { type PolymorphicComponentProps } from '../../core/types/polymorph.js';
+import type { StylingProps } from '../../core/types/styling-props.js';
+import type { WithChildren } from '../../core/types/with-children.js';
+/**
+ * Accepted properties for the InlineButton.
+ * @public
+ */
+export interface InlineButtonOwnProps extends AriaDisabledProps, AriaLabelingProps, StylingProps, DataTestId, MaskingProps, BehaviorTrackingProps, WithChildren {
+    /** Called when the button is clicked. Not invoked while the button is disabled or loading. */
+    onClick?: MouseEventHandler;
+    /**
+     * If a button is disabled, it cannot be interacted with: it leaves the tab order
+     * and its pointer and click events are blocked.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * The text, icon, and underline/hover color.
+     * @defaultValue 'neutral'
+     */
+    color?: 'primary' | 'neutral' | 'success' | 'warning' | 'critical';
+    /**
+     * The current loading state of the button. If true, a loading icon is shown with aria-disabled=true
+     * and aria-busy=true. The button stays in the tab order unless `disabled` is also set.
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /** Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. */
+    'aria-expanded'?: boolean | 'true' | 'false';
+    /** Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element. */
+    'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false';
+    /** Identifies the element (or elements) whose contents or presence are controlled by the current element. */
+    'aria-controls'?: string;
+}
+/**
+ * Props for InlineButton combined with the props of the underlying element type.
+ * @public
+ */
+export type InlineButtonProps<E extends ElementType> = PolymorphicComponentProps<E, InlineButtonOwnProps>;
+/**
+ * InlineButton is an inline, text-flowing action trigger. It flows with surrounding
+ * text, wraps naturally across line breaks, and supports `color`, `loading`, and
+ * `disabled`/`aria-disabled` states.
+ *
+ * Use the `as` prop to render a different underlying element. The default (`'span'`)
+ * preserves full multi-line wrapping with `box-decoration-break: clone`. Any other
+ * value (e.g. `as="button"`) opts out of that wrapping behavior — the element will
+ * be a block-like inline-flex container that does not clone the background/padding
+ * across line breaks. This is an accepted trade-off for consumers that need a
+ * specific element type (e.g. to keep a forwarded ref typed as `HTMLButtonElement`).
+ * @public
+ */
+export declare const InlineButton: (<E extends ElementType = "span">(props: InlineButtonProps<E>) => ReactElement | null) & {
+    Prefix: (props: import("./Prefix.js").InlineButtonPrefixProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactElement | null;
+    Suffix: (props: import("./Suffix.js").InlineButtonSuffixProps & import("react").RefAttributes<HTMLSpanElement>) => import("react").ReactElement | null;
+};
+//# sourceMappingURL=InlineButton.d.ts.map