@dnb/eufemia 10.22.0 → 10.23.0

package/cjs/components/tag/Tag.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultProps = exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _IconPrimary2 = _interopRequireDefault(require("../icon-primary/IconPrimary"));
+var _IconPrimary = _interopRequireDefault(require("../icon-primary/IconPrimary"));
 var _Button = _interopRequireDefault(require("../button/Button"));
 var _Context = _interopRequireDefault(require("../../shared/Context"));
 var _componentHelper = require("../../shared/component-helper");
@@ -15,7 +15,8 @@ var _TagGroup = _interopRequireDefault(require("./TagGroup"));
 var _TagContext = require("./TagContext");
 var _SpacingHelper = require("../space/SpacingHelper");
 var _svg;
-const _excluded = ["className", "skeleton", "children", "text", "hasLabel", "onClick", "onDelete", "omitOnKeyUpDeleteEvent", "removeIconTitle"];
+const _excluded = ["className", "skeleton", "children", "text", "hasLabel", "variant", "onClick", "omitOnKeyUpDeleteEvent", "removeIconTitle", "addIconTitle"],
+  _excluded2 = ["onDelete"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
@@ -26,43 +27,44 @@ const defaultProps = {
 };
 exports.defaultProps = defaultProps;
 const Tag = localProps => {
-  var _context$translation, _IconPrimary;
+  var _context$translation;
   const context = _react.default.useContext(_Context.default);
   const tagGroupContext = _react.default.useContext(_TagContext.TagGroupContext);
   const allProps = (0, _componentHelper.extendPropsWithContext)(localProps, defaultProps, context === null || context === void 0 ? void 0 : (_context$translation = context.translation) === null || _context$translation === void 0 ? void 0 : _context$translation.Tag, context === null || context === void 0 ? void 0 : context.Tag, tagGroupContext);
-  const {
+  const _handleDeprecatedBeha = handleDeprecatedBehaviour(allProps),
+    {
       className,
       skeleton,
       children,
       text,
       hasLabel,
+      variant = 'default',
       onClick,
-      onDelete,
       omitOnKeyUpDeleteEvent,
-      removeIconTitle
-    } = allProps,
-    props = _objectWithoutProperties(allProps, _excluded);
+      removeIconTitle,
+      addIconTitle
+    } = _handleDeprecatedBeha,
+    props = _objectWithoutProperties(_handleDeprecatedBeha, _excluded);
   const content = text || children;
-  const isClickable = !!onClick;
-  const isRemovable = !!onDelete && !isClickable;
-  const isInteractive = isClickable || isRemovable;
+  const addIcon = variant === 'removable' || variant === 'addable';
+  const isInteractive = variant !== 'default';
   const spacingClasses = (0, _SpacingHelper.createSpacingClasses)(props);
-  const tagClassNames = (0, _classnames.default)('dnb-tag', className, spacingClasses, isInteractive && 'dnb-tag--interactive', isRemovable && 'dnb-tag--removable');
+  const tagClassNames = (0, _classnames.default)(`dnb-tag dnb-tag--${variant}`, className, spacingClasses, isInteractive && 'dnb-tag--interactive');
   const buttonAttr = props;
   const isDeleteKeyboardEvent = keyboardEvent => {
     return keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete';
   };
-  const handleKeyUp = event => {
-    if (onDelete && isDeleteKeyboardEvent(event)) {
-      onDelete(event);
+  const handleDeleteKeyUp = event => {
+    if (isDeleteKeyboardEvent(event) && onClick) {
+      onClick(event);
     }
   };
   if (!isInteractive) {
     buttonAttr.element = 'span';
     buttonAttr.type = '';
   }
-  if (isRemovable) {
-    buttonAttr.icon = getDeleteIcon();
+  if (addIcon) {
+    buttonAttr.icon = getIcon(variant === 'addable' ? addIconTitle : removeIconTitle);
   }
   if (!tagGroupContext && !hasLabel) {
     (0, _componentHelper.warn)(`Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`);
@@ -70,35 +72,48 @@ const Tag = localProps => {
   return _react.default.createElement(_Button.default, _extends({
     variant: "unstyled",
     size: "small",
-    icon_position: isRemovable ? 'right' : 'left',
+    icon_position: addIcon ? 'right' : 'left',
     className: tagClassNames,
-    on_click: onClick || onDelete,
+    on_click: onClick,
     text: content,
     skeleton: skeleton,
-    onKeyUp: isRemovable && !omitOnKeyUpDeleteEvent ? e => handleKeyUp(e) : undefined
+    onKeyUp: variant === 'removable' && !omitOnKeyUpDeleteEvent ? e => handleDeleteKeyUp(e) : undefined
   }, buttonAttr));
-  function getDeleteIcon() {
-    return _IconPrimary || (_IconPrimary = _react.default.createElement(_IconPrimary2.default, {
-      title: removeIconTitle,
-      inherit_color: false,
-      icon: _svg || (_svg = _react.default.createElement("svg", {
-        width: "16",
-        height: "16",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg"
-      }, _react.default.createElement("path", {
-        d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
-        className: "dnb-icon-close-circle-path"
-      }), _react.default.createElement("path", {
-        d: "m5.5 10.5 5-5m0 5-5-5",
-        className: "dnb-icon-close-cross-path",
-        strokeWidth: "1.5",
-        strokeLinecap: "round",
-        strokeLinejoin: "round"
-      })))
-    }));
+};
+const handleDeprecatedBehaviour = _ref => {
+  let {
+      onDelete
+    } = _ref,
+    allProps = _objectWithoutProperties(_ref, _excluded2);
+  if (!allProps.variant) {
+    if (allProps.onClick) {
+      allProps.variant = 'clickable';
+    } else if (onDelete) {
+      allProps.onClick = onDelete;
+      allProps.variant = 'removable';
+    }
   }
+  return allProps;
 };
+const getIcon = title => _react.default.createElement(_IconPrimary.default, {
+  title: title,
+  inherit_color: false,
+  icon: _svg || (_svg = _react.default.createElement("svg", {
+    width: "16",
+    height: "16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, _react.default.createElement("path", {
+    d: "M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z",
+    className: "dnb-icon-close-circle-path"
+  }), _react.default.createElement("path", {
+    d: "m5.5 10.5 5-5m0 5-5-5",
+    className: "dnb-icon-close-cross-path",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  })))
+});
 Tag.Group = _TagGroup.default;
 Tag._formElement = true;
 Tag._supportsSpacingProps = true;

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

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","names":["_react","_interopRequireDefault","require","_classnames","_IconPrimary2","_Button","_Context","_componentHelper","_TagGroup","_TagContext","_SpacingHelper","_svg","_excluded","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","skeleton","omitOnKeyUpDeleteEvent","exports","Tag","localProps","_context$translation","_IconPrimary","context","React","useContext","Context","tagGroupContext","TagGroupContext","allProps","extendPropsWithContext","translation","className","children","text","hasLabel","onClick","onDelete","removeIconTitle","props","content","isClickable","isRemovable","isInteractive","spacingClasses","createSpacingClasses","tagClassNames","classnames","buttonAttr","isDeleteKeyboardEvent","keyboardEvent","handleKeyUp","event","element","type","icon","getDeleteIcon","warn","createElement","variant","size","icon_position","on_click","onKeyUp","e","undefined","title","inherit_color","width","height","fill","xmlns","d","strokeWidth","strokeLinecap","strokeLinejoin","Group","TagGroup","_formElement","_supportsSpacingProps","_default"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport Button, { ButtonProps } from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\n// Internal\nimport TagGroup from './TagGroup'\nimport { TagGroupContext } from './TagContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nexport interface TagProps {\n  /**\n   * The content of the tag element, can be a string or a React Element.\n   * Default: null\n   */\n  text?: string | React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: null\n   */\n  icon?: IconIcon\n\n  /**\n   * If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.\n   * Default: null\n   */\n  hasLabel?: boolean\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop\n   * Default: null\n   */\n  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...\n\n  /**\n   * Handle the click event on 'tag' element\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   */\n  onDelete?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   */\n  omitOnKeyUpDeleteEvent?: boolean\n\n  /**\n   * Internal property\n   * Has translation in context\n   */\n  removeIconTitle?: string\n}\n\nexport const defaultProps = {\n  skeleton: null,\n  omitOnKeyUpDeleteEvent: false,\n}\n\nconst Tag = (localProps: TagProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const tagGroupContext = React.useContext(TagGroupContext)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Tag,\n    context?.Tag,\n    tagGroupContext\n  )\n\n  const {\n    className,\n    skeleton,\n    children,\n    text,\n    hasLabel,\n    onClick,\n    onDelete,\n    omitOnKeyUpDeleteEvent,\n    removeIconTitle, // has a translation in context\n    ...props\n  } = allProps\n\n  const content = text || children\n  const isClickable = !!onClick\n  const isRemovable = !!onDelete && !isClickable\n  const isInteractive = isClickable || isRemovable\n  const spacingClasses = createSpacingClasses(props)\n  const tagClassNames = classnames(\n    'dnb-tag',\n    className,\n    spacingClasses,\n    isInteractive && 'dnb-tag--interactive',\n    isRemovable && 'dnb-tag--removable'\n  )\n  const buttonAttr: typeof props & Pick<ButtonProps, 'element' | 'type'> =\n    props\n\n  const isDeleteKeyboardEvent = (keyboardEvent) => {\n    return (\n      keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'\n    )\n  }\n\n  const handleKeyUp = (event) => {\n    if (onDelete && isDeleteKeyboardEvent(event)) {\n      onDelete(event)\n    }\n  }\n\n  if (!isInteractive) {\n    buttonAttr.element = 'span'\n    buttonAttr.type = ''\n  }\n\n  if (isRemovable) {\n    buttonAttr.icon = getDeleteIcon()\n  }\n\n  if (!tagGroupContext && !hasLabel) {\n    warn(\n      `Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`\n    )\n  }\n\n  return (\n    <Button\n      variant=\"unstyled\"\n      size=\"small\"\n      icon_position={isRemovable ? 'right' : 'left'}\n      className={tagClassNames}\n      on_click={onClick || onDelete}\n      text={content}\n      skeleton={skeleton}\n      onKeyUp={\n        isRemovable && !omitOnKeyUpDeleteEvent\n          ? (e) => handleKeyUp(e)\n          : undefined\n      }\n      {...buttonAttr}\n    />\n  )\n\n  function getDeleteIcon() {\n    return (\n      <IconPrimary\n        title={removeIconTitle}\n        inherit_color={false}\n        icon={\n          <svg\n            width=\"16\"\n            height=\"16\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n          >\n            <path\n              d=\"M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z\"\n              className=\"dnb-icon-close-circle-path\"\n            />\n            <path\n              d=\"m5.5 10.5 5-5m0 5-5-5\"\n              className=\"dnb-icon-close-cross-path\"\n              strokeWidth=\"1.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        }\n      />\n    )\n  }\n}\n\nTag.Group = TagGroup\n\nTag._formElement = true\nTag._supportsSpacingProps = true\n\nexport default Tag\n"],"mappings":"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"}
+{"version":3,"file":"Tag.js","names":["_react","_interopRequireDefault","require","_classnames","_IconPrimary","_Button","_Context","_componentHelper","_TagGroup","_TagContext","_SpacingHelper","_svg","_excluded","_excluded2","obj","__esModule","default","_extends","Object","assign","bind","target","i","arguments","length","source","key","prototype","hasOwnProperty","call","apply","_objectWithoutProperties","excluded","_objectWithoutPropertiesLoose","getOwnPropertySymbols","sourceSymbolKeys","indexOf","propertyIsEnumerable","sourceKeys","keys","defaultProps","skeleton","omitOnKeyUpDeleteEvent","exports","Tag","localProps","_context$translation","context","React","useContext","Context","tagGroupContext","TagGroupContext","allProps","extendPropsWithContext","translation","_handleDeprecatedBeha","handleDeprecatedBehaviour","className","children","text","hasLabel","variant","onClick","removeIconTitle","addIconTitle","props","content","addIcon","isInteractive","spacingClasses","createSpacingClasses","tagClassNames","classnames","buttonAttr","isDeleteKeyboardEvent","keyboardEvent","handleDeleteKeyUp","event","element","type","icon","getIcon","warn","createElement","size","icon_position","on_click","onKeyUp","e","undefined","_ref","onDelete","title","inherit_color","width","height","fill","xmlns","d","strokeWidth","strokeLinecap","strokeLinejoin","Group","TagGroup","_formElement","_supportsSpacingProps","_default"],"sources":["../../../../src/components/tag/Tag.tsx"],"sourcesContent":["import React from 'react'\nimport classnames from 'classnames'\n\n// Components\nimport IconPrimary from '../icon-primary/IconPrimary'\nimport type { IconIcon } from '../icon/Icon'\nimport Button, { ButtonProps } from '../button/Button'\n\n// Shared\nimport Context from '../../shared/Context'\nimport type { SpacingProps } from '../../shared/types'\nimport type { SkeletonShow } from '../skeleton/Skeleton'\nimport {\n  warn,\n  extendPropsWithContext,\n} from '../../shared/component-helper'\n\n// Internal\nimport TagGroup from './TagGroup'\nimport { TagGroupContext } from './TagContext'\nimport { createSpacingClasses } from '../space/SpacingHelper'\n\nexport interface TagProps {\n  /**\n   * The content of the tag element, can be a string or a React Element.\n   * Default: null\n   */\n  text?: string | React.ReactNode\n\n  /**\n   * Icon displaying on the left side\n   * Default: null\n   */\n  icon?: IconIcon\n\n  /**\n   * If a label is given, typical inside a table or dl (definition list), then you can disable Tag.Group as a dependent of Tag. Use `true` to omit the `Tag group required:` warning.\n   * Default: null\n   */\n  hasLabel?: boolean\n\n  /**\n   * Defines the variant\n   * Default: 'default'\n   */\n  variant?: 'default' | 'clickable' | 'addable' | 'removable'\n\n  /**\n   * Custom className on the component root\n   * Default: null\n   */\n  className?: string\n\n  /**\n   * Skeleton should be applied when loading content\n   * Default: null\n   */\n  skeleton?: SkeletonShow\n\n  /**\n   * The content of the tag element, can be a string or a React Element. Will be overwritten by text prop\n   * Default: null\n   */\n  children?: string | React.ReactNode // ReactNode allows multiple elements, strings, numbers, fragments, portals...\n\n  /**\n   * Handle the click event on 'tag' element\n   * Default: null\n   */\n  onClick?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   * @deprecated Use `onClick` instead. With `variant='removable'`\n   */\n  onDelete?: React.MouseEventHandler<HTMLButtonElement>\n\n  /**\n   * Handle the delete event on 'tag' element\n   * Default: null\n   */\n  omitOnKeyUpDeleteEvent?: boolean\n\n  /**\n   * Internal property\n   * Has translation in context\n   */\n  removeIconTitle?: string\n\n  /**\n   * Internal property\n   * Has translation in context\n   */\n  addIconTitle?: string\n}\n\nexport const defaultProps = {\n  skeleton: null,\n  omitOnKeyUpDeleteEvent: false,\n}\n\nconst Tag = (localProps: TagProps & SpacingProps) => {\n  // Every component should have a context\n  const context = React.useContext(Context)\n  const tagGroupContext = React.useContext(TagGroupContext)\n\n  // Extract additional props from global context\n  const allProps = extendPropsWithContext(\n    localProps,\n    defaultProps,\n    context?.translation?.Tag,\n    context?.Tag,\n    tagGroupContext\n  )\n\n  const {\n    className,\n    skeleton,\n    children,\n    text,\n    hasLabel,\n    variant = 'default',\n    onClick,\n    omitOnKeyUpDeleteEvent,\n    removeIconTitle, // has a translation in context\n    addIconTitle, // has a translation in context\n    ...props\n  } = handleDeprecatedBehaviour(allProps)\n\n  const content = text || children\n\n  const addIcon = variant === 'removable' || variant === 'addable'\n  const isInteractive = variant !== 'default'\n  const spacingClasses = createSpacingClasses(props)\n  const tagClassNames = classnames(\n    'dnb-tag',\n    className,\n    spacingClasses,\n    isInteractive && 'dnb-tag--interactive',\n    `dnb-tag--${variant}`\n  )\n  const buttonAttr: typeof props & Pick<ButtonProps, 'element' | 'type'> =\n    props\n\n  const isDeleteKeyboardEvent = (keyboardEvent) => {\n    return (\n      keyboardEvent.key === 'Backspace' || keyboardEvent.key === 'Delete'\n    )\n  }\n\n  const handleDeleteKeyUp = (event) => {\n    if (isDeleteKeyboardEvent(event) && onClick) {\n      onClick(event)\n    }\n  }\n\n  if (!isInteractive) {\n    buttonAttr.element = 'span'\n    buttonAttr.type = ''\n  }\n\n  if (addIcon) {\n    buttonAttr.icon = getIcon(\n      variant === 'addable' ? addIconTitle : removeIconTitle\n    )\n  }\n\n  if (!tagGroupContext && !hasLabel) {\n    warn(\n      `Tag group required: A Tag requires a Tag.Group with label description as a parent component. This is to ensure correct semantic and accessibility.`\n    )\n  }\n\n  return (\n    <Button\n      variant=\"unstyled\"\n      size=\"small\"\n      icon_position={addIcon ? 'right' : 'left'}\n      className={tagClassNames}\n      on_click={onClick}\n      text={content}\n      skeleton={skeleton}\n      onKeyUp={\n        variant === 'removable' && !omitOnKeyUpDeleteEvent\n          ? (e) => handleDeleteKeyUp(e)\n          : undefined\n      }\n      {...buttonAttr}\n    />\n  )\n}\n\n/**\n * Support deprecated behaviour by mutating the props.\n * Deprecated behaviour: variant 'clickable' and 'removable' is defined by the 'onClick' and 'onDelete' props\n */\nconst handleDeprecatedBehaviour: (allProps: TagProps) => TagProps = ({\n  onDelete,\n  ...allProps\n}) => {\n  if (!allProps.variant) {\n    if (allProps.onClick) {\n      allProps.variant = 'clickable'\n    } else if (onDelete) {\n      allProps.onClick = onDelete\n      allProps.variant = 'removable'\n    }\n  }\n  return allProps\n}\nconst getIcon = (title: string) => (\n  <IconPrimary\n    title={title}\n    inherit_color={false}\n    icon={\n      <svg\n        width=\"16\"\n        height=\"16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <path\n          d=\"M0 8a8 8 0 1 1 16 0A8 8 0 1 1 0 8Z\"\n          className=\"dnb-icon-close-circle-path\"\n        />\n        <path\n          d=\"m5.5 10.5 5-5m0 5-5-5\"\n          className=\"dnb-icon-close-cross-path\"\n          strokeWidth=\"1.5\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    }\n  />\n)\n\nTag.Group = TagGroup\n\nTag._formElement = true\nTag._supportsSpacingProps = true\n\nexport default Tag\n"],"mappings":"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"}

package/cjs/components/tag/style/dnb-tag.css

@@ -13,18 +13,17 @@
 * Tag mixins
 *
 */
+.dnb-tag {
+  --tag-icon-color: var(--color-sea-green);
+  --tag-icon-border-color: var(--tag-icon-color);
+}
 .dnb-tag.dnb-button {
   -webkit-appearance: none;
           appearance: none;
   background-color: var(--color-black-8);
-}
-.dnb-tag.dnb-button.dnb-button--size-small {
   padding-left: 0.5rem;
   padding-right: 0.5rem;
 }
-.dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon {
-  padding-left: 0;
-}
 .dnb-tag.dnb-button .dnb-button__text {
   font-size: var(--font-size-x-small);
   transform: none;
@@ -39,48 +38,43 @@
 }
 .dnb-tag--interactive.dnb-button {
   color: var(--color-sea-green);
+  background-color: var(--color-pistachio);
   --border-color: var(--color-sea-green);
   --border-width: 0.0625rem;
   box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-black-8);
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible:not([disabled]) {
+  outline: none;
   --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  --border-width: var(--focus-ring-width);
+  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-emerald-green);
 }
-.dnb-tag--interactive.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--interactive.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  outline: none;
-}
-html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-black-8);
-}
-html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
+html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]) {
+  --border-color: var(--color-emerald-green);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-emerald-green);
 }
 .dnb-tag--interactive.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled] {
   cursor: not-allowed;
 }
 .dnb-tag--interactive.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]) {
-  color: var(--color-sea-green);
   background-color: var(--color-mint-green-50);
   --border-color: transparent;
   --border-width: 0.0625rem;
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
+  --tag-icon-color: var(--color-sea-green);
 }
 .dnb-tag--interactive.dnb-button[disabled] {
   color: var(--color-sea-green-30);
@@ -90,83 +84,53 @@ html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabl
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
-.dnb-tag--removable.dnb-button {
-  color: var(--color-white);
-  background-color: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path {
-  fill: var(--color-white);
+.dnb-tag--removable.dnb-button, .dnb-tag--addable.dnb-button {
+  padding-right: 0.25rem;
+  --tag-icon-fill: var(--tag-icon-fill-color);
+  --tag-icon-stroke: var(--tag-icon-stroke-color);
 }
-.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path {
-  stroke: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button:focus[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--removable.dnb-button:focus:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  outline: none;
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-}
-html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]), html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) {
-  --border-color: var(--focus-ring-color);
-  --border-width: var(--focus-ring-width);
-  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
-}
-.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled] {
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover[disabled] {
   cursor: not-allowed;
 }
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-white);
-  --border-color: var(--color-emerald-green);
-  --border-width: 0.125rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
-}
-html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
+html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled] {
+.dnb-tag--removable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled], .dnb-tag--addable.dnb-button:active[disabled], html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active[disabled] {
   cursor: not-allowed;
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) {
-  color: var(--color-sea-green);
-  background-color: var(--color-mint-green-50);
-  --border-color: transparent;
-  --border-width: 0.0625rem;
-  box-shadow: 0 0 0 var(--border-width) var(--border-color);
-  border-color: transparent;
+.dnb-tag--removable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]), .dnb-tag--addable.dnb-button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active:not([disabled]) {
+  --tag-icon-fill: var(--tag-icon-stroke-color);
+  --tag-icon-stroke: var(--tag-icon-fill-color);
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path {
-  fill: var(--color-sea-green);
+.dnb-tag--removable.dnb-button svg, .dnb-tag--addable.dnb-button svg {
+  border-radius: 50%;
+  outline: 0.0625rem solid var(--tag-icon-border-color);
+  outline-offset: -0.0625rem;
 }
-.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path, html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path {
-  stroke: var(--color-white);
+.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path {
+  fill: var(--tag-icon-fill);
 }
-.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path {
-  fill: var(--color-mint-green-50);
+.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path, .dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path {
+  stroke: var(--tag-icon-stroke);
 }
-.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path {
-  stroke: var(--color-sea-green-30);
+.dnb-tag--addable {
+  --tag-icon-fill-color: var(--tag-icon-color);
+  --tag-icon-stroke-color: var(--color-white);
 }
-.dnb-tag--removable.dnb-button .dnb-button__text {
-  padding-left: 0.5rem;
+.dnb-tag--addable svg {
+  transform: rotate(45deg);
 }
-.dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon {
-  padding-right: 0;
+.dnb-tag--removable {
+  --tag-icon-fill-color: var(--color-white);
+  --tag-icon-stroke-color: var(--tag-icon-color);
 }
 .dnb-tag__group {
   display: inline-flex;

package/cjs/components/tag/style/dnb-tag.min.css

@@ -1 +1 @@
-.dnb-tag.dnb-button{-webkit-appearance:none;appearance:none;background-color:var(--color-black-8)}.dnb-tag.dnb-button.dnb-button--size-small{padding-left:.5rem;padding-right:.5rem}.dnb-tag.dnb-button.dnb-button--size-small.dnb-button--has-icon{padding-left:0}.dnb-tag.dnb-button .dnb-button__text{font-size:var(--font-size-x-small);transform:none}.dnb-tag:not(.dnb-tag--interactive){cursor:unset;-webkit-user-select:unset;user-select:unset}.dnb-tag:not(.dnb-tag--interactive) .dnb-button__text{cursor:text}.dnb-tag--interactive.dnb-button{--border-color:var(--color-sea-green);--border-width:0.0625rem;border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-black-8);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-tag--interactive.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-tag--interactive.dnb-button:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-tag--interactive.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-black-8);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-tag--interactive.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--interactive.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-tag--interactive.dnb-button[disabled]{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-tag--removable.dnb-button{background-color:var(--color-sea-green);color:var(--color-white)}.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path{fill:var(--color-white)}.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path{stroke:var(--color-sea-green)}.dnb-tag--removable.dnb-button:focus[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus[disabled]{cursor:not-allowed}.dnb-tag--removable.dnb-button:focus:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]){outline:none}html[data-whatinput=keyboard] .dnb-tag--removable.dnb-button:focus:not([disabled]),html[data-whatinput=keyboard] html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]){--border-color:var(--focus-ring-color);--border-width:var(--focus-ring-width);background-color:var(--color-white);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-circle-path{fill:var(--color-sea-green)}.dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus:not([disabled]) svg .dnb-icon-close-cross-path{stroke:var(--color-white)}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-circle-path{fill:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]) svg .dnb-icon-close-cross-path{stroke:var(--color-white)}.dnb-tag--removable.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--removable.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-circle-path{fill:var(--color-sea-green)}.dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path,html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]) svg .dnb-icon-close-cross-path{stroke:var(--color-white)}.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-circle-path{fill:var(--color-mint-green-50)}.dnb-tag--removable.dnb-button[disabled] svg .dnb-icon-close-cross-path{stroke:var(--color-sea-green-30)}.dnb-tag--removable.dnb-button .dnb-button__text{padding-left:.5rem}.dnb-tag--removable.dnb-button--size-small.dnb-button--has-icon{padding-right:0}.dnb-tag__group{display:inline-flex;flex-wrap:wrap;gap:.5rem}
+.dnb-tag{--tag-icon-color:var(--color-sea-green);--tag-icon-border-color:var(--tag-icon-color)}.dnb-tag.dnb-button{-webkit-appearance:none;appearance:none;background-color:var(--color-black-8);padding-left:.5rem;padding-right:.5rem}.dnb-tag.dnb-button .dnb-button__text{font-size:var(--font-size-x-small);transform:none}.dnb-tag:not(.dnb-tag--interactive){cursor:unset;-webkit-user-select:unset;user-select:unset}.dnb-tag:not(.dnb-tag--interactive) .dnb-button__text{cursor:text}.dnb-tag--interactive.dnb-button{--border-color:var(--color-sea-green);--border-width:0.0625rem;background-color:var(--color-pistachio);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green)}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:focus-visible:not([disabled]){--border-color:var(--color-emerald-green);--border-width:var(--focus-ring-width);--tag-icon-color:var(--color-emerald-green);border-color:transparent;box-shadow:inset 0 0 0 var(--border-width) var(--border-color);outline:none}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:hover:not([disabled]){--border-color:var(--color-emerald-green);--border-width:0.125rem;--tag-icon-color:var(--color-emerald-green);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-tag--interactive.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--interactive.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--interactive.dnb-button:active:not([disabled]){--border-color:transparent;--border-width:0.0625rem;--tag-icon-color:var(--color-sea-green);background-color:var(--color-mint-green-50);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-tag--interactive.dnb-button[disabled]{--border-color:var(--color-sea-green-30);--border-width:0.0625rem;background-color:var(--color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--color-sea-green-30)}.dnb-tag--addable.dnb-button,.dnb-tag--removable.dnb-button{--tag-icon-fill:var(--tag-icon-fill-color);--tag-icon-stroke:var(--tag-icon-stroke-color);padding-right:.25rem}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:focus-visible:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:focus-visible:not([disabled]){--tag-icon-fill:var(--tag-icon-stroke-color);--tag-icon-stroke:var(--tag-icon-fill-color)}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:hover:not([disabled]){--tag-icon-fill:var(--tag-icon-stroke-color);--tag-icon-stroke:var(--tag-icon-fill-color)}.dnb-tag--addable.dnb-button:active[disabled],.dnb-tag--removable.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active[disabled],html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active[disabled]{cursor:not-allowed}.dnb-tag--addable.dnb-button:active:not([disabled]),.dnb-tag--removable.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--addable.dnb-button:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-tag--removable.dnb-button:active:not([disabled]){--tag-icon-fill:var(--tag-icon-stroke-color);--tag-icon-stroke:var(--tag-icon-fill-color)}.dnb-tag--addable.dnb-button svg,.dnb-tag--removable.dnb-button svg{border-radius:50%;outline:.0625rem solid var(--tag-icon-border-color);outline-offset:-.0625rem}.dnb-tag--addable.dnb-button svg .dnb-icon-close-circle-path,.dnb-tag--removable.dnb-button svg .dnb-icon-close-circle-path{fill:var(--tag-icon-fill)}.dnb-tag--addable.dnb-button svg .dnb-icon-close-cross-path,.dnb-tag--removable.dnb-button svg .dnb-icon-close-cross-path{stroke:var(--tag-icon-stroke)}.dnb-tag--addable{--tag-icon-fill-color:var(--tag-icon-color);--tag-icon-stroke-color:var(--color-white)}.dnb-tag--addable svg{transform:rotate(45deg)}.dnb-tag--removable{--tag-icon-fill-color:var(--color-white);--tag-icon-stroke-color:var(--tag-icon-color)}.dnb-tag__group{display:inline-flex;flex-wrap:wrap;gap:.5rem}

package/cjs/components/tag/style/dnb-tag.scss

@@ -8,18 +8,15 @@
 @import './themes/tag-mixins.scss';
 
 .dnb-tag {
+  --tag-icon-color: var(--color-sea-green);
+  --tag-icon-border-color: var(--tag-icon-color);
+
   &.dnb-button {
     appearance: none;
     background-color: var(--color-black-8);
 
-    &.dnb-button--size-small {
-      padding-left: 0.5rem;
-      padding-right: 0.5rem;
-    }
-
-    &.dnb-button--size-small.dnb-button--has-icon {
-      padding-left: 0;
-    }
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
 
     .dnb-button__text {
       font-size: var(--font-size-x-small);
@@ -39,14 +36,22 @@
   &--interactive {
     &.dnb-button {
       color: var(--color-sea-green);
+      background-color: var(--color-pistachio);
 
       @include fakeBorder(var(--color-sea-green), 0.0625rem, inset);
-      @include buttonHover(var(--color-sea-green), var(--color-black-8));
-      @include buttonFocus(var(--color-sea-green), var(--color-black-8));
+      @include buttonFocusVisible(
+        $focus-color: var(--color-emerald-green)
+      ) {
+        --tag-icon-color: var(--color-emerald-green);
+      }
+      @include buttonHover() {
+        --tag-icon-color: var(--color-emerald-green);
+      }
       @include buttonActive(
-        var(--color-sea-green),
-        var(--color-mint-green-50)
-      );
+        $background-color: var(--color-mint-green-50)
+      ) {
+        --tag-icon-color: var(--color-sea-green);
+      }
 
       &[disabled] {
         color: var(--color-sea-green-30);
@@ -57,45 +62,32 @@
     }
   }
 
-  &--removable {
+  &--removable,
+  &--addable {
     &.dnb-button {
-      color: var(--color-white);
-      background-color: var(--color-sea-green);
-
-      @include deleteIcon(var(--color-white), var(--color-sea-green));
+      padding-right: 0.25rem;
 
-      @include buttonFocus(var(--color-sea-green), var(--color-white)) {
-        @include deleteIcon();
-      }
-
-      @include buttonHover(var(--color-sea-green), var(--color-white)) {
-        @include deleteIcon();
-      }
-
-      @include buttonActive(
-        var(--color-sea-green),
-        var(--color-mint-green-50)
-      ) {
-        @include deleteIcon();
-      }
-
-      &[disabled] {
-        @include deleteIcon(
-          var(--color-mint-green-50),
-          var(--color-sea-green-30)
-        );
-      }
-
-      .dnb-button__text {
-        padding-left: 0.5rem;
-      }
+      @include tagIcon(
+        var(--tag-icon-fill-color),
+        var(--tag-icon-stroke-color),
+        var(--tag-icon-border-color)
+      );
     }
+  }
 
-    &.dnb-button--size-small.dnb-button--has-icon {
-      padding-right: 0;
+  &--addable {
+    --tag-icon-fill-color: var(--tag-icon-color);
+    --tag-icon-stroke-color: var(--color-white);
+    svg {
+      transform: rotate(45deg);
     }
   }
 
+  &--removable {
+    --tag-icon-fill-color: var(--color-white);
+    --tag-icon-stroke-color: var(--tag-icon-color);
+  }
+
   // Default space between tags
   &__group {
     display: inline-flex;

package/cjs/components/tag/style/themes/tag-mixins.scss

@@ -3,17 +3,35 @@
 *
 */
 
-@mixin deleteIcon(
-  $fillColor: var(--color-sea-green),
-  $strokeColor: var(--color-white)
-) {
+@mixin tagIcon($fillColor, $strokeColor, $borderColor) {
+  --tag-icon-fill: #{$fillColor};
+  --tag-icon-stroke: #{$strokeColor};
+
+  @include focus-visible() {
+    --tag-icon-fill: #{$strokeColor};
+    --tag-icon-stroke: #{$fillColor};
+  }
+
+  @include hover() {
+    --tag-icon-fill: #{$strokeColor};
+    --tag-icon-stroke: #{$fillColor};
+  }
+
+  @include active() {
+    --tag-icon-fill: #{$strokeColor};
+    --tag-icon-stroke: #{$fillColor};
+  }
+
   svg {
+    border-radius: 50%;
+    outline: 0.0625rem solid $borderColor;
+    outline-offset: -0.0625rem;
     .dnb-icon-close-circle-path {
-      fill: $fillColor;
+      fill: var(--tag-icon-fill);
     }
 
     .dnb-icon-close-cross-path {
-      stroke: $strokeColor;
+      stroke: var(--tag-icon-stroke);
     }
   }
 }

package/cjs/components/tooltip/Tooltip.js

@@ -32,7 +32,7 @@ function _toPrimitive(input, hint) { if (typeof input !== "object" || input ===
 function Tooltip(localProps) {
   const context = _react.default.useContext(_Context.default);
   const inherited = (0, _TooltipHelpers.getPropsFromTooltipProp)(localProps);
-  const props = (0, _withSnakeCaseProps.convertSnakeCaseProps)(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _TooltipHelpers.defaultProps), localProps), inherited), context.getTranslation(localProps).Tooltip), context.Tooltip));
+  const props = (0, _withSnakeCaseProps.convertSnakeCaseProps)(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, _TooltipHelpers.defaultProps), localProps), inherited), context.getTranslation(localProps)['Tooltip']), context.Tooltip));
   const {
       targetElement,
       targetSelector,