@limetech/lime-elements 39.12.4 → 39.12.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/limel-button.cjs.entry.js +3 -3
- package/dist/cjs/limel-markdown.cjs.entry.js +813 -2
- package/dist/collection/components/button/button.css +18 -13
- package/dist/collection/components/button/button.js +16 -2
- package/dist/collection/components/markdown/markdown.js +3 -2
- package/dist/collection/components/markdown/morph-dom.js +29 -0
- package/dist/esm/limel-button.entry.js +3 -3
- package/dist/esm/limel-markdown.entry.js +813 -2
- package/dist/lime-elements/lime-elements.esm.js +1 -1
- package/dist/lime-elements/p-537df672.entry.js +1 -0
- package/dist/lime-elements/p-8a6721f9.entry.js +1 -0
- package/dist/types/components/button/button.d.ts +14 -0
- package/dist/types/components/markdown/morph-dom.d.ts +12 -0
- package/dist/types/components.d.ts +44 -0
- package/package.json +2 -1
- package/dist/lime-elements/p-73623bb5.entry.js +0 -1
- package/dist/lime-elements/p-a855de67.entry.js +0 -1
|
@@ -146,6 +146,10 @@ button.mdc-button {
|
|
|
146
146
|
}
|
|
147
147
|
|
|
148
148
|
button {
|
|
149
|
+
--_primary-color: var(
|
|
150
|
+
--lime-primary-color,
|
|
151
|
+
var(--limel-theme-primary-color)
|
|
152
|
+
);
|
|
149
153
|
display: flex;
|
|
150
154
|
align-items: center;
|
|
151
155
|
justify-content: center;
|
|
@@ -159,12 +163,6 @@ button {
|
|
|
159
163
|
min-height: 2.25rem;
|
|
160
164
|
width: 100%;
|
|
161
165
|
}
|
|
162
|
-
button:disabled {
|
|
163
|
-
cursor: not-allowed;
|
|
164
|
-
}
|
|
165
|
-
button:disabled.outlined {
|
|
166
|
-
border-color: rgba(var(--contrast-1700), 0.2);
|
|
167
|
-
}
|
|
168
166
|
button:not(:disabled) {
|
|
169
167
|
transition: color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);
|
|
170
168
|
cursor: pointer;
|
|
@@ -202,19 +200,26 @@ button:not(:disabled):focus-visible {
|
|
|
202
200
|
outline: none;
|
|
203
201
|
box-shadow: var(--shadow-depth-8-focused);
|
|
204
202
|
}
|
|
203
|
+
button:disabled {
|
|
204
|
+
cursor: not-allowed;
|
|
205
|
+
}
|
|
205
206
|
:host(limel-button[primary]) button:not(:disabled) {
|
|
206
207
|
color: var(--lime-on-primary-color, var(--limel-theme-on-primary-color));
|
|
207
|
-
background-color: var(--
|
|
208
|
+
background-color: var(--_primary-color);
|
|
208
209
|
}
|
|
209
210
|
:host(limel-button[primary]) button:disabled {
|
|
210
|
-
background-color:
|
|
211
|
+
background-color: color-mix(in srgb, var(--_primary-color), transparent 80%);
|
|
211
212
|
}
|
|
212
213
|
:host(limel-button:not([primary])) button:not(:disabled) {
|
|
213
|
-
color: var(--
|
|
214
|
+
color: var(--_primary-color);
|
|
215
|
+
}
|
|
216
|
+
:host(limel-button:not([primary])) button:disabled.outlined {
|
|
217
|
+
color: color-mix(in srgb, var(--_primary-color), transparent 60%);
|
|
218
|
+
border-color: color-mix(in srgb, var(--_primary-color), transparent 70%);
|
|
214
219
|
}
|
|
215
|
-
:host(limel-button:not([primary])) button:disabled {
|
|
216
|
-
color: rgba(var(--contrast-
|
|
217
|
-
background-color: rgba(var(--contrast-
|
|
220
|
+
:host(limel-button:not([primary])) button:disabled:not(.outlined) {
|
|
221
|
+
color: rgba(var(--contrast-1100), 0.37);
|
|
222
|
+
background-color: rgba(var(--contrast-900), 0.1);
|
|
218
223
|
}
|
|
219
224
|
|
|
220
225
|
.label {
|
|
@@ -279,7 +284,7 @@ svg {
|
|
|
279
284
|
|
|
280
285
|
.outlined {
|
|
281
286
|
border: 1px solid;
|
|
282
|
-
border-color: var(--
|
|
287
|
+
border-color: var(--_primary-color);
|
|
283
288
|
}
|
|
284
289
|
|
|
285
290
|
@keyframes shake {
|
|
@@ -2,9 +2,23 @@ import { h, Host } from "@stencil/core";
|
|
|
2
2
|
import { makeEnterClickable, removeEnterClickable, } from "../../util/make-enter-clickable";
|
|
3
3
|
import { getIconName, getIconTitle } from "../icon/get-icon-props";
|
|
4
4
|
/**
|
|
5
|
+
* Buttons allow users to take actions with a single tap or click.
|
|
6
|
+
* They are intentionally designed to look and feel clickable,
|
|
7
|
+
* and should clearly communicate the action that will happen
|
|
8
|
+
* when the user interacts with them.
|
|
9
|
+
*
|
|
10
|
+
* The component offers three visual variants — **default**, **primary**,
|
|
11
|
+
* and **outlined** — that together establish a hierarchy of actions.
|
|
12
|
+
* See the examples below for guidance on when to use each variant.
|
|
13
|
+
*
|
|
14
|
+
* For more guidance on how to arrange buttons and choose between
|
|
15
|
+
* primary and secondary actions, see our
|
|
16
|
+
* [Action buttons design guidelines](#/DesignGuidelines/action-buttons.md/).
|
|
17
|
+
*
|
|
5
18
|
* @exampleComponent limel-example-button-basic
|
|
6
19
|
* @exampleComponent limel-example-button-primary
|
|
7
20
|
* @exampleComponent limel-example-button-outlined
|
|
21
|
+
* @exampleComponent limel-example-button-button-hierarchy
|
|
8
22
|
* @exampleComponent limel-example-button-disabled
|
|
9
23
|
* @exampleComponent limel-example-button-icon
|
|
10
24
|
* @exampleComponent limel-example-button-loading
|
|
@@ -52,12 +66,12 @@ export class Button {
|
|
|
52
66
|
removeEnterClickable(this.host);
|
|
53
67
|
}
|
|
54
68
|
render() {
|
|
55
|
-
return (h(Host, { key: '
|
|
69
|
+
return (h(Host, { key: '4d575a67e902fe7e6af291ea9b6df5aa9d83ba29', onClick: this.filterClickWhenDisabled }, h("button", { key: '887b9453b5a707db5239f499118d2bb27cc65c1a', class: {
|
|
56
70
|
loading: this.loading,
|
|
57
71
|
'just-loaded': this.justLoaded && !this.loadingFailed,
|
|
58
72
|
'just-failed': this.justLoaded && this.loadingFailed,
|
|
59
73
|
outlined: this.outlined,
|
|
60
|
-
}, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(this.icon), this.renderLabel(), this.renderSpinner(), h("svg", { key: '
|
|
74
|
+
}, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(this.icon), this.renderLabel(), this.renderSpinner(), h("svg", { key: 'd2b52f207f0d6c6af0c55ee7585f3b12a0ee4832', viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
|
|
61
75
|
}
|
|
62
76
|
loadingWatcher(newValue, oldValue) {
|
|
63
77
|
const hasFinishedLoading = this.hasFinishedLoading(newValue, oldValue);
|
|
@@ -3,6 +3,7 @@ import { markdownToHTML } from "./markdown-parser";
|
|
|
3
3
|
import { globalConfig } from "../../global/config";
|
|
4
4
|
import { ImageIntersectionObserver } from "./image-intersection-observer";
|
|
5
5
|
import { hydrateCustomElements } from "./hydrate-custom-elements";
|
|
6
|
+
import { morphChildren } from "./morph-dom";
|
|
6
7
|
import { DEFAULT_MARKDOWN_WHITELIST } from "./default-whitelist";
|
|
7
8
|
/**
|
|
8
9
|
* The Markdown component receives markdown syntax
|
|
@@ -95,7 +96,7 @@ export class Markdown {
|
|
|
95
96
|
lazyLoadImages: this.lazyLoadImages,
|
|
96
97
|
removeEmptyParagraphs: this.removeEmptyParagraphs,
|
|
97
98
|
});
|
|
98
|
-
this.rootElement
|
|
99
|
+
morphChildren(this.rootElement, html);
|
|
99
100
|
// Hydration parses JSON attribute values (e.g. link='{"href":"..."}')
|
|
100
101
|
// into JS properties. URL sanitization happens here because
|
|
101
102
|
// rehype-sanitize can't inspect values inside JSON strings.
|
|
@@ -119,7 +120,7 @@ export class Markdown {
|
|
|
119
120
|
this.cleanupImageIntersectionObserver();
|
|
120
121
|
}
|
|
121
122
|
render() {
|
|
122
|
-
return (h(Host, { key: '
|
|
123
|
+
return (h(Host, { key: '9d88a42e047b6701215699ab5459af3275e51693' }, h("div", { key: '83a5801839318bf47eeacbf53e320e4628559bfa', id: "markdown", ref: (el) => (this.rootElement = el) })));
|
|
123
124
|
}
|
|
124
125
|
setupImageIntersectionObserver() {
|
|
125
126
|
if (this.lazyLoadImages) {
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import morphdom from "morphdom";
|
|
2
|
+
/**
|
|
3
|
+
* Morph the children of `container` to match the given HTML string.
|
|
4
|
+
*
|
|
5
|
+
* Uses morphdom to diff the existing DOM against the new HTML and apply
|
|
6
|
+
* only the minimum changes. This preserves existing DOM nodes (including
|
|
7
|
+
* custom elements with internal state) that haven't changed.
|
|
8
|
+
*
|
|
9
|
+
* @param container - The parent element whose children should be morphed.
|
|
10
|
+
* @param html - The new HTML content for the container's children.
|
|
11
|
+
*/
|
|
12
|
+
export function morphChildren(container, html = '') {
|
|
13
|
+
// morphdom's second argument must be a single root element. We wrap
|
|
14
|
+
// the new HTML in a <div> purely to satisfy that requirement — the
|
|
15
|
+
// tag name doesn't matter because childrenOnly makes morphdom skip
|
|
16
|
+
// the root and only diff the children. The container element itself
|
|
17
|
+
// is never compared or replaced, so it can be any element type.
|
|
18
|
+
try {
|
|
19
|
+
morphdom(container, `<div>${html}</div>`, {
|
|
20
|
+
childrenOnly: true,
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
catch (error) {
|
|
24
|
+
// Fall back to innerHTML so that content is at least visible,
|
|
25
|
+
// even though custom elements will be destroyed and recreated.
|
|
26
|
+
console.warn('morphdom failed, falling back to innerHTML:', error);
|
|
27
|
+
container.innerHTML = html;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
@@ -2,7 +2,7 @@ import { r as registerInstance, h, H as Host, a as getElement } from './index-DB
|
|
|
2
2
|
import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-BgTwPGeH.js';
|
|
3
3
|
import { d as getIconTitle, g as getIconName } from './get-icon-props-CgNJbSP4.js';
|
|
4
4
|
|
|
5
|
-
const buttonCss = () => `@charset "UTF-8";@keyframes reduced-presence{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded){animation:reduced-presence 0.3s ease forwards;transition:padding 0.3s ease, min-width 0.3s ease;transition-delay:0.3s;padding:0;min-width:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .label{transition:font-size 0.8s ease;transition-delay:0.3s;font-size:0;opacity:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}:host{display:inline-block}:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button.mdc-button{font-family:inherit}button{display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:
|
|
5
|
+
const buttonCss = () => `@charset "UTF-8";@keyframes reduced-presence{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0.7)}}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded){animation:reduced-presence 0.3s ease forwards;transition:padding 0.3s ease, min-width 0.3s ease;transition-delay:0.3s;padding:0;min-width:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .label{transition:font-size 0.8s ease;transition-delay:0.3s;font-size:0;opacity:0}:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-icon,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) limel-spinner,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) svg,:host(.has-reduced-presence) button[disabled]:not(.loading):not(.just-loaded) .icon{transition:all 0.3s ease;transition-delay:0.3s;opacity:0;width:0;height:0}:host{display:inline-block}:host([hidden]){display:none}:host([aria-expanded=true]) button,:host([aria-expanded]:not([aria-expanded=false])) button{box-shadow:var(--button-shadow-inset-pressed) !important}button.mdc-button{font-family:inherit}button{--_primary-color:var( --lime-primary-color, var(--limel-theme-primary-color) );display:flex;align-items:center;justify-content:center;gap:0.125rem;border:none;border-radius:0.4rem;padding-top:0;padding-right:var(--button-padding-right, 0.5rem);padding-bottom:0;padding-left:var(--button-padding-left, 0.5rem);min-height:2.25rem;width:100%}button:not(:disabled){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-normal)}button:not(:disabled):hover,button:not(:disabled):focus,button:not(:disabled):focus-visible{will-change:color, background-color, box-shadow, transform}button:not(:disabled):hover,button:not(:disabled):focus-visible{transform:translate3d(0, -0.04rem, 0);color:var(--limel-theme-on-surface-color);background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--button-shadow-hovered)}button:not(:disabled):active{--limel-clickable-transform-timing-function:cubic-bezier( 0.83, -0.15, 0.49, 1.16 );transform:translate3d(0, 0.05rem, 0);box-shadow:var(--button-shadow-pressed)}button:not(:disabled):hover,button:not(:disabled):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not(:disabled):focus{outline:none}button:not(:disabled):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:disabled{cursor:not-allowed}:host(limel-button[primary]) button:not(:disabled){color:var(--lime-on-primary-color, var(--limel-theme-on-primary-color));background-color:var(--_primary-color)}:host(limel-button[primary]) button:disabled{background-color:color-mix(in srgb, var(--_primary-color), transparent 80%)}:host(limel-button:not([primary])) button:not(:disabled){color:var(--_primary-color)}:host(limel-button:not([primary])) button:disabled.outlined{color:color-mix(in srgb, var(--_primary-color), transparent 60%);border-color:color-mix(in srgb, var(--_primary-color), transparent 70%)}:host(limel-button:not([primary])) button:disabled:not(.outlined){color:rgba(var(--contrast-1100), 0.37);background-color:rgba(var(--contrast-900), 0.1)}.label{font-size:var(--limel-theme-default-font-size);font-weight:600;letter-spacing:0.03125rem;padding:0 0.25rem}limel-spinner{position:absolute}limel-icon{width:1.25rem;flex-shrink:0;vertical-align:top}svg{height:1.875rem;opacity:0;pointer-events:none;position:absolute;width:1.875rem}svg line{stroke:rgb(var(--contrast-600));stroke-width:2}limel-icon,.label,limel-spinner,svg{transition:opacity 300ms ease-in-out}.loading limel-icon,.loading .label{opacity:0}.loading limel-spinner{opacity:1}.just-loaded limel-icon,.just-loaded .label,.just-failed limel-icon,.just-failed .label{opacity:0}.just-loaded svg,.just-failed svg{opacity:1}.just-failed{background-color:var(--limel-theme-error-color) !important;animation:shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both}.outlined{border:1px solid;border-color:var(--_primary-color)}@keyframes shake{10%,90%{transform:translate3d(-0.0625rem, 0, 0)}20%,80%{transform:translate3d(0.125rem, 0, 0)}30%,50%,70%{transform:translate3d(-0.1875rem, 0, 0)}40%,60%{transform:translate3d(0.1875rem, 0, 0)}}`;
|
|
6
6
|
|
|
7
7
|
const Button = class {
|
|
8
8
|
constructor(hostRef) {
|
|
@@ -43,12 +43,12 @@ const Button = class {
|
|
|
43
43
|
removeEnterClickable(this.host);
|
|
44
44
|
}
|
|
45
45
|
render() {
|
|
46
|
-
return (h(Host, { key: '
|
|
46
|
+
return (h(Host, { key: '4d575a67e902fe7e6af291ea9b6df5aa9d83ba29', onClick: this.filterClickWhenDisabled }, h("button", { key: '887b9453b5a707db5239f499118d2bb27cc65c1a', class: {
|
|
47
47
|
loading: this.loading,
|
|
48
48
|
'just-loaded': this.justLoaded && !this.loadingFailed,
|
|
49
49
|
'just-failed': this.justLoaded && this.loadingFailed,
|
|
50
50
|
outlined: this.outlined,
|
|
51
|
-
}, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(this.icon), this.renderLabel(), this.renderSpinner(), h("svg", { key: '
|
|
51
|
+
}, disabled: this.disabled || this.loading, "aria-busy": this.loading ? 'true' : 'false', "aria-live": "polite" }, this.renderIcon(this.icon), this.renderLabel(), this.renderSpinner(), h("svg", { key: 'd2b52f207f0d6c6af0c55ee7585f3b12a0ee4832', viewBox: "0 0 30 30" }, this.renderLoadingIcons()))));
|
|
52
52
|
}
|
|
53
53
|
loadingWatcher(newValue, oldValue) {
|
|
54
54
|
const hasFinishedLoading = this.hasFinishedLoading(newValue, oldValue);
|