@c2n/status-panel 0.0.14 → 0.0.15

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 (5) hide show
  1. package/dist/status-panel.js +15 -3
  2. package/package.json +3 -3
  3. package/react.d.ts +2 -1
  4. package/types/src/status-panel.d.ts +1 -1
  5. package/types/src/status-panel.d.ts.map +1 -1
package/dist/status-panel.js CHANGED
@@ -1,9 +1,9 @@
1
- import { LitElement, html, isServer, unsafeCSS } from "lit";
1
+ import { LitElement, html, isServer, nothing, unsafeCSS } from "lit";
2
2
  import { state } from "lit/decorators.js";
3
3
  import { property } from "@c2n/core/lit-helper.js";
4
4
  import { customElement } from "@c2n/core/element-helper.js";
5
5
  //#region src/status-panel.scss?inline
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}";
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=loading]) .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.loading-icon {\n animation: c2-status-panel-spin 800ms linear infinite;\n}\n\n@keyframes c2-status-panel-spin {\n to {\n transform: rotate(360deg);\n }\n}\n@media (prefers-reduced-motion: reduce) {\n .loading-icon {\n animation-duration: 1600ms;\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}";
7
7
  //#endregion
8
8
  //#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
9
9
  function __decorate(decorators, target, key, desc) {
@@ -49,6 +49,13 @@ var StatusPanel = class StatusPanel extends LitElement {
49
49
  this.contentSlotted = this.querySelector("[slot=\"content\"]") !== null;
50
50
  }
51
51
  renderDefaultMedia() {
52
+ if (this.status === "loading") return html`<svg class="loading-icon" viewBox="0 0 24 24" aria-hidden="true">
53
+ <path d="M21 12a9 9 0 1 1-6.22-8.56"></path>
54
+ </svg>`;
55
+ if (this.status === "empty") return html`<svg viewBox="0 0 24 24" aria-hidden="true">
56
+ <path d="M4 8.5 7 4h10l3 4.5V19a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1Z"></path>
57
+ <path d="M4 13h4l1.5 2h5l1.5-2h4"></path>
58
+ </svg>`;
52
59
  if (this.status === "success") return html`<svg viewBox="0 0 24 24" aria-hidden="true"><path d="m5 12 4 4L19 6"></path></svg>`;
53
60
  if (this.status === "warning") return html`<svg viewBox="0 0 24 24" aria-hidden="true">
54
61
  <path d="M10.3 3.7 2.6 17a2 2 0 0 0 1.7 3h15.4a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z"></path>
@@ -68,7 +75,12 @@ var StatusPanel = class StatusPanel extends LitElement {
68
75
  const hasTitle = Boolean(this.heading) || this.titleSlotted;
69
76
  const hasDescription = Boolean(this.description) || this.descriptionSlotted;
70
77
  return html`
71
- <div class="container">
78
+ <div
79
+ class="container"
80
+ role=${this.status === "loading" ? "status" : nothing}
81
+ aria-live=${this.status === "loading" ? "polite" : nothing}
82
+ aria-busy=${this.status === "loading" ? "true" : nothing}
83
+ >
72
84
  <div class="message">
73
85
  <div part="media" class="media"><slot name="media" @slotchange=${this.handleSlotChange}>${this.renderDefaultMedia()}</slot></div>
74
86
  <div class="header" ?hidden=${!hasTitle && !hasDescription}>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@c2n/status-panel",
3
- "version": "0.0.14",
3
+ "version": "0.0.15",
4
4
  "type": "module",
5
5
  "main": "dist/status-panel.js",
6
6
  "exports": {
@@ -63,12 +63,12 @@
63
63
  }
64
64
  },
65
65
  "dependencies": {
66
- "@c2n/core": "0.0.14",
66
+ "@c2n/core": "0.0.15",
67
67
  "lit": "3.3.3"
68
68
  },
69
69
  "devDependencies": {
70
70
  "@c2n/config": "*"
71
71
  },
72
72
  "customElements": "custom-elements.json",
73
- "gitHead": "0261bfceaaa9f710a54e8f36cb57f946c0b83e53"
73
+ "gitHead": "129a6e537c68c04ed2a36508789bf42c9781e196"
74
74
  }
package/react.d.ts CHANGED
@@ -9,7 +9,8 @@
9
9
  //
10
10
  // On a server-rendered page (Next.js, React Router SSR) write a camelCase property by its kebab-case attribute
11
11
  // name ('row-key', not rowKey): the server emits props verbatim, HTML lowercases them, and hydration does not
12
- // set properties. Those names are listed next to the properties below.
12
+ // set properties. Those names are listed next to the properties below. Structured converter-backed values
13
+ // also accept their serialized string form, so server JSX can emit the same JSON/CSV attribute used by HTML.
13
14
 
14
15
  import type { DetailedHTMLProps, HTMLAttributes } from 'react'
15
16
  import type { StatusPanel } from '@c2n/status-panel'
package/types/src/status-panel.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { LitElement, type TemplateResult } from 'lit';
2
- export type StatusPanelStatus = 'neutral' | 'info' | 'success' | 'warning' | 'error';
2
+ export type StatusPanelStatus = 'neutral' | 'loading' | 'empty' | 'info' | 'success' | 'warning' | 'error';
3
3
  export type StatusPanelAlign = 'center' | 'start';
4
4
  /**
5
5
  * Presents a meaningful application state with optional media, supporting copy, actions and additional content. Use it
package/types/src/status-panel.d.ts.map CHANGED
@@ -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;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"}
1
+ {"version":3,"file":"status-panel.d.ts","sourceRoot":"","sources":["../../src/status-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAMzF,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAA;AAC1G,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;IAgCjB,MAAM;CA2BhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,iBAAiB,EAAE,WAAW,CAAA;KAC/B;CACF"}