@ardium-ui/ui 1.0.0

package/prebuilt-themes/default/file-drop-area.css

@@ -0,0 +1,279 @@
+ard-file-drop-area {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+}
+
+.ard-file-drop-area {
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  max-height: 100%;
+  min-width: 15rem;
+  min-height: 10rem;
+  padding: 0.625rem;
+  box-sizing: border-box;
+  background: var(--ard-cmpcl--bg-colored-verylight);
+  display: flex;
+}
+.ard-file-drop-area.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-file-drop-area.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-file-drop-area.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-file-drop-area.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-file-drop-area.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-file-drop-area.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-file-drop-area.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-file-drop-area.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-file-drop-area .ard-file-drop-area-outline {
+  width: 100%;
+  min-height: 100%;
+  box-sizing: border-box;
+  border: 2px dashed var(--ard-cmpcl--border);
+  padding: 0.375rem;
+  pointer-events: none;
+}
+.ard-file-drop-area .ard-file-drop-area-outline * {
+  pointer-events: none;
+  user-select: none;
+}
+.ard-file-drop-area .ard-file-drop-area-content {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: clamp(0.2rem, 10%, 1rem);
+  padding: 0.2rem 0;
+  box-sizing: border-box;
+}
+.ard-file-drop-area .ard-file-drop-area-icon {
+  font-size: 220%;
+}
+.ard-file-drop-area .ard-file-drop-area-drop-text {
+  font-weight: 500;
+  font-size: 105%;
+}
+.ard-file-drop-area .ard-file-drop-area-or-text {
+  font-size: 95%;
+}
+.ard-file-drop-area .ard-file-drop-area-browse-button > button {
+  border: 1px solid var(--ard-cmpcl--border);
+  pointer-events: all;
+}
+.ard-file-drop-area .ard-file-drop-area-dragover-text {
+  font-weight: 500;
+  font-size: 105%;
+}
+.ard-file-drop-area .ard-file-drop-area-dragover-amount {
+  font-weight: 600;
+  font-size: 120%;
+}
+.ard-file-drop-area .ard-file-drop-area-uploaded-container {
+  max-height: 100%;
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-template-rows: max-content 1fr;
+  gap: 0.75rem;
+  justify-items: center;
+}
+.ard-file-drop-area .ard-file-drop-area-uploaded-message {
+  font-weight: 500;
+  font-size: 105%;
+}
+.ard-file-drop-area .ard-file-drop-area-uploaded-amount {
+  font-weight: 600;
+}
+.ard-file-drop-area .ard-file-drop-area-uploaded-files {
+  max-width: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.45rem;
+  overflow: hidden auto;
+  box-sizing: border-box;
+}
+.ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file {
+  max-width: 100%;
+  display: grid;
+  align-items: center;
+  grid-template-columns: max-content 1fr;
+  gap: 0.75rem;
+  max-height: min-content;
+}
+.ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file ard-icon {
+  font-size: 220%;
+}
+.ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file .ard-file-drop-area-file-info {
+  display: flex;
+  flex-direction: column;
+  line-height: 1;
+  gap: 0.5ch;
+}
+.ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file .ard-file-drop-area-filename {
+  max-width: 100%;
+  display: grid;
+  grid-template-columns: 1fr max-content;
+  gap: 0;
+}
+.ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file .ard-file-drop-area-filename-name {
+  max-width: 100%;
+  line-height: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  height: 1em;
+}
+.ard-file-drop-area .ard-file-drop-area-uploaded-files .ard-file-drop-area-file .ard-file-drop-area-filesize {
+  font-weight: 500;
+  font-size: 83%;
+  opacity: 60%;
+}
+.ard-file-drop-area.ard-variant-rounded, .ard-file-drop-area.ard-variant-pill {
+  border-radius: 0.875rem;
+}
+.ard-file-drop-area.ard-variant-rounded .ard-file-drop-area-outline, .ard-file-drop-area.ard-variant-pill .ard-file-drop-area-outline {
+  border-radius: 0.25rem;
+}
+.ard-file-drop-area.ard-variant-sharp {
+  border-radius: 0;
+}
+.ard-file-drop-area.ard-compact {
+  font-size: 85%;
+  min-width: 12rem;
+  min-height: 8rem;
+}
+.ard-file-drop-area.ard-compact .ard-file-drop-area-content {
+  gap: clamp(0.1667rem, 10%, 0.75rem);
+}
+
+/*# sourceMappingURL=file-drop-area.css.map */

package/prebuilt-themes/default/file-drop-area.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/file-drop-area.scss","../../../../projects/ui/src/themes/default/_coloring.scss"],"names":[],"mappings":"AAEA;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AClBA;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;;AD/GJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKJ;EACI;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAMZ;EAEI;;AAEA;EACI;;AAGR;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI","file":"file-drop-area.css"}

package/prebuilt-themes/default/form-field-frame.css

@@ -0,0 +1,84 @@
+.ard-form-field-frame {
+  box-sizing: border-box;
+  min-height: 2.1875rem;
+  height: max-content;
+  max-width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  position: relative;
+  font-size: 1rem;
+  line-height: 1.25em;
+  font-family: "Roboto", sans-serif;
+  border-radius: var(--ard-variant-border-radius);
+  background: var(--ard-appearance-background);
+  border: var(--ard-appearance-border);
+  transition: border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.ard-form-field-frame .ard-form-field-content-container {
+  flex-grow: 1;
+  min-height: 100%;
+}
+.ard-form-field-frame .ard-form-field-prefix-container,
+.ard-form-field-frame .ard-form-field-suffix-container {
+  height: max-content;
+  max-height: 100%;
+  display: flex;
+  align-items: center;
+}
+.ard-form-field-frame .ard-form-field-prefix-container {
+  padding-left: 0.375em;
+}
+.ard-form-field-frame .ard-form-field-suffix-container {
+  padding-right: 0.375em;
+}
+.ard-form-field-frame.ard-compact {
+  min-height: 1.6875rem;
+  font-size: 0.85rem;
+  line-height: 1;
+}
+.ard-form-field-frame.ard-appearance-outlined {
+  --ard-appearance-background: var(--ard-bg);
+  --ard-appearance-border: 1px solid var(--ard-border);
+}
+.ard-form-field-frame.ard-appearance-filled {
+  --ard-appearance-background: var(--ard-bg-filled);
+  --ard-appearance-border: none;
+}
+.ard-form-field-frame.ard-appearance-transparent {
+  --ard-appearance-background: transparent;
+  --ard-appearance-border: none;
+}
+.ard-form-field-frame.ard-variant-rounded, .ard-form-field-frame.ard-variant-semirounded {
+  --ard-variant-border-radius: 8px;
+}
+.ard-form-field-frame.ard-variant-pill {
+  --ard-variant-border-radius: 9999px;
+}
+.ard-form-field-frame.ard-variant-sharp {
+  --ard-variant-border-radius: 0;
+}
+.ard-form-field-frame .ard-form-field-overlay {
+  background: var(--ard-overlay);
+  opacity: 0;
+  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.ard-form-field-frame:hover .ard-form-field-overlay {
+  opacity: 3%;
+}
+.ard-form-field-frame.ard-focused {
+  border-color: var(--ard-border-dark);
+}
+.ard-form-field-frame.ard-focused .ard-form-field-overlay {
+  opacity: 6%;
+}
+
+.ard-disabled .ard-form-field-frame {
+  pointer-events: none;
+  opacity: 50%;
+}
+.ard-disabled .ard-form-field-frame.ard-appearance-transparent .ard-form-field-overlay {
+  opacity: 4.5%;
+}
+
+/*# sourceMappingURL=form-field-frame.css.map */

package/prebuilt-themes/default/form-field-frame.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/form-field-frame.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EC2CA;EDbA;EACA;EACA;;AA9BA;EACI;EACA;;AAEJ;AAAA;EAEI;EACA;EACA;EACA;;AAEJ;EACI;;AAEJ;EACI;;AAIJ;EACI;EACA;EACA;;ACIJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAOJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;ADnBJ;EACI,YE/CE;EFgDF;EACA,YACI;;AAKJ;EACI;;AAGR;EAII,cEpDM;;AFiDN;EACI;;;AAKZ;EACI;EACA;;AAGI;EACI","file":"form-field-frame.css"}

package/prebuilt-themes/default/inputs/color-input.css

@@ -0,0 +1,139 @@
+/**
+ * Should be applied to the first element in the component's template.
+ */
+.ard-color-input {
+  position: relative;
+  font-family: "Roboto", sans-serif;
+  display: flex;
+  align-items: center;
+  justify-content: stretch;
+  gap: 0.625em;
+  cursor: text;
+  box-sizing: border-box;
+  height: 2.0625em;
+  font-size: 1rem;
+  line-height: 1.25em;
+  padding: 0 0.375rem;
+  min-width: 10rem;
+  max-width: 100%;
+  cursor: pointer;
+}
+.ard-color-input .ard-input-container {
+  flex-grow: 1;
+  text-size-adjust: 100%;
+  display: flex;
+  align-items: center;
+}
+.ard-color-input .ard-input-container .ard-placeholder {
+  font: inherit;
+  opacity: 60%;
+}
+.ard-color-input .ard-input-container input {
+  border: none;
+  background: transparent;
+  outline: none;
+  font: inherit;
+  padding: 0;
+  display: block;
+  width: 100%;
+}
+.ard-color-input.ard-compact {
+  height: 1.5625em;
+  font-size: 0.85em;
+  line-height: 1;
+}
+.ard-color-input ard-_clear-button {
+  height: var(--ard-clear-button-size);
+  width: var(--ard-clear-button-size);
+  position: relative;
+}
+.ard-color-input .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-color-input .ard-clear-btn-wrapper .ard-hitbox {
+  position: absolute;
+  left: -1px;
+  right: -1px;
+  top: -1px;
+  bottom: -1px;
+}
+.ard-color-input .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-color-input .ard-clear-btn-wrapper .ard-clear-btn {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ard-color-input .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-color-input .ard-clear-btn-wrapper:hover .ard-focus-overlay {
+  opacity: 5%;
+}
+.ard-color-input .ard-clear-btn-wrapper:focus .ard-focus-overlay {
+  opacity: 8%;
+}
+.ard-color-input .ard-clear-btn-wrapper:active .ard-focus-overlay {
+  opacity: 15%;
+}
+.ard-color-input .ard-input-container {
+  pointer-events: none;
+}
+.ard-color-input .ard-input-container input {
+  font-family: monospace;
+  user-select: none;
+}
+.ard-color-input .ard-color-display-button {
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  width: 3em;
+  outline: none;
+}
+.ard-color-input .ard-color-display-button * {
+  width: 100% !important;
+}
+.ard-color-input .ard-color-display-button ard-color-display {
+  pointer-events: none;
+  font-size: 1.1rem;
+}
+
+.ard-color-input-overlay-card {
+  margin: 0.4rem;
+}
+
+/*# sourceMappingURL=color-input.css.map */

package/prebuilt-themes/default/inputs/color-input.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/_shared.scss","../../../../../projects/ui/src/themes/default/inputs/color-input.scss","../../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../../projects/ui/src/themes/_variables.scss","../../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAEA;AAAA;AAAA;ACEA;EDEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;ECVA;EACA;EACA;EACA;;ADSA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AEvCJ;EACI,QCkCY;EDjCZ,OCiCY;EDhCZ;;AAGJ;EACI;EACA;EACA,OCGC;EDFD,OCyBY;EDxBZ,QCwBY;EDvBZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAGJ;EEvBJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EFgBQ;;AAGJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EE7CZ;EACA;EACA,yBACI;EF4CQ;;AAKJ;EACI;;AAKJ;EACI;;AAKJ;EACI;;ADvDZ;EACI;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;;AAIZ;EACI","file":"color-input.css"}

package/prebuilt-themes/default/inputs/digit-input.css

@@ -0,0 +1,45 @@
+ard-digit-input {
+  font-family: "Roboto", sans-serif;
+  font-weight: 500;
+  color: var(--ard-text);
+}
+
+.ard-digit-input,
+.ard-digit-input__item,
+.ard-digit-input__input,
+.ard-digit-input__static {
+  font: inherit;
+  color: inherit;
+}
+
+.ard-digit-input {
+  display: flex;
+  gap: 0.5em;
+}
+.ard-digit-input .ard-digit-input__item {
+  height: max-content;
+  display: flex;
+}
+.ard-digit-input .ard-digit-input__item .ard-digit-input__input {
+  width: 2.0625em;
+  box-sizing: border-box;
+  text-align: center;
+  caret-color: var(--ard-text3);
+}
+.ard-digit-input .ard-digit-input__item .ard-digit-input__input:not(.ard-digit-input__input-empty) {
+  caret-color: transparent;
+}
+.ard-digit-input .ard-digit-input__item .ard-digit-input__static {
+  width: max-content;
+  white-space: nowrap;
+}
+.ard-digit-input.ard-shape-square .ard-digit-input__item .ard-digit-input__input {
+  height: 2.0625em;
+}
+.ard-digit-input.ard-shape-rectangle .ard-digit-input__item .ard-digit-input__input {
+  font-size: 1.2em;
+  width: 1.71875em;
+  height: 2.578125em;
+}
+
+/*# sourceMappingURL=digit-input.css.map */

package/prebuilt-themes/default/inputs/digit-input.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../../projects/ui/src/themes/default/inputs/digit-input.scss","../../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAGA;EACI;EACA;EACA,OCCG;;;ADEP;AAAA;AAAA;AAAA;EAII;EACA;;;AAEJ;EACI;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA,aCnBJ;;ADqBI;EACI;;AAGR;EACI;EACA;;AAKA;EACI;;AAMJ;EACI;EACA;EACA","file":"digit-input.css"}