@limetech/lime-elements 37.19.1 → 37.21.0

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

@@ -0,0 +1,699 @@
+@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.
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+/*
+ * This file is imported into every component that uses MDC!
+ *
+ * Anything in this file that generates CSS output on its own,
+ * without being explicitly used, will output that CSS in every
+ * single component, increasing the size of the production build.
+ * Avoid that unless there's very good reason for it!
+ */
+:host {
+  --mdc-theme-primary: var(
+      --lime-primary-color,
+      rgb(var(--color-teal-default))
+  );
+  --mdc-theme-secondary: var(
+      --lime-secondary-color,
+      rgb(var(--contrast-1100))
+  );
+  --mdc-theme-on-primary: var(
+      --lime-on-primary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-secondary: var(
+      --lime-on-secondary-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-text-disabled-on-background: var(
+      --lime-text-disabled-on-background-color,
+      rgba(var(--contrast-1700), 0.38)
+  );
+  --mdc-theme-text-primary-on-background: var(
+      --lime-text-primary-on-background-color,
+      rgba(var(--contrast-1700), 0.87)
+  );
+  --mdc-theme-text-secondary-on-background: var(
+      --lime-text-secondary-on-background-color,
+      rgba(var(--contrast-1700), 0.54)
+  );
+  --mdc-theme-error: var(
+      --lime-error-background-color,
+      rgb(var(--color-red-dark))
+  );
+  --lime-error-text-color: rgb(var(--color-red-darker));
+  --mdc-theme-surface: var(
+      --lime-surface-background-color,
+      rgb(var(--contrast-100))
+  );
+  --mdc-theme-on-surface: var(
+      --lime-on-surface-color,
+      rgb(var(--contrast-1500))
+  );
+}
+
+:host(limel-text-editor) {
+  isolation: isolate;
+  display: block;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.ProseMirror-menubar-wrapper {
+  transition: border 0.2s ease;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  border-radius: 0.25rem;
+  border: 1px solid;
+  border-color: rgba(var(--contrast-700), 0.65);
+}
+.ProseMirror-menubar-wrapper:hover {
+  border-color: rgba(var(--contrast-700), 1);
+}
+.ProseMirror-menubar-wrapper:focus-within {
+  border-color: var(--mdc-theme-primary);
+}
+
+.ProseMirror-textblock-dropdown {
+  min-width: 3em;
+}
+
+.ProseMirror-tooltip .ProseMirror-menu {
+  width: -webkit-fit-content;
+  width: fit-content;
+  white-space: pre;
+}
+
+.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;
+  border-bottom-left-radius: 0.5rem;
+  border-bottom-right-radius: 0.5rem;
+  padding: 0.5rem 1rem;
+  background-color: rgb(var(--contrast-100));
+}
+.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;
+}
+
+/**
+ * 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`.
+*/
+div#editor .ProseMirror-menubar {
+  position: sticky !important;
+  z-index: 1;
+  top: 0;
+}
+div#editor .ProseMirror-menubar[style*="position: fixed"] {
+  box-shadow: 0 0.25rem 0.5rem -0.5rem rgb(var(--color-black), 0.8);
+}
+
+.ProseMirror-menubar {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  align-items: center;
+  padding: 0.125rem;
+  background-color: rgb(var(--contrast-100));
+  border-top-left-radius: 0.5rem;
+  border-top-right-radius: 0.5rem;
+}
+
+.ProseMirror-menuitem {
+  position: relative;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  white-space: nowrap;
+  line-height: 1;
+  height: 1.5rem;
+  min-width: 1.5rem;
+  border-radius: 0.25rem;
+  color: rgb(var(--contrast-1100));
+  font-size: 0.8125rem;
+}
+.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)) {
+  transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.1s ease-out;
+  cursor: pointer;
+  color: var(--mdc-theme-on-surface);
+  background-color: transparent;
+}
+.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):hover {
+  color: var(--mdc-theme-on-surface);
+  background-color: var(--lime-elevated-surface-background-color);
+  box-shadow: var(--button-shadow-hovered);
+}
+.ProseMirror-menuitem:not(:has(.ProseMirror-menu-disabled)):active {
+  box-shadow: var(--button-shadow-pressed);
+  transform: translate3d(0, 0.08rem, 0);
+}
+.ProseMirror-menuitem:has(.ProseMirror-menu-active) {
+  box-shadow: var(--button-shadow-inset);
+  color: var(--mdc-theme-primary);
+}
+.ProseMirror-menuitem:has(.ProseMirror-menu-active) svg {
+  color: var(--mdc-theme-primary);
+}
+.ProseMirror-menuitem:has(.ProseMirror-menu-dropdown-menu) {
+  box-shadow: var(--button-shadow-inset);
+}
+.ProseMirror-menuitem svg {
+  fill: currentColor;
+  height: 1rem;
+  color: rgb(var(--contrast-1100));
+}
+
+.ProseMirror-menuseparator {
+  border-radius: 1rem;
+  background-color: rgb(var(--contrast-600));
+  width: 0.125rem;
+  height: 1rem;
+}
+
+.ProseMirror-menu-dropdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0 0.5rem;
+}
+.ProseMirror-menu-dropdown:after {
+  content: "";
+  border-left: 0.25rem solid transparent;
+  border-right: 0.25rem solid transparent;
+  border-top: 0.25rem solid currentColor;
+}
+
+.ProseMirror-menu-dropdown-menu,
+.ProseMirror-menu-submenu {
+  box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.ProseMirror-menu-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  background: rgb(var(--contrast-100));
+  border-radius: 0.25rem;
+  padding: 0.125rem;
+}
+
+.ProseMirror-menu-submenu {
+  position: absolute;
+  background: rgb(var(--contrast-100));
+  border-radius: 0.25rem;
+  padding: 0.125rem;
+  display: none;
+  min-width: 4em;
+  left: 100%;
+  top: -0.75rem;
+}
+
+.ProseMirror-menu-dropdown-item {
+  transition: background-color 0.2s ease;
+  cursor: pointer;
+  border-radius: 0.375rem;
+  min-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  width: 100%;
+}
+.ProseMirror-menu-dropdown-item > div {
+  padding: 0 1rem;
+  width: 100%;
+}
+.ProseMirror-menu-dropdown-item:not(:has(.ProseMirror-menu-disabled)):hover {
+  background-color: rgb(var(--contrast-300));
+}
+
+.ProseMirror-menu-submenu-wrap {
+  position: relative;
+  margin-right: -0.25rem;
+}
+.ProseMirror-menu-submenu-wrap:hover .ProseMirror-menu-submenu {
+  display: block;
+}
+
+.ProseMirror-menu-submenu-label {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+.ProseMirror-menu-submenu-label:after {
+  content: "";
+  border-top: 0.25rem solid transparent;
+  border-bottom: 0.25rem solid transparent;
+  border-left: 0.25rem solid currentColor;
+}
+
+.ProseMirror-menu-disabled {
+  opacity: 0.3;
+  cursor: default;
+}
+
+.ProseMirror-menu-submenu-wrap-active .ProseMirror-menu-submenu {
+  display: block;
+}
+
+blockquote {
+  position: relative;
+  font-weight: 100;
+  font-size: 0.875rem;
+  max-width: 100%;
+  line-height: 1.4;
+  margin: 0;
+  padding: 0.5rem 1.25rem;
+  border-radius: 0.05rem 0.75rem;
+  background-color: rgb(var(--contrast-300));
+}
+blockquote:before, blockquote:after {
+  position: absolute;
+  font-size: 2.75rem;
+  opacity: 0.4;
+}
+blockquote:before {
+  content: "“";
+  left: 0;
+  top: -0.75rem;
+}
+blockquote:after {
+  content: "”";
+  right: 0;
+  bottom: -2rem;
+}
+
+:host(limel-markdown.truncate-paragraphs) p {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+p,
+li {
+  font-size: 0.875rem;
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+}
+
+a {
+  word-break: break-all;
+}
+
+p {
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+p:only-child {
+  margin-bottom: 0;
+}
+
+a {
+  transition: color 0.2s ease;
+  color: var(--markdown-hyperlink-color, rgb(var(--color-blue-dark)));
+  text-decoration: none;
+}
+a:hover {
+  color: var(--markdown-hyperlink-color--hovered, rgb(var(--color-blue-default)));
+}
+
+hr {
+  margin: 1.75rem 0 2rem 0;
+  border-width: 0;
+  border-top: 1px solid rgb(var(--contrast-500));
+}
+
+dl {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  grid-template-rows: 1fr;
+  margin-bottom: 2rem;
+  border: 1px solid rgb(var(--contrast-400));
+  border-radius: 0.375rem;
+  background-color: rgb(var(--contrast-200));
+}
+dl dt,
+dl dd {
+  padding: 0.375rem 0.5rem;
+  font-size: 0.875rem;
+  margin: 0;
+}
+dl dt:nth-of-type(even),
+dl dd:nth-of-type(even) {
+  background-color: rgb(var(--contrast-300));
+}
+dl dt:first-child {
+  border-top-left-radius: 0.375rem;
+}
+dl dt:last-child {
+  border-bottom-left-radius: 0.375rem;
+}
+dl dd:first-child {
+  border-top-right-radius: 0.375rem;
+}
+dl dd:last-child {
+  border-bottom-right-radius: 0.375rem;
+}
+
+h1 {
+  font-size: 1.5rem;
+}
+
+h2 {
+  font-size: 1.25rem;
+}
+
+h3 {
+  font-size: 1.125rem;
+}
+
+h4 {
+  font-size: 1rem;
+}
+
+h5 {
+  font-size: 0.875rem;
+}
+
+h6 {
+  font-size: 0.75rem;
+}
+
+h1,
+h2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  letter-spacing: -0.03125rem;
+  font-weight: 500;
+}
+
+h3,
+h4 {
+  margin-top: 0.75rem;
+  margin-bottom: 0.25rem;
+  font-weight: 600;
+}
+
+h5,
+h6 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.125rem;
+  font-weight: 600;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  word-break: break-word;
+  hyphens: auto;
+  -webkit-hyphens: auto;
+}
+:not([contenteditable=true]) h1,
+:not([contenteditable=true]) h2,
+:not([contenteditable=true]) h3,
+:not([contenteditable=true]) h4,
+:not([contenteditable=true]) h5,
+:not([contenteditable=true]) h6 {
+  text-wrap: balance;
+}
+[contenteditable=true] h1,
+[contenteditable=true] h2,
+[contenteditable=true] h3,
+[contenteditable=true] h4,
+[contenteditable=true] h5,
+[contenteditable=true] h6 {
+  text-wrap: initial;
+}
+
+ul {
+  list-style: none;
+}
+ul li {
+  position: relative;
+  margin-left: 0.75rem;
+}
+ul li:before {
+  content: "";
+  position: absolute;
+  left: -0.5rem;
+  top: 0.5rem;
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 50%;
+  background-color: rgb(var(--contrast-700));
+  display: block;
+}
+
+ol {
+  margin-top: 0.25rem;
+  padding-left: 1rem;
+}
+
+ul {
+  margin-top: 0.25rem;
+  padding-left: 0;
+}
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+  margin-left: 0;
+}
+
+li {
+  margin-bottom: 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 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;
+  letter-spacing: -0.0125rem;
+  color: rgb(var(--contrast-1300));
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  -moz-hyphens: none;
+  -ms-hyphens: none;
+  hyphens: none;
+  display: inline-block;
+  border-radius: 0.25rem;
+  padding: 0.03125rem 0.25rem;
+  background-color: rgb(var(--contrast-600));
+}
+
+pre > code {
+  display: block;
+  margin: 0.5rem 0;
+  padding: 0.5rem 0.75rem;
+  overflow: auto;
+  white-space: pre-wrap;
+}
+
+:host(limel-markdown:not(.no-table-styles)) table {
+  table-layout: auto;
+  min-width: 100%;
+  border-collapse: collapse;
+  border-spacing: 0;
+  background: transparent;
+  margin: 0.75rem 0;
+  border: 1px solid rgb(var(--contrast-400));
+}
+:host(limel-markdown:not(.no-table-styles)) th,
+:host(limel-markdown:not(.no-table-styles)) td {
+  text-align: left;
+  vertical-align: top;
+  transition: background-color 0.2s ease;
+  font-size: 0.875rem;
+}
+:host(limel-markdown:not(.no-table-styles)) td {
+  padding: 0.5rem 0.375rem 0.75rem 0.375rem;
+}
+:host(limel-markdown:not(.no-table-styles)) tr th {
+  background-color: rgb(var(--contrast-400));
+  padding: 0.25rem 0.375rem;
+  font-weight: normal;
+}
+:host(limel-markdown:not(.no-table-styles)) tr th:only-child {
+  text-align: center;
+}
+:host(limel-markdown:not(.no-table-styles)) tbody tr:nth-child(odd) td {
+  background-color: rgb(var(--contrast-200));
+}
+:host(limel-markdown:not(.no-table-styles)) tbody tr:hover td {
+  background-color: rgb(var(--contrast-300));
+}