@mohasinac/appkit 2.7.22 → 2.7.24

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

@@ -1,164 +1,164 @@
-.appkit-section-tabs {
-  position: sticky;
-  top: var(--header-height, 0px);
-  z-index: var(--appkit-z-raised);
-  background: var(--appkit-color-surface);
-  border-bottom: 1px solid var(--appkit-color-border);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
-}
-
-.dark .appkit-section-tabs {
-  background: var(--appkit-color-bg);
-  border-bottom-color: var(--appkit-color-border);
-}
-
-.appkit-section-tabs--admin {
-  background-image: linear-gradient(to right, rgba(250, 245, 255, 0.75), transparent, rgba(238, 242, 255, 0.45));
-}
-
-.appkit-section-tabs--user {
-  background-image: linear-gradient(to right, rgba(238, 242, 255, 0.75), transparent, rgba(240, 253, 250, 0.45));
-}
-
-.dark .appkit-section-tabs--admin {
-  background-image: linear-gradient(to right, rgba(88, 28, 135, 0.2), transparent, rgba(49, 46, 129, 0.12));
-}
-
-.dark .appkit-section-tabs--user {
-  background-image: linear-gradient(to right, rgba(30, 58, 138, 0.2), transparent, rgba(19, 78, 74, 0.12));
-}
-
-.appkit-section-tabs__container {
-  width: min(80rem, 100%);
-  margin: 0 auto;
-}
-
-.appkit-section-tabs__scroll {
-  overflow-x: auto;
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-  touch-action: pan-x;
-  padding-bottom: 0.125rem;
-}
-
-.appkit-section-tabs__scroll::-webkit-scrollbar {
-  display: none;
-}
-
-.appkit-section-tabs__scroll--padded {
-  padding-left: 0.5rem;
-  padding-right: 0.5rem;
-}
-
-@media (min-width: 768px) {
-  .appkit-section-tabs__scroll--padded {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-}
-
-.appkit-section-tabs__track {
-  display: flex;
-  min-width: max-content;
-}
-
-@media (min-width: 1024px) {
-  .appkit-section-tabs__track--full {
-    min-width: 0;
-    width: 100%;
-  }
-}
-
-.appkit-section-tabs__tab {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  flex: 1;
-  min-width: fit-content;
-  flex-shrink: 0;
-  white-space: nowrap;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border: 1px solid transparent;
-  border-radius: 9999px;
-  padding: 0.625rem 1rem;
-  transition: all 0.2s ease;
-}
-
-@media (min-width: 640px) {
-  .appkit-section-tabs__tab {
-    padding-left: 1.25rem;
-    padding-right: 1.25rem;
-  }
-}
-
-.appkit-section-tabs__tab:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.55);
-}
-
-.dark .appkit-section-tabs__tab:focus-visible {
-  box-shadow: 0 0 0 2px rgba(240, 99, 185, 0.6);
-}
-
-.appkit-section-tabs__tab--active {
-  border-color: rgba(80, 156, 2, 0.35);
-  background: var(--appkit-color-secondary-600);
-  color: var(--appkit-color-text-on-primary);
-  box-shadow: 0 10px 24px -12px rgba(34, 197, 94, 0.7);
-}
-
-.dark .appkit-section-tabs__tab--active {
-  border-color: rgba(233, 30, 140, 0.4);
-  background: var(--appkit-color-primary);
-  color: var(--appkit-color-text-on-primary);
-  box-shadow: 0 10px 24px -12px rgba(236, 72, 153, 0.9);
-}
-
-.appkit-section-tabs__tab--inactive {
-  border-color: rgba(80, 156, 2, 0.2);
-  background: rgba(80, 156, 2, 0.1);
-  color: var(--appkit-color-secondary-600);
-}
-
-.appkit-section-tabs__tab--inactive:hover {
-  background: rgba(80, 156, 2, 0.18);
-}
-
-.dark .appkit-section-tabs__tab--inactive {
-  border-color: var(--appkit-color-border);
-  background: rgba(30, 41, 59, 0.8);
-  color: var(--appkit-color-primary-300);
-}
-
-.dark .appkit-section-tabs__tab--inactive:hover {
-  background: rgba(51, 65, 85, 0.9);
-  color: var(--appkit-color-primary-100);
-}
-
-.appkit-section-tabs__icon {
-  flex-shrink: 0;
-}
-
-.appkit-section-tabs__count {
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  padding: 0.125rem 0.375rem;
-  border-radius: 9999px;
-}
-
-.appkit-section-tabs__count--active {
-  background: rgba(255, 255, 255, 0.2);
-  color: var(--appkit-color-text-on-primary);
-}
-
-.appkit-section-tabs__count--inactive {
-  background: var(--appkit-color-zinc-100);
-  color: var(--appkit-color-zinc-500);
-}
-
-.dark .appkit-section-tabs__count--inactive {
-  background: var(--appkit-color-slate-700);
-  color: var(--appkit-color-slate-300);
-}
+.appkit-section-tabs {
+  position: sticky;
+  top: var(--header-height, 0px);
+  z-index: var(--appkit-z-raised);
+  background: var(--appkit-color-surface);
+  border-bottom: 1px solid var(--appkit-color-border);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
+}
+
+.dark .appkit-section-tabs {
+  background: var(--appkit-color-bg);
+  border-bottom-color: var(--appkit-color-border);
+}
+
+.appkit-section-tabs--admin {
+  background-image: linear-gradient(to right, rgba(250, 245, 255, 0.75), transparent, rgba(238, 242, 255, 0.45));
+}
+
+.appkit-section-tabs--user {
+  background-image: linear-gradient(to right, rgba(238, 242, 255, 0.75), transparent, rgba(240, 253, 250, 0.45));
+}
+
+.dark .appkit-section-tabs--admin {
+  background-image: linear-gradient(to right, rgba(88, 28, 135, 0.2), transparent, rgba(49, 46, 129, 0.12));
+}
+
+.dark .appkit-section-tabs--user {
+  background-image: linear-gradient(to right, rgba(30, 58, 138, 0.2), transparent, rgba(19, 78, 74, 0.12));
+}
+
+.appkit-section-tabs__container {
+  width: min(80rem, 100%);
+  margin: 0 auto;
+}
+
+.appkit-section-tabs__scroll {
+  overflow-x: auto;
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+  touch-action: pan-x;
+  padding-bottom: 0.125rem;
+}
+
+.appkit-section-tabs__scroll::-webkit-scrollbar {
+  display: none;
+}
+
+.appkit-section-tabs__scroll--padded {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .appkit-section-tabs__scroll--padded {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+}
+
+.appkit-section-tabs__track {
+  display: flex;
+  min-width: max-content;
+}
+
+@media (min-width: 1024px) {
+  .appkit-section-tabs__track--full {
+    min-width: 0;
+    width: 100%;
+  }
+}
+
+.appkit-section-tabs__tab {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  flex: 1;
+  min-width: fit-content;
+  flex-shrink: 0;
+  white-space: nowrap;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid transparent;
+  border-radius: 9999px;
+  padding: 0.625rem 1rem;
+  transition: all 0.2s ease;
+}
+
+@media (min-width: 640px) {
+  .appkit-section-tabs__tab {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+  }
+}
+
+.appkit-section-tabs__tab:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 2px rgba(101, 196, 8, 0.55);
+}
+
+.dark .appkit-section-tabs__tab:focus-visible {
+  box-shadow: 0 0 0 2px rgba(240, 99, 185, 0.6);
+}
+
+.appkit-section-tabs__tab--active {
+  border-color: rgba(80, 156, 2, 0.35);
+  background: var(--appkit-color-secondary-600);
+  color: var(--appkit-color-text-on-primary);
+  box-shadow: 0 10px 24px -12px rgba(34, 197, 94, 0.7);
+}
+
+.dark .appkit-section-tabs__tab--active {
+  border-color: rgba(233, 30, 140, 0.4);
+  background: var(--appkit-color-primary);
+  color: var(--appkit-color-text-on-primary);
+  box-shadow: 0 10px 24px -12px rgba(236, 72, 153, 0.9);
+}
+
+.appkit-section-tabs__tab--inactive {
+  border-color: rgba(80, 156, 2, 0.2);
+  background: rgba(80, 156, 2, 0.1);
+  color: var(--appkit-color-secondary-600);
+}
+
+.appkit-section-tabs__tab--inactive:hover {
+  background: rgba(80, 156, 2, 0.18);
+}
+
+.dark .appkit-section-tabs__tab--inactive {
+  border-color: var(--appkit-color-border);
+  background: rgba(30, 41, 59, 0.8);
+  color: var(--appkit-color-primary-300);
+}
+
+.dark .appkit-section-tabs__tab--inactive:hover {
+  background: rgba(51, 65, 85, 0.9);
+  color: var(--appkit-color-primary-100);
+}
+
+.appkit-section-tabs__icon {
+  flex-shrink: 0;
+}
+
+.appkit-section-tabs__count {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  border-radius: 9999px;
+}
+
+.appkit-section-tabs__count--active {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--appkit-color-text-on-primary);
+}
+
+.appkit-section-tabs__count--inactive {
+  background: var(--appkit-color-zinc-100);
+  color: var(--appkit-color-zinc-500);
+}
+
+.dark .appkit-section-tabs__count--inactive {
+  background: var(--appkit-color-slate-700);
+  color: var(--appkit-color-slate-300);
+}

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

@@ -1,14 +1,14 @@
-/* Semantic — HTML5 landmark wrappers (Section, Article, Main, Aside, Nav, etc.) */
-/* Pure passthroughs — no default styles. Exists for style contract compliance. */
-/* Consumer themes may add base landmark styles via these hooks. */
-
-.appkit-section {}
-.appkit-article {}
-.appkit-main {}
-.appkit-aside {}
-.appkit-nav {}
-.appkit-header {}
-.appkit-footer {}
-.appkit-ul {}
-.appkit-ol {}
-.appkit-li {}
+/* Semantic — HTML5 landmark wrappers (Section, Article, Main, Aside, Nav, etc.) */
+/* Pure passthroughs — no default styles. Exists for style contract compliance. */
+/* Consumer themes may add base landmark styles via these hooks. */
+
+.appkit-section {}
+.appkit-article {}
+.appkit-main {}
+.appkit-aside {}
+.appkit-nav {}
+.appkit-header {}
+.appkit-footer {}
+.appkit-ul {}
+.appkit-ol {}
+.appkit-li {}

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

@@ -1,34 +1,34 @@
-/* SkipToMain — accessibility skip-navigation link */
-
-.appkit-skip-to-main {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.appkit-skip-to-main:focus-visible {
-  position: fixed;
-  left: 1rem;
-  top: 1rem;
-  z-index: 100;
-  width: auto;
-  height: auto;
-  padding: 0.625rem 1rem;
-  margin: 0;
-  overflow: visible;
-  clip: auto;
-  white-space: normal;
-  border-radius: 0.5rem;
-  background: var(--appkit-color-secondary);
-  color: var(--appkit-color-text-on-primary);
-  font-size: 0.875rem;
-  font-weight: 600;
-  outline: none;
-  box-shadow: 0 0 0 2px var(--appkit-color-secondary), 0 0 0 4px var(--appkit-color-surface);
-}
+/* SkipToMain — accessibility skip-navigation link */
+
+.appkit-skip-to-main {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.appkit-skip-to-main:focus-visible {
+  position: fixed;
+  left: 1rem;
+  top: 1rem;
+  z-index: 100;
+  width: auto;
+  height: auto;
+  padding: 0.625rem 1rem;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+  border-radius: 0.5rem;
+  background: var(--appkit-color-secondary);
+  color: var(--appkit-color-text-on-primary);
+  font-size: 0.875rem;
+  font-weight: 600;
+  outline: none;
+  box-shadow: 0 0 0 2px var(--appkit-color-secondary), 0 0 0 4px var(--appkit-color-surface);
+}

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

@@ -1,12 +1,12 @@
-.appkit-sort-dropdown {
-  align-items: center;
-}
-
-.appkit-sort-dropdown__label {
-  white-space: nowrap;
-}
-
-.appkit-sort-dropdown__select {
-  min-height: 2.25rem;
-  height: 2.25rem;
-}
+.appkit-sort-dropdown {
+  align-items: center;
+}
+
+.appkit-sort-dropdown__label {
+  white-space: nowrap;
+}
+
+.appkit-sort-dropdown__select {
+  min-height: 2.25rem;
+  height: 2.25rem;
+}

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

@@ -1,5 +1,5 @@
-/* StatusBadge inherits all styles from Badge.
-   This base class is a stable hook for consumer overrides. */
-.appkit-status-badge {
-  text-transform: none;
-}
+/* StatusBadge inherits all styles from Badge.
+   This base class is a stable hook for consumer overrides. */
+.appkit-status-badge {
+  text-transform: none;
+}

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

@@ -1,33 +1,33 @@
-/* UnsavedChangesModal — confirmation dialog for unsaved navigation */
-
-.appkit-unsaved-modal__backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: var(--appkit-z-sidebar);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  background: rgba(0, 0, 0, 0.5);
-  backdrop-filter: blur(4px);
-}
-
-.appkit-unsaved-modal__card {
-  width: 100%;
-  max-width: 28rem;
-  padding: 1.5rem;
-}
-
-.appkit-unsaved-modal__title {
-  margin-bottom: 0.5rem;
-}
-
-.appkit-unsaved-modal__message {
-  margin-bottom: 1.5rem;
-}
-
-.appkit-unsaved-modal__actions {
-  display: flex;
-  gap: 0.75rem;
-  justify-content: flex-start;
-}
+/* UnsavedChangesModal — confirmation dialog for unsaved navigation */
+
+.appkit-unsaved-modal__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: var(--appkit-z-sidebar);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+}
+
+.appkit-unsaved-modal__card {
+  width: 100%;
+  max-width: 28rem;
+  padding: 1.5rem;
+}
+
+.appkit-unsaved-modal__title {
+  margin-bottom: 0.5rem;
+}
+
+.appkit-unsaved-modal__message {
+  margin-bottom: 1.5rem;
+}
+
+.appkit-unsaved-modal__actions {
+  display: flex;
+  gap: 0.75rem;
+  justify-content: flex-start;
+}

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

@@ -1,50 +1,50 @@
-.appkit-view-toggle {
-  display: flex;
-  gap: 0.25rem;
-}
-
-.appkit-view-toggle__button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem;
-  border-radius: 0.5rem;
-  border: 1px solid;
-  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
-}
-
-.appkit-view-toggle__button--active {
-  color: var(--appkit-color-secondary-600);
-  background: rgba(80, 156, 2, 0.08);
-  border-color: rgba(80, 156, 2, 0.3);
-}
-
-.appkit-view-toggle__button--inactive {
-  color: var(--appkit-color-zinc-500);
-  background: transparent;
-  border-color: var(--appkit-color-border);
-}
-
-.appkit-view-toggle__button--inactive:hover {
-  background: var(--appkit-color-zinc-100);
-}
-
-.appkit-view-toggle__icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.dark .appkit-view-toggle__button--active {
-  color: var(--appkit-color-primary);
-  background: rgba(233, 30, 140, 0.14);
-  border-color: rgba(233, 30, 140, 0.35);
-}
-
-.dark .appkit-view-toggle__button--inactive {
-  color: var(--appkit-color-slate-400);
-  border-color: var(--appkit-color-border);
-}
-
-.dark .appkit-view-toggle__button--inactive:hover {
-  background: var(--appkit-color-slate-800);
-}
+.appkit-view-toggle {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.appkit-view-toggle__button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.5rem;
+  border-radius: 0.5rem;
+  border: 1px solid;
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
+}
+
+.appkit-view-toggle__button--active {
+  color: var(--appkit-color-secondary-600);
+  background: rgba(80, 156, 2, 0.08);
+  border-color: rgba(80, 156, 2, 0.3);
+}
+
+.appkit-view-toggle__button--inactive {
+  color: var(--appkit-color-zinc-500);
+  background: transparent;
+  border-color: var(--appkit-color-border);
+}
+
+.appkit-view-toggle__button--inactive:hover {
+  background: var(--appkit-color-zinc-100);
+}
+
+.appkit-view-toggle__icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.dark .appkit-view-toggle__button--active {
+  color: var(--appkit-color-primary);
+  background: rgba(233, 30, 140, 0.14);
+  border-color: rgba(233, 30, 140, 0.35);
+}
+
+.dark .appkit-view-toggle__button--inactive {
+  color: var(--appkit-color-slate-400);
+  border-color: var(--appkit-color-border);
+}
+
+.dark .appkit-view-toggle__button--inactive:hover {
+  background: var(--appkit-color-slate-800);
+}