@fpkit/acss 0.6.2 → 1.0.0-beta.1

package/src/components/progress/progress.scss

@@ -1,8 +1,8 @@
 progress {
   /* Revert all styles */
   all: revert;
-  --progress-w: 100%;
-  --progress-h: 1rem;
+  --progress-width: 100%;
+  --progress-height: 1rem;
   --progress-bg: #cccccc;
   --progress-color: rgb(71, 71, 245);
   --progress-accent-color: var(--progress-color);
@@ -12,8 +12,8 @@ progress {
   /* The colors are used in the progress bar. */
   &[value] {
 
-    width: var(--progress-w);
-    height: var(--progress-h);
+    width: var(--progress-width);
+    height: var(--progress-height);
     background-color: var(--progress-bg);
     accent-color: var(--progress-accent-color);
 
@@ -42,9 +42,9 @@ progress {
   /* If the progress element is busy, remove the revert styles */
   &[aria-busy] {
     // all: revert;
-    width: var(--progress-w);
-    height: var(--progress-h);
-    // height: calc(var(--progress-h) + var(--progress-h));
+    width: var(--progress-width);
+    height: var(--progress-height);
+    // height: calc(var(--progress-height) + var(--progress-height));
     accent-color: var(--progress-accent-color);
 
     &::-webkit-progress-value {

package/src/components/progress/progress.scss.backup

@@ -0,0 +1,70 @@
+progress {
+  /* Revert all styles */
+  all: revert;
+  --progress-w: 100%;
+  --progress-h: 1rem;
+  --progress-bg: #cccccc;
+  --progress-color: rgb(71, 71, 245);
+  --progress-accent-color: var(--progress-color);
+
+  /* This code changes the color of the progress bar. */
+  /* The variable names indicate the colors that are used. */
+  /* The colors are used in the progress bar. */
+  &[value] {
+
+    width: var(--progress-w);
+    height: var(--progress-h);
+    background-color: var(--progress-bg);
+    accent-color: var(--progress-accent-color);
+
+
+    &::-webkit-progress-value {
+      /* Color for Chrome, Safari, and newer Opera */
+      background-color: var(--progress-accent-color);
+      accent-color: var(--progress-accent-color);
+
+    }
+
+    &::-moz-progress-bar {
+      /* Color for Firefox */
+      background-color: var(--progress-accent-color);
+      accent-color: var(--progress-accent-color)
+    }
+
+    /* Styling for the remaining part of the& bar */
+    &::-webkit-progress-bar {
+      /* Background for Chrome, Safari, and newer Opera */
+      background-color: var(--progress-background-color);
+      accent-color: var(--progress-accent-color)
+    }
+  }
+
+  /* If the progress element is busy, remove the revert styles */
+  &[aria-busy] {
+    // all: revert;
+    width: var(--progress-w);
+    height: var(--progress-h);
+    // height: calc(var(--progress-h) + var(--progress-h));
+    accent-color: var(--progress-accent-color);
+
+    &::-webkit-progress-value {
+      /* Color for Chrome, Safari, and newer Opera */
+      // background-color: var(--progress-accent-color);
+      accent-color: var(--progress-accent-color)
+    }
+
+    &::-moz-progress-bar {
+      // /* Color for Firefox */
+      // background-color: var(--progress-bg);
+      accent-color: var(--progress-accent-color)
+    }
+
+    /* Styling for the remaining part of the& bar */
+    &::-webkit-progress-bar {
+      /* Background for Chrome, Safari, and newer Opera */
+      // background-color: var(--progress-bg);
+      accent-color: var(--progress-accent-color)
+    }
+  }
+
+}

package/src/components/tag/tag.scss

@@ -25,19 +25,19 @@ small > span,
   --production: #1e3a8a;      /* Dark blue: 8.59:1 contrast with white */
 
   /* Tag component tokens */
-  --tag-px: 0.7rem;           /* Horizontal padding (11.2px at 16px base) */
-  --tag-py: 0.2rem;           /* Vertical padding (3.2px at 16px base) */
-  --tag-fs: 0.8rem;           /* Font size (12.8px at 16px base) */
-  --tag-radius: 99rem;        /* Fully rounded pill shape */
-  --tag-bg: lightgray;        /* Default background color */
-  --tag-fw: 500;              /* Medium font weight */
-  --tag-color: currentColor;  /* Default text color (inherits) */
-  --tag-display: inline-block;/* Display type */
+  --tag-padding-inline: 0.7rem;  /* Horizontal padding (11.2px at 16px base) */
+  --tag-padding-block: 0.2rem;   /* Vertical padding (3.2px at 16px base) */
+  --tag-fs: 0.8rem;              /* Font size (12.8px at 16px base) */
+  --tag-radius: 99rem;           /* Fully rounded pill shape */
+  --tag-bg: lightgray;           /* Default background color */
+  --tag-fw: 500;                 /* Medium font weight */
+  --tag-color: currentColor;     /* Default text color (inherits) */
+  --tag-display: inline-block;   /* Display type */
 
   /* Apply CSS custom properties */
   display: var(--tag-display);
-  padding-inline: var(--tag-px);
-  padding-block: var(--tag-py);
+  padding-inline: var(--tag-padding-inline);
+  padding-block: var(--tag-padding-block);
   font-size: var(--tag-fs);
   color: var(--tag-color);
   background-color: var(--tag-bg);

package/src/components/tag/tag.scss.backup

@@ -0,0 +1,130 @@
+/**
+ * Tag Component Styles - WCAG 2.1 AA Compliant
+ *
+ * Provides visual styling for the Tag component with CSS custom properties
+ * for easy theming and variant support. All measurements use rem units
+ * for scalability and accessibility.
+ *
+ * Accessibility Features:
+ * - Color contrast ratios meet WCAG AA 4.5:1 minimum (WCAG 1.4.3)
+ * - Visual indicators beyond color (symbols via ::before) (WCAG 1.4.1)
+ * - Visible focus indicators with 3:1 contrast (WCAG 2.4.7)
+ */
+
+/**
+ * Base Tag Styles
+ * Applied to all tag elements via role and data-tag attributes
+ */
+p[role='note'],
+[role='note'],
+small > span,
+[data-tag] {
+  /* Variant color tokens - WCAG AA compliant colors */
+  --beta: #fbbf24;            /* Amber: 6.94:1 contrast with black */
+  --stable: #0f7c3e;          /* Dark green: 4.56:1 contrast with white */
+  --production: #1e3a8a;      /* Dark blue: 8.59:1 contrast with white */
+
+  /* Tag component tokens */
+  --tag-px: 0.7rem;           /* Horizontal padding (11.2px at 16px base) */
+  --tag-py: 0.2rem;           /* Vertical padding (3.2px at 16px base) */
+  --tag-fs: 0.8rem;           /* Font size (12.8px at 16px base) */
+  --tag-radius: 99rem;        /* Fully rounded pill shape */
+  --tag-bg: lightgray;        /* Default background color */
+  --tag-fw: 500;              /* Medium font weight */
+  --tag-color: currentColor;  /* Default text color (inherits) */
+  --tag-display: inline-block;/* Display type */
+
+  /* Apply CSS custom properties */
+  display: var(--tag-display);
+  padding-inline: var(--tag-px);
+  padding-block: var(--tag-py);
+  font-size: var(--tag-fs);
+  color: var(--tag-color);
+  background-color: var(--tag-bg);
+  border-radius: var(--tag-radius);
+
+  /**
+   * Focus Indicators (WCAG 2.4.7)
+   * Visible focus for keyboard navigation with 3:1 minimum contrast
+   */
+  &:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  /* Remove outline for mouse users while preserving for keyboard users */
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  /**
+   * Variant Modifiers
+   * Applied via data-tag attribute (e.g., data-tag="beta")
+   * Each variant includes both color AND visual symbol for accessibility (WCAG 1.4.1)
+   */
+
+  /* Alpha variant - early development stage */
+  &[data-tag~='alpha'] {
+    --tag-color: #000000;      /* Black: maximum contrast with amber background */
+    --tag-bg: var(--beta);
+
+    /* Visual indicator beyond color - warning symbol */
+    &::before {
+      content: '⚠';
+      margin-inline-end: 0.25rem;
+      font-weight: 700;
+      aria-hidden: true;
+    }
+  }
+
+  /* Beta variant - pre-release version */
+  &[data-tag~='beta'] {
+    --tag-color: #000000;      /* Black: maximum contrast with amber background */
+    --tag-bg: var(--beta);
+
+    /* Visual indicator beyond color - warning symbol */
+    &::before {
+      content: '⚠';
+      margin-inline-end: 0.25rem;
+      font-weight: 700;
+      aria-hidden: true;
+    }
+  }
+
+  /* Stable variant - production-ready release */
+  &[data-tag~='stable'] {
+    --tag-color: #ffffff;      /* White: 4.56:1 contrast with dark green */
+    --tag-bg: var(--stable);
+
+    /* Visual indicator beyond color - checkmark symbol */
+    &::before {
+      content: '✓';
+      margin-inline-end: 0.25rem;
+      font-weight: 700;
+      aria-hidden: true;
+    }
+  }
+
+  /* Production variant - live environment indicator */
+  &[data-tag~='production'] {
+    --tag-color: #ffffff;      /* White: 8.59:1 contrast with dark blue */
+    --tag-bg: var(--production);
+
+    /* Visual indicator beyond color - live indicator symbol */
+    &::before {
+      content: '●';
+      margin-inline-end: 0.25rem;
+      font-weight: 700;
+      aria-hidden: true;
+    }
+  }
+}
+
+/**
+ * Block-level tag modifier
+ * Applied when Tag renders as <p> element
+ */
+p[role='note'] {
+  --tag-display: block;
+  --tag-radius: 0.5rem;  /* Less rounded for block tags (8px at 16px base) */
+}

package/src/components/tag/tag.stories.tsx

@@ -48,8 +48,29 @@ const meta: Meta<typeof Tag> = {
   parameters: {
     docs: {
       description: {
-        component:
-          "A small inline label component for displaying status, versions, or environment indicators with WCAG 2.1 AA accessibility compliance.",
+        component: `A small inline label component for displaying status, versions, or environment indicators with WCAG 2.1 AA accessibility compliance.
+
+## CSS Variables
+
+### Spacing
+- \`--tag-padding-inline\`: Horizontal padding (default: 0.7rem / 11.2px)
+- \`--tag-padding-block\`: Vertical padding (default: 0.2rem / 3.2px)
+
+### Typography
+- \`--tag-fs\`: Font size (default: 0.8rem / 12.8px)
+- \`--tag-fw\`: Font weight (default: 500)
+- \`--tag-color\`: Text color (default: currentColor)
+
+### Appearance
+- \`--tag-bg\`: Background color (default: lightgray)
+- \`--tag-radius\`: Border radius (default: 99rem for pill shape, 0.5rem for block)
+- \`--tag-display\`: Display mode (default: inline-block, block for \`<p>\`)
+
+### Variant Colors (WCAG AA Compliant)
+- \`--beta\`: Amber (#fbbf24) - 6.94:1 contrast with black
+- \`--stable\`: Dark green (#0f7c3e) - 4.56:1 contrast with white
+- \`--production\`: Dark blue (#1e3a8a) - 8.59:1 contrast with white
+`,
       },
     },
   },

package/src/styles/alert/alert.css

@@ -40,7 +40,7 @@
   line-height: 1.6;
   display: flex;
   flex-direction: row;
-  border-radius: var(--alert-border-radius, var(--border-radius));
+  border-radius: var(--alert-radius, var(--border-radius));
   gap: var(--alert-gap, var(--spc-4));
   /* Exit animations */
   transition: opacity var(--alert-transition-duration) ease, transform var(--alert-transition-duration) ease;
@@ -81,8 +81,8 @@
 [role=alert] .alert-message .alert-title {
   margin-block-end: var(--spc-1, 0.25rem);
   margin-block-start: 0;
-  font-weight: var(--alert-title-weight, 600);
-  font-size: var(--alert-title-size, inherit);
+  font-weight: var(--alert-title-fw, 600);
+  font-size: var(--alert-title-fs, inherit);
   line-height: 1.4;
 }
 [role=alert] .alert-message h2.alert-title,
@@ -93,7 +93,7 @@
   margin: 0;
   margin-block-end: var(--spc-1, 0.25rem);
   font-size: inherit;
-  font-weight: var(--alert-title-weight, 600);
+  font-weight: var(--alert-title-fw, 600);
 }
 [role=alert][data-alert~=info] {
   --alert-bg: var(--alert-info-bg);

package/src/styles/badge/badge.css

@@ -3,13 +3,13 @@ sup:has(> span) {
   --badge-color: currentColor;
   --badge-radius: 0.5rem;
   --badge-padding: 0.3rem;
-  --badge-v-align: 0.5rem;
+  --badge-vertical-align: 0.5rem;
   --badge-fs: var(--fs-1);
   background-color: var(--badge-bg);
   color: var(--badge-color);
   padding: var(--badge-padding);
   border-radius: var(--badge-radius);
-  vertical-align: var(--badge-v-align);
+  vertical-align: var(--badge-vertical-align);
   font-size: var(--badge-fs);
 }
 sup:has(> span) span {

package/src/styles/breadcrumbs/breadcrumb.css

@@ -1,7 +1,7 @@
 nav:not(body > nav),
 nav[data-breadcrumb] {
-  --breadcrumb-px: unset;
-  --breadcrumb-dsp: flex;
+  --breadcrumb-padding-inline: unset;
+  --breadcrumb-display: flex;
   --breadcrumb-gap: 0.5rem;
   --breadcrumb-color: currentColor;
   --breadcrumb-current-color: rgb(46, 46, 46);
@@ -11,14 +11,14 @@ nav[data-breadcrumb] {
 }
 nav:not(body > nav) ol,
 nav[data-breadcrumb] ol {
-  padding-inline: var(--breadcrumb-px);
-  display: var(--breadcrumb-dsp);
+  padding-inline: var(--breadcrumb-padding-inline);
+  display: var(--breadcrumb-display);
   gap: var(--breadcrumb-gap);
 }
 nav:not(body > nav) ol li,
 nav[data-breadcrumb] ol li {
   padding-inline: unset;
-  width: var(--breadcrumb-w, fit-content);
+  width: var(--breadcrumb-width, fit-content);
   text-transform: capitalize;
   display: flex;
   color: var(--breadcrumb-color);

package/src/styles/buttons/button.css

@@ -1,10 +1,10 @@
 button {
-  --btn-xs: 0.6875rem;
-  --btn-sm: 0.8125rem;
-  --btn-md: 0.9375rem;
-  --btn-lg: 1.125rem;
+  --btn-size-xs: 0.6875rem;
+  --btn-size-sm: 0.8125rem;
+  --btn-size-md: 0.9375rem;
+  --btn-size-lg: 1.125rem;
   --btn-pill: 100rem;
-  --btn-fs: var(--btn-md);
+  --btn-fs: var(--btn-size-md);
   --btn-height: calc(var(--btn-fs) * 2.25);
   --btn-bg: lightgray;
   --btn-width: max-content;
@@ -12,16 +12,16 @@ button {
   font-weight: var(--btn-fw, 500);
   height: var(--btn-height);
   place-items: var(--btn-place, center);
-  padding-inline: var(--btn-px, calc(var(--btn-fs) * 1.5));
-  padding-block: var(--btn-py, calc(var(--btn-fs) * 0.5));
-  border: var(--btn-bdr, none);
-  border-radius: var(--btn-rds, 0.375rem);
+  padding-inline: var(--btn-padding-inline, calc(var(--btn-fs) * 1.5));
+  padding-block: var(--btn-padding-block, calc(var(--btn-fs) * 0.5));
+  border: var(--btn-border, none);
+  border-radius: var(--btn-radius, 0.375rem);
   text-decoration: var(--btn-deco, none);
-  color: var(--btn-cl, currentColor);
-  display: var(--btn-dsp, inline-flex);
+  color: var(--btn-color, currentColor);
+  display: var(--btn-display, inline-flex);
   gap: var(--btn-gap, 0.2rem);
-  white-space: var(--btn-wspc, inherit);
-  margin: var(--btn-spc, 0);
+  white-space: var(--btn-whitespace, inherit);
+  margin: var(--btn-spacing, 0);
   transition: var(--btn-transition, var(--tran-all, all 0.3s cubic-bezier(0.4, 0, 0.2, 1)));
   background-color: var(--btn-bg, var(--btn));
   outline: none;
@@ -32,7 +32,7 @@ button {
 }
 button[type] {
   background-color: var(--btn-bg, var(--neutral-300));
-  --btn-bdr: solid var(--btn-sg);
+  --btn-border: solid var(--btn-sg);
 }
 button[type=submit], button[style*=submit] {
   --btn-bg: var(--primary-500, royal-blue);
@@ -58,12 +58,11 @@ button:is(:hover, :focus)[aria-disabled=true] {
 button[type=reset] {
   --btn-bg: transparent;
   --btn-color: gray;
-  --btn-bdr: gray thin solid;
+  --btn-border: gray thin solid;
 }
 button[type=submit] {
   --btn-bg: var(--primary-700, blue);
-  --btn-cl: #fff;
-  --btn-color: rgb(231, 231, 231);
+  --btn-color: #fff;
   --btn-border: none;
 }
 button[data-fp-btn~=pill], button[data-btn~=pill], button[data-style~=pill] {
@@ -71,20 +70,20 @@ button[data-fp-btn~=pill], button[data-btn~=pill], button[data-style~=pill] {
 }
 button[data-btn~=xs],
 button .btn-xs {
-  --btn-fs: var(--btn-xs);
+  --btn-fs: var(--btn-size-xs);
   text-transform: uppercase;
 }
 button[data-btn~=sm],
 button .btn-sm {
-  --btn-fs: var(--btn-sm);
+  --btn-fs: var(--btn-size-sm);
 }
 button[data-btn~=md],
 button .btn-md {
-  --btn-fs: var(--btn-md);
+  --btn-fs: var(--btn-size-md);
 }
 button[data-btn~=lg],
 button .btn-lg {
-  --btn-fs: var(--btn-lg);
+  --btn-fs: var(--btn-size-lg);
 }
 button[data-btn~=icon],
 button .btn-icon {
@@ -101,17 +100,17 @@ button .btn-icon {
 button[data-btn~=text],
 button .btn-text {
   --btn-bg: transparent;
-  --btn-cl: currentColor;
-  --btn-bdr: none;
+  --btn-color: currentColor;
+  --btn-border: none;
   --btn-height: unset;
   --btn-width: unset;
-  --btn-py: 0.75rem;
-  --btn-px: 0.75rem;
+  --btn-padding-block: 0.75rem;
+  --btn-padding-inline: 0.75rem;
 }
 button[data-btn~=text]:is(:hover, :focus),
 button .btn-text:is(:hover, :focus) {
-  background-color: color-mix(in srgb, var(--btn-cl) 10%, transparent);
-  outline: 0.025rem solid var(--btn-cl);
+  background-color: color-mix(in srgb, var(--btn-color) 10%, transparent);
+  outline: 0.025rem solid var(--btn-color);
   outline-offset: 0;
   filter: none;
 }

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;EAIA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAGF;EAGE;;AAGF;AAAA;EAEE;EACA;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA","file":"button.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/buttons/button.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EAEE;EACA;;AAGF;EAEE;;AAGA;EACE;;AAOJ;EAEE;EACA;EACA;EACA;;AAGA;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EAGE;;AAGF;AAAA;EAEE;EACA;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;AAAA;EACE;EACA;EACA;EACA","file":"button.css"}

package/src/styles/cards/card.css

@@ -1,11 +1,18 @@
 :root {
-  --card-p: 2rem;
+  --card-padding: 2rem;
   --card-bg: #fff;
-  --card-radius: calc(var(--card-p) / 4);
+  --card-radius: calc(var(--card-padding) / 4);
   --card-position: relative;
   --card-display: flex;
   --card-direction: column;
   --card-gap: 1rem;
+  --card-header-padding: 1rem 1.5rem;
+  --card-header-bg: #f8f9fa;
+  --card-header-border-bottom: 1px solid #dee2e6;
+  --card-body-padding: 1.5rem;
+  --card-footer-padding: 1rem 1.5rem;
+  --card-footer-bg: #f8f9fa;
+  --card-footer-border-top: 1px solid #dee2e6;
 }
 
 [data-card],
@@ -36,15 +43,38 @@
 }
 [data-card] > *:not(img),
 [data-component~=card] > *:not(img) {
-  padding-inline: var(--card-p);
+  padding-inline: var(--card-padding);
 }
 [data-card] > *:last-child:not(img),
 [data-component~=card] > *:last-child:not(img) {
-  padding-block-end: var(--card-p);
+  padding-block-end: var(--card-padding);
 }
 [data-card] > *:first-child:not(img),
 [data-component~=card] > *:first-child:not(img) {
-  padding-block-start: calc(var(--card-p) - 0.5rem);
+  padding-block-start: calc(var(--card-padding) - 0.5rem);
+}
+[data-card] > header,
+[data-card] > [data-card-header],
+[data-component~=card] > header,
+[data-component~=card] > [data-card-header] {
+  padding: var(--card-header-padding);
+  background-color: var(--card-header-bg);
+  border-bottom: var(--card-header-border-bottom);
+  border-radius: var(--card-radius) var(--card-radius) 0 0;
+}
+[data-card] > [data-card-body],
+[data-component~=card] > [data-card-body] {
+  padding: var(--card-body-padding);
+  flex: 1;
+}
+[data-card] > footer,
+[data-card] > [data-card-footer],
+[data-component~=card] > footer,
+[data-component~=card] > [data-card-footer] {
+  padding: var(--card-footer-padding);
+  background-color: var(--card-footer-bg);
+  border-top: var(--card-footer-border-top);
+  border-radius: 0 0 var(--card-radius) var(--card-radius);
 }
 
 [data-card=interactive] {

package/src/styles/cards/card.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/cards/card.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAEF;AAAA;EAEE;;AAEF;AAAA;EACE;;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;;AAIF;EACE","file":"card.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/cards/card.scss"],"names":[],"mappings":"AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;EAGA;EACA;EACA;EAEA;EAEA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;;AAEA;AAAA;AAAA;AAAA;EAEE;EACA;;AAEF;AAAA;EACE;;AAEF;AAAA;EACE;EACA;EACA;;AAGF;AAAA;EACE;;AAEF;AAAA;EAEE;;AAEF;AAAA;EACE;;AAIF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;AAGF;AAAA;EACE;EACA;;AAGF;AAAA;AAAA;AAAA;EAEE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;;AAEA;EACE;EACA;;AAIF;EACE;EACA;;AAIF;EACE","file":"card.css"}

package/src/styles/details/details.css

@@ -3,14 +3,14 @@ details {
   --details-direction: column;
   --details-display: flex;
   --details-gap: 0rem;
-  --details-h: max-content;
+  --details-height: max-content;
   --details-justify: flex-start;
-  --details-px: 1.5rem;
-  --details-py: 1rem;
+  --details-padding-inline: 1.5rem;
+  --details-padding-block: 1rem;
   --details-radius: 0;
-  --details-w: 100%;
-  --max-h-closed: 6.25rem;
-  --max-h-open: 50rem;
+  --details-width: 100%;
+  --details-max-height-closed: 6.25rem;
+  --details-max-height-open: 50rem;
   --summary-align: center;
   --summary-cursor: pointer;
   --summary-display: flex;
@@ -22,12 +22,12 @@ details {
   flex-direction: var(--details-direction);
   justify-content: var(--details-justify);
   gap: var(--details-gap);
-  width: var(--details-w);
+  width: var(--details-width);
   border: var(--details-border);
   border-left: none;
   border-right: none;
   transition: var(--summary-transitions);
-  max-height: var(--max-h-closed);
+  max-height: var(--details-max-height-closed);
   overflow: clip;
 }
 @starting-style {
@@ -56,8 +56,8 @@ details summary {
   display: var(--summary-display);
   justify-content: var(--summary-justify);
   align-items: var(--summary-align);
-  padding-inline: var(--summary-px, var(--details-px));
-  padding-block: var(--summary-py, var(--details-py));
+  padding-inline: var(--summary-padding-inline, var(--details-padding-inline));
+  padding-block: var(--summary-padding-block, var(--details-padding-block));
   gap: var(--summary-gap);
   list-style: none;
   border-top-left-radius: var(--details-radius);
@@ -77,15 +77,15 @@ details summary:hover {
   cursor: var(--summary-cursor);
 }
 details summary > section {
-  width: var(--details-w);
+  width: var(--details-width);
 }
 details .list-styles summary {
   border-left: none;
   border-right: none;
 }
 details > section {
-  padding-inline: var(--details-px);
-  padding-block: var(--details-py);
+  padding-inline: var(--details-padding-inline);
+  padding-block: var(--details-padding-block);
   margin-block-start: 0;
   border: 1px transparent solid;
 }
@@ -97,7 +97,7 @@ details[open] > summary {
   border-bottom: var(--details-border);
 }
 details[open] > section {
-  max-height: var(--max-h-open);
+  max-height: var(--details-max-height-open);
 }
 @starting-style {
   details[open] > section {

package/src/styles/dialog/dialog.css

@@ -1,5 +1,5 @@
 :root {
-  --dialog-min-w: max(20rem, 80%);
+  --dialog-min-width: max(20rem, 80%);
   --dialog-gap: 0.625rem;
   --dialog-border-color: lightgray;
   --dialog-border-width: thin;
@@ -31,8 +31,8 @@
   }
 }
 dialog {
-  width: var(--dialog-min-w);
-  min-width: var(--min-w);
+  width: var(--dialog-min-width);
+  min-width: var(--dialog-min-width);
   gap: var(--dialog-gap);
   border: var(--dialog-border-color) var(--dialog-border-width) solid;
   border-radius: var(--dialog-border-radius);