@inera/ids-design 5.0.2 → 5.1.0

package/components/tabs/tabs.css

@@ -5,6 +5,7 @@
 /*******
 * Accessibility
 ********/
+/* headings */
 .ids-tabs {
   display: flex;
   border-bottom: var(--IDS-TABS_BORDER-BOTTOM);
@@ -31,94 +32,7 @@
   pointer-events: none;
 }
 
-.ids-tab {
-  min-width: 24px;
-  min-height: 24px;
-  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;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 0px 23px;
-  background: var(--IDS-TAB_BACKGROUND-COLOR);
-  box-shadow: var(--IDS-TAB_BOX-SHADOW);
-  border-radius: var(--IDS-TAB_BORDER-RADIUS);
-  display: flex;
-  cursor: pointer;
-  position: relative;
-  height: 2.7rem;
-  font-weight: 400;
-  font-size: 1rem;
-  line-height: 20px;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  color: var(--IDS-TAB_COLOR);
-}
-.ids-tab:has(.ids-tab__icon), .ids-tab.ids-tab--has-icon {
-  height: 4.4rem;
-}
-.ids-tab.ids-tab--selected {
-  background-color: white;
-  border: var(--IDS-TAB_BORDER);
-  box-shadow: var(--IDS-TAB--SELECTED_BOX-SHADOW);
-  padding: 0px 22px !important;
-}
-.ids-tab.ids-tab--selected .ids-tab__label {
-  color: var(--IDS-TAB--SELECTED_COLOR);
-}
-.ids-tab.ids-tab--selected:has(.ids-tab__icon), .ids-tab.ids-tab--selected.ids-tab--has-icon {
-  height: 4.6rem;
-}
-.ids-tab.ids-tab--selected:after {
-  content: "";
-  height: var(--IDS-TAB--SELECTED--AFTER_HEIGHT);
-  background-color: var(--IDS-TAB--SELECTED--AFTER_BACKGROUND-COLOR);
-  position: absolute;
-  width: calc(100% + 2px);
-  left: -1px;
-  right: 0px;
-  bottom: var(--IDS-TAB--SELECTED--AFTER_BOTTOM);
-}
-.ids-tab .ids-tab__icon,
-.ids-tab ::slotted([slot=icon]) {
-  margin-bottom: 4px;
-}
-.ids-tab:focus {
-  outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
-}
-
 .ids-tab-panels {
   z-index: 1;
   position: relative;
-}
-
-.ids-tab-panel {
-  display: none;
-  padding-top: 1.5rem;
-  outline-offset: 2px;
-  outline-color: var(--focus-outline_color);
-}
-.ids-tab-panel .ids-tab-panel--hidden {
-  display: none;
-}
-.ids-tab-panel.ids-tab-panel--compact {
-  padding-top: 0px;
-}
-.ids-tab-panel.ids-tab-panel--selected {
-  display: block;
 }

package/components/tag/tag-lit.js

@@ -1,6 +1,6 @@
 import { css, unsafeCSS } from 'lit';
 
-var css_248z = ".ids-tag{align-content:center;background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:1px solid;border-color: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);justify-content:center;line-height:1.5rem;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(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-tag .ids-tag__close-btn{align-items:center;background:none;border:none;border-radius:20px;color:inherit;cursor:pointer;display:flex;font:inherit;height:24px;justify-content:center;margin-left:8px;min-height:24px;min-width:24px;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:24px}.ids-tag .ids-tag__close-btn:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:var(--IDS-FOCUS_OUTLINE-OFFSET)!important}";
+var css_248z = ".ids-tag{align-content:center;align-items:center;background-color:var(--IDS-TAG__BACKGROUND-COLOR);border:1px 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(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-tag.ids-tag--interactive:hover{color:var(--IDS-TAG--INTERACTIVE__COLOR--HOVER)}.ids-tag .ids-tag__close-btn-icon{background-color:var(--IDS-ICON-COLOR);height:14px;mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' width='20' height='20' viewBox='0 0 40 40' aria-hidden='true'%3E%3Cpath xmlns='http://www.w3.org/2000/svg' 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='%23396291'/%3E%3C/svg%3E\");mask-size:cover;width:14px}.ids-tag .ids-tag__close-btn{align-items:center;background:none;border:none;border-radius:20px;color:inherit;cursor:pointer;display:flex;font:inherit;height:24px;justify-content:center;margin:-8px -8px -8px 8px;min-height:24px;min-width:24px;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:24px}.ids-tag .ids-tag__close-btn:focus{outline:var(--IDS-FOCUS_OUTLINE);outline-offset:0!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 xmlns='http://www.w3.org/2000/svg' fill='none' width='20' height='20' viewBox='0 0 40 40' aria-hidden='true'%3E%3Cpath xmlns='http://www.w3.org/2000/svg' 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='%23396291'/%3E%3C/svg%3E\");mask-size:cover}";
 
 var tagLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tag/tag.css

@@ -5,20 +5,45 @@
 /*******
 * Accessibility
 ********/
+/* headings */
+/* css classes that need !important */
+/* @mixin ids-icon-close-svg-important($color) {
+  background-color: var($color) !important;
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="20" height="20" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" 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="%23396291"></path></svg>') !important;
+  mask-size: cover !important;
+}
+
+.ids-icon__close {
+  @include ids-icon-close-svg-important(--IDS-ICON-COLOR);
+}
+
+.ids-icon__close-active {
+  @include ids-icon-close-svg-important(--IDS-ICON-ACTIVE-COLOR);
+}
+
+.ids-icon__close-interactive {
+  @include ids-icon-close-svg-important(--IDS-ICON-COLOR);
+
+  &:hover,
+  &:focus,
+  &:active {
+    @include ids-icon-close-svg-important(--IDS-ICON-ACTIVE-COLOR);
+  }
+} */
 .ids-tag {
   font-family: var(--IDS-TAG__FONT-FAMILY);
-  border-radius: var(--IDS-TAG__BORDER-RADIUS);
+  font-weight: 400;
   color: var(--IDS-TAG__COLOR);
   padding: var(--IDS-TAG__PADDING);
-  border: 1px solid;
+  border: 1px solid var(--IDS-TAG__BORDER-COLOR);
   background-color: var(--IDS-TAG__BACKGROUND-COLOR);
-  border-color: var(--IDS-TAG__BORDER-COLOR);
   border-radius: var(--IDS-TAG__BORDER-RADIUS);
   display: inline-flex;
   flex-wrap: wrap;
-  line-height: 1.5rem;
+  line-height: 1rem;
   justify-content: center;
   align-content: center;
+  align-items: center;
 }
 .ids-tag.ids-tag--interactive {
   cursor: pointer;
@@ -30,6 +55,16 @@
   outline: var(--focus_outline);
   outline-offset: var(--focus_outline-offset);
 }
+.ids-tag.ids-tag--interactive:hover {
+  color: var(--IDS-TAG--INTERACTIVE__COLOR--HOVER);
+}
+.ids-tag .ids-tag__close-btn-icon {
+  background-color: var(--IDS-ICON-COLOR);
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="20" height="20" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" 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="%23396291"></path></svg>');
+  mask-size: cover;
+  width: 14px;
+  height: 14px;
+}
 .ids-tag .ids-tag__close-btn {
   min-width: 24px;
   min-height: 24px;
@@ -49,11 +84,16 @@
   height: 24px;
   display: flex;
   border-radius: 20px;
-  margin-left: 8px;
+  margin: -8px -8px -8px 8px;
   justify-content: center;
   align-items: center;
 }
 .ids-tag .ids-tag__close-btn:focus {
   outline: var(--IDS-FOCUS_OUTLINE);
-  outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
+  outline-offset: 0 !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,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="20" height="20" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" 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="%23396291"></path></svg>');
+  mask-size: cover;
 }

package/components/tooltip/tooltip-lit.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/components/tooltip/tooltip-lit.js

@@ -0,0 +1,7 @@
+import { css, unsafeCSS } from 'lit';
+
+var css_248z = ".ids-tooltip{position:relative!important}.ids-tooltip,.ids-tooltip .ids-tooltip__trigger{display:inline-block}.ids-tooltip .ids-tooltip__content{background-color:#fff;border:1px solid var(--tooltip_border-color);border-radius:var(--IDS-BORDER-RADIUS);box-shadow:0 0 10px rgba(0,0,0,.3);box-sizing:border-box;color:var(--tooltip_color);display:none;max-width:90vw;padding:10px 20px;position:absolute;text-align:left;width:max-content;z-index:2}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left{left:0;top:-10px;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top{left:50%;top:-10px;transform:translate(-50%,-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right{right:0;top:-10px;transform:translateY(-100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left{bottom:-10px;left:0;transform:translateY(100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom{bottom:-10px;left:50%;transform:translate(-50%,100%)}.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right{bottom:-10px;right:0;transform:translateY(100%)}.ids-tooltip:focus-within .ids-tooltip__content,.ids-tooltip:hover .ids-tooltip__content{display:inline-block}";
+
+var tooltipLit = css`${unsafeCSS(css_248z)}`;
+
+export { tooltipLit as default };

package/components/tooltip/tooltip.css

@@ -0,0 +1,87 @@
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/
+/* headings */
+/* css classes that need !important */
+/* @mixin ids-icon-close-svg-important($color) {
+  background-color: var($color) !important;
+  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" role="img" fill="none" width="20" height="20" style="" viewBox="0 0 40 40" aria-hidden="true"><!--%3Flit$332566053$--><path xmlns="http://www.w3.org/2000/svg" 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="%23396291"></path></svg>') !important;
+  mask-size: cover !important;
+}
+
+.ids-icon__close {
+  @include ids-icon-close-svg-important(--IDS-ICON-COLOR);
+}
+
+.ids-icon__close-active {
+  @include ids-icon-close-svg-important(--IDS-ICON-ACTIVE-COLOR);
+}
+
+.ids-icon__close-interactive {
+  @include ids-icon-close-svg-important(--IDS-ICON-COLOR);
+
+  &:hover,
+  &:focus,
+  &:active {
+    @include ids-icon-close-svg-important(--IDS-ICON-ACTIVE-COLOR);
+  }
+} */
+.ids-tooltip {
+  display: inline-block;
+  position: relative !important;
+}
+.ids-tooltip .ids-tooltip__trigger {
+  display: inline-block;
+}
+.ids-tooltip .ids-tooltip__content {
+  display: none;
+  color: var(--tooltip_color);
+  box-sizing: border-box;
+  position: absolute;
+  text-align: left;
+  width: max-content;
+  max-width: 90vw;
+  z-index: 2;
+  background-color: white;
+  border: 1px solid var(--tooltip_border-color);
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
+  border-radius: var(--IDS-BORDER-RADIUS);
+  padding: 10px 20px;
+}
+.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-left {
+  left: 0;
+  transform: translateY(-100%);
+  top: -10px;
+}
+.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top {
+  left: 50%;
+  transform: translate(-50%, -100%);
+  top: -10px;
+}
+.ids-tooltip .ids-tooltip__content.ids-tooltip__content--top-right {
+  right: 0;
+  transform: translateY(-100%);
+  top: -10px;
+}
+.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-left {
+  left: 0;
+  transform: translateY(100%);
+  bottom: -10px;
+}
+.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom {
+  left: 50%;
+  transform: translate(-50%, 100%);
+  bottom: -10px;
+}
+.ids-tooltip .ids-tooltip__content.ids-tooltip__content--bottom-right {
+  right: 0;
+  transform: translateY(100%);
+  bottom: -10px;
+}
+.ids-tooltip:focus-within .ids-tooltip__content, .ids-tooltip:hover .ids-tooltip__content {
+  display: inline-block;
+}

package/global/_partials.css

@@ -4,4 +4,5 @@
 ********/
 /*******
 * Accessibility
-********/
+********/
+/* headings */