@maggioli-design-system/mds-accordion-timer-item 3.6.0 → 3.6.2

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 (69) hide show
  1. package/dist/cjs/{index-502e5cdb.js → index-3f08e534.js} +60 -23
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/mds-accordion-timer-item.cjs.entry.js +38 -38
  4. package/dist/cjs/mds-accordion-timer-item.cjs.js +2 -2
  5. package/dist/collection/collection-manifest.json +1 -1
  6. package/dist/collection/common/aria.js +18 -18
  7. package/dist/collection/common/keyboard-manager.js +38 -38
  8. package/dist/collection/common/unit.js +7 -7
  9. package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.css +3 -0
  10. package/dist/collection/components/mds-accordion-timer-item/mds-accordion-timer-item.js +205 -205
  11. package/dist/collection/components/mds-accordion-timer-item/test/mds-accordion-timer-item.e2e.js +7 -7
  12. package/dist/collection/components/mds-accordion-timer-item/test/mds-accordion-timer-item.stories.js +27 -27
  13. package/dist/collection/dictionary/autocomplete.js +56 -56
  14. package/dist/collection/dictionary/button.js +19 -19
  15. package/dist/collection/dictionary/color.js +14 -14
  16. package/dist/collection/dictionary/floating-ui.js +14 -14
  17. package/dist/collection/dictionary/input.js +31 -15
  18. package/dist/collection/dictionary/loading.js +2 -2
  19. package/dist/collection/dictionary/typography.js +46 -46
  20. package/dist/collection/dictionary/variant.js +54 -54
  21. package/dist/collection/fixtures/cities.js +107 -107
  22. package/dist/components/mds-accordion-timer-item.d.ts +2 -2
  23. package/dist/components/mds-accordion-timer-item.js +57 -57
  24. package/dist/documentation.json +2 -2
  25. package/dist/esm/{index-b42ce9a6.js → index-f19cd1cd.js} +60 -23
  26. package/dist/esm/loader.js +2 -2
  27. package/dist/esm/mds-accordion-timer-item.entry.js +38 -38
  28. package/dist/esm/mds-accordion-timer-item.js +3 -3
  29. package/dist/esm-es5/index-f19cd1cd.js +1 -0
  30. package/dist/esm-es5/loader.js +1 -1
  31. package/dist/esm-es5/mds-accordion-timer-item.entry.js +1 -1
  32. package/dist/esm-es5/mds-accordion-timer-item.js +1 -1
  33. package/dist/mds-accordion-timer-item/mds-accordion-timer-item.esm.js +1 -1
  34. package/dist/mds-accordion-timer-item/mds-accordion-timer-item.js +15 -15
  35. package/dist/mds-accordion-timer-item/p-1e2aba26.entry.js +1 -0
  36. package/dist/mds-accordion-timer-item/p-45efdd90.system.entry.js +1 -0
  37. package/dist/mds-accordion-timer-item/p-477aad5a.system.js +2 -0
  38. package/dist/mds-accordion-timer-item/{p-72dfa3ca.system.js → p-651ad9a5.system.js} +1 -1
  39. package/dist/mds-accordion-timer-item/p-a71f8ebc.js +2 -0
  40. package/dist/stats.json +30 -30
  41. package/dist/types/common/keyboard-manager.d.ts +9 -9
  42. package/dist/types/components/mds-accordion-timer-item/mds-accordion-timer-item.d.ts +40 -40
  43. package/dist/types/components/mds-accordion-timer-item/meta/event-detail.d.ts +2 -2
  44. package/dist/types/components/mds-accordion-timer-item/test/mds-accordion-timer-item.stories.d.ts +36 -36
  45. package/dist/types/dictionary/input.d.ts +2 -1
  46. package/dist/types/interface/input-value.d.ts +1 -1
  47. package/dist/types/stencil-public-runtime.d.ts +8 -0
  48. package/documentation.json +14 -4
  49. package/package.json +5 -5
  50. package/src/components/mds-accordion-timer-item/mds-accordion-timer-item.css +5 -5
  51. package/src/dictionary/input.ts +18 -0
  52. package/src/fixtures/icons.json +3 -0
  53. package/src/fixtures/iconsauce.json +3 -0
  54. package/www/build/mds-accordion-timer-item.esm.js +1 -1
  55. package/www/build/mds-accordion-timer-item.js +15 -15
  56. package/www/build/p-1e2aba26.entry.js +1 -0
  57. package/www/build/p-45efdd90.system.entry.js +1 -0
  58. package/www/build/p-477aad5a.system.js +2 -0
  59. package/www/build/{p-72dfa3ca.system.js → p-651ad9a5.system.js} +1 -1
  60. package/www/build/p-a71f8ebc.js +2 -0
  61. package/dist/esm-es5/index-b42ce9a6.js +0 -1
  62. package/dist/mds-accordion-timer-item/p-5e9bd30c.system.js +0 -2
  63. package/dist/mds-accordion-timer-item/p-d212a845.entry.js +0 -1
  64. package/dist/mds-accordion-timer-item/p-e969bc33.js +0 -2
  65. package/dist/mds-accordion-timer-item/p-f866a0a2.system.entry.js +0 -1
  66. package/www/build/p-5e9bd30c.system.js +0 -2
  67. package/www/build/p-d212a845.entry.js +0 -1
  68. package/www/build/p-e969bc33.js +0 -2
  69. package/www/build/p-f866a0a2.system.entry.js +0 -1
@@ -49,6 +49,13 @@ const uniqueTime = (key, measureText) => {
49
49
  }
50
50
  };
51
51
  const HYDRATED_CSS = '{visibility:hidden}[hydrated]{visibility:inherit}';
52
+ /**
53
+ * Constant for styles to be globally applied to `slot-fb` elements for pseudo-slot behavior.
54
+ *
55
+ * Two cascading rules must be used instead of a `:not()` selector due to Stencil browser
56
+ * support as of Stencil v4.
57
+ */
58
+ const SLOT_FB_CSS = 'slot-fb{display:contents}slot-fb[hidden]{display:none}';
52
59
  /**
53
60
  * Default style mode id
54
61
  */
@@ -286,6 +293,10 @@ const addStyle = (styleContainerNode, cmpMeta, mode) => {
286
293
  }
287
294
  styleContainerNode.insertBefore(styleElm, styleContainerNode.querySelector('link'));
288
295
  }
296
+ // Add styles for `slot-fb` elements if we're using slots outside the Shadow DOM
297
+ if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
298
+ styleElm.innerHTML += SLOT_FB_CSS;
299
+ }
289
300
  if (appliedStyles) {
290
301
  appliedStyles.add(scopeId);
291
302
  }
@@ -417,7 +428,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
417
428
  elm[memberName] = newValue;
418
429
  }
419
430
  }
420
- catch (e) { }
431
+ catch (e) {
432
+ /**
433
+ * in case someone tries to set a read-only property, e.g. "namespaceURI", we just ignore it
434
+ */
435
+ }
421
436
  }
422
437
  if (newValue == null || newValue === false) {
423
438
  if (newValue !== false || elm.getAttribute(memberName) === '') {
@@ -436,6 +451,11 @@ const setAccessor = (elm, memberName, oldValue, newValue, isSvg, flags) => {
436
451
  }
437
452
  };
438
453
  const parseClassListRegex = /\s/;
454
+ /**
455
+ * Parsed a string of classnames into an array
456
+ * @param value className string, e.g. "foo bar baz"
457
+ * @returns list of classes, e.g. ["foo", "bar", "baz"]
458
+ */
439
459
  const parseClassList = (value) => (!value ? [] : value.split(parseClassListRegex));
440
460
  const CAPTURE_EVENT_SUFFIX = 'Capture';
441
461
  const CAPTURE_EVENT_REGEX = new RegExp(CAPTURE_EVENT_SUFFIX + '$');
@@ -1117,10 +1137,10 @@ const setValue = (ref, propName, newVal, cmpMeta) => {
1117
1137
  */
1118
1138
  const proxyComponent = (Cstr, cmpMeta, flags) => {
1119
1139
  var _a;
1140
+ const prototype = Cstr.prototype;
1120
1141
  if (cmpMeta.$members$) {
1121
1142
  // It's better to have a const than two Object.entries()
1122
1143
  const members = Object.entries(cmpMeta.$members$);
1123
- const prototype = Cstr.prototype;
1124
1144
  members.map(([memberName, [memberFlags]]) => {
1125
1145
  if ((memberFlags & 31 /* MEMBER_FLAGS.Prop */ ||
1126
1146
  ((flags & 2 /* PROXY_FLAGS.proxyState */) && memberFlags & 32 /* MEMBER_FLAGS.State */))) {
@@ -1143,6 +1163,7 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1143
1163
  const attrNameToPropName = new Map();
1144
1164
  prototype.attributeChangedCallback = function (attrName, oldValue, newValue) {
1145
1165
  plt.jmp(() => {
1166
+ var _a;
1146
1167
  const propName = attrNameToPropName.get(attrName);
1147
1168
  // In a web component lifecycle the attributeChangedCallback runs prior to connectedCallback
1148
1169
  // in the case where an attribute was set inline.
@@ -1198,11 +1219,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1198
1219
  // 1. The instance is ready
1199
1220
  // 2. The watchers are ready
1200
1221
  // 3. The value has changed
1201
- if (!(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1222
+ if (flags &&
1223
+ !(flags & 8 /* HOST_FLAGS.isConstructingInstance */) &&
1202
1224
  flags & 128 /* HOST_FLAGS.isWatchReady */ &&
1203
1225
  newValue !== oldValue) {
1204
1226
  const instance = hostRef.$lazyInstance$ ;
1205
- const entry = cmpMeta.$watchers$[attrName];
1227
+ const entry = (_a = cmpMeta.$watchers$) === null || _a === void 0 ? void 0 : _a[attrName];
1206
1228
  entry === null || entry === void 0 ? void 0 : entry.forEach((callbackName) => {
1207
1229
  if (instance[callbackName] != null) {
1208
1230
  instance[callbackName].call(instance, newValue, oldValue, attrName);
@@ -1224,10 +1246,11 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
1224
1246
  ...members
1225
1247
  .filter(([_, m]) => m[0] & 15 /* MEMBER_FLAGS.HasAttribute */)
1226
1248
  .map(([propName, m]) => {
1249
+ var _a;
1227
1250
  const attrName = m[1] || propName;
1228
1251
  attrNameToPropName.set(attrName, propName);
1229
1252
  if (m[0] & 512 /* MEMBER_FLAGS.ReflectAttr */) {
1230
- cmpMeta.$attrsToReflect$.push([propName, attrName]);
1253
+ (_a = cmpMeta.$attrsToReflect$) === null || _a === void 0 ? void 0 : _a.push([propName, attrName]);
1231
1254
  }
1232
1255
  return attrName;
1233
1256
  }),
@@ -1385,12 +1408,13 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1385
1408
  const customElements = win.customElements;
1386
1409
  const head = doc.head;
1387
1410
  const metaCharset = /*@__PURE__*/ head.querySelector('meta[charset]');
1388
- const visibilityStyle = /*@__PURE__*/ doc.createElement('style');
1411
+ const dataStyles = /*@__PURE__*/ doc.createElement('style');
1389
1412
  const deferredConnectedCallbacks = [];
1390
1413
  let appLoadFallback;
1391
1414
  let isBootstrapping = true;
1392
1415
  Object.assign(plt, options);
1393
1416
  plt.$resourcesUrl$ = new URL(options.resourcesUrl || './', doc.baseURI).href;
1417
+ let hasSlotRelocation = false;
1394
1418
  lazyBundles.map((lazyBundle) => {
1395
1419
  lazyBundle[1].map((compactMeta) => {
1396
1420
  const cmpMeta = {
@@ -1399,6 +1423,11 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1399
1423
  $members$: compactMeta[2],
1400
1424
  $listeners$: compactMeta[3],
1401
1425
  };
1426
+ // Check if we are using slots outside the shadow DOM in this component.
1427
+ // We'll use this information later to add styles for `slot-fb` elements
1428
+ if (cmpMeta.$flags$ & 4 /* CMP_FLAGS.hasSlotRelocation */) {
1429
+ hasSlotRelocation = true;
1430
+ }
1402
1431
  {
1403
1432
  cmpMeta.$members$ = compactMeta[2];
1404
1433
  }
@@ -1452,15 +1481,23 @@ const bootstrapLazy = (lazyBundles, options = {}) => {
1452
1481
  }
1453
1482
  });
1454
1483
  });
1484
+ // Add styles for `slot-fb` elements if any of our components are using slots outside the Shadow DOM
1485
+ if (hasSlotRelocation) {
1486
+ dataStyles.innerHTML += SLOT_FB_CSS;
1487
+ }
1488
+ // Add hydration styles
1455
1489
  {
1456
- visibilityStyle.innerHTML = cmpTags + HYDRATED_CSS;
1457
- visibilityStyle.setAttribute('data-styles', '');
1490
+ dataStyles.innerHTML += cmpTags + HYDRATED_CSS;
1491
+ }
1492
+ // If we have styles, add them to the DOM
1493
+ if (dataStyles.innerHTML.length) {
1494
+ dataStyles.setAttribute('data-styles', '');
1495
+ head.insertBefore(dataStyles, metaCharset ? metaCharset.nextSibling : head.firstChild);
1458
1496
  // Apply CSP nonce to the style tag if it exists
1459
1497
  const nonce = (_a = plt.$nonce$) !== null && _a !== void 0 ? _a : queryNonceMetaTagContent(doc);
1460
1498
  if (nonce != null) {
1461
- visibilityStyle.setAttribute('nonce', nonce);
1499
+ dataStyles.setAttribute('nonce', nonce);
1462
1500
  }
1463
- head.insertBefore(visibilityStyle, metaCharset ? metaCharset.nextSibling : head.firstChild);
1464
1501
  }
1465
1502
  // Process deferred connectedCallbacks now all components have been registered
1466
1503
  isBootstrapping = false;
@@ -1538,19 +1575,19 @@ const loadModule = (cmpMeta, hostRef, hmrVersionId) => {
1538
1575
  return module[exportName];
1539
1576
  }
1540
1577
 
1541
- if (!hmrVersionId || !BUILD.hotModuleReplacement) {
1542
- const processMod = importedModule => {
1543
- cmpModules.set(bundleId, importedModule);
1544
- return importedModule[exportName];
1545
- }
1546
- switch(bundleId) {
1547
-
1548
- case 'mds-accordion-timer-item.cjs':
1549
- return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1550
- /* webpackMode: "lazy" */
1551
- './mds-accordion-timer-item.cjs.entry.js')); }).then(processMod, consoleError);
1578
+ if (!hmrVersionId || !BUILD.hotModuleReplacement) {
1579
+ const processMod = importedModule => {
1580
+ cmpModules.set(bundleId, importedModule);
1581
+ return importedModule[exportName];
1582
+ }
1583
+ switch(bundleId) {
1584
+
1585
+ case 'mds-accordion-timer-item.cjs':
1586
+ return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1587
+ /* webpackMode: "lazy" */
1588
+ './mds-accordion-timer-item.cjs.entry.js')); }).then(processMod, consoleError);
1589
+ }
1552
1590
  }
1553
- }
1554
1591
  return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
1555
1592
  /* @vite-ignore */
1556
1593
  /* webpackInclude: /\.entry\.js$/ */
@@ -1625,7 +1662,7 @@ const flush = () => {
1625
1662
  }
1626
1663
  }
1627
1664
  };
1628
- const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
1665
+ const nextTick = (cb) => promiseResolve().then(cb);
1629
1666
  const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
1630
1667
 
1631
1668
  exports.Host = Host;
@@ -2,7 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-502e5cdb.js');
5
+ const index = require('./index-3f08e534.js');
6
6
 
7
7
  const defineCustomElements = (win, options) => {
8
8
  if (typeof window === 'undefined') return undefined;
@@ -2,47 +2,47 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-502e5cdb.js');
5
+ const index = require('./index-3f08e534.js');
6
6
 
7
- const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@tailwind components; .focus-bounce{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.focus-bounce--focused,.focus-bounce:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-accordion-timer-item-progress-bar-color:var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));--mds-accordion-timer-item-progress-bar-background:var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));--mds-accordion-timer-item-progress-bar-thickness:var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 500ms);padding-top:1rem;padding-bottom:1rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));display:grid;position:relative}.row{gap:1rem;display:-ms-flexbox;display:flex}.accordion{display:grid}.progress-bar{--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color);--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background);--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness);-ms-flex-negative:0;flex-shrink:0}.action{border-radius:0.75rem;background-color:transparent;border:0;cursor:pointer;padding:0;text-align:left}:host([selected]) .action{cursor:auto}.contents{gap:1rem;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);display:grid;grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--mds-accordion-timer-item-duration);transition-duration:var(--mds-accordion-timer-item-duration);-webkit-transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding, -ms-grid-rows opacity padding}.contents-expander{min-height:0}:host([selected]) .contents{padding-top:1rem;opacity:1;grid-template-rows:1fr}";
7
+ const mdsAccordionTimerItemCss = "@-webkit-keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@keyframes focus-bounce{0%,75%,100%{outline-offset:var(--magma-outline-focus-offset)}50%{outline-offset:var(--magma-outline-blur-offset)}}@tailwind components; .focus-bounce{-webkit-animation-duration:var(--magma-outline-animation-duration, 1s);animation-duration:var(--magma-outline-animation-duration, 1s);-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:focus-bounce;animation-name:focus-bounce;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-animation-timing-function:cubic-bezier(0, 0, 0.2, 1);animation-timing-function:cubic-bezier(0, 0, 0.2, 1);outline:var(--magma-outline-blur);-webkit-transition-duration:200ms;transition-duration:200ms;-webkit-transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, outline, outline-offset, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform;transition-property:background-color, border-color, box-shadow, color, fill, outline, outline-offset, transform, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}.focus-bounce--focused,.focus-bounce:focus-visible{--magma-outline-blur:var(--magma-outline-focus);-webkit-animation-play-state:running;animation-play-state:running}.fixed{position:fixed}.absolute{position:absolute}.contents{display:contents}.border{border-width:1px}.text{font-size:1rem}.shadow{--tw-shadow:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);-webkit-box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}:host{--mds-accordion-timer-item-progress-bar-color:var(--mds-accordion-timer-progress-bar-color, rgb(var(--tone-neutral-03)));--mds-accordion-timer-item-progress-bar-background:var(--mds-accordion-timer-progress-bar-background, rgb(var(--tone-neutral-08)));--mds-accordion-timer-item-progress-bar-thickness:var(--mds-accordion-timer-progress-bar-thickness, 0.25rem);--mds-accordion-timer-item-duration:var(--mds-accordion-timer-duration, 500ms);padding-top:1rem;padding-bottom:1rem;-webkit-transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, color, fill, height, margin, opacity, padding, width, -webkit-box-shadow, -webkit-transform;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width;transition-property:background-color, border-color, box-shadow, color, fill, height, margin, opacity, padding, transform, width, -webkit-box-shadow, -webkit-transform;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:500ms;transition-duration:500ms;-webkit-transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1);color:var(--mds-accordion-timer-item-color, rgb(var(--tone-neutral-02)));display:grid;position:relative}.row{gap:1rem;display:-ms-flexbox;display:flex}.accordion{display:grid}.progress-bar{--mds-progress-color:var(--mds-accordion-timer-item-progress-bar-color);--mds-progress-background:var(--mds-accordion-timer-item-progress-bar-background);--mds-progress-thickness:var(--mds-accordion-timer-item-progress-bar-thickness);-ms-flex-negative:0;flex-shrink:0}.action{border-radius:0.75rem;background-color:transparent;border:0;cursor:pointer;padding:0;text-align:left}:host([selected]) .action{cursor:auto}.contents{gap:1rem;-webkit-transition-timing-function:cubic-bezier(1, 0, 0, 1);transition-timing-function:cubic-bezier(1, 0, 0, 1);display:grid;grid-template-rows:0fr;min-height:0;opacity:0;overflow:hidden;padding-top:0;-webkit-transition-duration:var(--mds-accordion-timer-item-duration);transition-duration:var(--mds-accordion-timer-item-duration);-webkit-transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding;transition-property:grid-template-rows opacity padding, -ms-grid-rows opacity padding}.contents-expander{min-height:0}:host([selected]) .contents{padding-top:1rem;opacity:1;grid-template-rows:1fr}";
8
8
 
9
9
  const MdsAccordionTimerItem = class {
10
- constructor(hostRef) {
11
- index.registerInstance(this, hostRef);
12
- this.clickSelectEvent = index.createEvent(this, "mdsAccordionTimerItemClickSelect", 7);
13
- this.selectedMouseEnterEvent = index.createEvent(this, "mdsAccordionTimerItemMouseEnterSelect", 7);
14
- this.selectedMouseLeaveEvent = index.createEvent(this, "mdsAccordionTimerItemMouseLeaveSelect", 7);
15
- /**
16
- * Event throws only once the element is active,
17
- * to fire it again it need to be a different item
18
- */
19
- this.toggle = () => {
20
- this.selected = !this.selected;
21
- this.progress = 0;
22
- if (this.selected) {
23
- this.clickSelectEvent.emit({ selected: this.selected, uuid: this.uuid });
24
- }
25
- };
26
- this.mouseEnter = () => {
27
- if (this.selected) {
28
- this.selectedMouseEnterEvent.emit({ selected: this.selected, uuid: this.uuid });
29
- }
30
- };
31
- this.mouseLeave = () => {
32
- if (this.selected) {
33
- this.selectedMouseLeaveEvent.emit({ selected: this.selected, uuid: this.uuid });
34
- }
35
- };
36
- this.typography = 'h5';
37
- this.selected = false;
38
- this.description = undefined;
39
- this.progress = 0;
40
- this.uuid = 0;
41
- }
42
- render() {
43
- var _a;
44
- return (index.h(index.Host, { onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { class: "row" }, index.h("mds-progress", { class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical" }), index.h("div", { class: "accordion" }, index.h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { typography: this.typography }, this.description)), index.h("div", { class: "contents", id: "contents" }, index.h("div", { class: "contents-expander" }, index.h("slot", null)))))));
45
- }
10
+ constructor(hostRef) {
11
+ index.registerInstance(this, hostRef);
12
+ this.clickSelectEvent = index.createEvent(this, "mdsAccordionTimerItemClickSelect", 7);
13
+ this.selectedMouseEnterEvent = index.createEvent(this, "mdsAccordionTimerItemMouseEnterSelect", 7);
14
+ this.selectedMouseLeaveEvent = index.createEvent(this, "mdsAccordionTimerItemMouseLeaveSelect", 7);
15
+ /**
16
+ * Event throws only once the element is active,
17
+ * to fire it again it need to be a different item
18
+ */
19
+ this.toggle = () => {
20
+ this.selected = !this.selected;
21
+ this.progress = 0;
22
+ if (this.selected) {
23
+ this.clickSelectEvent.emit({ selected: this.selected, uuid: this.uuid });
24
+ }
25
+ };
26
+ this.mouseEnter = () => {
27
+ if (this.selected) {
28
+ this.selectedMouseEnterEvent.emit({ selected: this.selected, uuid: this.uuid });
29
+ }
30
+ };
31
+ this.mouseLeave = () => {
32
+ if (this.selected) {
33
+ this.selectedMouseLeaveEvent.emit({ selected: this.selected, uuid: this.uuid });
34
+ }
35
+ };
36
+ this.typography = 'h5';
37
+ this.selected = false;
38
+ this.description = undefined;
39
+ this.progress = 0;
40
+ this.uuid = 0;
41
+ }
42
+ render() {
43
+ var _a;
44
+ return (index.h(index.Host, { onMouseEnter: this.mouseEnter, onMouseLeave: this.mouseLeave }, index.h("div", { class: "row" }, index.h("mds-progress", { class: "progress-bar", progress: Number((_a = this.progress) === null || _a === void 0 ? void 0 : _a.toFixed(2)), direction: "vertical" }), index.h("div", { class: "accordion" }, index.h("button", { "aria-controls": "contents", "aria-expanded": this.selected ? 'true' : 'false', class: "action focus-bounce", id: "action", onClick: this.toggle, role: "button", tabindex: "0" }, index.h("mds-text", { typography: this.typography }, this.description)), index.h("div", { class: "contents", id: "contents" }, index.h("div", { class: "contents-expander" }, index.h("slot", null)))))));
45
+ }
46
46
  };
47
47
  MdsAccordionTimerItem.style = mdsAccordionTimerItemCss;
48
48
 
@@ -2,10 +2,10 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
- const index = require('./index-502e5cdb.js');
5
+ const index = require('./index-3f08e534.js');
6
6
 
7
7
  /*
8
- Stencil Client Patch Browser v4.7.1 | MIT Licensed | https://stenciljs.com
8
+ Stencil Client Patch Browser v4.8.0 | MIT Licensed | https://stenciljs.com
9
9
  */
10
10
  const patchBrowser = () => {
11
11
  const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('mds-accordion-timer-item.cjs.js', document.baseURI).href));
@@ -4,7 +4,7 @@
4
4
  ],
5
5
  "compiler": {
6
6
  "name": "@stencil/core",
7
- "version": "4.7.1",
7
+ "version": "4.8.0",
8
8
  "typescriptVersion": "5.2.2"
9
9
  },
10
10
  "collections": [],
@@ -1,29 +1,29 @@
1
1
  const hash = (s) => {
2
- let i, h;
3
- for (i = 0, h = 0; i < s.length; i++) {
4
- h = Math.imul(31, h) + s.charCodeAt(i) | 0;
5
- }
6
- return h.toString();
2
+ let i, h;
3
+ for (i = 0, h = 0; i < s.length; i++) {
4
+ h = Math.imul(31, h) + s.charCodeAt(i) | 0;
5
+ }
6
+ return h.toString();
7
7
  };
8
8
  const randomInt = (max) => Math.floor(Math.random() * max);
9
9
  const unslugName = (name) => {
10
- var _a, _b, _c;
11
- return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
10
+ var _a, _b, _c;
11
+ return (_c = (_b = (_a = name.split('/')) === null || _a === void 0 ? void 0 : _a.slice(-1).pop()) === null || _b === void 0 ? void 0 : _b.replace(/-/g, ' ')) !== null && _c !== void 0 ? _c : name;
12
12
  };
13
13
  const setAttributeIfEmpty = (element, attribute, value) => {
14
- var _a;
15
- if (element.hasAttribute(attribute)) {
16
- return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
17
- }
18
- element.setAttribute(attribute, value);
19
- return value;
14
+ var _a;
15
+ if (element.hasAttribute(attribute)) {
16
+ return (_a = element.getAttribute(attribute)) !== null && _a !== void 0 ? _a : '';
17
+ }
18
+ element.setAttribute(attribute, value);
19
+ return value;
20
20
  };
21
21
  const hashValue = (value) => `${value}-${hash(value)}`;
22
22
  const hashRandomValue = (value) => {
23
- const randomValue = randomInt(1000000);
24
- if (value) {
25
- return `${value}-${hash(randomValue.toString())}`;
26
- }
27
- return hash(randomValue.toString());
23
+ const randomValue = randomInt(1000000);
24
+ if (value) {
25
+ return `${value}-${hash(randomValue.toString())}`;
26
+ }
27
+ return hash(randomValue.toString());
28
28
  };
29
29
  export { unslugName, setAttributeIfEmpty, hashRandomValue, hashValue, };
@@ -1,40 +1,40 @@
1
1
  export class KeyboardManager {
2
- constructor() {
3
- this.elements = [];
4
- this.handleClickBehaviorDispatchEvent = (event) => {
5
- if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
6
- event.target.click();
7
- }
8
- };
9
- this.handleEscapeBehaviorDispatchEvent = (event) => {
10
- if (event.code === 'Escape' && this.escapeCallback) {
11
- this.escapeCallback();
12
- }
13
- };
14
- this.addElement = (el, name = 'element') => {
15
- this.elements[name] = el;
16
- };
17
- this.attachClickBehavior = (name = 'element') => {
18
- if (this.elements[name]) {
19
- this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
20
- }
21
- };
22
- this.detachClickBehavior = (name = 'element') => {
23
- if (this.elements[name]) {
24
- this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
25
- }
26
- };
27
- this.attachEscapeBehavior = (callBack) => {
28
- this.escapeCallback = callBack;
29
- if (window !== undefined) {
30
- window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
31
- }
32
- };
33
- this.detachEscapeBehavior = () => {
34
- this.escapeCallback = () => { return; };
35
- if (window !== undefined) {
36
- window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
37
- }
38
- };
39
- }
2
+ constructor() {
3
+ this.elements = [];
4
+ this.handleClickBehaviorDispatchEvent = (event) => {
5
+ if (event.code === 'Space' || event.code === 'Enter' || event.code === 'NumpadEnter') {
6
+ event.target.click();
7
+ }
8
+ };
9
+ this.handleEscapeBehaviorDispatchEvent = (event) => {
10
+ if (event.code === 'Escape' && this.escapeCallback) {
11
+ this.escapeCallback();
12
+ }
13
+ };
14
+ this.addElement = (el, name = 'element') => {
15
+ this.elements[name] = el;
16
+ };
17
+ this.attachClickBehavior = (name = 'element') => {
18
+ if (this.elements[name]) {
19
+ this.elements[name].addEventListener('keydown', this.handleClickBehaviorDispatchEvent);
20
+ }
21
+ };
22
+ this.detachClickBehavior = (name = 'element') => {
23
+ if (this.elements[name]) {
24
+ this.elements[name].removeEventListener('keydown', this.handleClickBehaviorDispatchEvent);
25
+ }
26
+ };
27
+ this.attachEscapeBehavior = (callBack) => {
28
+ this.escapeCallback = callBack;
29
+ if (window !== undefined) {
30
+ window.addEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
31
+ }
32
+ };
33
+ this.detachEscapeBehavior = () => {
34
+ this.escapeCallback = () => { return; };
35
+ if (window !== undefined) {
36
+ window.removeEventListener('keydown', this.handleEscapeBehaviorDispatchEvent.bind(this));
37
+ }
38
+ };
39
+ }
40
40
  }
@@ -1,10 +1,10 @@
1
1
  const cssDurationToMilliseconds = (duration, defaultValue = 1000) => {
2
- if (duration.includes('s')) {
3
- return Number(duration.replace('s', '')) * 1000;
4
- }
5
- if (duration.includes('ms')) {
6
- return Number(duration.replace('s', ''));
7
- }
8
- return defaultValue;
2
+ if (duration.includes('s')) {
3
+ return Number(duration.replace('s', '')) * 1000;
4
+ }
5
+ if (duration.includes('ms')) {
6
+ return Number(duration.replace('s', ''));
7
+ }
8
+ return defaultValue;
9
9
  };
10
10
  export { cssDurationToMilliseconds, };
@@ -42,6 +42,9 @@
42
42
  .border {
43
43
  border-width: 1px;
44
44
  }
45
+ .text {
46
+ font-size: 1rem;
47
+ }
45
48
  .shadow {
46
49
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
47
50
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);