@jsekulowicz/ds-components 0.8.0 → 0.9.0

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 (49) hide show
  1. package/custom-elements.json +426 -4
  2. package/dist/atoms/icon/icon.js +1 -1
  3. package/dist/atoms/icon/icon.styles.d.ts.map +1 -1
  4. package/dist/atoms/icon/icon.styles.js +10 -6
  5. package/dist/atoms/icon/icon.styles.js.map +1 -1
  6. package/dist/atoms/skeleton/define.d.ts +7 -0
  7. package/dist/atoms/skeleton/define.d.ts.map +1 -0
  8. package/dist/atoms/skeleton/define.js +5 -0
  9. package/dist/atoms/skeleton/define.js.map +1 -0
  10. package/dist/atoms/skeleton/index.d.ts +2 -0
  11. package/dist/atoms/skeleton/index.d.ts.map +1 -0
  12. package/dist/atoms/skeleton/index.js +2 -0
  13. package/dist/atoms/skeleton/index.js.map +1 -0
  14. package/dist/atoms/skeleton/skeleton.d.ts +20 -0
  15. package/dist/atoms/skeleton/skeleton.d.ts.map +1 -0
  16. package/dist/atoms/skeleton/skeleton.js +78 -0
  17. package/dist/atoms/skeleton/skeleton.js.map +1 -0
  18. package/dist/atoms/skeleton/skeleton.styles.d.ts +2 -0
  19. package/dist/atoms/skeleton/skeleton.styles.d.ts.map +1 -0
  20. package/dist/atoms/skeleton/skeleton.styles.js +74 -0
  21. package/dist/atoms/skeleton/skeleton.styles.js.map +1 -0
  22. package/dist/atoms/table/define.d.ts +1 -0
  23. package/dist/atoms/table/define.d.ts.map +1 -1
  24. package/dist/atoms/table/define.js +1 -0
  25. package/dist/atoms/table/define.js.map +1 -1
  26. package/dist/atoms/table/table-skeleton.d.ts +3 -0
  27. package/dist/atoms/table/table-skeleton.d.ts.map +1 -0
  28. package/dist/atoms/table/table-skeleton.js +44 -0
  29. package/dist/atoms/table/table-skeleton.js.map +1 -0
  30. package/dist/atoms/table/table.d.ts +6 -0
  31. package/dist/atoms/table/table.d.ts.map +1 -1
  32. package/dist/atoms/table/table.js +77 -25
  33. package/dist/atoms/table/table.js.map +1 -1
  34. package/dist/atoms/table/table.styles.d.ts.map +1 -1
  35. package/dist/atoms/table/table.styles.js +25 -0
  36. package/dist/atoms/table/table.styles.js.map +1 -1
  37. package/dist/css/utilities/layout.css +33 -0
  38. package/dist/css/utilities/spacing.css +137 -0
  39. package/dist/css/utilities/typography.css +30 -0
  40. package/dist/css/utilities.css +3 -0
  41. package/dist/define.d.ts +1 -0
  42. package/dist/define.d.ts.map +1 -1
  43. package/dist/define.js +1 -0
  44. package/dist/define.js.map +1 -1
  45. package/dist/index.d.ts +1 -0
  46. package/dist/index.d.ts.map +1 -1
  47. package/dist/index.js +1 -0
  48. package/dist/index.js.map +1 -1
  49. package/package.json +17 -4
@@ -77,6 +77,22 @@
77
77
  "module": "./atoms/badge/index.js"
78
78
  }
79
79
  },
80
+ {
81
+ "kind": "js",
82
+ "name": "DsSkeleton",
83
+ "declaration": {
84
+ "name": "DsSkeleton",
85
+ "module": "./atoms/skeleton/index.js"
86
+ }
87
+ },
88
+ {
89
+ "kind": "js",
90
+ "name": "SkeletonVariant",
91
+ "declaration": {
92
+ "name": "SkeletonVariant",
93
+ "module": "./atoms/skeleton/index.js"
94
+ }
95
+ },
80
96
  {
81
97
  "kind": "js",
82
98
  "name": "DsDivider",
@@ -2457,7 +2473,7 @@
2457
2473
  {
2458
2474
  "kind": "variable",
2459
2475
  "name": "iconStyles",
2460
- "default": "css` :host { display: inline-flex; width: 1em; height: 1em; color: currentColor; vertical-align: middle; flex-shrink: 0; } :host([size='sm']) { width: 0.875em; height: 0.875em; } :host([size='lg']) { width: 1.25em; height: 1.25em; } :host([size='xl']) { width: 1.25rem; height: 1.25rem; } :host([size='2xl']) { width: 1.5rem; height: 1.5rem; } :host([size='3xl']) { width: 1.75rem; height: 1.75rem; } svg { width: 100%; height: 100%; display: block; } `"
2476
+ "default": "css` :host { display: inline-flex; width: 1.125rem; height: 1.125rem; color: currentColor; vertical-align: middle; flex-shrink: 0; } :host([size='sm']) { width: 0.875rem; height: 0.875rem; } :host([size='md']) { width: 1rem; height: 1rem; } :host([size='lg']) { width: 1.125rem; height: 1.125rem; } :host([size='xl']) { width: 1.25rem; height: 1.25rem; } :host([size='2xl']) { width: 1.5rem; height: 1.5rem; } :host([size='3xl']) { width: 1.75rem; height: 1.75rem; } svg { width: 100%; height: 100%; display: block; } `"
2461
2477
  }
2462
2478
  ],
2463
2479
  "exports": [
@@ -2548,7 +2564,7 @@
2548
2564
  "type": {
2549
2565
  "text": "IconSize"
2550
2566
  },
2551
- "default": "'md'",
2567
+ "default": "'lg'",
2552
2568
  "attribute": "size",
2553
2569
  "reflects": true
2554
2570
  },
@@ -2582,7 +2598,7 @@
2582
2598
  "type": {
2583
2599
  "text": "IconSize"
2584
2600
  },
2585
- "default": "'md'",
2601
+ "default": "'lg'",
2586
2602
  "fieldName": "size"
2587
2603
  }
2588
2604
  ],
@@ -6164,6 +6180,245 @@
6164
6180
  }
6165
6181
  ]
6166
6182
  },
6183
+ {
6184
+ "kind": "javascript-module",
6185
+ "path": "src/atoms/skeleton/define.ts",
6186
+ "declarations": [],
6187
+ "exports": [
6188
+ {
6189
+ "kind": "custom-element-definition",
6190
+ "name": "ds-skeleton",
6191
+ "declaration": {
6192
+ "name": "DsSkeleton",
6193
+ "module": "/src/atoms/skeleton/skeleton.js"
6194
+ }
6195
+ }
6196
+ ]
6197
+ },
6198
+ {
6199
+ "kind": "javascript-module",
6200
+ "path": "src/atoms/skeleton/index.ts",
6201
+ "declarations": [],
6202
+ "exports": [
6203
+ {
6204
+ "kind": "js",
6205
+ "name": "DsSkeleton",
6206
+ "declaration": {
6207
+ "name": "DsSkeleton",
6208
+ "module": "./skeleton.js"
6209
+ }
6210
+ },
6211
+ {
6212
+ "kind": "js",
6213
+ "name": "SkeletonVariant",
6214
+ "declaration": {
6215
+ "name": "SkeletonVariant",
6216
+ "module": "./skeleton.js"
6217
+ }
6218
+ }
6219
+ ]
6220
+ },
6221
+ {
6222
+ "kind": "javascript-module",
6223
+ "path": "src/atoms/skeleton/skeleton.styles.ts",
6224
+ "declarations": [
6225
+ {
6226
+ "kind": "variable",
6227
+ "name": "skeletonStyles",
6228
+ "default": "css` :host { display: block; width: var(--ds-skeleton-width, 100%); } .stack { display: grid; gap: var(--ds-skeleton-gap, var(--ds-space-2)); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .item { display: block; width: var(--ds-skeleton-item-width, 100%); height: var(--ds-skeleton-height, 1em); border-radius: var(--ds-skeleton-radius, var(--ds-radius-xs)); background: linear-gradient( 90deg, var(--ds-color-bg-muted) 0%, var(--ds-color-bg-muted) 34%, var(--ds-color-bg-subtle) 50%, var(--ds-color-bg-muted) 66%, var(--ds-color-bg-muted) 100% ); background-size: 200% 100%; animation: ds-skeleton-shimmer var(--ds-skeleton-duration, 4s) linear infinite; } :host([variant='text']) .item { transform: translateY(0.12em); } :host([variant='rectangle']) .item { height: var(--ds-skeleton-height, 6rem); border-radius: var(--ds-skeleton-radius, var(--ds-radius-sm)); } :host([variant='circle']) { width: var(--ds-skeleton-width, 2.5rem); } :host([variant='circle']) .item { width: var(--ds-skeleton-item-width, var(--ds-skeleton-width, 2.5rem)); height: var(--ds-skeleton-height, var(--ds-skeleton-width, 2.5rem)); border-radius: 999px; } @keyframes ds-skeleton-shimmer { from { background-position: 200% 0; } to { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { .item { animation: none; background-size: 100% 100%; } } `"
6229
+ }
6230
+ ],
6231
+ "exports": [
6232
+ {
6233
+ "kind": "js",
6234
+ "name": "skeletonStyles",
6235
+ "declaration": {
6236
+ "name": "skeletonStyles",
6237
+ "module": "src/atoms/skeleton/skeleton.styles.ts"
6238
+ }
6239
+ }
6240
+ ]
6241
+ },
6242
+ {
6243
+ "kind": "javascript-module",
6244
+ "path": "src/atoms/skeleton/skeleton.ts",
6245
+ "declarations": [
6246
+ {
6247
+ "kind": "class",
6248
+ "description": "",
6249
+ "name": "DsSkeleton",
6250
+ "cssParts": [
6251
+ {
6252
+ "description": "Each generated skeleton item.",
6253
+ "name": "item"
6254
+ }
6255
+ ],
6256
+ "slots": [
6257
+ {
6258
+ "description": "Optional accessible loading text for assistive technology.",
6259
+ "name": "default"
6260
+ }
6261
+ ],
6262
+ "members": [
6263
+ {
6264
+ "kind": "field",
6265
+ "name": "variant",
6266
+ "type": {
6267
+ "text": "SkeletonVariant"
6268
+ },
6269
+ "default": "'text'",
6270
+ "attribute": "variant",
6271
+ "reflects": true
6272
+ },
6273
+ {
6274
+ "kind": "field",
6275
+ "name": "lines",
6276
+ "type": {
6277
+ "text": "number"
6278
+ },
6279
+ "default": "1",
6280
+ "attribute": "lines"
6281
+ },
6282
+ {
6283
+ "kind": "field",
6284
+ "name": "width",
6285
+ "type": {
6286
+ "text": "string | undefined"
6287
+ },
6288
+ "attribute": "width"
6289
+ },
6290
+ {
6291
+ "kind": "field",
6292
+ "name": "height",
6293
+ "type": {
6294
+ "text": "string | undefined"
6295
+ },
6296
+ "attribute": "height"
6297
+ },
6298
+ {
6299
+ "kind": "method",
6300
+ "name": "#count",
6301
+ "privacy": "private",
6302
+ "return": {
6303
+ "type": {
6304
+ "text": "number"
6305
+ }
6306
+ }
6307
+ },
6308
+ {
6309
+ "kind": "method",
6310
+ "name": "#syncHostProperty",
6311
+ "privacy": "private",
6312
+ "return": {
6313
+ "type": {
6314
+ "text": "void"
6315
+ }
6316
+ },
6317
+ "parameters": [
6318
+ {
6319
+ "name": "name",
6320
+ "type": {
6321
+ "text": "string"
6322
+ }
6323
+ },
6324
+ {
6325
+ "name": "value",
6326
+ "optional": true,
6327
+ "type": {
6328
+ "text": "string"
6329
+ }
6330
+ }
6331
+ ]
6332
+ },
6333
+ {
6334
+ "kind": "method",
6335
+ "name": "#lineWidth",
6336
+ "privacy": "private",
6337
+ "return": {
6338
+ "type": {
6339
+ "text": "string | undefined"
6340
+ }
6341
+ },
6342
+ "parameters": [
6343
+ {
6344
+ "name": "index",
6345
+ "type": {
6346
+ "text": "number"
6347
+ }
6348
+ }
6349
+ ]
6350
+ },
6351
+ {
6352
+ "kind": "method",
6353
+ "name": "#style",
6354
+ "privacy": "private",
6355
+ "return": {
6356
+ "type": {
6357
+ "text": "string"
6358
+ }
6359
+ },
6360
+ "parameters": [
6361
+ {
6362
+ "name": "index",
6363
+ "type": {
6364
+ "text": "number"
6365
+ }
6366
+ }
6367
+ ]
6368
+ }
6369
+ ],
6370
+ "attributes": [
6371
+ {
6372
+ "name": "variant",
6373
+ "type": {
6374
+ "text": "SkeletonVariant"
6375
+ },
6376
+ "default": "'text'",
6377
+ "fieldName": "variant"
6378
+ },
6379
+ {
6380
+ "name": "lines",
6381
+ "type": {
6382
+ "text": "number"
6383
+ },
6384
+ "default": "1",
6385
+ "fieldName": "lines"
6386
+ },
6387
+ {
6388
+ "name": "width",
6389
+ "type": {
6390
+ "text": "string | undefined"
6391
+ },
6392
+ "fieldName": "width"
6393
+ },
6394
+ {
6395
+ "name": "height",
6396
+ "type": {
6397
+ "text": "string | undefined"
6398
+ },
6399
+ "fieldName": "height"
6400
+ }
6401
+ ],
6402
+ "superclass": {
6403
+ "name": "DsElement",
6404
+ "package": "@jsekulowicz/ds-core"
6405
+ },
6406
+ "tagName": "ds-skeleton",
6407
+ "customElement": true,
6408
+ "summary": "Decorative placeholder for content that is still loading."
6409
+ }
6410
+ ],
6411
+ "exports": [
6412
+ {
6413
+ "kind": "js",
6414
+ "name": "DsSkeleton",
6415
+ "declaration": {
6416
+ "name": "DsSkeleton",
6417
+ "module": "src/atoms/skeleton/skeleton.ts"
6418
+ }
6419
+ }
6420
+ ]
6421
+ },
6167
6422
  {
6168
6423
  "kind": "javascript-module",
6169
6424
  "path": "src/atoms/table/define.ts",
@@ -6770,6 +7025,45 @@
6770
7025
  }
6771
7026
  ]
6772
7027
  },
7028
+ {
7029
+ "kind": "javascript-module",
7030
+ "path": "src/atoms/table/table-skeleton.ts",
7031
+ "declarations": [
7032
+ {
7033
+ "kind": "function",
7034
+ "name": "renderTableSkeleton",
7035
+ "return": {
7036
+ "type": {
7037
+ "text": "TemplateResult"
7038
+ }
7039
+ },
7040
+ "parameters": [
7041
+ {
7042
+ "name": "rowCount",
7043
+ "type": {
7044
+ "text": "number"
7045
+ }
7046
+ },
7047
+ {
7048
+ "name": "columnCount",
7049
+ "type": {
7050
+ "text": "number"
7051
+ }
7052
+ }
7053
+ ]
7054
+ }
7055
+ ],
7056
+ "exports": [
7057
+ {
7058
+ "kind": "js",
7059
+ "name": "renderTableSkeleton",
7060
+ "declaration": {
7061
+ "name": "renderTableSkeleton",
7062
+ "module": "src/atoms/table/table-skeleton.ts"
7063
+ }
7064
+ }
7065
+ ]
7066
+ },
6773
7067
  {
6774
7068
  "kind": "javascript-module",
6775
7069
  "path": "src/atoms/table/table-sort-button.styles.ts",
@@ -6910,7 +7204,7 @@
6910
7204
  {
6911
7205
  "kind": "variable",
6912
7206
  "name": "tableStyles",
6913
- "default": "css` :host { display: block; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } .toolbar { padding: var(--ds-space-3) 0; } .toolbar:empty { display: none; } .scroll { width: 100%; overflow-x: auto; border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } table { width: 100%; border-collapse: collapse; text-align: left; } caption { caption-side: top; padding: var(--ds-space-3); color: var(--ds-color-fg-muted); text-align: left; } caption:empty { display: none; padding: 0; } thead th { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border); white-space: nowrap; } tbody td { padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border-subtle); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) td { background: var(--ds-color-bg-subtle); } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } tbody tr.clickable { cursor: pointer; outline: none; } tbody tr.clickable:hover td { background: var(--ds-color-bg-muted); } tbody tr.clickable:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-color-focus); } .empty { padding: var(--ds-space-6); text-align: center; color: var(--ds-color-fg-muted); } .footer { padding: var(--ds-space-3) 0; } .footer:empty { display: none; } `"
7207
+ "default": "css` :host { display: block; width: 100%; color: var(--ds-color-fg); font-family: var(--ds-font-body); font-size: var(--ds-font-size-sm); } .toolbar { padding: var(--ds-space-3) 0; } .toolbar:empty { display: none; } .scroll { position: relative; width: 100%; overflow-x: auto; border: 1px solid var(--ds-color-border-subtle); border-radius: var(--ds-radius-md); background: var(--ds-color-bg); } table { width: 100%; border-collapse: collapse; text-align: left; } caption { caption-side: top; padding: var(--ds-space-3); color: var(--ds-color-fg-muted); text-align: left; } caption:empty { display: none; padding: 0; } thead th { background: var(--ds-color-bg-subtle); color: var(--ds-color-fg); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border); white-space: nowrap; } tbody td { padding: var(--ds-space-3); border-bottom: 1px solid var(--ds-color-border-subtle); vertical-align: middle; } tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) td { background: var(--ds-color-bg-subtle); } .align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } tbody tr.clickable { cursor: pointer; outline: none; } tbody tr.clickable:hover td { background: var(--ds-color-bg-muted); } tbody tr.clickable:focus-visible { box-shadow: inset 0 0 0 2px var(--ds-color-focus); } .skeleton-table { min-width: 32rem; } .loading { position: absolute; inset: 0; display: grid; place-items: center; min-height: 100%; background: color-mix(in srgb, var(--ds-color-bg) 78%, transparent); color: var(--ds-color-fg); pointer-events: auto; } .loading span { padding: var(--ds-space-2) var(--ds-space-3); border: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-sm); background: var(--ds-color-bg); box-shadow: var(--ds-shadow-sm, 0 1px 2px rgba(15, 23, 42, 0.12)); font-weight: var(--ds-font-weight-medium); } .empty { padding: var(--ds-space-6); text-align: center; color: var(--ds-color-fg-muted); } .footer { padding: var(--ds-space-3) 0; } .footer:empty { display: none; } `"
6914
7208
  }
6915
7209
  ],
6916
7210
  "exports": [
@@ -6976,6 +7270,10 @@
6976
7270
  {
6977
7271
  "description": "The empty-state wrapper.",
6978
7272
  "name": "empty"
7273
+ },
7274
+ {
7275
+ "description": "Loading overlay rendered when `loading` is true.",
7276
+ "name": "loading"
6979
7277
  }
6980
7278
  ],
6981
7279
  "slots": [
@@ -6995,6 +7293,10 @@
6995
7293
  "description": "Shown when `rows` is empty.",
6996
7294
  "name": "empty"
6997
7295
  },
7296
+ {
7297
+ "description": "Shown inside the loading overlay when `loading` is true.",
7298
+ "name": "loading"
7299
+ },
6998
7300
  {
6999
7301
  "description": "Per-column header override (e.g. inject a ds-table-sort-button).",
7000
7302
  "name": "header-{columnName}"
@@ -7035,6 +7337,34 @@
7035
7337
  "attribute": "clickable-rows",
7036
7338
  "reflects": true
7037
7339
  },
7340
+ {
7341
+ "kind": "field",
7342
+ "name": "loading",
7343
+ "type": {
7344
+ "text": "boolean"
7345
+ },
7346
+ "default": "false",
7347
+ "attribute": "loading",
7348
+ "reflects": true
7349
+ },
7350
+ {
7351
+ "kind": "field",
7352
+ "name": "skeletonRows",
7353
+ "type": {
7354
+ "text": "number"
7355
+ },
7356
+ "default": "5",
7357
+ "attribute": "skeleton-rows"
7358
+ },
7359
+ {
7360
+ "kind": "field",
7361
+ "name": "skeletonColumns",
7362
+ "type": {
7363
+ "text": "number"
7364
+ },
7365
+ "default": "4",
7366
+ "attribute": "skeleton-columns"
7367
+ },
7038
7368
  {
7039
7369
  "kind": "field",
7040
7370
  "name": "rowKey",
@@ -7137,6 +7467,30 @@
7137
7467
  }
7138
7468
  ]
7139
7469
  },
7470
+ {
7471
+ "kind": "method",
7472
+ "name": "#renderClickableRow",
7473
+ "privacy": "private",
7474
+ "return": {
7475
+ "type": {
7476
+ "text": "TemplateResult"
7477
+ }
7478
+ },
7479
+ "parameters": [
7480
+ {
7481
+ "name": "row",
7482
+ "type": {
7483
+ "text": "T"
7484
+ }
7485
+ },
7486
+ {
7487
+ "name": "index",
7488
+ "type": {
7489
+ "text": "number"
7490
+ }
7491
+ }
7492
+ ]
7493
+ },
7140
7494
  {
7141
7495
  "kind": "method",
7142
7496
  "name": "#renderRow",
@@ -7161,6 +7515,30 @@
7161
7515
  }
7162
7516
  ]
7163
7517
  },
7518
+ {
7519
+ "kind": "method",
7520
+ "name": "#renderCells",
7521
+ "privacy": "private",
7522
+ "return": {
7523
+ "type": {
7524
+ "text": "TemplateResult[]"
7525
+ }
7526
+ },
7527
+ "parameters": [
7528
+ {
7529
+ "name": "row",
7530
+ "type": {
7531
+ "text": "T"
7532
+ }
7533
+ },
7534
+ {
7535
+ "name": "index",
7536
+ "type": {
7537
+ "text": "number"
7538
+ }
7539
+ }
7540
+ ]
7541
+ },
7164
7542
  {
7165
7543
  "kind": "method",
7166
7544
  "name": "#renderBody",
@@ -7170,6 +7548,26 @@
7170
7548
  "text": "TemplateResult"
7171
7549
  }
7172
7550
  }
7551
+ },
7552
+ {
7553
+ "kind": "method",
7554
+ "name": "#renderLoading",
7555
+ "privacy": "private",
7556
+ "return": {
7557
+ "type": {
7558
+ "text": "TemplateResult | null"
7559
+ }
7560
+ }
7561
+ },
7562
+ {
7563
+ "kind": "method",
7564
+ "name": "#renderTable",
7565
+ "privacy": "private",
7566
+ "return": {
7567
+ "type": {
7568
+ "text": "TemplateResult"
7569
+ }
7570
+ }
7173
7571
  }
7174
7572
  ],
7175
7573
  "events": [
@@ -7187,6 +7585,30 @@
7187
7585
  "default": "false",
7188
7586
  "fieldName": "clickableRows"
7189
7587
  },
7588
+ {
7589
+ "name": "loading",
7590
+ "type": {
7591
+ "text": "boolean"
7592
+ },
7593
+ "default": "false",
7594
+ "fieldName": "loading"
7595
+ },
7596
+ {
7597
+ "name": "skeleton-rows",
7598
+ "type": {
7599
+ "text": "number"
7600
+ },
7601
+ "default": "5",
7602
+ "fieldName": "skeletonRows"
7603
+ },
7604
+ {
7605
+ "name": "skeleton-columns",
7606
+ "type": {
7607
+ "text": "number"
7608
+ },
7609
+ "default": "4",
7610
+ "fieldName": "skeletonColumns"
7611
+ },
7190
7612
  {
7191
7613
  "name": "row-key",
7192
7614
  "type": {
@@ -25,7 +25,7 @@ export function getIcon(name) {
25
25
  export class DsIcon extends DsElement {
26
26
  constructor() {
27
27
  super(...arguments);
28
- this.size = 'md';
28
+ this.size = 'lg';
29
29
  this.svg = null;
30
30
  }
31
31
  static { this.styles = [...DsElement.styles, iconStyles]; }
@@ -1 +1 @@
1
- {"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAkCtB,CAAC"}
1
+ {"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,UAAU,yBAsCtB,CAAC"}
@@ -2,19 +2,23 @@ import { css } from 'lit';
2
2
  export const iconStyles = css `
3
3
  :host {
4
4
  display: inline-flex;
5
- width: 1em;
6
- height: 1em;
5
+ width: 1.125rem;
6
+ height: 1.125rem;
7
7
  color: currentColor;
8
8
  vertical-align: middle;
9
9
  flex-shrink: 0;
10
10
  }
11
11
  :host([size='sm']) {
12
- width: 0.875em;
13
- height: 0.875em;
12
+ width: 0.875rem;
13
+ height: 0.875rem;
14
+ }
15
+ :host([size='md']) {
16
+ width: 1rem;
17
+ height: 1rem;
14
18
  }
15
19
  :host([size='lg']) {
16
- width: 1.25em;
17
- height: 1.25em;
20
+ width: 1.125rem;
21
+ height: 1.125rem;
18
22
  }
19
23
  :host([size='xl']) {
20
24
  width: 1.25rem;
@@ -1 +1 @@
1
- {"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkC5B,CAAC"}
1
+ {"version":3,"file":"icon.styles.js","sourceRoot":"","sources":["../../../src/atoms/icon/icon.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsC5B,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { DsSkeleton } from './skeleton.js';
2
+ declare global {
3
+ interface HTMLElementTagNameMap {
4
+ 'ds-skeleton': DsSkeleton;
5
+ }
6
+ }
7
+ //# sourceMappingURL=define.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"define.d.ts","sourceRoot":"","sources":["../../../src/atoms/skeleton/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAM3C,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
@@ -0,0 +1,5 @@
1
+ import { DsSkeleton } from './skeleton.js';
2
+ if (!customElements.get('ds-skeleton')) {
3
+ customElements.define('ds-skeleton', DsSkeleton);
4
+ }
5
+ //# sourceMappingURL=define.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/atoms/skeleton/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,aAAa,CAAC,EAAE,CAAC;IACvC,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,UAAU,CAAC,CAAC;AACnD,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { DsSkeleton, type SkeletonVariant } from './skeleton.js';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/atoms/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1,2 @@
1
+ export { DsSkeleton } from './skeleton.js';
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/atoms/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAwB,MAAM,eAAe,CAAC"}
@@ -0,0 +1,20 @@
1
+ import { type TemplateResult } from 'lit';
2
+ import { DsElement } from '@jsekulowicz/ds-core';
3
+ export type SkeletonVariant = 'text' | 'rectangle' | 'circle';
4
+ /**
5
+ * @tag ds-skeleton
6
+ * @summary Decorative placeholder for content that is still loading.
7
+ * @slot default - Optional accessible loading text for assistive technology.
8
+ * @csspart item - Each generated skeleton item.
9
+ */
10
+ export declare class DsSkeleton extends DsElement {
11
+ #private;
12
+ static styles: import("lit").CSSResult[];
13
+ variant: SkeletonVariant;
14
+ lines: number;
15
+ width?: string;
16
+ height?: string;
17
+ updated(): void;
18
+ render(): TemplateResult;
19
+ }
20
+ //# sourceMappingURL=skeleton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../../src/atoms/skeleton/skeleton.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAGjD,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,WAAW,GAAG,QAAQ,CAAC;AAE9D;;;;;GAKG;AACH,qBAAa,UAAW,SAAQ,SAAS;;IACvC,OAAgB,MAAM,4BAAyC;IAElC,OAAO,EAAE,eAAe,CAAU;IACnC,KAAK,SAAK;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAEnB,OAAO,IAAI,IAAI;IAoCf,MAAM,IAAI,cAAc;CAUlC"}