@sankhyatronics/sankhya-cms 0.1.13 → 0.1.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/custom-elements.json
CHANGED
|
@@ -910,6 +910,125 @@
|
|
|
910
910
|
}
|
|
911
911
|
]
|
|
912
912
|
},
|
|
913
|
+
{
|
|
914
|
+
"kind": "javascript-module",
|
|
915
|
+
"path": "src/chip/Chip.ts",
|
|
916
|
+
"declarations": [
|
|
917
|
+
{
|
|
918
|
+
"kind": "class",
|
|
919
|
+
"description": "A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\nto the theme's status tokens (soft background, text colour on that background), so a chip reads\nthe same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\nstatus tones for meaning only (success = done, warning = due soon, danger = overdue).\n\nThe pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's\nCSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`\nrules, which would leave the pill without its padding.",
|
|
920
|
+
"name": "Chip",
|
|
921
|
+
"members": [
|
|
922
|
+
{
|
|
923
|
+
"kind": "field",
|
|
924
|
+
"name": "tone",
|
|
925
|
+
"type": {
|
|
926
|
+
"text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
|
|
927
|
+
},
|
|
928
|
+
"default": "'neutral'",
|
|
929
|
+
"description": "Colour treatment: a soft tint of the matching theme token.",
|
|
930
|
+
"attribute": "tone",
|
|
931
|
+
"reflects": true
|
|
932
|
+
},
|
|
933
|
+
{
|
|
934
|
+
"kind": "field",
|
|
935
|
+
"name": "size",
|
|
936
|
+
"type": {
|
|
937
|
+
"text": "'md' | 'sm'"
|
|
938
|
+
},
|
|
939
|
+
"default": "'md'",
|
|
940
|
+
"description": "`sm` for dense lists and table cells.",
|
|
941
|
+
"attribute": "size",
|
|
942
|
+
"reflects": true
|
|
943
|
+
},
|
|
944
|
+
{
|
|
945
|
+
"kind": "field",
|
|
946
|
+
"name": "translucent",
|
|
947
|
+
"type": {
|
|
948
|
+
"text": "boolean"
|
|
949
|
+
},
|
|
950
|
+
"default": "false",
|
|
951
|
+
"description": "A see-through white pill with white text, for a chip on a coloured card.",
|
|
952
|
+
"attribute": "translucent",
|
|
953
|
+
"reflects": true
|
|
954
|
+
},
|
|
955
|
+
{
|
|
956
|
+
"kind": "field",
|
|
957
|
+
"name": "dot",
|
|
958
|
+
"type": {
|
|
959
|
+
"text": "boolean"
|
|
960
|
+
},
|
|
961
|
+
"default": "false",
|
|
962
|
+
"description": "Shows a leading dot in the chip's text colour.",
|
|
963
|
+
"attribute": "dot",
|
|
964
|
+
"reflects": true
|
|
965
|
+
}
|
|
966
|
+
],
|
|
967
|
+
"attributes": [
|
|
968
|
+
{
|
|
969
|
+
"name": "tone",
|
|
970
|
+
"type": {
|
|
971
|
+
"text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
|
|
972
|
+
},
|
|
973
|
+
"default": "'neutral'",
|
|
974
|
+
"description": "Colour treatment: a soft tint of the matching theme token.",
|
|
975
|
+
"fieldName": "tone"
|
|
976
|
+
},
|
|
977
|
+
{
|
|
978
|
+
"name": "size",
|
|
979
|
+
"type": {
|
|
980
|
+
"text": "'md' | 'sm'"
|
|
981
|
+
},
|
|
982
|
+
"default": "'md'",
|
|
983
|
+
"description": "`sm` for dense lists and table cells.",
|
|
984
|
+
"fieldName": "size"
|
|
985
|
+
},
|
|
986
|
+
{
|
|
987
|
+
"name": "translucent",
|
|
988
|
+
"type": {
|
|
989
|
+
"text": "boolean"
|
|
990
|
+
},
|
|
991
|
+
"default": "false",
|
|
992
|
+
"description": "A see-through white pill with white text, for a chip on a coloured card.",
|
|
993
|
+
"fieldName": "translucent"
|
|
994
|
+
},
|
|
995
|
+
{
|
|
996
|
+
"name": "dot",
|
|
997
|
+
"type": {
|
|
998
|
+
"text": "boolean"
|
|
999
|
+
},
|
|
1000
|
+
"default": "false",
|
|
1001
|
+
"description": "Shows a leading dot in the chip's text colour.",
|
|
1002
|
+
"fieldName": "dot"
|
|
1003
|
+
}
|
|
1004
|
+
],
|
|
1005
|
+
"superclass": {
|
|
1006
|
+
"name": "LitElement",
|
|
1007
|
+
"package": "lit"
|
|
1008
|
+
},
|
|
1009
|
+
"tagName": "st-chip",
|
|
1010
|
+
"customElement": true
|
|
1011
|
+
}
|
|
1012
|
+
],
|
|
1013
|
+
"exports": [
|
|
1014
|
+
{
|
|
1015
|
+
"kind": "js",
|
|
1016
|
+
"name": "Chip",
|
|
1017
|
+
"declaration": {
|
|
1018
|
+
"name": "Chip",
|
|
1019
|
+
"module": "src/chip/Chip.ts"
|
|
1020
|
+
}
|
|
1021
|
+
},
|
|
1022
|
+
{
|
|
1023
|
+
"kind": "custom-element-definition",
|
|
1024
|
+
"name": "st-chip",
|
|
1025
|
+
"declaration": {
|
|
1026
|
+
"name": "Chip",
|
|
1027
|
+
"module": "src/chip/Chip.ts"
|
|
1028
|
+
}
|
|
1029
|
+
}
|
|
1030
|
+
]
|
|
1031
|
+
},
|
|
913
1032
|
{
|
|
914
1033
|
"kind": "javascript-module",
|
|
915
1034
|
"path": "src/content-block/ContentBlock.ts",
|
|
@@ -1096,105 +1215,6 @@
|
|
|
1096
1215
|
}
|
|
1097
1216
|
]
|
|
1098
1217
|
},
|
|
1099
|
-
{
|
|
1100
|
-
"kind": "javascript-module",
|
|
1101
|
-
"path": "src/chip/Chip.ts",
|
|
1102
|
-
"declarations": [
|
|
1103
|
-
{
|
|
1104
|
-
"kind": "class",
|
|
1105
|
-
"description": "A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\nto the theme's status tokens (soft background, text colour on that background), so a chip reads\nthe same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\nstatus tones for meaning only (success = done, warning = due soon, danger = overdue).\n\nThe pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's\nCSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`\nrules, which would leave the pill without its padding.",
|
|
1106
|
-
"name": "Chip",
|
|
1107
|
-
"members": [
|
|
1108
|
-
{
|
|
1109
|
-
"kind": "field",
|
|
1110
|
-
"name": "tone",
|
|
1111
|
-
"type": {
|
|
1112
|
-
"text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
|
|
1113
|
-
},
|
|
1114
|
-
"default": "'neutral'",
|
|
1115
|
-
"description": "Colour treatment: a soft tint of the matching theme token.",
|
|
1116
|
-
"attribute": "tone",
|
|
1117
|
-
"reflects": true
|
|
1118
|
-
},
|
|
1119
|
-
{
|
|
1120
|
-
"kind": "field",
|
|
1121
|
-
"name": "size",
|
|
1122
|
-
"type": {
|
|
1123
|
-
"text": "'md' | 'sm'"
|
|
1124
|
-
},
|
|
1125
|
-
"default": "'md'",
|
|
1126
|
-
"description": "`sm` for dense lists and table cells.",
|
|
1127
|
-
"attribute": "size",
|
|
1128
|
-
"reflects": true
|
|
1129
|
-
},
|
|
1130
|
-
{
|
|
1131
|
-
"kind": "field",
|
|
1132
|
-
"name": "dot",
|
|
1133
|
-
"type": {
|
|
1134
|
-
"text": "boolean"
|
|
1135
|
-
},
|
|
1136
|
-
"default": "false",
|
|
1137
|
-
"description": "Shows a leading dot in the chip's text colour.",
|
|
1138
|
-
"attribute": "dot",
|
|
1139
|
-
"reflects": true
|
|
1140
|
-
}
|
|
1141
|
-
],
|
|
1142
|
-
"attributes": [
|
|
1143
|
-
{
|
|
1144
|
-
"name": "tone",
|
|
1145
|
-
"type": {
|
|
1146
|
-
"text": "'neutral' | 'accent' | 'success' | 'warning' | 'danger'"
|
|
1147
|
-
},
|
|
1148
|
-
"default": "'neutral'",
|
|
1149
|
-
"description": "Colour treatment: a soft tint of the matching theme token.",
|
|
1150
|
-
"fieldName": "tone"
|
|
1151
|
-
},
|
|
1152
|
-
{
|
|
1153
|
-
"name": "size",
|
|
1154
|
-
"type": {
|
|
1155
|
-
"text": "'md' | 'sm'"
|
|
1156
|
-
},
|
|
1157
|
-
"default": "'md'",
|
|
1158
|
-
"description": "`sm` for dense lists and table cells.",
|
|
1159
|
-
"fieldName": "size"
|
|
1160
|
-
},
|
|
1161
|
-
{
|
|
1162
|
-
"name": "dot",
|
|
1163
|
-
"type": {
|
|
1164
|
-
"text": "boolean"
|
|
1165
|
-
},
|
|
1166
|
-
"default": "false",
|
|
1167
|
-
"description": "Shows a leading dot in the chip's text colour.",
|
|
1168
|
-
"fieldName": "dot"
|
|
1169
|
-
}
|
|
1170
|
-
],
|
|
1171
|
-
"superclass": {
|
|
1172
|
-
"name": "LitElement",
|
|
1173
|
-
"package": "lit"
|
|
1174
|
-
},
|
|
1175
|
-
"tagName": "st-chip",
|
|
1176
|
-
"customElement": true
|
|
1177
|
-
}
|
|
1178
|
-
],
|
|
1179
|
-
"exports": [
|
|
1180
|
-
{
|
|
1181
|
-
"kind": "js",
|
|
1182
|
-
"name": "Chip",
|
|
1183
|
-
"declaration": {
|
|
1184
|
-
"name": "Chip",
|
|
1185
|
-
"module": "src/chip/Chip.ts"
|
|
1186
|
-
}
|
|
1187
|
-
},
|
|
1188
|
-
{
|
|
1189
|
-
"kind": "custom-element-definition",
|
|
1190
|
-
"name": "st-chip",
|
|
1191
|
-
"declaration": {
|
|
1192
|
-
"name": "Chip",
|
|
1193
|
-
"module": "src/chip/Chip.ts"
|
|
1194
|
-
}
|
|
1195
|
-
}
|
|
1196
|
-
]
|
|
1197
|
-
},
|
|
1198
1218
|
{
|
|
1199
1219
|
"kind": "javascript-module",
|
|
1200
1220
|
"path": "src/cookie-consent/CookieConsent.ts",
|
package/dist/chip/index.d.ts
CHANGED
|
@@ -17,6 +17,8 @@ declare class Chip extends LitElement {
|
|
|
17
17
|
tone: 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
|
|
18
18
|
/** `sm` for dense lists and table cells. */
|
|
19
19
|
size: 'md' | 'sm';
|
|
20
|
+
/** A see-through white pill with white text, for a chip on a coloured card. */
|
|
21
|
+
translucent: boolean;
|
|
20
22
|
/** Shows a leading dot in the chip's text colour. */
|
|
21
23
|
dot: boolean;
|
|
22
24
|
render(): lit.TemplateResult<1>;
|
package/dist/chip/index.js
CHANGED
|
@@ -13,6 +13,7 @@ var Chip = class extends LitElement {
|
|
|
13
13
|
super(...arguments);
|
|
14
14
|
this.tone = "neutral";
|
|
15
15
|
this.size = "md";
|
|
16
|
+
this.translucent = false;
|
|
16
17
|
this.dot = false;
|
|
17
18
|
}
|
|
18
19
|
render() {
|
|
@@ -67,6 +68,13 @@ Chip.styles = css`
|
|
|
67
68
|
color: var(--st-color-danger-text);
|
|
68
69
|
}
|
|
69
70
|
|
|
71
|
+
/* A see-through pill for a chip on a coloured card (the blue hero): white at a low opacity, with white
|
|
72
|
+
text, like the License Server's hero chips. */
|
|
73
|
+
:host([translucent]) .pill {
|
|
74
|
+
background: rgb(255 255 255 / 0.18);
|
|
75
|
+
color: var(--st-color-on-solid);
|
|
76
|
+
}
|
|
77
|
+
|
|
70
78
|
.dot {
|
|
71
79
|
width: 6px;
|
|
72
80
|
height: 6px;
|
|
@@ -85,6 +93,9 @@ __decorateClass([
|
|
|
85
93
|
__decorateClass([
|
|
86
94
|
property({ type: String, reflect: true })
|
|
87
95
|
], Chip.prototype, "size", 2);
|
|
96
|
+
__decorateClass([
|
|
97
|
+
property({ type: Boolean, reflect: true })
|
|
98
|
+
], Chip.prototype, "translucent", 2);
|
|
88
99
|
__decorateClass([
|
|
89
100
|
property({ type: Boolean, reflect: true })
|
|
90
101
|
], Chip.prototype, "dot", 2);
|
|
@@ -95,4 +106,4 @@ Chip = __decorateClass([
|
|
|
95
106
|
export {
|
|
96
107
|
Chip
|
|
97
108
|
};
|
|
98
|
-
//# sourceMappingURL=chunk-
|
|
109
|
+
//# sourceMappingURL=chunk-AKJQ345O.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/chip/Chip.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\n * to the theme's status tokens (soft background, text colour on that background), so a chip reads\n * the same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\n * status tones for meaning only (success = done, warning = due soon, danger = overdue).\n *\n * The pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's\n * CSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`\n * rules, which would leave the pill without its padding.\n */\n@customElement('st-chip')\nexport class Chip extends LitElement {\n static styles = css`\n ${fontFamilyStyles}\n\n :host {\n display: inline-flex;\n max-width: 100%;\n }\n\n .pill {\n display: inline-flex;\n align-items: center;\n gap: var(--st-space-6);\n padding: var(--st-space-2) var(--st-space-10);\n border-radius: var(--st-radius-full);\n font-size: var(--st-text-sm);\n font-weight: var(--st-font-weight-medium);\n line-height: 1.4;\n white-space: nowrap;\n background: var(--st-color-subtle);\n color: var(--st-color-text-secondary);\n font-variant-numeric: tabular-nums;\n }\n\n :host([size='sm']) .pill {\n padding: 0 var(--st-space-8);\n font-size: var(--st-text-xs);\n }\n\n :host([tone='accent']) .pill {\n background: var(--st-color-accent-subtle);\n color: var(--st-color-accent-text);\n }\n\n :host([tone='success']) .pill {\n background: var(--st-color-success-subtle);\n color: var(--st-color-success-text);\n }\n\n :host([tone='warning']) .pill {\n background: var(--st-color-warning-subtle);\n color: var(--st-color-warning-text);\n }\n\n :host([tone='danger']) .pill {\n background: var(--st-color-danger-subtle);\n color: var(--st-color-danger-text);\n }\n\n .dot {\n width: 6px;\n height: 6px;\n border-radius: var(--st-radius-circle);\n background: currentColor;\n flex: none;\n }\n\n :host(:not([dot])) .dot {\n display: none;\n }\n `;\n\n /** Colour treatment: a soft tint of the matching theme token. */\n @property({ type: String, reflect: true })\n tone: 'neutral' | 'accent' | 'success' | 'warning' | 'danger' = 'neutral';\n\n /** `sm` for dense lists and table cells. */\n @property({ type: String, reflect: true })\n size: 'md' | 'sm' = 'md';\n\n /** Shows a leading dot in the chip's text colour. */\n @property({ type: Boolean, reflect: true })\n dot = false;\n\n render() {\n return html`<span class=\"pill\" part=\"pill\"><span class=\"dot\" part=\"dot\" aria-hidden=\"true\"></span><slot></slot></span>`;\n }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAejC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;
|
|
1
|
+
{"version":3,"sources":["../src/chip/Chip.ts"],"sourcesContent":["import { LitElement, css, html } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\n\nimport { fontFamilyStyles } from '../shared/styles';\n\n/**\n * A small rounded status pill: text in the default slot, with an optional leading dot. Tones map\n * to the theme's status tokens (soft background, text colour on that background), so a chip reads\n * the same in every theme. Use `neutral` for plain labels, `accent` for the brand tint, and the\n * status tones for meaning only (success = done, warning = due soon, danger = overdue).\n *\n * The pill's box (padding, background) sits on an inner element, not on `:host`: an outer page's\n * CSS reset (Tailwind's preflight zeroes padding on every element) beats a component's `:host`\n * rules, which would leave the pill without its padding.\n */\n@customElement('st-chip')\nexport class Chip extends LitElement {\n static styles = css`\n ${fontFamilyStyles}\n\n :host {\n display: inline-flex;\n max-width: 100%;\n }\n\n .pill {\n display: inline-flex;\n align-items: center;\n gap: var(--st-space-6);\n padding: var(--st-space-2) var(--st-space-10);\n border-radius: var(--st-radius-full);\n font-size: var(--st-text-sm);\n font-weight: var(--st-font-weight-medium);\n line-height: 1.4;\n white-space: nowrap;\n background: var(--st-color-subtle);\n color: var(--st-color-text-secondary);\n font-variant-numeric: tabular-nums;\n }\n\n :host([size='sm']) .pill {\n padding: 0 var(--st-space-8);\n font-size: var(--st-text-xs);\n }\n\n :host([tone='accent']) .pill {\n background: var(--st-color-accent-subtle);\n color: var(--st-color-accent-text);\n }\n\n :host([tone='success']) .pill {\n background: var(--st-color-success-subtle);\n color: var(--st-color-success-text);\n }\n\n :host([tone='warning']) .pill {\n background: var(--st-color-warning-subtle);\n color: var(--st-color-warning-text);\n }\n\n :host([tone='danger']) .pill {\n background: var(--st-color-danger-subtle);\n color: var(--st-color-danger-text);\n }\n\n /* A see-through pill for a chip on a coloured card (the blue hero): white at a low opacity, with white\n text, like the License Server's hero chips. */\n :host([translucent]) .pill {\n background: rgb(255 255 255 / 0.18);\n color: var(--st-color-on-solid);\n }\n\n .dot {\n width: 6px;\n height: 6px;\n border-radius: var(--st-radius-circle);\n background: currentColor;\n flex: none;\n }\n\n :host(:not([dot])) .dot {\n display: none;\n }\n `;\n\n /** Colour treatment: a soft tint of the matching theme token. */\n @property({ type: String, reflect: true })\n tone: 'neutral' | 'accent' | 'success' | 'warning' | 'danger' = 'neutral';\n\n /** `sm` for dense lists and table cells. */\n @property({ type: String, reflect: true })\n size: 'md' | 'sm' = 'md';\n\n /** A see-through white pill with white text, for a chip on a coloured card. */\n @property({ type: Boolean, reflect: true })\n translucent = false;\n\n /** Shows a leading dot in the chip's text colour. */\n @property({ type: Boolean, reflect: true })\n dot = false;\n\n render() {\n return html`<span class=\"pill\" part=\"pill\"><span class=\"dot\" part=\"dot\" aria-hidden=\"true\"></span><slot></slot></span>`;\n }\n}\n"],"mappings":";;;;;;;;AAAA,SAAS,YAAY,KAAK,YAAY;AACtC,SAAS,eAAe,gBAAgB;AAejC,IAAM,OAAN,cAAmB,WAAW;AAAA,EAA9B;AAAA;AAuEL,gBAAgE;AAIhE,gBAAoB;AAIpB,uBAAc;AAId,eAAM;AAAA;AAAA,EAEN,SAAS;AACP,WAAO;AAAA,EACT;AACF;AAxFa,KACJ,SAAS;AAAA,MACZ,gBAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqEpB;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAtE9B,KAuEX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GA1E9B,KA2EX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GA9E/B,KA+EX;AAIA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,SAAS,KAAK,CAAC;AAAA,GAlF/B,KAmFX;AAnFW,OAAN;AAAA,EADN,cAAc,SAAS;AAAA,GACX;","names":[]}
|
package/dist/index.js
CHANGED