@baloise/ds-core 19.2.0 → 19.3.0-nightly.20250630

package/dist/esm/bal-carousel_2.entry.js

@@ -1,29 +1,24 @@
-import { h, r as registerInstance, c as createEvent, H as Host, g as getElement } from './index-8d2a7ce7.js';
-import { _ as __decorate, a as __metadata } from './tslib.es6-654e2c24.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
-import { a as ariaBooleanToString } from './aria-ea150568.js';
-import { t as toKebabCase, S as SwiperUtil } from './swiper.util-5f92ac1c.js';
-import { s as stopEventBubbling } from './form-input-263e6f5b.js';
-import { L as ListenToBreakpoints } from './breakpoints.decorator-133a72bf.js';
-import { L as ListenToMutation } from './mutation.decorator-e915d053.js';
-import { L as ListenToSwipe } from './swipe.decorator-902c4936.js';
-import { L as ListenToResize } from './resize.decorator-08f6286b.js';
-import { b as balBreakpoints } from './breakpoints.subject-76dd4b56.js';
-import { d as defaultConfig } from './config.default-8e11a860.js';
-import { L as ListenToVisibility } from './visibility.decorator-ee4b6682.js';
-import { L as ListenToConfig } from './config.decorator-42dba864.js';
-import { D as DOMPurify } from './purify-8cb49f16.js';
-import { i as inheritAttributes } from './attributes-a3e70948.js';
-import { m as rOnLoad, b as waitAfterFramePaint } from './helpers-94c3fbac.js';
-import './keyboard.helpers-159e517d.js';
-import './listener-04842ae9.js';
-import './browser-a8073d92.js';
-import './swipe.subject-fbdb665a.js';
-import './device-8c6d2881.js';
-import './tokens.esm-dc280d50.js';
-import './log-dfd1c19f.js';
-import './config.utils-cd529084.js';
-import './_commonjsHelpers-1c8beb5f.js';
+import { M as h, H as registerInstance, P as createEvent, f as defaultConfig, N as Host, O as getElement, K as rOnLoad, x as waitAfterFramePaint } from './index-DgPiq0y0.js';
+import { _ as __decorate, a as __metadata } from './tslib.es6-dfXERft2.js';
+import { B as BEM } from './bem-ByiN-QjD.js';
+import { a as ariaBooleanToString } from './aria-DBsOHTWj.js';
+import { t as toKebabCase, S as SwiperUtil } from './swiper.util-Dy8CWRH7.js';
+import { s as stopEventBubbling } from './form-input-DyU_I7Nf.js';
+import { b as balBreakpoints } from './breakpoints.subject-D4ei1woI.js';
+import { L as ListenToBreakpoints } from './breakpoints.decorator-D65T7jyo.js';
+import { L as ListenToSwipe } from './swipe.decorator-LAK4VYA0.js';
+import { L as ListenToConfig } from './config.decorator-g255X8DE.js';
+import { L as ListenToMutation } from './mutation.decorator-CFRV3n5T.js';
+import './window-resize.subject-DYiVCopc.js';
+import { L as ListenToResize } from './resize.decorator-CdfVlqf4.js';
+import { L as ListenToVisibility } from './visibility.decorator-B1BbAwZf.js';
+import { p as purify } from './purify.es-B3Q-Lii3.js';
+import { i as inheritAttributes } from './attributes-C4sZQbkT.js';
+import './keyboard.helpers-D1VPLQ5z.js';
+import './device-dF5vUTps.js';
+import './listener-BRXdr5Mk.js';
+import './tokens.esm-nz7BJ7x8.js';
+import './swipe.subject-2eHkUcpg.js';
 
 const TabControl = ({ value, items, containerId, onControlChange }) => {
     const block = BEM.block('carousel');
@@ -39,32 +34,80 @@ const TabControl = ({ value, items, containerId, onControlChange }) => {
 };
 
 const balCarouselCss = ":root{--bal-carousel-inner-border-background:var(--bal-color-border);--bal-carousel-inner-border-background-inverted:var(--bal-color-border-primary-light);--bal-carousel-inner-shadow-left-background-before:var(--bal-color-white);--bal-carousel-inner-shadow-right-background-after:var(--bal-color-white);--bal-carousel-inner-shadow-left-background-inverted-before:var(--bal-color-primary);--bal-carousel-inner-shadow-right-background-inverted-after:var(--bal-color-primary);--bal-carousel-product-item-button-background:var(--bal-color-white);--bal-carousel-product-item-button-background-green:var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-hover:var(--bal-color-green-1);--bal-carousel-product-item-button-background-green-active:var(--bal-color-green-2);--bal-carousel-product-item-button-background-red:var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-hover:var(--bal-color-red-1);--bal-carousel-product-item-button-background-red-active:var(--bal-color-red-2);--bal-carousel-product-item-button-background-yellow:var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-hover:var(--bal-color-yellow-1);--bal-carousel-product-item-button-background-yellow-active:var(--bal-color-yellow-2);--bal-carousel-product-item-button-background-purple:var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-hover:var(--bal-color-purple-1);--bal-carousel-product-item-button-background-purple-active:var(--bal-color-purple-2);--bal-carousel-inner-border-radius:var(--bal-radius-rounded);--bal-carousel-image-border-radius:var(--bal-radius-normal);--bal-carousel-product-item-button-border-radius:var(--bal-radius-large);--bal-carousel-product-item-button-label-text-color:var(--bal-color-text-primary);--bal-carousel-sticky-top:0}.bal-swiper{position:relative;display:block}.bal-swiper__inner{display:block;position:relative;margin-left:auto;margin-right:auto;overflow:clip;list-style:none;padding:0;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-overflow-scrolling:touch}.bal-swiper__inner--items-per-view-auto .bal-carousel__item{width:auto}.bal-swiper__inner--items-per-view-1 .bal-carousel__item{width:100%}.bal-swiper__inner--items-per-view-2 .bal-carousel__item{width:50%}.bal-swiper__inner--items-per-view-3 .bal-carousel__item{width:33.3333%}.bal-swiper__inner--items-per-view-4 .bal-carousel__item{width:25%}.bal-swiper__container{position:relative;max-width:100%;width:100%;height:100%;display:-ms-flexbox;display:flex;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transition-duration:0ms;transition-duration:0ms;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-swiper__container--gap-none{gap:0}.bal-swiper__container--gap-normal{gap:1rem}.bal-swiper__container--gap-medium{gap:1.5rem}.bal-swiper__controls{width:100%}.bal-swiper__controls--dots{position:relative}@media screen and (max-width: 768px){.bal-swiper__controls--large{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;gap:2rem;margin-top:1rem}}@media screen and (min-width: 769px),print{.bal-swiper__controls--large{position:absolute;top:calc(50% - 1.5rem)}.bal-swiper__controls--large .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--large .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--large .bal-swiper__controls__button--right{right:0}}.bal-swiper__controls__button--hidden{display:none !important;visibility:none !important}.bal-swiper__controls--small{position:absolute;top:calc(50% - 1rem)}.bal-swiper__controls--small .bal-swiper__controls__button{position:absolute;z-index:7}.bal-swiper__controls--small .bal-swiper__controls__button--left{left:0}.bal-swiper__controls--small .bal-swiper__controls__button--right{right:0}.bal-swiper__controls--small .bal-swiper__controls__button--hidden{display:none !important;visibility:hidden !important}.bal-swiper__inner--shadow-left::before,.bal-swiper__inner--shadow-right::after{position:absolute;width:3rem;height:100%;top:0}.bal-swiper__inner--shadow-left::before{content:\"\";left:0;background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right::after{content:\"\";right:0;background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-after) 50%)}.bal-swiper__inner--shadow-left.bal-swiper__inner--inverted::before{background:-webkit-gradient(linear, left top, right top, color-stop(50%, var(--bal-carousel-inner-shadow-left-background-inverted-before)), to(rgba(255, 255, 255, 0)));background:linear-gradient(90deg, var(--bal-carousel-inner-shadow-left-background-inverted-before) 50%, rgba(255, 255, 255, 0) 100%)}.bal-swiper__inner--shadow-right.bal-swiper__inner--inverted::after{background:-webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, var(--bal-carousel-inner-shadow-right-background-inverted-after)));background:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--full-height{height:100%}.bal-carousel--full-height .bal-carousel__item{height:auto}.bal-carousel__inner--full-height{height:100%}.bal-carousel__inner__container--border{padding-bottom:var(--bal-border-width-normal)}.bal-carousel__inner__container__border{position:absolute;background:var(--bal-carousel-inner-border-background);border-radius:var(--bal-carousel-inner-border-radius);height:var(--bal-border-width-normal);width:100%;bottom:0;-webkit-transform:translate3d(0px, 0px, 0px);transform:translate3d(0px, 0px, 0px)}.bal-carousel__inner__container__border--inverted{background:var(--bal-carousel-inner-border-background-inverted)}.bal-carousel__item{-webkit-box-sizing:border-box;box-sizing:border-box;text-align:center;font-size:var(--bal-text-size-large);min-height:2rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-ms-flex-negative:0;flex-shrink:0;width:100%;height:100%;position:relative;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;round:linear-gradient(90deg, rgba(255, 255, 255, 0), var(--bal-carousel-inner-shadow-right-background-inverted-after) 50%)}.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:2.5rem}}@media screen and (min-width: 1024px){.bal-carousel--card .bal-carousel__inner--shadow-left::before,.bal-carousel--card .bal-carousel__inner--shadow-right::after{width:3rem}}.bal-carousel--card{margin-left:-1rem;margin-right:-1rem}@media screen and (min-width: 769px),print{.bal-carousel--card{margin-left:-2.5rem;margin-right:-2.5rem}}.bal-carousel--card .bal-carousel__controls{padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__controls{padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--card .bal-carousel__item{width:100%;padding-top:1rem;padding-bottom:1rem;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 769px),print{.bal-carousel--card .bal-carousel__item{width:100%;padding-top:2.5rem;padding-bottom:2.5rem;padding-left:2.5rem;padding-right:2.5rem}}.bal-carousel--controls-sticky .bal-carousel__controls--tabs{position:-webkit-sticky;position:sticky;top:var(--bal-carousel-sticky-top);z-index:var(--bal-z-index-sticky)}.bal-carousel__controls--tabs .bal-card{padding:0}.bal-carousel__controls--tabs .bal-card-content{padding:.5rem !important;gap:.5rem;display:-ms-flexbox;display:flex}.bal-carousel__controls--tabs .bal-card-content .bal-button{-ms-flex:1;flex:1}.bal-carousel__controls--tabs .bal-card-content .bal-button .button{padding:.5rem !important}.bal-carousel--image .bal-carousel__inner{border-radius:var(--bal-carousel-image-border-radius)}.bal-carousel--image .bal-carousel__inner--is-1by1{padding-top:100%}.bal-carousel--image .bal-carousel__inner--is-16by9{padding-top:56.25%}.bal-carousel--image .bal-carousel__inner--is-3by2{padding-top:66.66%}.bal-carousel--image .bal-carousel__inner--is-4by3{padding-top:75%}.bal-carousel--image .bal-carousel__inner__container{position:absolute;top:0;left:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;height:100%}.bal-carousel--image .bal-carousel__item{position:relative;-ms-flex:0 0 100%;flex:0 0 100%}.bal-carousel--image .bal-carousel__item>img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-drag:none;user-zoom:fixed}.bal-carousel--product .bal-carousel__inner__container{gap:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding-top:1rem;padding-bottom:1rem}@media screen and (min-width: 769px),print{.bal-carousel--product .bal-carousel__inner__container{padding-top:1.5rem;padding-bottom:1.5rem}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__inner__container{padding-top:2rem;padding-bottom:2rem}}.bal-carousel--product .bal-carousel__item{display:-ms-flexbox;display:flex;min-width:10rem;max-width:10rem;height:11rem;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item img{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;user-zoom:fixed;user-drag:none}.bal-carousel--product .bal-carousel__item__button{display:-ms-flexbox;display:flex;-ms-flex:1;flex:1;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;gap:1rem;border-radius:var(--bal-carousel-product-item-button-border-radius);padding:var(--bal-text-size-x-small);border:none;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;outline:none;background:var(--bal-carousel-product-item-button-background)}@media (hover: hover)and (pointer: fine){.bal-carousel--product .bal-carousel__item__button:focus-visible:not(:active){-webkit-box-shadow:var(--bal-focus-shadow) !important;box-shadow:var(--bal-focus-shadow) !important}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-green{background:var(--bal-carousel-product-item-button-background-green)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-green:hover{background:var(--bal-carousel-product-item-button-background-green-hover)}.bal-carousel--product .bal-carousel__item__button--color-green:active{background:var(--bal-carousel-product-item-button-background-green-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-red{background:var(--bal-carousel-product-item-button-background-red)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-red:hover{background:var(--bal-carousel-product-item-button-background-red-hover)}.bal-carousel--product .bal-carousel__item__button--color-red:active{background:var(--bal-carousel-product-item-button-background-red-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-yellow{background:var(--bal-carousel-product-item-button-background-yellow)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-yellow:hover{background:var(--bal-carousel-product-item-button-background-yellow-hover)}.bal-carousel--product .bal-carousel__item__button--color-yellow:active{background:var(--bal-carousel-product-item-button-background-yellow-active)}}@media screen and (max-width: 1023px){.bal-carousel--product .bal-carousel__item__button--color-purple{background:var(--bal-carousel-product-item-button-background-purple)}}@media screen and (min-width: 1024px){.bal-carousel--product .bal-carousel__item__button--color-purple:hover{background:var(--bal-carousel-product-item-button-background-purple-hover)}.bal-carousel--product .bal-carousel__item__button--color-purple:active{background:var(--bal-carousel-product-item-button-background-purple-active)}}.bal-carousel--product .bal-carousel__item__button__image{width:5rem;height:5rem;pointer-events:none}.bal-carousel--product .bal-carousel__item__button__label{font-weight:var(--bal-font-weight-bold);color:var(--bal-carousel-product-item-button-label-text-color);font-size:var(--bal-text-size-normal);-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto;height:3.5rem;overflow:hidden;line-height:1.15rem;word-break:break-word}";
-const BalCarouselStyle0 = balCarouselCss;
 
 const Carousel = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.balChange = createEvent(this, "balChange", 7);
+        this.balChange = createEvent(this, "balChange");
         this.swiper = new SwiperUtil();
         this.swiperIsLastSlideVisible = false;
-        this.mutationObserverActive = true;
         this.hasAnimated = false;
         this.isMobile = balBreakpoints.isMobile;
         this.language = defaultConfig.language;
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * Defines the active slide index.
+         */
         this.value = 0;
+        /**
+         * When how many slides are moved when going forward or backward.
+         */
         this.steps = 1;
+        /**
+         * Defines how many slides are visible in the container for the user.
+         * `auto` will use the size of the actual item content
+         */
         this.itemsPerView = 1;
+        /**
+         * Defines the layout of the navigation controls.
+         */
         this.controls = 'none';
+        /**
+         * Defines the layout of the navigation controls.
+         */
         this.space = 'none';
+        /**
+         * @deprecated
+         * Defines the role of the carousel.
+         */
         this.htmlRole = 'list';
+        /**
+         * If `true` items move under the controls, instead of having a gap
+         */
         this.controlsOverflow = false;
+        /**
+         * If `true` the carousel can be used on dark background
+         */
         this.inverted = false;
+        /**
+         * If `true` the carousel uses the full height
+         */
         this.fullHeight = false;
+        /**
+         * Defines the image aspect ratio.
+         * Should be combined with the interface `product`
+         */
         this.aspectRatio = '16by9';
+        /**
+         * Defines special looks.
+         */
         this.interface = '';
+        /**
+         * If `true` the controls will be sticky to the top.
+         */
         this.controlsSticky = false;
+        /**
+         * If `true` vertical scrolling on mobile is enabled.
+         */
         this.scrollY = true;
+        /**
+         * If `true` a light border is shown at the bottom.
+         */
         this.border = false;
+        this.mutationObserverActive = true;
     }
     onValueChange() {
         this.swiper.index = this.value;
@@ -224,18 +267,51 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", Promise)
 ], Carousel.prototype, "configChanged", null);
-Carousel.style = BalCarouselStyle0;
+Carousel.style = balCarouselCss;
 
 const CarouselItem = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
-        this.balNavigate = createEvent(this, "balNavigate", 7);
-        this.balFocus = createEvent(this, "balFocus", 7);
-        this.balBlur = createEvent(this, "balBlur", 7);
+        this.balNavigate = createEvent(this, "balNavigate");
+        this.balFocus = createEvent(this, "balFocus");
+        this.balBlur = createEvent(this, "balBlur");
         this.imageInheritAttributes = {};
+        this.isOnLoadEventDone = false;
+        this.containerId = '';
+        this.svgContent = '';
+        /**
+         * Label of the slide which will be used for pagination tabs
+         */
+        this.label = '';
+        /**
+         * Svg content.
+         */
+        this.svg = '';
+        /**
+         * @deprecated
+         * Defines the role of the carousel.
+         */
+        this.htmlRole = 'listitem';
+        /**
+         * The type of button.
+         */
+        this.elementType = 'button';
+        /**
+         * The name of the button, which is submitted with the form data.
+         */
+        this.name = undefined;
+        /**
+         * The value of the button, which is submitted with the form data.
+         */
+        this.value = undefined;
+        /**
+         * Specifies where to display the linked URL.
+         * Only applies when an `href` is provided.
+         */
+        this.target = '_self';
         this.generateSvgContent = () => {
             if (this.svg !== undefined && this.svg.length > 0) {
-                this.svgContent = DOMPurify.sanitize(this.svg) || '';
+                this.svgContent = purify.sanitize(this.svg) || '';
             }
         };
         this.onClick = (ev) => {
@@ -249,21 +325,6 @@ const CarouselItem = class {
         this.onBlur = () => {
             this.balBlur.emit();
         };
-        this.isOnLoadEventDone = false;
-        this.containerId = '';
-        this.svgContent = '';
-        this.src = undefined;
-        this.label = '';
-        this.svg = '';
-        this.htmlRole = 'listitem';
-        this.elementType = 'button';
-        this.name = undefined;
-        this.value = undefined;
-        this.href = undefined;
-        this.target = '_self';
-        this.rel = undefined;
-        this.download = undefined;
-        this.color = undefined;
     }
     svgChanged() {
         this.generateSvgContent();

package/dist/esm/bal-check.entry.js

@@ -1,17 +1,38 @@
-import { r as registerInstance, h, H as Host } from './index-8d2a7ce7.js';
-import { B as BEM } from './bem-8c7d2eb0.js';
+import { H as registerInstance, M as h, N as Host } from './index-DgPiq0y0.js';
+import { B as BEM } from './bem-ByiN-QjD.js';
 
 const balCheckCss = ":root{--bal-check-size:1.5rem;--bal-check-border-width:2px;--bal-check-border-radius:var(--bal-radius-normal);--bal-check-color-inverted:var(--bal-color-white);--bal-check-border-color:var(--bal-color-primary);--bal-check-border-color-hovered:var(--bal-color-border-primary-hovered);--bal-check-border-color-pressed:var(--bal-color-border-primary-pressed);--bal-check-border-color-checked:var(--bal-color-primary);--bal-check-border-color-checked-hovered:var(--bal-color-border-primary-hovered);--bal-check-border-color-checked-pressed:var(--bal-color-border-primary-pressed);--bal-check-background:transparent;--bal-check-background-hovered:var(--bal-color-grey-2);--bal-check-background-pressed:var(--bal-color-grey-2);--bal-check-background-checked:var(--bal-color-primary);--bal-check-background-checked-hovered:var(--bal-color-border-primary-hovered);--bal-check-background-checked-pressed:var(--bal-color-border-primary-pressed);--bal-check-border-color-invalid:var(--bal-color-border-danger);--bal-check-border-color-invalid-hovered:var(--bal-color-border-danger-hovered);--bal-check-border-color-invalid-pressed:var(--bal-color-border-danger-pressed);--bal-check-border-color-invalid-checked:var(--bal-color-border-danger);--bal-check-border-color-invalid-checked-hovered:var(--bal-color-border-danger-hovered);--bal-check-border-color-invalid-checked-pressed:var(--bal-color-border-danger-pressed);--bal-check-background-invalid:transparent;--bal-check-background-invalid-hovered:var(--bal-color-danger-1);--bal-check-background-invalid-pressed:var(--bal-color-danger-1);--bal-check-background-invalid-checked:var(--bal-color-border-danger);--bal-check-background-invalid-checked-hovered:var(--bal-color-border-danger-hovered);--bal-check-background-invalid-checked-pressed:var(--bal-color-border-danger-pressed);--bal-check-background-disabled:var(--bal-color-grey-2);--bal-check-border-color-disabled:var(--bal-color-border-grey-dark);--bal-check-background-checked-disabled:var(--bal-color-border-grey-dark);--bal-check-border-color-checked-disabled:var(--bal-color-border-grey-dark)}.bal-check{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:var(--bal-check-size);max-width:var(--bal-check-size);height:var(--bal-check-size);max-height:var(--bal-check-size);border-radius:var(--bal-check-border-radius);overflow:hidden;border:var(--bal-check-border-width) solid var(--bal-check-border-color);background-color:var(--bal-check-background)}@media (hover: hover)and (pointer: fine){.bal-check--hovered,.bal-check:hover{background:var(--bal-check-background-hovered);border-color:var(--bal-check-border-color-hovered)}}.bal-check--pressed,.bal-check:active{background:var(--bal-check-background-pressed);border-color:var(--bal-check-border-color-pressed)}.bal-check bal-icon{opacity:0}.bal-check--checked{background-color:var(--bal-check-background-checked);border-color:var(--bal-check-border-color-checked)}.bal-check--checked bal-icon{opacity:1}@media (hover: hover)and (pointer: fine){.bal-check--checked.bal-check--hovered,.bal-check--checked:hover{background:var(--bal-check-background-checked-hovered);border-color:var(--bal-check-border-color-checked-hovered)}}.bal-check--checked.bal-check--pressed,.bal-check--checked:active{background:var(--bal-check-background-checked-pressed);border-color:var(--bal-check-border-color-checked-pressed)}.bal-check--checked.bal-check--inverted{border-color:var(--bal-check-color-inverted)}.bal-check--invalid{border-color:var(--bal-check-border-color-invalid);background-color:var(--bal-check-background-invalid)}@media (hover: hover)and (pointer: fine){.bal-check--invalid.bal-check--hovered,.bal-check--invalid:hover{background-color:var(--bal-check-background-invalid-hovered);border-color:var(--bal-check-border-color-invalid-hovered)}}.bal-check--invalid.bal-check--pressed,.bal-check--invalid:active{background-color:var(--bal-check-background-invalid-pressed);border-color:var(--bal-check-border-color-invalid-pressed)}.bal-check--invalid.bal-check--checked{border-color:var(--bal-check-border-color-invalid);background:var(--bal-check-background-invalid-checked)}@media (hover: hover)and (pointer: fine){.bal-check--invalid.bal-check--checked.bal-check--hovered,.bal-check--invalid.bal-check--checked:hover{background-color:var(--bal-check-background-invalid-checked-hovered);border-color:var(--bal-check-border-color-invalid-hovered)}}.bal-check--invalid.bal-check--checked.bal-check--pressed,.bal-check--invalid.bal-check--checked:active{background-color:var(--bal-check-background-invalid-checked-pressed);border-color:var(--bal-check-border-color-invalid-pressed)}.bal-check--invalid.bal-check--checked.bal-check--inverted{border-color:var(--bal-check-color-inverted)}.bal-check--disabled{cursor:default !important;background:var(--bal-check-background-disabled) !important;border-color:var(--bal-check-border-color-disabled) !important}.bal-check--disabled.bal-check--checked{background-color:var(--bal-check-background-checked-disabled) !important;border-color:var(--bal-check-border-color-checked-disabled) !important}.bal-check--disabled.bal-check--checked.bal-check--inverted{border-color:var(--bal-check-color-inverted) !important}";
-const BalCheckStyle0 = balCheckCss;
 
 const Check = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        /**
+         * PUBLIC PROPERTY API
+         * ------------------------------------------------------
+         */
+        /**
+         * If `true`, the checkbox is selected.
+         */
         this.checked = false;
+        /**
+         * If `true` the component gets a invalid red style.
+         */
         this.invalid = undefined;
+        /**
+         * If `true`, the element is not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants.
+         */
         this.disabled = undefined;
+        /**
+         * If `true`, the checkbox is inverted and works on dark backgrounds.
+         */
         this.inverted = undefined;
+        /**
+         * @internal
+         */
         this.hovered = false;
+        /**
+         * @internal
+         */
         this.pressed = false;
     }
     /**
@@ -27,6 +48,6 @@ const Check = class {
         return (h(Host, { key: 'c995184b2f4adb6f6de85e17c13ea45f992c88aa', class: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, block.class()), block.modifier('checked').class(checked)), block.modifier('disabled').class(disabled)), block.modifier('invalid').class(invalid)), block.modifier('inverted').class(inverted)), block.modifier('hovered').class(this.hovered)), block.modifier('pressed').class(this.pressed)) }, h("bal-icon", { key: 'c93f453451f95b8ac79b25a0e9e71b6baa4e1ac9', name: "check", color: "white", colorHovered: "white", colorPressed: "white", size: "small", "aria-hidden": "true", hovered: this.hovered, pressed: this.pressed })));
     }
 };
-Check.style = BalCheckStyle0;
+Check.style = balCheckCss;
 
 export { Check as bal_check };