@ardium-ui/ui 1.0.0

package/prebuilt-themes/default/chips.css

@@ -0,0 +1,367 @@
+.ard-chip-wrapper {
+  border-radius: var(--ard-variant-border-radius);
+  font-family: "Roboto", sans-serif;
+  color: var(--ard-text2);
+  background: var(--ard-bg);
+  border-radius: var(--ard-_chip-border-radius);
+  padding: 0;
+  margin: 6px;
+  vertical-align: middle;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  position: relative;
+  outline: none;
+  user-select: none;
+  overflow: hidden;
+  height: 32px;
+}
+.ard-chip-wrapper.ard-color-none {
+  --ard-cmpcl--bg: var(--ard-bg);
+  --ard-cmpcl--bg-colored: var(--ard-bg-alt);
+  --ard-cmpcl--bg-colored-light: var(--ard-detail-light);
+  --ard-cmpcl--bg-header: var(--ard-bg-filled);
+  --ard-cmpcl--bg-colored-verylight: var(--ard-bg-darker);
+  --ard-cmpcl--on-bg: var(--ard-text);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: var(--ard-text);
+  --ard-cmpcl--border-light: var(--ard-text2);
+  --ard-cmpcl--content: var(--ard-text);
+  --ard-cmpcl--content-light: var(--ard-text-alt);
+  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored-light: var(--ard-text-alt);
+}
+.ard-chip-wrapper.ard-color-primary {
+  --ard-cmpcl--bg: rgb(var(--ard-primary-500));
+  --ard-cmpcl--bg-colored: rgb(var(--ard-primary-500));
+  --ard-cmpcl--bg-colored-light: rgb(var(--ard-primary-100));
+  --ard-cmpcl--bg-header: rgb(var(--ard-primary-100));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-primary-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-primary-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-primary-100));
+  --ard-cmpcl--content: rgb(var(--ard-primary-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-primary-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-primary-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-primary-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-primary-100));
+}
+.ard-chip-wrapper.ard-color-secondary {
+  --ard-cmpcl--bg: rgb(var(--ard-secondary-500));
+  --ard-cmpcl--bg-colored: rgb(var(--ard-secondary-500));
+  --ard-cmpcl--bg-colored-light: rgb(var(--ard-secondary-50));
+  --ard-cmpcl--bg-header: rgb(var(--ard-secondary-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-secondary-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-secondary-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-secondary-100));
+  --ard-cmpcl--content: rgb(var(--ard-secondary-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-secondary-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-secondary-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-secondary-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-secondary-100));
+}
+.ard-chip-wrapper.ard-color-warn {
+  --ard-cmpcl--bg: rgb(var(--ard-warn-500));
+  --ard-cmpcl--bg-colored: rgb(var(--ard-warn-500));
+  --ard-cmpcl--bg-colored-light: rgb(var(--ard-warn-50));
+  --ard-cmpcl--bg-header: rgb(var(--ard-warn-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-warn-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-warn-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-warn-100));
+  --ard-cmpcl--content: rgb(var(--ard-warn-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-warn-100));
+  --ard-cmpcl--overlay-rgb: var(--ard-warn-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-warn-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-warn-100));
+}
+.ard-chip-wrapper.ard-color-danger {
+  --ard-cmpcl--bg: rgb(var(--ard-danger-700));
+  --ard-cmpcl--bg-colored: rgb(var(--ard-danger-700));
+  --ard-cmpcl--bg-colored-light: rgb(var(--ard-danger-100));
+  --ard-cmpcl--bg-header: rgb(var(--ard-danger-100));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-danger-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-danger-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-danger-100));
+  --ard-cmpcl--content: rgb(var(--ard-danger-900));
+  --ard-cmpcl--content-light: rgb(var(--ard-danger-500));
+  --ard-cmpcl--overlay-rgb: var(--ard-danger-700);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-danger-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-danger-300));
+}
+.ard-chip-wrapper.ard-color-success {
+  --ard-cmpcl--bg: rgb(var(--ard-success-700));
+  --ard-cmpcl--bg-colored: rgb(var(--ard-success-700));
+  --ard-cmpcl--bg-colored-light: rgb(var(--ard-success-50));
+  --ard-cmpcl--bg-header: rgb(var(--ard-success-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-success-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-success-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-success-100));
+  --ard-cmpcl--content: rgb(var(--ard-success-900));
+  --ard-cmpcl--content-light: rgb(var(--ard-success-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-success-700);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-success-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-success-300));
+}
+.ard-chip-wrapper.ard-color-info {
+  --ard-cmpcl--bg: rgb(var(--ard-info-500));
+  --ard-cmpcl--bg-colored: rgb(var(--ard-info-500));
+  --ard-cmpcl--bg-colored-light: rgb(var(--ard-info-50));
+  --ard-cmpcl--bg-header: rgb(var(--ard-info-50));
+  --ard-cmpcl--bg-colored-verylight: rgb(var(--ard-info-50));
+  --ard-cmpcl--on-bg: var(--ard-text-alt);
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: rgb(var(--ard-info-300));
+  --ard-cmpcl--border-light: rgb(var(--ard-info-100));
+  --ard-cmpcl--content: rgb(var(--ard-info-700));
+  --ard-cmpcl--content-light: rgb(var(--ard-info-300));
+  --ard-cmpcl--overlay-rgb: var(--ard-info-500);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: rgb(var(--ard-info-700));
+  --ard-cmpcl--overlay-colored-light: rgb(var(--ard-info-100));
+}
+.ard-chip-wrapper.ard-color-currentColor {
+  --ard-cmpcl--bg: var(--ard-bg);
+  --ard-cmpcl--bg-colored: currentColor;
+  --ard-cmpcl--on-bg: currentColor;
+  --ard-cmpcl--on-bg-colored: var(--ard-text-alt);
+  --ard-cmpcl--border: currentColor;
+  --ard-cmpcl--border-light: currentColor;
+  --ard-cmpcl--content: currentColor;
+  --ard-cmpcl--content-light: currentColor;
+  --ard-cmpcl--overlay-rgb: var(--ard-overlay-rgb);
+  --ard-cmpcl--overlay: var(--ard-overlay);
+  --ard-cmpcl--overlay-colored: currentColor;
+  --ard-cmpcl--overlay-colored-light: currentColor;
+}
+.ard-chip-wrapper ard-_clear-button {
+  height: var(--ard-clear-button-size);
+  width: var(--ard-clear-button-size);
+  position: relative;
+}
+.ard-chip-wrapper .ard-clear-btn-wrapper {
+  cursor: pointer;
+  font-size: medium;
+  color: var(--ard-detail);
+  width: var(--ard-clear-button-size);
+  height: var(--ard-clear-button-size);
+  line-height: 1em;
+  border-radius: 999px;
+  border: none;
+  padding: 0;
+  background: transparent;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  outline: none;
+  color: inherit;
+}
+.ard-chip-wrapper .ard-clear-btn-wrapper .ard-hitbox {
+  position: absolute;
+  left: -1px;
+  right: -1px;
+  top: -1px;
+  bottom: -1px;
+}
+.ard-chip-wrapper .ard-clear-btn-wrapper .ard-focus-overlay {
+  position: absolute;
+  top: -1px;
+  bottom: -1px;
+  left: -1px;
+  right: -1px;
+  opacity: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  background: currentColor;
+}
+.ard-chip-wrapper .ard-clear-btn-wrapper .ard-clear-btn {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ard-chip-wrapper .ard-clear-btn-wrapper .ard-clear-btn::before {
+  content: "close";
+  font-family: "Material Symbols Outlined";
+  font-size: 1.5em;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
+  font-size: 70%;
+}
+.ard-chip-wrapper .ard-clear-btn-wrapper:hover .ard-focus-overlay {
+  opacity: 5%;
+}
+.ard-chip-wrapper .ard-clear-btn-wrapper:focus .ard-focus-overlay {
+  opacity: 8%;
+}
+.ard-chip-wrapper .ard-clear-btn-wrapper:active .ard-focus-overlay {
+  opacity: 15%;
+}
+.ard-chip-wrapper.ard-variant-rounded, .ard-chip-wrapper.ard-variant-semirounded {
+  --ard-variant-border-radius: 8px;
+}
+.ard-chip-wrapper.ard-variant-pill {
+  --ard-variant-border-radius: 9999px;
+}
+.ard-chip-wrapper.ard-variant-sharp {
+  --ard-variant-border-radius: 0;
+}
+.ard-chip-wrapper > .ard-chip-content-wrapper {
+  padding: 0 12px;
+}
+.ard-chip-wrapper > .ard-focus-overlay {
+  position: absolute;
+  top: -0;
+  bottom: -0;
+  left: -0;
+  right: -0;
+  opacity: 0;
+  border-radius: inherit;
+  pointer-events: none;
+  transition: opacity 0.2s ease;
+  background: var(--ard-overlay);
+  border-radius: 0;
+}
+.ard-chip-wrapper.ard-chip-selectable {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+}
+.ard-chip-wrapper.ard-chip-selectable:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-chip-selectable:focus > .ard-focus-overlay {
+  opacity: 7.5%;
+}
+.ard-chip-wrapper.ard-chip-selectable:active > .ard-focus-overlay {
+  opacity: 20%;
+}
+.ard-chip-wrapper.ard-chip-selectable .ard-chip-selection-icon {
+  font-family: "Material Symbols Outlined";
+  font-size: 1.5em;
+  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" 48;
+}
+.ard-chip-wrapper.ard-chip-selectable .ard-chip-selection-icon::after {
+  content: "\e876";
+}
+.ard-chip-wrapper.ard-variant-rounded {
+  --ard-_chip-border-radius: 6px;
+}
+.ard-chip-wrapper.ard-chip-variant-pill {
+  --ard-_chip-border-radius: 9999px;
+}
+.ard-chip-wrapper.ard-appearance-filled {
+  background: var(--ard-cmpcl--bg-colored);
+  color: var(--ard-cmpcl--on-bg-colored);
+  border: none;
+}
+.ard-chip-wrapper.ard-appearance-filled.ard-chip-selectable {
+  background-color: var(--ard-bg-filled);
+  color: var(--ard-text2);
+  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
+}
+.ard-chip-wrapper.ard-appearance-filled.ard-chip-selectable.ard-chip-selected {
+  color: var(--ard-cmpcl--on-bg-colored);
+  background: var(--ard-cmpcl--bg-colored);
+}
+.ard-chip-wrapper.ard-appearance-outlined, .ard-chip-wrapper.ard-appearance-outlined-strong {
+  background: transparent;
+  color: var(--ard-cmpcl--content);
+  border: 1px solid var(--ard-cmpcl--bg-colored);
+  font-weight: 600;
+}
+.ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable {
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+.ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable > .ard-focus-overlay {
+  opacity: 0;
+  background: var(--ard-cmpcl--bg-colored);
+}
+.ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable:focus > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable:focus > .ard-focus-overlay {
+  opacity: 4%;
+}
+.ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable:active > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable:active > .ard-focus-overlay {
+  opacity: 10%;
+}
+.ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected {
+  color: var(--ard-cmpcl--content);
+}
+.ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected > .ard-focus-overlay {
+  opacity: 7.5%;
+}
+.ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:focus > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:hover > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:focus > .ard-focus-overlay {
+  opacity: 15%;
+}
+.ard-chip-wrapper.ard-appearance-outlined.ard-chip-selectable.ard-chip-selected:active > .ard-focus-overlay, .ard-chip-wrapper.ard-appearance-outlined-strong.ard-chip-selectable.ard-chip-selected:active > .ard-focus-overlay {
+  opacity: 20%;
+}
+.ard-chip-wrapper.ard-appearance-outlined-strong > .ard-focus-overlay {
+  opacity: 7.5%;
+  background: var(--ard-cmpcl--bg-colored);
+}
+.ard-chip-wrapper.ard-chip-align-left {
+  flex-direction: row;
+  padding-left: 2px;
+}
+.ard-chip-wrapper.ard-chip-align-left .ard-chip-selection-icon {
+  padding-left: 8px;
+  margin-right: -2px;
+}
+.ard-chip-wrapper.ard-chip-align-left.ard-chip-deletable {
+  padding-left: 4px;
+}
+.ard-chip-wrapper.ard-chip-align-left.ard-chip-deletable .ard-chip-content-wrapper {
+  padding-left: 8px;
+}
+.ard-chip-wrapper.ard-chip-align-right {
+  flex-direction: row-reverse;
+  padding-right: 2px;
+}
+.ard-chip-wrapper.ard-chip-align-right .ard-chip-selection-icon {
+  padding-right: 8px;
+  margin-left: -2px;
+}
+.ard-chip-wrapper.ard-chip-align-right.ard-chip-deletable {
+  padding-right: 4px;
+}
+.ard-chip-wrapper.ard-chip-align-right.ard-chip-deletable .ard-chip-content-wrapper {
+  padding-right: 8px;
+}
+.ard-chip-wrapper.ard-compact {
+  height: 23px;
+  font-size: 13px;
+}
+.ard-chip-wrapper.ard-compact > .ard-chip-content-wrapper {
+  padding: 0 9px;
+}
+.ard-chip-wrapper.ard-compact.ard-chip-align-left .ard-chip-selection-icon {
+  padding-left: 4px;
+  margin-right: -4px;
+}
+.ard-chip-wrapper.ard-compact.ard-chip-align-right .ard-chip-selection-icon {
+  padding-right: 4px;
+  margin-left: -4px;
+}
+
+.ard-disabled .ard-chip-wrapper {
+  pointer-events: none;
+  opacity: 60%;
+}
+.ard-disabled .ard-chip-wrapper.ard-chip-selected {
+  opacity: 40%;
+}
+
+/*# sourceMappingURL=chips.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/chips.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/default/_clear-button.scss"],"names":[],"mappings":"AAMA;ECmDI;ED9CA;EACA,OEJI;EFKJ,YEbC;EFcD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AGtBA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AClIJ;EACI,QFkCY;EEjCZ,OFiCY;EEhCZ;;AAGJ;EACI;EACA;EACA,OFGC;EEFD,OFyBY;EExBZ,QFwBY;EEvBZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EHvBJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EGgBQ;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EH7CZ;EACA;EACA,yBACI;EG4CQ;;AAKJ;EACI;;AAKJ;EACI;;AAKJ;EACI;;AHTZ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;ADxCJ;EACI;;AAEJ;ECjBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDUI,YE9BE;EF+BF;;AAGJ;EACI;EACA;EACA;;AAII;EACI;;AAIJ;EACI;;AAIR;EClDJ;EACA;EACA,yBACI;;ADkDI;EACI;;AAKZ;EACI;;AAEJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI,kBEtEL;EFuEK,OEpEJ;EFqEI,YACI;;AAIJ;EACI;EACA;;AAIZ;EAEI;EACA;EACA;EACA;;AAEA;EACI,YACI;;AAGJ;EACI;EACA;;AAIA;EACI;;AAIJ;EACI;;AAIR;EACI;;AAEA;EACI;;AAIA;EACI;;AAIJ;EACI;;AAOhB;EACI;EACA;;AAKR;EACI;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;;AAIZ;EACI;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;;AAEA;EACI;;AAKZ;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;;AAMR;EACI;EACA;;AAEA;EACI","file":"chips.css"}

package/prebuilt-themes/default/color-display.css

@@ -0,0 +1,29 @@
+.ard-color-display-wrapper {
+  gap: 0.3ch;
+  align-items: center;
+}
+.ard-color-display-wrapper .ard-color-display {
+  width: 1.1875em;
+  height: 1.1875em;
+  font-size: inherit;
+  cursor: help;
+  border: 0.0625em solid transparent;
+}
+.ard-color-display-wrapper .ard-color-display-label {
+  font-family: monospace;
+  font-size: 1.15em;
+}
+.ard-color-display-wrapper.ard-appearance-rounded .ard-color-display {
+  border-radius: 0.25em;
+}
+.ard-color-display-wrapper.ard-appearance-circle .ard-color-display {
+  border-radius: 9999px;
+}
+.ard-color-display-wrapper.ard-appearance-sharp .ard-color-display {
+  border-radius: 0;
+}
+.ard-color-display-wrapper.ard-with-border .ard-color-display {
+  border-color: var(--ard-text);
+}
+
+/*# sourceMappingURL=color-display.css.map */

package/prebuilt-themes/default/color-display.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/color-display.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAIA;EACI;;AAIJ;EACI;;AAIJ;EACI;;AAIJ;EACI,cC9BL","file":"color-display.css"}

package/prebuilt-themes/default/color-picker.css

@@ -0,0 +1,106 @@
+.ard-color-picker {
+  width: 15rem;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.ard-color-picker .ard-color-picker-click-areas {
+  width: 100%;
+  gap: 0.5rem;
+}
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-shade-map,
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-hue-map,
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-opacity-map {
+  border: 1px solid var(--ard-detail-ultralight-solid);
+}
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-shade-map:focus-visible,
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-hue-map:focus-visible,
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-opacity-map:focus-visible {
+  outline: 2px solid var(--ard-overlay);
+  outline-offset: 1px;
+}
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-shade-map {
+  flex-grow: 1;
+  aspect-ratio: 1;
+}
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-hue-map,
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-opacity-map {
+  width: 1rem;
+}
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-opacity-map {
+  --ard-color-picker-opacity-checkerboard-color: var(--ard-detail-ultralight-solid);
+  --ard-color-picker-opacity-checkerboard-size: 0.5rem;
+}
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-shade-indicator {
+  width: 0.375rem;
+  height: 0.375rem;
+  border: 2px solid white;
+  outline: 1px solid black;
+  border-radius: 999px;
+  cursor: pointer;
+}
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-shade-indicator-container,
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-hue-indicator-container,
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-opacity-indicator-container {
+  top: clamp(2px, var(--top), 100% - 2px);
+}
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-shade-indicator-container {
+  left: clamp(2px, var(--left), 100% - 2px);
+}
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-hue-indicator-container,
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-opacity-indicator-container {
+  left: 50%;
+}
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-hue-indicator,
+.ard-color-picker .ard-color-picker-click-areas .ard-color-picker-opacity-indicator {
+  width: 1rem;
+  height: 0.25rem;
+  border: 2px solid white;
+  outline: 1px solid black;
+  border-radius: 3px;
+  cursor: pointer;
+}
+.ard-color-picker .ard-color-picker-inputs {
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  grid-template-rows: max-content max-content;
+  gap: 0.5rem;
+}
+.ard-color-picker .ard-color-picker-inputs .ard-color-picker-input-type {
+  font-weight: 700;
+  width: max-content;
+}
+.ard-color-picker .ard-color-picker-inputs .ard-color-picker-inputs-container {
+  display: grid;
+  gap: 0.5rem;
+  width: 100%;
+  grid-column: 1/3;
+}
+.ard-color-picker .ard-color-picker-inputs .ard-color-picker-inputs-container.ard-mode-hex {
+  grid-template-columns: 1fr;
+}
+.ard-color-picker .ard-color-picker-inputs .ard-color-picker-inputs-container.ard-mode-triple {
+  grid-template-columns: 1fr 1fr 1fr;
+}
+.ard-color-picker .ard-color-picker-inputs .ard-color-picker-inputs-container.ard-mode-opacity {
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+.ard-color-picker .ard-color-picker-inputs .ard-color-picker-inputs-container.ard-mode-opacity.ard-mode-hex .ard-color-picker-hex-input {
+  grid-column: 1/4;
+}
+.ard-color-picker .ard-color-picker-inputs .ard-color-picker-reference {
+  --ard-color-picker-opacity-checkerboard-color: var(--ard-detail-ultralight-solid);
+  --ard-color-picker-opacity-checkerboard-size: 0.5rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  width: 4rem;
+  height: 100%;
+  border: 1px solid var(--ard-detail-ultralight-solid);
+  box-sizing: border-box;
+}
+.ard-color-picker.ard-vertical {
+  width: 13.5rem;
+}
+
+/*# sourceMappingURL=color-picker.css.map */

package/prebuilt-themes/default/color-picker.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/color-picker.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;AAAA;AAAA;EAGI;;AAEA;AAAA;AAAA;EACI;EACA;;AAGR;EACI;EACA;;AAEJ;AAAA;EAEI;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;AAAA;AAAA;EAGI;;AAEJ;EACI;;AAEJ;AAAA;EAEI;;AAEJ;AAAA;EAEI;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;;AAEJ;EACI;;AAEA;EACI;;AAIZ;EACI;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI","file":"color-picker.css"}

package/prebuilt-themes/default/core.css

@@ -0,0 +1,84 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
+:root {
+  --ard-bg: white;
+  --ard-bg-alt: black;
+  --ard-overlay: black;
+  --ard-overlay-rgb: 0, 0, 0;
+  --ard-bg-filled: #ebebeb;
+  --ard-bg-darker: #f7f7f7;
+  --ard-bg-filled-alt: #333;
+  --ard-text: rgba(0, 0, 0, 100%);
+  --ard-text2: rgba(0, 0, 0, 87%);
+  --ard-text3: rgba(0, 0, 0, 75%);
+  --ard-text-alt: rgba(255, 255, 255, 100%);
+  --ard-text2-alt: rgba(255, 255, 255, 87%);
+  --ard-text3-alt: rgba(255, 255, 255, 75%);
+  --ard-border: rgba(0, 0, 0, 40%);
+  --ard-border-dark: rgba(0, 0, 0, 70%);
+  --ard-border-light: rgba(0, 0, 0, 25%);
+  --ard-detail: rgba(0, 0, 0, 60%);
+  --ard-detail-light: rgba(0, 0, 0, 30%);
+  --ard-detail-ultralight: rgba(0, 0, 0, 12%);
+  --ard-detail-ultralight-solid: rgb(204, 204, 204);
+  --ard-lighten-overlay: rgba(255, 255, 255, 12.5%);
+  --ard-lighten-overlay-strong: rgba(255, 255, 255, 20%);
+  --ard-lighten-overlay-medium: rgba(255, 255, 255, 10%);
+  --ard-lighten-overlay-light: rgba(255, 255, 255, 5%);
+  --ard-darken-overlay: rgba(0, 0, 0, 12.5%);
+  --ard-darken-overlay-strong: rgba(0, 0, 0, 20%);
+  --ard-darken-overlay-medium: rgba(0, 0, 0, 10%);
+  --ard-darken-overlay-light: rgba(0, 0, 0, 5%);
+  --ard-darken-overlay-ultralight: rgba(0, 0, 0, 3%);
+  --ard-star: #ffc107;
+  --ard-clear-button-size: 0.9rem;
+  --ard-dropdown-button-size: 0.4rem;
+  --ard-primary-50: 234, 235, 243;
+  --ard-primary-100: 159, 167, 228;
+  --ard-primary-300: 78, 99, 219;
+  --ard-primary-500: 36, 56, 185;
+  --ard-primary-700: 27, 42, 128;
+  --ard-primary-900: 19, 28, 87;
+  --ard-secondary-50: 229, 172, 243;
+  --ard-secondary-100: 216, 107, 243;
+  --ard-secondary-300: 195, 38, 238;
+  --ard-secondary-500: 145, 13, 182;
+  --ard-secondary-700: 103, 10, 129;
+  --ard-secondary-900: 69, 7, 85;
+  --ard-danger-50: 247, 197, 196;
+  --ard-danger-100: 243, 151, 149;
+  --ard-danger-300: 245, 103, 100;
+  --ard-danger-500: 243, 55, 52;
+  --ard-danger-700: 202, 17, 14;
+  --ard-danger-900: 165, 13, 11;
+  --ard-warn-50: 248, 224, 192;
+  --ard-warn-100: 247, 196, 129;
+  --ard-warn-300: 240, 169, 77;
+  --ard-warn-500: 224, 140, 38;
+  --ard-warn-700: 173, 101, 13;
+  --ard-warn-900: 117, 69, 7;
+  --ard-success-50: 184, 240, 187;
+  --ard-success-100: 124, 230, 129;
+  --ard-success-300: 73, 223, 80;
+  --ard-success-500: 33, 179, 40;
+  --ard-success-700: 27, 131, 33;
+  --ard-success-900: 14, 82, 17;
+  --ard-info-50: 187, 210, 241;
+  --ard-info-100: 131, 180, 243;
+  --ard-info-300: 76, 147, 240;
+  --ard-info-500: 19, 113, 236;
+  --ard-info-700: 13, 81, 172;
+  --ard-info-900: 8, 49, 102;
+  --ard-box-shadow: 0 0 13px -3px rgba(0, 0, 0, 0.7);
+  --ard-card-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
+  --ard-simple-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
+  --ard-simple-shadow2: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+  --ard-simple-shadow3: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  --ard-spinner-color: rgba(0, 0, 0, 50%);
+}
+
+.ard-disabled {
+  pointer-events: none;
+}
+
+/*# sourceMappingURL=core.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/core.scss"],"names":[],"mappings":"AAAQ;AACA;AAER;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;;;AAGJ;EACI","file":"core.css"}

package/prebuilt-themes/default/dialog.css

@@ -0,0 +1,18 @@
+.ard-dialog-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.ard-dialog-buttons {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.ard-dialog-buttons-container {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+}
+
+/*# sourceMappingURL=dialog.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/dialog.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA","file":"dialog.css"}

package/prebuilt-themes/default/divider.css

@@ -0,0 +1,11 @@
+ard-divider {
+  margin: 0;
+}
+ard-divider:not(.ard-divider-vertical) {
+  border-top: 1px solid var(--ard-detail-ultralight);
+}
+ard-divider.ard-divider-vertical {
+  border-left: 1px solid var(--ard-detail-ultralight);
+}
+
+/*# sourceMappingURL=divider.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/divider.scss"],"names":[],"mappings":"AAEA;EACI;;AAEA;EACI;;AAGJ;EACI","file":"divider.css"}

package/prebuilt-themes/default/dropdown-panel.css

@@ -0,0 +1,37 @@
+ard-dropdown-panel {
+  width: 100%;
+}
+
+.ard-dropdown-panel-container {
+  position: relative;
+  background: var(--ard-bg);
+  margin: 0.375rem 0;
+  z-index: 5;
+  width: 100%;
+  overflow: hidden;
+  box-sizing: border-box;
+}
+.ard-dropdown-panel-container.ard-variant-rounded {
+  border-radius: 0.5rem;
+}
+.ard-dropdown-panel-container.ard-variant-sharp {
+  border-radius: 0;
+}
+.ard-dropdown-panel-container.ard-appearance-outlined {
+  border: 1px solid var(--ard-border);
+}
+.ard-dropdown-panel-container.ard-appearance-raised {
+  box-shadow: var(--ard-box-shadow);
+}
+.ard-dropdown-panel-container.ard-connected {
+  margin: 0;
+  border-top: none;
+}
+.ard-dropdown-panel-container.ard-compact {
+  margin: 0.25rem 0;
+}
+.ard-dropdown-panel-container.ard-compact.ard-variant-rounded {
+  border-radius: 0.4rem;
+}
+
+/*# sourceMappingURL=dropdown-panel.css.map */

package/prebuilt-themes/default/dropdown-panel.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/dropdown-panel.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAEA;EACI;;;AAEJ;EACI;EACA,YCPC;EDQD;EACA;EACA;EACA;EACA;;AAGA;EACI;;AAEJ;EACI;;AAIJ;EACI;;AAEJ;EACI,YCIK;;ADAT;EACI;EACA;;AAIJ;EACI;;AAEA;EACI","file":"dropdown-panel.css"}