@quidgest/ui 0.14.11 → 0.14.12

package/dist/manifest/components.json

@@ -7,6 +7,7 @@
   "QCard",
   "QCheckbox",
   "QCollapsible",
+  "QColorPicker",
   "QCombobox",
   "QDialog",
   "QDropdownMenu",

package/dist/ui.css

@@ -213,6 +213,31 @@ Remove the inner padding in Chrome and Safari on macOS.
   font: inherit; /* 2 */
 }
 
+/**
+Remove the default browser styling for `<input type="color">`
+to ensure consistent appearance across different browsers.
+*/
+[type=color] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+       appearance: none;
+  background: transparent;
+  padding: 0;
+}
+
+[type=color]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+[type=color]::-webkit-color-swatch {
+  border: 0;
+}
+
+/* Firefox */
+[type=color]::-moz-color-swatch {
+  border: 0;
+}
+
 /*
 Interactive
 ===========
@@ -273,6 +298,30 @@ body *::-webkit-scrollbar-track {
   transition: opacity 0.2s;
 }
 
+/* Internal components */
+.q-chevron {
+  transition: all 0.2s;
+}
+.q-chevron--expanded {
+  transform: rotate(-180deg);
+}
+@media (prefers-reduced-motion: reduce) {
+  .q-chevron {
+    transition: none;
+  }
+}
+
+.q-clear-btn.q-btn {
+  padding: 0.1rem;
+  opacity: 0.5;
+}
+.q-clear-btn.q-btn:hover {
+  cursor: inherit;
+}
+.q-clear-btn.q-btn:hover, .q-clear-btn.q-btn:focus {
+  opacity: 1;
+}
+
 /* Components */
 .q-accordion {
   display: flex;
@@ -441,11 +490,12 @@ body *::-webkit-scrollbar-track {
   --box-shadow-tint: var(--q-theme-primary-dark-rgb);
   background-color: var(--q-theme-primary);
   border-color: var(--q-theme-primary);
-  color: var(--q-theme-background);
+  color: var(--q-theme-on-primary);
 }
 .q-btn--primary:hover:not(:disabled) {
   background-color: var(--q-theme-primary-dark);
   border-color: var(--q-theme-primary-dark);
+  color: var(--q-theme-background);
 }
 .q-btn--secondary {
   --box-shadow-tint: var(--q-theme-primary-dark-rgb);
@@ -470,11 +520,12 @@ body *::-webkit-scrollbar-track {
   --box-shadow-tint: var(--q-theme-danger-dark-rgb);
   background-color: var(--q-theme-danger);
   border-color: var(--q-theme-danger);
-  color: var(--q-theme-background);
+  color: var(--q-theme-on-danger);
 }
 .q-btn--danger:hover:not(:disabled) {
   background-color: var(--q-theme-danger-dark);
   border-color: var(--q-theme-danger-dark);
+  color: var(--q-theme-background);
 }
 .q-btn--plain {
   color: var(--q-theme-on-background);
@@ -650,6 +701,7 @@ body *::-webkit-scrollbar-track {
 }
 .q-card--borderless {
   --card-border: 1px solid transparent;
+  --card-background: transparent;
 }
 .q-card--clickable {
   text-decoration: none;
@@ -797,21 +849,10 @@ body *::-webkit-scrollbar-track {
   max-width: 100%;
   min-height: 0;
 }
-.q-collapsible .q-collapsible__chevron {
-  transition: all 0.2s;
-  font-weight: 600;
-}
-.q-collapsible .q-collapsible__chevron:hover, .q-collapsible .q-collapsible__chevron:focus {
-  cursor: pointer;
-  opacity: 1;
-}
 .q-collapsible:not(.q-collapsible--borderless) .q-collapsible__chevron-right {
   position: absolute;
   right: 0;
 }
-.q-collapsible--expanded .q-collapsible__chevron {
-  transform: rotate(-180deg);
-}
 .q-collapsible .q-card__content {
   padding: 0;
 }
@@ -879,7 +920,7 @@ body *::-webkit-scrollbar-track {
 .q-collapsible__content-wrapper {
   display: grid;
   grid-template-rows: 0fr;
-  transition: 0.5s;
+  transition: 0.2s;
   width: 100%;
 }
 .q-collapsible__content-wrapper:not(.q-collapsible__content-show) {
@@ -894,6 +935,7 @@ body *::-webkit-scrollbar-track {
   grid-template-rows: 1fr;
 }
 .q-collapsible--border-bottom {
+  background-color: transparent;
   border-radius: 0;
   border: 0;
   border-bottom: 1px solid var(--q-theme-neutral-light);
@@ -920,30 +962,33 @@ body *::-webkit-scrollbar-track {
   padding: calc(0.55rem + -0.25rem);
 }
 
-.q-combobox:not(.q-combobox--disabled) .q-combobox__clear:hover, .q-combobox:not(.q-combobox--disabled) .q-combobox__clear:focus,
-.q-combobox:not(.q-combobox--disabled) .q-combobox__chevron:hover,
-.q-combobox:not(.q-combobox--disabled) .q-combobox__chevron:focus {
+.q-color-picker__swatch {
+  width: 1.5em;
+  height: 1.5em;
+  border-radius: var(--border-radius);
+  /* Border ensures swatch is always visible */
+  border-width: 1px;
+}
+.q-color-picker__swatch:focus-visible {
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/0.5);
+}
+.q-color-picker__swatch:not(:disabled) {
+  cursor: pointer;
+}
+
+.q-combobox:not(.q-combobox--disabled) .q-combobox__chevron:hover, .q-combobox:not(.q-combobox--disabled) .q-combobox__chevron:focus {
   cursor: pointer;
   opacity: 1;
 }
-.q-combobox--expanded .q-combobox__chevron svg {
-  transform: rotate(-180deg);
-}
 
-.q-combobox__clear,
 .q-combobox__chevron {
   padding: 0.1rem;
   opacity: 0.5;
 }
-.q-combobox__clear:hover,
 .q-combobox__chevron:hover {
   cursor: inherit;
 }
 
-.q-combobox__chevron svg {
-  transition: all 0.2s;
-}
-
 .q-dialog {
   display: flex;
   flex-direction: column;
@@ -1482,7 +1527,7 @@ body *::-webkit-scrollbar-track {
   display: flex;
   align-items: center;
 }
-.q-property-list-group ~ .q-property-list__row .q-property-list__cell--label {
+.q-property-list-group ~ .q-property-list__row .q-property-list__cell-label {
   padding: 0 2rem;
 }
 .q-property-list-group--no-toggle {
@@ -1498,9 +1543,7 @@ body *::-webkit-scrollbar-track {
 .q-select:not(.q-select--readonly):not(.q-select--disabled) {
   cursor: pointer;
 }
-.q-select:not(.q-select--disabled) .q-select__clear:hover, .q-select:not(.q-select--disabled) .q-select__clear:focus,
-.q-select:not(.q-select--disabled) .q-select__chevron:hover,
-.q-select:not(.q-select--disabled) .q-select__chevron:focus {
+.q-select:not(.q-select--disabled) .q-select__chevron:hover, .q-select:not(.q-select--disabled) .q-select__chevron:focus {
   opacity: 1;
 }
 .q-select__value, .q-select__placeholder {
@@ -1514,28 +1557,19 @@ body *::-webkit-scrollbar-track {
   font-style: italic;
   color: var(--q-theme-neutral);
 }
-.q-select--expanded .q-select__chevron svg {
-  transform: rotate(-180deg);
-}
 .q-select .q-field__prepend {
   padding-left: 6px;
   padding-right: 0.25rem;
 }
 
-.q-select__clear,
 .q-select__chevron {
   padding: 0.1rem;
   opacity: 0.5;
 }
-.q-select__clear:hover,
 .q-select__chevron:hover {
   cursor: inherit;
 }
 
-.q-select__chevron svg {
-  transition: all 0.2s;
-}
-
 .q-select__body {
   display: flex;
   flex-direction: column;
@@ -1664,6 +1698,7 @@ body *::-webkit-scrollbar-track {
 }
 
 .q-theme-provider {
+  background: var(--q-theme-background);
   color: var(--q-theme-on-background);
   caret-color: var(--q-theme-on-background);
 }