@axa-fr/design-system-apollo-css 1.0.5-alpha.411 → 1.0.5-alpha.415

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionApollo.scss

@@ -0,0 +1,39 @@
+@use "CardCheckboxOptionCommon";
+
+.af-card-checkbox-option {
+  --checkbox-option-border-color: var(--axa-blue-65);
+  --checkbox-option-color-title: var(--axa-blue-100);
+  --checkbox-option-color-subtitle: var(--neutral-80);
+  --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);
+
+  &:hover {
+    --checkbox-option-border-color: var(--axa-blue-100);
+  }
+
+  &--horizontal {
+    --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);
+
+    & .af-card-checkbox-option__content {
+      --checkbox-option-gap: calc(4 / var(--font-size-base) * 1rem);
+    }
+
+    & .af-checkbox {
+      margin-right: calc(8 / var(--font-size-base) * 1rem);
+    }
+  }
+
+  &:not(&--horizontal) .af-checkbox {
+    margin-top: calc(8 / var(--font-size-base) * 1rem);
+  }
+
+  &:has(input:checked) {
+    --checkbox-option-background-color: var(--axa-blue-4);
+    --checkbox-option-border-color: var(--axa-blue-100);
+  }
+
+  &:has(input[aria-invalid="true"]):not(:has(input:checked)) {
+    --checkbox-option-border-color: var(--red-alert-100);
+    --checkbox-option-background-color: var(--axa-red-4);
+    --checkbox-option-color-title: var(--neutral-80);
+  }
+}

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.css

@@ -0,0 +1 @@
+.af-card-checkbox-option{--checkbox-option-border-width:1px;--checkbox-option-background-color:var(--white);align-items:center;background-color:var(--checkbox-option-background-color);border-radius:calc(8/var(--font-size-base)*1rem);cursor:pointer;display:flex;flex-direction:column;gap:var(--checkbox-option-gap);justify-content:space-between;outline:var(--checkbox-option-border-width) solid var(--checkbox-option-border-color);outline-offset:calc(var(--checkbox-option-border-width)*-1);padding:1rem;position:relative;text-align:center}.af-card-checkbox-option:hover{--checkbox-option-border-width:2px;--checkbox-option-border-color:var(--axa-blue-100)}.af-card-checkbox-option__label{color:var(--checkbox-option-color-title);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__label{font-size:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox-option:has(input:checked){--checkbox-option-border-width:2px}.af-card-checkbox-option:has(input:checked) .af-card-checkbox-option__label{font-weight:600}.af-card-checkbox-option__content{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--checkbox-option-gap);justify-content:space-between;text-align:center}.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{color:var(--checkbox-option-color-subtitle);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{font-size:1rem}}.af-card-checkbox-option--horizontal{flex-direction:row}.af-card-checkbox-option--horizontal .af-card-checkbox-option__content{align-items:flex-start}.af-card-checkbox-option--horizontal .af-checkbox{order:-1}.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-medium)}@media (width > 667px){.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-large)}}

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss%23sass","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss"],"names":[],"mappings":"AAEA,yBACE,kCAAA,CCDF,+CAAA,CDSE,kBAAA,CAIA,wDAAA,CANA,gDAAA,CAUA,cAAA,CAZA,YAAA,CAGA,qBAAA,CAGA,8BAAA,CADA,6BAAA,CAIA,qFAAA,CAEA,2DAAA,CAVA,YAAA,CAFA,iBAAA,CAQA,iBCEF,CDKE,+BACE,kCAAA,CACA,kDCHJ,CDME,gCAIE,wCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCDJ,CDMI,uBANF,gCAOI,6CCHJ,CACF,CDME,4CACE,kCCJJ,CDMI,4EACE,eCJN,CDQE,kCAIE,kBAAA,CAHA,YAAA,CACA,qBAAA,CACA,WAAA,CAGA,8BAAA,CADA,6BAAA,CAEA,iBCNJ,CDSE,yEAKE,2CAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCLJ,CDUI,uBAPF,yECAA,cACA,CACF,CDUE,qCACE,kBCRJ,CDUI,uEACE,sBCRN,CDWI,kDACE,QCTN,CDaE,kCACE,mCCXJ,CDaI,uBAHF,kCAII,kCCVJ,CACF","file":"CardCheckboxOptionCommon.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n  --checkbox-option-border-width: 1px;\n  --checkbox-option-background-color: var(--white);\n\n  position: relative;\n  display: flex;\n  padding: 1rem;\n  border-radius: calc(8 / var(--font-size-base) * 1rem);\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--checkbox-option-gap);\n  text-align: center;\n  background-color: var(--checkbox-option-background-color);\n  outline: var(--checkbox-option-border-width) solid\n    var(--checkbox-option-border-color);\n  outline-offset: calc(-1 * var(--checkbox-option-border-width));\n  cursor: pointer;\n\n  &:hover {\n    --checkbox-option-border-width: 2px;\n    --checkbox-option-border-color: var(--axa-blue-100);\n  }\n\n  &__label {\n    margin: 0;\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    color: var(--checkbox-option-color-title);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &:has(input:checked) {\n    --checkbox-option-border-width: 2px;\n\n    & .af-card-checkbox-option__label {\n      font-weight: 600;\n    }\n  }\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--checkbox-option-gap);\n    text-align: center;\n  }\n\n  &__description,\n  &__subtitle {\n    margin: 0;\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    color: var(--checkbox-option-color-subtitle);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: 1rem;\n    }\n  }\n\n  &--horizontal {\n    flex-direction: row;\n\n    & .af-card-checkbox-option__content {\n      align-items: flex-start;\n    }\n\n    & .af-checkbox {\n      order: -1;\n    }\n  }\n\n  & .af-icon {\n    --icon-size: var(--icon-size-medium);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      --icon-size: var(--icon-size-large);\n    }\n  }\n}\n","@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n  --checkbox-option-border-width: 1px;\n  --checkbox-option-background-color: var(--white);\n\n  position: relative;\n  display: flex;\n  padding: 1rem;\n  border-radius: calc(8 / var(--font-size-base) * 1rem);\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--checkbox-option-gap);\n  text-align: center;\n  background-color: var(--checkbox-option-background-color);\n  outline: var(--checkbox-option-border-width) solid\n    var(--checkbox-option-border-color);\n  outline-offset: calc(-1 * var(--checkbox-option-border-width));\n  cursor: pointer;\n\n  &:hover {\n    --checkbox-option-border-width: 2px;\n    --checkbox-option-border-color: var(--axa-blue-100);\n  }\n\n  &__label {\n    margin: 0;\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    color: var(--checkbox-option-color-title);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &:has(input:checked) {\n    --checkbox-option-border-width: 2px;\n\n    & .af-card-checkbox-option__label {\n      font-weight: 600;\n    }\n  }\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--checkbox-option-gap);\n    text-align: center;\n  }\n\n  &__description,\n  &__subtitle {\n    margin: 0;\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    color: var(--checkbox-option-color-subtitle);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: 1rem;\n    }\n  }\n\n  &--horizontal {\n    flex-direction: row;\n\n    & .af-card-checkbox-option__content {\n      align-items: flex-start;\n    }\n\n    & .af-checkbox {\n      order: -1;\n    }\n  }\n\n  & .af-icon {\n    --icon-size: var(--icon-size-medium);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      --icon-size: var(--icon-size-large);\n    }\n  }\n}\n"]}

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss

@@ -0,0 +1,87 @@
+@use "../../../common/breakpoints";
+
+.af-card-checkbox-option {
+  --checkbox-option-border-width: 1px;
+  --checkbox-option-background-color: var(--white);
+
+  position: relative;
+  display: flex;
+  padding: 1rem;
+  border-radius: calc(8 / var(--font-size-base) * 1rem);
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--checkbox-option-gap);
+  text-align: center;
+  background-color: var(--checkbox-option-background-color);
+  outline: var(--checkbox-option-border-width) solid
+    var(--checkbox-option-border-color);
+  outline-offset: calc(-1 * var(--checkbox-option-border-width));
+  cursor: pointer;
+
+  &:hover {
+    --checkbox-option-border-width: 2px;
+    --checkbox-option-border-color: var(--axa-blue-100);
+  }
+
+  &__label {
+    margin: 0;
+    font-size: calc(16 / var(--font-size-base) * 1rem);
+    font-weight: 400;
+    color: var(--checkbox-option-color-title);
+
+    @media (width > #{breakpoints.$breakpoint-sm}) {
+      font-size: calc(18 / var(--font-size-base) * 1rem);
+    }
+  }
+
+  &:has(input:checked) {
+    --checkbox-option-border-width: 2px;
+
+    & .af-card-checkbox-option__label {
+      font-weight: 600;
+    }
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--checkbox-option-gap);
+    text-align: center;
+  }
+
+  &__description,
+  &__subtitle {
+    margin: 0;
+    font-size: calc(14 / var(--font-size-base) * 1rem);
+    font-weight: 400;
+    color: var(--checkbox-option-color-subtitle);
+
+    @media (width > #{breakpoints.$breakpoint-sm}) {
+      font-size: 1rem;
+    }
+  }
+
+  &--horizontal {
+    flex-direction: row;
+
+    & .af-card-checkbox-option__content {
+      align-items: flex-start;
+    }
+
+    & .af-checkbox {
+      order: -1;
+    }
+  }
+
+  & .af-icon {
+    --icon-size: var(--icon-size-medium);
+
+    @media (width > #{breakpoints.$breakpoint-sm}) {
+      --icon-size: var(--icon-size-large);
+    }
+  }
+}

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.css

@@ -0,0 +1 @@
+.af-card-checkbox-option{--checkbox-option-border-width:1px;--checkbox-option-background-color:var(--white);align-items:center;background-color:var(--checkbox-option-background-color);border-radius:calc(8/var(--font-size-base)*1rem);cursor:pointer;display:flex;flex-direction:column;gap:var(--checkbox-option-gap);justify-content:space-between;outline:var(--checkbox-option-border-width) solid var(--checkbox-option-border-color);outline-offset:calc(var(--checkbox-option-border-width)*-1);padding:1rem;position:relative;text-align:center}.af-card-checkbox-option:hover{--checkbox-option-border-width:2px;--checkbox-option-border-color:var(--axa-blue-100)}.af-card-checkbox-option__label{color:var(--checkbox-option-color-title);font-size:calc(16/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__label{font-size:calc(18/var(--font-size-base)*1rem)}}.af-card-checkbox-option:has(input:checked){--checkbox-option-border-width:2px}.af-card-checkbox-option:has(input:checked) .af-card-checkbox-option__label{font-weight:600}.af-card-checkbox-option__content{align-items:center;display:flex;flex-direction:column;flex-grow:1;gap:var(--checkbox-option-gap);justify-content:space-between;text-align:center}.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{color:var(--checkbox-option-color-subtitle);font-size:calc(14/var(--font-size-base)*1rem);font-weight:400;margin:0}@media (width > 667px){.af-card-checkbox-option__description,.af-card-checkbox-option__subtitle{font-size:1rem}}.af-card-checkbox-option--horizontal{flex-direction:row}.af-card-checkbox-option--horizontal .af-card-checkbox-option__content{align-items:flex-start}.af-card-checkbox-option--horizontal .af-checkbox{order:-1}.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-medium)}@media (width > 667px){.af-card-checkbox-option .af-icon{--icon-size:var(--icon-size-large)}}.af-card-checkbox-option{--checkbox-option-border-color:var(--color-gray-700);--checkbox-option-color-title:var(--color-gray-900);--checkbox-option-color-subtitle:var(--color-gray-700);--checkbox-option-gap:calc(8/var(--font-size-base)*1rem)}.af-card-checkbox-option:hover{--checkbox-option-border-color:var(--color-axa)}.af-card-checkbox-option:not(.af-card-checkbox-option--horizontal) .af-checkbox{left:calc(12/var(--font-size-base)*1rem);position:absolute;top:calc(12/var(--font-size-base)*1rem)}@media (width > 667px){.af-card-checkbox-option:not(.af-card-checkbox-option--horizontal) .af-checkbox{left:calc(16/var(--font-size-base)*1rem);top:calc(16/var(--font-size-base)*1rem)}}.af-card-checkbox-option .af-card-checkbox-option__content{--checkbox-option-gap:calc(4/var(--font-size-base)*1rem)}.af-card-checkbox-option--horizontal{column-gap:calc(12/var(--font-size-base)*1rem)}.af-card-checkbox-option:has(input:checked){--checkbox-option-background-color:var(--color-blue-2);--checkbox-option-border-color:var(--color-axa)}.af-card-checkbox-option:has(input[aria-invalid=true]):not(:has(input:checked)){--checkbox-option-border-color:var(--color-red-700)}

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionCommon.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss","../../../../src/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss%23sass"],"names":[],"mappings":"AAEA,yBCDA,kCDEE,CACA,+CAAA,CAOA,kBAAA,CAIA,wDAAA,CANA,gDAAA,CAUA,cAAA,CAZA,YAAA,CAGA,qBAAA,CAGA,8BAAA,CADA,6BAAA,CAIA,qFAAA,CAEA,2DAAA,CAVA,YAAA,CCLF,iBAAA,CDWE,iBCEF,CDKE,+BACE,kCAAA,CACA,kDCHJ,CDME,gCAIE,wCAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCDJ,CDMI,uBANF,gCAOI,6CCHJ,CACF,CDME,4CACE,kCCJJ,CDMI,4EACE,eCJN,CDQE,kCAIE,kBAAA,CAHA,YAAA,CCNJ,qBAAA,CDQI,WAAA,CAGA,8BAAA,CADA,6BAAA,CAEA,iBCNJ,CDSE,yEAKE,2CAAA,CAFA,6CAAA,CACA,eAAA,CAFA,QCLJ,CDUI,uBAPF,yEAQI,cCPJ,CACF,CDUE,qCACE,kBCRJ,CDUI,uEACE,sBCRN,CDWI,kDACE,QCTN,CDaE,kCACE,mCCXJ,CDaI,uBAHF,kCAII,kCCVJ,CACF,CCvEA,yBACE,oDAAA,CACA,mDAAA,CACA,sDAAA,CACA,wDD0EF,CCxEE,+BACE,+CD0EJ,CCvEE,gFAGE,wCAAA,CAFA,iBAAA,CACA,uCD0EJ,CCvEI,uBALF,gFAOI,wCAAA,CADA,uCD2EJ,CACF,CCvEE,2DACE,wDDyEJ,CCtEE,qCACE,8CDwEJ,CCrEE,4CACE,sDAAA,CACA,+CDuEJ,CCpEE,gFACE,mDDsEJ","file":"CardCheckboxOptionLF.css","sourcesContent":["@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n  --checkbox-option-border-width: 1px;\n  --checkbox-option-background-color: var(--white);\n\n  position: relative;\n  display: flex;\n  padding: 1rem;\n  border-radius: calc(8 / var(--font-size-base) * 1rem);\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--checkbox-option-gap);\n  text-align: center;\n  background-color: var(--checkbox-option-background-color);\n  outline: var(--checkbox-option-border-width) solid\n    var(--checkbox-option-border-color);\n  outline-offset: calc(-1 * var(--checkbox-option-border-width));\n  cursor: pointer;\n\n  &:hover {\n    --checkbox-option-border-width: 2px;\n    --checkbox-option-border-color: var(--axa-blue-100);\n  }\n\n  &__label {\n    margin: 0;\n    font-size: calc(16 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    color: var(--checkbox-option-color-title);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: calc(18 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  &:has(input:checked) {\n    --checkbox-option-border-width: 2px;\n\n    & .af-card-checkbox-option__label {\n      font-weight: 600;\n    }\n  }\n\n  &__content {\n    display: flex;\n    flex-direction: column;\n    flex-grow: 1;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--checkbox-option-gap);\n    text-align: center;\n  }\n\n  &__description,\n  &__subtitle {\n    margin: 0;\n    font-size: calc(14 / var(--font-size-base) * 1rem);\n    font-weight: 400;\n    color: var(--checkbox-option-color-subtitle);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      font-size: 1rem;\n    }\n  }\n\n  &--horizontal {\n    flex-direction: row;\n\n    & .af-card-checkbox-option__content {\n      align-items: flex-start;\n    }\n\n    & .af-checkbox {\n      order: -1;\n    }\n  }\n\n  & .af-icon {\n    --icon-size: var(--icon-size-medium);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      --icon-size: var(--icon-size-large);\n    }\n  }\n}\n","@use \"CardCheckboxOptionCommon\";\n@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n  --checkbox-option-border-color: var(--color-gray-700);\n  --checkbox-option-color-title: var(--color-gray-900);\n  --checkbox-option-color-subtitle: var(--color-gray-700);\n  --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &:hover {\n    --checkbox-option-border-color: var(--color-axa);\n  }\n\n  &:not(&--horizontal) .af-checkbox {\n    position: absolute;\n    top: calc(12 / var(--font-size-base) * 1rem);\n    left: calc(12 / var(--font-size-base) * 1rem);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      top: calc(16 / var(--font-size-base) * 1rem);\n      left: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  & .af-card-checkbox-option__content {\n    --checkbox-option-gap: calc(4 / var(--font-size-base) * 1rem);\n  }\n\n  &--horizontal {\n    column-gap: calc(12 / var(--font-size-base) * 1rem);\n  }\n\n  &:has(input:checked) {\n    --checkbox-option-background-color: var(--color-blue-2);\n    --checkbox-option-border-color: var(--color-axa);\n  }\n\n  &:has(input[aria-invalid=\"true\"]):not(:has(input:checked)) {\n    --checkbox-option-border-color: var(--color-red-700);\n  }\n}\n","@use \"CardCheckboxOptionCommon\";\n@use \"../../../common/breakpoints\";\n\n.af-card-checkbox-option {\n  --checkbox-option-border-color: var(--color-gray-700);\n  --checkbox-option-color-title: var(--color-gray-900);\n  --checkbox-option-color-subtitle: var(--color-gray-700);\n  --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);\n\n  &:hover {\n    --checkbox-option-border-color: var(--color-axa);\n  }\n\n  &:not(&--horizontal) .af-checkbox {\n    position: absolute;\n    top: calc(12 / var(--font-size-base) * 1rem);\n    left: calc(12 / var(--font-size-base) * 1rem);\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      top: calc(16 / var(--font-size-base) * 1rem);\n      left: calc(16 / var(--font-size-base) * 1rem);\n    }\n  }\n\n  & .af-card-checkbox-option__content {\n    --checkbox-option-gap: calc(4 / var(--font-size-base) * 1rem);\n  }\n\n  &--horizontal {\n    column-gap: calc(12 / var(--font-size-base) * 1rem);\n  }\n\n  &:has(input:checked) {\n    --checkbox-option-background-color: var(--color-blue-2);\n    --checkbox-option-border-color: var(--color-axa);\n  }\n\n  &:has(input[aria-invalid=\"true\"]):not(:has(input:checked)) {\n    --checkbox-option-border-color: var(--color-red-700);\n  }\n}\n"]}

package/dist/Form/Checkbox/CardCheckboxOption/CardCheckboxOptionLF.scss

@@ -0,0 +1,41 @@
+@use "CardCheckboxOptionCommon";
+@use "../../../common/breakpoints";
+
+.af-card-checkbox-option {
+  --checkbox-option-border-color: var(--color-gray-700);
+  --checkbox-option-color-title: var(--color-gray-900);
+  --checkbox-option-color-subtitle: var(--color-gray-700);
+  --checkbox-option-gap: calc(8 / var(--font-size-base) * 1rem);
+
+  &:hover {
+    --checkbox-option-border-color: var(--color-axa);
+  }
+
+  &:not(&--horizontal) .af-checkbox {
+    position: absolute;
+    top: calc(12 / var(--font-size-base) * 1rem);
+    left: calc(12 / var(--font-size-base) * 1rem);
+
+    @media (width > #{breakpoints.$breakpoint-sm}) {
+      top: calc(16 / var(--font-size-base) * 1rem);
+      left: calc(16 / var(--font-size-base) * 1rem);
+    }
+  }
+
+  & .af-card-checkbox-option__content {
+    --checkbox-option-gap: calc(4 / var(--font-size-base) * 1rem);
+  }
+
+  &--horizontal {
+    column-gap: calc(12 / var(--font-size-base) * 1rem);
+  }
+
+  &:has(input:checked) {
+    --checkbox-option-background-color: var(--color-blue-2);
+    --checkbox-option-border-color: var(--color-axa);
+  }
+
+  &:has(input[aria-invalid="true"]):not(:has(input:checked)) {
+    --checkbox-option-border-color: var(--color-red-700);
+  }
+}

package/dist/Grid/DebugGrid.css

@@ -1 +1 @@
-.af-card-checkbox__container:has(label [name=debuggrid]){bottom:0;height:auto;left:0;position:fixed;z-index:2}.debug-grid{display:none;height:100%;mix-blend-mode:multiply;opacity:.5;position:fixed;top:0;width:100%}.debug-grid .grid{--name:"small: 0 to 667px";--color-bg-cols:#e9d6f2;height:100%;position:relative}.debug-grid .grid:before{color:color-mix(in hsl,var(--color-bg-cols),#000 20%);content:var(--name);font-size:clamp(.5rem,4vw,3rem);height:100%;left:.5vw;position:absolute;text-align:center;text-orientation:mixed;top:50%;transform:translateY(-50%);transition:color .3s linear .2s;width:100%;writing-mode:vertical-rl}.debug-grid .grid .cols{background-color:var(--color-bg-cols);display:none;grid-column:span 1;height:100%;transition:background-color .3s linear .2s}.debug-grid .grid .cols:nth-child(-n+4){display:block}@media (width > 667px){.debug-grid .grid{--name:"medium: 668px to 1023px";--color-bg-cols:#d6d9f2}.debug-grid .grid .cols:nth-child(-n+8){display:block}}@media (width > 1023px){.debug-grid .grid{--name:"large: 1024px to 1279px";--color-bg-cols:#c1ecec}.debug-grid .grid .cols:nth-child(-n+12){display:block}}@media (width > 1279px){.debug-grid .grid{--name:"extra large: 1280px to 1599px";--color-bg-cols:#c2ecc2}}@media (width > 1599px){.debug-grid .grid{--name:"extra large: 1600px to infinity";--color-bg-cols:#ffd1d3}}body:has([name=debuggrid]:checked) .debug-grid{display:block}
+.af-card-checkbox-option:has([name=debuggrid]){bottom:0;height:auto;left:0;position:fixed;z-index:2}.debug-grid{display:none;height:100%;mix-blend-mode:multiply;opacity:.5;position:fixed;top:0;width:100%}.debug-grid .grid{--name:"small: 0 to 667px";--color-bg-cols:#e9d6f2;height:100%;position:relative}.debug-grid .grid:before{color:color-mix(in hsl,var(--color-bg-cols),#000 20%);content:var(--name);font-size:clamp(.5rem,4vw,3rem);height:100%;left:.5vw;position:absolute;text-align:center;text-orientation:mixed;top:50%;transform:translateY(-50%);transition:color .3s linear .2s;width:100%;writing-mode:vertical-rl}.debug-grid .grid .cols{background-color:var(--color-bg-cols);display:none;grid-column:span 1;height:100%;transition:background-color .3s linear .2s}.debug-grid .grid .cols:nth-child(-n+4){display:block}@media (width > 667px){.debug-grid .grid{--name:"medium: 668px to 1023px";--color-bg-cols:#d6d9f2}.debug-grid .grid .cols:nth-child(-n+8){display:block}}@media (width > 1023px){.debug-grid .grid{--name:"large: 1024px to 1279px";--color-bg-cols:#c1ecec}.debug-grid .grid .cols:nth-child(-n+12){display:block}}@media (width > 1279px){.debug-grid .grid{--name:"extra large: 1280px to 1599px";--color-bg-cols:#c2ecc2}}@media (width > 1599px){.debug-grid .grid{--name:"extra large: 1600px to infinity";--color-bg-cols:#ffd1d3}}body:has([name=debuggrid]:checked) .debug-grid{display:block}

package/dist/Grid/DebugGrid.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/Grid/DebugGrid.scss%23sass","../../src/Grid/DebugGrid.scss"],"names":[],"mappings":"AAEA,yDAGE,QAAA,CAEA,WAAA,CADA,MAAA,CAHA,cAAA,CCDF,SAIA,CDIA,YAGE,YAAA,CAEA,WAAA,CAEA,uBAAA,CADA,UAAA,CALA,cAAA,CCDF,KAAA,CDIE,UCEF,CDGE,kBACE,0BAAA,CACA,uBAAA,CAGA,WAAA,CADA,iBCDJ,CDII,yBAUE,qDAAA,CAGA,mBAAA,CAPA,+BAAA,CADA,WAAA,CAFA,SAAA,CAFA,iBAAA,CAMA,iBAAA,CACA,sBAAA,CANA,OAAA,CASA,0BAAA,CACA,+BAAA,CARA,UAAA,CAKA,wBCEN,CDKI,wBAIE,qCAAA,CAHA,YAAA,CAEA,kBAAA,CADA,WAAA,CAGA,0CCHN,CDKM,wCACE,aCHR,CDOI,uBAnCF,kBAoCI,gCAAA,CACA,uBCJJ,CDMI,wCACE,aCJN,CACF,CDOI,wBA5CF,kBA6CI,gCAAA,CACA,uBCJJ,CDMI,yCACE,aCJN,CACF,CDOI,wBArDF,kBAsDI,sCAAA,CACA,uBCJJ,CACF,CDMI,wBA1DF,kBA2DI,wCAAA,CACA,uBCHJ,CACF,CDSI,+CACE,aCNN","file":"DebugGrid.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-card-checkbox__container:has(label [name=\"debuggrid\"]) {\n  position: fixed;\n  z-index: 2;\n  bottom: 0;\n  left: 0;\n  height: auto;\n}\n\n.debug-grid {\n  position: fixed;\n  top: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n  mix-blend-mode: multiply;\n\n  .grid {\n    --name: \"small: 0 to 667px\";\n    --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n    position: relative;\n    height: 100%;\n\n    &::before {\n      position: absolute;\n      top: 50%;\n      left: 0.5vw;\n      width: 100%;\n      height: 100%;\n      font-size: clamp(0.5rem, 4vw, 3rem);\n      text-align: center;\n      text-orientation: mixed;\n      writing-mode: vertical-rl;\n      color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n      transform: translate(0, -50%);\n      transition: color 300ms linear 200ms;\n      content: var(--name);\n    }\n\n    .cols {\n      display: none;\n      height: 100%;\n      grid-column: span 1;\n      background-color: var(--color-bg-cols);\n      transition: background-color 300ms linear 200ms;\n\n      &:nth-child(-n + 4) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      --name: \"medium: 668px to 1023px\";\n      --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n      .cols:nth-child(-n + 8) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      --name: \"large: 1024px to 1279px\";\n      --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n      .cols:nth-child(-n + 12) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-lg}) {\n      --name: \"extra large: 1280px to 1599px\";\n      --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n    }\n\n    @media (width > #{breakpoints.$breakpoint-xl}) {\n      --name: \"extra large: 1600px to infinity\";\n      --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n    }\n  }\n}\n\nbody {\n  &:has([name=\"debuggrid\"]:checked) {\n    .debug-grid {\n      display: block;\n    }\n  }\n}\n","@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-card-checkbox__container:has(label [name=\"debuggrid\"]) {\n  position: fixed;\n  z-index: 2;\n  bottom: 0;\n  left: 0;\n  height: auto;\n}\n\n.debug-grid {\n  position: fixed;\n  top: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n  mix-blend-mode: multiply;\n\n  .grid {\n    --name: \"small: 0 to 667px\";\n    --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n    position: relative;\n    height: 100%;\n\n    &::before {\n      position: absolute;\n      top: 50%;\n      left: 0.5vw;\n      width: 100%;\n      height: 100%;\n      font-size: clamp(0.5rem, 4vw, 3rem);\n      text-align: center;\n      text-orientation: mixed;\n      writing-mode: vertical-rl;\n      color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n      transform: translate(0, -50%);\n      transition: color 300ms linear 200ms;\n      content: var(--name);\n    }\n\n    .cols {\n      display: none;\n      height: 100%;\n      grid-column: span 1;\n      background-color: var(--color-bg-cols);\n      transition: background-color 300ms linear 200ms;\n\n      &:nth-child(-n + 4) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      --name: \"medium: 668px to 1023px\";\n      --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n      .cols:nth-child(-n + 8) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      --name: \"large: 1024px to 1279px\";\n      --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n      .cols:nth-child(-n + 12) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-lg}) {\n      --name: \"extra large: 1280px to 1599px\";\n      --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n    }\n\n    @media (width > #{breakpoints.$breakpoint-xl}) {\n      --name: \"extra large: 1600px to infinity\";\n      --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n    }\n  }\n}\n\nbody {\n  &:has([name=\"debuggrid\"]:checked) {\n    .debug-grid {\n      display: block;\n    }\n  }\n}\n"]}
+{"version":3,"sources":["../../src/Grid/DebugGrid.scss%23sass","../../src/Grid/DebugGrid.scss"],"names":[],"mappings":"AAEA,+CAGE,QAAA,CAEA,WAAA,CADA,MAAA,CAHA,cAAA,CCDF,SAIA,CDIA,YAGE,YAAA,CAEA,WAAA,CAEA,uBAAA,CADA,UAAA,CALA,cAAA,CCDF,KAAA,CDIE,UCEF,CDGE,kBACE,0BAAA,CACA,uBAAA,CAGA,WAAA,CADA,iBCDJ,CDII,yBAUE,qDAAA,CAGA,mBAAA,CAPA,+BAAA,CADA,WAAA,CAFA,SAAA,CAFA,iBAAA,CAMA,iBAAA,CACA,sBAAA,CANA,OAAA,CASA,0BAAA,CACA,+BAAA,CARA,UAAA,CAKA,wBCEN,CDKI,wBAIE,qCAAA,CAHA,YAAA,CAEA,kBAAA,CADA,WAAA,CAGA,0CCHN,CDKM,wCACE,aCHR,CDOI,uBAnCF,kBAoCI,gCAAA,CACA,uBCJJ,CDMI,wCACE,aCJN,CACF,CDOI,wBA5CF,kBA6CI,gCAAA,CACA,uBCJJ,CDMI,yCACE,aCJN,CACF,CDOI,wBArDF,kBAsDI,sCAAA,CACA,uBCJJ,CACF,CDMI,wBA1DF,kBA2DI,wCAAA,CACA,uBCHJ,CACF,CDSI,+CACE,aCNN","file":"DebugGrid.css","sourcesContent":["@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-card-checkbox-option:has([name=\"debuggrid\"]) {\n  position: fixed;\n  z-index: 2;\n  bottom: 0;\n  left: 0;\n  height: auto;\n}\n\n.debug-grid {\n  position: fixed;\n  top: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n  mix-blend-mode: multiply;\n\n  .grid {\n    --name: \"small: 0 to 667px\";\n    --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n    position: relative;\n    height: 100%;\n\n    &::before {\n      position: absolute;\n      top: 50%;\n      left: 0.5vw;\n      width: 100%;\n      height: 100%;\n      font-size: clamp(0.5rem, 4vw, 3rem);\n      text-align: center;\n      text-orientation: mixed;\n      writing-mode: vertical-rl;\n      color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n      transform: translate(0, -50%);\n      transition: color 300ms linear 200ms;\n      content: var(--name);\n    }\n\n    .cols {\n      display: none;\n      height: 100%;\n      grid-column: span 1;\n      background-color: var(--color-bg-cols);\n      transition: background-color 300ms linear 200ms;\n\n      &:nth-child(-n + 4) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      --name: \"medium: 668px to 1023px\";\n      --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n      .cols:nth-child(-n + 8) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      --name: \"large: 1024px to 1279px\";\n      --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n      .cols:nth-child(-n + 12) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-lg}) {\n      --name: \"extra large: 1280px to 1599px\";\n      --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n    }\n\n    @media (width > #{breakpoints.$breakpoint-xl}) {\n      --name: \"extra large: 1600px to infinity\";\n      --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n    }\n  }\n}\n\nbody {\n  &:has([name=\"debuggrid\"]:checked) {\n    .debug-grid {\n      display: block;\n    }\n  }\n}\n","@use \"../common/breakpoints.scss\" as breakpoints;\n\n.af-card-checkbox-option:has([name=\"debuggrid\"]) {\n  position: fixed;\n  z-index: 2;\n  bottom: 0;\n  left: 0;\n  height: auto;\n}\n\n.debug-grid {\n  position: fixed;\n  top: 0;\n  display: none;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n  mix-blend-mode: multiply;\n\n  .grid {\n    --name: \"small: 0 to 667px\";\n    --color-bg-cols: hsl(280.71deg, 51.85%, 89.41%);\n\n    position: relative;\n    height: 100%;\n\n    &::before {\n      position: absolute;\n      top: 50%;\n      left: 0.5vw;\n      width: 100%;\n      height: 100%;\n      font-size: clamp(0.5rem, 4vw, 3rem);\n      text-align: center;\n      text-orientation: mixed;\n      writing-mode: vertical-rl;\n      color: color-mix(in hsl, var(--color-bg-cols), rgb(0, 0, 0) 20%);\n      transform: translate(0, -50%);\n      transition: color 300ms linear 200ms;\n      content: var(--name);\n    }\n\n    .cols {\n      display: none;\n      height: 100%;\n      grid-column: span 1;\n      background-color: var(--color-bg-cols);\n      transition: background-color 300ms linear 200ms;\n\n      &:nth-child(-n + 4) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-sm}) {\n      --name: \"medium: 668px to 1023px\";\n      --color-bg-cols: hsl(233.57deg, 51.85%, 89.41%);\n\n      .cols:nth-child(-n + 8) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-md}) {\n      --name: \"large: 1024px to 1279px\";\n      --color-bg-cols: hsl(180deg, 53.09%, 84.12%);\n\n      .cols:nth-child(-n + 12) {\n        display: block;\n      }\n    }\n\n    @media (width > #{breakpoints.$breakpoint-lg}) {\n      --name: \"extra large: 1280px to 1599px\";\n      --color-bg-cols: hsl(120deg, 52.5%, 84.31%);\n    }\n\n    @media (width > #{breakpoints.$breakpoint-xl}) {\n      --name: \"extra large: 1600px to infinity\";\n      --color-bg-cols: hsl(357.39deg, 100%, 90.98%);\n    }\n  }\n}\n\nbody {\n  &:has([name=\"debuggrid\"]:checked) {\n    .debug-grid {\n      display: block;\n    }\n  }\n}\n"]}

package/dist/Grid/DebugGrid.scss

@@ -1,6 +1,6 @@
 @use "../common/breakpoints.scss" as breakpoints;
 
-.af-card-checkbox__container:has(label [name="debuggrid"]) {
+.af-card-checkbox-option:has([name="debuggrid"]) {
   position: fixed;
   z-index: 2;
   bottom: 0;