@fpkit/acss 0.5.12 → 0.6.0

package/src/sass/_globals.scss

@@ -45,13 +45,8 @@ body {
   }
 }
 
-* + div,
-* + ul,
-* + section {
-  margin-block-start: 1rem;
-  &:empty {
-    display: none;
-  }
+div:empty {
+  display: none;
 }
 
 main,

package/src/sass/_properties.scss

@@ -13,6 +13,7 @@
   --placeholder-style: italic;
   --placeholder-fs: smaller;
   --transition: all 0.25s linear;
+  --tran-all: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 
   // * responsive fonts sizes
   --fs-0: clamp(.9rem, 4vw - 1rem, 1.12rem); // 16px default

package/src/styles/alert/alert.css

@@ -1,3 +1,16 @@
+/* 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 */
   --alert-success-bg: #e6f4ea;
@@ -15,6 +28,8 @@
   --alert-info-bg: #e5f6fd;
   --alert-info-border: #0288d1;
   --alert-info-text: #084154;
+  /* Animation */
+  --alert-transition-duration: 0.3s;
   --alert-border: thin solid currentColor;
   background-color: var(--alert-bg, whitesmoke);
   border: var(--alert-border, currentColor);
@@ -26,19 +41,59 @@
   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));
+  /* Exit animations */
+  transition: opacity var(--alert-transition-duration) ease, transform var(--alert-transition-duration) ease;
+  opacity: 1;
+  transform: translateY(0);
+  /* Focus indicators for keyboard navigation (WCAG 2.4.7) */
+  /* Hide focus outline for mouse clicks, keep for keyboard */
+  /* Variant: Filled - Solid colored background */
+  /* Variant: Soft - No border, subtle background */
+  /* Variant: Outlined - Default with border (no additional styles needed) */
+}
+[role=alert]:not([data-visible=true]) {
+  opacity: 0;
+  transform: translateY(-0.5rem);
+}
+@media (prefers-reduced-motion: reduce) {
+  [role=alert] {
+    transition-duration: 0.01ms;
+  }
+}
+[role=alert]:focus {
+  outline: 2px solid currentColor;
+  outline-offset: 2px;
 }
-[role=alert] div {
+[role=alert]:focus:not(:focus-visible) {
+  outline: none;
+}
+[role=alert] .alert-icon {
   margin-block-start: 0;
   align-items: center;
 }
 [role=alert] .alert-message {
   flex: 2;
   margin-block-start: 0;
+  /* Title styles for both heading and strong elements */
+  /* Reset heading-specific styles */
+}
+[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);
+  line-height: 1.4;
 }
-[role=alert] .alert-message h3 {
-  margin-block-end: 0;
+[role=alert] .alert-message h2.alert-title,
+[role=alert] .alert-message h3.alert-title,
+[role=alert] .alert-message h4.alert-title,
+[role=alert] .alert-message h5.alert-title,
+[role=alert] .alert-message h6.alert-title {
+  margin: 0;
+  margin-block-end: var(--spc-1, 0.25rem);
+  font-size: inherit;
+  font-weight: var(--alert-title-weight, 600);
 }
 [role=alert][data-alert~=info] {
   --alert-bg: var(--alert-info-bg);
@@ -62,6 +117,39 @@
 }
 [role=alert] button[data-btn~=icon] {
   --btn-bg: transparent;
+  align-items: flex-start;
+}
+[role=alert][data-variant=filled] {
+  border: none;
+}
+[role=alert][data-variant=filled][data-alert~=info] {
+  --alert-bg: var(--alert-info-border);
+  --alert-color: white;
+}
+[role=alert][data-variant=filled][data-alert~=warning] {
+  --alert-bg: var(--alert-warning-border);
+  --alert-color: white;
+}
+[role=alert][data-variant=filled][data-alert~=error] {
+  --alert-bg: var(--alert-error-border);
+  --alert-color: white;
+}
+[role=alert][data-variant=filled][data-alert~=success] {
+  --alert-bg: var(--alert-success-border);
+  --alert-color: white;
+}
+[role=alert][data-variant=filled][data-alert~=default] {
+  --alert-bg: #757575;
+  --alert-color: white;
+}
+[role=alert][data-variant=soft] {
+  border: none;
+}
+[role=alert][data-variant=outlined] {
+  /* This is the default variant, styles already applied above */
+}
+[role=alert] p {
+  font-size: 0.875rem;
 }
 
 /*# sourceMappingURL=alert.css.map */

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

@@ -1 +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","file":"alert.css"}
+{"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"}

package/src/styles/badge/badge.css

@@ -16,8 +16,26 @@ sup:has(> span) span {
   color: inherit;
 }
 sup:has(> span)[data-badge~=rounded] {
-  --badge-radius: 100%;
-  --badge-padding: 0.2rem;
+  --badge-radius: 50%;
+  --badge-padding: 0;
+  --badge-size: 1.5625rem;
+  width: var(--badge-size);
+  height: var(--badge-size);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  font-size: 0.6875rem;
+  font-weight: 700;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+sup:has(> span)[data-badge~=rounded] span {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: clip;
+  white-space: nowrap;
+  padding: 0 0.125rem;
 }
 
 /*# sourceMappingURL=badge.css.map */

package/src/styles/badge/badge.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/badge/badge.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA","file":"badge.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/badge/badge.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA","file":"badge.css"}

package/src/styles/buttons/button.css

@@ -1,23 +1,19 @@
 button {
-  --btn-xs: 0.6rem;
-  --btn-sm: 0.7rem;
-  --btn-md: 0.85rem;
-  --btn-lg: 1.3125rem;
+  --btn-xs: 0.6875rem;
+  --btn-sm: 0.8125rem;
+  --btn-md: 0.9375rem;
+  --btn-lg: 1.125rem;
   --btn-pill: 100rem;
-  --btn-height: 2.5rem;
-  --fs: 0.95rem;
-  --btn-fs: 0.9375rem;
+  --btn-fs: var(--btn-md);
+  --btn-height: calc(var(--btn-fs) * 2.25);
   --btn-bg: lightgray;
   --btn-width: max-content;
-  --btn-calc-height: var(--btn-height, calc(40rem / 16));
   font-size: var(--btn-fs);
   font-weight: var(--btn-fw, 500);
-  height: var(--btn-height, 2.5rem);
-  max-height: var(--btn-calc-height);
-  min-height: 1.5rem;
+  height: var(--btn-height);
   place-items: var(--btn-place, center);
-  padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
-  padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));
+  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);
   text-decoration: var(--btn-deco, none);
@@ -26,7 +22,7 @@ button {
   gap: var(--btn-gap, 0.2rem);
   white-space: var(--btn-wspc, inherit);
   margin: var(--btn-spc, 0);
-  transition: var(--tran-all);
+  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;
   width: var(--btn-width);
@@ -49,14 +45,15 @@ button[disabled]:is(:hover, :focus), button[aria-disabled=true]:is(:hover, :focu
   transform: none;
 }
 button:is(:hover, :focus) {
-  background-color: var(--btn-bg, var(--btn, lightgray));
-  filter: invert(1) hue-rotate 180deg;
-  transform: scale(0.95) var(--line-style, solid);
+  filter: var(--btn-hover-filter, brightness(0.85));
+  transform: var(--btn-hover-transform, scale(1.03));
+  outline: var(--btn-hover-outline, thin);
   outline-offset: var(--line-offset, 1px);
 }
 button:is(:hover, :focus)[aria-disabled=true] {
   transform: none;
   opacity: var(--btn-opacity, 0.5);
+  filter: none;
 }
 button[type=reset] {
   --btn-bg: transparent;
@@ -72,25 +69,25 @@ 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);
+button[data-btn~=xs],
+button .btn-xs {
   --btn-fs: var(--btn-xs);
-  --btn-height: 1.5rem;
   text-transform: uppercase;
 }
-button[data-btn~=sm] {
+button[data-btn~=sm],
+button .btn-sm {
   --btn-fs: var(--btn-sm);
-  --btn-height: 1.75rem;
 }
-button[data-btn~=md] {
+button[data-btn~=md],
+button .btn-md {
   --btn-fs: var(--btn-md);
-  --btn-height: 2rem;
 }
-button[data-btn~=lg] {
+button[data-btn~=lg],
+button .btn-lg {
   --btn-fs: var(--btn-lg);
-  --btn-height: 2.5rem;
 }
-button[data-btn~=icon] {
+button[data-btn~=icon],
+button .btn-icon {
   padding: unset;
   height: unset;
   --btn-bg: transparent;
@@ -101,7 +98,8 @@ button[data-btn~=icon] {
   align-items: center;
   justify-content: center;
 }
-button[data-btn~=text] {
+button[data-btn~=text],
+button .btn-text {
   --btn-bg: transparent;
   --btn-cl: currentColor;
   --btn-bdr: none;
@@ -110,10 +108,12 @@ button[data-btn~=text] {
   --btn-py: 0.75rem;
   --btn-px: 0.75rem;
 }
-button[data-btn~=text]:is(:hover, :focus) {
-  background-color: transparent;
-  outline: 0.07rem solid var(--btn-cl);
+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);
   outline-offset: 0;
+  filter: none;
 }
 
 /*# sourceMappingURL=button.css.map */

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;EACA;EACA;EAEA;EACA;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;EACA;;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;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"}

package/src/styles/cards/card.css

@@ -47,4 +47,20 @@
   padding-block-start: calc(var(--card-p) - 0.5rem);
 }
 
+[data-card=interactive] {
+  cursor: pointer;
+  transition: box-shadow 0.2s ease, transform 0.2s ease;
+}
+[data-card=interactive]:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
+}
+[data-card=interactive]:focus-visible {
+  outline: 0.125rem solid var(--focus-color, #0066CC);
+  outline-offset: 0.125rem;
+}
+[data-card=interactive]:focus:not(:focus-visible) {
+  outline: none;
+}
+
 /*# sourceMappingURL=card.css.map */

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","file":"card.css"}
+{"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"}

package/src/styles/details/details.css

@@ -30,6 +30,12 @@ details {
   max-height: var(--max-h-closed);
   overflow: clip;
 }
+@starting-style {
+  details {
+    transition: var(--summary-transitions);
+    color: red;
+  }
+}
 details + details {
   border-radius: 0;
   border-top: none;
@@ -59,14 +65,6 @@ details summary {
   transition: var(--summary-transitions);
   /* This ensures no bullet points are shown */
 }
-@supports (transition-behavior: allow-discrete) {
-  @starting-style {
-    details summary {
-      border-bottom: none;
-      transition: var(--summary-transitions);
-    }
-  }
-}
 details summary::-webkit-details-marker {
   display: none;
 }
@@ -101,5 +99,18 @@ details[open] > summary {
 details[open] > section {
   max-height: var(--max-h-open);
 }
+@starting-style {
+  details[open] > section {
+    max-height: 0;
+  }
+}
+@supports (transition-behavior: allow-discrete) {
+  @starting-style {
+    details {
+      max-height: 0;
+      transition: var(--summary-transitions);
+    }
+  }
+}
 
 /*# sourceMappingURL=details.css.map */

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;EACA;EACA;;AACA;EACE;EACA;;AAGF;EACE;;AAGF;EACE;;AAIF;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAmBA;;AAjBA;EACE;IAbJ;MAcM;MACA;;;;AAIJ;EACE;;AAGF;EACE;EACA;EACA;;AAIF;EACE;;AAEF;EACE;;AAKF;EACE;EACA;;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;EACA;;AAEA;EAjCF;IAkCI;IACA;;;AAGF;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;;AAKF;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AACA;EACE;;AAEF;EACE;;AACA;EAFF;IAGI;;;AAKN;EACE;IAxHJ;MAyHM;MACA","file":"details.css"}

package/src/styles/dialog/dialog.css

@@ -13,8 +13,23 @@
   --dialog-button-hover-bg: whitesmoke;
   --dialog-display: flex;
   --dialog-flex-direction: column;
+  /* Focus and accessibility */
+  --dialog-focus-color: #0066cc;
+  --dialog-focus-width: 0.125rem;
+  --dialog-focus-offset: 0.125rem;
+  --dialog-focus-outline: var(--dialog-focus-width) solid var(--dialog-focus-color);
 }
 
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  :root {
+    --dialog-border-color: currentColor;
+    --dialog-border-width: 0.125rem;
+    --dialog-close-color: currentColor;
+    --dialog-button-border: currentColor 0.125rem solid;
+    --dialog-focus-width: 0.1875rem;
+  }
+}
 dialog {
   width: var(--dialog-min-w);
   min-width: var(--min-w);
@@ -22,7 +37,12 @@ dialog {
   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);
+  padding-block-start: var(--dialog-padding);
+  /* Focus visible for keyboard navigation */
+}
+dialog:focus-visible {
+  outline: var(--dialog-focus-outline);
+  outline-offset: var(--dialog-focus-offset);
 }
 dialog[open] {
   display: var(--dialog-display);
@@ -57,11 +77,22 @@ dialog section {
   background-color: var(--dialog-button-bg);
   border: var(--dialog-button-border);
   cursor: pointer;
+  /* Keyboard focus indicator */
+  /* Remove default focus for mouse users */
 }
-.dialog-header button[type=button]:hover, .dialog-header button[type=button]:focus {
+.dialog-header button[type=button]:hover {
   border-color: var(--dialog-close-color);
   background-color: var(--dialog-button-hover-bg);
 }
+.dialog-header button[type=button]:focus-visible {
+  outline: var(--dialog-focus-outline);
+  outline-offset: var(--dialog-focus-offset);
+  border-color: var(--dialog-focus-color);
+  background-color: var(--dialog-button-hover-bg);
+}
+.dialog-header button[type=button]:focus:not(:focus-visible) {
+  outline: none;
+}
 
 .alert-dialog-actions,
 .dialog-footer {
@@ -71,6 +102,16 @@ dialog section {
   justify-content: var(--dialog-footer-justify, flex-end);
   gap: var(--dialog-gap);
   width: 100%;
+  /* Focus styles for footer buttons */
+}
+.alert-dialog-actions button:focus-visible,
+.dialog-footer button:focus-visible {
+  outline: var(--dialog-focus-outline);
+  outline-offset: var(--dialog-focus-offset);
+}
+.alert-dialog-actions button:focus:not(:focus-visible),
+.dialog-footer button:focus:not(:focus-visible) {
+  outline: none;
 }
 
 /*# sourceMappingURL=dialog.css.map */

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;;;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"}
+{"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"}

package/src/styles/images/img.css

@@ -1,21 +1,33 @@
+/**
+ * Image component styles
+ *
+ * Applies to all images with alt attribute (both decorative alt="" and semantic).
+ * Uses CSS custom properties for flexible theming and responsive behavior.
+ */
 img[alt] {
+  /* CSS Custom Properties - Override these for customization */
   --img-max-width: 100%;
   --img-height: auto;
   --img-object-fit: cover;
   --img-object-position: center;
   --img-aspect-ratio: auto 2/3;
   --img-display: inline-block;
+  /* Layout - Responsive by default */
   max-width: var(--img-max-width);
-  max-inline-size: var(--img-max-width);
+  max-inline-size: var(--img-max-width); /* Logical property for i18n */
   block-size: var(--img-height);
+  display: var(--img-display);
+  vertical-align: middle;
+  /* Object fitting for responsive images */
   object-fit: var(--img-object-fit);
   object-position: var(--img-object-position);
   aspect-ratio: var(--img-aspect-ratio);
-  display: var(--img-display);
-  vertical-align: middle;
+  /* Accessibility - Italic font for broken image alt text */
   font-style: italic;
+  /* Background for loading state */
   background-size: cover;
   background-repeat: no-repeat;
+  /* Shape margin for text wrapping */
   shape-margin: var(--spc-3);
 }
 

package/src/styles/images/img.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../components/images/img.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA","file":"img.css"}
+{"version":3,"sourceRoot":"","sources":["../../components/images/img.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAMA;AACE;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;EACA;EACA;AAEA;EACA;AAEA;EACA;EACA;AAEA;EACA;;;AAIA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA","file":"img.css"}