@swisspost/design-system-components 10.0.0-next.59 → 10.0.0-next.60

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 (152) hide show
  1. package/dist/cjs/loader.cjs.js +1 -1
  2. package/dist/cjs/{package-DzZ0YUie.js → package-ENij-plM.js} +1 -1
  3. package/dist/cjs/post-accordion_2.cjs.entry.js +1 -1
  4. package/dist/cjs/post-avatar.cjs.entry.js +1 -1
  5. package/dist/cjs/post-back-to-top.cjs.entry.js +1 -1
  6. package/dist/cjs/post-banner.cjs.entry.js +2 -2
  7. package/dist/cjs/post-breadcrumb-item_2.cjs.entry.js +1 -1
  8. package/dist/cjs/post-breadcrumbs.cjs.entry.js +1 -1
  9. package/dist/cjs/post-card-control.cjs.entry.js +1 -1
  10. package/dist/cjs/post-closebutton_13.cjs.entry.js +30 -6
  11. package/dist/cjs/post-collapsible_2.cjs.entry.js +3 -3
  12. package/dist/cjs/post-components.cjs.js +1 -1
  13. package/dist/cjs/post-footer.cjs.entry.js +1 -1
  14. package/dist/cjs/post-linkarea.cjs.entry.js +1 -1
  15. package/dist/cjs/post-pagination.cjs.entry.js +1 -1
  16. package/dist/cjs/post-popover-trigger.cjs.entry.js +1 -1
  17. package/dist/cjs/post-popover.cjs.entry.js +1 -1
  18. package/dist/cjs/post-rating.cjs.entry.js +1 -1
  19. package/dist/cjs/post-stepper-item.cjs.entry.js +1 -1
  20. package/dist/cjs/post-stepper.cjs.entry.js +1 -1
  21. package/dist/cjs/post-tab-item.cjs.entry.js +1 -1
  22. package/dist/cjs/post-tab-panel.cjs.entry.js +1 -1
  23. package/dist/cjs/post-tabs.cjs.entry.js +1 -1
  24. package/dist/cjs/post-tooltip-trigger.cjs.entry.js +1 -1
  25. package/dist/cjs/post-tooltip.cjs.entry.js +1 -1
  26. package/dist/collection/components/post-banner/post-banner.css +1 -1
  27. package/dist/collection/components/post-closebutton/post-closebutton.css +1 -1
  28. package/dist/collection/components/post-closebutton/post-closebutton.js +83 -7
  29. package/dist/collection/components/post-closebutton/types.js +3 -0
  30. package/dist/collection/components/post-collapsible/post-collapsible.js +2 -2
  31. package/dist/collection/components/post-megadropdown/post-megadropdown.css +1 -1
  32. package/dist/collection/components/post-megadropdown/post-megadropdown.js +1 -1
  33. package/dist/components/package.js +1 -1
  34. package/dist/components/post-banner.js +1 -1
  35. package/dist/components/post-closebutton2.js +1 -1
  36. package/dist/components/post-collapsible2.js +1 -1
  37. package/dist/components/post-megadropdown.js +1 -1
  38. package/dist/components/react/p-B7eGY_zG.js +1 -0
  39. package/dist/components/react/{p-CpHa76t0.js → p-BM5T_AgG.js} +1 -1
  40. package/dist/components/react/{p-IlUuXTk7.js → p-BNkE0s86.js} +1 -1
  41. package/dist/components/react/{p-CBPQwhIE.js → p-BX_nFrcn.js} +1 -1
  42. package/dist/components/react/p-BexjFgWq.js +1 -0
  43. package/dist/components/react/{p-CoS8dKpi.js → p-BhcKbsKY.js} +1 -1
  44. package/dist/components/react/p-BzBcOfzl.js +1 -0
  45. package/dist/components/react/{p-B7Pfex_I.js → p-CILij1jX.js} +1 -1
  46. package/dist/components/react/{p-Boi6UOyj.js → p-CwmHQ2Kf.js} +1 -1
  47. package/dist/components/react/{p-CS0PEJyh.js → p-D-kVF35b.js} +1 -1
  48. package/dist/components/react/{p-Bo4Ni2Xq.js → p-Djm_fenS.js} +1 -1
  49. package/dist/components/react/{p-C6KbCbAw.js → p-aSO__sH6.js} +1 -1
  50. package/dist/components/react/{p-Bj1Y_nVo.js → p-mA_8jS9w.js} +1 -1
  51. package/dist/components/react/post-accordion-item.js +1 -1
  52. package/dist/components/react/post-accordion.js +1 -1
  53. package/dist/components/react/post-avatar.js +1 -1
  54. package/dist/components/react/post-back-to-top.js +1 -1
  55. package/dist/components/react/post-banner.js +1 -1
  56. package/dist/components/react/post-breadcrumb-item.js +1 -1
  57. package/dist/components/react/post-breadcrumbs.js +1 -1
  58. package/dist/components/react/post-card-control.js +1 -1
  59. package/dist/components/react/post-closebutton.js +1 -1
  60. package/dist/components/react/post-collapsible-trigger.js +1 -1
  61. package/dist/components/react/post-collapsible.js +1 -1
  62. package/dist/components/react/post-footer.js +1 -1
  63. package/dist/components/react/post-header.js +1 -1
  64. package/dist/components/react/post-icon.js +1 -1
  65. package/dist/components/react/post-language-menu-item.js +1 -1
  66. package/dist/components/react/post-language-menu.js +1 -1
  67. package/dist/components/react/post-linkarea.js +1 -1
  68. package/dist/components/react/post-logo.js +1 -1
  69. package/dist/components/react/post-mainnavigation.js +1 -1
  70. package/dist/components/react/post-megadropdown-trigger.js +1 -1
  71. package/dist/components/react/post-megadropdown.js +1 -1
  72. package/dist/components/react/post-menu-item.js +1 -1
  73. package/dist/components/react/post-menu-trigger.js +1 -1
  74. package/dist/components/react/post-menu.js +1 -1
  75. package/dist/components/react/post-pagination.js +1 -1
  76. package/dist/components/react/post-popover-trigger.js +1 -1
  77. package/dist/components/react/post-popover.js +1 -1
  78. package/dist/components/react/post-popovercontainer.js +1 -1
  79. package/dist/components/react/post-rating.js +1 -1
  80. package/dist/components/react/post-stepper-item.js +1 -1
  81. package/dist/components/react/post-stepper.js +1 -1
  82. package/dist/components/react/post-tab-item.js +1 -1
  83. package/dist/components/react/post-tab-panel.js +1 -1
  84. package/dist/components/react/post-tabs.js +1 -1
  85. package/dist/components/react/post-togglebutton.js +1 -1
  86. package/dist/components/react/post-tooltip-trigger.js +1 -1
  87. package/dist/components/react/post-tooltip.js +1 -1
  88. package/dist/docs.json +98 -6
  89. package/dist/esm/loader.js +1 -1
  90. package/dist/esm/package-BzBcOfzl.js +3 -0
  91. package/dist/esm/post-accordion_2.entry.js +1 -1
  92. package/dist/esm/post-avatar.entry.js +1 -1
  93. package/dist/esm/post-back-to-top.entry.js +1 -1
  94. package/dist/esm/post-banner.entry.js +2 -2
  95. package/dist/esm/post-breadcrumb-item_2.entry.js +1 -1
  96. package/dist/esm/post-breadcrumbs.entry.js +1 -1
  97. package/dist/esm/post-card-control.entry.js +1 -1
  98. package/dist/esm/post-closebutton_13.entry.js +31 -7
  99. package/dist/esm/post-collapsible_2.entry.js +3 -3
  100. package/dist/esm/post-components.js +1 -1
  101. package/dist/esm/post-footer.entry.js +1 -1
  102. package/dist/esm/post-linkarea.entry.js +1 -1
  103. package/dist/esm/post-pagination.entry.js +1 -1
  104. package/dist/esm/post-popover-trigger.entry.js +1 -1
  105. package/dist/esm/post-popover.entry.js +1 -1
  106. package/dist/esm/post-rating.entry.js +1 -1
  107. package/dist/esm/post-stepper-item.entry.js +1 -1
  108. package/dist/esm/post-stepper.entry.js +1 -1
  109. package/dist/esm/post-tab-item.entry.js +1 -1
  110. package/dist/esm/post-tab-panel.entry.js +1 -1
  111. package/dist/esm/post-tabs.entry.js +1 -1
  112. package/dist/esm/post-tooltip-trigger.entry.js +1 -1
  113. package/dist/esm/post-tooltip.entry.js +1 -1
  114. package/dist/post-components/p-10c6b9f8.entry.js +1 -0
  115. package/dist/post-components/{p-3b6dcc38.entry.js → p-14c79a22.entry.js} +1 -1
  116. package/dist/post-components/{p-b0c36658.entry.js → p-2fdef7e4.entry.js} +1 -1
  117. package/dist/post-components/{p-0a76c979.entry.js → p-3964cd4a.entry.js} +1 -1
  118. package/dist/post-components/{p-92d66a15.entry.js → p-412c8217.entry.js} +1 -1
  119. package/dist/post-components/{p-da7c950f.entry.js → p-42fbf08e.entry.js} +1 -1
  120. package/dist/post-components/{p-7aad9f68.entry.js → p-5bc68b21.entry.js} +1 -1
  121. package/dist/post-components/{p-c90f26f6.entry.js → p-9bd9914b.entry.js} +1 -1
  122. package/dist/post-components/p-BzBcOfzl.js +1 -0
  123. package/dist/post-components/{p-76f197fd.entry.js → p-a0b438d5.entry.js} +1 -1
  124. package/dist/post-components/p-c6ed2b41.entry.js +1 -0
  125. package/dist/post-components/{p-f62429f0.entry.js → p-cac2f377.entry.js} +1 -1
  126. package/dist/post-components/{p-8d73b352.entry.js → p-d5996fe6.entry.js} +1 -1
  127. package/dist/post-components/{p-8760ec7c.entry.js → p-d90885ef.entry.js} +1 -1
  128. package/dist/post-components/{p-47d4a8eb.entry.js → p-df1a61e6.entry.js} +1 -1
  129. package/dist/post-components/{p-b54fe9b1.entry.js → p-e2a9c561.entry.js} +1 -1
  130. package/dist/post-components/{p-15abb76f.entry.js → p-e972c1ff.entry.js} +1 -1
  131. package/dist/post-components/{p-69d8b42f.entry.js → p-ecd9e81a.entry.js} +1 -1
  132. package/dist/post-components/{p-dbbd1f97.entry.js → p-ed634845.entry.js} +1 -1
  133. package/dist/post-components/{p-6bf3a582.entry.js → p-edb3d745.entry.js} +1 -1
  134. package/dist/post-components/{p-18808faa.entry.js → p-f6dc1ae3.entry.js} +1 -1
  135. package/dist/post-components/{p-8e935fb5.entry.js → p-fa268248.entry.js} +1 -1
  136. package/dist/post-components/{p-6e4b9414.entry.js → p-fd6e39db.entry.js} +1 -1
  137. package/dist/post-components/post-components.esm.js +1 -1
  138. package/dist/types/components/post-closebutton/post-closebutton.d.ts +12 -2
  139. package/dist/types/components/post-closebutton/types.d.ts +6 -0
  140. package/dist/types/components.d.ts +34 -14
  141. package/hydrate/index.js +37 -11
  142. package/hydrate/index.mjs +37 -11
  143. package/package.json +4 -4
  144. package/dist/collection/components/post-closebutton/button-types.js +0 -1
  145. package/dist/components/react/p-BIsI9uKb.js +0 -1
  146. package/dist/components/react/p-BedNtdrk.js +0 -1
  147. package/dist/components/react/p-DzmpoNOx.js +0 -1
  148. package/dist/esm/package-DzmpoNOx.js +0 -3
  149. package/dist/post-components/p-535cd139.entry.js +0 -1
  150. package/dist/post-components/p-92d166c6.entry.js +0 -1
  151. package/dist/post-components/p-DzmpoNOx.js +0 -1
  152. package/dist/types/components/post-closebutton/button-types.d.ts +0 -2
@@ -1 +1 @@
1
- .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton .btn{padding:0;border:unset;min-height:unset;min-width:unset;width:var(--post-device-sizing-notification-1);height:var(--post-device-sizing-notification-1);border-radius:var(--post-device-border-radius-round);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);display:flex;align-items:center;justify-content:center}post-closebutton .btn>post-icon{min-width:var(--post-device-sizing-interactive-icon-size4);width:var(--post-device-sizing-interactive-icon-size4);height:var(--post-device-sizing-interactive-icon-size4)}post-closebutton .btn{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}post-closebutton .btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){post-closebutton .btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{cursor:pointer;background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{color:HighlightText !important}}
1
+ .btn{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-1);gap:var(--post-device-spacing-gap-inline-10);padding:0 var(--post-device-spacing-padding-inline-6)}.btn:hover{text-decoration:none}.btn:disabled{border-style:var(--post-core-border-style-dash)}.btn{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.btn:is(a){color:LinkText;border:unset}.btn:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.btn:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.btn:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.btn>post-icon{width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-primary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-primary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-enabled-bg);color:var(--post-scheme-color-interactive-button-primary-enabled-fg)}.btn-primary:disabled{border-color:var(--post-scheme-color-interactive-button-primary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-primary-disabled-bg);color:var(--post-scheme-color-interactive-button-primary-disabled-fg)}.btn-primary:not(:disabled):hover,.btn-primary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-primary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-primary-hover-bg);color:var(--post-scheme-color-interactive-button-primary-hover-fg)}.btn-default{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-default:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-default:not(:disabled):hover,.btn-default.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-secondary{box-shadow:var(--post-device-elevation-100);border-color:var(--post-scheme-color-interactive-button-secondary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-enabled-bg);color:var(--post-scheme-color-interactive-button-secondary-enabled-fg)}.btn-secondary:disabled{border-color:var(--post-scheme-color-interactive-button-secondary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-disabled-bg);color:var(--post-scheme-color-interactive-button-secondary-disabled-fg)}.btn-secondary:not(:disabled):hover,.btn-secondary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-secondary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-secondary-hover-bg);color:var(--post-scheme-color-interactive-button-secondary-hover-fg)}.btn-tertiary{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-tertiary:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-tertiary:not(:disabled):hover,.btn-tertiary.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-link{border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg)}.btn-link:disabled{border-color:var(--post-scheme-color-interactive-button-tertiary-disabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-disabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-disabled-fg)}.btn-link:not(:disabled):hover,.btn-link.pretend-hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}.btn-sm{min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7)}.btn-sm>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-lg{min-height:var(--post-device-sizing-interactive-button-height-2);gap:var(--post-device-spacing-gap-inline-1);padding:0 var(--post-device-spacing-padding-inline-5)}.btn-lg>post-icon{width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.btn-link{-webkit-text-decoration:var(--post-core-text-decoration-underline);text-decoration:var(--post-core-text-decoration-underline);border:0 none;border-radius:var(--post-device-border-radius-focus);min-height:0;font-size:inherit;font-weight:inherit;padding:0}.btn-link:hover{color:var(--post-scheme-color-interactive-primary-hover-fg1)}.btn-icon{padding:0;width:var(--post-device-sizing-interactive-button-height-1);height:var(--post-device-sizing-interactive-button-height-1);min-height:0;vertical-align:text-bottom}.btn-icon>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-4);height:var(--post-device-sizing-interactive-button-icon-4)}.btn-icon.btn-sm{padding:0;width:var(--post-device-sizing-interactive-button-height-4);height:var(--post-device-sizing-interactive-button-height-4);min-height:0;vertical-align:text-bottom}.btn-icon.btn-sm>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.btn-icon.btn-lg{padding:0;width:var(--post-device-sizing-interactive-button-height-2);height:var(--post-device-sizing-interactive-button-height-2);min-height:0;vertical-align:text-bottom}.btn-icon.btn-lg>post-icon{display:block;width:var(--post-device-sizing-interactive-button-icon-3);height:var(--post-device-sizing-interactive-button-icon-3)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0}post-closebutton[size=small] .btn{height:var(--post-device-sizing-interactive-button-height-7);width:var(--post-device-sizing-interactive-button-height-7)}post-closebutton:not([placement]),post-closebutton[placement=auto]{position:absolute;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}post-closebutton .btn{background-color:var(--post-scheme-color-interactive-primary-enabled-bg1)}post-closebutton .btn:not(:disabled):hover,post-closebutton .btn.pretend-hover{background-color:var(--post-scheme-color-interactive-primary-hover-bg)}
@@ -1,7 +1,7 @@
1
1
  import { h, Host } from "@stencil/core";
2
2
  import { version } from "../../../../package";
3
- import { checkEmptyOrOneOf } from "../../utils/index";
4
- import { BUTTON_TYPES } from "./button-types";
3
+ import { checkEmptyOrOneOf, checkRequiredAndOneOf } from "../../utils/index";
4
+ import { BUTTON_TYPES, PLACEMENT, SIZE } from "./types";
5
5
  /**
6
6
  * @slot default - Slot for placing visually hidden label in the close button.
7
7
  */
@@ -9,13 +9,27 @@ export class PostClosebutton {
9
9
  constructor() {
10
10
  this.mutationObserver = new MutationObserver(this.checkContent.bind(this));
11
11
  /**
12
- * Overrides the close button's type ("button" by default)
12
+ * The "type" attribute used for the close button
13
13
  */
14
14
  this.buttonType = 'button';
15
+ /**
16
+ * Defines whether the close button is positioned automatically by the component or left unpositioned for manual styling.
17
+ */
18
+ this.placement = 'auto';
19
+ /**
20
+ * The size of the close button.
21
+ */
22
+ this.size = 'default';
15
23
  }
16
24
  validateButtonType() {
17
25
  checkEmptyOrOneOf(this, 'buttonType', BUTTON_TYPES);
18
26
  }
27
+ validatePlacement() {
28
+ checkRequiredAndOneOf(this, 'placement', PLACEMENT);
29
+ }
30
+ validateSize() {
31
+ checkRequiredAndOneOf(this, 'size', SIZE);
32
+ }
19
33
  componentDidLoad() {
20
34
  this.checkContent();
21
35
  }
@@ -33,12 +47,14 @@ export class PostClosebutton {
33
47
  }
34
48
  checkContent() {
35
49
  this.validateButtonType();
50
+ this.validatePlacement();
51
+ this.validateSize();
36
52
  if (!this.host.querySelector('.visually-hidden').textContent) {
37
53
  console.error(`The \`${this.host.localName}\` component requires content for accessibility.`);
38
54
  }
39
55
  }
40
56
  render() {
41
- return (h(Host, { key: '6965a8cb5fb765b4fcec0439ceeafe19d34970c2', "data-version": version }, h("button", { key: '7e718f70b0a4ac79e9439784dac46bd1ffd60fd1', class: "btn", type: this.buttonType }, h("post-icon", { key: '70acda3fbe6c9420f0be708fde6b29a7d5337d13', "aria-hidden": "true", name: "closex" }), h("span", { key: '899b3814c0898b521e4166e1cd951af628558e78', class: "visually-hidden" }, h("slot", { key: 'b13d0e95fd567c86e93e5185389909c7c0e7107d' })))));
57
+ return (h(Host, { key: 'ae74db094a2b1de985564d3f7528f78a98fd7ce9', "data-version": version }, h("button", { key: '7bab137e2dab6b3b405f486c10b3bbfbecdebafa', type: this.buttonType, class: "btn btn-icon btn-secondary btn-sm" }, h("post-icon", { key: 'ed323a3c13211f234551957a498f678e18ff4f66', "aria-hidden": "true", name: "closex" }), h("span", { key: 'aad44b5c93d357fab3d7cf537f477abd7c89f9be', class: "visually-hidden" }, h("slot", { key: 'd8424ae25100fc673188e3c77f89abe95847a38a' })))));
42
58
  }
43
59
  static get is() { return "post-closebutton"; }
44
60
  static get originalStyleUrls() {
@@ -62,8 +78,8 @@ export class PostClosebutton {
62
78
  "references": {
63
79
  "ButtonType": {
64
80
  "location": "import",
65
- "path": "./button-types",
66
- "id": "src/components/post-closebutton/button-types.ts::ButtonType",
81
+ "path": "./types",
82
+ "id": "src/components/post-closebutton/types.ts::ButtonType",
67
83
  "referenceLocation": "ButtonType"
68
84
  }
69
85
  }
@@ -72,13 +88,67 @@ export class PostClosebutton {
72
88
  "optional": true,
73
89
  "docs": {
74
90
  "tags": [],
75
- "text": "Overrides the close button's type (\"button\" by default)"
91
+ "text": "The \"type\" attribute used for the close button"
76
92
  },
77
93
  "getter": false,
78
94
  "setter": false,
79
95
  "reflect": false,
80
96
  "attribute": "button-type",
81
97
  "defaultValue": "'button'"
98
+ },
99
+ "placement": {
100
+ "type": "string",
101
+ "mutable": false,
102
+ "complexType": {
103
+ "original": "Placement",
104
+ "resolved": "\"auto\" | \"manual\"",
105
+ "references": {
106
+ "Placement": {
107
+ "location": "import",
108
+ "path": "./types",
109
+ "id": "src/components/post-closebutton/types.ts::Placement",
110
+ "referenceLocation": "Placement"
111
+ }
112
+ }
113
+ },
114
+ "required": false,
115
+ "optional": false,
116
+ "docs": {
117
+ "tags": [],
118
+ "text": "Defines whether the close button is positioned automatically by the component or left unpositioned for manual styling."
119
+ },
120
+ "getter": false,
121
+ "setter": false,
122
+ "reflect": true,
123
+ "attribute": "placement",
124
+ "defaultValue": "'auto'"
125
+ },
126
+ "size": {
127
+ "type": "string",
128
+ "mutable": false,
129
+ "complexType": {
130
+ "original": "Size",
131
+ "resolved": "\"default\" | \"small\"",
132
+ "references": {
133
+ "Size": {
134
+ "location": "import",
135
+ "path": "./types",
136
+ "id": "src/components/post-closebutton/types.ts::Size",
137
+ "referenceLocation": "Size"
138
+ }
139
+ }
140
+ },
141
+ "required": false,
142
+ "optional": false,
143
+ "docs": {
144
+ "tags": [],
145
+ "text": "The size of the close button."
146
+ },
147
+ "getter": false,
148
+ "setter": false,
149
+ "reflect": true,
150
+ "attribute": "size",
151
+ "defaultValue": "'default'"
82
152
  }
83
153
  };
84
154
  }
@@ -87,6 +157,12 @@ export class PostClosebutton {
87
157
  return [{
88
158
  "propName": "buttonType",
89
159
  "methodName": "validateButtonType"
160
+ }, {
161
+ "propName": "placement",
162
+ "methodName": "validatePlacement"
163
+ }, {
164
+ "propName": "size",
165
+ "methodName": "validateSize"
90
166
  }];
91
167
  }
92
168
  }
@@ -0,0 +1,3 @@
1
+ export const BUTTON_TYPES = ['button', 'submit', 'reset'];
2
+ export const PLACEMENT = ['manual', 'auto'];
3
+ export const SIZE = ['default', 'small'];
@@ -38,10 +38,10 @@ export class PostCollapsible {
38
38
  const isExpanded = this.isExpanded;
39
39
  if (IS_BROWSER) {
40
40
  const animation = isExpanded ? expand(this.host) : collapse(this.host);
41
+ this.postToggle.emit(isExpanded);
41
42
  await animation.finished;
42
43
  animation.commitStyles();
43
44
  this.updateTriggers();
44
- this.postToggle.emit(isExpanded);
45
45
  }
46
46
  return isExpanded;
47
47
  }
@@ -53,7 +53,7 @@ export class PostCollapsible {
53
53
  triggers.forEach(trigger => trigger.update());
54
54
  }
55
55
  render() {
56
- return (h(Host, { key: '06400647373d6c66398e6f81561ab2c60b748af1', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '63653d2d89b80b03c7f139b1370eaf18fe839409' })));
56
+ return (h(Host, { key: 'd7937850db1db8346199da4ad80d8db2e305f32a', "data-version": version, tabindex: this.collapsed ? -1 : undefined, style: this.collapsed ? collapsedKeyframe : undefined }, h("slot", { key: '36fbe680b15c4d39e28bcb2c245c52e79a8d8c83' })));
57
57
  }
58
58
  static get is() { return "post-collapsible"; }
59
59
  static get encapsulation() { return "shadow"; }
@@ -1 +1 @@
1
- *,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;background-color:#fafafa;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{z-index:-1;inset-block-start:100%}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{max-height:calc(100vh - var(--post-header-height) - 3rem);padding:2rem 2.5rem 2.5rem}}@media screen and (max-width: 1023.98px){.section{display:flex;flex-direction:column;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block:1.5rem}}.megadropdown-title{margin-block:0 1rem;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);order:-1;width:fit-content;padding-inline:0}.back-button:hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash)}.back-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(a){color:LinkText;border:unset}.back-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.back-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.back-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:2rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:1.5rem}}.close-button{position:absolute;inset-block-start:1rem;inset-inline-end:1rem}@media screen and (max-width: 1023.98px){.close-button{display:none}}
1
+ *,::before,::after{box-sizing:border-box}.megadropdown{position:absolute;inset-inline:0;overflow-y:auto;background-color:#fafafa;box-shadow:var(--post-device-elevation-300)}@media screen and (min-width: 1024px){.megadropdown{z-index:-1;inset-block-start:100%}.megadropdown.slide-in{animation:slide-down 350ms forwards}.megadropdown.slide-out{animation:slide-up 350ms forwards}}@media screen and (max-width: 1023.98px){.megadropdown{z-index:1;inset-block-start:var(--post-header-navigation-current-inset);overscroll-behavior:contain}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.megadropdown{border-block-end:1px solid CanvasText}}.section{width:100%;max-width:var(--post-header-content-max-width);margin-inline:auto;position:relative}@media screen and (min-width: 1024px){.section{max-height:calc(100vh - var(--post-header-height) - 3rem);padding:3rem 2.5rem 2.5rem}}@media screen and (max-width: 1023.98px){.section{display:flex;flex-direction:column;height:calc(min(var(--post-header-scroll-parent-height, 100dvh),100dvh) - var(--post-header-height));padding-inline:var(--post-burger-menu-padding-inline);padding-block:1.5rem}}.megadropdown-title{margin-block:0 1rem;font-weight:950}@media screen and (min-width: 600px)and (max-width: 1023.98px){.megadropdown-title{font-size:1.25rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.megadropdown-title{font-size:1.125rem}}.back-button{display:inline-flex;position:relative;align-items:center;justify-content:center;max-width:100%;overflow:hidden;transition:opacity 250ms,border-color 250ms,background-color 250ms,color 250ms;border-width:var(--post-device-border-width-default);border-style:solid;border-radius:var(--post-device-border-radius-round);background-color:rgba(0,0,0,0);box-shadow:none;font-family:inherit;font-weight:var(--post-device-font-weight-bold);text-decoration:none;white-space:nowrap;cursor:pointer;min-height:var(--post-device-sizing-interactive-button-height-4);gap:var(--post-device-spacing-gap-inline-11);padding:0 var(--post-device-spacing-padding-inline-7);border-color:var(--post-scheme-color-interactive-button-tertiary-enabled-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-enabled-bg);color:var(--post-scheme-color-interactive-button-tertiary-enabled-fg);order:-1;width:fit-content;padding-inline:0}.back-button:hover{text-decoration:none}.back-button:disabled{border-style:var(--post-core-border-style-dash)}.back-button{outline-offset:var(--post-device-spacing-padding-2) !important;outline:var(--post-scheme-color-interactive-focus-stroke) none var(--post-device-border-width-focus) !important}.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:has(:focus-visible),.pretend-focus){outline-color:Highlight !important}}@supports not selector(:has(:focus-visible)){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-style:var(--post-core-border-style-solid) !important}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(:focus-visible,:focus-within,.pretend-focus){outline-color:Highlight !important}}}@media(forced-colors: active),(-ms-high-contrast: active),(-ms-high-contrast: white-on-black){.back-button:is(a){color:LinkText;border:unset}.back-button:is(button){background-color:ButtonFace !important;border:1px solid ButtonBorder !important}.back-button:not(:disabled,.disabled):is(button):hover{background-color:Highlight !important}.back-button:not(:disabled,.disabled):is(button):hover>post-icon{color:HighlightText !important}}.back-button>post-icon{width:var(--post-device-sizing-interactive-button-icon-5);height:var(--post-device-sizing-interactive-button-icon-5)}.back-button:hover{border-color:var(--post-scheme-color-interactive-button-tertiary-hover-stroke);background-color:var(--post-scheme-color-interactive-button-tertiary-hover-bg);color:var(--post-scheme-color-interactive-button-tertiary-hover-fg)}@media screen and (min-width: 600px)and (max-width: 1023.98px){.back-button{margin-block-end:2rem}}@media screen and (min-width: 0)and (max-width: 599.98px){.back-button{margin-block-end:1.5rem}}.close-button{position:absolute;inset-block-start:.5rem;inset-inline-end:.5rem}@media screen and (max-width: 1023.98px){.close-button{display:none}}
@@ -281,7 +281,7 @@ export class PostMegadropdown {
281
281
  }
282
282
  render() {
283
283
  const containerStyle = this.isVisible ? {} : { display: 'none' };
284
- return (h(Host, { key: '02194ee3593dd471e2fc3aadb1d69041d613ce0a', version: version }, h("div", { key: '77ab3faeb3705ac0d97ab0d72cc3fbf12c19badc', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: '5d8b3ef651c3eb19f08e3ccd6c9356e01463a2e0', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: 'e99a5751ea896f3ab55dc9bf58635f7b2fef2a1c', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: 'a0a1bfa04de139d48c825df8fdb24f93e031ea66', class: "megadropdown-content" }, h("slot", { key: '68e44ce30fec1efed2855490b5d9af56ba41e004' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
284
+ return (h(Host, { key: '02194ee3593dd471e2fc3aadb1d69041d613ce0a', version: version }, h("div", { key: '77ab3faeb3705ac0d97ab0d72cc3fbf12c19badc', ref: el => (this.animatedContainer = el), class: "megadropdown", style: containerStyle }, h("div", { key: '5d8b3ef651c3eb19f08e3ccd6c9356e01463a2e0', class: "section" }, this.device !== 'desktop' && this.megadropdownTitle && (h("p", { key: 'e99a5751ea896f3ab55dc9bf58635f7b2fef2a1c', class: "megadropdown-title" }, this.megadropdownTitle)), h("div", { key: 'a0a1bfa04de139d48c825df8fdb24f93e031ea66', class: "megadropdown-content" }, h("slot", { key: '68e44ce30fec1efed2855490b5d9af56ba41e004' })), this.device === 'desktop' ? (h("post-closebutton", { onClick: () => this.hide(true), class: "close-button", size: "small", placement: "manual" }, this.textClose)) : (h("button", { onClick: () => this.hide(true), class: "back-button" }, h("post-icon", { name: "arrowleft" }), this.textBack))))));
285
285
  }
286
286
  static get is() { return "post-megadropdown"; }
287
287
  static get encapsulation() { return "shadow"; }
@@ -1 +1 @@
1
- const t="10.0.0-next.59";export{t as v}
1
+ const t="10.0.0-next.60";export{t as v}