@limetech/lime-elements 38.4.0 → 38.5.0

package/dist/collection/components/text-editor/prosemirror-adapter/prosemirror-adapter.css

@@ -65,134 +65,6 @@
   );
 }
 
-:host(limel-prosemirror-adapter) {
-  display: flex;
-  flex-direction: column;
-}
-:host(limel-prosemirror-adapter) .toolbar {
-  order: 1;
-}
-:host(limel-prosemirror-adapter) div#editor {
-  order: 2;
-  height: 100%;
-  flex-grow: 1;
-}
-:host(limel-prosemirror-adapter) div[contenteditable=true] {
-  height: 100%;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-:host(limel-prosemirror-adapter:hover) .toolbar,
-:host(limel-prosemirror-adapter:focus-within) .toolbar {
-  will-change: grid-template-rows;
-}
-:host(limel-prosemirror-adapter:hover) limel-action-bar,
-:host(limel-prosemirror-adapter:focus-within) limel-action-bar {
-  will-change: opacity, padding;
-}
-
-.ProseMirror-menubar-wrapper {
-  display: grid;
-  grid-template-rows: auto 1fr;
-}
-
-.ProseMirror-textblock-dropdown {
-  min-width: 3em;
-}
-
-.ProseMirror-tooltip .ProseMirror-menu {
-  width: -webkit-fit-content;
-  width: fit-content;
-  white-space: pre;
-}
-
-.toolbar {
-  --action-bar-border-radius: 0.25rem;
-  border-radius: var(--action-bar-border-radius);
-  flex-shrink: 0;
-  position: sticky;
-  z-index: 1;
-  top: 0;
-  width: 100%;
-  display: grid;
-  grid-template-rows: var(--limel-prosemirror-adapter-toolbar-grid-template-rows);
-  transition-property: grid-template-rows;
-  transition-duration: var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);
-  transition-timing-function: var(--limel-prosemirror-adapter-toolbar-transition-timing-function);
-  background-color: rgba(var(--contrast-200), 0.5);
-  backdrop-filter: blur(0.5rem);
-  -webkit-backdrop-filter: blur(0.5rem);
-}
-
-limel-action-bar {
-  min-width: 0;
-  transition-property: padding, opacity;
-  transition-duration: var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);
-  transition-timing-function: var(--limel-prosemirror-adapter-toolbar-transition-timing-function);
-  opacity: var(--limel-prosemirror-adapter-toolbar-opacity);
-  padding: var(--limel-prosemirror-adapter-action-bar-padding-top-bottom, 0.125rem) 0.25rem;
-  background-color: transparent;
-  overflow: hidden;
-}
-
-.ProseMirror {
-  position: relative;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-  white-space: break-spaces;
-  -webkit-font-variant-ligatures: none;
-  font-variant-ligatures: none;
-  font-feature-settings: "liga" 0;
-  padding: var(--limel-text-editor-padding);
-}
-.ProseMirror [draggable][contenteditable=false] {
-  user-select: text;
-}
-.ProseMirror:focus-visible {
-  outline: none;
-}
-
-.ProseMirror-hideselection {
-  caret-color: transparent;
-}
-.ProseMirror-hideselection *::selection {
-  background: transparent;
-}
-.ProseMirror-hideselection *::-moz-selection {
-  background: transparent;
-}
-
-.ProseMirror-selectednode {
-  outline: 0.125rem solid rgb(var(--color-sky-light));
-}
-
-li.ProseMirror-selectednode {
-  outline: none;
-}
-li.ProseMirror-selectednode:after {
-  content: "";
-  position: absolute;
-  left: -2rem;
-  right: -0.125rem;
-  top: -0.125rem;
-  bottom: -0.125rem;
-  border: 0.125rem solid rgb(var(--color-sky-light));
-  pointer-events: none;
-}
-
-img.ProseMirror-separator {
-  display: inline !important;
-  border: none !important;
-  margin: 0 !important;
-}
-
-limel-portal {
-  width: 25rem;
-}
-
 blockquote {
   position: relative;
   font-weight: 100;
@@ -230,8 +102,6 @@ p,
 li {
   font-size: 0.875rem;
   word-break: break-word;
-  hyphens: auto;
-  -webkit-hyphens: auto;
 }
 
 a {
@@ -480,12 +350,6 @@ li {
   * 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.
- */
 code {
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
   font-size: 0.8125rem;
@@ -557,80 +421,6 @@ table {
   max-width: 100%;
 }
 
-/**
- * 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.
-*/
-/**
- * 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!
-  */
 kbd {
   font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
   font-weight: 600;
@@ -655,80 +445,6 @@ img {
   border-radius: 0.25rem;
 }
 
-/**
- * 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.
-*/
-/**
- * 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!
-  */
 .image-wrapper {
   display: inline-flex;
   position: relative;
@@ -856,4 +572,132 @@ img {
   width: 0.25rem;
   height: 0.25rem;
   background-color: rgb(var(--contrast-100));
+}
+
+:host(limel-prosemirror-adapter) {
+  display: flex;
+  flex-direction: column;
+}
+:host(limel-prosemirror-adapter) .toolbar {
+  order: 1;
+}
+:host(limel-prosemirror-adapter) div#editor {
+  order: 2;
+  height: 100%;
+  flex-grow: 1;
+}
+:host(limel-prosemirror-adapter) div[contenteditable=true] {
+  height: 100%;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+:host(limel-prosemirror-adapter:hover) .toolbar,
+:host(limel-prosemirror-adapter:focus-within) .toolbar {
+  will-change: grid-template-rows;
+}
+:host(limel-prosemirror-adapter:hover) limel-action-bar,
+:host(limel-prosemirror-adapter:focus-within) limel-action-bar {
+  will-change: opacity, padding;
+}
+
+.ProseMirror-menubar-wrapper {
+  display: grid;
+  grid-template-rows: auto 1fr;
+}
+
+.ProseMirror-textblock-dropdown {
+  min-width: 3em;
+}
+
+.ProseMirror-tooltip .ProseMirror-menu {
+  width: -webkit-fit-content;
+  width: fit-content;
+  white-space: pre;
+}
+
+.toolbar {
+  --action-bar-border-radius: 0.25rem;
+  border-radius: var(--action-bar-border-radius);
+  flex-shrink: 0;
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  width: 100%;
+  display: grid;
+  grid-template-rows: var(--limel-prosemirror-adapter-toolbar-grid-template-rows);
+  transition-property: grid-template-rows;
+  transition-duration: var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);
+  transition-timing-function: var(--limel-prosemirror-adapter-toolbar-transition-timing-function);
+  background-color: rgba(var(--contrast-200), 0.5);
+  backdrop-filter: blur(0.5rem);
+  -webkit-backdrop-filter: blur(0.5rem);
+}
+
+limel-action-bar {
+  min-width: 0;
+  transition-property: padding, opacity;
+  transition-duration: var(--limel-prosemirror-adapter-toolbar-grid-template-rows-transition-duration);
+  transition-timing-function: var(--limel-prosemirror-adapter-toolbar-transition-timing-function);
+  opacity: var(--limel-prosemirror-adapter-toolbar-opacity);
+  padding: var(--limel-prosemirror-adapter-action-bar-padding-top-bottom, 0.125rem) 0.25rem;
+  background-color: transparent;
+  overflow: hidden;
+}
+
+.ProseMirror {
+  position: relative;
+  word-wrap: break-word;
+  white-space: pre-wrap;
+  white-space: break-spaces;
+  -webkit-font-variant-ligatures: none;
+  font-variant-ligatures: none;
+  font-feature-settings: "liga" 0;
+  padding: var(--limel-text-editor-padding);
+}
+.ProseMirror [draggable][contenteditable=false] {
+  user-select: text;
+}
+.ProseMirror:focus-visible {
+  outline: none;
+}
+
+.ProseMirror-hideselection {
+  caret-color: transparent;
+}
+.ProseMirror-hideselection *::selection {
+  background: transparent;
+}
+.ProseMirror-hideselection *::-moz-selection {
+  background: transparent;
+}
+
+.ProseMirror-selectednode {
+  outline: 0.125rem solid rgb(var(--color-sky-light));
+}
+
+li.ProseMirror-selectednode {
+  outline: none;
+}
+li.ProseMirror-selectednode:after {
+  content: "";
+  position: absolute;
+  left: -2rem;
+  right: -0.125rem;
+  top: -0.125rem;
+  bottom: -0.125rem;
+  border: 0.125rem solid rgb(var(--color-sky-light));
+  pointer-events: none;
+}
+
+img.ProseMirror-separator {
+  display: inline !important;
+  border: none !important;
+  margin: 0 !important;
+}
+
+limel-portal {
+  width: 25rem;
 }

package/dist/esm/limel-chip_2.entry.js

@@ -609,7 +609,7 @@ const ChipSet = class {
   getChipProps(chip, chipType) {
     const removable = this.type === 'input' && chip.removable && !this.readonly;
     const readonly = this.readonly && this.type !== 'input';
-    return Object.assign({ role: 'row', identifier: chip.id, text: chip.text, icon: chip.icon, image: chip.image, badge: chip.badge, selected: chip.selected, disabled: this.disabled, readonly: readonly, type: chipType, removable: removable, menuItems: chip.menuItems, onClick: this.catchInputChipClicks(chip), onRemove: this.handleRemoveChip }, (chip.href && {
+    return Object.assign({ role: 'row', identifier: chip.id, text: chip.text, icon: chip.icon, image: chip.image, badge: chip.badge, selected: chip.selected, disabled: this.disabled, loading: chip.loading, readonly: readonly, type: chipType, removable: removable, menuItems: chip.menuItems, onClick: this.catchInputChipClicks(chip), onRemove: this.handleRemoveChip }, (chip.href && {
       link: {
         href: getHref(chip.href),
         target: getTarget(chip.href),