@limetech/lime-elements 39.0.1 → 39.0.3

package/dist/collection/components/input-field/input-field.css

@@ -1,10 +1,4 @@
 @charset "UTF-8";
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
 /**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
@@ -92,6 +86,81 @@
   * Media query mixins for responsive design based on screen width.
   * Note that these mixins do not detect the device type!
   */
+:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, :host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon,
+:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon,
+:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
+  color: rgb(var(--color-blue-default));
+}
+:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover, :host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover,
+:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover,
+:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover {
+  background-color: rgb(var(--color-blue-default)) !important;
+}
+:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon, :host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon,
+:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon,
+:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon {
+  color: rgb(var(--color-white));
+}
+
+:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, :host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
+  color: rgb(var(--color-green-default));
+}
+:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover, :host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover {
+  background-color: rgb(var(--color-green-default)) !important;
+}
+:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon, :host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon {
+  color: rgb(var(--color-white));
+}
+
+:host([type=email]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, :host([type=email]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
+  color: rgb(var(--contrast-900));
+}
+
+:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,
+:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
+:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,
+:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
+:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,
+:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input {
+  color: rgb(var(--color-white));
+}
+:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
+:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
+:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input {
+  z-index: 1;
+}
+
+:host([type=url]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
+:host([type=email]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
+:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
+:host([type=tel]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: calc(100% - 2.75rem);
+}
+:host([type=url]) .mdc-text-field.lime-text-field--readonly a.lime-trailing-icon-for-link,
+:host([type=email]) .mdc-text-field.lime-text-field--readonly a.lime-trailing-icon-for-link,
+:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly a.lime-trailing-icon-for-link,
+:host([type=tel]) .mdc-text-field.lime-text-field--readonly a.lime-trailing-icon-for-link {
+  width: 100% !important;
+}
+
+/*
+* This file is imported into every component!
+*
+* Nothing in this file may output any CSS
+* without being explicitly called by outside code.
+*/
+:host([readonly]) .mdc-text-field__input {
+  opacity: 1;
+  -webkit-text-fill-color: rgba(var(--contrast-1400), 1);
+}
+
+:host([type=textarea]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__resizer {
+  pointer-events: all;
+}
+
 /**
  * @prop --textarea-height: Height of the field when type is set to `textarea`
  */
@@ -1864,168 +1933,6 @@ input.mdc-text-field__input::-webkit-search-cancel-button:active {
   opacity: 1;
 }
 
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
-:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, :host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon,
-:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon,
-:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
-  color: rgb(var(--color-blue-default));
-}
-:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover, :host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover,
-:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover,
-:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover {
-  background-color: rgb(var(--color-blue-default));
-}
-:host([type=url]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon, :host([type=url]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon,
-:host([type=urlAsText]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon,
-:host([type=urlAsText]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon {
-  color: rgb(var(--color-white));
-}
-
-:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, :host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
-  color: rgb(var(--color-green-default));
-}
-:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover, :host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover {
-  background-color: rgb(var(--color-green-default));
-}
-:host([type=tel]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing:hover limel-icon, :host([type=tel]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link:hover limel-icon {
-  color: rgb(var(--color-white));
-}
-
-:host([type=email]) .mdc-text-field--with-trailing-icon .mdc-text-field__icon--trailing limel-icon, :host([type=email]) .mdc-text-field--with-trailing-icon a.lime-trailing-icon-for-link limel-icon {
-  color: rgb(var(--contrast-900));
-}
-
-/**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
-:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,
-:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
-:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,
-:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
-:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .lime-looks-like-input-value,
-:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input {
-  color: rgb(var(--color-white));
-}
-:host([type=url]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
-:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input,
-:host([type=tel]) .mdc-text-field.lime-text-field--readonly:hover .mdc-text-field__input {
-  z-index: 1;
-}
-
-:host([type=url]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
-:host([type=email]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
-:host([type=urlAsText]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input,
-:host([type=tel]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__input {
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  width: calc(100% - 2.75rem);
-}
-
-:host([type=textarea]) .mdc-text-field.lime-text-field--readonly .mdc-text-field__resizer {
-  pointer-events: all;
-}
-
-:host([readonly]) .mdc-text-field__input {
-  opacity: 1;
-  -webkit-text-fill-color: rgba(var(--contrast-1400), 1);
-}
-
 .mdc-text-field.mdc-text-field--outlined {
   height: 2.5rem;
 }

package/dist/collection/components/list/list.css

@@ -1,148 +1,4 @@
 @charset "UTF-8";
-/**
-* Note! This file is exported to `dist/scss/` in the published
-* node module, for consumer projects to import.
-* That means this file cannot import from any file that isn't
-* also exported, keeping the same relative path.
-*
-* Or, just don't import anything, that works too.
-*/
-/**
-* This can be used on a trigger element that opens a dropdown menu or a popover.
-*/
-/**
- * This mixin will mask out the content that is close to
- * the edges of a scrollable area.
- * - If the scrollable content has `overflow-y`, use `vertically`
- * as an argument for `$direction`.
- - If the scrollable content has `overflow-x`, use `horizontally`
- * as an argument for `$direction`.
- *
- * For the visual effect to work smoothly, we need to make sure that
- * the size of the fade-out edge effect is the same as the
- * internal paddings of the scrollable area. Otherwise, content of a
- * scrollable area that does not have a padding will fade out before
- * any scrolling has been done.
- * This is why this mixin already adds paddings, which automatically
- * default to the size of the fade-out effect.
- * This size defaults to `1rem`, but to override the size use
- * `--limel-top-edge-fade-height` & `--limel-bottom-edge-fade-height`
- * when `vertically` argument is set, and use
- * `--limel-left-edge-fade-width` & `--limel-right-edge-fade-width`
- * when `horizontally` argument is set.
- * Of course you can also programmatically increase and decrease the
- * size of these variables for each edge, based on the amount of
- * scrolling that has been done by the user. In this case, make sure
- * to add a custom padding where the mixin is used, to override
- * the paddings that are automatically added by the mixin in the
- * compiled CSS code.
- */
-/**
-* This mixin will add an animated underline to the bottom of an `a` elements.
-* Note that you may need to add `all: unset;` –depending on your use case–
-* before using this mixin.
-*/
-/**
-* This mixin creates a cross-browser font stack.
-* - `sans-serif` can be used for the UI of the components.
-* - `monospace` can be used for code.
-*
-* ⚠️ If we change the font stacks, we need to update
-* 1. the consumer documentation in `README.md`, and
-* 2. the CSS variables of `--kompendium-example-font-family`
-* in the `<style>` tag of `index.html`.
-*/
-/**
-* This mixin is a hack, using old CSS syntax
-* to enable you to truncate a piece of text,
-* after a certain number of lines.
-*/
-/**
-* This mixin will add a chessboard background pattern,
-* typically used to visualize transparency.
-*/
-/**
-* Make a container resizable by the user.
-* This is used in the documentations and examples
-* of some components, to demonstrate how the component
-* behaves in a resizable container.
-*/
-/**
- * Drag to reorder mixins
- */
-/**
- * The breakpoints below are used to create responsive designs
- * in Lime's products. Therefore, they are here to get distributed
- * to all components in other private repos, which rely on this `mixins`
- * file, to create consistent styles.
- *
- * :::important
- * In very rare cases you should used media queries!
- * Nowadays, there are many better ways of achieving responsive design
- * without media queries. For example, using CSS Grid, Flexbox, and their features.
- * :::
- */
-/**
-  * Media query mixins for responsive design based on screen width.
-  * Note that these mixins do not detect the device type!
-  */
-/**
- * @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.
- * @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.
- * @prop --list-grid-max-width: Maximum width of a list that has `has-grid-layout` class. Defaults to `100%`.
- * @prop --list-grid-item-max-width: Maximum width of items in a list that has `has-grid-layout` class. Defaults to `10rem`.
- * @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.
- * @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
- * @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.
- * @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.
- * @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;
- */
-:host(limel-list) {
-  display: block;
-  isolation: isolate;
-}
-
-:host([hidden]) {
-  display: none;
-}
-
-ul {
-  --mdc-theme-text-icon-on-background: var(
-      --icon-color,
-      rgb(var(--contrast-900))
-  );
-  margin: var(--list-margin, 0.25rem);
-  border-radius: 0.5rem;
-  padding: 0;
-  list-style: none;
-}
-
-.mdc-deprecated-list-divider {
-  border-bottom-color: transparent;
-  display: flex;
-  align-items: center;
-  gap: 0.75rem;
-  height: auto;
-  padding: 0 0.5rem;
-}
-
-.limel-list-divider-line {
-  background-color: rgb(var(--contrast-400));
-  height: 0.125rem;
-  border-radius: 1rem;
-  min-width: 1rem;
-  flex-grow: 1;
-}
-
-.limel-list-divider-title {
-  all: unset;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  color: rgb(var(--contrast-900));
-  font-size: var(--limel-theme-default-small-font-size);
-}
-
 /**
 * Note! This file is exported to `dist/scss/` in the published
 * node module, for consumer projects to import.
@@ -293,18 +149,12 @@ ul {
   max-width: var(--list-grid-max-width, 100%);
 }
 :host(.has-grid-layout) .mdc-deprecated-list limel-list-item {
-  border-radius: 0.5rem !important;
+  border-radius: var(--limel-list-border-radius) !important;
 }
 :host(.has-grid-layout) .mdc-deprecated-list-divider {
   grid-column: 1/-1;
 }
 
-/*
-* This file is imported into every component!
-*
-* Nothing in this file may output any CSS
-* without being explicitly called by outside code.
-*/
 :host(.static-actions-list) {
   z-index: 1;
   background-color: var(--limel-theme-surface-background-color);
@@ -333,4 +183,62 @@ ul {
   border-top: 1px solid rgb(var(--contrast-400));
   margin-top: 0.5rem;
   padding-top: 0.25rem;
+}
+
+/**
+* @prop --icon-background-color: Color to use for icon background when `badgeIcons=true`.
+* @prop --icon-color: Color to use for icon. Defaults to grey when `badgeIcons=false`. Defaults to white when `badgeIcons=true`.
+* @prop --list-grid-max-width: Maximum width of a list that has `has-grid-layout` class. Defaults to `100%`.
+* @prop --list-grid-item-max-width: Maximum width of items in a list that has `has-grid-layout` class. Defaults to `10rem`.
+* @prop --list-grid-item-min-width: Minimum width of items in a list that has `has-grid-layout` class. Defaults to `7.5rem`.
+* @prop --list-grid-gap: Distance between items in a list that has `has-grid-layout` class. Defaults to `0.75rem`.
+* @prop --list-background-color-of-odd-interactive-items: Background color of odd list items, when `has-striped-rows` class is applied to the component. Defaults to `--contrast-200`.
+* @prop --list-background-color-of-even-interactive-items:  Background color of even list items, when `has-striped-rows` class is applied to the component. Defaults to `transparent`.
+* @prop --list-margin: Space around the list. Defaults to `0.25rem`, which visualizes keyboard-focused items in a better way, as it adds some space for the outline effect;
+*/
+:host(limel-list) {
+  --limel-list-border-radius: 0.5rem;
+  display: block;
+  isolation: isolate;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+ul {
+  --mdc-theme-text-icon-on-background: var(
+      --icon-color,
+      rgb(var(--contrast-900))
+  );
+  margin: var(--list-margin, 0.25rem);
+  border-radius: var(--limel-list-border-radius);
+  padding: 0;
+  list-style: none;
+}
+
+.mdc-deprecated-list-divider {
+  border-bottom-color: transparent;
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  height: auto;
+  padding: 0 0.5rem;
+}
+
+.limel-list-divider-line {
+  background-color: rgb(var(--contrast-400));
+  height: 0.125rem;
+  border-radius: 1rem;
+  min-width: 1rem;
+  flex-grow: 1;
+}
+
+.limel-list-divider-title {
+  all: unset;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  color: rgb(var(--contrast-900));
+  font-size: var(--limel-theme-default-small-font-size);
 }

package/dist/collection/components/markdown/markdown-parser.js

@@ -73,19 +73,19 @@ export async function sanitizeHTML(html, whitelist) {
     return file.toString();
 }
 function getWhiteList(allowedComponents) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const defaultSchemaClone = [...((_a = defaultSchema.attributes['*']) !== null && _a !== void 0 ? _a : [])];
     const asteriskAttributeWhitelist = defaultSchemaClone.filter((attr) => {
         return attr !== 'height';
     });
     asteriskAttributeWhitelist.push('style');
-    const whitelist = Object.assign(Object.assign({}, defaultSchema), { tagNames: [
+    const whitelist = Object.assign(Object.assign({}, defaultSchema), { strip: [...((_b = defaultSchema.strip) !== null && _b !== void 0 ? _b : []), 'style'], tagNames: [
             ...(defaultSchema.tagNames || []),
             ...allowedComponents.map((component) => component.tagName),
         ], attributes: Object.assign(Object.assign({}, defaultSchema.attributes), { p: [
-                ...((_b = defaultSchema.attributes.p) !== null && _b !== void 0 ? _b : []),
+                ...((_c = defaultSchema.attributes.p) !== null && _c !== void 0 ? _c : []),
                 ['className', 'MsoNormal'],
-            ], a: [...((_c = defaultSchema.attributes.a) !== null && _c !== void 0 ? _c : []), 'referrerpolicy'], '*': asteriskAttributeWhitelist }) });
+            ], a: [...((_d = defaultSchema.attributes.a) !== null && _d !== void 0 ? _d : []), 'referrerpolicy'], '*': asteriskAttributeWhitelist }) });
     for (const component of allowedComponents) {
         whitelist.attributes[component.tagName] = component.attributes;
     }