@vandeurenglenn/lite-elements 0.3.18

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.
Files changed (158) hide show
  1. package/exports/banner/banner.d.ts +7 -0
  2. package/exports/banner.js +68 -0
  3. package/exports/bundle/banner.js +37 -0
  4. package/exports/bundle/button.js +144 -0
  5. package/exports/bundle/card.js +140 -0
  6. package/exports/bundle/code.js +35 -0
  7. package/exports/bundle/custom-element-c2e883ba.js +1 -0
  8. package/exports/bundle/demo-elements.js +1 -0
  9. package/exports/bundle/demo-icons.js +16 -0
  10. package/exports/bundle/demo-shell.js +540 -0
  11. package/exports/bundle/demo.js +457 -0
  12. package/exports/bundle/dial.js +1 -0
  13. package/exports/bundle/dialog.js +149 -0
  14. package/exports/bundle/divider.js +21 -0
  15. package/exports/bundle/drawer-button.js +18 -0
  16. package/exports/bundle/drawer-item.js +39 -0
  17. package/exports/bundle/drawer-layout.js +96 -0
  18. package/exports/bundle/drawer.js +56 -0
  19. package/exports/bundle/dropdown-menu.js +59 -0
  20. package/exports/bundle/dropdown.js +26 -0
  21. package/exports/bundle/elements.js +1 -0
  22. package/exports/bundle/elevation.js +56 -0
  23. package/exports/bundle/hour-field.js +1 -0
  24. package/exports/bundle/icon-button.js +13 -0
  25. package/exports/bundle/icon-set.js +5 -0
  26. package/exports/bundle/icon.js +16 -0
  27. package/exports/bundle/index-3c006227.js +1 -0
  28. package/exports/bundle/index.html +590 -0
  29. package/exports/bundle/input.js +6 -0
  30. package/exports/bundle/it-d4d177bf.js +1 -0
  31. package/exports/bundle/list-item.js +43 -0
  32. package/exports/bundle/list.js +1 -0
  33. package/exports/bundle/menu.js +13 -0
  34. package/exports/bundle/menu2.js +1 -0
  35. package/exports/bundle/minute-field.js +5 -0
  36. package/exports/bundle/pages.js +43 -0
  37. package/exports/bundle/pane.js +96 -0
  38. package/exports/bundle/property-58e28172.js +11 -0
  39. package/exports/bundle/query-73dacde5.js +1 -0
  40. package/exports/bundle/rail.js +58 -0
  41. package/exports/bundle/root.js +8 -0
  42. package/exports/bundle/scroll-mixin.js +1 -0
  43. package/exports/bundle/section.js +11 -0
  44. package/exports/bundle/section2.js +25 -0
  45. package/exports/bundle/select-mixin.js +1 -0
  46. package/exports/bundle/selector-mixin.js +1 -0
  47. package/exports/bundle/selector.js +31 -0
  48. package/exports/bundle/supporting-pane.js +47 -0
  49. package/exports/bundle/tab.js +22 -0
  50. package/exports/bundle/tabs.js +51 -0
  51. package/exports/bundle/text-field.js +10 -0
  52. package/exports/bundle/theme.js +1 -0
  53. package/exports/bundle/themes/default/colors.module.css +180 -0
  54. package/exports/bundle/themes/default/missing/motion.css +4 -0
  55. package/exports/bundle/themes/default/missing/shape.css +13 -0
  56. package/exports/bundle/themes/default/missing/theme.dark.css +5 -0
  57. package/exports/bundle/themes/default/missing/theme.light.css +5 -0
  58. package/exports/bundle/themes/default/missing/tokens.css +9 -0
  59. package/exports/bundle/themes/default/theme.css +10 -0
  60. package/exports/bundle/themes/default/theme.dark.css +33 -0
  61. package/exports/bundle/themes/default/theme.light.css +33 -0
  62. package/exports/bundle/themes/default/tokens.css +256 -0
  63. package/exports/bundle/themes/default/typography.module.css +150 -0
  64. package/exports/bundle/time-picker.js +21 -0
  65. package/exports/bundle/title.js +1 -0
  66. package/exports/bundle/toggle-button.js +4 -0
  67. package/exports/bundle/toggle.js +5 -0
  68. package/exports/bundle/top-app-bar-e6e33a9e.js +114 -0
  69. package/exports/bundle/top-app-bar.js +1 -0
  70. package/exports/bundle/types.js +1 -0
  71. package/exports/bundle/typography.js +156 -0
  72. package/exports/button.js +227 -0
  73. package/exports/card/card.d.ts +13 -0
  74. package/exports/card.js +187 -0
  75. package/exports/code.js +77 -0
  76. package/exports/demo-elements.d.ts +9 -0
  77. package/exports/demo-elements.js +10 -0
  78. package/exports/demo-icons.js +48 -0
  79. package/exports/demo-shell.js +648 -0
  80. package/exports/demo.js +524 -0
  81. package/exports/dial.js +1 -0
  82. package/exports/dialog.js +256 -0
  83. package/exports/divider/divider.d.ts +17 -0
  84. package/exports/divider.js +54 -0
  85. package/exports/drawer/drawer-button.d.ts +9 -0
  86. package/exports/drawer/drawer-layout.d.ts +19 -0
  87. package/exports/drawer/drawer.d.ts +13 -0
  88. package/exports/drawer-button.js +83 -0
  89. package/exports/drawer-item.js +69 -0
  90. package/exports/drawer-layout.js +209 -0
  91. package/exports/drawer.js +140 -0
  92. package/exports/dropdown-menu.js +172 -0
  93. package/exports/dropdown.js +68 -0
  94. package/exports/elements.d.ts +63 -0
  95. package/exports/elements.js +41 -0
  96. package/exports/elevation/elevation.d.ts +11 -0
  97. package/exports/elevation.js +97 -0
  98. package/exports/hour-field.js +1 -0
  99. package/exports/icon-button.js +59 -0
  100. package/exports/icon-set.js +52 -0
  101. package/exports/icon.js +103 -0
  102. package/exports/input.js +36 -0
  103. package/exports/list/list.d.ts +1 -0
  104. package/exports/list-item.js +127 -0
  105. package/exports/list.js +1 -0
  106. package/exports/menu.js +68 -0
  107. package/exports/menu2.js +1 -0
  108. package/exports/minute-field.js +36 -0
  109. package/exports/mixins/scroll-mixin.d.ts +13 -0
  110. package/exports/mixins/select-mixin.d.ts +32 -0
  111. package/exports/mixins/selector-mixin.d.ts +8 -0
  112. package/exports/pages.js +88 -0
  113. package/exports/pane/pane.d.ts +14 -0
  114. package/exports/pane.js +182 -0
  115. package/exports/rail/rail.d.ts +9 -0
  116. package/exports/rail.js +124 -0
  117. package/exports/root.js +39 -0
  118. package/exports/scroll-mixin.js +36 -0
  119. package/exports/section.js +54 -0
  120. package/exports/section2.js +58 -0
  121. package/exports/select-mixin.js +139 -0
  122. package/exports/selector-mixin.js +43 -0
  123. package/exports/selector.js +63 -0
  124. package/exports/supporting-pane/supporting-pane.d.ts +12 -0
  125. package/exports/supporting-pane.js +133 -0
  126. package/exports/tab.js +47 -0
  127. package/exports/tabs/menu.d.ts +1 -0
  128. package/exports/tabs/tab.d.ts +4 -0
  129. package/exports/tabs/tabs.d.ts +5 -0
  130. package/exports/tabs.js +80 -0
  131. package/exports/text-field.js +88 -0
  132. package/exports/theme/theme.d.ts +15 -0
  133. package/exports/theme.js +123 -0
  134. package/exports/themes/default/colors.module.css +180 -0
  135. package/exports/themes/default/missing/motion.css +4 -0
  136. package/exports/themes/default/missing/shape.css +13 -0
  137. package/exports/themes/default/missing/theme.dark.css +5 -0
  138. package/exports/themes/default/missing/theme.light.css +5 -0
  139. package/exports/themes/default/missing/tokens.css +9 -0
  140. package/exports/themes/default/theme.css +10 -0
  141. package/exports/themes/default/theme.dark.css +33 -0
  142. package/exports/themes/default/theme.light.css +33 -0
  143. package/exports/themes/default/tokens.css +256 -0
  144. package/exports/themes/default/typography.module.css +150 -0
  145. package/exports/time-picker/dial.d.ts +1 -0
  146. package/exports/time-picker/hour-field.d.ts +1 -0
  147. package/exports/time-picker.js +52 -0
  148. package/exports/title.js +1 -0
  149. package/exports/toggle/toggle-button.d.ts +13 -0
  150. package/exports/toggle-button.js +63 -0
  151. package/exports/toggle.js +78 -0
  152. package/exports/top-app-bar.js +143 -0
  153. package/exports/tslib.es6-d3ba6528.js +57 -0
  154. package/exports/types.d.ts +18 -0
  155. package/exports/types.js +1 -0
  156. package/exports/typography/title.d.ts +1 -0
  157. package/exports/typography.js +206 -0
  158. package/package.json +256 -0
@@ -0,0 +1,7 @@
1
+ import '../button/button.js';
2
+ import { LiteElement } from '@vandeurenglenn/lite';
3
+ import '@vandeurenglenn/flex-elements/it.js';
4
+ export declare class CustomBanner extends LiteElement {
5
+ constructor();
6
+ render(): import("lit-html").TemplateResult<1>;
7
+ }
@@ -0,0 +1,68 @@
1
+ import { _ as __esDecorate, a as __runInitializers } from './tslib.es6-d3ba6528.js';
2
+ import './button.js';
3
+ import { customElement, html, LiteElement } from '@vandeurenglenn/lite';
4
+ import '@vandeurenglenn/flex-elements/it.js';
5
+ import './elevation.js';
6
+
7
+ let CustomBanner = (() => {
8
+ let _classDecorators = [customElement('custom-banner')];
9
+ let _classDescriptor;
10
+ let _classExtraInitializers = [];
11
+ let _classThis;
12
+ let _classSuper = LiteElement;
13
+ (class extends _classSuper {
14
+ static { _classThis = this; }
15
+ static {
16
+ const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
17
+ __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
18
+ _classThis = _classDescriptor.value;
19
+ if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
20
+ __runInitializers(_classThis, _classExtraInitializers);
21
+ }
22
+ constructor() {
23
+ super();
24
+ }
25
+ render() {
26
+ return html `
27
+ <style>
28
+ :host {
29
+ display: flex;
30
+ align-items: center;
31
+ box-sizing: border-box;
32
+ width: 100%;
33
+ height: 40px;
34
+ padding: 8px 16px;
35
+ background: var(--md-sys-color-tertiary);
36
+ color: var(--md-sys-color-on-tertiary);
37
+ }
38
+
39
+ :host([inset]) {
40
+ margin-left: 16px;
41
+ margin-right: 0;
42
+ }
43
+
44
+ :host([middle-inset]) {
45
+ margin-left: 16px;
46
+ margin-right: 16px;
47
+ }
48
+ custom-icon {
49
+ --custom-icon-size: 12px;
50
+ }
51
+
52
+ custom-button {
53
+ height: 24px;
54
+ width: 24px;
55
+ }
56
+ </style>
57
+ <slot></slot>
58
+ <flex-it flex="1"></flex-it>
59
+ <custom-button type="tertiary">
60
+ <custom-icon slot="icon">close</custom-icon>
61
+ </custom-button>
62
+ `;
63
+ }
64
+ });
65
+ return _classThis;
66
+ })();
67
+
68
+ export { CustomBanner };
@@ -0,0 +1,37 @@
1
+ import{_ as t,a as e,e as o}from"./custom-element-c2e883ba.js";import"./button.js";import{v as r,D as i}from"./property-58e28172.js";import"./it-d4d177bf.js";import"./elevation.js";let s=(()=>{let s,a,n=[o("custom-banner")],l=[],m=i;return class extends m{static{a=this}static{const o="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;t(null,s={value:a},n,{kind:"class",name:a.name,metadata:o},null,l),a=s.value,o&&Object.defineProperty(a,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:o}),e(a,l)}constructor(){super()}render(){return r`
2
+ <style>
3
+ :host {
4
+ display: flex;
5
+ align-items: center;
6
+ box-sizing: border-box;
7
+ width: 100%;
8
+ height: 40px;
9
+ padding: 8px 16px;
10
+ background: var(--md-sys-color-tertiary);
11
+ color: var(--md-sys-color-on-tertiary);
12
+ }
13
+
14
+ :host([inset]) {
15
+ margin-left: 16px;
16
+ margin-right: 0;
17
+ }
18
+
19
+ :host([middle-inset]) {
20
+ margin-left: 16px;
21
+ margin-right: 16px;
22
+ }
23
+ custom-icon {
24
+ --custom-icon-size: 12px;
25
+ }
26
+
27
+ custom-button {
28
+ height: 24px;
29
+ width: 24px;
30
+ }
31
+ </style>
32
+ <slot></slot>
33
+ <flex-it flex="1"></flex-it>
34
+ <custom-button type="tertiary">
35
+ <custom-icon slot="icon">close</custom-icon>
36
+ </custom-button>
37
+ `}},a})();export{s as CustomBanner};
@@ -0,0 +1,144 @@
1
+ import{_ as e,a as t,e as a}from"./custom-element-c2e883ba.js";import{e as s,j as o,v as l,D as r}from"./property-58e28172.js";import"./elevation.js";let n=(()=>{let n,i,c,d,h,y,b=[a("custom-button")],p=[],m=r,v=[],g=[],u=[],f=[],_=[],x=[],k=[],L=[];return class extends m{static{i=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;c=[s({attribute:"has-icon",reflect:!0})],d=[s({attribute:"has-label",reflect:!0})],h=[s({attribute:"type",reflect:!0})],y=[s()],e(this,null,c,{kind:"accessor",name:"hasIcon",static:!1,private:!1,access:{has:e=>"hasIcon"in e,get:e=>e.hasIcon,set:(e,t)=>{e.hasIcon=t}},metadata:t},v,g),e(this,null,d,{kind:"accessor",name:"hasLabel",static:!1,private:!1,access:{has:e=>"hasLabel"in e,get:e=>e.hasLabel,set:(e,t)=>{e.hasLabel=t}},metadata:t},u,f),e(this,null,h,{kind:"accessor",name:"type",static:!1,private:!1,access:{has:e=>"type"in e,get:e=>e.type,set:(e,t)=>{e.type=t}},metadata:t},_,x),e(this,null,y,{kind:"accessor",name:"label",static:!1,private:!1,access:{has:e=>"label"in e,get:e=>e.label,set:(e,t)=>{e.label=t}},metadata:t},k,L),e(null,n={value:i},b,{kind:"class",name:i.name,metadata:t},null,p),i=n.value,t&&Object.defineProperty(i,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}#e=t(this,v,void 0);get hasIcon(){return this.#e}set hasIcon(e){this.#e=e}#t=(t(this,g),t(this,u,void 0));get hasLabel(){return this.#t}set hasLabel(e){this.#t=e}#a=(t(this,f),t(this,_,"text"));get type(){return this.#a}set type(e){this.#a=e}#s=(t(this,x),t(this,k,void 0));get label(){return this.#s}set label(e){this.#s=e}static styles=[o`
2
+ :host {
3
+ color: var(--custom-button-color, --md-sys-color-on-background);
4
+ display: flex;
5
+
6
+ height: 40px;
7
+ border-radius: 20px;
8
+ position: relative;
9
+ pointer-events: auto;
10
+ cursor: pointer;
11
+
12
+ --elevation-level: 0;
13
+ }
14
+
15
+ button {
16
+ box-sizing: border-box;
17
+ border: none;
18
+ background: transparent;
19
+ color: inherit;
20
+ align-items: center;
21
+ justify-content: center;
22
+ user-select: none;
23
+ outline: none;
24
+ cursor: pointer;
25
+ border-radius: inherit;
26
+ padding: none;
27
+ width: inherit;
28
+ height: inherit;
29
+ display: flex;
30
+ pointer-events: none;
31
+ }
32
+
33
+ .label,
34
+ ::slotted(*) {
35
+ font-family: var(--md-sys-typescale-label-large-font-family-name);
36
+ font-style: var(--md-sys-typescale-label-large-font-family-style);
37
+ font-weight: var(--md-sys-typescale-label-large-font-weight);
38
+ font-size: var(--md-sys-typescale-label-large-font-size);
39
+ letter-spacing: var(--md-sys-typescale-label-large-tracking);
40
+ line-height: var(--md-sys-typescale-label-large-height);
41
+ text-transform: var(--md-sys-typescale-label-large-text-transform);
42
+ text-decoration: var(--md-sys-typescale-label-large-text-decoration);
43
+ }
44
+
45
+ :host([type='filled']),
46
+ :host([type='filled']) ::slotted(*) {
47
+ color: var(--md-sys-color-on-primary);
48
+ fill: var(--md-sys-color-on-primary);
49
+ background: var(--md-sys-color-primary);
50
+ }
51
+
52
+ :host([type='outlined']),
53
+ :host([type='outlined']) ::slotted(*) {
54
+ color: var(--md-sys-color-on-surface);
55
+ fill: var(--md-sys-color-on-surface);
56
+ background: var(--md-sys-color-surface);
57
+ border: solid 1px;
58
+ border-color: var(--md-sys-color-outline);
59
+ }
60
+
61
+ :host([type='elevated']),
62
+ :host([type='elevated']) ::slotted(*) {
63
+ color: var(--md-sys-color-primary);
64
+ fill: var(--md-sys-color-primary);
65
+ background: var(--md-sys-color-surface-container-low);
66
+ }
67
+
68
+ :host([type='tertiary']),
69
+ :host([type='tertiary']) ::slotted(*) {
70
+ background: var(--md-sys-color-tertiary);
71
+ color: var(--md-sys-color-on-tertiary);
72
+ fill: var(--md-sys-color-on-tertiary);
73
+ }
74
+
75
+ :host([type='tonal']),
76
+ :host([type='tonal']) ::slotted(*) {
77
+ background: var(--md-sys-color-secondary-container);
78
+ color: var(--md-sys-color-on-seconday-container);
79
+ fill: var(--md-sys-color-on-seconday-container);
80
+ }
81
+
82
+ custom-elevation {
83
+ --md-elevation-level: var(--elevation-level);
84
+ }
85
+
86
+ :host([type='elevated']) custom-elevation {
87
+ --elevation-level: 1;
88
+ }
89
+
90
+ :host([type='filled']),
91
+ :host([type='outlined']),
92
+ :host([type='text']),
93
+ :host([type='tonal']) {
94
+ --elevation-level: 0;
95
+ }
96
+
97
+ :host([has-label]) .label {
98
+ padding-left: 24px;
99
+ padding-right: 24px;
100
+ }
101
+
102
+ :host([has-icon]:not([has-label])) {
103
+ border-radius: 50%;
104
+ width: 40px;
105
+ align-items: center;
106
+ justify-content: center;
107
+ }
108
+
109
+ :host([has-icon][has-label]) .label {
110
+ padding-left: 8px;
111
+ padding-right: 24px;
112
+ }
113
+ :host([has-icon][has-label]) slot[name='icon']::slotted(*) {
114
+ padding-left: 16px;
115
+ }
116
+
117
+ :host([disabled]) .label,
118
+ :host([disabled]) slot[name='icon']::slotted(*) {
119
+ opacity: 0.38;
120
+ }
121
+
122
+ ::slotted(*) {
123
+ pointer-events: none;
124
+ }
125
+
126
+ :host(:focus),
127
+ :host(:hover) {
128
+ --elevation-level: 2;
129
+ }
130
+
131
+ :host(:active) {
132
+ --elevation-level: 0;
133
+ }
134
+
135
+ button * {
136
+ pointer-events: none;
137
+ }
138
+ `];connectedCallback(){const e=Array.from(this.shadowRoot.querySelectorAll("slot"));for(const t of e)t.addEventListener("slotchange",(()=>this.#o(t)));this.#o(e[0])}onChange(e,t){"label"===e&&(this.hasLabel=!!t)}#o=(t(this,L),e=>{"icon"===e.getAttribute("name")&&(this.hasIcon=0!==Array.from(e?.assignedNodes()||[]).length)});render(){return l`
139
+ <button label=${this.label}>
140
+ <custom-elevation></custom-elevation>
141
+ <slot name="icon"></slot>
142
+ <span class="label">${this.label}</span>
143
+ </button>
144
+ `}static{t(i,p)}},i})();export{n as CustomButton};
@@ -0,0 +1,140 @@
1
+ import{_ as e,a as t,e as o}from"./custom-element-c2e883ba.js";import{v as s,D as a}from"./property-58e28172.js";import"./button.js";import"./divider.js";import"./elevation.js";let i=(()=>{let i,l,r=[o("custom-card")],n=[],d=a;return class extends d{static{l=this}static{const t="function"==typeof Symbol&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;e(null,i={value:l},r,{kind:"class",name:l.name,metadata:t},null,n),l=i.value,t&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}dividerType;type="elevated";elevationLevel=0;static properties={hasDivider:{type:Boolean},elevationLevel:{type:Number}};renderDivider(){const e=this.shadowRoot.querySelector('slot[name="actions"]');return 0!==Array.from(e?.assignedNodes()||[]).length?s`<custom-divider
2
+ ?inset=${"inset"===this.dividerType}
3
+ ?middle-inset=${"inset"===this.dividerType}
4
+ ></custom-divider>`:""}render(){return s`
5
+ <style>
6
+ :host {
7
+ box-sizing: border-box;
8
+ display: flex;
9
+ margin: 8px;
10
+ position: relative;
11
+ height: fit-content;
12
+ max-height: 320px;
13
+ width: 100%;
14
+ max-width: 320px;
15
+ border-radius: 12px;
16
+ border: 1px solid;
17
+ overflow: hidden;
18
+ }
19
+
20
+ .container {
21
+ display: flex;
22
+ flex-direction: column;
23
+ max-width: 320px;
24
+ height: max-content;
25
+ max-height: 320px;
26
+ border-color: transparent;
27
+ color: var(--md-sys-color-on-surface-variant);
28
+ background: var(--md-sys-color-surface-variant);
29
+ /* position: absolute; */
30
+ }
31
+
32
+ .content-container {
33
+ display: flex;
34
+ flex-direction: column;
35
+ box-sizing: border-box;
36
+ padding: 16px;
37
+ height: 100%;
38
+ }
39
+
40
+ custom-elevation {
41
+ --md-elevation-level: 1;
42
+ }
43
+
44
+ :host() ::slotted(*) {
45
+ font-family: var(--md-sys-typescale-display-small-font-family-name);
46
+ font-weight: var(--md-sys-typescale-display-small-font-family-style);
47
+ }
48
+
49
+ slot[name='headline']::slotted(*) {
50
+ font-weight: var(--md-sys-typescale-headline-large-font-weight);
51
+ font-size: var(--md-sys-typescale-headline-large-font-size);
52
+ line-height: var(--md-sys-typescale-headline-large-line-height);
53
+ letter-spacing: var(--md-sys-typescale-headline-large-letter-spacing);
54
+ }
55
+
56
+ slot[name='subline']::slotted(*) {
57
+ font-weight: var(--md-sys-typescale-title-large-font-weight);
58
+ font-size: var(--md-sys-typescale-title-large-font-size);
59
+
60
+ line-height: var(--md-sys-typescale-title-large-line-height);
61
+ letter-spacing: var(--md-sys-typescale-title-large-letter-spacing);
62
+ }
63
+
64
+ slot[name='supportingText']::slotted(*) {
65
+ margin: 8px 0 0 0;
66
+ font-weight: var(--md-sys-typescale-body-medium-font-weight);
67
+ font-size: var(--md-sys-typescale-body-medium-font-size);
68
+
69
+ line-height: var(--md-sys-typescale-body-medium-line-height);
70
+ letter-spacing: var(--md-sys-typescale-body-medium-letter-spacing);
71
+
72
+ max-height: 144px;
73
+ overflow-y: auto;
74
+ }
75
+
76
+ .supporting-text {
77
+ max-height: 196px;
78
+ overflow-y: scroll;
79
+ }
80
+
81
+ :host([type='filled']) .container {
82
+ color: var(--md-sys-color-on-secondary-container);
83
+ background: var(--md-sys-color-secondary-container);
84
+ }
85
+
86
+ :host([type='outlined']) .container {
87
+ color: var(--md-sys-color-on-surface);
88
+ background: var(--md-sys-color-surface);
89
+ }
90
+
91
+ :host([type='outlined']) {
92
+ border-color: var(--md-sys-color-outline);
93
+ }
94
+
95
+ :host([type='tertiary']) .container {
96
+ color: var(--md-sys-color-on-tertiary-container);
97
+ background: var(--md-sys-color-tertiary-container);
98
+ }
99
+
100
+ :host([type='tertiary']) {
101
+ border-color: var(--md-sys-color-outline);
102
+ }
103
+
104
+ :host([type='filled']) custom-elevation,
105
+ :host([type='outlined']) custom-elevation,
106
+ :host([type='tertiary']) custom-elevation {
107
+ --md-elevation-level: 0;
108
+ }
109
+
110
+ .actions {
111
+ height: 44px;
112
+ width: 100%;
113
+ display: flex;
114
+ }
115
+
116
+ ::slotted(*:not([slot='actions'])) {
117
+ overflow: hidden;
118
+ border-radius: 12px;
119
+ height: 100%;
120
+ width: 100%;
121
+ }
122
+ </style>
123
+ <custom-elevation></custom-elevation>
124
+ <span class="container">
125
+ <slot name="image"></slot>
126
+
127
+ <span class="content-container">
128
+ <slot name="headline"></slot>
129
+ <slot name="subline"></slot>
130
+ <span class="supporting-text">
131
+ <slot name="supportingText"></slot>
132
+ </span>
133
+ ${this.renderDivider()}
134
+ <span class="actions">
135
+ <flex-it flex="1"></flex-it>
136
+ <slot name="actions"></slot>
137
+ </span>
138
+ </span>
139
+ </span>
140
+ `}static{t(l,n)}},l})();export{i as CustomCard};
@@ -0,0 +1,35 @@
1
+ import{_ as e,a,e as t}from"./custom-element-c2e883ba.js";import{e as o,j as r,v as s,D as c}from"./property-58e28172.js";let i=(()=>{let i,l,n,d=[t("demo-code")],m=[],u=c,p=[],g=[];return class extends u{static{l=this}static{const a="function"==typeof Symbol&&Symbol.metadata?Object.create(u[Symbol.metadata]??null):void 0;n=[o({type:String})],e(this,null,n,{kind:"accessor",name:"code",static:!1,private:!1,access:{has:e=>"code"in e,get:e=>e.code,set:(e,a)=>{e.code=a}},metadata:a},p,g),e(null,i={value:l},d,{kind:"class",name:l.name,metadata:a},null,m),l=i.value,a&&Object.defineProperty(l,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:a})}#e=a(this,p,void 0);get code(){return this.#e}set code(e){this.#e=e}static styles=[r`
2
+ :host {
3
+ display: flex;
4
+
5
+ color: var(--md-sys-color-on-surface-variant);
6
+ box-sizing: border-box;
7
+ width: 100%;
8
+ box-sizing: border-box;
9
+ background: var(--md-sys-color-surface-variant);
10
+ border: 1px solid var(--md-sys-color-outline);
11
+ border-radius: var(--md-sys-shape-corner-large);
12
+
13
+ /* margin-left: -100%; */
14
+ /* display: inline-block; */
15
+ margin: 12px 0 24px 0;
16
+
17
+ align-items: center;
18
+ }
19
+ pre,
20
+ code {
21
+ margin: 0;
22
+ padding: 0;
23
+ overflow: auto;
24
+ }
25
+ pre {
26
+ margin-bottom: -12px;
27
+ margin-left: -46px;
28
+ }
29
+ `];render(){return s`
30
+ <pre class="language-html">
31
+ <code class="language-html">
32
+ ${this.code}
33
+ </code>
34
+ </pre>
35
+ `}constructor(){super(...arguments),a(this,g)}static{a(l,m)}},l})();export{i as DemoCode};
@@ -0,0 +1 @@
1
+ function e(e,t,r,n,o,i){function c(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,a=n.kind,f="getter"===a?"get":"setter"===a?"set":"value",u=!t&&e?n.static?e:e.prototype:null,l=t||(u?Object.getOwnPropertyDescriptor(u,n.name):{}),p=!1,d=r.length-1;d>=0;d--){var g={};for(var h in n)g[h]="access"===h?{}:n[h];for(var h in n.access)g.access[h]=n.access[h];g.addInitializer=function(e){if(p)throw new TypeError("Cannot add initializers after decoration has completed");i.push(c(e||null))};var v=(0,r[d])("accessor"===a?{get:l.get,set:l.set}:l[f],g);if("accessor"===a){if(void 0===v)continue;if(null===v||"object"!=typeof v)throw new TypeError("Object expected");(s=c(v.get))&&(l.get=s),(s=c(v.set))&&(l.set=s),(s=c(v.init))&&o.unshift(s)}else(s=c(v))&&("field"===a?o.unshift(s):l[f]=s)}u&&Object.defineProperty(u,n.name,l),p=!0}function t(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function r(e){return(t,{addInitializer:r})=>{r((function(){customElements.define(e??t.name.replace(/([a-zA-Z])(?=[A-Z])/g,"$1-").toLowerCase(),this)}))}}"function"==typeof SuppressedError&&SuppressedError;export{e as _,t as a,r as e};
@@ -0,0 +1 @@
1
+ export{DemoIcons}from"./demo-icons.js";export{DemoSection}from"./section.js";import"./custom-element-c2e883ba.js";import"./property-58e28172.js";import"./icon-set.js";import"./index-3c006227.js";import"./section2.js";import"./scroll-mixin.js";import"./elevation.js";import"./code.js";
@@ -0,0 +1,16 @@
1
+ import{_ as t,a as e,e as s}from"./custom-element-c2e883ba.js";import{j as v,v as a,D as m}from"./property-58e28172.js";import"./icon-set.js";import"./index-3c006227.js";let h=(()=>{let h,n,o=[s("demo-icons")],w=[],i=m;return class extends i{static{n=this}static{const e="function"==typeof Symbol&&Symbol.metadata?Object.create(i[Symbol.metadata]??null):void 0;t(null,h={value:n},o,{kind:"class",name:n.name,metadata:e},null,w),n=h.value,e&&Object.defineProperty(n,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static styles=[v`
2
+ :host {
3
+ display: block;
4
+ }
5
+ `];render(){return a` <custom-icon-set>
6
+ <template>
7
+ <span name="home"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M220-180h150v-250h220v250h150v-390L480-765 220-570v390Zm-60 60v-480l320-240 320 240v480H530v-250H430v250H160Zm320-353Z"/></svg></span>
8
+ <span name="menu"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M120-240v-60h720v60H120Zm0-210v-60h720v60H120Zm0-210v-60h720v60H120Z"/></svg></span>
9
+ <span name="info"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M453-280h60v-240h-60v240Zm26.982-314q14.018 0 23.518-9.2T513-626q0-14.45-9.482-24.225-9.483-9.775-23.5-9.775-14.018 0-23.518 9.775T447-626q0 13.6 9.482 22.8 9.483 9.2 23.5 9.2Zm.284 514q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"/></svg></span>
10
+ <span name="check_box"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m419-321 289-289-43-43-246 246-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Zm0-600v600-600Z"/></svg></span>
11
+ <span name="menu_open"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M120-240v-60h520v60H120Zm678-52L609-481l188-188 43 43-145 145 146 146-43 43ZM120-452v-60h400v60H120Zm0-208v-60h520v60H120Z"/></svg></span>
12
+ <span name="more_vert"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M479.858-160Q460-160 446-174.142q-14-14.141-14-34Q432-228 446.142-242q14.141-14 34-14Q500-256 514-241.858q14 14.141 14 34Q528-188 513.858-174q-14.141 14-34 14Zm0-272Q460-432 446-446.142q-14-14.141-14-34Q432-500 446.142-514q14.141-14 34-14Q500-528 514-513.858q14 14.141 14 34Q528-460 513.858-446q-14.141 14-34 14Zm0-272Q460-704 446-718.142q-14-14.141-14-34Q432-772 446.142-786q14.141-14 34-14Q500-800 514-785.858q14 14.141 14 34Q528-732 513.858-718q-14.141 14-34 14Z"/></svg></span>
13
+ <span name="close"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="m249-207-42-42 231-231-231-231 42-42 231 231 231-231 42 42-231 231 231 231-42 42-231-231-231 231Z"/></svg></span>
14
+ <span name="check_box_outline_blank"><svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 -960 960 960"><path d="M180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Z"/></svg></span>
15
+ </template>
16
+ </custom-icon-set>`}static{e(n,w)}},n})();export{h as DemoIcons};