@ardium-ui/ui 1.0.0

package/prebuilt-themes/default/segment.css

@@ -0,0 +1,391 @@
+.ard-segment-container {
+  --ard-_segment-padding: 0.15rem;
+  padding: var(--ard-_segment-padding);
+  font-family: "Roboto", sans-serif;
+  margin: 2px;
+  border: 1px solid transparent;
+  font-weight: 500;
+  width: max-content;
+  height: max-content;
+  gap: var(--ard-_segment-padding);
+  overflow: hidden;
+  border-radius: var(--ard-variant-border-radius);
+}
+.ard-segment-container.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-segment-container.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-segment-container.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-segment-container.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-segment-container.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-segment-container.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-segment-container.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-segment-container.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-segment-container.ard-appearance-outlined {
+  --ard-appearance-background: var(--ard-bg);
+  --ard-appearance-border: 1px solid var(--ard-border);
+}
+.ard-segment-container.ard-appearance-filled {
+  --ard-appearance-background: var(--ard-bg-filled);
+  --ard-appearance-border: none;
+}
+.ard-segment-container.ard-appearance-transparent {
+  --ard-appearance-background: transparent;
+  --ard-appearance-border: none;
+}
+.ard-segment-container.ard-variant-rounded, .ard-segment-container.ard-variant-semirounded {
+  --ard-variant-border-radius: 8px;
+}
+.ard-segment-container.ard-variant-pill {
+  --ard-variant-border-radius: 9999px;
+}
+.ard-segment-container.ard-variant-sharp {
+  --ard-variant-border-radius: 0;
+}
+.ard-segment-container .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-color: var(--ard-cmpcl--content);
+}
+.ard-segment-container .ard-segment-row {
+  gap: var(--ard-_segment-padding);
+  --ard-_font-size: 0.85em;
+  height: calc(2.42em + 1px);
+  font-size: var(--ard-_font-size);
+}
+.ard-segment-container .ard-segment-row .ard-segment-option {
+  margin: 0;
+  padding: 0 1em;
+  height: 100%;
+  font-size: 1em;
+  min-width: 2.42em;
+  border: 1px solid transparent;
+  background: transparent;
+  position: relative;
+  cursor: pointer;
+  transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.1s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.1s cubic-bezier(0.4, 0, 0.2, 1);
+  outline: none;
+  display: flex;
+  align-items: center;
+}
+.ard-segment-container .ard-segment-row .ard-segment-option.ard-option-selected {
+  position: relative;
+  z-index: 2;
+}
+.ard-segment-container .ard-segment-row .ard-segment-option.ard-option-disabled {
+  opacity: 60%;
+  pointer-events: none;
+}
+.ard-segment-container .ard-segment-row .ard-segment-option .ard-button-content {
+  position: relative;
+  z-index: 1;
+  width: max-content;
+}
+.ard-segment-container .ard-segment-row .ard-segment-option .ard-button-content .ard-option-label {
+  display: flex;
+  align-items: center;
+}
+.ard-segment-container .ard-segment-option.ard-option-highlighted .ard-focus-overlay {
+  opacity: 4%;
+}
+.ard-segment-container .ard-segment-option:active .ard-focus-overlay {
+  opacity: 12%;
+}
+.ard-segment-container .ard-segment-option.ard-option-selected .ard-focus-overlay {
+  opacity: 16%;
+}
+.ard-segment-container.ard-using-keyboard .ard-segment-option.ard-option-highlighted .ard-focus-overlay {
+  opacity: 28%;
+}
+.ard-segment-container.ard-using-keyboard .ard-segment-option:active .ard-focus-overlay {
+  opacity: 34%;
+}
+.ard-segment-container.ard-appearance-transparent {
+  background: transparent;
+}
+.ard-segment-container.ard-appearance-transparent .ard-segment-row .ard-segment-option .ard-focus-overlay {
+  background-color: var(--ard-cmpcl--content);
+}
+.ard-segment-container.ard-appearance-transparent .ard-segment-row .ard-segment-option.ard-option-selected {
+  color: var(--ard-cmpcl--content);
+}
+.ard-segment-container.ard-appearance-outlined, .ard-segment-container.ard-appearance-outlined-strong {
+  background: var(--ard-bg);
+  padding: 0;
+}
+.ard-segment-container.ard-appearance-outlined .ard-segment-option, .ard-segment-container.ard-appearance-outlined-strong .ard-segment-option {
+  border: 1px solid var(--ard-border-light);
+}
+.ard-segment-container.ard-appearance-outlined .ard-segment-option.ard-option-selected, .ard-segment-container.ard-appearance-outlined-strong .ard-segment-option.ard-option-selected {
+  border-color: var(--ard-cmpcl--border);
+  color: var(--ard-cmpcl--content);
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected, .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected {
+  gap: 0;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected .ard-segment-row {
+  gap: 0;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected .ard-segment-row:not(:first-child) {
+  margin-top: -1px;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined.ard-variant-sharp-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row .ard-segment-option:not(:first-child), .ard-segment-container.ard-appearance-outlined-strong.ard-variant-sharp-connected .ard-segment-row .ard-segment-option:not(:first-child) {
+  margin-left: -1px;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row .ard-segment-option, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row .ard-segment-option {
+  border-radius: 0 !important;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child {
+  border-top-left-radius: var(--ard-variant-border-radius) !important;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:last-child {
+  border-top-right-radius: var(--ard-variant-border-radius) !important;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child .ard-segment-option:first-child:last-child {
+  border-top-right-radius: var(--ard-variant-border-radius) !important;
+  border-top-left-radius: var(--ard-variant-border-radius) !important;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child {
+  border-bottom-left-radius: var(--ard-variant-border-radius) !important;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:last-child {
+  border-bottom-right-radius: var(--ard-variant-border-radius) !important;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:last-child .ard-segment-option:first-child:last-child {
+  border-bottom-right-radius: var(--ard-variant-border-radius) !important;
+  border-bottom-left-radius: var(--ard-variant-border-radius) !important;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child {
+  border-top-left-radius: var(--ard-variant-border-radius) !important;
+  border-bottom-left-radius: var(--ard-variant-border-radius) !important;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:last-child {
+  border-top-right-radius: var(--ard-variant-border-radius) !important;
+  border-bottom-right-radius: var(--ard-variant-border-radius) !important;
+}
+.ard-segment-container.ard-appearance-outlined.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child:last-child, .ard-segment-container.ard-appearance-outlined-strong.ard-variant-rounded-connected .ard-segment-row:first-child:last-child .ard-segment-option:first-child:last-child {
+  border-radius: var(--ard-variant-border-radius) !important;
+}
+.ard-segment-container.ard-appearance-outlined-strong .ard-segment-option.ard-option-selected {
+  background-color: var(--ard-cmpcl--bg);
+  color: var(--ard-cmpcl--on-bg);
+}
+.ard-segment-container.ard-appearance-filled {
+  position: relative;
+}
+.ard-segment-container.ard-appearance-filled::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-radius: inherit;
+  background: var(--ard-cmpcl--bg);
+  opacity: 15%;
+}
+.ard-segment-container.ard-appearance-filled .ard-segment-option.ard-option-highlighted .ard-focus-overlay {
+  opacity: 8%;
+}
+.ard-segment-container.ard-appearance-filled .ard-segment-option.ard-option-selected .ard-focus-overlay {
+  opacity: 20%;
+}
+.ard-segment-container.ard-appearance-filled-strong {
+  background: var(--ard-cmpcl--bg);
+  border-radius: var(--ard-variant-border-radius);
+}
+.ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option {
+  color: var(--ard-cmpcl--on-bg);
+}
+.ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option .ard-focus-overlay {
+  background-color: var(--ard-cmpcl--on-bg);
+}
+.ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option.ard-option-highlighted .ard-focus-overlay {
+  opacity: 16%;
+}
+.ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option.ard-option-selected {
+  color: var(--ard-cmpcl--content);
+  background: var(--ard-cmpcl--on-bg);
+}
+.ard-segment-container.ard-appearance-filled-strong .ard-segment-row .ard-segment-option.ard-option-selected .ard-focus-overlay {
+  opacity: 0;
+}
+.ard-segment-container.ard-variant-pill {
+  border-radius: 16px;
+}
+.ard-segment-container.ard-variant-pill .ard-segment-row .ard-segment-option {
+  border-radius: var(--ard-variant-border-radius);
+}
+.ard-segment-container.ard-variant-rounded, .ard-segment-container.ard-variant-rounded-connected {
+  --ard-variant-border-radius: 8px;
+  border-radius: var(--ard-variant-border-radius);
+}
+.ard-segment-container.ard-variant-rounded .ard-segment-row .ard-segment-option, .ard-segment-container.ard-variant-rounded-connected .ard-segment-row .ard-segment-option {
+  border-radius: max(1px, var(--ard-variant-border-radius) - var(--ard-_segment-padding));
+}
+.ard-segment-container.ard-variant-sharp, .ard-segment-container.ard-variant-sharp-connected {
+  border-radius: var(--ard-variant-border-radius);
+}
+.ard-segment-container.ard-variant-sharp .ard-segment-row .ard-segment-option, .ard-segment-container.ard-variant-sharp-connected .ard-segment-row .ard-segment-option {
+  border-radius: calc(var(--ard-variant-border-radius));
+}
+.ard-segment-container.ard-compact .ard-segment-row {
+  --ard-_font-size: 0.85em;
+  height: calc(1.85em + 1px);
+}
+.ard-segment-container.ard-compact .ard-segment-row .ard-segment-option {
+  padding: 0 0.5em;
+  min-width: 1.85em;
+}
+.ard-segment-container.ard-icon-based .ard-segment-row .ard-segment-option {
+  padding: 0;
+  min-width: unset;
+  aspect-ratio: 1;
+  justify-content: center;
+}
+.ard-segment-container.ard-disabled {
+  pointer-events: none;
+  opacity: 50%;
+}
+.ard-segment-container.ard-disabled .ard-focus-overlay {
+  opacity: 10%;
+}
+.ard-segment-container.ard-disabled.ard-color-none .ard-button-icon,
+.ard-segment-container.ard-disabled.ard-color-none .ard-button-content {
+  opacity: 60%;
+}
+.ard-segment-container.ard-disabled.ard-color-none .ard-focus-overlay {
+  background: var(--ard-cmpcl--overlay);
+}
+
+/*# sourceMappingURL=segment.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/segment.scss","../../../../projects/ui/src/themes/default/_mixins.scss","../../../../projects/ui/src/themes/default/_coloring.scss","../../../../projects/ui/src/themes/_variables.scss"],"names":[],"mappings":"AAIA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EC0CA;;ACtDA;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;;AD5FJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAOJ;EAEI;;AAEJ;EACI;;AAEJ;EACI;;AD9CJ;ECRA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EDCI;;AAIJ;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,YACI;EAGJ;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAQR;EACI;;AAIJ;EACI;;AAIJ;EACI;;AAOA;EACI;;AAIJ;EACI;;AAOhB;EACI;;AAIQ;EACI;;AAGJ;EACI;;AAKhB;EAEI,YG5HH;EH6HG;;AAEA;EACI;;AAEA;EACI;EACA;;AAGR;EAEI;;AAEA;EACI;;AAEA;EACI;;AAGJ;EACI;;AAMJ;EACI;;AAII;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAMJ;EACI;;AAEJ;EACI;;AAEJ;EACI;EACA;;AAMJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;;AAQpB;EACI;EACA;;AAGR;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKI;EACI;;AAIJ;EACI;;AAKhB;EACI;EACA;;AAGI;EACI;;AAEA;EACI;;AAGA;EACI;;AAGR;EACI;EACA;;AAEA;EACI;;AAQpB;EACI;;AAGI;EACI;;AAIZ;EAEI;EACA;;AAGI;EACI;;AAIZ;EAEI;;AAGI;EACI;;AAOR;EACI;EACA;;AAEA;EACI;EACA;;AAMR;EACI;EACA;EACA;EACA;;AAKR;EACI;EACA;;AAEA;EACI;;AAKA;AAAA;EAEI;;AAEJ;EACI","file":"segment.css"}

package/prebuilt-themes/default/select.css

@@ -0,0 +1,275 @@
+.ard-select {
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 100%;
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr max-content;
+  gap: 0.625em;
+  padding: 0 1em 0 0.375em;
+  font-family: "Roboto", sans-serif;
+  font-size: 1rem;
+}
+.ard-select ard-_clear-button {
+  height: var(--ard-clear-button-size);
+  width: var(--ard-clear-button-size);
+  position: relative;
+}
+.ard-select .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-select .ard-clear-btn-wrapper .ard-hitbox {
+  position: absolute;
+  left: -1px;
+  right: -1px;
+  top: -1px;
+  bottom: -1px;
+}
+.ard-select .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-select .ard-clear-btn-wrapper .ard-clear-btn {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.ard-select .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-select .ard-clear-btn-wrapper:hover .ard-focus-overlay {
+  opacity: 5%;
+}
+.ard-select .ard-clear-btn-wrapper:focus .ard-focus-overlay {
+  opacity: 8%;
+}
+.ard-select .ard-clear-btn-wrapper:active .ard-focus-overlay {
+  opacity: 15%;
+}
+.ard-select.ard-variant-pill {
+  padding-left: 0.8125em;
+}
+.ard-select .ard-select-value-container {
+  position: relative;
+  height: 2em;
+  display: flex;
+  align-items: center;
+  font-size: 1em;
+  text-size-adjust: 100%;
+  flex-grow: 1;
+  overflow: hidden;
+}
+.ard-select .ard-select-value-container .ard-placeholder {
+  font: inherit;
+  position: absolute;
+  color: var(--ard-text3);
+  width: max-content;
+  pointer-events: none;
+}
+.ard-select .ard-select-value-container .ard-search-input {
+  width: 100%;
+  max-width: 100%;
+}
+.ard-select .ard-select-value-container .ard-search-input input {
+  border: none;
+  background: transparent;
+  outline: none;
+  font: inherit;
+  padding-left: 1px;
+  display: block;
+  width: 100%;
+  max-width: 100%;
+}
+.ard-select .ard-select-controls {
+  display: flex;
+  align-items: center;
+  gap: 0.625em;
+  width: max-content;
+}
+.ard-select.ard-singleselect .ard-value {
+  width: max-content;
+  white-space: nowrap;
+}
+.ard-select:not(.ard-searchable) .ard-search-input, .ard-select.ard-singleselect .ard-search-input {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%) translateX(-1px);
+  width: max-content;
+}
+.ard-select:not(.ard-searchable) .ard-search-input input, .ard-select.ard-singleselect .ard-search-input input {
+  width: max-content;
+}
+.ard-select:not(.ard-searchable) .ard-search-input {
+  pointer-events: none;
+}
+.ard-select.ard-multiselect {
+  height: max-content;
+}
+.ard-select.ard-multiselect .ard-select-value-container {
+  height: max-content;
+  min-height: 1.5625em;
+  padding: 0.25em 0;
+  box-sizing: border-box;
+  flex-wrap: wrap;
+  gap: 0.375em;
+  justify-content: stretch;
+}
+.ard-select.ard-multiselect .ard-select-value-container .ard-chip-wrapper {
+  margin: 0;
+}
+.ard-select.ard-multiselect .ard-search-input {
+  flex-grow: 1;
+  width: unset !important;
+  min-width: 10ch;
+}
+.ard-select.ard-multiselect .ard-search-input input {
+  width: 10ch !important;
+}
+.ard-select.ard-multiselect .ard-chip-wrapper {
+  margin: 0;
+}
+.ard-select .ard-dropdown-arrow-wrapper {
+  display: flex;
+  align-items: center;
+  height: max-content;
+  width: max-content;
+}
+.ard-select .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
+  border: calc(var(--ard-dropdown-button-size) / 2) solid transparent;
+  position: relative;
+  cursor: pointer;
+  border-bottom-color: var(--ard-detail);
+  border-right-color: var(--ard-detail);
+  transform: rotate(45deg) translate(-17.67771%, -17.67771%);
+}
+.ard-select.ard-dropdown-open .ard-dropdown-arrow {
+  transform: rotate(45deg) translate(17.67771%, 17.67771%) scaleX(-1) scaleY(-1);
+}
+.ard-select.ard-compact {
+  font-size: 0.85rem;
+  height: 1.5625rem;
+  padding-right: 0.625em;
+}
+.ard-select.ard-compact .ard-dropdown-arrow-wrapper .ard-dropdown-arrow {
+  border-width: calc(var(--ard-dropdown-button-size) / 2.4);
+}
+
+.ard-select-dropdown-panel {
+  right: 0;
+  width: max-content;
+  max-width: max(25em, 100%);
+  min-width: 100%;
+  font-size: 1rem;
+}
+.ard-select-dropdown-panel .ard-dropdown-panel-content {
+  padding: 0.375em 0;
+  max-height: 15em;
+  overflow: hidden auto;
+}
+.ard-select-dropdown-panel .ard-optgroup {
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+}
+.ard-select-dropdown-panel .ard-optgroup-children {
+  cursor: unset;
+}
+.ard-select-dropdown-panel .ard-optgroup-label {
+  font-size: 0.875em;
+  font-weight: 600;
+  letter-spacing: 0.25px;
+  padding: 0.375em 0.625em 0.0625em 0.625em;
+}
+.ard-select-dropdown-panel .ard-option {
+  padding: 0.375em 0.625em;
+  color: var(--ard-text2);
+  cursor: pointer;
+}
+.ard-select-dropdown-panel .ard-option.ard-option-highlighted {
+  background: var(--ard-darken-overlay-light);
+}
+.ard-select-dropdown-panel .ard-option.ard-option-selected {
+  font-weight: 500;
+  background: var(--ard-darken-overlay-medium);
+}
+.ard-select-dropdown-panel .ard-option.ard-option-disabled {
+  pointer-events: none;
+  opacity: 50%;
+}
+.ard-select-dropdown-panel hr.ard-divider {
+  width: calc(100% - 1.25em);
+  margin: 0.375em 0.625em;
+  border: none;
+  border-bottom: 1px solid var(--ard-darken-overlay-strong);
+}
+.ard-select-dropdown-panel .ard-optgroup:first-child > hr.ard-divider {
+  display: none;
+}
+.ard-select-dropdown-panel .ard-add-custom {
+  display: flex;
+  align-items: flex-end;
+  gap: 0.375rem;
+}
+.ard-select-dropdown-panel .ard-add-custom .ard-add-custom-label {
+  font-size: 85%;
+}
+.ard-select-dropdown-panel > .ard-compact {
+  font-size: 0.85rem;
+}
+
+.ard-simple-spinner {
+  border-radius: 999px;
+  border: 0.5em solid var(--ard-spinner-color);
+  border-top-color: transparent;
+  animation: spinner-anim 1s linear infinite;
+  position: relative;
+}
+.ard-simple-spinner::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  border-radius: 999px;
+  border: 0.35em solid var(--ard-bg);
+}
+
+@keyframes spinner-anim {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+/*# sourceMappingURL=select.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../../../projects/ui/src/themes/default/select.scss","../../../../projects/ui/src/themes/default/_clear-button.scss","../../../../projects/ui/src/themes/_variables.scss","../../../../projects/ui/src/themes/default/_mixins.scss"],"names":[],"mappings":"AAIA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACVA;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;;ADjDZ;EACI;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA,OE5BJ;EF6BI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIZ;EACI;EACA;EACA;EACA;;AAIA;EACI;EACA;;AAKJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIZ;EACI;;AAEJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGR;EACI;EACA;EACA;;AAEA;EACI;;AAGR;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA,qBEhHH;EFiHG,oBEjHH;EFkHG;;AAGR;EACI;;AAIJ;EACI;EACA;EACA;;AAEA;EACI;;;AAMZ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;EACA;EACA;;AAEJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA,OE5KA;EF6KA;;AAEA;EACI,YE5JW;;AF+Jf;EACI;EACA,YElKY;;AFqKhB;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAEA;EACI;;AAKR;EACI;;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIR;EACI;IACI;;EAGJ;IACI","file":"select.css"}