@semcore/feature-highlight 16.1.1 → 16.2.0-prerelease.3

package/lib/es6/inner-components/button-trigger/ButtonTrigger.js

@@ -1,30 +1,27 @@
 import _objectSpread from "@babel/runtime/helpers/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/callSuper";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps2 } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 import { ButtonTrigger } from '@semcore/base-trigger';
 import { createComponent, Root, sstyled, Component } from '@semcore/core';
 import SummaryAI from '@semcore/icon/SummaryAI/m';
 import React from 'react';
 /*!__reshadow-styles__:"./buttonTrigger.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedButtonTrigger_fmgsg_gg_:not(._state_invalid_fmgsg_gg_):not(._state_valid_fmgsg_gg_){border:1px solid transparent;background:linear-gradient(var(--intergalactic-bg-primary-neutral, #ffffff),var(--intergalactic-bg-primary-neutral, #ffffff)) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)\n  ) border-box;background-origin:border-box;background-clip:padding-box,border-box}@media (hover:hover){.___SHighlightedButtonTrigger_fmgsg_gg_:not(._state_invalid_fmgsg_gg_):not(._state_valid_fmgsg_gg_):hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)\n    ) border-box}}.___SHighlightedButtonTrigger_fmgsg_gg_.__active_fmgsg_gg_:not(._state_invalid_fmgsg_gg_):not(._state_valid_fmgsg_gg_),.___SHighlightedButtonTrigger_fmgsg_gg_:not(._state_invalid_fmgsg_gg_):not(._state_valid_fmgsg_gg_):active{background:linear-gradient(var(--intergalactic-bg-primary-neutral, #ffffff),var(--intergalactic-bg-primary-neutral, #ffffff)) padding-box,var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg, #8649e1, #006dca)) border-box;background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent}.___SHighlightedButtonTrigger_fmgsg_gg_:not(._state_invalid_fmgsg_gg_):not(._state_valid_fmgsg_gg_):focus-visible{outline:0;position:relative;border-color:transparent}.___SHighlightedButtonTrigger_fmgsg_gg_:not(._state_invalid_fmgsg_gg_):not(._state_valid_fmgsg_gg_):focus-visible::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-4px;padding:4px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude}.___SHighlightedButtonTrigger_fmgsg_gg_._neighborLocation_left_fmgsg_gg_:not(._state_invalid_fmgsg_gg_):not(._state_valid_fmgsg_gg_):focus-visible::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButtonTrigger_fmgsg_gg_._neighborLocation_right_fmgsg_gg_:not(._state_invalid_fmgsg_gg_):not(._state_valid_fmgsg_gg_):focus-visible::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButtonTrigger_fmgsg_gg_._neighborLocation_both_fmgsg_gg_:not(._state_invalid_fmgsg_gg_):not(._state_valid_fmgsg_gg_):focus-visible::before{border-radius:0}", /*__inner_css_end__*/"fmgsg_gg_"),
+var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SHighlightedButtonTrigger_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_){border:1px solid transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;background-origin:border-box;background-clip:padding-box,border-box;position:relative;z-index:1}.___SHighlightedButtonTrigger_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_)::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:2px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);pointer-events:none;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}@media (hover:hover){.___SHighlightedButtonTrigger_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_):hover{background:var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box}}.___SHighlightedButtonTrigger_i13ut_gg_.__active_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_),.___SHighlightedButtonTrigger_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_):active{background:linear-gradient(white,white) padding-box,var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg, #8649e1, #006dca)) border-box;background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent}.___SHighlightedButtonTrigger_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_):focus-visible{outline:0;border-color:transparent}.___SHighlightedButtonTrigger_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_):focus-visible::before{opacity:1;transform:scale(1)}.___SHighlightedButtonTrigger_i13ut_gg_._neighborLocation_left_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_)::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButtonTrigger_i13ut_gg_._neighborLocation_right_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_)::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButtonTrigger_i13ut_gg_._neighborLocation_both_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_)::before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedButtonTrigger_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_):focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedButtonTrigger_i13ut_gg_:not(._state_invalid_i13ut_gg_):not(._state_valid_i13ut_gg_):focus-visible::before{display:none}}", /*__inner_css_end__*/"i13ut_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedButtonTrigger": "___SHighlightedButtonTrigger_fmgsg_gg_",
-  "_state_invalid": "_state_invalid_fmgsg_gg_",
-  "_state_valid": "_state_valid_fmgsg_gg_",
-  "_active": "__active_fmgsg_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_fmgsg_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_fmgsg_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_fmgsg_gg_"
+  "__SHighlightedButtonTrigger": "___SHighlightedButtonTrigger_i13ut_gg_",
+  "_state_invalid": "_state_invalid_i13ut_gg_",
+  "_state_valid": "_state_valid_i13ut_gg_",
+  "_active": "__active_i13ut_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_i13ut_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_i13ut_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_i13ut_gg_"
 });
 var ButtonTriggerFHRoot = /*#__PURE__*/function (_Component) {
   function ButtonTriggerFHRoot() {

package/lib/es6/inner-components/button-trigger/ButtonTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonTrigger.js","names":["ButtonTrigger","createComponent","Root","sstyled","Component","SummaryAI","React","style","_sstyled","insert","ButtonTriggerFHRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref3","styles","SHighlightedButtonTrigger","createElement","cn","_objectSpread","_assignProps","_defineProperty","Addon","props","_ref2","arguments[0]","_ref4","SAddon","Children","hasChildren","children","_assignProps2","ButtonTriggerFH","Text"],"sources":["../../../../src/inner-components/button-trigger/ButtonTrigger.tsx"],"sourcesContent":["import { ButtonTrigger } from '@semcore/base-trigger';\nimport Button from '@semcore/button';\nimport type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, sstyled, Component } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport React from 'react';\n\nimport style from './buttonTrigger.shadow.css';\nimport type { HighlightedButtonTriggerComponent } from './ButtonTrigger.type';\nimport { AnimatedSparkles } from '../sparkle/AnimatedSparkles';\n\nclass ButtonTriggerFHRoot extends Component {\n  static displayName = 'ButtonTriggerFH';\n  static style = style;\n\n  render() {\n    const { styles } = this.asProps;\n    const SHighlightedButtonTrigger = Root;\n    return sstyled(styles)(\n      <SHighlightedButtonTrigger render={ButtonTrigger} />,\n    );\n  }\n}\n\nfunction Addon(props: IRootComponentProps) {\n  const SAddon = Root;\n  const { Children, children: hasChildren } = props;\n  return sstyled(props.styles)(\n    <SAddon render={ButtonTrigger.Addon}>\n      {hasChildren\n        ? (<Children />)\n        : (\n            <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n          )}\n    </SAddon>,\n  );\n}\n\nexport const ButtonTriggerFH = createComponent(ButtonTriggerFHRoot, {\n  Text: ButtonTrigger.Text,\n  Addon,\n}) as HighlightedButtonTriggerComponent;\n"],"mappings":";;;;;;;;;;;;AAAA,SAASA,aAAa,QAAQ,uBAAuB;AAGrD,SAASC,eAAe,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,QAAQ,eAAe;AACzE,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,IAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAMpBC,mBAAmB,0BAAAC,UAAA;EAAA,SAAAD,oBAAA;IAAAE,eAAA,OAAAF,mBAAA;IAAA,OAAAG,UAAA,OAAAH,mBAAA,EAAAI,SAAA;EAAA;EAAAC,SAAA,CAAAL,mBAAA,EAAAC,UAAA;EAAA,OAAAK,YAAA,CAAAN,mBAAA;IAAAO,GAAA;IAAAC,KAAA,EAIvB,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAQC,MAAM,GAAK,IAAI,CAACF,OAAO,CAAvBE,MAAM;MACd,IAAMC,yBAAyB,GAEMxB,aAAa;MADlD,OAAAsB,KAAA,GAAOnB,OAAO,CAACoB,MAAM,CAAC,eACpBjB,KAAA,CAAAmB,aAAA,CAACD,yBAAyB,EAAAF,KAAA,CAAAI,EAAA,8BAAAC,aAAA,KAAAC,YAAA,KAAAR,IAAA,GAAyB,CAAC;IAExD;EAAC;AAAA,EAV+BhB,SAAS;AAAAyB,eAAA,CAArCnB,mBAAmB,iBACF,iBAAiB;AAAAmB,eAAA,CADlCnB,mBAAmB,WAERH,KAAK;AAWtB,SAASuB,KAAKA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACzC,IAAMC,MAAM,GAGMnC,aAAa,CAAC8B,KAAK;EAFrC,IAAQM,QAAQ,GAA4BL,KAAK,CAAzCK,QAAQ;IAAYC,WAAW,GAAKN,KAAK,CAA/BO,QAAQ;EAC1B,OAAAJ,KAAA,GAAO/B,OAAO,CAAC4B,KAAK,CAACR,MAAM,CAAC,eAC1BjB,KAAA,CAAAmB,aAAA,CAACU,MAAM,EAAAD,KAAA,CAAAR,EAAA,WAAAC,aAAA,KAAAY,aAAA,KAAAP,KAAA,KACJK,WAAW,gBACP/B,KAAA,CAAAmB,aAAA,CAACW,QAAQ,EAAAF,KAAA,CAAAR,EAAA,gBAAE,CAAC,gBAEXpB,KAAA,CAAAmB,aAAA,CAACpB,SAAS,EAAA6B,KAAA,CAAAR,EAAA;IAAA,SAAO;EAAgD,EAAE,CAEnE,CAAC;AAEb;AAEA,OAAO,IAAMc,eAAe,GAAGvC,eAAe,CAACS,mBAAmB,EAAE;EAClE+B,IAAI,EAAEzC,aAAa,CAACyC,IAAI;EACxBX,KAAK,EAALA;AACF,CAAC,CAAsC","ignoreList":[]}
+{"version":3,"file":"ButtonTrigger.js","names":["ButtonTrigger","createComponent","Root","sstyled","Component","SummaryAI","React","style","_sstyled","insert","ButtonTriggerFHRoot","_Component","_classCallCheck","_callSuper","arguments","_inherits","_createClass","key","value","render","_ref","asProps","_ref3","styles","SHighlightedButtonTrigger","createElement","cn","_objectSpread","_assignProps","_defineProperty","Addon","props","_ref2","arguments[0]","_ref4","SAddon","Children","hasChildren","children","_assignProps2","ButtonTriggerFH","Text"],"sources":["../../../../src/inner-components/button-trigger/ButtonTrigger.tsx"],"sourcesContent":["import { ButtonTrigger } from '@semcore/base-trigger';\nimport Button from '@semcore/button';\nimport type { IRootComponentProps } from '@semcore/core';\nimport { createComponent, Root, sstyled, Component } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport React from 'react';\n\nimport style from './buttonTrigger.shadow.css';\nimport type { HighlightedButtonTriggerComponent } from './ButtonTrigger.type';\nimport { AnimatedSparkles } from '../sparkle/AnimatedSparkles';\n\nclass ButtonTriggerFHRoot extends Component {\n  static displayName = 'ButtonTriggerFH';\n  static style = style;\n\n  render() {\n    const { styles } = this.asProps;\n    const SHighlightedButtonTrigger = Root;\n    return sstyled(styles)(\n      <SHighlightedButtonTrigger render={ButtonTrigger} />,\n    );\n  }\n}\n\nfunction Addon(props: IRootComponentProps) {\n  const SAddon = Root;\n  const { Children, children: hasChildren } = props;\n  return sstyled(props.styles)(\n    <SAddon render={ButtonTrigger.Addon}>\n      {hasChildren\n        ? (<Children />)\n        : (\n            <SummaryAI color='--intergalactic-icon-primary-feature-highlight' />\n          )}\n    </SAddon>,\n  );\n}\n\nexport const ButtonTriggerFH = createComponent(ButtonTriggerFHRoot, {\n  Text: ButtonTrigger.Text,\n  Addon,\n}) as HighlightedButtonTriggerComponent;\n"],"mappings":";;;;;;;;;AAAA,SAASA,aAAa,QAAQ,uBAAuB;AAGrD,SAASC,eAAe,EAAEC,IAAI,EAAEC,OAAO,EAAEC,SAAS,QAAQ,eAAe;AACzE,OAAOC,SAAS,MAAM,2BAA2B;AACjD,OAAOC,KAAK,MAAM,OAAO;AAAC;AAAA,IAAAC,KAAA,8BAAAC,QAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAMpBC,mBAAmB,0BAAAC,UAAA;EAAA,SAAAD,oBAAA;IAAAE,eAAA,OAAAF,mBAAA;IAAA,OAAAG,UAAA,OAAAH,mBAAA,EAAAI,SAAA;EAAA;EAAAC,SAAA,CAAAL,mBAAA,EAAAC,UAAA;EAAA,OAAAK,YAAA,CAAAN,mBAAA;IAAAO,GAAA;IAAAC,KAAA,EAIvB,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAQC,MAAM,GAAK,IAAI,CAACF,OAAO,CAAvBE,MAAM;MACd,IAAMC,yBAAyB,GAEMxB,aAAa;MADlD,OAAAsB,KAAA,GAAOnB,OAAO,CAACoB,MAAM,CAAC,eACpBjB,KAAA,CAAAmB,aAAA,CAACD,yBAAyB,EAAAF,KAAA,CAAAI,EAAA,8BAAAC,aAAA,KAAAC,YAAA,KAAAR,IAAA,GAAyB,CAAC;IAExD;EAAC;AAAA,EAV+BhB,SAAS;AAAAyB,eAAA,CAArCnB,mBAAmB,iBACF,iBAAiB;AAAAmB,eAAA,CADlCnB,mBAAmB,WAERH,KAAK;AAWtB,SAASuB,KAAKA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;IAAAC,KAAA;EACzC,IAAMC,MAAM,GAGMnC,aAAa,CAAC8B,KAAK;EAFrC,IAAQM,QAAQ,GAA4BL,KAAK,CAAzCK,QAAQ;IAAYC,WAAW,GAAKN,KAAK,CAA/BO,QAAQ;EAC1B,OAAAJ,KAAA,GAAO/B,OAAO,CAAC4B,KAAK,CAACR,MAAM,CAAC,eAC1BjB,KAAA,CAAAmB,aAAA,CAACU,MAAM,EAAAD,KAAA,CAAAR,EAAA,WAAAC,aAAA,KAAAY,aAAA,KAAAP,KAAA,KACJK,WAAW,gBACP/B,KAAA,CAAAmB,aAAA,CAACW,QAAQ,EAAAF,KAAA,CAAAR,EAAA,gBAAE,CAAC,gBAEXpB,KAAA,CAAAmB,aAAA,CAACpB,SAAS,EAAA6B,KAAA,CAAAR,EAAA;IAAA,SAAO;EAAgD,EAAE,CAEnE,CAAC;AAEb;AAEA,OAAO,IAAMc,eAAe,GAAGvC,eAAe,CAACS,mBAAmB,EAAE;EAClE+B,IAAI,EAAEzC,aAAa,CAACyC,IAAI;EACxBX,KAAK,EAALA;AACF,CAAC,CAAsC","ignoreList":[]}

package/lib/es6/inner-components/button-trigger/buttonTrigger.shadow.css

@@ -1,57 +1,86 @@
 SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]) {
   border: 1px solid transparent;
   background:
-    linear-gradient(var(--intergalactic-bg-primary-neutral, #ffffff), var(--intergalactic-bg-primary-neutral, #ffffff)) padding-box,
-    var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
-  ) border-box; /* border */
+    linear-gradient(white, white) padding-box,
+    var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;
   background-origin: border-box;
   background-clip: padding-box, border-box;
+  position: relative;
+  z-index: 1;
+
+  &::before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    inset: 0;
+    margin: -5px;
+    padding: 2px;
+    border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
+    background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));
+
+    mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
+    mask-composite: exclude;
+
+    opacity: 0;
+    transform: scale(0.96);
+    pointer-events: none;
+
+    transition:
+      opacity calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out,
+      transform calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
+  }
 
   &:hover {
     background: var(--intergalactic-bg-primary-feature-highlight-hover-active, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,
-      var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
-    ) border-box;
+      var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;
   }
 
   &:active,
   &[active] {
     background:
-      linear-gradient(var(--intergalactic-bg-primary-neutral, #ffffff), var(--intergalactic-bg-primary-neutral, #ffffff)) padding-box,
+      linear-gradient(white, white) padding-box,
       var(--intergalactic-control-primary-feature-highlight-hover, linear-gradient(90deg, #8649e1, #006dca)) border-box;
     background-origin: border-box;
     background-clip: padding-box, border-box;
     border-color: transparent;
   }
-}
-
-SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]):focus-visible {
-  outline: none;
-  position: relative;
-  border-color: transparent;
 
-  &::before {
-    content: "";
-    position: absolute;
-    z-index: -1;
-    inset: 0;
-    margin: -4px;
-    padding: 4px;
-    border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
+  &:focus-visible {
+    outline: none;
+    border-color: transparent;
 
-    background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));
-    mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
-    mask-composite: exclude;
+    &::before {
+      opacity: 1;
+      transform: scale(1);
+    }
   }
 
   &[neighborLocation='left']::before {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+
   &[neighborLocation='right']::before {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+
   &[neighborLocation='both']::before {
     border-radius: 0;
   }
 }
+
+/* Firefox fallback */
+@supports not (-webkit-mask-composite: xor) {
+
+  SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]):focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px #ffffff,
+      0 0 0 4px #7078FC;
+  }
+
+  SHighlightedButtonTrigger:not([state="invalid"]):not([state="valid"]):focus-visible::before {
+    display: none;
+  }
+}

package/lib/es6/inner-components/sparkle/Sparkle.js

@@ -4,21 +4,21 @@ import { assignProps as _assignProps } from "@semcore/core";
 import { createBaseComponent, Root, sstyled } from '@semcore/core';
 import React from 'react';
 /*!__reshadow-styles__:"./style/sparkle.shadow.css"*/
-var styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes sparkles_x15km{50%{transform:rotate(calc(1deg*var(--angle_x15km))) translateY(200%) scale(var(--scale_x15km))}to{transform:rotate(calc(1deg*var(--angle_x15km))) translateY(200%) scale(0)}}.___SSparkle_x15km_gg_{position:absolute}.___SSparkle_x15km_gg_ path{fill:var(--intergalactic-icon-primary-feature-highlight, #8649e1)}.___SSparkle_x15km_gg_.__angle_x15km_gg_.__scale_x15km_gg_.__duration_x15km_gg_{transform:rotate(calc(1deg*var(--angle_x15km))) scale(var(--scale_x15km));animation-name:sparkles_x15km;animation-fill-mode:forwards;animation-duration:var(--duration_x15km)}.___SSparkle_x15km_gg_.__left_x15km_gg_{left:var(--left_x15km)}.___SSparkle_x15km_gg_.__top_x15km_gg_{top:var(--top_x15km)}", /*__inner_css_end__*/"x15km_gg_"),
+var styles = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/"@keyframes sparkles_1k211{50%{transform:rotate(calc(1deg*var(--angle_1k211))) translateY(200%) scale(var(--scale_1k211))}to{transform:rotate(calc(1deg*var(--angle_1k211))) translateY(200%) scale(0)}}.___SSparkle_1k211_gg_{position:absolute}.___SSparkle_1k211_gg_ path{fill:var(--intergalactic-icon-primary-feature-highlight, #8649e1)}.___SSparkle_1k211_gg_.__angle_1k211_gg_.__scale_1k211_gg_.__duration_1k211_gg_{transform:rotate(calc(1deg*var(--angle_1k211))) scale(var(--scale_1k211));animation-name:sparkles_1k211;animation-fill-mode:forwards;animation-duration:var(--duration_1k211)}.___SSparkle_1k211_gg_.__left_1k211_gg_{left:var(--left_1k211)}.___SSparkle_1k211_gg_.__top_1k211_gg_{top:var(--top_1k211)}", /*__inner_css_end__*/"1k211_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SSparkle": "___SSparkle_x15km_gg_",
-  "_angle": "__angle_x15km_gg_",
-  "_scale": "__scale_x15km_gg_",
-  "_duration": "__duration_x15km_gg_",
-  "--angle": "--angle_x15km",
-  "--scale": "--scale_x15km",
-  "--duration": "--duration_x15km",
-  "@sparkles": "sparkles_x15km",
-  "_left": "__left_x15km_gg_",
-  "--left": "--left_x15km",
-  "_top": "__top_x15km_gg_",
-  "--top": "--top_x15km"
+  "__SSparkle": "___SSparkle_1k211_gg_",
+  "_angle": "__angle_1k211_gg_",
+  "_scale": "__scale_1k211_gg_",
+  "_duration": "__duration_1k211_gg_",
+  "--angle": "--angle_1k211",
+  "--scale": "--scale_1k211",
+  "--duration": "--duration_1k211",
+  "@sparkles": "sparkles_1k211",
+  "_left": "__left_1k211_gg_",
+  "--left": "--left_1k211",
+  "_top": "__top_1k211_gg_",
+  "--top": "--top_1k211"
 });
 function SvgSparkle(props, ref) {
   var _ref = arguments[0],

package/lib/esm/components/badge/Badge.mjs

@@ -1,28 +1,23 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
 import Badge from "@semcore/badge";
 import React from "react";
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
 /*!__reshadow-styles__:"./badge.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SHighlightedBadge_dpfxu_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-image:var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg, #ab6cfe, #008ff8))}",
+    ".___SHighlightedBadge_1uty5_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-image:var(--intergalactic-control-primary-feature-highlight, linear-gradient(90deg, #ab6cfe, #008ff8))}",
     /*__inner_css_end__*/
-    "dpfxu_gg_"
+    "1uty5_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHighlightedBadge": "___SHighlightedBadge_dpfxu_gg_"
+    "__SHighlightedBadge": "___SHighlightedBadge_1uty5_gg_"
   })
 );
 var BadgeFHRoot = /* @__PURE__ */ function(_Component) {

package/lib/esm/components/button/Button.mjs

@@ -1,9 +1,7 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
@@ -11,27 +9,24 @@ import Button from "@semcore/button";
 import SummaryAI from "@semcore/icon/SummaryAI/m";
 import React from "react";
 import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
 /*!__reshadow-styles__:"./button.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHighlightedButton_13j8z_gg_._theme_primary-highlighted_13j8z_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-image:linear-gradient(90deg,var(--intergalactic-violet-500, #8649e1),var(--intergalactic-blue-500, #006dca),var(--intergalactic-violet-400, #ab6cfe),var(--intergalactic-blue-400, #008ff8));background-position-x:99%;background-size:300%;transition:background-position-x .3s cubic-bezier(.22,.61,.36,1)}@media (hover:hover){.___SHighlightedButton_13j8z_gg_._theme_primary-highlighted_13j8z_gg_:hover{color:var(--intergalactic-text-primary-invert, #ffffff);background-position-x:1%}}.___SHighlightedButton_13j8z_gg_._theme_primary-highlighted_13j8z_gg_.__active_13j8z_gg_,.___SHighlightedButton_13j8z_gg_._theme_primary-highlighted_13j8z_gg_:active{color:var(--intergalactic-text-primary-invert, #ffffff);background-image:var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg, #5925ab, #044792));background-size:100%}.___SHighlightedButton_13j8z_gg_._theme_secondary-highlighted_13j8z_gg_{color:var(--intergalactic-icon-primary-feature-highlight, #8649e1);background:var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg, #dcb8ff, #8ecdff)) border-box;background-origin:border-box;background-clip:padding-box,border-box}.___SHighlightedButton_13j8z_gg_._theme_secondary-highlighted_13j8z_gg_ .___SText_13j8z_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight, #8649e1);background-image:var(--intergalactic-text-feature-highlight, linear-gradient(90deg, #8649e1, #006dca));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@media (hover:hover){.___SHighlightedButton_13j8z_gg_._theme_secondary-highlighted_13j8z_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg, #f2e4ff, #d6edfe)) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg, #dcb8ff, #8ecdff)) border-box;color:var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4)}.___SHighlightedButton_13j8z_gg_._theme_secondary-highlighted_13j8z_gg_:hover .___SText_13j8z_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4);background-image:var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg, #421983, #002b5f))}}.___SHighlightedButton_13j8z_gg_._theme_secondary-highlighted_13j8z_gg_.__active_13j8z_gg_,.___SHighlightedButton_13j8z_gg_._theme_secondary-highlighted_13j8z_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg, #edd9ff, #c4e5fe)) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg, #dcb8ff, #8ecdff)) border-box;color:var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4)}.___SHighlightedButton_13j8z_gg_._theme_secondary-highlighted_13j8z_gg_.__active_13j8z_gg_ .___SText_13j8z_gg_,.___SHighlightedButton_13j8z_gg_._theme_secondary-highlighted_13j8z_gg_:active .___SText_13j8z_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4);background-image:var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg, #421983, #002b5f))}.___SHighlightedButton_13j8z_gg_:focus-visible{outline:0;position:relative}.___SHighlightedButton_13j8z_gg_:focus-visible::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-4px;padding:4px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude}.___SHighlightedButton_13j8z_gg_._neighborLocation_left_13j8z_gg_:focus-visible::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButton_13j8z_gg_._neighborLocation_right_13j8z_gg_:focus-visible::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButton_13j8z_gg_._neighborLocation_both_13j8z_gg_:focus-visible::before{border-radius:0}',
+    '.___SHighlightedButton_66bzf_gg_._theme_primary-highlighted_66bzf_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-image:linear-gradient(90deg,var(--intergalactic-violet-500, #8649e1),var(--intergalactic-blue-500, #006dca),var(--intergalactic-violet-400, #ab6cfe),var(--intergalactic-blue-400, #008ff8));background-position-x:99%;background-size:300%;transition:background-position-x .3s cubic-bezier(.22,.61,.36,1)}@media (hover:hover){.___SHighlightedButton_66bzf_gg_._theme_primary-highlighted_66bzf_gg_:hover{color:var(--intergalactic-text-primary-invert, #ffffff);background-position-x:1%}}.___SHighlightedButton_66bzf_gg_._theme_primary-highlighted_66bzf_gg_.__active_66bzf_gg_,.___SHighlightedButton_66bzf_gg_._theme_primary-highlighted_66bzf_gg_:active{color:var(--intergalactic-text-primary-invert, #ffffff);background-image:var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg, #5925ab, #044792));background-size:100%}.___SHighlightedButton_66bzf_gg_._theme_primary-highlighted_66bzf_gg_:focus-visible{outline:0}.___SHighlightedButton_66bzf_gg_._theme_secondary-highlighted_66bzf_gg_{color:var(--intergalactic-icon-primary-feature-highlight, #8649e1);background:var(--intergalactic-control-secondary-feature-highlight, linear-gradient(90deg, #f9f2ff, #e9f7ff)) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg, #dcb8ff, #8ecdff)) border-box;background-origin:border-box;background-clip:padding-box,border-box}.___SHighlightedButton_66bzf_gg_._theme_secondary-highlighted_66bzf_gg_ .___SText_66bzf_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight, #8649e1);background-image:var(--intergalactic-text-feature-highlight, linear-gradient(90deg, #8649e1, #006dca));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}@media (hover:hover){.___SHighlightedButton_66bzf_gg_._theme_secondary-highlighted_66bzf_gg_:hover{background:var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg, #f2e4ff, #d6edfe)) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg, #dcb8ff, #8ecdff)) border-box;color:var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4)}.___SHighlightedButton_66bzf_gg_._theme_secondary-highlighted_66bzf_gg_:hover .___SText_66bzf_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4);background-image:var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg, #421983, #002b5f))}}.___SHighlightedButton_66bzf_gg_._theme_secondary-highlighted_66bzf_gg_.__active_66bzf_gg_,.___SHighlightedButton_66bzf_gg_._theme_secondary-highlighted_66bzf_gg_:active{background:var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg, #edd9ff, #c4e5fe)) padding-box,var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg, #dcb8ff, #8ecdff)) border-box;color:var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4)}.___SHighlightedButton_66bzf_gg_._theme_secondary-highlighted_66bzf_gg_.__active_66bzf_gg_ .___SText_66bzf_gg_,.___SHighlightedButton_66bzf_gg_._theme_secondary-highlighted_66bzf_gg_:active .___SText_66bzf_gg_{background-color:var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4);background-image:var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg, #421983, #002b5f))}.___SHighlightedButton_66bzf_gg_._theme_secondary-highlighted_66bzf_gg_:focus-visible{outline:0}.___SHighlightedButton_66bzf_gg_{position:relative}.___SHighlightedButton_66bzf_gg_::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:2px;border-radius:calc(var(--intergalactic-control-rounded, 6px) + 3px);background-image:var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.96);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedButton_66bzf_gg_._neighborLocation_left_66bzf_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedButton_66bzf_gg_._neighborLocation_right_66bzf_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedButton_66bzf_gg_._neighborLocation_both_66bzf_gg_::before{border-radius:0}.___SHighlightedButton_66bzf_gg_:focus-visible::before{opacity:1;transform:scale(1)}@supports not (-webkit-mask-composite:xor){.___SHighlightedButton_66bzf_gg_:focus-visible{outline:0;box-shadow:0 0 0 2px #fff,0 0 0 4px #7078fc}.___SHighlightedButton_66bzf_gg_:focus-visible::before{display:none}}',
     /*__inner_css_end__*/
-    "13j8z_gg_"
+    "66bzf_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHighlightedButton": "___SHighlightedButton_13j8z_gg_",
-    "_theme_primary-highlighted": "_theme_primary-highlighted_13j8z_gg_",
-    "_active": "__active_13j8z_gg_",
-    "_theme_secondary-highlighted": "_theme_secondary-highlighted_13j8z_gg_",
-    "__SText": "___SText_13j8z_gg_",
-    "_neighborLocation_left": "_neighborLocation_left_13j8z_gg_",
-    "_neighborLocation_right": "_neighborLocation_right_13j8z_gg_",
-    "_neighborLocation_both": "_neighborLocation_both_13j8z_gg_"
+    "__SHighlightedButton": "___SHighlightedButton_66bzf_gg_",
+    "_theme_primary-highlighted": "_theme_primary-highlighted_66bzf_gg_",
+    "_active": "__active_66bzf_gg_",
+    "_theme_secondary-highlighted": "_theme_secondary-highlighted_66bzf_gg_",
+    "__SText": "___SText_66bzf_gg_",
+    "_neighborLocation_left": "_neighborLocation_left_66bzf_gg_",
+    "_neighborLocation_right": "_neighborLocation_right_66bzf_gg_",
+    "_neighborLocation_both": "_neighborLocation_both_66bzf_gg_"
   })
 );
 var ButtonFHRoot = /* @__PURE__ */ function(_Component) {

package/lib/esm/components/button/button.shadow.css

@@ -1,12 +1,10 @@
 SHighlightedButton[theme='primary-highlighted'] {
   color: var(--intergalactic-text-primary-invert, #ffffff);
-  background-image: linear-gradient(
-    90deg,
-    var(--intergalactic-violet-500, #8649e1),
-    var(--intergalactic-blue-500, #006dca),
-    var(--intergalactic-violet-400, #ab6cfe),
-    var(--intergalactic-blue-400, #008ff8)
-  );
+  background-image: linear-gradient(90deg,
+  var(--intergalactic-violet-500, #8649e1),
+  var(--intergalactic-blue-500, #006dca),
+  var(--intergalactic-violet-400, #ab6cfe),
+  var(--intergalactic-blue-400, #008ff8));
   background-position-x: 99%;
   background-size: 300%;
   transition: background-position-x 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
@@ -22,6 +20,10 @@ SHighlightedButton[theme='primary-highlighted'] {
     background-image: var(--intergalactic-control-primary-feature-highlight-active, linear-gradient(90deg, #5925ab, #044792));
     background-size: 100%;
   }
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
 SHighlightedButton[theme='secondary-highlighted'] {
@@ -37,16 +39,16 @@ SHighlightedButton[theme='secondary-highlighted'] {
     background-color: var(--intergalactic-icon-primary-feature-highlight, #8649e1);
     background-image: var(--intergalactic-text-feature-highlight, linear-gradient(90deg, #8649e1, #006dca));
     background-clip: text;
-    -webkit-text-fill-color: transparent; 
+    -webkit-text-fill-color: transparent;
   }
 
   &:hover {
     background:
       var(--intergalactic-control-secondary-feature-highlight-hover, linear-gradient(90deg, #f2e4ff, #d6edfe)) padding-box,
       var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg, #dcb8ff, #8ecdff)) border-box;
-    
+
     color: var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4);
-    
+
     & SText {
       background-color: var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4);
       background-image: var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg, #421983, #002b5f));
@@ -58,7 +60,7 @@ SHighlightedButton[theme='secondary-highlighted'] {
     background:
       var(--intergalactic-control-secondary-feature-highlight-active, linear-gradient(90deg, #edd9ff, #c4e5fe)) padding-box,
       var(--intergalactic-border-feature-highlight-secondary, linear-gradient(90deg, #dcb8ff, #8ecdff)) border-box;
-    
+
     color: var(--intergalactic-icon-primary-feature-highlight-hover-active, #6B3AB4);
 
     & SText {
@@ -66,36 +68,68 @@ SHighlightedButton[theme='secondary-highlighted'] {
       background-image: var(--intergalactic-text-feature-highlight-hover-active, linear-gradient(90deg, #421983, #002b5f));
     }
   }
+
+  &:focus-visible {
+    outline: none;
+  }
 }
 
-SHighlightedButton:focus-visible {
-  outline: none;
+SHighlightedButton {
   position: relative;
-  /*isolation: isolate;*/
+  /* isolation: isolate; */
 
   &::before {
     content: "";
     position: absolute;
     z-index: -1;
     inset: 0;
-    margin: -4px;
-    padding: 4px;
+    margin: -5px;
+    padding: 2px;
     border-radius: calc(var(--intergalactic-control-rounded, 6px) + 3px);
 
-    background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5)));
+    background-image: var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, #ab6cfe, #008ff8));
+
     mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
     mask-composite: exclude;
+
+    opacity: 0;
+    transform: scale(0.96);
+
+    transition:
+      opacity calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out,
+      transform calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
   }
 
   &[neighborLocation='left']::before {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+
   &[neighborLocation='right']::before {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
+
   &[neighborLocation='both']::before {
     border-radius: 0;
   }
 }
+
+SHighlightedButton:focus-visible::before {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Firefox fallback */
+@supports not (-webkit-mask-composite: xor) {
+  SHighlightedButton:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px #ffffff,
+      0 0 0 4px #7078FC;
+  }
+
+  SHighlightedButton:focus-visible::before {
+    display: none;
+  }
+}

package/lib/esm/components/checkbox/Checkbox.mjs

@@ -1,30 +1,25 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _isNativeReflectConstruct from "@babel/runtime/helpers/esm/isNativeReflectConstruct";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { createComponent, sstyled, assignProps, Component } from "@semcore/core";
 import Checkbox from "@semcore/checkbox";
 import React from "react";
 import { AnimatedSparkles } from "../../inner-components/sparkle/AnimatedSparkles.mjs";
-function _callSuper(t, o, e) {
-  return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e));
-}
 /*!__reshadow-styles__:"./checkbox.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    '.___SHighlightedCheckbox_19of2_gg_:not(._state_invalid_19of2_gg_) input[data-ui-name="CheckboxFH.Value"]:focus-visible+[data-ui-name="Value.CheckMark"]::before{box-shadow:none;content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-3px;padding:1px;opacity:1;border-width:3px;border-radius:calc(var(--intergalactic-addon-rounded, 4px) + 3px);background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box;-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude}.___SHighlightedCheckbox_19of2_gg_:not(._state_invalid_19of2_gg_) input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before{-webkit-mask:none;mask:none;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box}.___SHighlightedCheckbox_19of2_gg_:not(._state_invalid_19of2_gg_) [data-ui-name="Value.CheckMark"]::before{border-color:transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)\n    ) border-box;background-origin:border-box;background-clip:padding-box,border-box}.___SHighlightedCheckbox_19of2_gg_:not(._state_invalid_19of2_gg_) input[data-ui-name="CheckboxFH.Value"]:checked~[data-ui-name="Value.CheckMark"]::before{border-color:transparent;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box}',
+    '.___SHighlightedCheckbox_1kijq_gg_:not(._state_invalid_1kijq_gg_) [data-ui-name="Value.CheckMark"]{border:1px solid transparent;border-radius:var(--intergalactic-addon-rounded, 4px);background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;background-origin:border-box;background-clip:padding-box,border-box}.___SHighlightedCheckbox_1kijq_gg_:not(._state_invalid_1kijq_gg_) input[data-ui-name="CheckboxFH.Value"]:checked+[data-ui-name="Value.CheckMark"]{border-color:transparent;background:var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box}.___SHighlightedCheckbox_1kijq_gg_:not(._state_invalid_1kijq_gg_) [data-ui-name="Value.CheckMark"]::before{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-5px;padding:1px;border-width:2px;border-radius:calc(var(--intergalactic-addon-rounded, 4px) + 3px);border-color:transparent;pointer-events:none;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;-webkit-mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);mask:linear-gradient(0deg,#fff,#fff) content-box,linear-gradient(0deg,#fff,#fff);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transform:scale(.9);transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,transform calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedCheckbox_1kijq_gg_:not(._state_invalid_1kijq_gg_) input[data-ui-name="CheckboxFH.Value"]:checked:not(:focus-visible)+[data-ui-name="Value.CheckMark"]::before{opacity:0;transform:scale(.9)}.___SHighlightedCheckbox_1kijq_gg_:not(._state_invalid_1kijq_gg_) input[data-ui-name="CheckboxFH.Value"]:focus-visible+[data-ui-name="Value.CheckMark"]::before{opacity:1;transform:scale(1)}.___SHighlightedCheckbox_1kijq_gg_:not(._state_invalid_1kijq_gg_) input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before{border-color:transparent;background:linear-gradient(white,white) padding-box,var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box}',
     /*__inner_css_end__*/
-    "19of2_gg_"
+    "1kijq_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SHighlightedCheckbox": "___SHighlightedCheckbox_19of2_gg_",
-    "_state_invalid": "_state_invalid_19of2_gg_"
+    "__SHighlightedCheckbox": "___SHighlightedCheckbox_1kijq_gg_",
+    "_state_invalid": "_state_invalid_1kijq_gg_"
   })
 );
 var CheckboxFHRoot = /* @__PURE__ */ function(_Component) {

package/lib/esm/components/checkbox/checkbox.shadow.css

@@ -1,38 +1,54 @@
 SHighlightedCheckbox:not([state="invalid"]) {
-  input[data-ui-name="CheckboxFH.Value"]:focus-visible + [data-ui-name="Value.CheckMark"]::before {
-    box-shadow: none;
+  [data-ui-name="Value.CheckMark"] {
+    border: 1px solid transparent;
+    border-radius: var(--intergalactic-addon-rounded, 4px);
+    background: linear-gradient(white, white) padding-box,
+      var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;
+    background-origin: border-box;
+    background-clip: padding-box, border-box;
+  }
+
+  input[data-ui-name="CheckboxFH.Value"]:checked + [data-ui-name="Value.CheckMark"] {
+    border-color: transparent;
+    background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,
+      var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box;
+  }
+
+  [data-ui-name="Value.CheckMark"]::before {
     content: "";
     position: absolute;
     z-index: -1;
     inset: 0;
-    margin: -3px;
+    margin: -5px;
     padding: 1px;
-    opacity: 1;
-    border-width: 3px;
+    border-width: 2px;
     border-radius: calc(var(--intergalactic-addon-rounded, 4px) + 3px);
-
-    background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box, var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box;
+    border-color: transparent;
+    pointer-events: none;
+    background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)) border-box;
     mask: linear-gradient(0deg, #fff, #fff) content-box, linear-gradient(0deg, #fff, #fff);
     mask-composite: exclude;
+
+    opacity: 0;
+    transform: scale(0.9);
+
+    transition:
+      opacity calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out,
+      transform calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
   }
 
-  input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible + [data-ui-name="Value.CheckMark"]::before {
-    mask: none;
-    background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box, var(--intergalactic-keyboard-focus-feature-highlight-outline, linear-gradient(90deg, rgba(171, 108, 254, 0.5), rgba(0, 143, 248, 0.5))) border-box;
+  input[data-ui-name="CheckboxFH.Value"]:checked:not(:focus-visible)+[data-ui-name="Value.CheckMark"]::before {
+    opacity: 0;
+    transform: scale(0.9);
   }
 
-  [data-ui-name="Value.CheckMark"]::before {
-    border-color: transparent;
-    background: linear-gradient(white, white) padding-box,
-      var(--intergalactic-border-feature-highlight, linear-gradient(90deg, #c695ff, #2bb3ff)
-    ) border-box;
-    background-origin: border-box;
-    background-clip: padding-box, border-box;
+  input[data-ui-name="CheckboxFH.Value"]:focus-visible+[data-ui-name="Value.CheckMark"]::before {
+    opacity: 1;
+    transform: scale(1);
   }
 
-  input[data-ui-name="CheckboxFH.Value"]:checked ~ [data-ui-name="Value.CheckMark"]::before {
+  input[data-ui-name="CheckboxFH.Value"]:checked:focus-visible+[data-ui-name="Value.CheckMark"]::before {
     border-color: transparent;
-    background: var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) padding-box,
-      var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box;
+    background: linear-gradient(white, white) padding-box, var(--intergalactic-border-feature-highlight-active, linear-gradient(90deg, #ab6cfe, #008ff8)) border-box;
   }
 }