@fpkit/acss 0.6.2 → 1.0.0-beta.1

package/src/styles/index.css

@@ -480,12 +480,12 @@ h6:has(span:first-of-type) > span {
 }
 
 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;
@@ -493,16 +493,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;
@@ -513,7 +513,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);
@@ -539,12 +539,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] {
@@ -552,20 +551,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 {
@@ -582,17 +581,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;
 }
@@ -622,8 +621,8 @@ small > span,
   --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-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 */
@@ -632,8 +631,8 @@ small > span,
   --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);
@@ -779,32 +778,39 @@ img[alt] {
 
 figure:has(img[alt]) {
   --fig-display: flex;
-  --fig-p: 0.5rem;
+  --fig-padding: 0.5rem;
   --fig-bg: rgba(245, 245, 245, 0.683);
-  --fig-w: fit-content;
+  --fig-width: fit-content;
   display: var(--fig-display);
   position: relative;
-  padding: var(--fig-p);
+  padding: var(--fig-padding);
   background-color: var(--fig-bg);
-  max-width: var(--fig-w);
+  max-width: var(--fig-width);
 }
 figure:has(img[alt]) > figcaption {
   position: absolute;
-  bottom: var(--fig-bottom, var(--fig-p));
-  left: var(--fig-left, var(--fig-p));
-  right: var(--fig-right, var(--fig-p));
-  padding: var(--caption-p, var(--spc-3));
+  bottom: var(--fig-bottom, var(--fig-padding));
+  left: var(--fig-left, var(--fig-padding));
+  right: var(--fig-right, var(--fig-padding));
+  padding: var(--caption-padding, var(--spc-3));
   background-color: var(--fig-bg);
 }
 
 :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],
@@ -835,15 +841,38 @@ figure:has(img[alt]) > figcaption {
 }
 [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] {
@@ -865,8 +894,8 @@ figure:has(img[alt]) > figcaption {
 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);
@@ -876,8 +905,8 @@ progress {
   /* If the progress element is busy, remove the revert styles */
 }
 progress[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);
   /* Styling for the remaining part of the& bar */
@@ -898,8 +927,8 @@ progress[value]::-webkit-progress-bar {
   accent-color: var(--progress-accent-color);
 }
 progress[aria-busy] {
-  width: var(--progress-w);
-  height: var(--progress-h);
+  width: var(--progress-width);
+  height: var(--progress-height);
   accent-color: var(--progress-accent-color);
   /* Styling for the remaining part of the& bar */
 }
@@ -920,14 +949,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;
@@ -939,12 +968,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 {
@@ -973,8 +1002,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);
@@ -994,15 +1023,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;
 }
@@ -1014,7 +1043,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 {
@@ -1043,7 +1072,7 @@ details[open] > section {
  */
 a[href] {
   --link-color: #085ab7;
-  --link-weight: 400;
+  --link-fw: 400;
   --link-fs: 1rem;
   --link-decoration: none;
   --link-decoration-offset: 0.09375rem;
@@ -1051,8 +1080,8 @@ a[href] {
   --link-skip-ink: auto;
   --link-bg: transparent;
   --link-radius: 0.25rem;
-  --link-px: 0;
-  --link-py: 0;
+  --link-padding-inline: 0;
+  --link-padding-block: 0;
   --link-transition: all 0.75s ease-in-out;
   --link-focus-color: currentColor;
   --link-focus-width: 0.125rem;
@@ -1060,7 +1089,7 @@ a[href] {
   --link-focus-style: solid;
   color: var(--link-color);
   font-size: var(--link-fs);
-  font-weight: var(--link-weight);
+  font-weight: var(--link-fw);
   text-decoration: var(--link-decoration);
   text-underline-offset: var(--link-decoration-offset);
   text-decoration-thickness: var(--link-decoration-thickness);
@@ -1071,7 +1100,7 @@ a[href] {
 }
 a[href] > i,
 a[href] > b {
-  font-weight: var(--link-weight);
+  font-weight: var(--link-fw);
   font-style: normal;
 }
 a[href]:hover {
@@ -1141,23 +1170,23 @@ header,
   --overlay-placement: center;
   --overlay-display: grid;
   --overlay-padding: 2rem;
-  --overlay-w: 100%;
-  --overlay-h: 40vh;
-  --overlay-max-h: 500px;
+  --overlay-width: 100%;
+  --overlay-height: 40vh;
+  --overlay-max-height: 500px;
   --overlay-color: currentColor;
-  --overlay-content-w: 80%;
+  --overlay-content-width: 80%;
   --overlay-gap: 2rem;
   --overlay-bg: whitesmoke;
-  --overlay-px: auto;
-  --overlay-py: auto;
-  --overlay-mx: auto;
-  --overlay-my: auto;
+  --overlay-padding-inline: auto;
+  --overlay-padding-block: auto;
+  --overlay-margin-inline: auto;
+  --overlay-margin-block: auto;
   grid-template-areas: "overlay";
   display: var(--overlay-display);
   place-items: var(--overlay-placement);
   align-items: var(--overlay-placement);
-  min-height: var(--overlay-h);
-  width: var(--overlay-w);
+  min-height: var(--overlay-height);
+  width: var(--overlay-width);
   color: var(--overlay-color);
   background-color: var(--overlay-bg);
   min-width: 20rem;
@@ -1170,7 +1199,7 @@ header > *,
 header > img,
 [data-hero] > img,
 [data-grid~=overlay] > img {
-  width: var(--overlay-w);
+  width: var(--overlay-width);
   background-size: contain;
 }
 header > div,
@@ -1180,9 +1209,9 @@ header > section,
 [data-grid~=overlay] > div,
 [data-grid~=overlay] > section {
   --overlay-display: flex;
-  max-width: var(--overlay-content-w);
+  max-width: var(--overlay-content-width);
   padding-inline: var(--spc-4);
-  margin-inline: var(--overlay-mx);
+  margin-inline: var(--overlay-margin-inline);
   gap: var(--overlay-gap);
   text-align: center;
 }
@@ -1209,7 +1238,7 @@ header > section > h2,
 [data-grid~=overlay] > div > h2,
 [data-grid~=overlay] > section > h1,
 [data-grid~=overlay] > section > h2 {
-  line-height: var(--header-lh, 1.1);
+  line-height: var(--header-line-height, 1.1);
   font-weight: 500;
 }
 header > div > h1,
@@ -1239,16 +1268,16 @@ header > section > h3,
 
 main,
 footer {
-  --content-w: min(100%, 1480px);
-  --content-mx: auto;
-  --content-px: 1rem;
+  --content-width: min(100%, 1480px);
+  --content-margin-inline: auto;
+  --content-padding-inline: 1rem;
   --content-gap: 2rem;
   padding-block: var(--overlay-padding);
 }
 main > section,
 footer > section {
-  width: var(--content-w);
-  margin-inline: var(--content-mx);
+  width: var(--content-width);
+  margin-inline: var(--content-margin-inline);
   padding-inline: var(--spc-6);
 }
 
@@ -1258,8 +1287,8 @@ main {
 }
 main > section[aria-label],
 main > section {
-  width: var(--content-w);
-  margin-inline: var(--content-mx);
+  width: var(--content-width);
+  margin-inline: var(--content-margin-inline);
 }
 main > section[aria-label]:has(> article, > aside),
 main > section:has(> article, > aside) {
@@ -1289,7 +1318,7 @@ footer > div {
 }
 
 :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;
@@ -1321,8 +1350,8 @@ footer > div {
   }
 }
 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);
@@ -1503,13 +1532,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 {
@@ -1541,8 +1570,8 @@ sup:has(> span)[data-badge~=rounded] span {
 body > nav,
 [aria-label~=navbar],
 .navbar {
-  padding-inline: var(--nav-px, 1rem);
-  min-height: var(--nav-h, fit-content);
+  padding-inline: var(--nav-padding-inline, 1rem);
+  min-height: var(--nav-height, fit-content);
 }
 @media (max-width: 580px) {
   body > nav,
@@ -1564,12 +1593,12 @@ body > nav ul > li,
   margin: 0;
   padding: 0;
   min-height: 100%;
-  padding-inline: var(--nav-px, 0.75rem);
+  padding-inline: var(--nav-padding-inline, 0.75rem);
 }
 body > nav ul > li:hover,
 [aria-label~=navbar] ul > li:hover,
 .navbar ul > li:hover {
-  background-color: var(--nav-hov-bg, #e8e8e8);
+  background-color: var(--nav-hover-bg, #e8e8e8);
 }
 body > nav ul > li:hover:where(img),
 [aria-label~=navbar] ul > li:hover:where(img),
@@ -1582,25 +1611,25 @@ nav {
   --nav-focus-width: 0.125rem;
   --nav-focus-offset: 0.125rem;
   --nav-focus-style: solid;
-  display: var(--nav-dsp, flex);
+  display: var(--nav-display, flex);
   flex-direction: var(--nav-direction, row);
-  width: var(--nav-w, auto);
+  width: var(--nav-width, auto);
   place-items: var(--nav-align, center);
   justify-content: var(--nav-justify, space-between);
-  margin-inline: var(--nav-mx, 0);
+  margin-inline: var(--nav-margin-inline, 0);
   background-color: var(--nav-bg, initial);
 }
 nav > section,
 nav > ul {
-  --nav-dsp: flex;
+  --nav-display: flex;
   flex-direction: var(--nav-direction, row);
-  display: var(--nav-dsp, flex);
+  display: var(--nav-display, flex);
   gap: var(--nav-gap, 0);
   font-size: var(--nav-fs, 0.9rem);
   align-items: var(--nav-align, center);
-  padding-inline: var(--nav-px, 1rem);
-  padding-block: var(--nav-py, 0);
-  margin-block-end: var(--nav-mb, 0);
+  padding-inline: var(--nav-padding-inline, 1rem);
+  padding-block: var(--nav-padding-block, 0);
+  margin-block-end: var(--nav-margin-block-end, 0);
   height: 100%;
 }
 nav > section[data-list~=block],
@@ -1608,7 +1637,7 @@ nav > ul[data-list~=block] {
   --nav-direction: column;
 }
 nav > section > div {
-  --py: 0;
+  --nav-padding-block: 0;
 }
 nav ul > li {
   display: flex;
@@ -1617,15 +1646,15 @@ nav ul > li {
   margin: 0;
   padding: 0;
   min-height: 100%;
-  padding-inline: var(--nav-px, 1rem);
+  padding-inline: var(--nav-padding-inline, 1rem);
 }
 nav img[alt] {
-  --px: 0 var(--s1);
-  --w: var(--brand-w, 3.6rem);
+  --nav-img-padding-inline: 0 var(--s1);
+  --nav-img-width: var(--brand-w, 3.6rem);
 }
 nav[data-variant] {
   background-color: var(--nav-bg);
-  color: var(--nav-cl);
+  color: var(--nav-color);
   font-size: var(--nav-fs, 0.9rem);
 }
 nav > div {
@@ -1654,11 +1683,16 @@ nav button:focus-visible {
   --input-bg: inherit;
   --input-border: none;
   --input-outline: thin solid var(--input-border-color);
-  --input-px: 0.6rem;
-  --input-py: 0.4rem;
+  --input-padding-inline: 0.6rem;
+  --input-padding-block: 0.4rem;
   --input-radius: --var(--radius);
   --input-fs: var(--fs);
-  --input-w: clamp(200px, 100%, 500px);
+  --input-width: clamp(200px, 100%, 500px);
+  --input-focus-outline: medium solid var(--input-border-color);
+  --input-focus-outline-offset: 0;
+  --input-disabled-bg: #f5f5f5;
+  --input-disabled-opacity: 0.6;
+  --input-disabled-cursor: not-allowed;
   --placeholder-color: gray;
   --placeholder-style: italic;
   --placeholder-fs: smaller;
@@ -1686,11 +1720,11 @@ select {
   -webkit-appearance: var(--input-appearance);
   -moz-appearance: var(--input-appearance);
   appearance: var(--input-appearance);
-  width: var(--input-w);
+  width: var(--input-width);
   border: var(--input-border);
   outline: var(--input-outline);
-  padding-inline: var(--input-px);
-  padding-block: var(--input-py);
+  padding-inline: var(--input-padding-inline);
+  padding-block: var(--input-padding-block);
   border-radius: var(--input-radius);
   background-color: var(--input-bg, #fff);
 }
@@ -1707,7 +1741,8 @@ textarea:focus-visible,
 textarea:focus,
 select:focus-visible,
 select:focus {
-  outline-width: medium;
+  outline: var(--input-focus-outline);
+  outline-offset: var(--input-focus-outline-offset);
 }
 input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder,
 textarea[aria-required=true]::placeholder,
@@ -1720,11 +1755,15 @@ textarea[aria-required=true]::placeholder::after,
 select[aria-required=true]::placeholder::after {
   content: "* ";
 }
-input[type]:not([type=checkbox], [type=radio])[aria-disabled=true],
+input[type]:not([type=checkbox], [type=radio])[aria-disabled=true], input[type]:not([type=checkbox], [type=radio]):disabled,
 textarea[aria-disabled=true],
-select[aria-disabled=true] {
+textarea:disabled,
+select[aria-disabled=true],
+select:disabled {
   --input-border-color: lightgray;
-  cursor: not-allowed;
+  background-color: var(--input-disabled-bg);
+  opacity: var(--input-disabled-opacity);
+  cursor: var(--input-disabled-cursor);
   text-transform: capitalize;
   text-decoration: line-through;
 }
@@ -1742,8 +1781,8 @@ select {
 
 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);
@@ -1753,14 +1792,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);
@@ -2034,7 +2073,7 @@ li:has(> button) {
   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;
@@ -2075,8 +2114,8 @@ li:has(> button) {
 [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,
@@ -2087,7 +2126,7 @@ li:has(> button) {
   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);