@fusion.dev/helix 0.210.0 → 0.211.1

package/types/vue.d.ts

@@ -9531,12 +9531,22 @@ export type HelixIconButtonHelixPressElementEvent =
   HelixIconButtonElementEvent<HelixPressEvent>;
 
 export type HelixIconButtonVueProps = {
-  /** Raises the button off the page with a shadow.
+  /** The ground under the button, for one that lies over a busy surface such as
+a map or a board. `glass` lets the surface through under a blur, `frosted`
+turns the pair up for a surface too busy for glass, and `transparent` draws
+no ground at all. Unset, the ground is the emphasis's own.
+
+A solid button keeps its fill, which is what it means: the material is the
+ground of the other emphases. */
+  material?: (HelixIconButton["material"]) | undefined;
+  /** Floats the button over the page, with the theme's floating edge and shadow,
+as a popover floats. A ghost button that floats is drawn on the overlay a
+floating panel uses, so its glyph has a ground under it.
 
 Separate from `shape`, because they are separate facts: a docked control is
 raised whatever its outline, and a circle inside a toolbar is not raised at
-all. Shadow rather than a border, since what is under a floating control is
-the page and a line drawn on the page is not the same as being above it. */
+all. The theme says whether what floats is told apart by a shadow, a line,
+or both, and a raised button follows it as every floating panel does. */
   raised?: (HelixIconButton["raised"]) | undefined;
   /** The button's shape. Leave it unset for a rounded square, or set `circle`.
 
@@ -23873,19 +23883,25 @@ export type CustomCssProperties = {
   "--copy-button-size"?: (string) | undefined;
   /** The check mark's color after a copy. */
   "--copy-button-success-color"?: (string) | undefined;
+  /** The filter behind a button with `material`, which a translucent ground needs to be read. */
+  "--icon-button-backdrop"?: (string) | undefined;
   /** Fill behind the button, in every state. */
   "--icon-button-background-color"?: (string) | undefined;
   /** Fill behind the button while it is pressed. Without it, a press shows the fill of the state under it. */
   "--icon-button-background-color-active"?: (string) | undefined;
   /** Fill behind the button under the pointer. Without it, `--icon-button-background-color` also applies on hover. */
   "--icon-button-background-color-hover"?: (string) | undefined;
+  /** Edge color of the control, where its emphasis or `raised` draws an edge. */
+  "--icon-button-border-color"?: (string) | undefined;
+  /** Edge width of the control, one to four widths as `border-width` takes them. The theme's floating edge on a raised button, `--helix-border-floating`. */
+  "--icon-button-border-width"?: (string) | undefined;
   /** Icon color. */
   "--icon-button-foreground-color"?: (string) | undefined;
   /** Icon color while the button is pressed. Without it, a press shows the color of the state under it. */
   "--icon-button-foreground-color-active"?: (string) | undefined;
-  /** Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`. */
+  /** Corner radius of the control, which a group flattens through `--button-radius-start` and `--button-radius-end`, or a corner at a time through `--button-radius-start-start`, `--button-radius-start-end`, `--button-radius-end-start` and `--button-radius-end-end`, as Button reads them. */
   "--icon-button-radius"?: (string) | undefined;
-  /** Shadow of a raised icon button. */
+  /** Shadow of a raised icon button. The theme's floating shadow, `--helix-shadow-floating`. */
   "--icon-button-shadow"?: (string) | undefined;
   /** Edge length of the control. */
   "--icon-button-size"?: (string) | undefined;
@@ -26373,7 +26389,7 @@ export interface WcToolkitVueGlobalComponents {
     HelixHeatmapVueProps,
     HelixHeatmapVueEvents
   >;
-  /** Icon Button is a top-level component. A namespace such as 'Tabs.Tab' is for a part of a larger component, and an icon-only button is a complete button with different content and a different shape.  Always set 'label'. An icon-only control with no accessible name is announced as "button" and nothing else, which is the most common way a toolbar becomes unusable without sight. */
+  /** Icon Button is a top-level component. A namespace such as 'Tabs.Tab' is for a part of a larger component, and an icon-only button is a complete button with different content and a different shape.  Always set 'label'. An icon-only control with no accessible name is announced as "button" and nothing else, which is the most common way a toolbar becomes unusable without sight.  Set 'raised' for a button that floats over the page, such as one over a map or a board, and 'material' for the ground under it there. A raised button takes the theme's floating edge and shadow, as a popover does. */
   "helix-icon-button": DefineCustomElement<
     HelixIconButton,
     HelixIconButtonVueProps,