@ardium-ui/ui 5.0.0-alpha.7 → 5.0.0-alpha.71

package/prebuilt-themes/default/table-pagination.css

@@ -1,25 +1,37 @@
+:root {
+  --ard-table-pagination-height: 2.9375rem;
+  --ard-table-pagination-gap: 2rem;
+  --ard-table-pagination-padding: 0 0.5rem 0 1rem;
+  --ard-table-pagination-items-per-page-gap: 0.5rem;
+  --ard-table-pagination-current-page-gap: 1.25rem;
+  --ard-table-pagination-height-compact: 2.1875rem;
+  --ard-table-pagination-font-size-compact: 0.875rem;
+  --ard-table-pagination-select-padding-left: 0.875em;
+  --ard-table-pagination-disabled-text-opacity: 50%;
+}
+
 .ard-pagination {
-  height: 2.9375rem;
+  height: var(--ard-table-pagination-height, 2.9375rem);
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 2rem;
-  padding: 0 0.5rem 0 1rem;
+  gap: var(--ard-table-pagination-gap, 2rem);
+  padding: var(--ard-table-pagination-padding, 0 0.5rem 0 1rem);
   box-sizing: border-box;
 }
 .ard-pagination .ard-pagination__items-per-page {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--ard-table-pagination-items-per-page-gap, 0.5rem);
 }
 .ard-pagination .ard-pagination__current-page {
   display: flex;
   align-items: center;
-  gap: 1.25rem;
+  gap: var(--ard-table-pagination-current-page-gap, 1.25rem);
 }
 .ard-pagination.ard-compact {
-  height: 2.1875rem;
-  font-size: 0.875rem;
+  height: var(--ard-table-pagination-height-compact, 2.1875rem);
+  font-size: var(--ard-table-pagination-font-size-compact, 0.875rem);
 }
 .ard-pagination.ard-align-left {
   justify-content: flex-start;
@@ -34,7 +46,7 @@
   justify-content: space-between;
 }
 .ard-pagination .ard-select {
-  padding-left: 0.875em;
+  padding-left: var(--ard-table-pagination-select-padding-left, 0.875em);
 }
 
 .ard-disabled .ard-pagination {
@@ -42,7 +54,7 @@
   user-select: none;
 }
 .ard-disabled .ard-pagination .ard-pagination__text {
-  opacity: 50%;
+  opacity: var(--ard-table-pagination-disabled-text-opacity, 50%);
 }
 
 /*# sourceMappingURL=table-pagination.css.map */

package/prebuilt-themes/default/table-pagination.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/table-pagination.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;;;AAKF;EACE;EACA;;AAEA;EACE","file":"table-pagination.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/table-pagination.scss"],"names":[],"mappings":"AAGA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAIF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAIF;EACE;;;AAKF;EACE;EACA;;AAEA;EACE","file":"table-pagination.css"}

package/prebuilt-themes/default/table.css

@@ -1,9 +1,33 @@
+:root {
+  --ard-table-cell-padding: 0 0.75rem;
+  --ard-table-header-gap: 0.75rem;
+  --ard-table-header-cell-height: 3.375rem;
+  --ard-table-header-cell-font-weight: 500;
+  --ard-table-header-cell-letter-spacing: 0.25px;
+  --ard-table-body-cell-height: 3rem;
+  --ard-table-disabled-row-opacity: 50%;
+  --ard-table-bold-row-font-weight: 600;
+  --ard-table-sticky-header-top: 0;
+  --ard-table-sticky-header-z-index: 2;
+  --ard-table-caption-height: 3.125rem;
+  --ard-table-progress-bar-height: 0.1875rem;
+  --ard-table-progress-bar-z-index: 1;
+  --ard-table-sort-gap: 0.375rem;
+  --ard-table-sort-border-radius: 0.25rem;
+  --ard-table-sort-outline-offset: 0.25rem;
+  --ard-table-sort-outline-width: 2px;
+  --ard-table-sort-outline-color: black;
+  --ard-table-sort-icon-size: 1rem;
+  --ard-table-sort-icon-weight: 900;
+  --ard-table-border-radius: 0.5rem;
+}
+
 .ard-table {
   border-collapse: collapse;
-  background: var(--ard-bg);
+  background: var(--ard-table-background, var(--ard-bg));
   --ard-_table-header-border: var(--ard-cmpcl--border);
   --ard-_table-header-border-light: var(--ard-cmpcl--border-light);
-  --ard-_table-border: ARD.$border;
+  --ard-_table-border: var(--ard-table-border-color-strong, var(--ard-border));
   --ard-_table-header-background: var(--ard-cmpcl--bg);
   --ard-_table-header-background-light: var(--ard-cmpcl--bg-header);
   --ard-_table-header-color: var(--ard-cmpcl--content);
@@ -145,7 +169,7 @@
   --ard-cmpcl--overlay-colored-light: currentColor;
 }
 .ard-table .ard-table__body {
-  border: 1px solid var(--ard-detail-ultralight);
+  border: var(--ard-table-border-width, 1px) var(--ard-table-border-style, solid) var(--ard-table-border-color, var(--ard-detail-ultralight));
 }
 .ard-table .ard-table__header-cell,
 .ard-table .ard-table__body-cell {
@@ -155,15 +179,15 @@
 .ard-table .ard-table__body-cell > .ard-table__cell-container {
   height: max-content;
   max-height: 100%;
-  padding: 0 0.75rem;
+  padding: var(--ard-table-cell-padding, 0 0.75rem);
   box-sizing: border-box;
-  font-size: 0.875rem;
+  font-size: var(--ard-form-field-font-size, 0.875rem);
 }
 .ard-table .ard-table__header-cell > .ard-table__cell-container .ard-table__header-template-container,
 .ard-table .ard-table__body-cell > .ard-table__cell-container .ard-table__header-template-container {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: var(--ard-table-header-gap, 0.75rem);
 }
 .ard-table .ard-table__header-cell > .ard-table__cell-container .ard-table__header-template-container .ard-table__header-content-container,
 .ard-table .ard-table__body-cell > .ard-table__cell-container .ard-table__header-template-container .ard-table__header-content-container {
@@ -172,12 +196,12 @@
   white-space: nowrap;
 }
 .ard-table .ard-table__header-cell {
-  height: 3.375rem;
-  font-weight: 500;
-  letter-spacing: 0.25px;
+  height: var(--ard-table-header-cell-height, 3.375rem);
+  font-weight: var(--ard-table-header-cell-font-weight, 500);
+  letter-spacing: var(--ard-table-header-cell-letter-spacing, 0.25px);
 }
 .ard-table .ard-table__body-cell {
-  height: 3rem;
+  height: var(--ard-table-body-cell-height, 3rem);
   transition: background-color 0.15s ease;
 }
 .ard-table .ard-table__body-cell .ard-table__cell-container {
@@ -186,17 +210,17 @@
   white-space: nowrap;
 }
 .ard-table .ard-table__checkbox-cell > .ard-table__cell-container {
-  width: 3rem;
-  height: 3rem;
+  width: var(--ard-table-body-cell-height, 3rem);
+  height: var(--ard-table-body-cell-height, 3rem);
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .ard-table .ard-table__body-row .ard-table__body-cell {
-  border-bottom: 1px solid var(--ard-detail-ultralight);
+  border-bottom: 1px solid var(--ard-table-border-color, var(--ard-detail-ultralight));
 }
 .ard-table .ard-table__empty-row .ard-table__empty-cell {
-  height: 3rem;
+  height: var(--ard-table-body-cell-height, 3rem);
 }
 .ard-table .ard-table__empty-row:not(:last-of-type) .ard-table__empty-cell {
   border-bottom: 1px solid transparent;
@@ -206,23 +230,23 @@
   pointer-events: none;
 }
 .ard-table.ard-table-loading .ard-table__body {
-  opacity: 40%;
+  opacity: var(--ard-table-loading-opacity, 40%);
 }
 .ard-table.ard-table-loading .ard-table__header .ard-table__checkbox-cell {
-  opacity: 40%;
+  opacity: var(--ard-table-loading-opacity, 40%);
 }
 .ard-table .ard-table__progress-bar-row {
-  background-color: var(--ard-bg);
-  border-left: 1px solid var(--ard-detail-ultralight);
-  border-right: 1px solid var(--ard-detail-ultralight);
-  border-bottom: 1px solid var(--ard-bg);
+  background-color: var(--ard-table-background, var(--ard-bg));
+  border-left: 1px solid var(--ard-table-border-color, var(--ard-detail-ultralight));
+  border-right: 1px solid var(--ard-table-border-color, var(--ard-detail-ultralight));
+  border-bottom: 1px solid var(--ard-table-background, var(--ard-bg));
 }
 .ard-table .ard-table__progress-bar-row .ard-table__progress-bar-cell {
-  height: 0.1875rem;
+  height: var(--ard-table-progress-bar-height, 0.1875rem);
 }
 .ard-table .ard-table__progress-bar-row .ard-table__progress-bar-cell ard-progress-bar {
   position: relative;
-  z-index: 1;
+  z-index: var(--ard-table-progress-bar-z-index, 1);
   margin: -1px;
 }
 .ard-table .ard-table__progress-bar-row .ard-table__progress-bar-cell ard-progress-bar > .ard-progress-bar {
@@ -235,31 +259,31 @@
   font: inherit;
   width: 100%;
   display: flex;
-  gap: 0.375rem;
+  gap: var(--ard-table-sort-gap, 0.375rem);
   cursor: pointer;
-  border-radius: 0.25rem;
-  outline-offset: 0.25rem;
+  border-radius: var(--ard-table-sort-border-radius, 0.25rem);
+  outline-offset: var(--ard-table-sort-outline-offset, 0.25rem);
 }
 .ard-table .ard-table__sortable .ard-table__header-template-container.ard-sortable .ard-table__header-content-container:focus-visible {
-  outline: 2px solid black;
+  outline: var(--ard-table-sort-outline-width, 2px) solid var(--ard-table-sort-outline-color, black);
 }
 .ard-table .ard-table__sortable .ard-table__header-template-container.ard-sortable .ard-table__header-content-container .ard-table__header-sort-icon {
-  height: 1rem;
+  height: var(--ard-table-sort-icon-size, 1rem);
   overflow: hidden;
 }
 .ard-table .ard-table__sortable .ard-table__header-template-container.ard-sortable .ard-table__header-content-container ard-icon {
-  font-size: 1rem;
-  font-weight: 900;
+  font-size: var(--ard-table-sort-icon-size, 1rem);
+  font-weight: var(--ard-table-sort-icon-weight, 900);
 }
 .ard-table .ard-table__caption {
   caption-side: bottom;
-  height: 3.125rem;
+  height: var(--ard-table-caption-height, 3.125rem);
   box-sizing: border-box;
-  color: var(--ard-detail);
-  background: var(--ard-bg);
-  border: 1px solid var(--ard-detail-ultralight);
+  color: var(--ard-table-caption-color, var(--ard-detail));
+  background: var(--ard-table-caption-background, var(--ard-bg));
+  border: 1px solid var(--ard-table-caption-border-color, var(--ard-detail-ultralight));
   border-top: none;
-  padding: 0 0.75rem;
+  padding: var(--ard-table-caption-padding, 0 0.75rem);
 }
 .ard-table .ard-table__caption .ard-table__caption-container {
   display: flex;
@@ -267,10 +291,10 @@
   height: 100%;
 }
 .ard-table .ard-table__foot .ard-table__pagination-cell {
-  border: 1px solid var(--ard-detail-ultralight);
+  border: 1px solid var(--ard-table-footer-border-color, var(--ard-detail-ultralight));
 }
 .ard-table.ard-appearance-strong .ard-table__header {
-  border-bottom: 1px solid var(--ard-detail-ultralight);
+  border-bottom: 1px solid var(--ard-table-border-color, var(--ard-detail-ultralight));
   background-color: var(--ard-_table-header-background);
 }
 .ard-table.ard-appearance-strong .ard-table__header-cell {
@@ -288,51 +312,51 @@
   border-bottom: 1px solid var(--ard-_table-header-border-light);
 }
 .ard-table.ard-appearance-colorless .ard-table__header-cell {
-  color: var(--ard-text);
+  color: var(--ard-table-header-color, var(--ard-text));
 }
 .ard-table.ard-appearance-colorless .ard-table__header {
-  border: 1px solid var(--ard-detail-ultralight);
-  background-color: var(--ard-bg);
+  border: 1px solid var(--ard-table-border-color, var(--ard-detail-ultralight));
+  background-color: var(--ard-table-background, var(--ard-bg));
 }
 .ard-table.ard-appearance-colorless .ard-table__header-row .ard-table__header-cell {
-  border-bottom: 1px solid var(--ard-detail-ultralight);
+  border-bottom: 1px solid var(--ard-table-border-color, var(--ard-detail-ultralight));
 }
 .ard-table.ard-variant-rounded .ard-table,
 .ard-table.ard-variant-rounded .ard-table__header,
 .ard-table.ard-variant-rounded .ard-table__body {
-  border-radius: 8px;
+  border-radius: var(--ard-table-border-radius, 8px);
 }
 .ard-table.ard-variant-rounded .ard-table__header-row:first-child {
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
+  border-top-left-radius: var(--ard-table-border-radius, 8px);
+  border-top-right-radius: var(--ard-table-border-radius, 8px);
 }
 .ard-table.ard-variant-rounded .ard-table__header-row:first-child .ard-table__header-cell:first-child {
-  border-top-left-radius: 8px;
+  border-top-left-radius: var(--ard-table-border-radius, 8px);
 }
 .ard-table.ard-variant-rounded .ard-table__header-row:first-child .ard-table__header-cell:last-child {
-  border-top-right-radius: 8px;
+  border-top-right-radius: var(--ard-table-border-radius, 8px);
 }
 .ard-table.ard-variant-rounded .ard-table__body-row:last-child .ard-table__body-cell:first-child {
-  border-bottom-left-radius: 8px;
+  border-bottom-left-radius: var(--ard-table-border-radius, 8px);
 }
 .ard-table.ard-variant-rounded .ard-table__body-row:last-child .ard-table__body-cell:last-child {
-  border-bottom-right-radius: 8px;
+  border-bottom-right-radius: var(--ard-table-border-radius, 8px);
 }
 .ard-table.ard-variant-rounded .ard-table__foot {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: var(--ard-table-border-radius, 8px);
+  border-bottom-right-radius: var(--ard-table-border-radius, 8px);
 }
 .ard-table.ard-variant-rounded .ard-table__foot .ard-table__foot-row {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: var(--ard-table-border-radius, 8px);
+  border-bottom-right-radius: var(--ard-table-border-radius, 8px);
 }
 .ard-table.ard-variant-rounded .ard-table__foot .ard-table__foot-row .ard-table__pagination-cell {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: var(--ard-table-border-radius, 8px);
+  border-bottom-right-radius: var(--ard-table-border-radius, 8px);
 }
 .ard-table.ard-variant-rounded .ard-table__caption {
-  border-bottom-left-radius: 8px;
-  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: var(--ard-table-border-radius, 8px);
+  border-bottom-right-radius: var(--ard-table-border-radius, 8px);
 }
 .ard-table.ard-variant-rounded .ard-table__caption + .ard-table__body * {
   border-radius: 0;
@@ -342,27 +366,27 @@
 }
 .ard-table.ard-compact .ard-table__header-cell > .ard-table__cell-container,
 .ard-table.ard-compact .ard-table__body-cell > .ard-table__cell-container {
-  padding: 0 0.625rem;
-  font-size: 0.875rem;
+  padding: var(--ard-table-cell-padding-compact, 0 0.625rem);
+  font-size: var(--ard-table-font-size-compact, 0.875rem);
 }
 .ard-table.ard-compact .ard-table__header-cell {
-  height: 2.625rem;
+  height: var(--ard-table-header-cell-height-compact, 2.625rem);
 }
 .ard-table.ard-compact .ard-table__header-cell > .ard-table__cell-container {
   letter-spacing: 0.18px;
 }
 .ard-table.ard-compact .ard-table__body-cell {
-  height: 2.25rem;
+  height: var(--ard-table-body-cell-height-compact, 2.25rem);
 }
 .ard-table.ard-compact .ard-table__checkbox-cell > .ard-table__cell-container {
-  width: 2.25rem;
-  height: 2.25rem;
+  width: var(--ard-table-checkbox-cell-width-compact, 2.25rem);
+  height: var(--ard-table-checkbox-cell-height-compact, 2.25rem);
 }
 .ard-table.ard-compact .ard-table__caption {
-  height: 2.25rem;
+  height: var(--ard-table-caption-height-compact, 2.25rem);
 }
 .ard-table.ard-zebra-table .ard-table__body-row:nth-of-type(2n-1) {
-  background: var(--ard-darken-overlay-ultralight);
+  background: var(--ard-table-zebra-background, var(--ard-darken-overlay-ultralight));
 }
 .ard-table.ard-selectable-rows .ard-table__body-row .ard-table__body-cell {
   cursor: pointer;
@@ -375,16 +399,16 @@
 }
 .ard-table .ard-table__disabled-row {
   pointer-events: none;
-  opacity: 50%;
+  opacity: var(--ard-table-disabled-row-opacity, 50%);
   user-select: none;
 }
 .ard-table .ard-table__bold-row {
-  font-weight: 600;
+  font-weight: var(--ard-table-bold-row-font-weight, 700);
 }
 .ard-table.ard-sticky-header .ard-table__header {
   position: sticky;
-  top: 0;
-  z-index: 2;
+  top: var(--ard-table-sticky-header-top, 0);
+  z-index: var(--ard-table-sticky-header-z-index, 2);
 }
 .ard-table.ard-header-align-top-left .ard-table__header-cell > .ard-table__cell-container, .ard-table.ard-header-align-center-left .ard-table__header-cell > .ard-table__cell-container, .ard-table.ard-header-align-bottom-left .ard-table__header-cell > .ard-table__cell-container {
   text-align: left;
@@ -399,7 +423,7 @@
   vertical-align: top;
 }
 .ard-table.ard-header-align-center-left .ard-table__header-cell, .ard-table.ard-header-align-center-center .ard-table__header-cell, .ard-table.ard-header-align-center-right .ard-table__header-cell {
-  vertical-align: middle;
+  vertical-align: center;
 }
 .ard-table.ard-header-align-bottom-left .ard-table__header-cell, .ard-table.ard-header-align-bottom-center .ard-table__header-cell, .ard-table.ard-header-align-bottom-right .ard-table__header-cell {
   vertical-align: bottom;
@@ -426,7 +450,7 @@
   vertical-align: top;
 }
 .ard-table.ard-align-center-left .ard-table__body-cell, .ard-table.ard-align-center-center .ard-table__body-cell, .ard-table.ard-align-center-right .ard-table__body-cell {
-  vertical-align: middle;
+  vertical-align: center;
 }
 .ard-table.ard-align-bottom-left .ard-table__body-cell, .ard-table.ard-align-bottom-center .ard-table__body-cell, .ard-table.ard-align-bottom-right .ard-table__body-cell {
   vertical-align: bottom;

package/prebuilt-themes/default/table.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/table.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAGA;EAEE;EACA,YCNG;EDmKH;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AExKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF9HF;EACE;;AAEF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAKR;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAKA;EACE;;AAEF;EACE;;AAMF;AAAA;EAEE;;AAEF;EACE;;AAEF;EACE;;AAGJ;EACE,kBCvFC;EDwFD;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AASJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAOR;EACE;EACA;EACA;EACA,OC9HK;ED+HL,YC/IC;EDgJD;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAMF;EACE;;AAiBF;EACE;EACA;;AAEF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAIF;EACE,OC/LC;;ADiMH;EACE;EACA,kBC1MD;;AD4MD;EACE;;AAKF;AAAA;AAAA;EAGE;;AAEF;EACE;EACA;;AAEA;EACE;;AAGJ;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEA;EACE;EACA;;AAIN;EACE;EACA;;AAGE;EACE;;AAIF;EACE;;AAUJ;AAAA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;;AAGJ;EACE;;AAGA;EACE;EACA;;AAGJ;EACE;;AAMF;EACE,YC1QsB;;ADgRxB;EACE;;AAGJ;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAIF;EACE;;AAKA;EACE;EACA;EACA;;AAQF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAOF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE","file":"table.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/table.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAKA;EAKE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EAIA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EAEE;EACA;EA8JA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AC3MA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AD5FF;EACE;;AAGF;AAAA;EAEE;;AAEA;AAAA;EACE;EACA;EACA;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAEA;AAAA;EACE;EACA;EACA;;AAKR;EACE;EACA;EACA;;AAEF;EACE;EACA;;AAEA;EACE;EACA;EACA;;AAIF;EACE;EACA;EACA;EACA;EACA;;AAGJ;EACE;;AAKA;EACE;;AAEF;EACE;;AAMF;AAAA;EAEE;;AAEF;EACE;;AAEF;EACE;;AAGJ;EACE;EACA;EACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;;AAEA;EACE;;AASJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEF;EACE;EACA;;AAEF;EACE;EACA;;AAOR;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAMF;EACE;;AAiBF;EACE;EACA;;AAEF;EACE;EACA;;AAIF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAIF;EACE;;AAEF;EACE;EACA;;AAEF;EACE;;AAKF;AAAA;AAAA;EAGE;;AAEF;EACE;EACA;;AACA;EACE;;AAGJ;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;EACA;;AACA;EACE;EACA;;AAEA;EACE;EACA;;AAIN;EACE;EACA;;AAGE;EACE;;AAIF;EACE;;AAUJ;AAAA;EACE;EACA;;AAGJ;EACE;;AAEA;EACE;;AAGJ;EACE;;AAGA;EACE;EACA;;AAGJ;EACE;;AAMF;EACE;;AAMF;EACE;;AAGJ;EACE;;AAEF;EACE;;AAIF;EACE;EACA;EACA;;AAIF;EACE;;AAKA;EACE;EACA;EACA;;AAQF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE;;AAOF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAMF;AAAA;AAAA;AAAA;EAEE;;AAMF;EACE;;AAMF;EACE;;AAMF;EACE","file":"table.css"}

package/public-api.d.ts

@@ -22,7 +22,6 @@ export * from './lib/slide-toggle';
 export * from './lib/slider';
 export * from './lib/star/rating-input';
 export * from './lib/star/star-button';
-export * from './lib/statebox';
 export * from './lib/calendar';
 export * from './lib/checkbox-list';
 export * from './lib/badge';
@@ -42,6 +41,7 @@ export * from './lib/table-pagination';
 export * from './lib/text-list';
 export * from './lib/card';
 export * from './lib/divider';
+export * from './lib/grid';
 export * from './lib/tabber';
 export * from './lib/dialog';
 export * from './lib/modal';
@@ -53,4 +53,5 @@ export * from './lib/types/colors.types';
 export * from './lib/types/item-storage.types';
 export * from './lib/types/theming.types';
 export * from './lib/types/utility.types';
+export * from './lib/breakpoints';
 export { searchFunctions as ArdSearchFunction, searchInString } from './lib/search-functions';

package/themes/_variables.scss

@@ -25,6 +25,7 @@ $lighten-overlay-medium: var(--ard-lighten-overlay-medium);
 $lighten-overlay-light: var(--ard-lighten-overlay-light);
 $darken-overlay: var(--ard-darken-overlay);
 $darken-overlay-strong: var(--ard-darken-overlay-strong);
+$darken-overlay-medium-strong: var(--ard-darken-overlay-medium-strong);
 $darken-overlay-medium: var(--ard-darken-overlay-medium);
 $darken-overlay-light: var(--ard-darken-overlay-light);
 $darken-overlay-ultralight: var(--ard-darken-overlay-ultralight);
@@ -40,7 +41,7 @@ $timing-fn: cubic-bezier(0.4, 0, 0.2, 1);
 $clear-button-size: var(--ard-clear-button-size);
 $dropdown-button-size: var(--ard-dropdown-button-size);
 $form-field-height: var(--ard-form-field-height);
-$form-field-compact-height: var(--ard-form-field-compact-height);
+$form-field-compact-height: var(--ard-form-field-height-compact);
 
 $gold: var(--ard-gold);
 

package/themes/default/_mixins.scss

@@ -10,12 +10,12 @@
     'opsz' #{$opsz};
 }
 
-@mixin focus-overlay($size: 0) {
+@mixin focus-overlay($size: 0px) {
   position: absolute;
-  top: -#{$size};
-  bottom: -#{$size};
-  left: -#{$size};
-  right: -#{$size};
+  top: calc(-1 * #{$size});
+  bottom: calc(-1 * #{$size});
+  left: calc(-1 * #{$size});
+  right: calc(-1 * #{$size});
   opacity: 0;
   border-radius: inherit;
   pointer-events: none;

package/themes/default/badge.scss

@@ -1,5 +1,29 @@
 @use './coloring' as CM;
 
+// the variables are commented out intentionally
+// read more in docs/dev/css-variables.md
+:root {
+  --ard-badge-small-font-size: 0.55rem;
+  // --ard-badge-small-size: ;
+  --ard-badge-small-font-weight: 400;
+  --ard-badge-small-letter-spacing: 0.2px;
+  // --ard-badge-small-rounded-radius: ;
+
+  --ard-badge-medium-font-size: 0.667rem;
+  // --ard-badge-medium-size: ;
+  --ard-badge-medium-font-weight: 500;
+  --ard-badge-medium-letter-spacing: 0.2px;
+  // --ard-badge-medium-rounded-radius: ;
+
+  --ard-badge-large-font-size: 0.8125rem;
+  // --ard-badge-large-size: ;
+  --ard-badge-large-font-weight: 600;
+  --ard-badge-large-letter-spacing: 0.2px;
+  // --ard-badge-large-rounded-radius: ;
+
+  --ard-badge-overlap-offset: 0.3em;
+}
+
 .ard-badge-host {
   position: relative;
 }
@@ -19,7 +43,7 @@
     border-radius: 9999px;
   }
   &.ard-variant-rounded {
-    border-radius: calc(var(--ard-_badge-size) * 0.25);
+    border-radius: var(--ard-_badge-radius);
   }
   &.ard-variant-sharp {
     border-radius: 0;
@@ -31,32 +55,41 @@
   }
 
   //! sizes
-  font-size: var(--ard-_badge-size);
-  min-width: calc(var(--ard-_badge-size) * 1.375);
-  height: calc(var(--ard-_badge-size) * 1.375);
+  font-size: var(--ard-_badge-font-size);
+  min-width: var(--ard-_badge-size);
+  height: var(--ard-_badge-size);
 
   .ard-badge-content {
-    padding: 0 calc(var(--ard-_badge-size) * 0.5);
+    padding: 0 var(--ard-_badge-padding);
   }
 
   &.ard-badge-size-small {
-    --ard-_badge-size: 0.55rem;
-    font-weight: 400;
-    letter-spacing: 0.2px;
+    --ard-_badge-font-size: var(--ard-badge-small-font-size, 0.55rem);
+    --ard-_badge-size: var(--ard-badge-small-size, calc(var(--ard-badge-small-font-size) * 1.375));
+    --ard-_badge-padding: calc(var(--ard-badge-small-font-size) * 0.5);
+    --ard-_badge-radius: var(--ard-badge-small-rounded-radius, calc(var(--ard-badge-small-font-size) * 0.25));
+    font-weight: var(--ard-badge-small-font-weight, 400);
+    letter-spacing: var(--ard-badge-small-letter-spacing, 0.2px);
   }
   &.ard-badge-size-medium {
-    --ard-_badge-size: 0.667rem;
-    font-weight: 500;
-    letter-spacing: 0.2px;
+    --ard-_badge-font-size: var(--ard-badge-medium-font-size, 0.667rem);
+    --ard-_badge-size: var(--ard-badge-medium-size, calc(var(--ard-badge-medium-font-size) * 1.375));
+    --ard-_badge-padding: calc(var(--ard-badge-medium-font-size) * 0.5);
+    --ard-_badge-radius: var(--ard-badge-medium-rounded-radius, calc(var(--ard-badge-medium-font-size) * 0.25));
+    font-weight: var(--ard-badge-medium-font-weight, 500);
+    letter-spacing: var(--ard-badge-medium-letter-spacing, 0.2px);
   }
   &.ard-badge-size-large {
-    --ard-_badge-size: 0.8125rem;
-    font-weight: 600;
-    letter-spacing: 0.2px;
+    --ard-_badge-font-size: var(--ard-badge-large-font-size, 0.8125rem);
+    --ard-_badge-size: var(--ard-badge-large-size, calc(var(--ard-badge-large-font-size) * 1.375));
+    --ard-_badge-padding: calc(var(--ard-badge-large-font-size) * 0.5);
+    --ard-_badge-radius: var(--ard-badge-large-rounded-radius, calc(var(--ard-badge-large-font-size) * 0.25));
+    font-weight: var(--ard-badge-large-font-weight, 600);
+    letter-spacing: var(--ard-badge-large-letter-spacing, 0.2px);
   }
 
   //! overlap
-  --ard-_badge-overlap-offset-x: 0.3em;
+  --ard-_badge-overlap-offset-x: var(--ard-badge-overlap-offset, 0.3em);
 
   &.ard-badge-overlap {
     --ard-_badge-overlap-offset-x: 50%;