@quidgest/ui 0.14.22 → 0.14.23

package/dist/manifest/components.json

@@ -33,6 +33,8 @@
   "QPropertyListRow",
   "QPropertyListGroup",
   "QPropertyListPanel",
+  "QRadioButton",
+  "QRadioGroup",
   "QSelect",
   "QSkeletonLoader",
   "QSpinnerLoader",

package/dist/ui.css

@@ -2577,11 +2577,6 @@ body *::-webkit-scrollbar-track {
   padding-left: 0.25rem;
   padding-right: 0.05rem;
 }
-.q-field--required > .q-field__label label::after {
-  content: " *";
-  font-weight: 700;
-  color: var(--q-theme-danger);
-}
 .q-field--readonly > .q-field__control {
   background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
 }
@@ -2790,6 +2785,11 @@ body *::-webkit-scrollbar-track {
 .q-label .q-icon {
   color: currentcolor;
 }
+.q-label--required::after {
+  content: " *";
+  font-weight: 700;
+  color: var(--q-theme-danger);
+}
 
 .q-line-loader {
   width: 100%;
@@ -3153,6 +3153,111 @@ body *::-webkit-scrollbar-track {
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
 
+.q-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.q-radio-group__group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+.q-radio-group--horizontal .q-radio-group__group {
+  flex-direction: row;
+}
+
+.q-radio-button {
+  --q-radio-button-circle-size: 1rem;
+  --q-radio-button-checked-color: var(--q-theme-primary);
+  display: flex;
+  align-items: center;
+  font-size: var(--q-radio-button-circle-size);
+  gap: 0.5em;
+}
+.q-radio-button label {
+  font-size: 0.875em;
+  line-height: 1;
+}
+.q-radio-button__input {
+  position: relative;
+  width: var(--q-radio-button-circle-size);
+  height: var(--q-radio-button-circle-size);
+  background-color: transparent;
+  flex-shrink: 0;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border-width: 1px;
+  border-color: var(--q-theme-neutral);
+  border-radius: 50%;
+  /** The inner dot */
+}
+.q-radio-button__input::before {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 0.5em;
+  height: 0.5em;
+  background-color: var(--q-theme-background);
+  border-radius: 50%;
+  transform: translate(-50%, -50%) scale(0);
+  opacity: 0;
+  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
+}
+.q-radio-button__input:checked::before {
+  transform: translate(-50%, -50%) scale(1);
+  opacity: 1;
+}
+.q-radio-button__input:checked:not(:disabled) {
+  background-color: var(--q-radio-button-checked-color);
+  border-color: var(--q-radio-button-checked-color);
+}
+.q-radio-button__input:checked:disabled::before {
+  background-color: var(--q-theme-neutral);
+}
+.q-radio-button__input:hover:not(:disabled) {
+  border-color: var(--q-radio-button-checked-color);
+  cursor: pointer;
+}
+.q-radio-button__input:focus:not(:disabled) {
+  outline: 0;
+}
+.q-radio-button__input:focus-visible:not(:disabled) {
+  outline: 2px solid rgb(var(--q-theme-info-rgb)/50%);
+}
+.q-radio-button--primary {
+  --q-radio-button-checked-color: var(--q-theme-primary);
+}
+.q-radio-button--info {
+  --q-radio-button-checked-color: var(--q-theme-info);
+}
+.q-radio-button--success {
+  --q-radio-button-checked-color: var(--q-theme-success);
+}
+.q-radio-button--warning {
+  --q-radio-button-checked-color: var(--q-theme-warning);
+}
+.q-radio-button--danger {
+  --q-radio-button-checked-color: var(--q-theme-danger);
+}
+.q-radio-button--disabled {
+  opacity: 0.5;
+}
+.q-radio-button--readonly .q-radio-button__input {
+  background-color: rgb(var(--q-theme-neutral-light-rgb)/25%);
+}
+.q-radio-button--invalid .q-radio-button__input {
+  border-color: var(--q-theme-danger);
+}
+.q-radio-button--small {
+  --q-radio-button-circle-size: 0.875rem;
+}
+.q-radio-button--large {
+  --q-radio-button-circle-size: 1.125rem;
+}
+
 .q-select {
   /* Icon of the selected item */
 }