@inera/ids-design 4.9.1 → 5.0.0

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

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

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(--focus_outline);outline-offset:var(--focus_outline-offset)}";
+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 tagLit = css`${unsafeCSS(css_248z)}`;
 

package/components/tag/tag.css

@@ -1 +1,59 @@
-.ids-tag .ids-tag__close-btn:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-tag{font-family:var(--IDS-TAG__FONT-FAMILY);border-radius:var(--IDS-TAG__BORDER-RADIUS);color:var(--IDS-TAG__COLOR);padding:var(--IDS-TAG__PADDING);border:1px solid;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;justify-content:center;align-content:center}.ids-tag.ids-tag--interactive{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{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}.ids-tag .ids-tag__close-btn{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;width:24px;height:24px;display:flex;border-radius:20px;margin-left:8px;justify-content:center;align-items:center}.ids-tag .ids-tag__close-btn:focus{outline:var(--focus_outline);outline-offset:var(--focus_outline-offset)}
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/
+.ids-tag {
+  font-family: var(--IDS-TAG__FONT-FAMILY);
+  border-radius: var(--IDS-TAG__BORDER-RADIUS);
+  color: var(--IDS-TAG__COLOR);
+  padding: var(--IDS-TAG__PADDING);
+  border: 1px solid;
+  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;
+  justify-content: center;
+  align-content: center;
+}
+.ids-tag.ids-tag--interactive {
+  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 {
+  outline: var(--focus_outline);
+  outline-offset: var(--focus_outline-offset);
+}
+.ids-tag .ids-tag__close-btn {
+  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;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  border-radius: 20px;
+  margin-left: 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;
+}

package/global/_partials.css

@@ -1 +1,7 @@
-
+/* 1177 Typography - no margins */
+/*******
+* FORM
+********/
+/*******
+* Accessibility
+********/