@mohasinac/appkit 2.7.22 → 2.7.24

package/dist/ui/components/Layout.style.css

@@ -1,229 +1,229 @@
-.appkit-container {
-  margin-left: auto;
-  margin-right: auto;
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-@media (min-width: 640px) {
-  .appkit-container {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-}
-
-@media (min-width: 1024px) {
-  .appkit-container {
-    padding-left: 2rem;
-    padding-right: 2rem;
-  }
-}
-
-.appkit-container--sm { max-width: 48rem; }
-.appkit-container--md { max-width: 56rem; }
-.appkit-container--lg { max-width: 64rem; }
-.appkit-container--xl { max-width: 72rem; }
-.appkit-container--2xl { max-width: 80rem; }
-.appkit-container--full { max-width: 96rem; }
-.appkit-container--wide { max-width: 96rem; }
-.appkit-container--ultra { max-width: 1920px; }
-
-@media (min-width: 1024px) {
-  .appkit-container--wide {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-  }
-}
-
-.appkit-stack {
-  display: flex;
-  flex-direction: column;
-}
-
-.appkit-row {
-  display: flex;
-  flex-direction: row;
-}
-
-.appkit-grid {
-  display: grid;
-}
-
-.appkit-row--wrap { flex-wrap: wrap; }
-.appkit-stack--centered,
-.appkit-row--centered {
-  align-items: center;
-  justify-content: center;
-}
-
-.appkit-items--start { align-items: flex-start; }
-.appkit-items--center { align-items: center; }
-.appkit-items--end { align-items: flex-end; }
-.appkit-items--stretch { align-items: stretch; }
-.appkit-items--baseline { align-items: baseline; }
-
-.appkit-justify--start { justify-content: flex-start; }
-.appkit-justify--center { justify-content: center; }
-.appkit-justify--end { justify-content: flex-end; }
-.appkit-justify--between { justify-content: space-between; }
-.appkit-justify--around { justify-content: space-around; }
-.appkit-justify--evenly { justify-content: space-evenly; }
-
-.appkit-gap--px { gap: 1px; }
-.appkit-gap--xs { gap: 0.25rem; }
-.appkit-gap--sm { gap: 0.5rem; }
-.appkit-gap--2-5 { gap: 0.625rem; }
-.appkit-gap--3 { gap: 0.75rem; }
-.appkit-gap--md { gap: 1rem; }
-.appkit-gap--5 { gap: 1.25rem; }
-.appkit-gap--lg { gap: 1.5rem; }
-.appkit-gap--xl { gap: 2rem; }
-.appkit-gap--2xl { gap: 3rem; }
-
-.appkit-grid--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--5 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
-.appkit-grid--cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--product-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
-.appkit-grid--product-cards-compact { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card), 1fr)); gap: 1rem; }
-.appkit-grid--store-cards { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card), 1fr)); gap: 1.5rem; }
-.appkit-grid--category-cards { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card-xs), 1fr)); gap: 1rem; }
-.appkit-grid--coupon-cards { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 1.5rem; }
-.appkit-grid--address-cards { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card-lg), 1fr)); gap: 1rem; }
-.appkit-grid--stat-tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
-.appkit-grid--nav-tiles { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card-sm), 1fr)); gap: 1rem; }
-.appkit-grid--halves { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--two-third { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--one-third { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--sidebar { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--sidebar-right { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--sidebar-wide { grid-template-columns: repeat(1, minmax(0, 1fr)); }
-.appkit-grid--product-detail-triplet {
-  grid-template-columns: repeat(1, minmax(0, 1fr));
-  gap: 1.5rem;
-}
-.appkit-grid--detail-split {
-  display: flex;
-  flex-direction: column;
-  gap: 1.5rem;
-}
-@media (min-width: 768px) {
-  .appkit-grid--detail-split {
-    flex-direction: row;
-  }
-  .appkit-grid--detail-split > *:first-child {
-    width: 50%;
-    flex-shrink: 0;
-  }
-  .appkit-grid--detail-split > *:nth-child(n+2) {
-    flex: 1;
-  }
-}
-.appkit-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
-.appkit-grid--auto-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
-.appkit-grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
-
-@media (min-width: 640px) {
-  .appkit-grid--2,
-  .appkit-grid--3,
-  .appkit-grid--4,
-  .appkit-grid--5,
-  .appkit-grid--cards {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .appkit-grid--6 {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (min-width: 768px) {
-  .appkit-grid--5,
-  .appkit-grid--cards {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .appkit-grid--halves {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .appkit-grid--two-third {
-    grid-template-columns: 2fr 1fr;
-  }
-
-  .appkit-grid--one-third {
-    grid-template-columns: 1fr 2fr;
-  }
-
-  .appkit-grid--6 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-
-@media (min-width: 1024px) {
-  .appkit-grid--3,
-  .appkit-grid--4,
-  .appkit-grid--5,
-  .appkit-grid--cards {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .appkit-grid--sidebar {
-    grid-template-columns: 280px 1fr;
-  }
-
-  .appkit-grid--sidebar-right {
-    grid-template-columns: 1fr 280px;
-  }
-
-  .appkit-grid--sidebar-wide {
-    grid-template-columns: 320px 1fr;
-  }
-
-  .appkit-grid--product-detail-triplet {
-    grid-template-columns: 1fr 1fr 280px;
-    gap: 2rem;
-  }
-}
-
-@media (min-width: 1280px) {
-  .appkit-grid--4 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .appkit-grid--6 {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  .appkit-grid--product-detail-triplet {
-    grid-template-columns: 1fr 1fr 300px;
-  }
-}
-
-@media (min-width: 1536px) {
-  .appkit-grid--2,
-  .appkit-grid--halves {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .appkit-grid--3 {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-
-  .appkit-grid--4,
-  .appkit-grid--5,
-  .appkit-grid--cards {
-    grid-template-columns: repeat(5, minmax(0, 1fr));
-  }
-
-  .appkit-grid--6 {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-
-  .appkit-grid--product-detail-triplet {
-    grid-template-columns: 1fr 1fr 320px;
-  }
-}
+.appkit-container {
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+@media (min-width: 640px) {
+  .appkit-container {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .appkit-container {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}
+
+.appkit-container--sm { max-width: 48rem; }
+.appkit-container--md { max-width: 56rem; }
+.appkit-container--lg { max-width: 64rem; }
+.appkit-container--xl { max-width: 72rem; }
+.appkit-container--2xl { max-width: 80rem; }
+.appkit-container--full { max-width: 96rem; }
+.appkit-container--wide { max-width: 96rem; }
+.appkit-container--ultra { max-width: 1920px; }
+
+@media (min-width: 1024px) {
+  .appkit-container--wide {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+  }
+}
+
+.appkit-stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.appkit-row {
+  display: flex;
+  flex-direction: row;
+}
+
+.appkit-grid {
+  display: grid;
+}
+
+.appkit-row--wrap { flex-wrap: wrap; }
+.appkit-stack--centered,
+.appkit-row--centered {
+  align-items: center;
+  justify-content: center;
+}
+
+.appkit-items--start { align-items: flex-start; }
+.appkit-items--center { align-items: center; }
+.appkit-items--end { align-items: flex-end; }
+.appkit-items--stretch { align-items: stretch; }
+.appkit-items--baseline { align-items: baseline; }
+
+.appkit-justify--start { justify-content: flex-start; }
+.appkit-justify--center { justify-content: center; }
+.appkit-justify--end { justify-content: flex-end; }
+.appkit-justify--between { justify-content: space-between; }
+.appkit-justify--around { justify-content: space-around; }
+.appkit-justify--evenly { justify-content: space-evenly; }
+
+.appkit-gap--px { gap: 1px; }
+.appkit-gap--xs { gap: 0.25rem; }
+.appkit-gap--sm { gap: 0.5rem; }
+.appkit-gap--2-5 { gap: 0.625rem; }
+.appkit-gap--3 { gap: 0.75rem; }
+.appkit-gap--md { gap: 1rem; }
+.appkit-gap--5 { gap: 1.25rem; }
+.appkit-gap--lg { gap: 1.5rem; }
+.appkit-gap--xl { gap: 2rem; }
+.appkit-gap--2xl { gap: 3rem; }
+
+.appkit-grid--1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--2 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--3 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--4 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--5 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.appkit-grid--cards { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--product-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1.5rem; }
+.appkit-grid--product-cards-compact { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card), 1fr)); gap: 1rem; }
+.appkit-grid--store-cards { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card), 1fr)); gap: 1.5rem; }
+.appkit-grid--category-cards { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card-xs), 1fr)); gap: 1rem; }
+.appkit-grid--coupon-cards { grid-template-columns: repeat(auto-fill, minmax(264px, 1fr)); gap: 1.5rem; }
+.appkit-grid--address-cards { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card-lg), 1fr)); gap: 1rem; }
+.appkit-grid--stat-tiles { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
+.appkit-grid--nav-tiles { grid-template-columns: repeat(auto-fill, minmax(var(--appkit-grid-min-card-sm), 1fr)); gap: 1rem; }
+.appkit-grid--halves { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--two-third { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--one-third { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--sidebar { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--sidebar-right { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--sidebar-wide { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.appkit-grid--product-detail-triplet {
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+.appkit-grid--detail-split {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+@media (min-width: 768px) {
+  .appkit-grid--detail-split {
+    flex-direction: row;
+  }
+  .appkit-grid--detail-split > *:first-child {
+    width: 50%;
+    flex-shrink: 0;
+  }
+  .appkit-grid--detail-split > *:nth-child(n+2) {
+    flex: 1;
+  }
+}
+.appkit-grid--auto-sm { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
+.appkit-grid--auto-md { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
+.appkit-grid--auto-lg { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
+
+@media (min-width: 640px) {
+  .appkit-grid--2,
+  .appkit-grid--3,
+  .appkit-grid--4,
+  .appkit-grid--5,
+  .appkit-grid--cards {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .appkit-grid--6 {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 768px) {
+  .appkit-grid--5,
+  .appkit-grid--cards {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .appkit-grid--halves {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .appkit-grid--two-third {
+    grid-template-columns: 2fr 1fr;
+  }
+
+  .appkit-grid--one-third {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  .appkit-grid--6 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .appkit-grid--3,
+  .appkit-grid--4,
+  .appkit-grid--5,
+  .appkit-grid--cards {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .appkit-grid--sidebar {
+    grid-template-columns: 280px 1fr;
+  }
+
+  .appkit-grid--sidebar-right {
+    grid-template-columns: 1fr 280px;
+  }
+
+  .appkit-grid--sidebar-wide {
+    grid-template-columns: 320px 1fr;
+  }
+
+  .appkit-grid--product-detail-triplet {
+    grid-template-columns: 1fr 1fr 280px;
+    gap: 2rem;
+  }
+}
+
+@media (min-width: 1280px) {
+  .appkit-grid--4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .appkit-grid--6 {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .appkit-grid--product-detail-triplet {
+    grid-template-columns: 1fr 1fr 300px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .appkit-grid--2,
+  .appkit-grid--halves {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .appkit-grid--3 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .appkit-grid--4,
+  .appkit-grid--5,
+  .appkit-grid--cards {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+
+  .appkit-grid--6 {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+
+  .appkit-grid--product-detail-triplet {
+    grid-template-columns: 1fr 1fr 320px;
+  }
+}

package/dist/ui/components/Menu.style.css

@@ -1,6 +1,6 @@
-/* Menu — delegates to Dropdown; no additional styles needed */
-/* Exists for style contract compliance. See Dropdown.style.css for actual styles. */
-
-.appkit-menu {
-  /* Inherits all styling from Dropdown */
-}
+/* Menu — delegates to Dropdown; no additional styles needed */
+/* Exists for style contract compliance. See Dropdown.style.css for actual styles. */
+
+.appkit-menu {
+  /* Inherits all styling from Dropdown */
+}

package/dist/ui/components/NavigationLoader.style.css

@@ -1,19 +1,19 @@
-.appkit-nav-loader {
-  position: fixed;
-  inset: 0;
-  z-index: 9998;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 1.25rem;
-  background: rgba(0, 0, 0, 0.55);
-  backdrop-filter: blur(4px);
-}
-
-.appkit-nav-loader__timer {
-  font-size: 0.875rem;
-  font-variant-numeric: tabular-nums;
-  color: rgba(255, 255, 255, 0.75);
-  letter-spacing: 0.04em;
-}
+.appkit-nav-loader {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+}
+
+.appkit-nav-loader__timer {
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  color: rgba(255, 255, 255, 0.75);
+  letter-spacing: 0.04em;
+}

package/dist/ui/components/ResponsiveView.style.css

@@ -1,69 +1,69 @@
-/* ResponsiveView — CSS-driven responsive branch visibility */
-
-.appkit-responsive-view__mobile {
-  display: block;
-}
-
-.appkit-responsive-view__desktop {
-  display: none;
-}
-
-.appkit-responsive-view__tablet {
-  display: none;
-}
-
-/* sm breakpoint */
-.appkit-responsive-view--sm .appkit-responsive-view__mobile {
-  @media (min-width: 640px) {
-    display: none;
-  }
-}
-.appkit-responsive-view--sm .appkit-responsive-view__desktop {
-  @media (min-width: 640px) {
-    display: block;
-  }
-}
-
-/* md breakpoint (default) */
-.appkit-responsive-view--md .appkit-responsive-view__mobile {
-  @media (min-width: 768px) {
-    display: none;
-  }
-}
-.appkit-responsive-view--md .appkit-responsive-view__desktop {
-  @media (min-width: 768px) {
-    display: block;
-  }
-}
-.appkit-responsive-view--md .appkit-responsive-view__tablet {
-  @media (min-width: 768px) {
-    display: block;
-  }
-  @media (min-width: 1024px) {
-    display: none;
-  }
-}
-
-/* lg breakpoint */
-.appkit-responsive-view--lg .appkit-responsive-view__mobile {
-  @media (min-width: 1024px) {
-    display: none;
-  }
-}
-.appkit-responsive-view--lg .appkit-responsive-view__desktop {
-  @media (min-width: 1024px) {
-    display: block;
-  }
-}
-
-/* xl breakpoint */
-.appkit-responsive-view--xl .appkit-responsive-view__mobile {
-  @media (min-width: 1280px) {
-    display: none;
-  }
-}
-.appkit-responsive-view--xl .appkit-responsive-view__desktop {
-  @media (min-width: 1280px) {
-    display: block;
-  }
-}
+/* ResponsiveView — CSS-driven responsive branch visibility */
+
+.appkit-responsive-view__mobile {
+  display: block;
+}
+
+.appkit-responsive-view__desktop {
+  display: none;
+}
+
+.appkit-responsive-view__tablet {
+  display: none;
+}
+
+/* sm breakpoint */
+.appkit-responsive-view--sm .appkit-responsive-view__mobile {
+  @media (min-width: 640px) {
+    display: none;
+  }
+}
+.appkit-responsive-view--sm .appkit-responsive-view__desktop {
+  @media (min-width: 640px) {
+    display: block;
+  }
+}
+
+/* md breakpoint (default) */
+.appkit-responsive-view--md .appkit-responsive-view__mobile {
+  @media (min-width: 768px) {
+    display: none;
+  }
+}
+.appkit-responsive-view--md .appkit-responsive-view__desktop {
+  @media (min-width: 768px) {
+    display: block;
+  }
+}
+.appkit-responsive-view--md .appkit-responsive-view__tablet {
+  @media (min-width: 768px) {
+    display: block;
+  }
+  @media (min-width: 1024px) {
+    display: none;
+  }
+}
+
+/* lg breakpoint */
+.appkit-responsive-view--lg .appkit-responsive-view__mobile {
+  @media (min-width: 1024px) {
+    display: none;
+  }
+}
+.appkit-responsive-view--lg .appkit-responsive-view__desktop {
+  @media (min-width: 1024px) {
+    display: block;
+  }
+}
+
+/* xl breakpoint */
+.appkit-responsive-view--xl .appkit-responsive-view__mobile {
+  @media (min-width: 1280px) {
+    display: none;
+  }
+}
+.appkit-responsive-view--xl .appkit-responsive-view__desktop {
+  @media (min-width: 1280px) {
+    display: block;
+  }
+}

package/dist/ui/components/RoleBadge.style.css

@@ -1,7 +1,7 @@
-/* RoleBadge — thin wrapper over Badge with role-specific color mapping */
-/* No additional styles needed — delegates entirely to Badge component */
-/* File exists to satisfy style contract requirement */
-
-.appkit-role-badge {
-  /* Inherits all styling from Badge variant */
-}
+/* RoleBadge — thin wrapper over Badge with role-specific color mapping */
+/* No additional styles needed — delegates entirely to Badge component */
+/* File exists to satisfy style contract requirement */
+
+.appkit-role-badge {
+  /* Inherits all styling from Badge variant */
+}