@koobiq/components 21.0.0 → 21.1.0

package/file-upload/_file-upload-theme.scss

@@ -1,19 +1,7 @@
 @use '../core/styles/common/tokens';
 
-@mixin kbq-file-upload-theme() {
-    .kbq-file-upload__hint {
-        :where(& .kbq-hint) {
-            color: var(--kbq-foreground-contrast-secondary);
-        }
-    }
-}
-
 @mixin kbq-file-upload-typography() {
     .kbq-file-upload {
         @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
-
-    .kbq-file-upload__hint .kbq-hint .kbq-hint__text {
-        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
-    }
 }

package/file-upload/file-upload-tokens.scss

@@ -1,6 +1,5 @@
 :where(.kbq-file-upload) {
     --kbq-file-upload-size-dropzone-content-gap-horizontal: var(--kbq-size-s);
-    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
 }
 
 :where(.kbq-single-file-upload) {

package/file-upload/file-upload.scss

@@ -29,5 +29,4 @@
     @include form-field.kbq-form-field-hint-geometry();
 }
 
-@include theme.kbq-file-upload-theme();
 @include theme.kbq-file-upload-typography();

package/filter-bar/_filter-bar-theme.scss

@@ -1,11 +1,3 @@
-@use '../core/styles/common/tokens' as *;
-
-@mixin kbq-filter-bar-typography() {
-    .kbq-hint.kbq-date-period__hint .kbq-hint__text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
-    }
-}
-
 // Themable colour surfaces of a pipe. Kept out of the layout SCSS so every colour
 // lives behind a theme hook (they still resolve through the global semantic tokens).
 @mixin kbq-filter-bar-pipe-theme() {
@@ -30,6 +22,13 @@
         }
     }
 
+    .kbq-pipe-multiselect__panel,
+    .kbq-pipe-multi-tree-select__panel {
+        .kbq-pipe-select-all__counter {
+            color: var(--kbq-foreground-contrast-secondary);
+        }
+    }
+
     .kbq-pipe.kbq-pipe_removable,
     .kbq-pipe.kbq-pipe_cleanable:not(.kbq-pipe_empty) {
         .kbq-button.cdk-keyboard-focused::after {

package/filter-bar/filter-bar.scss

@@ -64,4 +64,3 @@
 }
 
 @include kbq-button-changed-filter();
-@include kbq-filter-bar-typography();

package/filter-bar/pipes/base-pipe.scss

@@ -92,13 +92,47 @@
 
 // The dropdown is portaled into the overlay, so it is reachable only through the pipe's `panelClass`.
 .kbq-pipe-select__panel_multiline,
-.kbq-pipe-multiselect__panel_multiline {
+.kbq-pipe-multiselect__panel_multiline,
+.kbq-pipe-tree-select__panel_multiline,
+.kbq-pipe-multi-tree-select__panel_multiline {
     // `overflow: hidden` from `kbq-list-text()` stays: it gives the flex item a minimum size of 0, so the
     // text shrinks to the option width instead of stretching the row.
-    .kbq-option-text {
+    .kbq-option-text,
+    .kbq-tree-option .kbq-option-text {
         white-space: normal;
         overflow-wrap: break-word;
     }
 }
 
+// The gap comes from the stylesheet, not from template whitespace: the compiler strips the whitespace-only
+// text node between the label and the counter (the tree label is an `[innerHTML]` binding, so nothing else
+// keeps a space there), and a margin is immune to that. The tree selector carries `.kbq-tree-option` so
+// the margin survives the option reset `.kbq-tree-option .kbq-option-text > * { margin: 0 }`, which also
+// clears the logical longhands and would otherwise tie on specificity.
+.kbq-pipe-multiselect__panel .kbq-pipe-select-all__counter,
+.kbq-pipe-multi-tree-select__panel .kbq-tree-option .kbq-pipe-select-all__counter {
+    margin-inline-start: var(--kbq-size-xxs);
+}
+
+// A wrapped row is taller than one line: pin the checkbox and the toggle to the FIRST line,
+// as `:has(.kbq-option-caption)` in `tree-option.scss` does for two-line options. On a 32px row
+// this alignment coincides with the centered one, so single-line options do not change.
+.kbq-pipe-tree-select__panel_multiline,
+.kbq-pipe-multi-tree-select__panel_multiline {
+    .kbq-tree-option {
+        & > .kbq-pseudo-checkbox,
+        & > kbq-checkbox {
+            align-self: flex-start;
+            margin-top: var(--kbq-size-3xs);
+        }
+
+        & > .kbq-tree-node-toggle {
+            align-self: flex-start;
+
+            height: var(--kbq-typography-text-normal-line-height);
+            margin-top: 0;
+        }
+    }
+}
+
 @include kbq-filter-bar-pipe-theme();

package/filter-bar/pipes/pipe-multi-tree-select.scss

@@ -13,3 +13,30 @@
         height: unset;
     }
 }
+
+.kbq-pipe-multi-tree-select__panel_custom-value {
+    .kbq-tree-option {
+        align-items: flex-start;
+
+        & > .kbq-pseudo-checkbox,
+        & > kbq-checkbox {
+            margin-top: var(--kbq-size-3xs);
+        }
+
+        & > .kbq-tree-node-toggle {
+            height: var(--kbq-typography-text-normal-line-height);
+            margin-top: 0;
+        }
+    }
+}
+
+.kbq-pipe-multi-tree-select__panel_multiline {
+    .kbq-tree-option .kbq-option-text {
+        flex: 1 1 auto;
+        min-width: 0;
+
+        white-space: normal;
+        overflow-wrap: break-word;
+        text-overflow: clip;
+    }
+}

package/form-field/_fieldset-theme.scss

@@ -1,9 +1,4 @@
-@use './form-field-theme';
-
+// Kept for back-compatibility: the 21.0 migration points the stylesheet imports of consumers to this file.
+/* stylelint-disable-next-line block-no-empty */
 @mixin kbq-fieldset-theme {
-    // Geometry of the hint area lives in `fieldset.scss`, next to the rest of the fieldset layout.
-    .kbq-form-field__hint {
-        @include form-field-theme.kbq-form-field-hint-theme();
-        @include form-field-theme.kbq-form-field-hint-typography();
-    }
 }

package/form-field/_form-field-theme.scss

@@ -1,17 +1,5 @@
 @use '../core/styles/common/tokens';
 
-@mixin kbq-form-field-hint-theme {
-    > .kbq-hint:not(.kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
-        color: var(--kbq-form-field-hint-text);
-    }
-}
-
-@mixin kbq-form-field-hint-typography {
-    > .kbq-hint:not(.kbq-reactive-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning) .kbq-hint__text {
-        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact);
-    }
-}
-
 @mixin _kbq-form-field-state($state-name) {
     .kbq-form-field__container {
         border-color: var(--kbq-form-field-#{$state-name}-border-color);
@@ -128,7 +116,9 @@
                             var(--kbq-form-field-states-error-focused-focus-outline);
                     }
 
-                    & .kbq-icon.kbq-empty {
+                    // The container holds the prefix and the suffix, while the hints sit below it and keep the color
+                    // they set themselves: `-webkit-text-fill-color` would win over it.
+                    & .kbq-form-field__container .kbq-icon.kbq-empty {
                         color: var(--kbq-form-field-states-error-text);
                         -webkit-text-fill-color: var(--kbq-form-field-states-error-text);
                     }
@@ -138,6 +128,10 @@
 
         .kbq-form-field__label {
             color: var(--kbq-form-field-label-color);
+
+            &.kbq-form-field__label_required .kbq-label::after {
+                color: var(--kbq-form-field-label-required-marker-color);
+            }
         }
 
         // Autofill says "the browser filled this in" and nothing more, so it contributes a tint and
@@ -168,7 +162,8 @@
         &.kbq-disabled {
             @include _kbq-form-field-state(states-disabled);
 
-            .kbq-icon.kbq-empty {
+            // Leaves the hints out, as in the invalid state: they follow the disabled state through `KBQ_HINT_PARENT`.
+            .kbq-form-field__container .kbq-icon.kbq-empty {
                 color: var(--kbq-form-field-states-disabled-text);
                 -webkit-text-fill-color: var(--kbq-form-field-states-disabled-text);
             }
@@ -180,19 +175,11 @@
                 color: var(--kbq-icon-contrast-fade);
             }
         }
-
-        .kbq-form-field__hint {
-            @include kbq-form-field-hint-theme();
-        }
     }
 }
 
 @mixin kbq-form-field-typography() {
     .kbq-form-field {
         @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
-
-        .kbq-form-field__hint {
-            @include kbq-form-field-hint-typography();
-        }
     }
 }

package/form-field/_hint-theme.scss

@@ -9,6 +9,21 @@
 }
 
 @mixin kbq-hint-theme() {
+    // `:where` keeps the default color below a class that a consumer puts on the hint.
+    :where(.kbq-hint) {
+        color: var(--kbq-hint-text);
+    }
+
+    // A disabled control greys out what the hint's `color` leaves uncolored. The colors come after this rule with the
+    // same specificity, so a color set on the hint wins over the state of its control.
+    .kbq-hint.kbq-hint_disabled {
+        color: var(--kbq-hint-states-disabled-text);
+
+        & .kbq-icon.kbq-empty {
+            color: var(--kbq-hint-states-disabled-icon);
+        }
+    }
+
     .kbq-hint {
         &.kbq-contrast-fade {
             @include _kbq-hint-color(fill-text-on, fade-contrast);
@@ -44,6 +59,11 @@
             }
         }
     }
+
+    // `fillTextOff` leaves the text uncolored, so a disabled control greys it out and the icon keeps the color.
+    .kbq-hint.kbq-hint_disabled.kbq-hint_fill-text-off {
+        color: var(--kbq-hint-states-disabled-text);
+    }
 }
 
 @mixin kbq-hint-typography() {

package/form-field/fieldset-tokens.scss

@@ -1,7 +1,6 @@
 .kbq-fieldset {
     --kbq-fieldset-legend-margin: var(--kbq-size-s);
     --kbq-form-field-hint-size-margin-top: var(--kbq-size-xs);
-    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
     --kbq-form-field-hint-size-gap: var(--kbq-size-xxs);
     --kbq-form-field-label-color: var(--kbq-foreground-contrast-secondary);
 }

package/form-field/fieldset.scss

@@ -1,5 +1,4 @@
 @use './form-field';
-@use './fieldset-theme';
 
 .kbq-fieldset {
     display: flex;
@@ -67,8 +66,6 @@
             margin-left: calc(var(--kbq-size-border-width) * -1);
         }
     }
-
-    @include fieldset-theme.kbq-fieldset-theme();
 }
 
 .kbq-fieldset__container {

package/form-field/form-field-tokens.scss

@@ -58,8 +58,8 @@
     --kbq-form-field-states-disabled-background: var(--kbq-states-background-disabled);
     --kbq-form-field-states-disabled-placeholder: var(--kbq-states-foreground-disabled);
     --kbq-form-field-states-disabled-text: var(--kbq-states-foreground-disabled);
-    --kbq-form-field-hint-text: var(--kbq-foreground-contrast-secondary);
     --kbq-form-field-label-color: var(--kbq-foreground-contrast-secondary);
+    --kbq-form-field-label-required-marker-color: var(--kbq-foreground-error);
 }
 
 :where(.kbq-dark) {

package/form-field/form-field.scss

@@ -45,6 +45,15 @@
         box-sizing: border-box;
         display: flex;
         margin-bottom: var(--kbq-form-field-label-margin-bottom);
+
+        // Drawn inside `kbq-label`, so that it follows the last word of a label that wraps.
+        &.kbq-form-field__label_required .kbq-label::after {
+            margin-left: var(--kbq-size-3xs);
+            // The marker only repeats the `required` state of the control, so it is kept out of the accessible name of
+            // the control. The plain `content` is the fallback for browsers without the alternative text syntax.
+            content: '*';
+            content: '*' / '';
+        }
     }
 
     // We should override suffix spacing for select type, because it has custom suffix

package/form-field/hint-tokens.scss

@@ -4,6 +4,7 @@
     --kbq-hint-size-compact-margin-top: 0;
     --kbq-hint-size-compact-content-padding: var(--kbq-size-xxs);
     /* THEME TOKENS */
+    --kbq-hint-text: var(--kbq-foreground-contrast-secondary);
     --kbq-hint-fill-text-off-fade-contrast-text: var(--kbq-foreground-contrast);
     --kbq-hint-fill-text-off-fade-contrast-icon: var(--kbq-icon-contrast-fade);
     --kbq-hint-fill-text-off-success-text: var(--kbq-foreground-contrast);
@@ -20,4 +21,6 @@
     --kbq-hint-fill-text-on-warning-icon: var(--kbq-icon-warning);
     --kbq-hint-fill-text-on-error-text: var(--kbq-foreground-error);
     --kbq-hint-fill-text-on-error-icon: var(--kbq-icon-error);
+    --kbq-hint-states-disabled-text: var(--kbq-states-foreground-disabled);
+    --kbq-hint-states-disabled-icon: var(--kbq-states-icon-disabled);
 }

package/modal/modal.scss

@@ -106,6 +106,7 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
+    overflow-wrap: break-word;
 
     padding-top: var(--kbq-size-3xs);
     padding-bottom: var(--kbq-size-3xs);
@@ -123,6 +124,7 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
+    overflow-wrap: break-word;
     text-overflow: ellipsis;
 }
 

package/navbar/_navbar-item_vertical.scss

@@ -53,11 +53,22 @@
         gap: var(--kbq-size-m);
 
         // The shared `.kbq-navbar-item .kbq-badge` rule takes the badge out of flow for the icon-corner
-        // overlay used when collapsed; expanded, it stays a normal flex child laid out after the title.
-        & .kbq-badge {
+        // overlay used when collapsed; expanded, a badge that is a direct child stays a normal flex child
+        // laid out after the title. Nested badges (inside a custom trigger) keep their own positioning.
+        & > .kbq-badge {
             position: static;
         }
 
+        // A titleless item has no trailing slot for the badge: it overlays the top-right corner of the
+        // leading 40px area, matching the custom component (whose badge is `top: 0; right: 0` of its 40×40 box).
+        // Scoped to the badge as a direct child, so a badge nested inside a custom trigger keeps its own position.
+        &:not(.kbq-navbar-item_with-title) > .kbq-badge {
+            position: absolute;
+            top: 0;
+            left: calc(var(--kbq-size-xl) + var(--kbq-navbar-item-size-custom-content-width));
+            transform: translateX(-100%);
+        }
+
         &.kbq-navbar-item_has-nested {
             align-items: center;
 
@@ -86,6 +97,41 @@
         }
     }
 
+    &.kbq-navbar-item_has-custom-trigger {
+        & > :first-child {
+            display: flex;
+
+            align-items: center;
+            justify-content: center;
+
+            flex-shrink: 0;
+
+            width: var(--kbq-navbar-item-size-custom-content-width);
+            height: var(--kbq-navbar-item-size-custom-content-height);
+        }
+
+        // Collapsed: the 40×40 host is centered in the item, so centering its content aligns the icon with a
+        // plain collapsed item. Expanded: the host starts at the item padding, so left-aligning its content
+        // puts the icon on the plain item's inline icon axis.
+        &.kbq-expanded {
+            padding-right: var(--kbq-size-xl);
+            padding-left: var(--kbq-size-xl);
+
+            & > :first-child {
+                justify-content: flex-start;
+            }
+        }
+
+        // Collapsed: the item is the badge's reference, as it is for a plain item (the collapsed `.kbq-badge`
+        // offsets are item-relative). A relative host would measure them from its own 40×40 box and shift the
+        // badge left by the host's centering offset.
+        &.kbq-collapsed {
+            & > :first-child {
+                position: static;
+            }
+        }
+    }
+
     &.kbq-collapsed {
         width: var(--kbq-size-6xl);
 

package/navbar/_navbar-theme.scss

@@ -1,7 +1,10 @@
 @use '../core/styles/common/tokens' as *;
 
 @mixin kbq-navbar-item($state-name) {
-    &:not(.kbq-navbar-item_has-nested) {
+    // A projected button or form field paints its own states; a custom trigger is a bare host the component
+    // styles, so the item keeps painting them for it.
+    &:not(.kbq-navbar-item_has-nested),
+    &.kbq-navbar-item_has-custom-trigger {
         &:after {
             display: block;
             background: var(--kbq-navbar-item-#{$state-name}-content-background);
@@ -15,7 +18,11 @@
     // No `!important` needed: the child combinator plus the item class already outweighs everything that
     // colours a bare icon (`.kbq-icon` and its `.kbq-icon.kbq-<color>` modifiers, at most two classes), and
     // the state variants below add a class of their own on top of this one.
-    & > .kbq-icon.kbq-empty {
+    // A titled item may keep its leading icon inside `kbqNavbarItemContent` (the 40×40 square a custom
+    // component uses), so the same state colour has to reach a nested icon.
+    & > .kbq-icon.kbq-empty,
+    & > .kbq-navbar-item-content .kbq-icon.kbq-empty,
+    &.kbq-navbar-item_has-custom-trigger > :first-child .kbq-icon.kbq-empty {
         color: var(--kbq-navbar-item-#{$state-name}-content-icon-left);
     }
 
@@ -53,7 +60,8 @@ button {
             @include kbq-navbar-item(states-hover);
         }
 
-        &.cdk-focused.cdk-keyboard-focused {
+        &.cdk-focused.cdk-keyboard-focused,
+        &.kbq-navbar-item_keyboard-focused {
             outline: none;
 
             &:after {

package/navbar/navbar-item.scss

@@ -21,6 +21,23 @@
         min-height: var(--kbq-size-l);
     }
 
+    // Custom content in place of the icon: the navbar only reserves the square, the content
+    // positions itself inside it.
+    & > .kbq-navbar-item-content {
+        flex-shrink: 0;
+
+        width: var(--kbq-navbar-item-size-custom-content-width);
+        height: var(--kbq-navbar-item-size-custom-content-height);
+    }
+
+    // The item paints its state overlay and the keyboard focus ring for a custom trigger, so the trigger host
+    // has to sit above the overlay to stay clickable, and must not draw the browser's own outline inside it.
+    &.kbq-navbar-item_has-custom-trigger > :first-child {
+        z-index: 1;
+
+        outline: none;
+    }
+
     // Filled fade-contrast only: its background is a semi-transparent tint, so the
     // navbar icon shows through. Composite the tint over an opaque bg-tertiary substrate.
     // The outline variant is intentionally left untouched — it stays a clean transparent outline.

package/navbar/navbar-tokens.scss

@@ -4,6 +4,9 @@
     /* SIZE TOKENS */
     /* 40px of content plus the 1px gap that keeps the focus ring of adjacent items apart. */
     --kbq-navbar-item-vertical-size-height: 41px;
+    /* The square an item reserves for custom content in place of the 16px icon. */
+    --kbq-navbar-item-size-custom-content-width: var(--kbq-size-4xl);
+    --kbq-navbar-item-size-custom-content-height: var(--kbq-size-4xl);
     --kbq-navbar-vertical-size-expanded-width: 240px;
     --kbq-navbar-brand-vertical-size-title-max-width: 200px;
     --kbq-navbar-toggle-size-circle: 28px;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "21.0.0",
+    "version": "21.1.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -27,10 +27,10 @@
         "@angular/forms": "^21.0.0",
         "@angular/platform-browser": "^21.0.0",
         "@angular/router": "^21.0.0",
-        "@koobiq/angular-moment-adapter": "^21.0.0",
-        "@koobiq/angular-luxon-adapter": "^21.0.0",
+        "@koobiq/angular-moment-adapter": "^21.1.0",
+        "@koobiq/angular-luxon-adapter": "^21.1.0",
         "@koobiq/date-adapter": "^3.4.0",
-        "@koobiq/date-formatter": "^3.2.3",
+        "@koobiq/date-formatter": "^3.7.0",
         "@koobiq/icons": "^11.1.3 || ^12.0.0",
         "@koobiq/design-tokens": "^4.1.0",
         "highlight.js": "^11.11.1",

package/popover/popover.scss

@@ -148,7 +148,7 @@ $z-index-above-content: 2;
     width: $arrow-size;
     height: $arrow-size;
 
-    transform: rotate(45deg);
+    transform: translate(var(--kbq-popover-arrow-shift-x, 0px), var(--kbq-popover-arrow-shift-y, 0px)) rotate(45deg);
 }
 
 @include pop-up.popup-arrow-positions(kbq-popover, $arrow-offset, $arrow-padding);

package/radio/_radio-theme.scss

@@ -16,10 +16,6 @@
 @mixin kbq-radio-color($type-name) {
     @include kbq-radio-state($type-name, default);
 
-    & .kbq-hint .kbq-hint__text {
-        color: var(--kbq-radio-#{$type-name}-default-caption);
-    }
-
     &:hover,
     &.kbq-hovered {
         @include kbq-radio-state($type-name, states-hover);
@@ -56,10 +52,6 @@
             cursor: default;
             color: var(--kbq-radio-#{$type-name}-states-disabled-caption);
         }
-
-        & .kbq-hint .kbq-hint__text {
-            color: var(--kbq-radio-#{$type-name}-states-disabled-caption);
-        }
     }
 }
 
@@ -82,36 +74,14 @@
     .kbq-radio-group.kbq-invalid .kbq-radio-button {
         @include kbq-radio-color(error);
     }
-
-    // A hint of the group reads like the hints of its options; the error keeps its own color.
-    .kbq-radio-group__subscript .kbq-hint:where(:not(.kbq-error)) .kbq-hint__text {
-        color: var(--kbq-radio-theme-default-caption);
-    }
 }
 
 @mixin kbq-radio-typography() {
     .kbq-radio-button {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
-
-        & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
-        }
     }
 
     .kbq-radio-button.kbq-radio-button_big {
         @include kbq-typography-level-to-styles-css-variables(typography, text-big);
-
-        & .kbq-hint .kbq-hint__text {
-            @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
-        }
-    }
-
-    // The error and the hints under the group read at the size of the hints of its options.
-    .kbq-radio-group_normal .kbq-radio-group__subscript .kbq-hint__text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
-    }
-
-    .kbq-radio-group_big .kbq-radio-group__subscript .kbq-hint__text {
-        @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
     }
 }

package/radio/radio-tokens.scss

@@ -5,7 +5,6 @@
     --kbq-radio-theme-default-outer-circle-border: var(--kbq-line-contrast-fade);
     --kbq-radio-theme-default-outer-circle-background: var(--kbq-background-bg);
     --kbq-radio-theme-default-inner-circle-background: transparent;
-    --kbq-radio-theme-default-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-radio-theme-states-hover-outer-circle-border: var(--kbq-line-contrast-fade);
     --kbq-radio-theme-states-hover-outer-circle-background: var(--kbq-states-background-transparent-hover);
     --kbq-radio-theme-states-hover-inner-circle-background: transparent;
@@ -33,7 +32,6 @@
     --kbq-radio-error-default-outer-circle-border: var(--kbq-line-error);
     --kbq-radio-error-default-outer-circle-background: var(--kbq-background-error-less);
     --kbq-radio-error-default-inner-circle-background: transparent;
-    --kbq-radio-error-default-caption: var(--kbq-foreground-contrast-secondary);
     --kbq-radio-error-states-hover-outer-circle-border: var(--kbq-line-error);
     --kbq-radio-error-states-hover-outer-circle-background: var(--kbq-states-background-error-fade-hover);
     --kbq-radio-error-states-hover-inner-circle-background: transparent;