intergalactic 15.60.1 → 15.61.0-prerelease.0-prerelease-07b38ef0

package/tag/lib/cjs/Tag.js

@@ -23,27 +23,29 @@ var _intergalacticDynamicLocales = require("./translations/__intergalactic-dynam
 var _i18nEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/i18nEnhance"));
 var _resolveColorEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/resolveColorEnhance"));
 var _uniqueID = _interopRequireDefault(require("intergalactic/utils/lib/uniqueID"));
+var _keyboardFocusEnhance = _interopRequireDefault(require("intergalactic/utils/lib/enhances/keyboardFocusEnhance"));
 var _assignProps6 = require("intergalactic/utils/lib/assignProps");
 /*__reshadow-styles__:"./style/tag.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___STag_m3zdm_gg_{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border:1px solid var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:var(--intergalactic-tag-rounded, 24px);padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);font-weight:var(--intergalactic-medium, 500);color:var(--tag-color_m3zdm)}.___STag_m3zdm_gg_:has(.___SText_m3zdm_gg_:focus){box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_m3zdm_gg_::after,.___STag_m3zdm_gg_::before{content:\"\";position:absolute;border-radius:var(--intergalactic-tag-rounded, 24px);filter:brightness(150%)}.___STag_m3zdm_gg_::before{top:0;left:0;right:0;bottom:0;background-color:var(--tag-color_m3zdm);opacity:.2}.___STag_m3zdm_gg_::after{top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border:1px solid var(--tag-color_m3zdm);opacity:.1}.___STag_m3zdm_gg_.__disabled_m3zdm_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STag_m3zdm_gg_.__interactive_m3zdm_gg_{cursor:pointer}.___STag_m3zdm_gg_._size_m_m3zdm_gg_{height:20px;min-width:20px}.___STag_m3zdm_gg_._size_m_m3zdm_gg_ .___SCircle_m3zdm_gg_:first-child{margin-left:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_m3zdm_gg_._size_m_m3zdm_gg_ .___SCircle_m3zdm_gg_:last-child{margin-right:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_m3zdm_gg_._size_m_m3zdm_gg_ .___SText_m3zdm_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___STag_m3zdm_gg_._size_l_m3zdm_gg_{height:28px;min-width:28px}.___STag_m3zdm_gg_._size_l_m3zdm_gg_ .___SText_m3zdm_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STag_m3zdm_gg_._size_xl_m3zdm_gg_{height:40px;min-width:40px}.___STag_m3zdm_gg_._size_xl_m3zdm_gg_ .___SText_m3zdm_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STag_m3zdm_gg_._theme_primary_m3zdm_gg_::before{top:-1px;left:-1px;right:-1px;bottom:-1px}.___STag_m3zdm_gg_._theme_primary_m3zdm_gg_:after{display:none}.___STag_m3zdm_gg_._theme_primary_m3zdm_gg_.__active_m3zdm_gg_:before,.___STag_m3zdm_gg_._theme_primary_m3zdm_gg_.__interactive_m3zdm_gg_:active:before{opacity:.3}@media (hover:hover){.___STag_m3zdm_gg_._theme_primary_m3zdm_gg_.__interactive_m3zdm_gg_:hover:before{opacity:.3}}.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_::before,.___STag_m3zdm_gg_._theme_secondary_m3zdm_gg_::before{opacity:.01}.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_.__active_m3zdm_gg_:before,.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_.__interactive_m3zdm_gg_:active:before,.___STag_m3zdm_gg_._theme_secondary_m3zdm_gg_.__active_m3zdm_gg_:before,.___STag_m3zdm_gg_._theme_secondary_m3zdm_gg_.__interactive_m3zdm_gg_:active:before{opacity:.1}@media (hover:hover){.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_.__interactive_m3zdm_gg_:hover:before,.___STag_m3zdm_gg_._theme_secondary_m3zdm_gg_.__interactive_m3zdm_gg_:hover:before{opacity:.1}}.___STag_m3zdm_gg_._theme_additional-invert_m3zdm_gg_::after,.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_::after,.___STag_m3zdm_gg_._theme_secondary-invert_m3zdm_gg_::after,.___STag_m3zdm_gg_._theme_secondary_m3zdm_gg_::after{opacity:.5}.___STag_m3zdm_gg_._theme_primary-invert_m3zdm_gg_{background-color:var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15))}.___STag_m3zdm_gg_._theme_additional-invert_m3zdm_gg_,.___STag_m3zdm_gg_._theme_primary-invert_m3zdm_gg_,.___STag_m3zdm_gg_._theme_secondary-invert_m3zdm_gg_{color:var(--intergalactic-text-primary-invert, #ffffff)}.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_::after{border-style:dashed}.___SText_m3zdm_gg_{display:inline-block;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0;position:relative}.___SText_m3zdm_gg_:not(:only-child):first-child{padding-right:0}.___SText_m3zdm_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_m3zdm_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_m3zdm_gg_,.___SCircle_m3zdm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_m3zdm_gg_{flex-shrink:0;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);position:relative}.___SCircle_m3zdm_gg_{overflow:hidden;border-radius:50%;margin:0 var(--intergalactic-spacing-1x, 4px)}.___SCircle_m3zdm_gg_:first-child{margin-left:0}.___SCircle_m3zdm_gg_:last-child{margin-right:0}.___SCircle_m3zdm_gg_._size_m_m3zdm_gg_{width:16px;height:16px}.___SCircle_m3zdm_gg_._size_l_m3zdm_gg_,.___SCircle_m3zdm_gg_._size_xl_m3zdm_gg_{width:20px;height:20px}.___SClose_m3zdm_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--intergalactic-spacing-1x, 4px);opacity:.5}@media (hover:hover){.___SClose_m3zdm_gg_:hover{opacity:1}}" /*__inner_css_end__*/, "m3zdm_gg_") /*__reshadow_css_end__*/, {
-  "__STag": "___STag_m3zdm_gg_",
-  "_disabled": "__disabled_m3zdm_gg_",
-  "_interactive": "__interactive_m3zdm_gg_",
-  "_theme_primary-invert": "_theme_primary-invert_m3zdm_gg_",
-  "_theme_secondary-invert": "_theme_secondary-invert_m3zdm_gg_",
-  "_theme_additional-invert": "_theme_additional-invert_m3zdm_gg_",
-  "__SText": "___SText_m3zdm_gg_",
-  "__SAddon": "___SAddon_m3zdm_gg_",
-  "__SCircle": "___SCircle_m3zdm_gg_",
-  "_size_m": "_size_m_m3zdm_gg_",
-  "_size_l": "_size_l_m3zdm_gg_",
-  "_size_xl": "_size_xl_m3zdm_gg_",
-  "--tag-color": "--tag-color_m3zdm",
-  "_theme_primary": "_theme_primary_m3zdm_gg_",
-  "_active": "__active_m3zdm_gg_",
-  "_theme_secondary": "_theme_secondary_m3zdm_gg_",
-  "_theme_additional": "_theme_additional_m3zdm_gg_",
-  "__SClose": "___SClose_m3zdm_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___STag_1a798_gg_{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border:1px solid var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:var(--intergalactic-tag-rounded, 24px);padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);font-weight:var(--intergalactic-medium, 500);color:var(--tag-color_1a798)}.___STag_1a798_gg_:has(.___SText_1a798_gg_:focus){box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_1a798_gg_::after,.___STag_1a798_gg_::before{content:\"\";position:absolute;border-radius:var(--intergalactic-tag-rounded, 24px);filter:brightness(150%)}.___STag_1a798_gg_::before{top:0;left:0;right:0;bottom:0;background-color:var(--tag-color_1a798);opacity:.2}.___STag_1a798_gg_::after{top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border:1px solid var(--tag-color_1a798);opacity:.1}.___STag_1a798_gg_:active,.___STag_1a798_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STag_1a798_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STag_1a798_gg_.__keyboardFocused_1a798_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___STag_1a798_gg_.__keyboardFocused_1a798_gg_:has(:focus){box-shadow:none}.___STag_1a798_gg_.__disabled_1a798_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STag_1a798_gg_.__interactive_1a798_gg_{cursor:pointer}.___STag_1a798_gg_._size_m_1a798_gg_{height:20px;min-width:20px}.___STag_1a798_gg_._size_m_1a798_gg_ .___SCircle_1a798_gg_:first-child{margin-left:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_1a798_gg_._size_m_1a798_gg_ .___SCircle_1a798_gg_:last-child{margin-right:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_1a798_gg_._size_m_1a798_gg_ .___SText_1a798_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___STag_1a798_gg_._size_l_1a798_gg_{height:28px;min-width:28px}.___STag_1a798_gg_._size_l_1a798_gg_ .___SText_1a798_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STag_1a798_gg_._size_xl_1a798_gg_{height:40px;min-width:40px}.___STag_1a798_gg_._size_xl_1a798_gg_ .___SText_1a798_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STag_1a798_gg_._theme_primary_1a798_gg_::before{top:-1px;left:-1px;right:-1px;bottom:-1px}.___STag_1a798_gg_._theme_primary_1a798_gg_:after{display:none}.___STag_1a798_gg_._theme_primary_1a798_gg_.__active_1a798_gg_:before,.___STag_1a798_gg_._theme_primary_1a798_gg_.__interactive_1a798_gg_:active:before{opacity:.3}@media (hover:hover){.___STag_1a798_gg_._theme_primary_1a798_gg_.__interactive_1a798_gg_:hover:before{opacity:.3}}.___STag_1a798_gg_._theme_additional_1a798_gg_::before,.___STag_1a798_gg_._theme_secondary_1a798_gg_::before{opacity:.01}.___STag_1a798_gg_._theme_additional_1a798_gg_.__active_1a798_gg_:before,.___STag_1a798_gg_._theme_additional_1a798_gg_.__interactive_1a798_gg_:active:before,.___STag_1a798_gg_._theme_secondary_1a798_gg_.__active_1a798_gg_:before,.___STag_1a798_gg_._theme_secondary_1a798_gg_.__interactive_1a798_gg_:active:before{opacity:.1}@media (hover:hover){.___STag_1a798_gg_._theme_additional_1a798_gg_.__interactive_1a798_gg_:hover:before,.___STag_1a798_gg_._theme_secondary_1a798_gg_.__interactive_1a798_gg_:hover:before{opacity:.1}}.___SClose_1a798_gg_ path,.___STag_1a798_gg_._theme_additional-invert_1a798_gg_::after,.___STag_1a798_gg_._theme_additional_1a798_gg_::after,.___STag_1a798_gg_._theme_secondary-invert_1a798_gg_::after,.___STag_1a798_gg_._theme_secondary_1a798_gg_::after{opacity:.5}.___STag_1a798_gg_._theme_primary-invert_1a798_gg_{background-color:var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15))}.___STag_1a798_gg_._theme_additional-invert_1a798_gg_,.___STag_1a798_gg_._theme_primary-invert_1a798_gg_,.___STag_1a798_gg_._theme_secondary-invert_1a798_gg_{color:var(--intergalactic-text-primary-invert, #ffffff)}.___STag_1a798_gg_._theme_additional_1a798_gg_::after{border-style:dashed}.___SText_1a798_gg_{display:inline-block;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0;position:relative}.___SText_1a798_gg_.__keyboardFocused_1a798_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SText_1a798_gg_:not(:only-child):first-child{padding-right:0}.___SText_1a798_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1a798_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1a798_gg_,.___SCircle_1a798_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1a798_gg_{flex-shrink:0;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);position:relative}.___SCircle_1a798_gg_{overflow:hidden;border-radius:50%;margin:0 var(--intergalactic-spacing-1x, 4px)}.___SCircle_1a798_gg_:first-child{margin-left:0}.___SCircle_1a798_gg_:last-child{margin-right:0}.___SCircle_1a798_gg_._size_m_1a798_gg_{width:16px;height:16px}.___SCircle_1a798_gg_._size_l_1a798_gg_,.___SCircle_1a798_gg_._size_xl_1a798_gg_{width:20px;height:20px}.___SClose_1a798_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--intergalactic-spacing-1x, 4px)}@media (hover:hover){.___SClose_1a798_gg_:hover path{opacity:1}}" /*__inner_css_end__*/, "1a798_gg_") /*__reshadow_css_end__*/, {
+  "__STag": "___STag_1a798_gg_",
+  "_keyboardFocused": "__keyboardFocused_1a798_gg_",
+  "_disabled": "__disabled_1a798_gg_",
+  "_interactive": "__interactive_1a798_gg_",
+  "_theme_primary-invert": "_theme_primary-invert_1a798_gg_",
+  "_theme_secondary-invert": "_theme_secondary-invert_1a798_gg_",
+  "_theme_additional-invert": "_theme_additional-invert_1a798_gg_",
+  "__SText": "___SText_1a798_gg_",
+  "__SAddon": "___SAddon_1a798_gg_",
+  "__SCircle": "___SCircle_1a798_gg_",
+  "_size_m": "_size_m_1a798_gg_",
+  "_size_l": "_size_l_1a798_gg_",
+  "_size_xl": "_size_xl_1a798_gg_",
+  "--tag-color": "--tag-color_1a798",
+  "_theme_primary": "_theme_primary_1a798_gg_",
+  "_active": "__active_1a798_gg_",
+  "_theme_secondary": "_theme_secondary_1a798_gg_",
+  "_theme_additional": "_theme_additional_1a798_gg_",
+  "__SClose": "___SClose_1a798_gg_"
 });
 var legacyThemeRecommendedMigration = {
   primary: {
@@ -65,13 +67,27 @@ var RootTag = /*#__PURE__*/function (_Component) {
     var _this;
     (0, _classCallCheck2["default"])(this, RootTag);
     _this = _super.call(this, props);
-    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (e) {
-      var _this$asProps$onClick, _this$asProps;
-      switch (e.key) {
-        case ' ':
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
+      focusable: 'container'
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleCloseMount", function () {
+      _this.setState({
+        focusable: 'text'
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleCloseUnmount", function () {
+      _this.setState({
+        focusable: 'container'
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleKeyDown", function (event) {
+      switch (event.code) {
+        case 'Space':
         case 'Enter':
-          e.preventDefault();
-          (_this$asProps$onClick = (_this$asProps = _this.asProps).onClick) === null || _this$asProps$onClick === void 0 ? void 0 : _this$asProps$onClick.call(_this$asProps, e);
+          if (_this.asProps.onClick) {
+            event.preventDefault();
+            _this.asProps.onClick(event);
+          }
           break;
       }
     });
@@ -86,17 +102,30 @@ var RootTag = /*#__PURE__*/function (_Component) {
         size: size
       };
     }
+  }, {
+    key: "getTextProps",
+    value: function getTextProps() {
+      var interactive = this.asProps.interactive;
+      var id = this.asProps.id || "igc-".concat(this.asProps.uid, "-tag");
+      var focusable = this.state.focusable;
+      return {
+        tabIndex: focusable === 'text' && interactive ? 0 : -1,
+        id: "".concat(id, "-text")
+      };
+    }
   }, {
     key: "getCloseProps",
     value: function getCloseProps() {
-      var _this$asProps2 = this.asProps,
-        getI18nText = _this$asProps2.getI18nText,
-        id = _this$asProps2.id,
-        uid = _this$asProps2.uid;
+      var getI18nText = this.asProps.getI18nText;
+      var id = this.asProps.id || "igc-".concat(this.asProps.uid, "-tag");
       return {
         getI18nText: getI18nText,
-        tagId: id || "igc-".concat(uid, "-tag"),
-        uid: uid
+        id: "".concat(id, "-clear"),
+        'aria-labelledby': "".concat(id, "-clear ").concat(id, "-text"),
+        'aria-label': getI18nText('remove'),
+        'aria-hidden': 'true',
+        onMount: this.handleCloseMount,
+        onUnmount: this.handleCloseUnmount
       };
     }
   }, {
@@ -105,26 +134,27 @@ var RootTag = /*#__PURE__*/function (_Component) {
       var _ref = this.asProps,
         _ref6;
       var STag = _flexBox.Box;
-      var _this$asProps3 = this.asProps,
-        Children = _this$asProps3.Children,
-        styles = _this$asProps3.styles,
-        color = _this$asProps3.color,
-        interactive = _this$asProps3.interactive,
-        disabled = _this$asProps3.disabled,
-        addonLeft = _this$asProps3.addonLeft,
-        addonRight = _this$asProps3.addonRight,
-        resolveColor = _this$asProps3.resolveColor,
-        onClick = _this$asProps3.onClick,
-        outerId = _this$asProps3.id,
-        uid = _this$asProps3.uid,
-        onKeyDown = _this$asProps3.onKeyDown;
+      var _this$asProps = this.asProps,
+        Children = _this$asProps.Children,
+        styles = _this$asProps.styles,
+        color = _this$asProps.color,
+        interactive = _this$asProps.interactive,
+        disabled = _this$asProps.disabled,
+        addonLeft = _this$asProps.addonLeft,
+        addonRight = _this$asProps.addonRight,
+        resolveColor = _this$asProps.resolveColor,
+        outerId = _this$asProps.id,
+        uid = _this$asProps.uid,
+        onKeyDown = _this$asProps.onKeyDown;
+      var focusable = this.state.focusable;
       var id = outerId || "igc-".concat(uid, "-tag");
       return _ref6 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(STag, _ref6.cn("STag", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
         "id": id,
         "use:interactive": !disabled && interactive,
-        "tabIndex": interactive && onClick ? 0 : undefined,
+        "role": interactive ? 'button' : undefined,
         "tag-color": resolveColor(color),
-        "onKeyDown": (0, _assignProps6.callAllEventHandlers)(onKeyDown, this.handleKeyDown)
+        "onKeyDown": (0, _assignProps6.callAllEventHandlers)(onKeyDown, this.handleKeyDown),
+        "use:tabIndex": interactive && focusable === 'container' ? 0 : -1
       }, _ref))), addonLeft ? /*#__PURE__*/_react["default"].createElement(Tag.Addon, {
         tag: addonLeft
       }) : null, (0, _addonTextChildren["default"])(Children, Tag.Text, Tag.Addon), addonRight ? /*#__PURE__*/_react["default"].createElement(Tag.Addon, {
@@ -136,7 +166,7 @@ var RootTag = /*#__PURE__*/function (_Component) {
 }(_core.Component);
 (0, _defineProperty2["default"])(RootTag, "displayName", 'Tag');
 (0, _defineProperty2["default"])(RootTag, "style", style);
-(0, _defineProperty2["default"])(RootTag, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])(), (0, _resolveColorEnhance["default"])()]);
+(0, _defineProperty2["default"])(RootTag, "enhance", [(0, _i18nEnhance["default"])(_intergalacticDynamicLocales.localizedMessages), (0, _uniqueID["default"])(), (0, _resolveColorEnhance["default"])(), (0, _keyboardFocusEnhance["default"])()]);
 (0, _defineProperty2["default"])(RootTag, "defaultProps", {
   theme: 'primary',
   color: 'gray-500',
@@ -153,15 +183,21 @@ function Text(props) {
     "tag": 'span'
   }, _ref2))));
 }
+Text.enhance = [(0, _keyboardFocusEnhance["default"])()];
 function Close(props) {
   var _ref3 = arguments[0],
     _ref8;
   var SClose = _flexBox.Box;
-  var styles = props.styles,
-    getI18nText = props.getI18nText,
-    tagId = props.tagId,
-    uid = props.uid;
-  function onKeyDown(event) {
+  var styles = props.styles;
+  _react["default"].useEffect(function () {
+    var _props$onMount;
+    (_props$onMount = props.onMount) === null || _props$onMount === void 0 ? void 0 : _props$onMount.call(props);
+    return function () {
+      var _props$onUnmount;
+      return (_props$onUnmount = props.onUnmount) === null || _props$onUnmount === void 0 ? void 0 : _props$onUnmount.call(props);
+    };
+  }, []);
+  var onKeyDown = _react["default"].useCallback(function (event) {
     if (props.onKeyDown) {
       return props.onKeyDown(event);
     }
@@ -169,13 +205,10 @@ function Close(props) {
       event.preventDefault();
       props.onClick(event);
     }
-  }
+  }, [props.onKeyDown, props.onClick]);
   return _ref8 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(SClose, _ref8.cn("SClose", (0, _objectSpread2["default"])({}, (0, _core.assignProps)({
     "tag": _m["default"],
     "interactive": true,
-    "id": "igc-".concat(uid, "-tag-clear"),
-    "aria-labelledby": "igc-".concat(uid, "-tag-clear ").concat(tagId),
-    "aria-label": getI18nText('remove'),
     "onKeyDown": onKeyDown
   }, _ref3))));
 }

package/tag/lib/cjs/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_logger","_m","_intergalacticDynamicLocales","_i18nEnhance","_resolveColorEnhance","_uniqueID","_assignProps6","style","sstyled","insert","legacyThemeRecommendedMigration","primary","muted","info","success","warning","danger","secondary","RootTag","_Component","_inherits2","_super","_createSuper2","props","_legacyThemeRecommend","_this","_classCallCheck2","call","_defineProperty2","_assertThisInitialized2","e","_this$asProps$onClick","_this$asProps","key","preventDefault","asProps","onClick","logger","warn","use","concat","theme","Tag","displayName","_createClass2","value","getCircleProps","size","getCloseProps","_this$asProps2","getI18nText","id","uid","tagId","render","_ref","_ref6","STag","Box","_this$asProps3","Children","styles","color","interactive","disabled","addonLeft","addonRight","resolveColor","outerId","onKeyDown","createElement","cn","_objectSpread2","assignProps","undefined","callAllEventHandlers","handleKeyDown","Addon","tag","addonTextChildren","Text","Component","i18nEnhance","localizedMessages","uniqueIDEnhancement","resolveColorEnhance","i18n","locale","_ref2","arguments[0]","_ref7","SText","Close","_ref3","_ref8","SClose","event","code","CloseM","_ref4","_ref9","SAddon","Circle","_ref5","_ref10","SCircle","createComponent","_default","exports"],"sources":["../../src/Tag.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport CloseM from '@semcore/icon/Close/m';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\n\nimport style from './style/tag.shadow.css';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst legacyThemeRecommendedMigration = {\n  primary: {\n    muted: 'gray-500',\n    info: 'blue-500',\n    success: 'green-500',\n    warning: 'orange-500',\n    danger: 'red-500',\n  },\n  secondary: {\n    muted: 'gray-50',\n  },\n};\n\nclass RootTag extends Component {\n  static displayName = 'Tag';\n  static style = style;\n  static enhance = [i18nEnhance(localizedMessages), uniqueIDEnhancement(), resolveColorEnhance()];\n  static defaultProps = {\n    theme: 'primary',\n    color: 'gray-500',\n    size: 'm',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n\n  constructor(props) {\n    super(props);\n\n    logger.warn(\n      props.use,\n      `Property 'use' is deprecated, replace property to \"theme='${props.use}' color='${\n        legacyThemeRecommendedMigration[props.use]?.[props.theme]\n      }'\"`,\n      props['data-ui-name'] || Tag.displayName,\n    );\n  }\n\n  getCircleProps() {\n    const { size } = this.asProps;\n    return { size };\n  }\n\n  getCloseProps() {\n    const { getI18nText, id, uid } = this.asProps;\n\n    return { getI18nText, tagId: id || `igc-${uid}-tag`, uid };\n  }\n\n  handleKeyDown = (e) => {\n    switch (e.key) {\n      case ' ':\n      case 'Enter':\n        e.preventDefault();\n        this.asProps.onClick?.(e);\n        break;\n    }\n  };\n\n  render() {\n    const STag = Root;\n    const {\n      Children,\n      styles,\n      color,\n      interactive,\n      disabled,\n      addonLeft,\n      addonRight,\n      resolveColor,\n      onClick,\n      id: outerId,\n      uid,\n      onKeyDown,\n    } = this.asProps;\n    const id = outerId || `igc-${uid}-tag`;\n\n    return sstyled(styles)(\n      <STag\n        render={Box}\n        id={id}\n        use:interactive={!disabled && interactive}\n        tabIndex={interactive && onClick ? 0 : undefined}\n        tag-color={resolveColor(color)}\n        onKeyDown={callAllEventHandlers(onKeyDown, this.handleKeyDown)}\n      >\n        {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n        {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n        {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n      </STag>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\n\nfunction Close(props) {\n  const SClose = Root;\n  const { styles, getI18nText, tagId, uid } = props;\n\n  function onKeyDown(event) {\n    if (props.onKeyDown) {\n      return props.onKeyDown(event);\n    }\n\n    if (props.onClick && (event.code === 'Enter' || event.code === 'Space')) {\n      event.preventDefault();\n      props.onClick(event);\n    }\n  }\n\n  return sstyled(styles)(\n    <SClose\n      render={Box}\n      tag={CloseM}\n      interactive\n      id={`igc-${uid}-tag-clear`}\n      aria-labelledby={`igc-${uid}-tag-clear ${tagId}`}\n      aria-label={getI18nText('remove')}\n      onKeyDown={onKeyDown}\n    />,\n  );\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nfunction Circle(props) {\n  const SCircle = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SCircle render={Box} tag='span' />);\n}\n\nconst Tag = createComponent(RootTag, {\n  Text,\n  Addon,\n  Close,\n  Circle,\n});\n\nexport default Tag;\n"],"mappings":"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"}
+{"version":3,"file":"Tag.js","names":["_core","_interopRequireWildcard","require","_react","_interopRequireDefault","_flexBox","_addonTextChildren","_logger","_m","_intergalacticDynamicLocales","_i18nEnhance","_resolveColorEnhance","_uniqueID","_keyboardFocusEnhance","_assignProps6","style","sstyled","insert","legacyThemeRecommendedMigration","primary","muted","info","success","warning","danger","secondary","RootTag","_Component","_inherits2","_super","_createSuper2","props","_legacyThemeRecommend","_this","_classCallCheck2","call","_defineProperty2","_assertThisInitialized2","focusable","setState","event","code","asProps","onClick","preventDefault","logger","warn","use","concat","theme","Tag","displayName","_createClass2","key","value","getCircleProps","size","getTextProps","interactive","id","uid","state","tabIndex","getCloseProps","getI18nText","onMount","handleCloseMount","onUnmount","handleCloseUnmount","render","_ref","_ref6","STag","Box","_this$asProps","Children","styles","color","disabled","addonLeft","addonRight","resolveColor","outerId","onKeyDown","createElement","cn","_objectSpread2","assignProps","undefined","callAllEventHandlers","handleKeyDown","Addon","tag","addonTextChildren","Text","Component","i18nEnhance","localizedMessages","uniqueIDEnhancement","resolveColorEnhance","keyboardFocusEnhance","i18n","locale","_ref2","arguments[0]","_ref7","SText","enhance","Close","_ref3","_ref8","SClose","React","useEffect","_props$onMount","_props$onUnmount","useCallback","CloseM","_ref4","_ref9","SAddon","Circle","_ref5","_ref10","SCircle","createComponent","_default","exports"],"sources":["../../src/Tag.jsx"],"sourcesContent":["import React from 'react';\nimport createComponent, { Component, sstyled, Root } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\nimport CloseM from '@semcore/icon/Close/m';\nimport { localizedMessages } from './translations/__intergalactic-dynamic-locales';\nimport i18nEnhance from '@semcore/utils/lib/enhances/i18nEnhance';\nimport resolveColorEnhance from '@semcore/utils/lib/enhances/resolveColorEnhance';\nimport uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/tag.shadow.css';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\n\nconst legacyThemeRecommendedMigration = {\n  primary: {\n    muted: 'gray-500',\n    info: 'blue-500',\n    success: 'green-500',\n    warning: 'orange-500',\n    danger: 'red-500',\n  },\n  secondary: {\n    muted: 'gray-50',\n  },\n};\n\nclass RootTag extends Component {\n  static displayName = 'Tag';\n  static style = style;\n  static enhance = [\n    i18nEnhance(localizedMessages),\n    uniqueIDEnhancement(),\n    resolveColorEnhance(),\n    keyboardFocusEnhance(),\n  ];\n  static defaultProps = {\n    theme: 'primary',\n    color: 'gray-500',\n    size: 'm',\n    i18n: localizedMessages,\n    locale: 'en',\n  };\n  state = {\n    focusable: 'container',\n  };\n\n  constructor(props) {\n    super(props);\n\n    logger.warn(\n      props.use,\n      `Property 'use' is deprecated, replace property to \"theme='${props.use}' color='${\n        legacyThemeRecommendedMigration[props.use]?.[props.theme]\n      }'\"`,\n      props['data-ui-name'] || Tag.displayName,\n    );\n  }\n\n  getCircleProps() {\n    const { size } = this.asProps;\n    return { size };\n  }\n\n  getTextProps() {\n    const { interactive } = this.asProps;\n    const id = this.asProps.id || `igc-${this.asProps.uid}-tag`;\n    const { focusable } = this.state;\n\n    return {\n      tabIndex: focusable === 'text' && interactive ? 0 : -1,\n      id: `${id}-text`,\n    };\n  }\n  handleCloseMount = () => {\n    this.setState({ focusable: 'text' });\n  };\n  handleCloseUnmount = () => {\n    this.setState({ focusable: 'container' });\n  };\n  getCloseProps() {\n    const { getI18nText } = this.asProps;\n    const id = this.asProps.id || `igc-${this.asProps.uid}-tag`;\n\n    return {\n      getI18nText,\n      id: `${id}-clear`,\n      'aria-labelledby': `${id}-clear ${id}-text`,\n      'aria-label': getI18nText('remove'),\n      'aria-hidden': 'true',\n      onMount: this.handleCloseMount,\n      onUnmount: this.handleCloseUnmount,\n    };\n  }\n\n  handleKeyDown = (event) => {\n    switch (event.code) {\n      case 'Space':\n      case 'Enter':\n        if (this.asProps.onClick) {\n          event.preventDefault();\n          this.asProps.onClick(event);\n        }\n        break;\n    }\n  };\n\n  render() {\n    const STag = Root;\n    const {\n      Children,\n      styles,\n      color,\n      interactive,\n      disabled,\n      addonLeft,\n      addonRight,\n      resolveColor,\n      id: outerId,\n      uid,\n      onKeyDown,\n    } = this.asProps;\n    const { focusable } = this.state;\n    const id = outerId || `igc-${uid}-tag`;\n\n    return sstyled(styles)(\n      <STag\n        render={Box}\n        id={id}\n        use:interactive={!disabled && interactive}\n        role={interactive ? 'button' : undefined}\n        tag-color={resolveColor(color)}\n        onKeyDown={callAllEventHandlers(onKeyDown, this.handleKeyDown)}\n        use:tabIndex={interactive && focusable === 'container' ? 0 : -1}\n      >\n        {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}\n        {addonTextChildren(Children, Tag.Text, Tag.Addon)}\n        {addonRight ? <Tag.Addon tag={addonRight} /> : null}\n      </STag>,\n    );\n  }\n}\n\nfunction Text(props) {\n  const SText = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SText render={Box} tag='span' />);\n}\nText.enhance = [keyboardFocusEnhance()];\n\nfunction Close(props) {\n  const SClose = Root;\n  const { styles } = props;\n\n  React.useEffect(() => {\n    props.onMount?.();\n    return () => props.onUnmount?.();\n  }, []);\n\n  const onKeyDown = React.useCallback(\n    (event) => {\n      if (props.onKeyDown) {\n        return props.onKeyDown(event);\n      }\n\n      if (props.onClick && (event.code === 'Enter' || event.code === 'Space')) {\n        event.preventDefault();\n        props.onClick(event);\n      }\n    },\n    [props.onKeyDown, props.onClick],\n  );\n\n  return sstyled(styles)(<SClose render={Box} tag={CloseM} interactive onKeyDown={onKeyDown} />);\n}\n\nfunction Addon(props) {\n  const SAddon = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SAddon render={Box} tag='span' />);\n}\n\nfunction Circle(props) {\n  const SCircle = Root;\n  const { styles } = props;\n  return sstyled(styles)(<SCircle render={Box} tag='span' />);\n}\n\nconst Tag = createComponent(RootTag, {\n  Text,\n  Addon,\n  Close,\n  Circle,\n});\n\nexport default Tag;\n"],"mappings":"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"}

package/tag/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\nimport { IconProps } from '@semcore/icon';\n\nexport type TagSize = 'xl' | 'l' | 'm';\n/** @deprecated */\nexport type TagThemeOld =\n  | 'muted'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'invert'\n  | 'additional';\nexport type TagTheme = 'primary' | 'secondary' | TagThemeOld;\nexport type TagUse = 'primary' | 'secondary';\n\n/** @deprecated */\nexport interface ITagProps extends TagProps, UnknownProperties {}\nexport type TagProps = BoxProps & {\n  /** Value responsible for tag availability\n   */\n  disabled?: boolean;\n  /** Value responsible for tag activity\n   */\n  active?: boolean;\n  /** Interactive tag\n   */\n  interactive?: boolean;\n  /** Tag type\n   * @default secondary\n   * @deprecated v4.0.0\n   * @use ITagProps.theme\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default primary\n   */\n  theme?: TagTheme;\n  /** Tag color text */\n  color?: string;\n  /** Tag size\n   * @default m\n   */\n  size?: TagSize;\n  /** Left addon tag */\n  addonLeft?: React.ElementType;\n  /** Right addon tag */\n  addonRight?: React.ElementType;\n  locale?: string;\n};\n\n/** @deprecated */\nexport interface ITagCloseProps extends TagCloseProps, UnknownProperties {}\nexport type TagCloseProps = IconProps & {\n  /** Tag type\n   * @default secondary\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default muted\n   */\n  theme?: TagTheme;\n};\n\n/** @deprecated */\nexport interface ITagContext extends TagContext, UnknownProperties {}\nexport type TagContext = TagProps & {\n  getCloseProps?: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITagAddonProps extends TagAddonProps, UnknownProperties {}\nexport type TagAddonProps = BoxProps & {};\n\n/** @deprecated */\nexport interface ITagTextProps extends TagTextProps, UnknownProperties {}\nexport type TagTextProps = BoxProps & {};\n\ndeclare const Tag: Intergalactic.Component<'div', TagProps, TagContext> & {\n  Text: Intergalactic.Component<'div', TagTextProps>;\n  Addon: Intergalactic.Component<'div', TagAddonProps>;\n  Close: Intergalactic.Component<'div', TagCloseProps>;\n  Circle: Intergalactic.Component<'div', TagAddonProps>;\n};\n\nexport default Tag;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import React from 'react';\nimport { PropGetterFn, UnknownProperties, Intergalactic } from '@semcore/core';\nimport { BoxProps } from '@semcore/flex-box';\nimport { IconProps } from '@semcore/icon';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type TagSize = 'xl' | 'l' | 'm';\n/** @deprecated */\nexport type TagThemeOld =\n  | 'muted'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'danger'\n  | 'invert'\n  | 'additional';\nexport type TagTheme = 'primary' | 'secondary' | TagThemeOld;\nexport type TagUse = 'primary' | 'secondary';\n\n/** @deprecated */\nexport interface ITagProps extends TagProps, UnknownProperties {}\nexport type TagProps = BoxProps &\n  KeyboardFocusProps & {\n    /** Value responsible for tag availability\n     */\n    disabled?: boolean;\n    /** Value responsible for tag activity\n     */\n    active?: boolean;\n    /** Interactive tag\n     */\n    interactive?: boolean;\n    /** Tag type\n     * @default secondary\n     * @deprecated v4.0.0\n     * @use ITagProps.theme\n     */\n    use?: TagUse;\n    /** Tag theme, there are several default themes or you can use your color\n     * @default primary\n     */\n    theme?: TagTheme;\n    /** Tag color text */\n    color?: string;\n    /** Tag size\n     * @default m\n     */\n    size?: TagSize;\n    /** Left addon tag */\n    addonLeft?: React.ElementType;\n    /** Right addon tag */\n    addonRight?: React.ElementType;\n    locale?: string;\n  };\n\n/** @deprecated */\nexport interface ITagCloseProps extends TagCloseProps, UnknownProperties {}\nexport type TagCloseProps = IconProps & {\n  /** Tag type\n   * @default secondary\n   */\n  use?: TagUse;\n  /** Tag theme, there are several default themes or you can use your color\n   * @default muted\n   */\n  theme?: TagTheme;\n};\n\n/** @deprecated */\nexport interface ITagContext extends TagContext, UnknownProperties {}\nexport type TagContext = TagProps & {\n  getCloseProps?: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface ITagAddonProps extends TagAddonProps, UnknownProperties {}\nexport type TagAddonProps = BoxProps & {};\n\n/** @deprecated */\nexport interface ITagTextProps extends TagTextProps, UnknownProperties {}\nexport type TagTextProps = BoxProps & KeyboardFocusProps & {};\n\ndeclare const Tag: Intergalactic.Component<'div', TagProps, TagContext> & {\n  Text: Intergalactic.Component<'div', TagTextProps>;\n  Addon: Intergalactic.Component<'div', TagAddonProps>;\n  Close: Intergalactic.Component<'div', TagCloseProps>;\n  Circle: Intergalactic.Component<'div', TagAddonProps>;\n};\n\nexport default Tag;\n"],"mappings":""}

package/tag/lib/cjs/style/tag.shadow.css

@@ -43,8 +43,25 @@ STag {
     opacity: 0.1;
     filter: brightness(150%);
   }
+
+  &:active,
+  &:hover,
+  &:focus {
+    outline: 0;
+    text-decoration: none;
+  }
+}
+
+STag[keyboardFocused] {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+  z-index: 1;
+}
+
+STag[keyboardFocused]:has(:focus) {
+  box-shadow: none;
 }
 
+
 STag[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.3);
   cursor: default;
@@ -165,6 +182,11 @@ SText {
   position: relative;
 }
 
+SText[keyboardFocused] {
+  box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
+  z-index: 1;
+}
+
 SText:not(:only-child):first-child {
   padding-right: 0;
 }
@@ -227,9 +249,12 @@ SClose {
   align-items: center;
   justify-content: center;
   padding: var(--intergalactic-spacing-1x, 4px);
-  opacity: 0.5;
 
-  &:hover {
+  & path {
+    opacity: 0.5;
+  }
+
+  &:hover path {
     opacity: 1;
   }
 }

package/tag/lib/es6/Tag.js

@@ -21,26 +21,28 @@ import { localizedMessages } from './translations/__intergalactic-dynamic-locale
 import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
 import resolveColorEnhance from 'intergalactic/utils/lib/enhances/resolveColorEnhance';
 import uniqueIDEnhancement from 'intergalactic/utils/lib/uniqueID';
+import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
 /*__reshadow-styles__:"./style/tag.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STag_m3zdm_gg_{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border:1px solid var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:var(--intergalactic-tag-rounded, 24px);padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);font-weight:var(--intergalactic-medium, 500);color:var(--tag-color_m3zdm)}.___STag_m3zdm_gg_:has(.___SText_m3zdm_gg_:focus){box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_m3zdm_gg_::after,.___STag_m3zdm_gg_::before{content:\"\";position:absolute;border-radius:var(--intergalactic-tag-rounded, 24px);filter:brightness(150%)}.___STag_m3zdm_gg_::before{top:0;left:0;right:0;bottom:0;background-color:var(--tag-color_m3zdm);opacity:.2}.___STag_m3zdm_gg_::after{top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border:1px solid var(--tag-color_m3zdm);opacity:.1}.___STag_m3zdm_gg_.__disabled_m3zdm_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STag_m3zdm_gg_.__interactive_m3zdm_gg_{cursor:pointer}.___STag_m3zdm_gg_._size_m_m3zdm_gg_{height:20px;min-width:20px}.___STag_m3zdm_gg_._size_m_m3zdm_gg_ .___SCircle_m3zdm_gg_:first-child{margin-left:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_m3zdm_gg_._size_m_m3zdm_gg_ .___SCircle_m3zdm_gg_:last-child{margin-right:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_m3zdm_gg_._size_m_m3zdm_gg_ .___SText_m3zdm_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___STag_m3zdm_gg_._size_l_m3zdm_gg_{height:28px;min-width:28px}.___STag_m3zdm_gg_._size_l_m3zdm_gg_ .___SText_m3zdm_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STag_m3zdm_gg_._size_xl_m3zdm_gg_{height:40px;min-width:40px}.___STag_m3zdm_gg_._size_xl_m3zdm_gg_ .___SText_m3zdm_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STag_m3zdm_gg_._theme_primary_m3zdm_gg_::before{top:-1px;left:-1px;right:-1px;bottom:-1px}.___STag_m3zdm_gg_._theme_primary_m3zdm_gg_:after{display:none}.___STag_m3zdm_gg_._theme_primary_m3zdm_gg_.__active_m3zdm_gg_:before,.___STag_m3zdm_gg_._theme_primary_m3zdm_gg_.__interactive_m3zdm_gg_:active:before{opacity:.3}@media (hover:hover){.___STag_m3zdm_gg_._theme_primary_m3zdm_gg_.__interactive_m3zdm_gg_:hover:before{opacity:.3}}.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_::before,.___STag_m3zdm_gg_._theme_secondary_m3zdm_gg_::before{opacity:.01}.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_.__active_m3zdm_gg_:before,.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_.__interactive_m3zdm_gg_:active:before,.___STag_m3zdm_gg_._theme_secondary_m3zdm_gg_.__active_m3zdm_gg_:before,.___STag_m3zdm_gg_._theme_secondary_m3zdm_gg_.__interactive_m3zdm_gg_:active:before{opacity:.1}@media (hover:hover){.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_.__interactive_m3zdm_gg_:hover:before,.___STag_m3zdm_gg_._theme_secondary_m3zdm_gg_.__interactive_m3zdm_gg_:hover:before{opacity:.1}}.___STag_m3zdm_gg_._theme_additional-invert_m3zdm_gg_::after,.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_::after,.___STag_m3zdm_gg_._theme_secondary-invert_m3zdm_gg_::after,.___STag_m3zdm_gg_._theme_secondary_m3zdm_gg_::after{opacity:.5}.___STag_m3zdm_gg_._theme_primary-invert_m3zdm_gg_{background-color:var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15))}.___STag_m3zdm_gg_._theme_additional-invert_m3zdm_gg_,.___STag_m3zdm_gg_._theme_primary-invert_m3zdm_gg_,.___STag_m3zdm_gg_._theme_secondary-invert_m3zdm_gg_{color:var(--intergalactic-text-primary-invert, #ffffff)}.___STag_m3zdm_gg_._theme_additional_m3zdm_gg_::after{border-style:dashed}.___SText_m3zdm_gg_{display:inline-block;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0;position:relative}.___SText_m3zdm_gg_:not(:only-child):first-child{padding-right:0}.___SText_m3zdm_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_m3zdm_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_m3zdm_gg_,.___SCircle_m3zdm_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_m3zdm_gg_{flex-shrink:0;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);position:relative}.___SCircle_m3zdm_gg_{overflow:hidden;border-radius:50%;margin:0 var(--intergalactic-spacing-1x, 4px)}.___SCircle_m3zdm_gg_:first-child{margin-left:0}.___SCircle_m3zdm_gg_:last-child{margin-right:0}.___SCircle_m3zdm_gg_._size_m_m3zdm_gg_{width:16px;height:16px}.___SCircle_m3zdm_gg_._size_l_m3zdm_gg_,.___SCircle_m3zdm_gg_._size_xl_m3zdm_gg_{width:20px;height:20px}.___SClose_m3zdm_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--intergalactic-spacing-1x, 4px);opacity:.5}@media (hover:hover){.___SClose_m3zdm_gg_:hover{opacity:1}}" /*__inner_css_end__*/, "m3zdm_gg_") /*__reshadow_css_end__*/, {
-  "__STag": "___STag_m3zdm_gg_",
-  "_disabled": "__disabled_m3zdm_gg_",
-  "_interactive": "__interactive_m3zdm_gg_",
-  "_theme_primary-invert": "_theme_primary-invert_m3zdm_gg_",
-  "_theme_secondary-invert": "_theme_secondary-invert_m3zdm_gg_",
-  "_theme_additional-invert": "_theme_additional-invert_m3zdm_gg_",
-  "__SText": "___SText_m3zdm_gg_",
-  "__SAddon": "___SAddon_m3zdm_gg_",
-  "__SCircle": "___SCircle_m3zdm_gg_",
-  "_size_m": "_size_m_m3zdm_gg_",
-  "_size_l": "_size_l_m3zdm_gg_",
-  "_size_xl": "_size_xl_m3zdm_gg_",
-  "--tag-color": "--tag-color_m3zdm",
-  "_theme_primary": "_theme_primary_m3zdm_gg_",
-  "_active": "__active_m3zdm_gg_",
-  "_theme_secondary": "_theme_secondary_m3zdm_gg_",
-  "_theme_additional": "_theme_additional_m3zdm_gg_",
-  "__SClose": "___SClose_m3zdm_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___STag_1a798_gg_{position:relative;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;border:1px solid var(--intergalactic-bg-primary-neutral, #ffffff);box-sizing:border-box;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);border-radius:var(--intergalactic-tag-rounded, 24px);padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);font-weight:var(--intergalactic-medium, 500);color:var(--tag-color_1a798)}.___STag_1a798_gg_:has(.___SText_1a798_gg_:focus){box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___STag_1a798_gg_::after,.___STag_1a798_gg_::before{content:\"\";position:absolute;border-radius:var(--intergalactic-tag-rounded, 24px);filter:brightness(150%)}.___STag_1a798_gg_::before{top:0;left:0;right:0;bottom:0;background-color:var(--tag-color_1a798);opacity:.2}.___STag_1a798_gg_::after{top:-1px;left:-1px;right:-1px;bottom:-1px;pointer-events:none;border:1px solid var(--tag-color_1a798);opacity:.1}.___STag_1a798_gg_:active,.___STag_1a798_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___STag_1a798_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___STag_1a798_gg_.__keyboardFocused_1a798_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___STag_1a798_gg_.__keyboardFocused_1a798_gg_:has(:focus){box-shadow:none}.___STag_1a798_gg_.__disabled_1a798_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___STag_1a798_gg_.__interactive_1a798_gg_{cursor:pointer}.___STag_1a798_gg_._size_m_1a798_gg_{height:20px;min-width:20px}.___STag_1a798_gg_._size_m_1a798_gg_ .___SCircle_1a798_gg_:first-child{margin-left:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_1a798_gg_._size_m_1a798_gg_ .___SCircle_1a798_gg_:last-child{margin-right:calc(-1*var(--intergalactic-spacing-05x, 2px))}.___STag_1a798_gg_._size_m_1a798_gg_ .___SText_1a798_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___STag_1a798_gg_._size_l_1a798_gg_{height:28px;min-width:28px}.___STag_1a798_gg_._size_l_1a798_gg_ .___SText_1a798_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___STag_1a798_gg_._size_xl_1a798_gg_{height:40px;min-width:40px}.___STag_1a798_gg_._size_xl_1a798_gg_ .___SText_1a798_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___STag_1a798_gg_._theme_primary_1a798_gg_::before{top:-1px;left:-1px;right:-1px;bottom:-1px}.___STag_1a798_gg_._theme_primary_1a798_gg_:after{display:none}.___STag_1a798_gg_._theme_primary_1a798_gg_.__active_1a798_gg_:before,.___STag_1a798_gg_._theme_primary_1a798_gg_.__interactive_1a798_gg_:active:before{opacity:.3}@media (hover:hover){.___STag_1a798_gg_._theme_primary_1a798_gg_.__interactive_1a798_gg_:hover:before{opacity:.3}}.___STag_1a798_gg_._theme_additional_1a798_gg_::before,.___STag_1a798_gg_._theme_secondary_1a798_gg_::before{opacity:.01}.___STag_1a798_gg_._theme_additional_1a798_gg_.__active_1a798_gg_:before,.___STag_1a798_gg_._theme_additional_1a798_gg_.__interactive_1a798_gg_:active:before,.___STag_1a798_gg_._theme_secondary_1a798_gg_.__active_1a798_gg_:before,.___STag_1a798_gg_._theme_secondary_1a798_gg_.__interactive_1a798_gg_:active:before{opacity:.1}@media (hover:hover){.___STag_1a798_gg_._theme_additional_1a798_gg_.__interactive_1a798_gg_:hover:before,.___STag_1a798_gg_._theme_secondary_1a798_gg_.__interactive_1a798_gg_:hover:before{opacity:.1}}.___SClose_1a798_gg_ path,.___STag_1a798_gg_._theme_additional-invert_1a798_gg_::after,.___STag_1a798_gg_._theme_additional_1a798_gg_::after,.___STag_1a798_gg_._theme_secondary-invert_1a798_gg_::after,.___STag_1a798_gg_._theme_secondary_1a798_gg_::after{opacity:.5}.___STag_1a798_gg_._theme_primary-invert_1a798_gg_{background-color:var(--intergalactic-tag-primary-white-normal, rgba(255, 255, 255, 0.15))}.___STag_1a798_gg_._theme_additional-invert_1a798_gg_,.___STag_1a798_gg_._theme_primary-invert_1a798_gg_,.___STag_1a798_gg_._theme_secondary-invert_1a798_gg_{color:var(--intergalactic-text-primary-invert, #ffffff)}.___STag_1a798_gg_._theme_additional_1a798_gg_::after{border-style:dashed}.___SText_1a798_gg_{display:inline-block;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;outline:0;position:relative}.___SText_1a798_gg_.__keyboardFocused_1a798_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SText_1a798_gg_:not(:only-child):first-child{padding-right:0}.___SText_1a798_gg_:not(:first-child):not(:last-child){padding-left:0;padding-right:0}.___SText_1a798_gg_:not(:only-child):last-child{padding-left:0}.___SAddon_1a798_gg_,.___SCircle_1a798_gg_{display:inline-flex;align-items:center;justify-content:center}.___SAddon_1a798_gg_{flex-shrink:0;padding-left:var(--intergalactic-spacing-1x, 4px);padding-right:var(--intergalactic-spacing-1x, 4px);position:relative}.___SCircle_1a798_gg_{overflow:hidden;border-radius:50%;margin:0 var(--intergalactic-spacing-1x, 4px)}.___SCircle_1a798_gg_:first-child{margin-left:0}.___SCircle_1a798_gg_:last-child{margin-right:0}.___SCircle_1a798_gg_._size_m_1a798_gg_{width:16px;height:16px}.___SCircle_1a798_gg_._size_l_1a798_gg_,.___SCircle_1a798_gg_._size_xl_1a798_gg_{width:20px;height:20px}.___SClose_1a798_gg_{cursor:pointer;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;padding:var(--intergalactic-spacing-1x, 4px)}@media (hover:hover){.___SClose_1a798_gg_:hover path{opacity:1}}" /*__inner_css_end__*/, "1a798_gg_") /*__reshadow_css_end__*/, {
+  "__STag": "___STag_1a798_gg_",
+  "_keyboardFocused": "__keyboardFocused_1a798_gg_",
+  "_disabled": "__disabled_1a798_gg_",
+  "_interactive": "__interactive_1a798_gg_",
+  "_theme_primary-invert": "_theme_primary-invert_1a798_gg_",
+  "_theme_secondary-invert": "_theme_secondary-invert_1a798_gg_",
+  "_theme_additional-invert": "_theme_additional-invert_1a798_gg_",
+  "__SText": "___SText_1a798_gg_",
+  "__SAddon": "___SAddon_1a798_gg_",
+  "__SCircle": "___SCircle_1a798_gg_",
+  "_size_m": "_size_m_1a798_gg_",
+  "_size_l": "_size_l_1a798_gg_",
+  "_size_xl": "_size_xl_1a798_gg_",
+  "--tag-color": "--tag-color_1a798",
+  "_theme_primary": "_theme_primary_1a798_gg_",
+  "_active": "__active_1a798_gg_",
+  "_theme_secondary": "_theme_secondary_1a798_gg_",
+  "_theme_additional": "_theme_additional_1a798_gg_",
+  "__SClose": "___SClose_1a798_gg_"
 });
 import { callAllEventHandlers } from 'intergalactic/utils/lib/assignProps';
 var legacyThemeRecommendedMigration = {
@@ -63,13 +65,27 @@ var RootTag = /*#__PURE__*/function (_Component) {
     var _this;
     _classCallCheck(this, RootTag);
     _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (e) {
-      var _this$asProps$onClick, _this$asProps;
-      switch (e.key) {
-        case ' ':
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      focusable: 'container'
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleCloseMount", function () {
+      _this.setState({
+        focusable: 'text'
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleCloseUnmount", function () {
+      _this.setState({
+        focusable: 'container'
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDown", function (event) {
+      switch (event.code) {
+        case 'Space':
         case 'Enter':
-          e.preventDefault();
-          (_this$asProps$onClick = (_this$asProps = _this.asProps).onClick) === null || _this$asProps$onClick === void 0 ? void 0 : _this$asProps$onClick.call(_this$asProps, e);
+          if (_this.asProps.onClick) {
+            event.preventDefault();
+            _this.asProps.onClick(event);
+          }
           break;
       }
     });
@@ -84,17 +100,30 @@ var RootTag = /*#__PURE__*/function (_Component) {
         size: size
       };
     }
+  }, {
+    key: "getTextProps",
+    value: function getTextProps() {
+      var interactive = this.asProps.interactive;
+      var id = this.asProps.id || "igc-".concat(this.asProps.uid, "-tag");
+      var focusable = this.state.focusable;
+      return {
+        tabIndex: focusable === 'text' && interactive ? 0 : -1,
+        id: "".concat(id, "-text")
+      };
+    }
   }, {
     key: "getCloseProps",
     value: function getCloseProps() {
-      var _this$asProps2 = this.asProps,
-        getI18nText = _this$asProps2.getI18nText,
-        id = _this$asProps2.id,
-        uid = _this$asProps2.uid;
+      var getI18nText = this.asProps.getI18nText;
+      var id = this.asProps.id || "igc-".concat(this.asProps.uid, "-tag");
       return {
         getI18nText: getI18nText,
-        tagId: id || "igc-".concat(uid, "-tag"),
-        uid: uid
+        id: "".concat(id, "-clear"),
+        'aria-labelledby': "".concat(id, "-clear ").concat(id, "-text"),
+        'aria-label': getI18nText('remove'),
+        'aria-hidden': 'true',
+        onMount: this.handleCloseMount,
+        onUnmount: this.handleCloseUnmount
       };
     }
   }, {
@@ -103,26 +132,27 @@ var RootTag = /*#__PURE__*/function (_Component) {
       var _ref = this.asProps,
         _ref6;
       var STag = Box;
-      var _this$asProps3 = this.asProps,
-        Children = _this$asProps3.Children,
-        styles = _this$asProps3.styles,
-        color = _this$asProps3.color,
-        interactive = _this$asProps3.interactive,
-        disabled = _this$asProps3.disabled,
-        addonLeft = _this$asProps3.addonLeft,
-        addonRight = _this$asProps3.addonRight,
-        resolveColor = _this$asProps3.resolveColor,
-        onClick = _this$asProps3.onClick,
-        outerId = _this$asProps3.id,
-        uid = _this$asProps3.uid,
-        onKeyDown = _this$asProps3.onKeyDown;
+      var _this$asProps = this.asProps,
+        Children = _this$asProps.Children,
+        styles = _this$asProps.styles,
+        color = _this$asProps.color,
+        interactive = _this$asProps.interactive,
+        disabled = _this$asProps.disabled,
+        addonLeft = _this$asProps.addonLeft,
+        addonRight = _this$asProps.addonRight,
+        resolveColor = _this$asProps.resolveColor,
+        outerId = _this$asProps.id,
+        uid = _this$asProps.uid,
+        onKeyDown = _this$asProps.onKeyDown;
+      var focusable = this.state.focusable;
       var id = outerId || "igc-".concat(uid, "-tag");
       return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(STag, _ref6.cn("STag", _objectSpread({}, _assignProps({
         "id": id,
         "use:interactive": !disabled && interactive,
-        "tabIndex": interactive && onClick ? 0 : undefined,
+        "role": interactive ? 'button' : undefined,
         "tag-color": resolveColor(color),
-        "onKeyDown": callAllEventHandlers(onKeyDown, this.handleKeyDown)
+        "onKeyDown": callAllEventHandlers(onKeyDown, this.handleKeyDown),
+        "use:tabIndex": interactive && focusable === 'container' ? 0 : -1
       }, _ref))), addonLeft ? /*#__PURE__*/React.createElement(Tag.Addon, {
         tag: addonLeft
       }) : null, addonTextChildren(Children, Tag.Text, Tag.Addon), addonRight ? /*#__PURE__*/React.createElement(Tag.Addon, {
@@ -134,7 +164,7 @@ var RootTag = /*#__PURE__*/function (_Component) {
 }(Component);
 _defineProperty(RootTag, "displayName", 'Tag');
 _defineProperty(RootTag, "style", style);
-_defineProperty(RootTag, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement(), resolveColorEnhance()]);
+_defineProperty(RootTag, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhancement(), resolveColorEnhance(), keyboardFocusEnhance()]);
 _defineProperty(RootTag, "defaultProps", {
   theme: 'primary',
   color: 'gray-500',
@@ -151,15 +181,21 @@ function Text(props) {
     "tag": 'span'
   }, _ref2))));
 }
+Text.enhance = [keyboardFocusEnhance()];
 function Close(props) {
   var _ref3 = arguments[0],
     _ref8;
   var SClose = Box;
-  var styles = props.styles,
-    getI18nText = props.getI18nText,
-    tagId = props.tagId,
-    uid = props.uid;
-  function onKeyDown(event) {
+  var styles = props.styles;
+  React.useEffect(function () {
+    var _props$onMount;
+    (_props$onMount = props.onMount) === null || _props$onMount === void 0 ? void 0 : _props$onMount.call(props);
+    return function () {
+      var _props$onUnmount;
+      return (_props$onUnmount = props.onUnmount) === null || _props$onUnmount === void 0 ? void 0 : _props$onUnmount.call(props);
+    };
+  }, []);
+  var onKeyDown = React.useCallback(function (event) {
     if (props.onKeyDown) {
       return props.onKeyDown(event);
     }
@@ -167,13 +203,10 @@ function Close(props) {
       event.preventDefault();
       props.onClick(event);
     }
-  }
+  }, [props.onKeyDown, props.onClick]);
   return _ref8 = sstyled(styles), /*#__PURE__*/React.createElement(SClose, _ref8.cn("SClose", _objectSpread({}, _assignProps3({
     "tag": CloseM,
     "interactive": true,
-    "id": "igc-".concat(uid, "-tag-clear"),
-    "aria-labelledby": "igc-".concat(uid, "-tag-clear ").concat(tagId),
-    "aria-label": getI18nText('remove'),
     "onKeyDown": onKeyDown
   }, _ref3))));
 }