@fpkit/acss 0.5.4 → 0.5.6

package/src/hooks/useDialogClickHandler.ts

@@ -0,0 +1,26 @@
+import { useCallback, RefObject } from "react";
+
+export const useDialogClickHandler = (
+  dialogRef: RefObject<HTMLDialogElement>,
+  handleClose: () => void
+) => {
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLDialogElement>) => {
+      const dialogDimensions = dialogRef.current?.getBoundingClientRect();
+      if (dialogDimensions) {
+        const isClickOutside =
+          e.clientY < dialogDimensions.top ||
+          e.clientY > dialogDimensions.bottom ||
+          e.clientX < dialogDimensions.left ||
+          e.clientX > dialogDimensions.right;
+
+        if (isClickOutside) {
+          handleClose();
+        }
+      }
+    },
+    [dialogRef, handleClose]
+  );
+
+  return handleClick;
+};

package/src/index.scss

@@ -1,22 +1,23 @@
-@import './sass/reset';
-@import './sass/layout';
-@import './sass/type';
-@import './sass/properties';
-@import './sass/globals';
-@import './sass/elements';
-@import './components/buttons/button.scss';
-@import './components/tag/tag.scss';
-@import './components/images/img.scss';
-@import './components/cards/card.scss';
-@import './components/progress/progress.scss';
-@import './components/details/details.scss';
-@import './components/link/link.scss';
-@import './components/layout/landmarks.scss';
-@import './sass/_grid.scss';
-@import './components/badge/badge.scss';
-@import './components/nav/nav.scss';
-@import './components/form/form.scss';
-@import './components/breadcrumbs/breadcrumb.scss';
-@import './components/text-to-speech/text-to-speech.scss';
-@import './components/icons/icon.scss';
-@import './sass/styles';
+@use "./sass/reset";
+@use "./sass/layout";
+@use "./sass/type";
+@use "./sass/properties";
+@use "./sass/globals";
+@use "./sass/elements";
+@use "./components/buttons/button.scss";
+@use "./components/tag/tag.scss";
+@use "./components/images/img.scss";
+@use "./components/cards/card.scss";
+@use "./components/progress/progress.scss";
+@use "./components/details/details.scss";
+@use "./components/link/link.scss";
+@use "./components/layout/landmarks.scss";
+@use "./components/dialog/dialog.scss";
+@use "./sass/_grid.scss";
+@use "./components/badge/badge.scss";
+@use "./components/nav/nav.scss";
+@use "./components/form/form.scss";
+@use "./components/breadcrumbs/breadcrumb.scss";
+@use "./components/alert/alert.scss";
+@use "./components/text-to-speech/text-to-speech.scss";
+@use "./sass/styles";

package/src/index.ts

@@ -1,35 +1,36 @@
-import { TextToSpeech } from './components/text-to-speech/TextToSpeech'
+// import { TextToSpeech } from "./components/text-to-speech/TextToSpeech";
 // import { Popover } from './hooks/popover/popover'
 // export { Textarea } from './components/form/textarea';
+// export { ModalDialog as Dialog } from "./components/modal/dialog";
 
-export { Button } from './components/buttons/button'
-export { Card } from './components/cards/card'
-export { Dialog } from './components/modal/dialog'
-export { Field } from './components/form/fields'
-export * from './components/layout/landmarks'
-export * from './components/layout/landmarks'
-export { Icon } from './components/icons/icon'
-export { Img } from './components/images/img'
-export { Input } from './components/form/inputs'
-export { Link } from './components/link/link'
-export { List } from './components/list/list'
-export { Modal } from './components/modal/modal'
-export * from './components/nav/nav'
-export { Popover } from './components/popover/popover'
-export { RenderTable as TBL } from './components/tables/table'
-export * from './components/tag/tag'
-export * from './components/tables/table-elements'
-export * from './components/details/details'
-export * from './components/text/text'
-export * from './components/form/textarea'
-export * from './components/nav/nav'
-export * from './components/heading/heading'
-export * from './components/breadcrumbs/breadcrumb'
-export * from './components/text-to-speech/TextToSpeech'
-export { TextToSpeech } from './components/text-to-speech/TextToSpeech'
+export { Button } from "./components/buttons/button";
+export { Card } from "./components/cards/card";
+export { Field } from "./components/form/fields";
+export * from "./components/layout/landmarks";
+export * from "./components/layout/landmarks";
+export { Icon } from "./components/icons/icon";
+export { Img } from "./components/images/img";
+export { Input } from "./components/form/inputs";
+export { Link } from "./components/link/link";
+export { List } from "./components/list/list";
+export { Modal } from "./components/modal/modal";
+export * from "./components/nav/nav";
+export { Popover } from "./components/popover/popover";
+export { RenderTable as TBL } from "./components/tables/table";
+export * from "./components/tag/tag";
+export * from "./components/tables/table-elements";
+export * from "./components/details/details";
+export * from "./components/text/text";
+export * from "./components/form/textarea";
+export * from "./components/nav/nav";
+export * from "./components/heading/heading";
+export * from "./components/breadcrumbs/breadcrumb";
+export * from "./components/text-to-speech/TextToSpeech";
+export { Dialog } from "./components/dialog/dialog";
+export { TextToSpeech } from "./components/text-to-speech/TextToSpeech";
 
-export { default as To } from './components/link/link'
-export { default as FP } from './components/fp'
-export { default as Box } from './components/fp'
+export { default as To } from "./components/link/link";
+export { default as FP } from "./components/fp";
+export { default as Box } from "./components/fp";
 
-export * from './components/ui'
+export * from "./components/ui";

package/src/patterns/page/page-header.stories.tsx

@@ -1,44 +1,40 @@
-import { StoryObj, Meta } from '@storybook/react'
-import { within, userEvent, screen } from '@storybook/test'
+import { StoryObj, Meta } from "@storybook/react";
+// import { within, userEvent, screen } from "@storybook/test";
 
-
-import PageHeader, { HeaderVariants } from './page-header.js'
-import { Img } from '#components/images/img'
+import PageHeader, { HeaderVariants } from "./page-header.js";
+import { Img } from "#components/images/img";
 
 const meta: Meta<typeof PageHeader> = {
-  title: 'FP.React Patterns/PageHeader',
+  title: "FP.React Patterns/PageHeader",
   component: PageHeader,
+  tags: ["alpha"],
   args: {
-    headerTitle: 'Page Header',
-    headerSubtitle: 'Place your cool elevator pitch here...',
+    headerTitle: "Page Header",
+    headerSubtitle: "Place your cool elevator pitch here...",
     headerBackground: <Img src="https://picsum.photos/2400/600" alt="" />,
   },
-} as Meta
+} as Meta;
 
-export default meta
-type Story = StoryObj<typeof PageHeader>
+export default meta;
+type Story = StoryObj<typeof PageHeader>;
 
 export const PageHeaderComponent: Story = {
   args: {},
-  name: 'Page Header',
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    //expect(canvas).toBeInTheDocument()
-  },
-}
+  name: "Page Header",
+};
 
 export const Cover: Story = {
   args: {
     ...PageHeaderComponent.args,
     variant: HeaderVariants.Cover,
   },
-  name: 'Cover Style',
-} as Story
+  name: "Cover Style",
+} as Story;
 
 export const Banner: Story = {
   args: {
     ...PageHeaderComponent.args,
     variant: HeaderVariants.Banner,
   },
-  name: 'Banner Style',
-} as Story
+  name: "Banner Style",
+} as Story;

package/src/sass/_globals.scss

@@ -1,10 +1,13 @@
 :root {
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue',
-    Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-    'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
+    Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol", "Noto Color Emoji";
   --TRUE: initial;
   --FALSE: ;
   --fs-weight: 500;
+  --min-w: 20rem;
+  --border-radius: 0.25rem;
+  --padding: 1.5rem;
 }
 
 html {
@@ -23,7 +26,7 @@ body {
     flex-grow: 1;
   }
 
-  > a[href^='#'] {
+  > a[href^="#"] {
     position: absolute;
     top: -4rem;
     left: 0;
@@ -46,6 +49,9 @@ body {
 * + ul,
 * + section {
   margin-block-start: 1rem;
+  &:empty {
+    display: none;
+  }
 }
 
 main,
@@ -87,14 +93,14 @@ ol {
   flex-direction: var(--li-direction, column);
   gap: var(--li-gap, 0.2rem);
   flex-wrap: var(--li-wrap, nowrap);
-  padding-inline-start: var(--li-ps, var(--spc-2));
-  &[role='list'],
-  &[data-list~='unstyled'] {
+  padding-inline-start: var(--li-ps, var(--spc-3));
+  &[role="list"],
+  &[data-list~="unstyled"] {
     list-style: var(--li-style, none);
     margin-block-end: var(--li-my, 0);
     margin-block-start: var(--li-mx, 0);
   }
-  &[data-list~='inline'] {
+  &[data-list~="inline"] {
     --li-direction: row;
     --li-gap: 1rem;
     --li-wrap: wrap;
@@ -129,30 +135,6 @@ h6 {
   line-height: 1.2;
 }
 
-h1 {
-  font-size: var(--h1, var(--fs-6));
-}
-
-h2 {
-  font-size: var(--h2, var(--fs-5));
-}
-
-h3 {
-  font-size: var(--h3, var(--fs-4));
-}
-
-h4 {
-  font-size: var(--h4, var(--fs-3));
-}
-
-h5 {
-  font-size: var(--h5, var(--fs-2));
-}
-
-h6 {
-  font-size: var(--h6, var(--fs-1));
-}
-
 hr {
   --hr-h: 0.0625rem;
   --hr-color: lightgray;

package/src/sass/_styles.scss

@@ -1 +1,2 @@
-@use './styles/shadows';
+@use "./styles/shadows";
+@use "./styles/colors";

package/src/sass/styles/_colors.scss

@@ -0,0 +1,13 @@
+:root {
+  --transparent: transparent;
+}
+
+.transparent {
+  background-color: var(--transparent);
+  &-border {
+    border-color: var(--transparent);
+  }
+  &-color {
+    color: var(--transparent);
+  }
+}

package/src/styles/alert/alert.css

@@ -0,0 +1,68 @@
+[role=alert] {
+  /* Success colors */
+  --alert-success-bg: #e6f4ea;
+  --alert-success-border: #34a853;
+  --alert-success-text: #1e4620;
+  /* Error colors */
+  --alert-error-bg: #fdeded;
+  --alert-error-border: #d32f2f;
+  --alert-error-text: #5f2120;
+  /* Warning colors */
+  --alert-warning-bg: #fff4e5;
+  --alert-warning-border: #ff9800;
+  --alert-warning-text: #663c00;
+  /* Info colors */
+  --alert-info-bg: #e5f6fd;
+  --alert-info-border: #0288d1;
+  --alert-info-text: #084154;
+  --alert-border: thin solid currentColor;
+  background-color: var(--alert-bg, whitesmoke);
+  border: var(--alert-border, currentColor);
+  color: var(--alert-color, currentColor);
+  padding: var(--alert-padding, var(--spc-4));
+  margin-block-end: var(--alert-margin-block-end);
+  font-size: var(--fs-0);
+  line-height: 1.6;
+  display: flex;
+  flex-direction: row;
+  border-radius: var(--alert-border-radius, var(--border-radius));
+  border: var(--alert-border);
+  gap: var(--alert-gap, var(--spc-4));
+}
+[role=alert] div {
+  margin-block-start: 0;
+  align-items: center;
+}
+[role=alert] .alert-message {
+  flex: 2;
+  margin-block-start: 0;
+}
+[role=alert] .alert-message h3 {
+  margin-block-end: 0;
+}
+[role=alert][data-alert~=info] {
+  --alert-bg: var(--alert-info-bg);
+  --alert-color: var(--alert-info-text);
+  border-color: var(--alert-info-border);
+}
+[role=alert][data-alert~=warning] {
+  --alert-bg: var(--alert-warning-bg);
+  --alert-color: var(--alert-warning-text);
+  border-color: var(--alert-warning-border);
+}
+[role=alert][data-alert~=error] {
+  --alert-bg: var(--alert-error-bg);
+  --alert-color: var(--alert-error-text);
+  border-color: var(--alert-error-border);
+}
+[role=alert][data-alert~=success] {
+  --alert-bg: var(--alert-success-bg);
+  --alert-color: var(--alert-success-text);
+  border-color: var(--alert-success-border);
+}
+[role=alert] button[data-btn~=icon] {
+  --btn-bg: transparent;
+  max-height: fit-content;
+}
+
+/*# sourceMappingURL=alert.css.map */

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

@@ -0,0 +1 @@
+{"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;EAEA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAIA;EACE;EACA","file":"alert.css"}

package/src/styles/badge/badge.css

@@ -1,10 +1,10 @@
 sup:has(> span) {
   --badge-bg: lightgray;
   --badge-color: currentColor;
-  --badge-radius: 0.15rem;
-  --badge-padding: 0.15rem;
+  --badge-radius: 0.5rem;
+  --badge-padding: 0.3rem;
   --badge-v-align: 0.5rem;
-  --badge-fs: clamp(0.4rem, 0.5rem + 0.5vw, 7rem);
+  --badge-fs: var(--fs-1);
   background-color: var(--badge-bg);
   color: var(--badge-color);
   padding: var(--badge-padding);

package/src/styles/breadcrumbs/breadcrumb.css

@@ -5,7 +5,7 @@ nav[data-breadcrumb] {
   --breadcrumb-gap: 0.5rem;
   --breadcrumb-color: currentColor;
   --breadcrumb-current-color: rgb(46, 46, 46);
-  --breadcrumb-fs: var(--fs-0);
+  --breadcrumb-fs: var(--fs-3);
   margin-inline: unset;
   padding-inline: unset;
 }

package/src/styles/buttons/button.css

@@ -1,6 +1,7 @@
 button {
-  --btn-sm: calc(12rem / 16);
-  --btn-md: calc(16rem / 16);
+  --btn-xs: 0.6rem;
+  --btn-sm: 0.7rem;
+  --btn-md: 0.85rem;
   --btn-lg: calc(21rem / 16);
   --btn-pill: 100rem;
   --btn-height: 2.5rem;
@@ -27,6 +28,9 @@ button {
   background-color: var(--btn-bg, var(--btn));
   outline: none;
   width: var(--btn-width);
+  display: inline-flex;
+  align-items: center;
+  line-height: 0cap;
 }
 button[type] {
   background-color: var(--btn-bg, var(--neutral-300));
@@ -66,14 +70,33 @@ button[type=submit] {
 button[data-fp-btn~=pill], button[data-btn~=pill], button[data-style~=pill] {
   border-radius: var(--btn-pill, 100rem);
 }
+button[data-btn~=xs] {
+  padding-inline: var(--btn-xs);
+  --btn-fs: var(--btn-xs);
+  --btn-height: 1.5rem;
+  text-transform: uppercase;
+}
 button[data-btn~=sm] {
   --btn-fs: var(--btn-sm);
+  --btn-height: 1.75rem;
 }
 button[data-btn~=md] {
   --btn-fs: var(--btn-md);
+  --btn-height: 2rem;
 }
 button[data-btn~=lg] {
   --btn-fs: var(--btn-lg);
+  --btn-height: 2.5rem;
+}
+button[data-btn~=icon] {
+  padding: unset;
+  height: unset;
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  text-align: center;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 button[data-btn~=text] {
   --btn-bg: transparent;

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

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/buttons/button.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA","file":"button.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/buttons/button.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA","file":"button.css"}

package/src/styles/details/details.css

@@ -1,6 +1,6 @@
 details {
   --details-w: 100%;
-  --details-h: fit-content;
+  --details-h: max-content;
   --details-border: 1px solid #dfdfdf;
   --details-display: flex;
   --details-justify: flex-start;
@@ -8,15 +8,16 @@ details {
   --details-gap: 0rem;
   --details-px: 1.5rem;
   --details-py: 1rem;
-  --details-radius: 0.5rem;
+  --details-radius: var(--border-radius);
   --summary-cursor: pointer;
-  --summary-transitions: all 0.75s linear;
+  --summary-transitions: all 0.75s ease-in-out;
   --summary-display: flex;
   --summary-justify: flex-start;
   --summary-align: center;
   --summary-gap: 0.5rem;
   --max-h-closed: 6.25rem;
   --max-h-open: 50rem;
+  interpolate-size: allow-keywords;
   display: var(--details-display);
   flex-direction: var(--details-direction);
   justify-content: var(--details-justify);
@@ -28,6 +29,19 @@ details {
   overflow: clip;
   border-radius: var(--details-radius);
 }
+details + details {
+  border-radius: 0;
+  border-top: none;
+}
+details:first-of-type {
+  border-radius: var(--details-radius) var(--details-radius) 0 0;
+}
+details:last-of-type {
+  border-radius: 0 0 var(--details-radius) var(--details-radius);
+}
+details:only-of-type {
+  border-radius: var(--details-radius);
+}
 details::marker {
   content: none;
 }
@@ -41,6 +55,7 @@ details summary {
   list-style: none;
   border-top-left-radius: var(--details-radius);
   border-top-right-radius: var(--details-radius);
+  transition: var(--summary-transitions);
   /* This ensures no bullet points are shown */
 }
 details summary::-webkit-details-marker {
@@ -64,7 +79,7 @@ details > section {
   border: 1px transparent solid;
 }
 details[open] {
-  max-height: var(--max-h-open);
+  max-height: max-content;
   transition: var(--summary-transitions);
 }
 details[open] > summary {

package/src/styles/details/details.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/details/details.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAYA;;AAVA;EACE;;AAGF;EACE;EACA;EACA;;AAKF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE","file":"details.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/details/details.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAYA;;AAVA;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE","file":"details.css"}

package/src/styles/dialog/dialog.css

@@ -0,0 +1,76 @@
+:root {
+  --dialog-min-w: max(20rem, 80%);
+  --dialog-gap: 0.625rem;
+  --dialog-border-color: lightgray;
+  --dialog-border-width: thin;
+  --dialog-border-style: solid;
+  --dialog-border-radius: var(--border-radius);
+  --dialog-padding: 1.5rem;
+  --dialog-padding-inline: 1rem;
+  --dialog-close-color: gray;
+  --dialog-button-bg: transparent;
+  --dialog-button-border: transparent thin solid;
+  --dialog-button-hover-bg: whitesmoke;
+  --dialog-display: flex;
+  --dialog-flex-direction: column;
+}
+
+dialog {
+  width: var(--dialog-min-w);
+  min-width: var(--min-w);
+  gap: var(--dialog-gap);
+  border: var(--dialog-border-color) var(--dialog-border-width) solid;
+  border-radius: var(--dialog-border-radius);
+  padding: var(--dialog-padding);
+  padding-block-start: calc(var(--dialog-padding) - 0rem);
+}
+dialog[open] {
+  display: var(--dialog-display);
+  flex-direction: var(--dialog-flex-direction);
+  gap: var(--dialog-gap);
+}
+dialog section {
+  width: 100%;
+  display: flex;
+  justify-content: start;
+  gap: var(--dialog-gap);
+  flex-direction: var(--dialog-flex-direction);
+  margin-block-start: 0;
+  --sect-y: 0;
+}
+
+.dialog-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  min-width: 100%;
+}
+.dialog-header h3 {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+.dialog-header .dialog-close {
+  margin-block-end: 0;
+}
+.dialog-header button[type=button] {
+  background-color: var(--dialog-button-bg);
+  border: var(--dialog-button-border);
+  cursor: pointer;
+}
+.dialog-header button[type=button]:hover, .dialog-header button[type=button]:focus {
+  border-color: var(--dialog-close-color);
+  background-color: var(--dialog-button-hover-bg);
+}
+
+.alert-dialog-actions,
+.dialog-footer {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: var(--dialog-footer-justify, flex-end);
+  gap: var(--dialog-gap);
+  width: 100%;
+}
+
+/*# sourceMappingURL=dialog.css.map */

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

@@ -0,0 +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;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;;AACA;EAEE;EACA;;;AAKN;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA","file":"dialog.css"}

package/src/styles/icons/icon.css

@@ -5,14 +5,12 @@
   --icon-width: max-content;
   --icon-gap: 0.2rem;
   --icon-height: max-content;
-  --icon-fs: inherit;
   display: var(--icon-display);
   flex-direction: var(--icon-direction);
   gap: var(--icon-gap);
-  align-items: var(--icons-placement);
+  place-items: var(--icons-placement);
   width: var(--icon-width);
   height: var(--icon-height);
-  font-size: var(--icon-fs);
 }
 
 /*# sourceMappingURL=icon.css.map */

package/src/styles/icons/icon.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/icons/icon.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACD;EACC;EACA;EACA","file":"icon.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/icons/icon.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA","file":"icon.css"}