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

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [16.2.0] - 2025-09-12
+
+### Changed
+
+- Styles for `:focus-visible`.
+
 ## [16.1.1] - 2025-09-17
 
 ### Changed

package/lib/cjs/components/badge/Badge.js

@@ -8,25 +8,22 @@ exports.BadgeFH = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _badge = _interopRequireDefault(require("@semcore/badge"));
 var _react = _interopRequireDefault(require("react"));
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 /*!__reshadow-styles__:"./badge.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.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))}", /*__inner_css_end__*/"dpfxu_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___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__*/"1uty5_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedBadge": "___SHighlightedBadge_dpfxu_gg_"
+  "__SHighlightedBadge": "___SHighlightedBadge_1uty5_gg_"
 });
 var BadgeFHRoot = /*#__PURE__*/function (_Component) {
   function BadgeFHRoot() {
     (0, _classCallCheck2["default"])(this, BadgeFHRoot);
-    return _callSuper(this, BadgeFHRoot, arguments);
+    return (0, _callSuper2["default"])(this, BadgeFHRoot, arguments);
   }
   (0, _inherits2["default"])(BadgeFHRoot, _Component);
   return (0, _createClass2["default"])(BadgeFHRoot, [{

package/lib/cjs/components/badge/Badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.js","names":["_core","require","_badge","_interopRequireDefault","_react","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","BadgeFHRoot","_Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","_ref2","SHighlightedBadge","Badge","styles","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","BadgeFH","exports","createComponent"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import Badge from '@semcore/badge';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport style from './badge.shadow.css';\n\nclass BadgeFHRoot extends Component {\n  static displayName = 'BadgeFH';\n  static style = style;\n\n  render() {\n    const SHighlightedBadge = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedBadge render={Badge} />,\n    );\n  }\n}\n\nexport const BadgeFH = createComponent(BadgeFHRoot);\n"],"mappings":";;;;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAA0B,SAAAI,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,MAAAK,0BAAA,iBAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA;AAAA,IAAAQ,KAAA,8BAAAhB,KAAA,CAAAiB,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;AAAA;AAAA,IAIpBC,WAAW,0BAAAC,UAAA;EAAA,SAAAD,YAAA;IAAA,IAAAE,gBAAA,mBAAAF,WAAA;IAAA,OAAAd,UAAA,OAAAc,WAAA,EAAAG,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAJ,WAAA,EAAAC,UAAA;EAAA,WAAAI,aAAA,aAAAL,WAAA;IAAAM,GAAA;IAAAC,KAAA,EAIf,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,iBAAiB,GAIMC,iBAAK;MAHlC,IAAQC,MAAM,GAAK,IAAI,CAACJ,OAAO,CAAvBI,MAAM;MAEd,OAAAH,KAAA,GAAO,IAAAb,aAAO,EAACgB,MAAM,CAAC,eACpB7B,MAAA,YAAA8B,aAAA,CAACH,iBAAiB,EAAAD,KAAA,CAAAK,EAAA,0BAAAC,cAAA,qBAAApC,KAAA,CAAAqC,WAAA,MAAAT,IAAA,GAAiB,CAAC;IAExC;EAAC;AAAA,EAXuBU,eAAS;AAAA,IAAAC,gBAAA,aAA7BpB,WAAW,iBACM,SAAS;AAAA,IAAAoB,gBAAA,aAD1BpB,WAAW,WAEAH,KAAK;AAYf,IAAMwB,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,qBAAe,EAACvB,WAAW,CAAC","ignoreList":[]}
+{"version":3,"file":"Badge.js","names":["_core","require","_badge","_interopRequireDefault","_react","style","sstyled","insert","BadgeFHRoot","_Component","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","_ref2","SHighlightedBadge","Badge","styles","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","BadgeFH","exports","createComponent"],"sources":["../../../../src/components/badge/Badge.tsx"],"sourcesContent":["import Badge from '@semcore/badge';\nimport { createComponent, Component, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport style from './badge.shadow.css';\n\nclass BadgeFHRoot extends Component {\n  static displayName = 'BadgeFH';\n  static style = style;\n\n  render() {\n    const SHighlightedBadge = Root;\n    const { styles } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedBadge render={Badge} />,\n    );\n  }\n}\n\nexport const BadgeFH = createComponent(BadgeFHRoot);\n"],"mappings":";;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AADA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AAA0B;AAAA,IAAAI,KAAA,8BAAAL,KAAA,CAAAM,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;AAAA;AAAA,IAIpBC,WAAW,0BAAAC,UAAA;EAAA,SAAAD,YAAA;IAAA,IAAAE,gBAAA,mBAAAF,WAAA;IAAA,WAAAG,WAAA,mBAAAH,WAAA,EAAAI,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAL,WAAA,EAAAC,UAAA;EAAA,WAAAK,aAAA,aAAAN,WAAA;IAAAO,GAAA;IAAAC,KAAA,EAIf,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,iBAAiB,GAIMC,iBAAK;MAHlC,IAAQC,MAAM,GAAK,IAAI,CAACJ,OAAO,CAAvBI,MAAM;MAEd,OAAAH,KAAA,GAAO,IAAAd,aAAO,EAACiB,MAAM,CAAC,eACpBnB,MAAA,YAAAoB,aAAA,CAACH,iBAAiB,EAAAD,KAAA,CAAAK,EAAA,0BAAAC,cAAA,qBAAA1B,KAAA,CAAA2B,WAAA,MAAAT,IAAA,GAAiB,CAAC;IAExC;EAAC;AAAA,EAXuBU,eAAS;AAAA,IAAAC,gBAAA,aAA7BrB,WAAW,iBACM,SAAS;AAAA,IAAAqB,gBAAA,aAD1BrB,WAAW,WAEAH,KAAK;AAYf,IAAMyB,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,qBAAe,EAACxB,WAAW,CAAC","ignoreList":[]}

package/lib/cjs/components/button/Button.js

@@ -8,9 +8,7 @@ exports.ButtonFH = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
@@ -18,19 +16,18 @@ var _button = _interopRequireDefault(require("@semcore/button"));
 var _m = _interopRequireDefault(require("@semcore/icon/SummaryAI/m"));
 var _react = _interopRequireDefault(require("react"));
 var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 /*!__reshadow-styles__:"./button.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.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}", /*__inner_css_end__*/"13j8z_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___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__*/"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) {
   function ButtonFHRoot() {
@@ -39,7 +36,7 @@ var ButtonFHRoot = /*#__PURE__*/function (_Component) {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, ButtonFHRoot, [].concat(args));
+    _this = (0, _callSuper2["default"])(this, ButtonFHRoot, [].concat(args));
     (0, _defineProperty2["default"])(_this, "state", {
       clicked: false
     });

package/lib/cjs/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["_core","require","_button","_interopRequireDefault","_m","_react","_AnimatedSparkles","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","ButtonFHRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","clicked","_inherits2","_createClass2","key","value","handleClick","_this2","onClick","asProps","setState","setTimeout","getAddonProps","state","render","_ref","_ref3","styles","SHighlightedButton","Button","createElement","cn","_objectSpread2","assignProps","bind","Component","theme","HighlightAddon","props","_ref2","arguments[0]","_ref4","SAddon","Addon","animatedSparkleCount","Children","hasChildren","children","Fragment","AnimatedSparkles","ButtonFH","exports","createComponent","Text"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import Button from '@semcore/button';\nimport { createComponent, Root, sstyled, Component } from '@semcore/core';\nimport type { IRootNodeProps } from '@semcore/core/src/core-types/Component';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport React from 'react';\n\nimport style from './button.shadow.css';\nimport type { HighLightedButtonAddonProps, HighlightedButtonComponent } from './Button.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass ButtonFHRoot extends Component {\n  static displayName = 'ButtonFH';\n  static style = style;\n\n  static defaultProps = {\n    theme: 'highlighted',\n  };\n\n  state = {\n    clicked: false,\n  };\n\n  handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    const { onClick } = this.asProps;\n\n    onClick?.(e);\n    this.setState({ clicked: false });\n    setTimeout(() => {\n      this.setState({ clicked: true });\n    });\n  }\n\n  getAddonProps() {\n    return {\n      clicked: this.state.clicked,\n    };\n  }\n\n  render() {\n    const { styles } = this.asProps;\n    const SHighlightedButton = Root;\n    return sstyled(styles)(\n      <SHighlightedButton render={Button} use:onClick={this.handleClick.bind(this)} />,\n    );\n  }\n}\n\nfunction HighlightAddon(props: HighLightedButtonAddonProps & { clicked: boolean } & IRootNodeProps) {\n  const SAddon = Root;\n  const { clicked, animatedSparkleCount, Children, children: hasChildren } = props;\n  return sstyled(props.styles)(\n    <SAddon render={Button.Addon}>\n      {hasChildren\n        ? (<Children />)\n        : (\n            <>\n              <SummaryAI />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </SAddon>,\n  );\n}\n\nexport const ButtonFH = createComponent(ButtonFHRoot, {\n  Addon: HighlightAddon,\n  Text: Button.Text,\n}) as HighlightedButtonComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["_core","require","_button","_interopRequireDefault","_m","_react","_AnimatedSparkles","style","sstyled","insert","ButtonFHRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","clicked","_inherits2","_createClass2","key","value","handleClick","e","_this2","onClick","asProps","setState","setTimeout","getAddonProps","state","render","_ref","_ref3","styles","SHighlightedButton","Button","createElement","cn","_objectSpread2","assignProps","bind","Component","theme","HighlightAddon","props","_ref2","arguments[0]","_ref4","SAddon","Addon","animatedSparkleCount","Children","hasChildren","children","Fragment","AnimatedSparkles","ButtonFH","exports","createComponent","Text"],"sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import Button from '@semcore/button';\nimport { createComponent, Root, sstyled, Component } from '@semcore/core';\nimport type { IRootNodeProps } from '@semcore/core/src/core-types/Component';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport React from 'react';\n\nimport style from './button.shadow.css';\nimport type { HighLightedButtonAddonProps, HighlightedButtonComponent } from './Button.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass ButtonFHRoot extends Component {\n  static displayName = 'ButtonFH';\n  static style = style;\n\n  static defaultProps = {\n    theme: 'highlighted',\n  };\n\n  state = {\n    clicked: false,\n  };\n\n  handleClick(e: React.MouseEvent<HTMLButtonElement>) {\n    const { onClick } = this.asProps;\n\n    onClick?.(e);\n    this.setState({ clicked: false });\n    setTimeout(() => {\n      this.setState({ clicked: true });\n    });\n  }\n\n  getAddonProps() {\n    return {\n      clicked: this.state.clicked,\n    };\n  }\n\n  render() {\n    const { styles } = this.asProps;\n    const SHighlightedButton = Root;\n    return sstyled(styles)(\n      <SHighlightedButton render={Button} use:onClick={this.handleClick.bind(this)} />,\n    );\n  }\n}\n\nfunction HighlightAddon(props: HighLightedButtonAddonProps & { clicked: boolean } & IRootNodeProps) {\n  const SAddon = Root;\n  const { clicked, animatedSparkleCount, Children, children: hasChildren } = props;\n  return sstyled(props.styles)(\n    <SAddon render={Button.Addon}>\n      {hasChildren\n        ? (<Children />)\n        : (\n            <>\n              <SummaryAI />\n              <AnimatedSparkles show={clicked} count={animatedSparkleCount} />\n            </>\n          )}\n    </SAddon>,\n  );\n}\n\nexport const ButtonFH = createComponent(ButtonFHRoot, {\n  Addon: HighlightAddon,\n  Text: Button.Text,\n}) as HighlightedButtonComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/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/cjs/components/checkbox/Checkbox.js

@@ -8,22 +8,19 @@ exports.CheckboxFH = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _checkbox = _interopRequireDefault(require("@semcore/checkbox"));
 var _react = _interopRequireDefault(require("react"));
 var _AnimatedSparkles = require("../../inner-components/sparkle/AnimatedSparkles");
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 /*!__reshadow-styles__:"./checkbox.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.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}", /*__inner_css_end__*/"19of2_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___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__*/"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) {
   function CheckboxFHRoot() {
@@ -32,7 +29,7 @@ var CheckboxFHRoot = /*#__PURE__*/function (_Component) {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, CheckboxFHRoot, [].concat(args));
+    _this = (0, _callSuper2["default"])(this, CheckboxFHRoot, [].concat(args));
     (0, _defineProperty2["default"])(_this, "inputRef", /*#__PURE__*/_react["default"].createRef());
     return _this;
   }

package/lib/cjs/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["_core","require","_checkbox","_interopRequireDefault","_react","_AnimatedSparkles","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","CheckboxFHRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","concat","_defineProperty2","React","createRef","_inherits2","_createClass2","key","value","getValueProps","_this2","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","_this$inputRef$curren","size","asProps","checked","current","show","top","left","render","_ref","_ref2","SHighlightedCheckbox","Checkbox","_this$asProps","styles","Children","hasChildren","children","createElement","cn","_objectSpread2","assignProps","Fragment","CheckboxFH","Value","Text","Component","exports","createComponent","AnimatedSparkles"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { CheckboxProps } from '@semcore/checkbox';\nimport Checkbox from '@semcore/checkbox';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport style from './checkbox.shadow.css';\nimport type { HighlightedCheckboxComponent } from './Checkbox.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass CheckboxFHRoot extends Component<CheckboxProps> {\n  static displayName = 'CheckboxFH';\n  static style = style;\n\n  inputRef = React.createRef<HTMLInputElement>();\n\n  getValueProps() {\n    return {\n      ref: this.inputRef,\n      onChange: () => {\n        setTimeout(() => {\n          this.forceUpdate();\n        });\n      },\n    };\n  }\n\n  getAnimatedSparklesProps() {\n    const { size } = this.asProps;\n    const checked = this.inputRef.current?.checked;\n\n    return {\n      show: checked,\n      top: size === 'l' ? '7px' : '5px',\n      left: size === 'l' ? '5px' : '3px',\n    };\n  }\n\n  render() {\n    const SHighlightedCheckbox = Root;\n    const { styles, Children, children: hasChildren } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedCheckbox render={Checkbox}>\n        {hasChildren\n          ? <Children />\n          : (\n              <>\n                <CheckboxFH.Value />\n                <CheckboxFH.Text />\n              </>\n            )}\n      </SHighlightedCheckbox>,\n    );\n  }\n}\n\nexport const CheckboxFH = createComponent(CheckboxFHRoot, {\n  Text: Checkbox.Text,\n  Value: Checkbox.Value,\n  AnimatedSparkles,\n}) as HighlightedCheckboxComponent;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Checkbox.js","names":["_core","require","_checkbox","_interopRequireDefault","_react","_AnimatedSparkles","style","sstyled","insert","CheckboxFHRoot","_Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","React","createRef","_inherits2","_createClass2","key","value","getValueProps","_this2","ref","inputRef","onChange","setTimeout","forceUpdate","getAnimatedSparklesProps","_this$inputRef$curren","size","asProps","checked","current","show","top","left","render","_ref","_ref2","SHighlightedCheckbox","Checkbox","_this$asProps","styles","Children","hasChildren","children","createElement","cn","_objectSpread2","assignProps","Fragment","CheckboxFH","Value","Text","Component","exports","createComponent","AnimatedSparkles"],"sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import type { CheckboxProps } from '@semcore/checkbox';\nimport Checkbox from '@semcore/checkbox';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport React from 'react';\n\nimport style from './checkbox.shadow.css';\nimport type { HighlightedCheckboxComponent } from './Checkbox.type';\nimport { AnimatedSparkles } from '../../inner-components/sparkle/AnimatedSparkles';\n\nclass CheckboxFHRoot extends Component<CheckboxProps> {\n  static displayName = 'CheckboxFH';\n  static style = style;\n\n  inputRef = React.createRef<HTMLInputElement>();\n\n  getValueProps() {\n    return {\n      ref: this.inputRef,\n      onChange: () => {\n        setTimeout(() => {\n          this.forceUpdate();\n        });\n      },\n    };\n  }\n\n  getAnimatedSparklesProps() {\n    const { size } = this.asProps;\n    const checked = this.inputRef.current?.checked;\n\n    return {\n      show: checked,\n      top: size === 'l' ? '7px' : '5px',\n      left: size === 'l' ? '5px' : '3px',\n    };\n  }\n\n  render() {\n    const SHighlightedCheckbox = Root;\n    const { styles, Children, children: hasChildren } = this.asProps;\n\n    return sstyled(styles)(\n      <SHighlightedCheckbox render={Checkbox}>\n        {hasChildren\n          ? <Children />\n          : (\n              <>\n                <CheckboxFH.Value />\n                <CheckboxFH.Text />\n              </>\n            )}\n      </SHighlightedCheckbox>,\n    );\n  }\n}\n\nexport const CheckboxFH = createComponent(CheckboxFHRoot, {\n  Text: Checkbox.Text,\n  Value: Checkbox.Value,\n  AnimatedSparkles,\n}) as HighlightedCheckboxComponent;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/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;
   }
 }

package/lib/cjs/components/input/Input.js

@@ -8,32 +8,29 @@ exports.InputFH = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _isNativeReflectConstruct2 = _interopRequireDefault(require("@babel/runtime/helpers/isNativeReflectConstruct"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _callSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/callSuper"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _core = require("@semcore/core");
 var _m = _interopRequireDefault(require("@semcore/icon/SummaryAI/m"));
 var _input = _interopRequireDefault(require("@semcore/input"));
 var _react = _interopRequireDefault(require("react"));
-function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, (0, _isNativeReflectConstruct2["default"])() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
 /*!__reshadow-styles__:"./input.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedInput_6xbfl_gg_._state_normal_6xbfl_gg_ .___SOutline_6xbfl_gg_{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;background-origin:border-box;background-clip:padding-box,border-box;border-color:transparent}.___SHighlightedInput_6xbfl_gg_._state_normal_6xbfl_gg_:has(.___SValue_6xbfl_gg_:focus-visible) .___SOutline_6xbfl_gg_{box-shadow:none;border-color:transparent}.___SHighlightedInput_6xbfl_gg_._state_normal_6xbfl_gg_:has(.___SValue_6xbfl_gg_:focus-visible) .___SOutline_6xbfl_gg_::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}.___SHighlightedInput_6xbfl_gg_._state_normal_6xbfl_gg_._neighborLocation_left_6xbfl_gg_:has(.___SValue_6xbfl_gg_:focus-visible) .___SOutline_6xbfl_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedInput_6xbfl_gg_._state_normal_6xbfl_gg_._neighborLocation_right_6xbfl_gg_:has(.___SValue_6xbfl_gg_:focus-visible) .___SOutline_6xbfl_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedInput_6xbfl_gg_._state_normal_6xbfl_gg_._neighborLocation_both_6xbfl_gg_:has(.___SValue_6xbfl_gg_:focus-visible) .___SOutline_6xbfl_gg_::before{border-radius:0}", /*__inner_css_end__*/"6xbfl_gg_"),
+var style = (/*__reshadow_css_start__*/_core.sstyled.insert(/*__inner_css_start__*/".___SHighlightedInput_15bq1_gg_._state_normal_15bq1_gg_ .___SOutline_15bq1_gg_{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;border-color:transparent}.___SHighlightedInput_15bq1_gg_._state_normal_15bq1_gg_ .___SOutline_15bq1_gg_::before{content:\"\";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;margin:-3px;padding:3px;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;transition:opacity calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SHighlightedInput_15bq1_gg_._state_normal_15bq1_gg_:has(.___SValue_15bq1_gg_:focus-visible) .___SOutline_15bq1_gg_{outline:0}.___SHighlightedInput_15bq1_gg_._state_normal_15bq1_gg_:has(.___SValue_15bq1_gg_:focus-visible) .___SOutline_15bq1_gg_::before{opacity:1}.___SHighlightedInput_15bq1_gg_._state_normal_15bq1_gg_._neighborLocation_left_15bq1_gg_ .___SOutline_15bq1_gg_::before{border-top-left-radius:0;border-bottom-left-radius:0}.___SHighlightedInput_15bq1_gg_._state_normal_15bq1_gg_._neighborLocation_right_15bq1_gg_ .___SOutline_15bq1_gg_::before{border-top-right-radius:0;border-bottom-right-radius:0}.___SHighlightedInput_15bq1_gg_._state_normal_15bq1_gg_._neighborLocation_both_15bq1_gg_ .___SOutline_15bq1_gg_::before{border-radius:0}@supports not (-webkit-mask-composite:xor){.___SHighlightedInput_15bq1_gg_._state_normal_15bq1_gg_:has(.___SValue_15bq1_gg_:focus-visible) .___SOutline_15bq1_gg_{outline:0;border-color:#7078fc;box-shadow:0 0 0 0#fff,0 0 0 2px #7078fc}.___SHighlightedInput_15bq1_gg_._state_normal_15bq1_gg_:has(.___SValue_15bq1_gg_:focus-visible) .___SOutline_15bq1_gg_::before{display:none}}", /*__inner_css_end__*/"15bq1_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHighlightedInput": "___SHighlightedInput_6xbfl_gg_",
-  "_state_normal": "_state_normal_6xbfl_gg_",
-  "__SOutline": "___SOutline_6xbfl_gg_",
-  "__SValue": "___SValue_6xbfl_gg_",
-  "_neighborLocation_left": "_neighborLocation_left_6xbfl_gg_",
-  "_neighborLocation_right": "_neighborLocation_right_6xbfl_gg_",
-  "_neighborLocation_both": "_neighborLocation_both_6xbfl_gg_"
+  "__SHighlightedInput": "___SHighlightedInput_15bq1_gg_",
+  "_state_normal": "_state_normal_15bq1_gg_",
+  "__SValue": "___SValue_15bq1_gg_",
+  "__SOutline": "___SOutline_15bq1_gg_",
+  "_neighborLocation_left": "_neighborLocation_left_15bq1_gg_",
+  "_neighborLocation_right": "_neighborLocation_right_15bq1_gg_",
+  "_neighborLocation_both": "_neighborLocation_both_15bq1_gg_"
 });
 var InputFHRoot = /*#__PURE__*/function (_Component) {
   function InputFHRoot() {
     (0, _classCallCheck2["default"])(this, InputFHRoot);
-    return _callSuper(this, InputFHRoot, arguments);
+    return (0, _callSuper2["default"])(this, InputFHRoot, arguments);
   }
   (0, _inherits2["default"])(InputFHRoot, _Component);
   return (0, _createClass2["default"])(InputFHRoot, [{

package/lib/cjs/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_core","require","_m","_interopRequireDefault","_input","_react","_callSuper","t","o","e","_getPrototypeOf2","_possibleConstructorReturn2","_isNativeReflectConstruct2","Reflect","construct","constructor","apply","style","sstyled","insert","InputFHRoot","_Component","_classCallCheck2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","_ref3","SHighlightedInput","Input","styles","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","HighlightAddon","props","_ref2","arguments[0]","Children","hasChildren","children","Addon","color","InputFH","exports","createComponent","Value"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport Input from '@semcore/input';\nimport React from 'react';\n\nimport style from './input.shadow.css';\n\nclass InputFHRoot extends Component {\n  static displayName = 'InputFH';\n  static style = style;\n\n  render() {\n    const SHighlightedInput = Root;\n    return sstyled(this.asProps.styles)(\n      <SHighlightedInput render={Input} />,\n    );\n  }\n}\n\nfunction HighlightAddon(props: IRootComponentProps) {\n  const { Children, children: hasChildren } = props;\n  return (\n    <Root render={Input.Addon}>\n      {hasChildren ? (<Children />) : (<SummaryAI color='--intergalactic-icon-primary-feature-highlight' />)}\n    </Root>\n  );\n}\n\nexport const InputFH = createComponent(InputFHRoot, {\n  Addon: HighlightAddon,\n  Value: Input.Value,\n}) as typeof Input;\n"],"mappings":";;;;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,EAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA0B,SAAAK,WAAAC,CAAA,EAAAC,CAAA,EAAAC,CAAA,WAAAD,CAAA,OAAAE,gBAAA,aAAAF,CAAA,OAAAG,2BAAA,aAAAJ,CAAA,MAAAK,0BAAA,iBAAAC,OAAA,CAAAC,SAAA,CAAAN,CAAA,EAAAC,CAAA,YAAAC,gBAAA,aAAAH,CAAA,EAAAQ,WAAA,IAAAP,CAAA,CAAAQ,KAAA,CAAAT,CAAA,EAAAE,CAAA;AAAA;AAAA,IAAAQ,KAAA,8BAAAjB,KAAA,CAAAkB,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAIpBC,WAAW,0BAAAC,UAAA;EAAA,SAAAD,YAAA;IAAA,IAAAE,gBAAA,mBAAAF,WAAA;IAAA,OAAAd,UAAA,OAAAc,WAAA,EAAAG,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAJ,WAAA,EAAAC,UAAA;EAAA,WAAAI,aAAA,aAAAL,WAAA;IAAAM,GAAA;IAAAC,KAAA,EAIf,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,iBAAiB,GAEMC,iBAAK;MADlC,OAAAF,KAAA,GAAO,IAAAb,aAAO,EAAC,IAAI,CAACY,OAAO,CAACI,MAAM,CAAC,eACjC7B,MAAA,YAAA8B,aAAA,CAACH,iBAAiB,EAAAD,KAAA,CAAAK,EAAA,0BAAAC,cAAA,qBAAArC,KAAA,CAAAsC,WAAA,MAAAT,IAAA,GAAiB,CAAC;IAExC;EAAC;AAAA,EATuBU,eAAS;AAAA,IAAAC,gBAAA,aAA7BpB,WAAW,iBACM,SAAS;AAAA,IAAAoB,gBAAA,aAD1BpB,WAAW,WAEAH,KAAK;AAUtB,SAASwB,cAAcA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAClD,IAAQC,QAAQ,GAA4BH,KAAK,CAAzCG,QAAQ;IAAYC,WAAW,GAAKJ,KAAK,CAA/BK,QAAQ;EAC1B,oBACE1C,MAAA,YAAA8B,aAAA,CAAcF,iBAAK,CAACe,KAAK,MAAAhD,KAAA,CAAAsC,WAAA,MAAAK,KAAA,GACtBG,WAAW,gBAAIzC,MAAA,YAAA8B,aAAA,CAACU,QAAQ,MAAE,CAAC,gBAAKxC,MAAA,YAAA8B,aAAA,CAACjC,EAAA,WAAS;IAAC+C,KAAK,EAAC;EAAgD,CAAE,CAChG,CAAC;AAEX;AAEO,IAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,qBAAe,EAAChC,WAAW,EAAE;EAClD4B,KAAK,EAAEP,cAAc;EACrBY,KAAK,EAAEpB,iBAAK,CAACoB;AACf,CAAC,CAAiB","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["_core","require","_m","_interopRequireDefault","_input","_react","style","sstyled","insert","InputFHRoot","_Component","_classCallCheck2","_callSuper2","arguments","_inherits2","_createClass2","key","value","render","_ref","asProps","_ref3","SHighlightedInput","Input","styles","createElement","cn","_objectSpread2","assignProps","Component","_defineProperty2","HighlightAddon","props","_ref2","arguments[0]","Children","hasChildren","children","Addon","color","InputFH","exports","createComponent","Value"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import type { IRootComponentProps } from '@semcore/core';\nimport { Component, createComponent, Root, sstyled } from '@semcore/core';\nimport SummaryAI from '@semcore/icon/SummaryAI/m';\nimport Input from '@semcore/input';\nimport React from 'react';\n\nimport style from './input.shadow.css';\n\nclass InputFHRoot extends Component {\n  static displayName = 'InputFH';\n  static style = style;\n\n  render() {\n    const SHighlightedInput = Root;\n    return sstyled(this.asProps.styles)(\n      <SHighlightedInput render={Input} />,\n    );\n  }\n}\n\nfunction HighlightAddon(props: IRootComponentProps) {\n  const { Children, children: hasChildren } = props;\n  return (\n    <Root render={Input.Addon}>\n      {hasChildren ? (<Children />) : (<SummaryAI color='--intergalactic-icon-primary-feature-highlight' />)}\n    </Root>\n  );\n}\n\nexport const InputFH = createComponent(InputFHRoot, {\n  Addon: HighlightAddon,\n  Value: Input.Value,\n}) as typeof Input;\n"],"mappings":";;;;;;;;;;;;;AACA,IAAAA,KAAA,GAAAC,OAAA;AACA,IAAAC,EAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,MAAA,GAAAF,sBAAA,CAAAF,OAAA;AAA0B;AAAA,IAAAK,KAAA,8BAAAN,KAAA,CAAAO,OAAA,CAAAC,MAAA;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;AAAA;AAAA,IAIpBC,WAAW,0BAAAC,UAAA;EAAA,SAAAD,YAAA;IAAA,IAAAE,gBAAA,mBAAAF,WAAA;IAAA,WAAAG,WAAA,mBAAAH,WAAA,EAAAI,SAAA;EAAA;EAAA,IAAAC,UAAA,aAAAL,WAAA,EAAAC,UAAA;EAAA,WAAAK,aAAA,aAAAN,WAAA;IAAAO,GAAA;IAAAC,KAAA,EAIf,SAAAC,MAAMA,CAAA,EAAG;MAAA,IAAAC,IAAA,QAAAC,OAAA;QAAAC,KAAA;MACP,IAAMC,iBAAiB,GAEMC,iBAAK;MADlC,OAAAF,KAAA,GAAO,IAAAd,aAAO,EAAC,IAAI,CAACa,OAAO,CAACI,MAAM,CAAC,eACjCnB,MAAA,YAAAoB,aAAA,CAACH,iBAAiB,EAAAD,KAAA,CAAAK,EAAA,0BAAAC,cAAA,qBAAA3B,KAAA,CAAA4B,WAAA,MAAAT,IAAA,GAAiB,CAAC;IAExC;EAAC;AAAA,EATuBU,eAAS;AAAA,IAAAC,gBAAA,aAA7BrB,WAAW,iBACM,SAAS;AAAA,IAAAqB,gBAAA,aAD1BrB,WAAW,WAEAH,KAAK;AAUtB,SAASyB,cAAcA,CAACC,KAA0B,EAAE;EAAA,IAAAC,KAAA,GAAAC,YAAA;EAClD,IAAQC,QAAQ,GAA4BH,KAAK,CAAzCG,QAAQ;IAAYC,WAAW,GAAKJ,KAAK,CAA/BK,QAAQ;EAC1B,oBACEhC,MAAA,YAAAoB,aAAA,CAAcF,iBAAK,CAACe,KAAK,MAAAtC,KAAA,CAAA4B,WAAA,MAAAK,KAAA,GACtBG,WAAW,gBAAI/B,MAAA,YAAAoB,aAAA,CAACU,QAAQ,MAAE,CAAC,gBAAK9B,MAAA,YAAAoB,aAAA,CAACvB,EAAA,WAAS;IAACqC,KAAK,EAAC;EAAgD,CAAE,CAChG,CAAC;AAEX;AAEO,IAAMC,OAAO,GAAAC,OAAA,CAAAD,OAAA,GAAG,IAAAE,qBAAe,EAACjC,WAAW,EAAE;EAClD6B,KAAK,EAAEP,cAAc;EACrBY,KAAK,EAAEpB,iBAAK,CAACoB;AACf,CAAC,CAAiB","ignoreList":[]}

package/lib/cjs/components/input/input.shadow.css

@@ -1,41 +1,64 @@
 SHighlightedInput[state='normal'] {
-  & SOutline {
-    background:
-      linear-gradient(var(--intergalactic-bg-primary-neutral, #ffffff), var(--intergalactic-bg-primary-neutral, #ffffff)) padding-box,
+  SOutline {
+    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;
     border-color: transparent;
-  }
-
-  &:has(SValue:focus-visible) SOutline {
-    box-shadow: none;
-    border-color: transparent;
 
     &::before {
       content: "";
       position: absolute;
       z-index: -1;
       inset: 0;
-      margin: -4px;
-      padding: 4px;
+      margin: -3px;
+      padding: 3px;
       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;
+
+      transition: opacity calc(var(--intergalactic-duration-extra-fast, 100) * 1ms) ease-in-out;
     }
   }
 
-  &[neighborLocation='left']:has(SValue:focus-visible) SOutline::before {
+  &:has(SValue:focus-visible) SOutline {
+    outline: none;
+
+    &::before {
+      opacity: 1;
+    }
+  }
+
+  &[neighborLocation='left'] SOutline::before {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
-  &[neighborLocation='right']:has(SValue:focus-visible) SOutline::before {
+
+  &[neighborLocation='right'] SOutline::before {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
-  &[neighborLocation='both']:has(SValue:focus-visible) SOutline::before {
+
+  &[neighborLocation='both'] SOutline::before {
     border-radius: 0;
   }
 }
+
+/* Firefox fallback */
+@supports not (-webkit-mask-composite: xor) {
+  SHighlightedInput[state='normal']:has(SValue:focus-visible) SOutline {
+    outline: none;
+    border-color: #7078FC;
+    box-shadow:
+      0 0 0 0 #ffffff,
+      0 0 0 2px #7078FC;
+  }
+
+  SHighlightedInput[state='normal']:has(SValue:focus-visible) SOutline::before {
+    display: none;
+  }
+}