@fpkit/acss 6.3.0 → 6.4.0

package/src/components/dialog/dialog.types.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, ReactNode } from "react";
+import { CSSProperties, ReactElement, ReactNode } from "react";
 
 /**
  * Base properties shared by all dialog variants.
@@ -70,6 +70,7 @@ export interface DialogProps extends BaseDialogProps {
  * @property {string} [btnLabel="Open Dialog"] - Text label for the trigger button
  * @property {"sm" | "md" | "lg"} [btnSize="sm"] - Size variant for the trigger button
  * @property {() => void} [btnOnClick] - Callback fired when trigger button is clicked (before opening)
+ * @property {ReactElement} [icon] - Optional icon element. When provided, renders IconButton instead of Button as trigger.
  */
 export interface DialogModalProps extends BaseDialogProps {
   /** If true, renders as non-modal inline alert using dialog.show() */
@@ -92,6 +93,12 @@ export interface DialogModalProps extends BaseDialogProps {
   btnOnClick?: () => void;
   /** Additional props to pass to the trigger button component */
   btnProps?: Record<string, unknown>;
+  /**
+   * Optional icon element. When provided, renders an IconButton instead of a regular Button as the trigger.
+   * `btnLabel` serves as both `aria-label` and the visible label text (shown at desktop widths via IconButton's responsive label).
+   * Note: `aria-labelledby` cannot be passed via `btnProps` when icon is set — use `btnLabel` instead.
+   */
+  icon?: ReactElement;
 }
 
 /**

package/src/sass/utilities/_display.scss

@@ -0,0 +1,156 @@
+/* ============================================================================
+   DISPLAY UTILITIES - Visibility and Display Control
+   ============================================================================
+
+   Utility classes for showing/hiding elements at any breakpoint.
+   All utilities use !important to win specificity over component styles.
+
+   Breakpoints (matching flex.scss):
+   - sm: 30rem (480px)
+   - md: 48rem (768px)
+   - lg: 62rem (992px)
+   - xl: 80rem (1280px)
+
+   Usage:
+   <div class="hide">Always hidden</div>
+   <div class="hide md:show">Hidden on mobile, shown at md+</div>
+   <span class="sr-only">Screen reader only</span>
+   <a href="#main" class="sr-only-focusable">Skip link</a>
+   <nav class="print:hide">Not printed</nav>
+   ============================================================================ */
+
+/* Base utilities (no breakpoint)
+   ========================================================================== */
+
+/** Removes element from layout and accessibility tree */
+.hide {
+  display: none !important;
+}
+
+/** Restores browser default display per element type */
+.show {
+  display: revert !important;
+}
+
+/** Hides element visually but preserves layout space */
+.invisible {
+  visibility: hidden !important;
+}
+
+/* Accessibility utilities
+   ========================================================================== */
+
+/** Visually hidden but present in the accessibility tree */
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+/** sr-only that becomes visible on focus — for skip links (WCAG 2.4.1) */
+.sr-only-focusable {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+
+  &:focus,
+  &:focus-within {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: 0;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+}
+
+/* Print variant
+   ========================================================================== */
+
+@media print {
+  .print\:hide {
+    display: none !important;
+  }
+}
+
+/* Responsive variants — sm (30rem / 480px)
+   ========================================================================== */
+
+@media (width >= 30rem) {
+  .sm\:hide {
+    display: none !important;
+  }
+
+  .sm\:show {
+    display: revert !important;
+  }
+
+  .sm\:invisible {
+    visibility: hidden !important;
+  }
+}
+
+/* Responsive variants — md (48rem / 768px)
+   ========================================================================== */
+
+@media (width >= 48rem) {
+  .md\:hide {
+    display: none !important;
+  }
+
+  .md\:show {
+    display: revert !important;
+  }
+
+  .md\:invisible {
+    visibility: hidden !important;
+  }
+}
+
+/* Responsive variants — lg (62rem / 992px)
+   ========================================================================== */
+
+@media (width >= 62rem) {
+  .lg\:hide {
+    display: none !important;
+  }
+
+  .lg\:show {
+    display: revert !important;
+  }
+
+  .lg\:invisible {
+    visibility: hidden !important;
+  }
+}
+
+/* Responsive variants — xl (80rem / 1280px)
+   ========================================================================== */
+
+@media (width >= 80rem) {
+  .xl\:hide {
+    display: none !important;
+  }
+
+  .xl\:show {
+    display: revert !important;
+  }
+
+  .xl\:invisible {
+    visibility: hidden !important;
+  }
+}

package/src/sass/utilities/_index.scss

@@ -15,3 +15,6 @@
 @forward "./color-text";
 @forward "./color-bg";
 @forward "./color-border";
+
+/* Display / visibility utilities */
+@forward "./display";

package/src/sass/utilities/display.mdx

@@ -0,0 +1,203 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="FP.React Components/Utilities/Display/Readme" />
+
+# Display & Visibility Utilities
+
+## Summary
+
+`_display.scss` provides a set of atomic utility classes for controlling element
+visibility and display at any breakpoint. These utilities use `!important` to
+override component-level specificity, making them reliable for layout corrections
+and responsive show/hide patterns.
+
+The utility layer covers four concerns:
+
+- **Layout hiding** — remove an element from the layout and accessibility tree
+- **Visual hiding** — hide visually while preserving layout space
+- **Accessibility hiding** — hide visually but keep the element in the a11y tree
+- **Print control** — suppress elements when printing
+
+---
+
+## Base Class Reference
+
+| Class              | CSS Applied                          | Effect                                              |
+| ------------------ | ------------------------------------ | --------------------------------------------------- |
+| `.hide`            | `display: none !important`           | Removed from layout and accessibility tree           |
+| `.show`            | `display: revert !important`         | Restores browser default display for the element    |
+| `.invisible`       | `visibility: hidden !important`      | Visually hidden; layout space is preserved (ghost)  |
+| `.sr-only`         | Visually-hidden technique (absolute) | Hidden visually; announced by screen readers        |
+| `.sr-only-focusable` | sr-only + visible on `:focus`      | Skip-link pattern — visible on keyboard focus       |
+| `.print:hide`      | `display: none !important` in print  | Hidden when printing; visible on screen             |
+
+---
+
+## Responsive Class Reference
+
+Each breakpoint prefix applies its utility at that viewport width **and above**
+(mobile-first). Combine with a base class to create responsive patterns.
+
+| Class          | Breakpoint      | CSS Applied                     |
+| -------------- | --------------- | ------------------------------- |
+| `.sm:hide`     | `>= 30rem`      | `display: none !important`      |
+| `.sm:show`     | `>= 30rem`      | `display: revert !important`    |
+| `.sm:invisible`| `>= 30rem`      | `visibility: hidden !important` |
+| `.md:hide`     | `>= 48rem`      | `display: none !important`      |
+| `.md:show`     | `>= 48rem`      | `display: revert !important`    |
+| `.md:invisible`| `>= 48rem`      | `visibility: hidden !important` |
+| `.lg:hide`     | `>= 62rem`      | `display: none !important`      |
+| `.lg:show`     | `>= 62rem`      | `display: revert !important`    |
+| `.lg:invisible`| `>= 62rem`      | `visibility: hidden !important` |
+| `.xl:hide`     | `>= 80rem`      | `display: none !important`      |
+| `.xl:show`     | `>= 80rem`      | `display: revert !important`    |
+| `.xl:invisible`| `>= 80rem`      | `visibility: hidden !important` |
+
+---
+
+## Breakpoint Reference
+
+Breakpoints match the flex layout system (`flex.scss`).
+
+| Token | rem    | px     |
+| ----- | ------ | ------ |
+| `sm`  | 30rem  | 480px  |
+| `md`  | 48rem  | 768px  |
+| `lg`  | 62rem  | 992px  |
+| `xl`  | 80rem  | 1280px |
+
+---
+
+## Responsive Patterns
+
+### Mobile-only element (hide at `md` and above)
+
+```html
+<div class="md:hide">Only visible on mobile</div>
+```
+
+### Desktop-only element (hide by default, show at `md` and above)
+
+```html
+<div class="hide md:show">Only visible at 768px+</div>
+```
+
+### Large screen only
+
+```html
+<nav class="hide lg:show">Desktop navigation</nav>
+```
+
+### Invisible placeholder on wide screens
+
+Preserve the layout gap while hiding the element visually at `xl`:
+
+```html
+<div class="xl:invisible">Takes up space but invisible at 1280px+</div>
+```
+
+### Stacked responsive rules
+
+Classes compose additively. This element hides at `sm` but reappears at `lg`:
+
+```html
+<aside class="sm:hide lg:show">Sidebar</aside>
+```
+
+> **Note:** Because each breakpoint class uses `!important`, later (wider)
+> breakpoints win over earlier ones when viewport conditions overlap.
+
+---
+
+## Accessibility Utilities
+
+### `.sr-only` — Screen-reader-only content
+
+Hides an element visually using the established visually-hidden technique, while
+keeping it present in the accessibility tree so screen readers still announce it.
+
+```html
+<span class="sr-only">Current page: Home</span>
+
+<button>
+  <svg aria-hidden="true"><!-- icon --></svg>
+  <span class="sr-only">Close dialog</span>
+</button>
+```
+
+WCAG reference: SC 1.3.1 Info and Relationships — meaningful content must be
+programmatically determinable.
+
+### `.sr-only-focusable` — Skip links (WCAG 2.4.1)
+
+Behaves like `.sr-only` until the element receives keyboard focus, at which
+point it becomes fully visible. The standard pattern for skip-navigation links.
+
+```html
+<a href="#main-content" class="sr-only-focusable">Skip to main content</a>
+
+<main id="main-content">
+  <!-- page content -->
+</main>
+```
+
+On focus, the element snaps back to `position: static`, `width: auto`,
+`height: auto` — appearing at its natural position in the document flow.
+
+WCAG reference: SC 2.4.1 Bypass Blocks — a mechanism to skip repeated
+navigation is required for keyboard users.
+
+---
+
+## Print Utility
+
+### `.print:hide` — Hide in print
+
+The element renders normally on screen but is suppressed via
+`@media print { display: none !important }`. Use for navigation, ads,
+sidebars, or any chrome that clutters a printed page.
+
+```html
+<nav class="print:hide">Main navigation</nav>
+<aside class="print:hide">Related articles sidebar</aside>
+
+<article>
+  <!-- This content prints normally -->
+</article>
+```
+
+---
+
+## Best Practices
+
+### Prefer semantic HTML first
+
+Use proper `hidden` attribute or ARIA before reaching for `.hide`:
+
+```html
+<!-- Native hidden (preferred for static content) -->
+<div hidden>Not visible, not in a11y tree</div>
+
+<!-- .hide for dynamic responsive cases or JS-toggled visibility -->
+<div class="hide md:show">Conditionally visible</div>
+```
+
+### Use `.sr-only` instead of `aria-hidden` for meaningful content
+
+`aria-hidden="true"` removes content from the a11y tree entirely. `.sr-only`
+hides it visually but keeps it accessible. Choose based on intent:
+
+```html
+<!-- Decorative icon — hide from screen readers -->
+<svg aria-hidden="true">...</svg>
+
+<!-- Supplemental label — hide visually but announce -->
+<span class="sr-only">Opens in a new tab</span>
+```
+
+### `!important` is intentional
+
+All display utilities use `!important`. This is by design: utilities are
+override-layer rules meant to win over component styles. If you find yourself
+fighting a utility with `!important` in component CSS, that's a signal to
+reconsider the component's default state rather than escalating specificity.

package/src/sass/utilities/display.stories.tsx

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import React from "react";
+
+/**
+ * Display & Visibility Utilities
+ *
+ * CSS utility classes for showing/hiding elements at different breakpoints.
+ * All classes use `!important` to override component specificity.
+ *
+ * Use the viewport toolbar to verify responsive variants.
+ */
+const meta: Meta = {
+  title: "FP.React Components/Utilities/Display",
+  tags: ["stable"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Responsive display and visibility utilities. Switch viewports in the toolbar to verify breakpoint behavior.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+const boxStyle: React.CSSProperties = {
+  padding: "0.75rem 1rem",
+  background: "#e0f2fe",
+  border: "1px solid #0ea5e9",
+  borderRadius: "0.25rem",
+  fontFamily: "monospace",
+  fontSize: "0.875rem",
+};
+
+const hiddenBoxStyle: React.CSSProperties = {
+  ...boxStyle,
+  background: "#fef9c3",
+  border: "1px solid #ca8a04",
+};
+
+/** `.hide` removes from layout + accessibility tree. `.show` restores it. */
+export const HideShow: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+      <div style={boxStyle}>Visible (no class)</div>
+      <div className="hide" style={hiddenBoxStyle}>
+        Hidden — .hide (display: none)
+      </div>
+      <div className="show" style={boxStyle}>
+        Always shown — .show (display: revert)
+      </div>
+    </div>
+  ),
+};
+
+/** `.invisible` hides visually but preserves layout space (ghost element). */
+export const Invisible: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "0.5rem" }}>
+      <div style={boxStyle}>Before</div>
+      <div className="invisible" style={hiddenBoxStyle}>
+        .invisible — layout preserved, visually hidden
+      </div>
+      <div style={boxStyle}>After (notice the gap)</div>
+    </div>
+  ),
+};
+
+/**
+ * `.sr-only` — visually hidden but present in the accessibility tree.
+ * `.sr-only-focusable` — sr-only that becomes visible on focus (skip links).
+ */
+export const ScreenReaderOnly: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
+      <p style={{ margin: 0 }}>
+        The text below is visually hidden but read by screen readers:
+      </p>
+      <span className="sr-only">
+        This text is only announced by screen readers
+      </span>
+      <a href="#main" className="sr-only-focusable" style={boxStyle}>
+        Tab to focus me — .sr-only-focusable (skip link pattern)
+      </a>
+    </div>
+  ),
+};
+
+/** `.print:hide` — hidden when printing. Open print preview to verify. */
+export const PrintHide: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+      <div style={boxStyle}>Always visible (printed)</div>
+      <nav className="print:hide" style={hiddenBoxStyle}>
+        .print:hide — visible on screen, hidden in print
+      </nav>
+    </div>
+  ),
+};
+
+/**
+ * Responsive hide/show.
+ * Switch the viewport toolbar to verify each breakpoint:
+ * - sm (480px): `.sm:hide` disappears
+ * - md (768px): `.md:show` appears
+ * - lg (992px): `.lg:hide` disappears
+ */
+export const ResponsiveVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
+      <div style={boxStyle}>Always visible</div>
+      <div className="sm:hide" style={hiddenBoxStyle}>
+        .sm:hide — hidden at 480px+
+      </div>
+      <div className="hide md:show" style={boxStyle}>
+        .hide .md:show — hidden by default, shown at 768px+
+      </div>
+      <div className="lg:hide" style={hiddenBoxStyle}>
+        .lg:hide — hidden at 992px+
+      </div>
+      <div className="hide xl:show" style={boxStyle}>
+        .hide .xl:show — hidden by default, shown at 1280px+
+      </div>
+    </div>
+  ),
+};
+
+/** `.md:invisible` at md+ — layout space preserved, element invisible. */
+export const ResponsiveInvisible: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "0.5rem" }}>
+      <div style={boxStyle}>Before</div>
+      <div className="md:invisible" style={hiddenBoxStyle}>
+        .md:invisible — invisible at 768px+ (layout preserved)
+      </div>
+      <div style={boxStyle}>After</div>
+    </div>
+  ),
+};

package/src/styles/alert/alert.css

@@ -1,16 +1,3 @@
-/* Screen reader only utility class */
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 [role=alert] {
   /* Success colors - WCAG AA compliant (mapped to semantic tokens) */
   --alert-success-bg: var(--color-success-bg);

package/src/styles/alert/alert.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/alert/alert.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA,YACE;EAEF;EACA;AAWA;AAMA;AAmEA;AA8BA;AAKA;;AArHA;EACE;EACA;;AAGF;EAlDF;IAmDI;;;AAIF;EACE;EACA;;AAIF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;AAEA;AASA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA;;AAKJ;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;;AAIF;AACE;;AAGF;EACE","file":"alert.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/alert/alert.scss"],"names":[],"mappings":"AAAA;AACE;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA,YACE;EAEF;EACA;AAWA;AAMA;AAmEA;AA8BA;AAKA;;AArHA;EACE;EACA;;AAGF;EAlDF;IAmDI;;;AAIF;EACE;EACA;;AAIF;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;AAEA;AASA;;AARA;EACE;EACA;EACA;EACA;EACA;;AAIF;AAAA;AAAA;AAAA;AAAA;EAKE;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA;;AAKJ;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAKJ;EACE;;AAIF;AACE;;AAGF;EACE","file":"alert.css"}

package/src/styles/buttons/icon-button.css

@@ -1,31 +1,70 @@
+:root {
+  --icon-btn-size: 3rem;
+  --icon-btn-gap: 0.375rem;
+  --icon-btn-padding-inline: 0.75rem;
+}
+
+[data-icon-btn] [data-icon-label],
+[data-icon-btn] .icon-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 button[data-icon-btn],
+button.icon-btn,
+[data-icon-btn],
 .icon-btn {
   --btn-color: currentColor;
+  padding: 0;
+  width: var(--icon-btn-size);
+  height: var(--icon-btn-size);
+  display: inline-grid;
+  place-items: center;
 }
-
-button[data-icon-btn~=has-label],
+button[data-icon-btn][data-icon-btn~=has-label],
+button.icon-btn[data-icon-btn~=has-label],
+[data-icon-btn][data-icon-btn~=has-label],
 .icon-btn[data-icon-btn~=has-label] {
-  gap: 0.375rem;
-  padding-inline: 0.75rem;
+  width: max-content;
+  min-width: var(--icon-btn-size);
+  gap: var(--icon-btn-gap);
+  padding-inline: var(--icon-btn-padding-inline);
+  grid-auto-flow: column;
 }
-button[data-icon-btn~=has-label] [data-icon-label],
-.icon-btn[data-icon-btn~=has-label] [data-icon-label] {
+button[data-icon-btn][data-icon-btn~=has-label] [data-icon-label],
+button[data-icon-btn][data-icon-btn~=has-label] .icon-label,
+button.icon-btn[data-icon-btn~=has-label] [data-icon-label],
+button.icon-btn[data-icon-btn~=has-label] .icon-label,
+[data-icon-btn][data-icon-btn~=has-label] [data-icon-label],
+[data-icon-btn][data-icon-btn~=has-label] .icon-label,
+.icon-btn[data-icon-btn~=has-label] [data-icon-label],
+.icon-btn[data-icon-btn~=has-label] .icon-label {
   font-size: var(--btn-fs, 0.875rem);
   line-height: 1;
   white-space: nowrap;
 }
 
-@media (max-width: 48rem) {
-  [data-icon-label] {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
+@media (min-width: 48rem) {
+  [data-icon-btn] [data-icon-label],
+  [data-icon-btn] .icon-label {
+    position: static;
+    width: auto;
+    height: auto;
+    padding: unset;
+    margin: unset;
+    overflow: visible;
+    clip: unset;
+    clip-path: unset;
     white-space: nowrap;
-    border: 0;
+    border: unset;
   }
 }
 

package/src/styles/buttons/icon-button.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/buttons/icon-button.scss"],"names":[],"mappings":"AASA;AAAA;EAEE;;;AAMF;AAAA;EAEE;EACA;;AAEA;AAAA;EACE;EACA;EACA;;;AAOJ;EACE;IACE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA","file":"icon-button.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/buttons/icon-button.scss"],"names":[],"mappings":"AAQA;EACE;EACA;EACA;;;AAKF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAOF;AAAA;AAAA;AAAA;EAIE;EAEA;EACA;EACA;EACA;EACA;;AAKA;AAAA;AAAA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;EACA;;;AAQN;EACE;AAAA;IAEE;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA;IACA","file":"icon-button.css"}

package/src/styles/dialog/dialog.css

@@ -76,6 +76,7 @@ dialog section {
 .dialog-header button[type=button] {
   background-color: var(--dialog-button-bg);
   border: var(--dialog-button-border);
+  color: var(--dialog-close-color);
   cursor: pointer;
   /* Keyboard focus indicator */
   /* Remove default focus for mouse users */

package/src/styles/dialog/dialog.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/dialog/dialog.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;AAOA;AAQA;;AAbA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;;;AAKN;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;AAAA;EACE;EACA;;AAGF;AAAA;EACE","file":"dialog.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/dialog/dialog.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;;;AAGF;AACA;EACE;IACE;IACA;IACA;IACA;IACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;AAOA;AAQA;;AAbA;EACE;EACA;;AAIF;EACE;EACA;EACA;EACA;;AAIF;EACE;;;AAKN;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;AAEA;;AACA;AAAA;EACE;EACA;;AAGF;AAAA;EACE","file":"dialog.css"}