@c2n/status-panel 0.0.12 → 0.0.14
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/README.md
CHANGED
|
@@ -8,4 +8,12 @@ A composable Lit component for empty states, operation outcomes, recoverable err
|
|
|
8
8
|
</c2-status-panel>
|
|
9
9
|
```
|
|
10
10
|
|
|
11
|
-
|
|
11
|
+
The `media`, `title`, `description`, `content` and `actions` slots each have a same-named CSS part for their component-owned region. The `media` part also surrounds the built-in status-icon fallback; the title and description parts surround their attribute fallbacks. Content and actions parts remain present but hidden while their slots are empty.
|
|
12
|
+
|
|
13
|
+
```css
|
|
14
|
+
c2-status-panel::part(actions) {
|
|
15
|
+
justify-content: flex-start;
|
|
16
|
+
}
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
Style assigned light-DOM content with its own class. A status-panel part does not reach inside the shadow root of an assigned custom element.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"schemaVersion":"1.0.0","readme":"","modules":[{"kind":"javascript-module","path":"src/status-panel.ts","declarations":[{"kind":"class","description":"Presents a meaningful application state with optional media, supporting copy, actions and additional content. Use it\nfor empty collections, completed operations, errors, unavailable pages and other places where the user needs a clear\nexplanation and next step.","name":"StatusPanel","cssProperties":[{"type":{"text":"length"},"description":"Panel width.","name":"--c2-status-panel__container--width","default":"100%"},{"type":{"text":"length"},"description":"Maximum panel width.","name":"--c2-status-panel__container--max-width","default":"720px"},{"type":{"text":"length"},"description":"Minimum panel height.","name":"--c2-status-panel__container--min-height","default":"240px"},{"type":{"text":"padding"},"description":"Panel padding.","name":"--c2-status-panel__container--padding","default":"40px 24px"},{"type":{"text":"length"},"description":"Space between the message, actions and content.","name":"--c2-status-panel__container--gap","default":"24px"},{"type":{"text":"border"},"description":"Panel border.","name":"--c2-status-panel__container--border","default":"1px solid transparent"},{"type":{"text":"border-radius"},"description":"Panel corner radius.","name":"--c2-status-panel__container--border-radius","default":"14px"},{"type":{"text":"color"},"description":"Panel background.","name":"--c2-status-panel__container--background-color","default":"transparent"},{"type":{"text":"length"},"description":"Media container width and height.","name":"--c2-status-panel__media--size","default":"64px"},{"type":{"text":"border-radius"},"description":"Media container corner radius.","name":"--c2-status-panel__media--border-radius","default":"999px"},{"type":{"text":"color"},"description":"Neutral media background.","name":"--c2-status-panel__media--background-color","default":"#f4f4f5"},{"type":{"text":"color"},"description":"Neutral media colour.","name":"--c2-status-panel__media--color","default":"#71717a"},{"type":{"text":"length"},"description":"Default and slotted icon size.","name":"--c2-status-panel__media-icon--size","default":"32px"},{"type":{"text":"color"},"description":"Information media background.","name":"--c2-status-panel__media__info--background-color","default":"#edf1fe"},{"type":{"text":"color"},"description":"Information media colour.","name":"--c2-status-panel__media__info--color","default":"rgb(2, 101, 220)"},{"type":{"text":"color"},"description":"Success media background.","name":"--c2-status-panel__media__success--background-color","default":"#ecfdf3"},{"type":{"text":"color"},"description":"Success media colour.","name":"--c2-status-panel__media__success--color","default":"#15803d"},{"type":{"text":"color"},"description":"Warning media background.","name":"--c2-status-panel__media__warning--background-color","default":"#fffbeb"},{"type":{"text":"color"},"description":"Warning media colour.","name":"--c2-status-panel__media__warning--color","default":"#b45309"},{"type":{"text":"color"},"description":"Error media background.","name":"--c2-status-panel__media__error--background-color","default":"#fef2f2"},{"type":{"text":"color"},"description":"Error media colour.","name":"--c2-status-panel__media__error--color","default":"#b91c1c"},{"type":{"text":"length"},"description":"Space between title and description.","name":"--c2-status-panel__header--gap","default":"6px"},{"type":{"text":"color"},"description":"Title colour.","name":"--c2-status-panel__title--color","default":"#18181b"},{"type":{"text":"font-size"},"description":"Title font size.","name":"--c2-status-panel__title--font-size","default":"20px"},{"type":{"text":"font-weight"},"description":"Title font weight.","name":"--c2-status-panel__title--font-weight","default":"600"},{"type":{"text":"line-height"},"description":"Title line height.","name":"--c2-status-panel__title--line-height","default":"28px"},{"type":{"text":"color"},"description":"Description colour.","name":"--c2-status-panel__description--color","default":"#71717a"},{"type":{"text":"font-size"},"description":"Description font size.","name":"--c2-status-panel__description--font-size","default":"14px"},{"type":{"text":"line-height"},"description":"Description line height.","name":"--c2-status-panel__description--line-height","default":"20px"},{"type":{"text":"length"},"description":"Maximum readable description width.","name":"--c2-status-panel__description--max-width","default":"480px"},{"type":{"text":"length"},"description":"Space between actions.","name":"--c2-status-panel__actions--gap","default":"8px"},{"type":{"text":"length"},"description":"Maximum additional-content width.","name":"--c2-status-panel__content--max-width","default":"560px"},{"type":{"text":"padding"},"description":"Additional-content padding.","name":"--c2-status-panel__content--padding","default":"16px"},{"type":{"text":"border-radius"},"description":"Additional-content corner radius.","name":"--c2-status-panel__content--border-radius","default":"8px"},{"type":{"text":"color"},"description":"Additional-content background.","name":"--c2-status-panel__content--background-color","default":"#f4f4f5"}],"cssParts":[{"description":"Container for the `media` slot and its status-icon fallback; always present.","name":"media"},{"description":"Heading region for the `title` slot or `heading` fallback; hidden when both are empty.","name":"title"},{"description":"Supporting-copy region for the `description` slot or attribute fallback; hidden when both are empty.","name":"description"},{"description":"Additional-details region around the `content` slot; hidden while the slot is empty.","name":"content"},{"description":"Action row around the `actions` slot; hidden while the slot is empty.","name":"actions"}],"slots":[{"description":"Illustration, icon, avatar or other visual. A status icon is shown by default.","name":"media"},{"description":"Short heading. Falls back to the `heading` attribute.","name":"title"},{"description":"Supporting explanation. Falls back to the `description` attribute.","name":"description"},{"description":"Primary and secondary actions.","name":"actions"},{"description":"Additional details, lists or controls below the actions.","name":"content"}],"members":[{"kind":"field","name":"status","type":{"text":"StatusPanelStatus"},"default":"'neutral'","description":"Visual tone and default media icon.","attribute":"status","reflects":true},{"kind":"field","name":"align","type":{"text":"StatusPanelAlign"},"default":"'center'","description":"Centers the composition or aligns it to the inline start.","attribute":"align","reflects":true},{"kind":"field","name":"heading","type":{"text":"string"},"default":"''","description":"Plain-text title fallback. Use the `title` slot for rich content.","attribute":"heading"},{"kind":"field","name":"description","type":{"text":"string"},"default":"''","description":"Plain-text description fallback. Use the `description` slot for rich content.","attribute":"description"},{"kind":"field","name":"headingLevel","type":{"text":"number"},"default":"2","description":"Accessible heading level used by the title region.","attribute":"heading-level"},{"kind":"field","name":"titleSlotted","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"descriptionSlotted","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"actionsSlotted","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"field","name":"contentSlotted","type":{"text":"boolean"},"privacy":"private","default":"false"},{"kind":"method","name":"syncSlotState","privacy":"private"},{"kind":"field","name":"handleSlotChange","privacy":"private"},{"kind":"method","name":"renderDefaultMedia","privacy":"private","return":{"type":{"text":"TemplateResult"}}}],"attributes":[{"name":"status","type":{"text":"StatusPanelStatus"},"default":"'neutral'","description":"Visual tone and default media icon.","fieldName":"status"},{"name":"align","type":{"text":"StatusPanelAlign"},"default":"'center'","description":"Centers the composition or aligns it to the inline start.","fieldName":"align"},{"name":"heading","type":{"text":"string"},"default":"''","description":"Plain-text title fallback. Use the `title` slot for rich content.","fieldName":"heading"},{"name":"description","type":{"text":"string"},"default":"''","description":"Plain-text description fallback. Use the `description` slot for rich content.","fieldName":"description"},{"name":"heading-level","type":{"text":"number"},"default":"2","description":"Accessible heading level used by the title region.","fieldName":"headingLevel"}],"superclass":{"name":"LitElement","package":"lit"},"tagName":"c2-status-panel","customElement":true}],"exports":[{"kind":"js","name":"StatusPanel","declaration":{"name":"StatusPanel","module":"src/status-panel.ts"}},{"kind":"custom-element-definition","name":"c2-status-panel","declaration":{"name":"StatusPanel","module":"src/status-panel.ts"}}]}]}
|
package/dist/status-panel.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { LitElement, html, isServer, unsafeCSS } from "lit";
|
|
2
|
-
import {
|
|
2
|
+
import { state } from "lit/decorators.js";
|
|
3
|
+
import { property } from "@c2n/core/lit-helper.js";
|
|
3
4
|
import { customElement } from "@c2n/core/element-helper.js";
|
|
4
5
|
//#region src/status-panel.scss?inline
|
|
5
6
|
var status_panel_default = "/* ex : var((width: 24px), width, c2-checkbox) returns var(--c2-checkbox-width, 24px) */\n:host {\n display: block;\n width: var(--c2-status-panel__container--width,100%);\n max-width: var(--c2-status-panel__container--max-width,720px);\n}\n\n:host([hidden]) {\n display: none;\n}\n\n[hidden] {\n display: none;\n}\n\n.container {\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n min-height: var(--c2-status-panel__container--min-height,240px);\n padding: var(--c2-status-panel__container--padding,40px 24px);\n gap: var(--c2-status-panel__container--gap,24px);\n border: var(--c2-status-panel__container--border,1px solid transparent);\n border-radius: var(--c2-status-panel__container--border-radius,14px);\n background-color: var(--c2-status-panel__container--background-color,transparent);\n text-align: center;\n}\n\n.message,\n.header {\n display: flex;\n flex-direction: column;\n align-items: center;\n}\n\n.message {\n gap: var(--c2-status-panel__container--gap,24px);\n}\n\n.header {\n gap: var(--c2-status-panel__header--gap,6px);\n}\n\n.media {\n display: grid;\n flex: 0 0 auto;\n place-items: center;\n box-sizing: border-box;\n width: var(--c2-status-panel__media--size,64px);\n height: var(--c2-status-panel__media--size,64px);\n overflow: hidden;\n border-radius: var(--c2-status-panel__media--border-radius,999px);\n background-color: var(--c2-status-panel__media--background-color,#f4f4f5);\n color: var(--c2-status-panel__media--color,#71717a);\n}\n\n:host([status=info]) .media {\n background-color: var(--c2-status-panel__media__info--background-color,#edf1fe);\n color: var(--c2-status-panel__media__info--color,rgb(2, 101, 220));\n}\n\n:host([status=success]) .media {\n background-color: var(--c2-status-panel__media__success--background-color,#ecfdf3);\n color: var(--c2-status-panel__media__success--color,#15803d);\n}\n\n:host([status=warning]) .media {\n background-color: var(--c2-status-panel__media__warning--background-color,#fffbeb);\n color: var(--c2-status-panel__media__warning--color,#b45309);\n}\n\n:host([status=error]) .media {\n background-color: var(--c2-status-panel__media__error--background-color,#fef2f2);\n color: var(--c2-status-panel__media__error--color,#b91c1c);\n}\n\n.media svg,\n::slotted([slot=media]) {\n display: grid;\n place-items: center;\n width: var(--c2-status-panel__media-icon--size,32px);\n height: var(--c2-status-panel__media-icon--size,32px);\n}\n\n.media svg {\n fill: none;\n stroke: currentColor;\n stroke-width: 1.8;\n stroke-linecap: round;\n stroke-linejoin: round;\n}\n\n.title {\n color: var(--c2-status-panel__title--color,#18181b);\n font-size: var(--c2-status-panel__title--font-size,20px);\n font-weight: var(--c2-status-panel__title--font-weight,600);\n line-height: var(--c2-status-panel__title--line-height,28px);\n}\n\n.description {\n max-width: var(--c2-status-panel__description--max-width,480px);\n color: var(--c2-status-panel__description--color,#71717a);\n font-size: var(--c2-status-panel__description--font-size,14px);\n line-height: var(--c2-status-panel__description--line-height,20px);\n}\n\n.actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: var(--c2-status-panel__actions--gap,8px);\n}\n\n.content {\n box-sizing: border-box;\n width: 100%;\n max-width: var(--c2-status-panel__content--max-width,560px);\n padding: var(--c2-status-panel__content--padding,16px);\n border-radius: var(--c2-status-panel__content--border-radius,8px);\n background-color: var(--c2-status-panel__content--background-color,#f4f4f5);\n}\n\n:host([align=start]) .container,\n:host([align=start]) .message,\n:host([align=start]) .header {\n align-items: flex-start;\n text-align: start;\n}\n\n:host([align=start]) .actions {\n justify-content: flex-start;\n}";
|
|
@@ -69,18 +70,18 @@ var StatusPanel = class StatusPanel extends LitElement {
|
|
|
69
70
|
return html`
|
|
70
71
|
<div class="container">
|
|
71
72
|
<div class="message">
|
|
72
|
-
<div class="media"><slot name="media" @slotchange=${this.handleSlotChange}>${this.renderDefaultMedia()}</slot></div>
|
|
73
|
+
<div part="media" class="media"><slot name="media" @slotchange=${this.handleSlotChange}>${this.renderDefaultMedia()}</slot></div>
|
|
73
74
|
<div class="header" ?hidden=${!hasTitle && !hasDescription}>
|
|
74
|
-
<div class="title" role="heading" aria-level=${this.headingLevel} ?hidden=${!hasTitle}>
|
|
75
|
+
<div part="title" class="title" role="heading" aria-level=${this.headingLevel} ?hidden=${!hasTitle}>
|
|
75
76
|
<slot name="title" @slotchange=${this.handleSlotChange}>${this.heading}</slot>
|
|
76
77
|
</div>
|
|
77
|
-
<div class="description" ?hidden=${!hasDescription}>
|
|
78
|
+
<div part="description" class="description" ?hidden=${!hasDescription}>
|
|
78
79
|
<slot name="description" @slotchange=${this.handleSlotChange}>${this.description}</slot>
|
|
79
80
|
</div>
|
|
80
81
|
</div>
|
|
81
82
|
</div>
|
|
82
|
-
<div class="content" ?hidden=${!this.contentSlotted}><slot name="content" @slotchange=${this.handleSlotChange}></slot></div>
|
|
83
|
-
<div class="actions" ?hidden=${!this.actionsSlotted}><slot name="actions" @slotchange=${this.handleSlotChange}></slot></div>
|
|
83
|
+
<div part="content" class="content" ?hidden=${!this.contentSlotted}><slot name="content" @slotchange=${this.handleSlotChange}></slot></div>
|
|
84
|
+
<div part="actions" class="actions" ?hidden=${!this.actionsSlotted}><slot name="actions" @slotchange=${this.handleSlotChange}></slot></div>
|
|
84
85
|
</div>
|
|
85
86
|
`;
|
|
86
87
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c2n/status-panel",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.14",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/status-panel.js",
|
|
6
6
|
"exports": {
|
|
@@ -21,6 +21,7 @@
|
|
|
21
21
|
"files": [
|
|
22
22
|
"dist",
|
|
23
23
|
"types",
|
|
24
|
+
"custom-elements.json",
|
|
24
25
|
"react.d.ts",
|
|
25
26
|
"react.js",
|
|
26
27
|
"vue.d.ts",
|
|
@@ -62,12 +63,12 @@
|
|
|
62
63
|
}
|
|
63
64
|
},
|
|
64
65
|
"dependencies": {
|
|
65
|
-
"@c2n/core": "0.0.
|
|
66
|
+
"@c2n/core": "0.0.14",
|
|
66
67
|
"lit": "3.3.3"
|
|
67
68
|
},
|
|
68
69
|
"devDependencies": {
|
|
69
70
|
"@c2n/config": "*"
|
|
70
71
|
},
|
|
71
72
|
"customElements": "custom-elements.json",
|
|
72
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "0261bfceaaa9f710a54e8f36cb57f946c0b83e53"
|
|
73
74
|
}
|
|
@@ -14,6 +14,12 @@ export type StatusPanelAlign = 'center' | 'start';
|
|
|
14
14
|
* @slot actions - Primary and secondary actions.
|
|
15
15
|
* @slot content - Additional details, lists or controls below the actions.
|
|
16
16
|
*
|
|
17
|
+
* @csspart media - Container for the `media` slot and its status-icon fallback; always present.
|
|
18
|
+
* @csspart title - Heading region for the `title` slot or `heading` fallback; hidden when both are empty.
|
|
19
|
+
* @csspart description - Supporting-copy region for the `description` slot or attribute fallback; hidden when both are empty.
|
|
20
|
+
* @csspart content - Additional-details region around the `content` slot; hidden while the slot is empty.
|
|
21
|
+
* @csspart actions - Action row around the `actions` slot; hidden while the slot is empty.
|
|
22
|
+
*
|
|
17
23
|
* @cssproperty {length} [--c2-status-panel__container--width=100%] - Panel width.
|
|
18
24
|
* @cssproperty {length} [--c2-status-panel__container--max-width=720px] - Maximum panel width.
|
|
19
25
|
* @cssproperty {length} [--c2-status-panel__container--min-height=240px] - Minimum panel height.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status-panel.d.ts","sourceRoot":"","sources":["../../src/status-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA6B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"status-panel.d.ts","sourceRoot":"","sources":["../../src/status-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAA6B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAMhF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AACpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,OAAO,CAAA;AAEjD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsDG;AACH,qBACa,WAAY,SAAQ,UAAU;IACzC,OAAgB,MAAM,0BAAoB;IAE1C,0CAA0C;IACb,MAAM,EAAE,iBAAiB,CAAY;IAElE,gEAAgE;IACnC,KAAK,EAAE,gBAAgB,CAAW;IAE/D,wEAAwE;IAC5D,OAAO,SAAK;IAExB,oFAAoF;IACxE,WAAW,SAAK;IAE5B,yDAAyD;IACD,YAAY,SAAI;IAE/D,OAAO,CAAC,YAAY,CAAQ;IAC5B,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,cAAc,CAAQ;IAC9B,OAAO,CAAC,cAAc,CAAQ;IAE9B,iBAAiB;IAK1B,OAAO,CAAC,aAAa;IAOrB,OAAO,CAAC,gBAAgB,CAOvB;IAED,OAAO,CAAC,kBAAkB;IAqBjB,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}
|