@inera/ids-design 5.5.0 → 6.0.0

package/components/tabs/tabs-lit.js

@@ -2,7 +2,7 @@ import { css, unsafeCSS } from 'lit';
 
 var css_248z$1 = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-tabs .ids-tabs__select{display:block}.ids-tabs .ids-tabs__tabs{align-items:flex-end;border-bottom:var(--IDS-TABS__BORDER-BOTTOM);display:none;flex-wrap:wrap;gap:.25rem;padding:0 1.25rem;position:relative}.ids-tabs .ids-tabs__tabs:before{bottom:0;box-shadow:inset 0 -.25rem .25rem -.25rem rgba(0,0,0,.2);content:var(--IDS-TAB--SELECTED__BEFORE-CONTENT);height:.625rem;left:0;pointer-events:none;position:absolute;right:0}@media (min-width:1024px){.ids-tabs .ids-tabs__select{display:none}.ids-tabs .ids-tabs__tabs{display:flex}}.ids-tabs.ids-tabs--unresponsive .ids-tabs__select{display:none}.ids-tabs.ids-tabs--unresponsive .ids-tabs__tabs{display:flex!important}@media (min-width:640px){.ids-tabs.ids-tabs--responsive-on-s .ids-tabs__select{display:none}.ids-tabs.ids-tabs--responsive-on-s .ids-tabs__tabs{display:flex}}@media (min-width:1024px){.ids-tabs.ids-tabs--responsive-on-m .ids-tabs__select{display:none}.ids-tabs.ids-tabs--responsive-on-m .ids-tabs__tabs{display:flex}}.ids-tabs .ids-tabs__panels{position:relative;z-index:1}";
 
-var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border:var(--IDS-INPUT__BORDER);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding:var(--IDS-INPUT__PADDING);padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select.ids-input--light:disabled,.ids-select:disabled{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select.ids-input--light.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.ids-select.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select.ids-input--light.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select:disabled{cursor:default}.ids-select:disabled.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100);background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important}.ids-select:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-select-wrapper{display:flex;position:relative}.ids-select-wrapper:after{background-image:var(--IDS-SELECT__CHEVRON-ICON);background-position:50%;background-repeat:no-repeat;bottom:0;content:\"\";display:block;height:100%;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:0;transform:rotate(90deg);width:.75rem}.ids-select-wrapper:has(.ids-input--invalid):after{background-image:var(--IDS-SELECT--INVALID__CHEVRON-ICON)}.ids-select-wrapper:has(.ids-select:disabled):after{background-image:var(--IDS-SELECT--DISABLED__CHEVRON-ICON)}";
+var css_248z = ".ids-select{appearance:none!important;-webkit-appearance:none!important;-moz-appearance:none!important;background-color:var(--IDS-INPUT__BACKGROUND-COLOR);border:var(--IDS-INPUT__BORDER);border-radius:var(--IDS-INPUT__BORDER-RADIUS);color:var(--IDS-INPUT__COLOR);cursor:pointer;display:block;display:inline-block!important;font-family:var(--IDS-FONT-FAMILY-BASE)!important;font-size:1rem;height:var(--IDS-INPUT__HEIGHT);overflow:hidden;padding:var(--IDS-INPUT__PADDING);padding-right:var(--IDS-INPUT__ICON-PADDING-RIGHT)!important;text-align:left;text-overflow:ellipsis;width:100%!important}.ids-select.ids-input--light:disabled,.ids-select:disabled{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select.ids-input--light.ids-input--invalid{background-color:var(--IDS-FORM--INVALID__BACKGROUND-COLOR)}.ids-select.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100)}.ids-select.ids-input--light.ids-input--invalid{background:var(--IDS-FORM--INVALID__BACKGROUND-COLOR);border:var(--IDS-FORM--INVALID__BORDER);box-shadow:inset 0 0 0 .0625rem var(--IDS-FORM--INVALID__BORDER-COLOR)}.ids-select[aria-disabled=true]{background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select:disabled{cursor:default}.ids-select:disabled.ids-input--light{background-color:var(--IDS-COLOR-NEUTRAL-100);background:var(--IDS-FORM--DISABLED__BACKGROUND-COLOR);border:var(--IDS-FORM--DISABLED__BORDER);color:var(--IDS-FORM--DISABLED__COLOR);font-style:italic!important;opacity:1}.ids-select:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-select-wrapper{display:flex;position:relative}.ids-select-wrapper:after{color:var(--IDS-ICON__COLOR);content:\"\\e936\";display:block;font:icon;font-family:Inera-Design-Icons;height:1rem;pointer-events:none;position:absolute;right:var(--IDS-INPUT__ICON-RIGHT);top:50%;transform:translateY(-50%);width:1rem}.ids-select-wrapper:has(.ids-input--invalid):after{color:var(--IDS-ICON--INVALID-COLOR)}.ids-select-wrapper:has([aria-disabled=true]):after,.ids-select-wrapper:has(select:disabled):after{color:var(--IDS-ICON--DISABLED-COLOR)}";
 
 var tabsLit = css`${unsafeCSS(css_248z)} ${unsafeCSS(css_248z$1)}`;
 

package/components/tag/tag-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-tag{align-content:center;align-items:center;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-wrap:wrap;font-family:var(--IDS-TAG__FONT-FAMILY);font-weight:400;justify-content:center;line-height:1rem;padding:var(--IDS-TAG__PADDING)}.ids-tag.ids-tag--interactive{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--interactive:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)}.ids-tag.ids-tag--interactive:hover{color:var(--IDS-TAG--INTERACTIVE-HOVER__COLOR)}.ids-tag .ids-tag__close-btn-icon{background-color:var(--IDS-ICON__COLOR);height:.875rem;mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.268.732A2.5 2.5 0 0 0 .732 4.268L16.464 20 .733 35.732a2.5 2.5 0 0 0 3.536 3.536L20 23.535l15.732 15.733a2.5 2.5 0 0 0 3.536-3.536L23.535 20 39.269 4.268A2.5 2.5 0 1 0 35.732.732L20 16.464 4.268.733Z' fill='%23000'/%3E%3C/svg%3E\");mask-size:cover;width:.875rem}.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:1.5rem;justify-content:center;margin:-.5rem -.5rem -.5rem .5rem;min-height:1.5rem;min-width:1.5rem;outline:inherit;padding:0;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;width:1.5rem}.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:active .ids-tag__close-btn-icon,.ids-tag .ids-tag__close-btn:focus .ids-tag__close-btn-icon,.ids-tag .ids-tag__close-btn:hover .ids-tag__close-btn-icon{background-color:var(--IDS-ICON--ACTIVE__COLOR);mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg width='40' height='40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.268.732A2.5 2.5 0 0 0 .732 4.268L16.464 20 .733 35.732a2.5 2.5 0 0 0 3.536 3.536L20 23.535l15.732 15.733a2.5 2.5 0 0 0 3.536-3.536L23.535 20 39.269 4.268A2.5 2.5 0 1 0 35.732.732L20 16.464 4.268.733Z' fill='%23000'/%3E%3C/svg%3E\");mask-size:cover}";
+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;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 tagLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tag/tag.css

@@ -1,4 +1,7 @@
 /*******
+* ICONS
+********/
+/*******
 * BUTTONS
 ********/
 /*******
@@ -19,31 +22,44 @@
   background-color: var(--IDS-TAG__BACKGROUND-COLOR);
   border-radius: var(--IDS-TAG__BORDER-RADIUS);
   display: inline-flex;
-  flex-wrap: wrap;
+  gap: 0.5rem;
+  flex-direction: row;
   line-height: 1rem;
-  justify-content: center;
-  align-content: center;
-  align-items: center;
+  justify-content: space-between;
 }
-.ids-tag.ids-tag--interactive {
+.ids-tag .ids-tag__content {
+  display: flex;
+}
+.ids-tag.ids-tag--clickable {
   cursor: pointer;
   border-color: var(--IDS-TAG--INTERACTIVE__BORDER-COLOR);
   color: var(--IDS-TAG--INTERACTIVE__COLOR);
   font-weight: var(--IDS-TAG--INTERACTIVE__FONT-WEIGHT);
 }
-.ids-tag.ids-tag--interactive:focus {
+.ids-tag.ids-tag--clickable:focus {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
 }
-.ids-tag.ids-tag--interactive:hover {
+.ids-tag.ids-tag--clickable:hover {
   color: var(--IDS-TAG--INTERACTIVE-HOVER__COLOR);
 }
-.ids-tag .ids-tag__close-btn-icon {
-  background-color: var(--IDS-ICON__COLOR);
-  mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z' fill='black'/%3E%3C/svg%3E");
-  mask-size: cover;
-  width: 0.875rem;
-  height: 0.875rem;
+.ids-tag.ids-tag--clickable ::slotted(button) {
+  min-width: 1.5rem;
+  min-height: 1.5rem;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+  -moz-user-select: -moz-none;
+  -khtml-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: var(--IDS-TAG__BORDER-RADIUS);
+  padding: var(--IDS-TAG__PADDING);
 }
 .ids-tag .ids-tag__close-btn {
   min-width: 1.5rem;
@@ -60,20 +76,29 @@
   -webkit-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  width: 1.5rem;
-  height: 1.5rem;
   display: flex;
   border-radius: 1.25rem;
-  margin: -0.5rem -0.5rem -0.5rem 0.5rem;
+  margin: -0.25rem -0.25rem -0.5rem -0.25rem;
   justify-content: center;
   align-items: center;
+  position: relative;
+  width: 0.875rem;
+  height: 0.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:hover .ids-tag__close-btn-icon, .ids-tag .ids-tag__close-btn:focus .ids-tag__close-btn-icon, .ids-tag .ids-tag__close-btn:active .ids-tag__close-btn-icon {
-  background-color: var(--IDS-ICON--ACTIVE__COLOR);
-  mask-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.26777 0.732233C3.29146 -0.244078 1.70854 -0.244078 0.732233 0.732233C-0.244078 1.70854 -0.244078 3.29146 0.732233 4.26777L16.4645 20L0.732233 35.7322C-0.244078 36.7085 -0.244078 38.2915 0.732233 39.2678C1.70854 40.2441 3.29146 40.2441 4.26777 39.2678L20 23.5355L35.7322 39.2678C36.7085 40.2441 38.2915 40.2441 39.2678 39.2678C40.2441 38.2915 40.2441 36.7085 39.2678 35.7322L23.5355 20L39.2678 4.26777C40.2441 3.29146 40.2441 1.70854 39.2678 0.732233C38.2915 -0.244078 36.7085 -0.244078 35.7322 0.732233L20 16.4645L4.26777 0.732233Z' fill='black'/%3E%3C/svg%3E");
-  mask-size: cover;
+.ids-tag .ids-tag__close-btn:before {
+  font: icon;
+  font-family: "Inera-Design-Icons";
+  display: block;
+  position: absolute;
+  pointer-events: none;
+  content: "\e934";
+  font-size: 0.875rem;
+  color: var(--IDS-ICON__COLOR);
+}
+.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);
 }

package/global/_partials.css

@@ -1,4 +1,7 @@
 /*******
+* ICONS
+********/
+/*******
 * BUTTONS
 ********/
 /*******