@inera/ids-design 6.2.0 → 7.0.0

package/components/tag/tag-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-tag{background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:.063rem solid var(--IDS-TAG__BORDER-COLOR);border-radius:var(--IDS-TAG__BORDER-RADIUS);color:var(--IDS-TAG__COLOR);display:inline-flex;flex-direction:row;font-family:var(--IDS-TAG__FONT-FAMILY);font-weight:400;gap:.5rem;justify-content:space-between;line-height:1rem;padding:var(--IDS-TAG__PADDING)}.ids-tag .ids-tag__content{display:flex}.ids-tag.ids-tag--clickable{border-color:var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);color:var(--IDS-TAG--INTERACTIVE__COLOR);cursor:pointer;font-weight:var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT)}.ids-tag.ids-tag--clickable:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-tag.ids-tag--clickable:hover{color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag.ids-tag--clickable ::slotted(button){background:none;border:none;border-radius:var(--IDS-TAG__BORDER-RADIUS);color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;padding:var(--IDS-TAG__PADDING);-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-tag .ids-tag__close-btn{align-items:center;background:none;border:none;border-radius:1.25rem;color:inherit;cursor:pointer;display:flex;font:inherit;height:.875rem;justify-content:center;margin:-.25rem -.25rem -.5rem;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;position:relative;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:.875rem}.ids-tag .ids-tag__close-btn:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn:before{color:var(--IDS-ICON__COLOR);content:\"\\e934\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;pointer-events:none;position:absolute}.ids-tag .ids-tag__close-btn:active:before,.ids-tag .ids-tag__close-btn:focus:before,.ids-tag .ids-tag__close-btn:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}";
+var css_248z = ".ids-tag{background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:.063rem solid var(--IDS-TAG__BORDER-COLOR);border-radius:var(--IDS-TAG__BORDER-RADIUS);color:var(--IDS-TAG__COLOR);display:inline-block;font-family:var(--IDS-TAG__FONT-FAMILY);font-weight:400;height:max-content;line-height:1rem!important;padding:var(--IDS-TAG__PADDING)}.ids-tag .ids-tag__content{display:flex;flex-direction:row;gap:.5rem;justify-content:space-between}.ids-tag.ids-tag--clickable{border-color:var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);color:var(--IDS-TAG--INTERACTIVE__COLOR);cursor:pointer;font-weight:var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT)}.ids-tag.ids-tag--clickable:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-tag.ids-tag--clickable:hover{color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag.ids-tag--clickable ::slotted(button){background:none;border:none;border-radius:var(--IDS-TAG__BORDER-RADIUS);color:inherit;cursor:pointer;font:inherit;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;padding:var(--IDS-TAG__PADDING);-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-tag .ids-tag__close-btn{background:none;border:none;border-radius:100%;color:inherit;cursor:pointer;font:inherit;height:.875rem;margin:-.25rem -.25rem -.5rem 0;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;position:relative;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:.875rem}.ids-tag .ids-tag__close-btn:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-tag .ids-tag__close-btn:before{color:var(--IDS-ICON__COLOR);content:\"\\e934\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:.875rem;left:50%;pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%)}.ids-tag .ids-tag__close-btn:active,.ids-tag .ids-tag__close-btn:focus,.ids-tag .ids-tag__close-btn:hover{border-radius:100%}.ids-tag .ids-tag__close-btn:active:before,.ids-tag .ids-tag__close-btn:focus:before,.ids-tag .ids-tag__close-btn:hover:before{color:var(--IDS-ICON--ACTIVE-COLOR)}";
 
 var tagLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tag/tag.css

@@ -21,14 +21,15 @@
   border: 0.063rem solid var(--IDS-TAG__BORDER-COLOR);
   background-color: var(--IDS-TAG__BACKGROUND-COLOR);
   border-radius: var(--IDS-TAG__BORDER-RADIUS);
-  display: inline-flex;
-  gap: 0.5rem;
-  flex-direction: row;
-  line-height: 1rem;
-  justify-content: space-between;
+  display: inline-block;
+  line-height: 1rem !important;
+  height: max-content;
 }
 .ids-tag .ids-tag__content {
   display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+  justify-content: space-between;
 }
 .ids-tag.ids-tag--clickable {
   cursor: pointer;
@@ -76,11 +77,8 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  display: flex;
-  border-radius: 1.25rem;
-  margin: -0.25rem -0.25rem -0.5rem -0.25rem;
-  justify-content: center;
-  align-items: center;
+  border-radius: 100%;
+  margin: -0.25rem -0.25rem -0.5rem 0;
   position: relative;
   width: 0.875rem;
   height: 0.875rem;
@@ -97,8 +95,14 @@
   pointer-events: none;
   content: "\e934";
   font-size: 0.875rem;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   color: var(--IDS-ICON__COLOR);
 }
+.ids-tag .ids-tag__close-btn:hover, .ids-tag .ids-tag__close-btn:focus, .ids-tag .ids-tag__close-btn:active {
+  border-radius: 100%;
+}
 .ids-tag .ids-tag__close-btn:hover:before, .ids-tag .ids-tag__close-btn:focus:before, .ids-tag .ids-tag__close-btn:active:before {
   color: var(--IDS-ICON--ACTIVE-COLOR);
 }