@openameba/spindle-ui 2.7.0 → 2.9.1

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 (51) hide show
  1. package/CHANGELOG.md +37 -0
  2. package/LICENSE +21 -0
  3. package/Modal/AppealModal.css +2 -2
  4. package/Modal/AppealModal.d.ts.map +1 -1
  5. package/Modal/AppealModal.js +9 -32
  6. package/Modal/AppealModal.js.map +1 -1
  7. package/Modal/AppealModal.mjs +9 -30
  8. package/Modal/SemiModal.css +1 -1
  9. package/Modal/SemiModal.d.ts.map +1 -1
  10. package/Modal/SemiModal.js +9 -32
  11. package/Modal/SemiModal.js.map +1 -1
  12. package/Modal/SemiModal.mjs +9 -30
  13. package/Modal/index.css +2 -2
  14. package/Pagination/Pagination.css +1 -1
  15. package/Pagination/Pagination.d.ts.map +1 -1
  16. package/Pagination/Pagination.js +1 -1
  17. package/Pagination/Pagination.js.map +1 -1
  18. package/Pagination/Pagination.mjs +1 -1
  19. package/Pagination/PaginationItem.css +1 -1
  20. package/Pagination/PaginationItem.d.ts.map +1 -1
  21. package/Pagination/PaginationItem.js +7 -6
  22. package/Pagination/PaginationItem.js.map +1 -1
  23. package/Pagination/PaginationItem.mjs +6 -5
  24. package/Rating/Rating.css +1 -0
  25. package/Rating/Rating.d.ts +11 -0
  26. package/Rating/Rating.d.ts.map +1 -0
  27. package/Rating/Rating.js +60 -0
  28. package/Rating/Rating.js.map +1 -0
  29. package/Rating/Rating.mjs +30 -0
  30. package/Rating/StarBack.d.ts +6 -0
  31. package/Rating/StarBack.d.ts.map +1 -0
  32. package/Rating/StarBack.js +25 -0
  33. package/Rating/StarBack.js.map +1 -0
  34. package/Rating/StarBack.mjs +6 -0
  35. package/Rating/StarFront.d.ts +6 -0
  36. package/Rating/StarFront.d.ts.map +1 -0
  37. package/Rating/StarFront.js +26 -0
  38. package/Rating/StarFront.js.map +1 -0
  39. package/Rating/StarFront.mjs +7 -0
  40. package/Rating/index.d.ts +2 -0
  41. package/Rating/index.d.ts.map +1 -0
  42. package/Rating/index.js +6 -0
  43. package/Rating/index.js.map +1 -0
  44. package/Rating/index.mjs +1 -0
  45. package/index.css +2 -2
  46. package/index.d.ts +1 -0
  47. package/index.d.ts.map +1 -1
  48. package/index.js +3 -1
  49. package/index.js.map +1 -1
  50. package/index.mjs +1 -0
  51. package/package.json +20 -23
package/CHANGELOG.md CHANGED
@@ -3,6 +3,43 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.9.1](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.9.0...@openameba/spindle-ui@2.9.1) (2025-10-09)
7
+
8
+ ### Bug Fixes
9
+
10
+ - **spindle-ui:** delete aria disabled ([6a61c0a](https://github.com/openameba/spindle/commit/6a61c0ace22fc94ed6f73839e561dbfd59f94abc))
11
+ - **spindle-ui:** delete outline style ([e9c4697](https://github.com/openameba/spindle/commit/e9c46971c60a7dfceeb76c770dc24c99b87af50e))
12
+ - **spindle-ui:** delete pagination unused style ([04cff9d](https://github.com/openameba/spindle/commit/04cff9ddab8a12a25fc6dc2ddb9372d433f176fb))
13
+ - **spindle-ui:** pagination component aria ([91ea006](https://github.com/openameba/spindle/commit/91ea006708163ae159b31112595ffc0de0b7ed76))
14
+ - **spindle-ui:** pagination current link ([50a82ec](https://github.com/openameba/spindle/commit/50a82ec2c07509ef5d4440d9a6de01fa34bff605))
15
+ - **spindle-ui:** pagination label ([ab723f5](https://github.com/openameba/spindle/commit/ab723f5b0a911dc95ad2c49bec5802d7d5ede677))
16
+ - **spindle-ui:** pagination link element to button ([017f17b](https://github.com/openameba/spindle/commit/017f17bfd58d7a93fc4f608ca6b0dfae18621231))
17
+
18
+ ### Features
19
+
20
+ - **spindle-ui:** add pagination disabled test ([4f6fabd](https://github.com/openameba/spindle/commit/4f6fabd5d8579a162b49c12c344a0e919cf28415))
21
+
22
+ # [2.9.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.8.0...@openameba/spindle-ui@2.9.0) (2025-09-29)
23
+
24
+ ### Bug Fixes
25
+
26
+ - description ([95187fe](https://github.com/openameba/spindle/commit/95187feed9e502bdd0c7dec367a60623f8ff5c15))
27
+ - rating compoent style ([8bcd164](https://github.com/openameba/spindle/commit/8bcd16426752ffa7a60491f2c02e401931f62a9b))
28
+ - rating docs ([d69fbac](https://github.com/openameba/spindle/commit/d69fbac553c1bbe1a7eb0a359a9350a6c4756b0e))
29
+
30
+ ### Features
31
+
32
+ - **spindle-ui:** add rating component ([3546053](https://github.com/openameba/spindle/commit/35460534bd155679ecc5edde67cfea49cfcbd0a8))
33
+ - **spindle-ui:** ratingコンポーネントの指摘事項対応 ([f94386d](https://github.com/openameba/spindle/commit/f94386da69eead2dd17911b1c8490dad1593fbdd))
34
+ - **spindle-ui:** ratingコンポーネントを修正 ([4f892f6](https://github.com/openameba/spindle/commit/4f892f6d9ac05ea06e940ac5ed92ef6950628425))
35
+
36
+ # [2.8.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.7.0...@openameba/spindle-ui@2.8.0) (2025-09-22)
37
+
38
+ ### Features
39
+
40
+ - **spindle-ui:** migrate AppealModal to allow-discrete transitions ([f540486](https://github.com/openameba/spindle/commit/f540486374ceff52b3b188d4f1f38121ead39c82))
41
+ - **spindle-ui:** migrate SemiModal to allow-discrete transitions ([64b6eee](https://github.com/openameba/spindle/commit/64b6eee06bb6371dc2f5e3b8340697b540fa0c72))
42
+
6
43
  # [2.7.0](https://github.com/openameba/spindle/compare/@openameba/spindle-ui@2.6.3...@openameba/spindle-ui@2.7.0) (2025-09-19)
7
44
 
8
45
  ### Features
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2022 openameba
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/Modal/AppealModal.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(
2
2
  --color-surface-accent-primary-light
3
- );--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);padding:0;width:400px}.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{animation:spui-AppealModal-fade-in .5s cubic-bezier(0,0,0,1)}.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop{animation:spui-AppealModal-fade-out .3s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop,.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{animation-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}html.spui-AppealModal--open{overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6)}.spui-AppealModal+.backdrop{background:rgba(0,0,0,.6)}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0;grid-auto-flow:row;grid-template:"Image" "Title" "Body" "ButtonGroup" "CloseButton"/1fr;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup"/1fr 72px;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(
3
+ );--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);opacity:0;padding:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s;width:400px}.spui-AppealModal--styleOnly,.spui-AppealModal[open],.spui-AppealModal[open]::backdrop{opacity:1}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s}@starting-style{.spui-AppealModal[open]{opacity:0}.spui-AppealModal[open]::backdrop{opacity:0}}@media (prefers-reduced-motion:reduce){.spui-AppealModal,.spui-AppealModal::backdrop{transition-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0;grid-auto-flow:row;grid-template:"Image" "Title" "Body" "ButtonGroup" "CloseButton"/1fr;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup"/1fr 72px;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(
4
4
  --color-surface-tertiary
5
- );display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}@keyframes spui-AppealModal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-AppealModal-fade-out{0%{opacity:1}to{opacity:0}}
5
+ );display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}
package/Modal/AppealModal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppealModal.d.ts","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAOf,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAqLD,eAAO,MAAM,WAAW;;wDA7DrB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE;mCAwBV,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;mCAQzB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;kCAQ5B,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;;;;;CA4B7D,CAAC"}
1
+ {"version":3,"file":"AppealModal.d.ts","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAO7D,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzC,UAAU,gBAAiB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC;IACxE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAmJD,eAAO,MAAM,WAAW;;wDAlErB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE;mCA6BV,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;mCAQzB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;kCAQ5B,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;;;;;CA4B7D,CAAC"}
package/Modal/AppealModal.js CHANGED
@@ -66,10 +66,8 @@ var CrossBold_1 = __importDefault(require("../Icon/CrossBold"));
66
66
  var IconButton_1 = require("../IconButton");
67
67
  var SubtleButton_1 = require("../SubtleButton");
68
68
  var BLOCK_NAME = 'spui-AppealModal';
69
- var FADE_OUT_ANIMATION = 'spui-AppealModal-fade-out';
70
69
  var Frame = (0, react_1.forwardRef)(function AppealModal(_a, ref) {
71
70
  var children = _a.children, className = _a.className, open = _a.open, _b = _a.size, size = _b === void 0 ? 'large' : _b, onClose = _a.onClose, rest = __rest(_a, ["children", "className", "open", "size", "onClose"]);
72
- var _c = (0, react_1.useState)(false), closing = _c[0], setClosing = _c[1];
73
71
  var dialogEl = (0, react_1.useRef)(null);
74
72
  var handleFormSubmit = function (event) {
75
73
  event.preventDefault(); // To be closed with the open prop
@@ -85,48 +83,22 @@ var Frame = (0, react_1.forwardRef)(function AppealModal(_a, ref) {
85
83
  // Detect escape key type
86
84
  if (event.target === dialogEl.current) {
87
85
  onClose && onClose(event);
88
- setClosing(false);
89
86
  }
90
87
  };
91
- var handleAnimationEnd = (0, react_1.useCallback)(function (event) {
92
- if (dialogEl.current &&
93
- event.animationName === FADE_OUT_ANIMATION &&
94
- !event.pseudoElement // To exclude ::backdrop
95
- ) {
96
- dialogEl.current.close && dialogEl.current.close();
97
- }
98
- }, [dialogEl]);
99
- (0, react_1.useEffect)(function () {
100
- var dialog = dialogEl.current;
101
- dialog === null || dialog === void 0 ? void 0 : dialog.addEventListener('animationend', handleAnimationEnd, false);
102
- return function () {
103
- return dialog === null || dialog === void 0 ? void 0 : dialog.removeEventListener('animationend', handleAnimationEnd, false);
104
- };
105
- }, [dialogEl, handleAnimationEnd]);
106
88
  (0, react_1.useEffect)(function () {
107
- var _a;
89
+ var _a, _b;
108
90
  var dialog = dialogEl.current;
109
91
  if (!dialog) {
110
92
  return;
111
93
  }
112
- // Remove this when browsers support :has() pseudo-class
113
- var classNameToStopScrollBehindDialog = "".concat(BLOCK_NAME, "--open");
114
94
  if (open) {
115
95
  !dialog.open && ((_a = dialog.showModal) === null || _a === void 0 ? void 0 : _a.call(dialog));
116
- document.documentElement.classList.add(classNameToStopScrollBehindDialog);
117
96
  }
118
97
  else {
119
- (dialog === null || dialog === void 0 ? void 0 : dialog.open) && setClosing(true);
120
- // Always remove this class to avoid unexpected scroll stopping
121
- document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
98
+ (_b = dialog === null || dialog === void 0 ? void 0 : dialog.close) === null || _b === void 0 ? void 0 : _b.call(dialog);
122
99
  }
123
100
  }, [open, dialogEl]);
124
- return (react_1.default.createElement("dialog", __assign({ className: [
125
- BLOCK_NAME,
126
- "".concat(BLOCK_NAME, "--").concat(size),
127
- closing && "".concat(BLOCK_NAME, "--closing"),
128
- className,
129
- ]
101
+ return (react_1.default.createElement("dialog", __assign({ className: [BLOCK_NAME, "".concat(BLOCK_NAME, "--").concat(size), className]
130
102
  .filter(Boolean)
131
103
  .join(' ')
132
104
  .trim(), ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose }, rest),
@@ -140,7 +112,12 @@ var Frame = (0, react_1.forwardRef)(function AppealModal(_a, ref) {
140
112
  });
141
113
  var StyleOnly = function (_a) {
142
114
  var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? 'large' : _b, rest = __rest(_a, ["className", "children", "size"]);
143
- return (react_1.default.createElement("div", __assign({ className: [BLOCK_NAME, "".concat(BLOCK_NAME, "--").concat(size), className]
115
+ return (react_1.default.createElement("div", __assign({ className: [
116
+ BLOCK_NAME,
117
+ "".concat(BLOCK_NAME, "--styleOnly"),
118
+ "".concat(BLOCK_NAME, "--").concat(size),
119
+ className,
120
+ ]
144
121
  .filter(Boolean)
145
122
  .join(' ')
146
123
  .trim() }, rest),
package/Modal/AppealModal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AppealModal.js","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"AppealModal.js","sourceRoot":"","sources":["../../src/Modal/AppealModal.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA6D;AAC7D,qDAAgD;AAChD,8CAAsD;AACtD,gEAA0C;AAC1C,4CAA2C;AAC3C,gDAA+C;AAW/C,IAAM,UAAU,GAAG,kBAAkB,CAAC;AAEtC,IAAM,KAAK,GAAG,IAAA,kBAAU,EACtB,SAAS,WAAW,CAClB,EAA+D,EAC/D,GAAG;IADD,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,IAAI,UAAA,EAAE,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EAAE,OAAO,aAAA,EAAK,IAAI,cAA7D,oDAA+D,CAAF;IAG7D,IAAM,QAAQ,GAAG,IAAA,cAAM,EAAoB,IAAI,CAAC,CAAC;IAEjD,IAAM,gBAAgB,GAAG,UAAC,KAAuC;QAC/D,KAAK,CAAC,cAAc,EAAE,CAAC,CAAC,kCAAkC;QAC1D,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG,UAAC,KAA0C;QACnE,wBAAwB;QACxB,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACtC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IAEF,IAAM,iBAAiB,GAAG,UACxB,KAA8C;QAE9C,yBAAyB;QACzB,IAAI,KAAK,CAAC,MAAM,KAAK,QAAQ,CAAC,OAAO,EAAE,CAAC;YACtC,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;IACH,CAAC,CAAC;IAEF,IAAA,iBAAS,EAAC;;QACR,IAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC;QAChC,IAAI,CAAC,MAAM,EAAE,CAAC;YACZ,OAAO;QACT,CAAC;QAED,IAAI,IAAI,EAAE,CAAC;YACT,CAAC,MAAM,CAAC,IAAI,KAAI,MAAA,MAAM,CAAC,SAAS,sDAAI,CAAA,CAAC;QACvC,CAAC;aAAM,CAAC;YACN,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,sDAAI,CAAC;QACpB,CAAC;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,mDACE,SAAS,EAAE,CAAC,UAAU,EAAE,UAAG,UAAU,eAAK,IAAI,CAAE,EAAE,SAAS,CAAC;aACzD,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;aACT,IAAI,EAAE,EACT,GAAG,EAAE,IAAA,+BAAY,EAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,EAClC,OAAO,EAAE,iBAAiB,EAC1B,OAAO,EAAE,iBAAiB,IACtB,IAAI;QAER,wCACE,SAAS,EAAE,UAAG,UAAU,WAAQ,EAChC,MAAM,EAAC,QAAQ,EACf,QAAQ,EAAE,gBAAgB;YAE1B,uCAAK,SAAS,EAAE,UAAG,UAAU,qBAAkB;gBAC7C,8BAAC,uBAAU,kBAAY,oBAAK,EAAC,OAAO,EAAC,SAAS;oBAC5C,8BAAC,mBAAS,mBAAa,MAAM,GAAG,CACrB,CACT;YACL,QAAQ;YACT,uCAAK,SAAS,EAAE,UAAG,UAAU,qBAAkB;gBAC7C,8BAAC,2BAAY,6BAAmB,CAC5B,CACD,CACA,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAM,SAAS,GAAG,UAAC,EAK6B;IAJ9C,IAAA,SAAS,eAAA,EACT,QAAQ,cAAA,EACR,YAAc,EAAd,IAAI,mBAAG,OAAO,KAAA,EACX,IAAI,cAJU,iCAKlB,CADQ;IAEP,OAAO,CACL,gDACE,SAAS,EAAE;YACT,UAAU;YACV,UAAG,UAAU,gBAAa;YAC1B,UAAG,UAAU,eAAK,IAAI,CAAE;YACxB,SAAS;SACV;aACE,MAAM,CAAC,OAAO,CAAC;aACf,IAAI,CAAC,GAAG,CAAC;aACT,IAAI,EAAE,IACL,IAAI;QAER,uCAAK,SAAS,EAAE,UAAG,UAAU,WAAQ;YACnC,uCAAK,SAAS,EAAE,UAAG,UAAU,qBAAkB;gBAC7C,8BAAC,uBAAU,kBAAY,oBAAK,EAAC,OAAO,EAAC,SAAS;oBAC5C,8BAAC,mBAAS,mBAAa,MAAM,GAAG,CACrB,CACT;YACL,QAAQ;YACT,uCAAK,SAAS,EAAE,UAAG,UAAU,qBAAkB;gBAC7C,8BAAC,2BAAY,6BAAmB,CAC5B,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,EAAgD;IAA9C,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAChC,OAAO,CACL,8CAAG,SAAS,EAAE,UAAG,UAAU,WAAQ,IAAM,IAAI,GAC1C,QAAQ,CACP,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,KAAK,GAAG,UAAC,EAAkD;IAAhD,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAChC,OAAO,CACL,gDAAK,SAAS,EAAE,UAAG,UAAU,WAAQ,IAAM,IAAI,GAC5C,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,IAAI,GAAG,UAAC,EAAgD;IAA9C,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IAC/B,OAAO,CACL,8CAAG,SAAS,EAAE,UAAG,UAAU,UAAO,IAAM,IAAI,GACzC,QAAQ,CACP,CACL,CAAC;AACJ,CAAC,CAAC;AAEF,IAAM,WAAW,GAAiB,UAAC,EAAqB;IAAnB,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAnB,YAAqB,CAAF;IACpD,OAAO,CACL,8BAAC,yBAAK,aACJ,SAAS,EAAE,UAAG,UAAU,iBAAc,EACtC,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,QAAQ,IACd,IAAI,GAEP,QAAQ,CACH,CACT,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,WAAW,GAAG;IACzB,KAAK,OAAA;IACL,SAAS,WAAA;IACT,KAAK,OAAA;IACL,KAAK,OAAA;IACL,IAAI,MAAA;IACJ,WAAW,aAAA;CACZ,CAAC"}
package/Modal/AppealModal.mjs CHANGED
@@ -1,13 +1,11 @@
1
- import React, { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
1
+ import React, { forwardRef, useEffect, useRef } from 'react';
2
2
  import { useMergeRefs } from 'use-callback-ref';
3
3
  import { ButtonGroup as Group } from "../ButtonGroup/index.mjs";
4
4
  import CrossBold from "../Icon/CrossBold.mjs";
5
5
  import { IconButton } from "../IconButton/index.mjs";
6
6
  import { SubtleButton } from "../SubtleButton/index.mjs";
7
7
  const BLOCK_NAME = 'spui-AppealModal';
8
- const FADE_OUT_ANIMATION = 'spui-AppealModal-fade-out';
9
8
  const Frame = forwardRef(function AppealModal({ children, className, open, size = 'large', onClose, ...rest }, ref) {
10
- const [closing, setClosing] = useState(false);
11
9
  const dialogEl = useRef(null);
12
10
  const handleFormSubmit = (event) => {
13
11
  event.preventDefault(); // To be closed with the open prop
@@ -23,45 +21,21 @@ const Frame = forwardRef(function AppealModal({ children, className, open, size
23
21
  // Detect escape key type
24
22
  if (event.target === dialogEl.current) {
25
23
  onClose && onClose(event);
26
- setClosing(false);
27
24
  }
28
25
  };
29
- const handleAnimationEnd = useCallback((event) => {
30
- if (dialogEl.current &&
31
- event.animationName === FADE_OUT_ANIMATION &&
32
- !event.pseudoElement // To exclude ::backdrop
33
- ) {
34
- dialogEl.current.close && dialogEl.current.close();
35
- }
36
- }, [dialogEl]);
37
- useEffect(() => {
38
- const dialog = dialogEl.current;
39
- dialog?.addEventListener('animationend', handleAnimationEnd, false);
40
- return () => dialog?.removeEventListener('animationend', handleAnimationEnd, false);
41
- }, [dialogEl, handleAnimationEnd]);
42
26
  useEffect(() => {
43
27
  const dialog = dialogEl.current;
44
28
  if (!dialog) {
45
29
  return;
46
30
  }
47
- // Remove this when browsers support :has() pseudo-class
48
- const classNameToStopScrollBehindDialog = `${BLOCK_NAME}--open`;
49
31
  if (open) {
50
32
  !dialog.open && dialog.showModal?.();
51
- document.documentElement.classList.add(classNameToStopScrollBehindDialog);
52
33
  }
53
34
  else {
54
- dialog?.open && setClosing(true);
55
- // Always remove this class to avoid unexpected scroll stopping
56
- document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
35
+ dialog?.close?.();
57
36
  }
58
37
  }, [open, dialogEl]);
59
- return (React.createElement("dialog", { className: [
60
- BLOCK_NAME,
61
- `${BLOCK_NAME}--${size}`,
62
- closing && `${BLOCK_NAME}--closing`,
63
- className,
64
- ]
38
+ return (React.createElement("dialog", { className: [BLOCK_NAME, `${BLOCK_NAME}--${size}`, className]
65
39
  .filter(Boolean)
66
40
  .join(' ')
67
41
  .trim(), ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, ...rest },
@@ -74,7 +48,12 @@ const Frame = forwardRef(function AppealModal({ children, className, open, size
74
48
  React.createElement(SubtleButton, null, "\u3068\u3058\u308B")))));
75
49
  });
76
50
  const StyleOnly = ({ className, children, size = 'large', ...rest }) => {
77
- return (React.createElement("div", { className: [BLOCK_NAME, `${BLOCK_NAME}--${size}`, className]
51
+ return (React.createElement("div", { className: [
52
+ BLOCK_NAME,
53
+ `${BLOCK_NAME}--styleOnly`,
54
+ `${BLOCK_NAME}--${size}`,
55
+ className,
56
+ ]
78
57
  .filter(Boolean)
79
58
  .join(' ')
80
59
  .trim(), ...rest },
package/Modal/SemiModal.css CHANGED
@@ -1,3 +1,3 @@
1
1
  :root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(
2
2
  --color-surface-accent-primary-light
3
- );--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SemiModal-footer-justifyContent:right;--SemiModal-footer-button-minWidth:160px;--SemiModal-sp-footer-justifyContent:center}.spui-SemiModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);height:-moz-fit-content;height:fit-content;padding:0;position:fixed;width:-moz-fit-content;width:fit-content}.spui-SemiModal[data-type=sheet]{border-radius:20px 20px 0 0;bottom:0;margin:auto auto 0;transform:translateY(100%);will-change:translate}.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing),.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop,.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop{animation:spui-SemiModal-fade-in .35s cubic-bezier(0,0,0,1)}.spui-SemiModal--closing.spui-SemiModal[data-type=popup],.spui-SemiModal--closing[data-type=popup].spui-SemiModal::backdrop,.spui-SemiModal--closing[data-type=sheet].spui-SemiModal::backdrop{animation:spui-SemiModal-fade-out .35s cubic-bezier(0,0,0,1)}.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing,button){animation:spui-SemiModal-slide-in .35s cubic-bezier(0,0,0,1) both}.spui-SemiModal--closing.spui-SemiModal[data-type=sheet]{animation:spui-SemiModal-slide-out .35s cubic-bezier(0,0,0,1) both}@media (prefers-reduced-motion:reduce){.spui-SemiModal--closing.spui-SemiModal[data-type=popup]::backdrop,.spui-SemiModal--closing.spui-SemiModal[data-type=sheet]::backdrop,.spui-SemiModal[data-type=popup].spui-SemiModal--closing,.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing),.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop,.spui-SemiModal[data-type=sheet].spui-SemiModal--closing,.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing),.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop{animation-duration:.01s}}html:has(.spui-SemiModal[open]){overflow:hidden}html.spui-SemiModal--open{overflow:hidden}@media screen and (max-width:440px){.spui-SemiModal{width:calc(100% - 40px)}}.spui-SemiModal::backdrop{background:rgba(0,0,0,.6)}.spui-SemiModal+.backdrop{background:rgba(0,0,0,.6)}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 2px var(--color-focus-clarity);outline:none}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-SemiModal-frame{box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;flex-direction:column;padding:0 16px 36px 36px}.spui-SemiModal-header{align-items:center;display:grid;gap:16px;grid-template-columns:1fr auto;justify-content:space-between;overflow-wrap:break-word;padding:32px 8px 32px 0}.spui-SemiModal-closeIconButton{height:48px;width:48px;--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary)}.spui-SemiModal-headerTitle{-webkit-box-orient:vertical;color:var(--color-text-high-emphasis);display:-webkit-box;font-size:1.25em;font-weight:600;height:-moz-fit-content;height:fit-content;-webkit-line-clamp:3;line-height:1.4;margin:0;overflow:hidden;width:100%}.spui-SemiModal-contents{line-height:1.6;overflow:hidden scroll}.spui-SemiModal-contents::-webkit-scrollbar{border-radius:4px;width:8px}.spui-SemiModal-contents::-webkit-scrollbar-thumb{background:var(--color-object-low-emphasis);border-radius:4px}.spui-SemiModal-contents::-webkit-scrollbar-track:enabled{background-color:var(--color-surface-secondary);border-radius:4px}.spui-SemiModal-footer{background-color:var(--color-surface-primary);bottom:0;display:flex;padding:24px 20px 0 0}.spui-SemiModal-footer:empty{padding:0 0 36px}@media screen and (min-width:768px){.spui-SemiModal[data-type=popup][data-size=small] .spui-SemiModal-frame{max-height:400px;max-width:480px}.spui-SemiModal[data-type=popup][data-size=medium] .spui-SemiModal-frame{max-height:700px;max-width:840px}.spui-SemiModal[data-type=popup][data-size=large] .spui-SemiModal-frame{max-height:840px;max-width:1024px}.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 200px)}.spui-SemiModal[data-type=sheet][data-size=small] .spui-SemiModal-frame{max-width:480px}.spui-SemiModal[data-type=sheet][data-size=medium] .spui-SemiModal-frame{max-width:840px}.spui-SemiModal[data-type=sheet][data-size=large] .spui-SemiModal-frame{max-width:1024px}.spui-SemiModal-footer{justify-content:var(--SemiModal-footer-justifyContent)}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){min-width:var(--SemiModal-footer-button-minWidth)}}@media screen and (max-width:768px){.spui-SemiModal[data-type=sheet]{margin:auto 0 0;max-width:100%;width:100%}.spui-SemiModal[data-type=popup] .spui-SemiModal-frame,.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 40px)}.spui-SemiModal[data-type=popup]{margin:auto 20px}.spui-SemiModal-contents{max-height:100%}.spui-SemiModal-header{padding:24px 0}.spui-SemiModal-closeIconButton{height:24px;width:24px;--IconButton--neutral-onHover-backgroundColor:transparent}.spui-SemiModal-frame{padding:0 20px 24px}.spui-SemiModal-footer{justify-content:var(--SemiModal-sp-footer-justifyContent);padding:16px 0 0}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){max-width:360px;width:100%}}@keyframes spui-SemiModal-slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes spui-SemiModal-slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes spui-SemiModal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-SemiModal-fade-out{0%{opacity:1}to{opacity:0}}
3
+ );--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SemiModal-footer-justifyContent:right;--SemiModal-footer-button-minWidth:160px;--SemiModal-sp-footer-justifyContent:center}.spui-SemiModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);height:-moz-fit-content;height:fit-content;opacity:0;padding:0;position:fixed;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;width:-moz-fit-content;width:fit-content}.spui-SemiModal[data-type=sheet]{border-radius:20px 20px 0 0;bottom:0;margin:auto auto 0;transform:translateY(100%);transition:opacity .35s cubic-bezier(0,0,0,1),transform .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;will-change:translate}.spui-SemiModal--styleOnly,.spui-SemiModal[open],.spui-SemiModal[open]::backdrop{opacity:1}.spui-SemiModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s}.spui-SemiModal[data-type=sheet][open]{transform:translateY(0)}@starting-style{.spui-SemiModal[open]{opacity:0}.spui-SemiModal[open]::backdrop{opacity:0}.spui-SemiModal[data-type=sheet][open]{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.spui-SemiModal,.spui-SemiModal::backdrop{transition-duration:.01s}}html:has(.spui-SemiModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-SemiModal{width:calc(100% - 40px)}}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 2px var(--color-focus-clarity);outline:none}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-SemiModal-frame{box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;flex-direction:column;padding:0 16px 36px 36px}.spui-SemiModal-header{align-items:center;display:grid;gap:16px;grid-template-columns:1fr auto;justify-content:space-between;overflow-wrap:break-word;padding:32px 8px 32px 0}.spui-SemiModal-closeIconButton{height:48px;width:48px;--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary)}.spui-SemiModal-headerTitle{-webkit-box-orient:vertical;color:var(--color-text-high-emphasis);display:-webkit-box;font-size:1.25em;font-weight:600;height:-moz-fit-content;height:fit-content;-webkit-line-clamp:3;line-height:1.4;margin:0;overflow:hidden;width:100%}.spui-SemiModal-contents{line-height:1.6;overflow:hidden scroll}.spui-SemiModal-contents::-webkit-scrollbar{border-radius:4px;width:8px}.spui-SemiModal-contents::-webkit-scrollbar-thumb{background:var(--color-object-low-emphasis);border-radius:4px}.spui-SemiModal-contents::-webkit-scrollbar-track:enabled{background-color:var(--color-surface-secondary);border-radius:4px}.spui-SemiModal-footer{background-color:var(--color-surface-primary);bottom:0;display:flex;padding:24px 20px 0 0}.spui-SemiModal-footer:empty{padding:0 0 36px}@media screen and (min-width:768px){.spui-SemiModal[data-type=popup][data-size=small] .spui-SemiModal-frame{max-height:400px;max-width:480px}.spui-SemiModal[data-type=popup][data-size=medium] .spui-SemiModal-frame{max-height:700px;max-width:840px}.spui-SemiModal[data-type=popup][data-size=large] .spui-SemiModal-frame{max-height:840px;max-width:1024px}.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 200px)}.spui-SemiModal[data-type=sheet][data-size=small] .spui-SemiModal-frame{max-width:480px}.spui-SemiModal[data-type=sheet][data-size=medium] .spui-SemiModal-frame{max-width:840px}.spui-SemiModal[data-type=sheet][data-size=large] .spui-SemiModal-frame{max-width:1024px}.spui-SemiModal-footer{justify-content:var(--SemiModal-footer-justifyContent)}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){min-width:var(--SemiModal-footer-button-minWidth)}}@media screen and (max-width:768px){.spui-SemiModal[data-type=sheet]{margin:auto 0 0;max-width:100%;width:100%}.spui-SemiModal[data-type=popup] .spui-SemiModal-frame,.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 40px)}.spui-SemiModal[data-type=popup]{margin:auto 20px}.spui-SemiModal-contents{max-height:100%}.spui-SemiModal-header{padding:24px 0}.spui-SemiModal-closeIconButton{height:24px;width:24px;--IconButton--neutral-onHover-backgroundColor:transparent}.spui-SemiModal-frame{padding:0 20px 24px}.spui-SemiModal-footer{justify-content:var(--SemiModal-sp-footer-justifyContent);padding:16px 0 0}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){max-width:360px;width:100%}}
package/Modal/SemiModal.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SemiModal.d.ts","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAEZ,SAAS,EAKV,MAAM,OAAO,CAAC;AAKf,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzC,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9B,UAAU,cACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AAgLD,eAAO,MAAM,SAAS;;oCAlEnB,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE;yCAiBf,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;sCAWlE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE;oCAQjB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;8DAc/D,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE;CAuB5D,CAAC"}
1
+ {"version":3,"file":"SemiModal.d.ts","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAc,SAAS,EAAqB,MAAM,OAAO,CAAC;AAKxE,KAAK,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AACzC,KAAK,IAAI,GAAG,OAAO,GAAG,OAAO,CAAC;AAE9B,UAAU,cACR,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,WAAW,CAAC,EAAE,WAAW,CAAC;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;IACrD,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC;CACrD;AA8ID,eAAO,MAAM,SAAS;;oCAvEnB,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAAG;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE;yCAiBf,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC;sCAWlE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,QAAQ,EAAE,SAAS,CAAA;KAAE;oCAQjB,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC;8DAc/D,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;QAAE,IAAI,CAAC,EAAE,IAAI,CAAC;QAAC,IAAI,CAAC,EAAE,IAAI,CAAA;KAAE;CA4B5D,CAAC"}
package/Modal/SemiModal.js CHANGED
@@ -64,13 +64,8 @@ var use_callback_ref_1 = require("use-callback-ref");
64
64
  var CrossBold_1 = __importDefault(require("../Icon/CrossBold"));
65
65
  var IconButton_1 = require("../IconButton");
66
66
  var BLOCK_NAME = 'spui-SemiModal';
67
- var ANIMATION_NAME_LIST = [
68
- "".concat(BLOCK_NAME, "-fade-out"),
69
- "".concat(BLOCK_NAME, "-slide-out"),
70
- ];
71
67
  var Frame = (0, react_1.forwardRef)(function SemiModal(_a, ref) {
72
68
  var children = _a.children, open = _a.open, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.type, type = _c === void 0 ? 'popup' : _c, onClose = _a.onClose, rest = __rest(_a, ["children", "open", "size", "type", "onClose"]);
73
- var _d = (0, react_1.useState)(false), closing = _d[0], setClosing = _d[1];
74
69
  var dialogEl = (0, react_1.useRef)(null);
75
70
  // 閉じるアイコンを押した時
76
71
  var handleFormSubmit = function (event) {
@@ -89,44 +84,21 @@ var Frame = (0, react_1.forwardRef)(function SemiModal(_a, ref) {
89
84
  // Detect escape key type
90
85
  if (event.target === dialogEl.current) {
91
86
  onClose === null || onClose === void 0 ? void 0 : onClose(event);
92
- setClosing(false);
93
87
  }
94
88
  };
95
- // modalアニメーション終了時
96
- var handleAnimationEnd = (0, react_1.useCallback)(function (event) {
97
- var _a, _b;
98
- if (dialogEl.current &&
99
- ANIMATION_NAME_LIST.includes(event.animationName) &&
100
- !event.pseudoElement // To exclude ::backdrop
101
- ) {
102
- (_b = (_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.close) === null || _b === void 0 ? void 0 : _b.call(_a);
103
- }
104
- }, [dialogEl]);
105
- (0, react_1.useEffect)(function () {
106
- var _a;
107
- (_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.addEventListener('animationend', handleAnimationEnd, false);
108
- }, [handleAnimationEnd]);
109
89
  (0, react_1.useEffect)(function () {
110
- var _a, _b, _c;
90
+ var _a, _b, _c, _d;
111
91
  if (!dialogEl.current) {
112
92
  return;
113
93
  }
114
- // Remove this when browsers support :has() pseudo-class
115
- var classNameToStopScrollBehindDialog = "".concat(BLOCK_NAME, "--open");
116
94
  if (open) {
117
95
  (_b = (_a = dialogEl.current) === null || _a === void 0 ? void 0 : _a.showModal) === null || _b === void 0 ? void 0 : _b.call(_a);
118
- document.documentElement.classList.add(classNameToStopScrollBehindDialog);
119
96
  }
120
97
  else {
121
- ((_c = dialogEl.current) === null || _c === void 0 ? void 0 : _c.open) && setClosing(true);
122
- // Always remove this class to avoid unexpected scroll stopping
123
- document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
98
+ (_d = (_c = dialogEl.current) === null || _c === void 0 ? void 0 : _c.close) === null || _d === void 0 ? void 0 : _d.call(_c);
124
99
  }
125
100
  }, [open, dialogEl]);
126
- return (react_1.default.createElement("dialog", __assign({ role: "dialog", className: [BLOCK_NAME, closing && "".concat(BLOCK_NAME, "--closing")]
127
- .filter(Boolean)
128
- .join(' ')
129
- .trim(), ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size }, rest),
101
+ return (react_1.default.createElement("dialog", __assign({ role: "dialog", className: BLOCK_NAME, ref: (0, use_callback_ref_1.useMergeRefs)([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size }, rest),
130
102
  react_1.default.createElement("form", { className: "".concat(BLOCK_NAME, "-frame"), method: "dialog", onSubmit: handleFormSubmit }, children)));
131
103
  });
132
104
  var Header = function (_a) {
@@ -151,7 +123,12 @@ var Footer = function (_a) {
151
123
  };
152
124
  var StyleOnly = function (_a) {
153
125
  var className = _a.className, children = _a.children, _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.type, type = _c === void 0 ? 'popup' : _c, rest = __rest(_a, ["className", "children", "size", "type"]);
154
- return (react_1.default.createElement("div", __assign({ className: [BLOCK_NAME, "".concat(BLOCK_NAME, "--").concat(size), className]
126
+ return (react_1.default.createElement("div", __assign({ className: [
127
+ BLOCK_NAME,
128
+ "".concat(BLOCK_NAME, "--styleOnly"),
129
+ "".concat(BLOCK_NAME, "--").concat(size),
130
+ className,
131
+ ]
155
132
  .filter(Boolean)
156
133
  .join(' ')
157
134
  .trim() }, rest, { "data-type": type, "data-size": size }),
package/Modal/SemiModal.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SemiModal.js","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"SemiModal.js","sourceRoot":"","sources":["../../src/Modal/SemiModal.tsx"],"names":[],"mappings":"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"}
package/Modal/SemiModal.mjs CHANGED
@@ -1,14 +1,9 @@
1
- import React, { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
1
+ import React, { forwardRef, useEffect, useRef } from 'react';
2
2
  import { useMergeRefs } from 'use-callback-ref';
3
3
  import CrossBold from "../Icon/CrossBold.mjs";
4
4
  import { IconButton } from "../IconButton/index.mjs";
5
5
  const BLOCK_NAME = 'spui-SemiModal';
6
- const ANIMATION_NAME_LIST = [
7
- `${BLOCK_NAME}-fade-out`,
8
- `${BLOCK_NAME}-slide-out`,
9
- ];
10
6
  const Frame = forwardRef(function SemiModal({ children, open, size = 'medium', type = 'popup', onClose, ...rest }, ref) {
11
- const [closing, setClosing] = useState(false);
12
7
  const dialogEl = useRef(null);
13
8
  // 閉じるアイコンを押した時
14
9
  const handleFormSubmit = (event) => {
@@ -27,41 +22,20 @@ const Frame = forwardRef(function SemiModal({ children, open, size = 'medium', t
27
22
  // Detect escape key type
28
23
  if (event.target === dialogEl.current) {
29
24
  onClose?.(event);
30
- setClosing(false);
31
25
  }
32
26
  };
33
- // modalアニメーション終了時
34
- const handleAnimationEnd = useCallback((event) => {
35
- if (dialogEl.current &&
36
- ANIMATION_NAME_LIST.includes(event.animationName) &&
37
- !event.pseudoElement // To exclude ::backdrop
38
- ) {
39
- dialogEl.current?.close?.();
40
- }
41
- }, [dialogEl]);
42
- useEffect(() => {
43
- dialogEl.current?.addEventListener('animationend', handleAnimationEnd, false);
44
- }, [handleAnimationEnd]);
45
27
  useEffect(() => {
46
28
  if (!dialogEl.current) {
47
29
  return;
48
30
  }
49
- // Remove this when browsers support :has() pseudo-class
50
- const classNameToStopScrollBehindDialog = `${BLOCK_NAME}--open`;
51
31
  if (open) {
52
32
  dialogEl.current?.showModal?.();
53
- document.documentElement.classList.add(classNameToStopScrollBehindDialog);
54
33
  }
55
34
  else {
56
- dialogEl.current?.open && setClosing(true);
57
- // Always remove this class to avoid unexpected scroll stopping
58
- document.documentElement.classList.remove(classNameToStopScrollBehindDialog);
35
+ dialogEl.current?.close?.();
59
36
  }
60
37
  }, [open, dialogEl]);
61
- return (React.createElement("dialog", { role: "dialog", className: [BLOCK_NAME, closing && `${BLOCK_NAME}--closing`]
62
- .filter(Boolean)
63
- .join(' ')
64
- .trim(), ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size, ...rest },
38
+ return (React.createElement("dialog", { role: "dialog", className: BLOCK_NAME, ref: useMergeRefs([dialogEl, ref]), onClick: handleDialogClick, onClose: handleDialogClose, "data-type": type, "data-size": size, ...rest },
65
39
  React.createElement("form", { className: `${BLOCK_NAME}-frame`, method: "dialog", onSubmit: handleFormSubmit }, children)));
66
40
  });
67
41
  const Header = ({ children, ...rest }) => {
@@ -81,7 +55,12 @@ const Footer = ({ children, ...rest }) => {
81
55
  return (React.createElement("div", { className: `${BLOCK_NAME}-footer`, ...rest }, children));
82
56
  };
83
57
  const StyleOnly = ({ className, children, size = 'medium', type = 'popup', ...rest }) => {
84
- return (React.createElement("div", { className: [BLOCK_NAME, `${BLOCK_NAME}--${size}`, className]
58
+ return (React.createElement("div", { className: [
59
+ BLOCK_NAME,
60
+ `${BLOCK_NAME}--styleOnly`,
61
+ `${BLOCK_NAME}--${size}`,
62
+ className,
63
+ ]
85
64
  .filter(Boolean)
86
65
  .join(' ')
87
66
  .trim(), ...rest, "data-type": type, "data-size": size },
package/Modal/index.css CHANGED
@@ -1,5 +1,5 @@
1
1
  .spui-ButtonGroup{display:flex}.spui-ButtonGroup--row{flex-direction:row}.spui-ButtonGroup--column{flex-direction:column}.spui-ButtonGroup--large{gap:16px}.spui-ButtonGroup--medium,.spui-ButtonGroup--small{gap:12px}.spui-ButtonGroup--large.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:4px}.spui-ButtonGroup--medium.spui-ButtonGroup--column>.spui-SubtleButton:not(:first-child){margin-top:2px}:root{--IconButton-tapHighlightColor:var(--gray-5-alpha);--IconButton-onFocus-outlineColor:var(--color-focus-clarity);--IconButton--contained-backgroundColor:var(--color-surface-accent-primary);--IconButton--contained-color:var(--color-object-high-emphasis-inverse);--IconButton--contained-onActive-backgroundColor:var(--primary-green-100);--IconButton--contained-onHover-backgroundColor:var(--primary-green-100);--IconButton--outlined-borderColor:var(--color-border-accent-primary);--IconButton--outlined-color:var(--color-object-accent-primary);--IconButton--outlined-onActive-backgroundColor:var(--primary-green-5);--IconButton--outlined-onHover-backgroundColor:var(--primary-green-5);--IconButton--lighted-backgroundColor:var(
2
2
  --color-surface-accent-primary-light
3
- );--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);padding:0;width:400px}.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{animation:spui-AppealModal-fade-in .5s cubic-bezier(0,0,0,1)}.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop{animation:spui-AppealModal-fade-out .3s cubic-bezier(0,0,0,1)}@media (prefers-reduced-motion:reduce){.spui-AppealModal--closing,.spui-AppealModal--closing.spui-AppealModal::backdrop,.spui-AppealModal[open]:not(.spui-AppealModal--closing),.spui-AppealModal[open]:not(.spui-AppealModal--closing).spui-AppealModal::backdrop{animation-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}html.spui-AppealModal--open{overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6)}.spui-AppealModal+.backdrop{background:rgba(0,0,0,.6)}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0;grid-auto-flow:row;grid-template:"Image" "Title" "Body" "ButtonGroup" "CloseButton"/1fr;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup"/1fr 72px;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(
3
+ );--IconButton--lighted-color:var(--color-object-accent-primary);--IconButton--lighted-onActive-backgroundColor:var(--primary-green-10);--IconButton--lighted-onHover-backgroundColor:var(--primary-green-10);--IconButton--neutral-backgroundColor:var(--color-surface-tertiary);--IconButton--neutral-color:var(--color-object-medium-emphasis);--IconButton--neutral-onActive-backgroundColor:var(--gray-20-alpha);--IconButton--neutral-onHover-backgroundColor:var(--gray-20-alpha);--IconButton--danger-borderColor:var(--color-border-caution);--IconButton--danger-color:var(--color-object-caution);--IconButton--danger-onActive-backgroundColor:var(--caution-red-5-alpha);--IconButton--danger-onHover-backgroundColor:var(--caution-red-5-alpha)}.spui-IconButton{align-items:center;border-radius:100%;box-sizing:border-box;display:inline-flex;justify-content:center;margin:0;padding:0;-webkit-tap-highlight-color:var(--IconButton-tapHighlightColor);text-align:center;transition:background-color .3s}.spui-IconButton:disabled{opacity:.3}.spui-IconButton:focus{outline:2px solid var(--IconButton-onFocus-outlineColor);outline-offset:1px}.spui-IconButton:focus:not(:focus-visible){outline:none}.spui-IconButton--large{font-size:1.375em;height:48px;width:48px}.spui-IconButton--medium{font-size:1.25em;height:40px;width:40px}.spui-IconButton--small{font-size:1em;height:32px;width:32px}.spui-IconButton--exSmall{font-size:1em;height:24px;width:24px}.spui-IconButton--contained{background-color:var(--IconButton--contained-backgroundColor);border:none;color:var(--IconButton--contained-color)}.spui-IconButton--contained:active{background-color:var(--IconButton--contained-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--contained:not([disabled]):hover{background-color:var(--IconButton--contained-onHover-backgroundColor)}}.spui-IconButton--outlined{background-color:transparent;border:2px solid var(--IconButton--outlined-borderColor);color:var(--IconButton--outlined-color)}.spui-IconButton--outlined:active{background-color:var(--IconButton--outlined-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--outlined:not([disabled]):hover{background-color:var(--IconButton--outlined-onHover-backgroundColor)}}.spui-IconButton--lighted{background-color:var(--IconButton--lighted-backgroundColor);border:none;color:var(--IconButton--lighted-color);padding-bottom:8px;padding-top:8px}.spui-IconButton--lighted:active{background-color:var(--IconButton--lighted-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--lighted:not([disabled]):hover{background-color:var(--IconButton--lighted-onHover-backgroundColor)}}.spui-IconButton--neutral{background-color:var(--IconButton--neutral-backgroundColor);border:none;color:var(--IconButton--neutral-color)}.spui-IconButton--neutral:active{background-color:var(--IconButton--neutral-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--neutral:not([disabled]):hover{background-color:var(--IconButton--neutral-onHover-backgroundColor)}}.spui-IconButton--danger{background-color:transparent;border:2px solid var(--IconButton--danger-borderColor);color:var(--IconButton--danger-color)}.spui-IconButton--danger:active{background-color:var(--IconButton--danger-onActive-backgroundColor)}@media (hover:hover){.spui-IconButton--danger:hover{background-color:var(--IconButton--danger-onHover-backgroundColor)}}:root{--SubtleButton-tapHighlightColor:var(--white-60-alpha);--SubtleButton-onFocus-outlineColor:var(--color-focus-clarity);--SubtleButton-color:var(--color-text-medium-emphasis)}.spui-SubtleButton{background:none;border:none;border-radius:4px;color:var(--SubtleButton-color);font-family:inherit;font-weight:700;line-height:1.3;margin:0;padding:0;-webkit-tap-highlight-color:var(--SubtleButton-tapHighlightColor);text-align:center}.spui-SubtleButton:disabled{opacity:.3}.spui-SubtleButton:focus{outline:2px solid var(--SubtleButton-onFocus-outlineColor);outline-offset:1px}.spui-SubtleButton:focus:not(:focus-visible){outline:none}@media (hover:hover){.spui-SubtleButton:not([disabled]):hover{text-decoration:underline}}.spui-SubtleButton--large,.spui-SubtleButton--medium{font-size:.875em}.spui-SubtleButton--small{font-size:.8125em}:root{--AppealModal-image-border:1px inset var(--color-border-low-emphasis);--AppealModal-image-borderRadius:8px}.spui-AppealModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);opacity:0;padding:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s;width:400px}.spui-AppealModal--styleOnly,.spui-AppealModal[open],.spui-AppealModal[open]::backdrop{opacity:1}.spui-AppealModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .5s cubic-bezier(0,0,0,1),display allow-discrete .5s,overlay allow-discrete .5s}@starting-style{.spui-AppealModal[open]{opacity:0}.spui-AppealModal[open]::backdrop{opacity:0}}@media (prefers-reduced-motion:reduce){.spui-AppealModal,.spui-AppealModal::backdrop{transition-duration:.01s}}html:has(.spui-AppealModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-AppealModal{width:calc(100% - 48px)}}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 3px var(--color-focus-clarity);outline:none}.spui-AppealModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-AppealModal-frame{color:var(--color-text-medium-emphasis);display:grid;gap:0;grid-auto-flow:row;grid-template:"Image" "Title" "Body" "ButtonGroup" "CloseButton"/1fr;padding:0 0 24px;width:100%}.spui-AppealModal-image{grid-area:Image}.spui-AppealModal-image img{border-radius:20px 20px 0 0}.spui-AppealModal-title{color:var(--color-text-high-emphasis);font-size:1.125em;font-weight:700;grid-area:Title;line-height:1.4;margin:24px 24px 0;padding:0;text-align:center}.spui-AppealModal-body{color:var(--color-text-medium-emphasis);font-size:.875em;grid-area:Body;line-height:1.6;margin:8px 24px 0;overflow-wrap:break-word;text-align:center}.spui-AppealModal-buttonGroup{align-items:center;grid-area:ButtonGroup;justify-content:center;margin:16px 24px 0;text-align:center}.spui-AppealModal-closeIconButton,.spui-AppealModal-closeTextButton{grid-area:CloseButton}.spui-AppealModal-closeIconButton{display:none}.spui-AppealModal-closeTextButton{margin:20px 24px 0;text-align:center}.spui-AppealModal-buttonGroup :is(.spui-Button,.spui-LinkButton){max-width:240px}@media screen and (min-width:768px){.spui-AppealModal{min-height:300px;min-width:500px}.spui-AppealModal--large{width:1024px}.spui-AppealModal--medium{width:840px}.spui-AppealModal--small{width:480px}.spui-AppealModal-frame{grid-auto-flow:row;grid-template:"Title CloseButton" "Body CloseButton" "Image Image" "ButtonGroup ButtonGroup"/1fr 72px;padding:0 0 36px}.spui-AppealModal-title{margin:32px 16px 0 36px;text-align:left}.spui-AppealModal-body{margin:12px 16px 0 36px;text-align:left}.spui-AppealModal-image{margin:32px 36px 0}.spui-AppealModal-image img{border:var(--AppealModal-image-border);border-radius:var(--AppealModal-image-borderRadius);box-sizing:border-box}.spui-AppealModal-buttonGroup{margin:16px 36px 0}.spui-AppealModal-closeIconButton{--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(
4
4
  --color-surface-tertiary
5
- );display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}@keyframes spui-AppealModal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-AppealModal-fade-out{0%{opacity:1}to{opacity:0}}:root{--SemiModal-footer-justifyContent:right;--SemiModal-footer-button-minWidth:160px;--SemiModal-sp-footer-justifyContent:center}.spui-SemiModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);height:-moz-fit-content;height:fit-content;padding:0;position:fixed;width:-moz-fit-content;width:fit-content}.spui-SemiModal[data-type=sheet]{border-radius:20px 20px 0 0;bottom:0;margin:auto auto 0;transform:translateY(100%);will-change:translate}.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing),.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop,.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop{animation:spui-SemiModal-fade-in .35s cubic-bezier(0,0,0,1)}.spui-SemiModal--closing.spui-SemiModal[data-type=popup],.spui-SemiModal--closing[data-type=popup].spui-SemiModal::backdrop,.spui-SemiModal--closing[data-type=sheet].spui-SemiModal::backdrop{animation:spui-SemiModal-fade-out .35s cubic-bezier(0,0,0,1)}.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing,button){animation:spui-SemiModal-slide-in .35s cubic-bezier(0,0,0,1) both}.spui-SemiModal--closing.spui-SemiModal[data-type=sheet]{animation:spui-SemiModal-slide-out .35s cubic-bezier(0,0,0,1) both}@media (prefers-reduced-motion:reduce){.spui-SemiModal--closing.spui-SemiModal[data-type=popup]::backdrop,.spui-SemiModal--closing.spui-SemiModal[data-type=sheet]::backdrop,.spui-SemiModal[data-type=popup].spui-SemiModal--closing,.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing),.spui-SemiModal[data-type=popup][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop,.spui-SemiModal[data-type=sheet].spui-SemiModal--closing,.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing),.spui-SemiModal[data-type=sheet][open]:not(.spui-SemiModal--closing).spui-SemiModal::backdrop{animation-duration:.01s}}html:has(.spui-SemiModal[open]){overflow:hidden}html.spui-SemiModal--open{overflow:hidden}@media screen and (max-width:440px){.spui-SemiModal{width:calc(100% - 40px)}}.spui-SemiModal::backdrop{background:rgba(0,0,0,.6)}.spui-SemiModal+.backdrop{background:rgba(0,0,0,.6)}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 2px var(--color-focus-clarity);outline:none}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-SemiModal-frame{box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;flex-direction:column;padding:0 16px 36px 36px}.spui-SemiModal-header{align-items:center;display:grid;gap:16px;grid-template-columns:1fr auto;justify-content:space-between;overflow-wrap:break-word;padding:32px 8px 32px 0}.spui-SemiModal-closeIconButton{height:48px;width:48px;--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary)}.spui-SemiModal-headerTitle{-webkit-box-orient:vertical;color:var(--color-text-high-emphasis);display:-webkit-box;font-size:1.25em;font-weight:600;height:-moz-fit-content;height:fit-content;-webkit-line-clamp:3;line-height:1.4;margin:0;overflow:hidden;width:100%}.spui-SemiModal-contents{line-height:1.6;overflow:hidden scroll}.spui-SemiModal-contents::-webkit-scrollbar{border-radius:4px;width:8px}.spui-SemiModal-contents::-webkit-scrollbar-thumb{background:var(--color-object-low-emphasis);border-radius:4px}.spui-SemiModal-contents::-webkit-scrollbar-track:enabled{background-color:var(--color-surface-secondary);border-radius:4px}.spui-SemiModal-footer{background-color:var(--color-surface-primary);bottom:0;display:flex;padding:24px 20px 0 0}.spui-SemiModal-footer:empty{padding:0 0 36px}@media screen and (min-width:768px){.spui-SemiModal[data-type=popup][data-size=small] .spui-SemiModal-frame{max-height:400px;max-width:480px}.spui-SemiModal[data-type=popup][data-size=medium] .spui-SemiModal-frame{max-height:700px;max-width:840px}.spui-SemiModal[data-type=popup][data-size=large] .spui-SemiModal-frame{max-height:840px;max-width:1024px}.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 200px)}.spui-SemiModal[data-type=sheet][data-size=small] .spui-SemiModal-frame{max-width:480px}.spui-SemiModal[data-type=sheet][data-size=medium] .spui-SemiModal-frame{max-width:840px}.spui-SemiModal[data-type=sheet][data-size=large] .spui-SemiModal-frame{max-width:1024px}.spui-SemiModal-footer{justify-content:var(--SemiModal-footer-justifyContent)}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){min-width:var(--SemiModal-footer-button-minWidth)}}@media screen and (max-width:768px){.spui-SemiModal[data-type=sheet]{margin:auto 0 0;max-width:100%;width:100%}.spui-SemiModal[data-type=popup] .spui-SemiModal-frame,.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 40px)}.spui-SemiModal[data-type=popup]{margin:auto 20px}.spui-SemiModal-contents{max-height:100%}.spui-SemiModal-header{padding:24px 0}.spui-SemiModal-closeIconButton{height:24px;width:24px;--IconButton--neutral-onHover-backgroundColor:transparent}.spui-SemiModal-frame{padding:0 20px 24px}.spui-SemiModal-footer{justify-content:var(--SemiModal-sp-footer-justifyContent);padding:16px 0 0}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){max-width:360px;width:100%}}@keyframes spui-SemiModal-slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes spui-SemiModal-slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}@keyframes spui-SemiModal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes spui-SemiModal-fade-out{0%{opacity:1}to{opacity:0}}
5
+ );display:inline-flex;margin:36px 0 0}.spui-AppealModal-closeTextButton{display:none}}:root{--SemiModal-footer-justifyContent:right;--SemiModal-footer-button-minWidth:160px;--SemiModal-sp-footer-justifyContent:center}.spui-SemiModal{background:var(--color-surface-primary);border:none;border-radius:20px;box-shadow:0 11px 28px rgba(8,18,26,.12);height:-moz-fit-content;height:fit-content;opacity:0;padding:0;position:fixed;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;width:-moz-fit-content;width:fit-content}.spui-SemiModal[data-type=sheet]{border-radius:20px 20px 0 0;bottom:0;margin:auto auto 0;transform:translateY(100%);transition:opacity .35s cubic-bezier(0,0,0,1),transform .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s;will-change:translate}.spui-SemiModal--styleOnly,.spui-SemiModal[open],.spui-SemiModal[open]::backdrop{opacity:1}.spui-SemiModal::backdrop{background:rgba(0,0,0,.6);opacity:0;transition:opacity .35s cubic-bezier(0,0,0,1),display allow-discrete .35s,overlay allow-discrete .35s}.spui-SemiModal[data-type=sheet][open]{transform:translateY(0)}@starting-style{.spui-SemiModal[open]{opacity:0}.spui-SemiModal[open]::backdrop{opacity:0}.spui-SemiModal[data-type=sheet][open]{transform:translateY(100%)}}@media (prefers-reduced-motion:reduce){.spui-SemiModal,.spui-SemiModal::backdrop{transition-duration:.01s}}html:has(.spui-SemiModal[open]){overflow:hidden}@media screen and (max-width:440px){.spui-SemiModal{width:calc(100% - 40px)}}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus{box-shadow:0 0 0 1px var(--color-surface-secondary),0 0 0 2px var(--color-focus-clarity);outline:none}.spui-SemiModal :is(.spui-Button,.spui-LinkButton,.spui-IconButton,.spui-SubtleButton):focus:not(:focus-visible){box-shadow:none}.spui-SemiModal-frame{box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;flex-direction:column;padding:0 16px 36px 36px}.spui-SemiModal-header{align-items:center;display:grid;gap:16px;grid-template-columns:1fr auto;justify-content:space-between;overflow-wrap:break-word;padding:32px 8px 32px 0}.spui-SemiModal-closeIconButton{height:48px;width:48px;--IconButton--neutral-backgroundColor:transparent;--IconButton--neutral-onHover-backgroundColor:var(--color-surface-tertiary)}.spui-SemiModal-headerTitle{-webkit-box-orient:vertical;color:var(--color-text-high-emphasis);display:-webkit-box;font-size:1.25em;font-weight:600;height:-moz-fit-content;height:fit-content;-webkit-line-clamp:3;line-height:1.4;margin:0;overflow:hidden;width:100%}.spui-SemiModal-contents{line-height:1.6;overflow:hidden scroll}.spui-SemiModal-contents::-webkit-scrollbar{border-radius:4px;width:8px}.spui-SemiModal-contents::-webkit-scrollbar-thumb{background:var(--color-object-low-emphasis);border-radius:4px}.spui-SemiModal-contents::-webkit-scrollbar-track:enabled{background-color:var(--color-surface-secondary);border-radius:4px}.spui-SemiModal-footer{background-color:var(--color-surface-primary);bottom:0;display:flex;padding:24px 20px 0 0}.spui-SemiModal-footer:empty{padding:0 0 36px}@media screen and (min-width:768px){.spui-SemiModal[data-type=popup][data-size=small] .spui-SemiModal-frame{max-height:400px;max-width:480px}.spui-SemiModal[data-type=popup][data-size=medium] .spui-SemiModal-frame{max-height:700px;max-width:840px}.spui-SemiModal[data-type=popup][data-size=large] .spui-SemiModal-frame{max-height:840px;max-width:1024px}.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 200px)}.spui-SemiModal[data-type=sheet][data-size=small] .spui-SemiModal-frame{max-width:480px}.spui-SemiModal[data-type=sheet][data-size=medium] .spui-SemiModal-frame{max-width:840px}.spui-SemiModal[data-type=sheet][data-size=large] .spui-SemiModal-frame{max-width:1024px}.spui-SemiModal-footer{justify-content:var(--SemiModal-footer-justifyContent)}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){min-width:var(--SemiModal-footer-button-minWidth)}}@media screen and (max-width:768px){.spui-SemiModal[data-type=sheet]{margin:auto 0 0;max-width:100%;width:100%}.spui-SemiModal[data-type=popup] .spui-SemiModal-frame,.spui-SemiModal[data-type=sheet] .spui-SemiModal-frame{max-height:calc(100dvh - 40px)}.spui-SemiModal[data-type=popup]{margin:auto 20px}.spui-SemiModal-contents{max-height:100%}.spui-SemiModal-header{padding:24px 0}.spui-SemiModal-closeIconButton{height:24px;width:24px;--IconButton--neutral-onHover-backgroundColor:transparent}.spui-SemiModal-frame{padding:0 20px 24px}.spui-SemiModal-footer{justify-content:var(--SemiModal-sp-footer-justifyContent);padding:16px 0 0}.spui-SemiModal-footer :is(.spui-Button,.spui-LinkButton){max-width:360px;width:100%}}
package/Pagination/Pagination.css CHANGED
@@ -1 +1 @@
1
- .spui-PaginationItem-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;font-size:.875em;font-weight:700;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-PaginationItem-link--first[aria-disabled],.spui-PaginationItem-link--last[aria-disabled],.spui-PaginationItem-link--next[aria-disabled],.spui-PaginationItem-link--prev[aria-disabled]{opacity:.3}.spui-PaginationItem-link[aria-disabled]:focus-visible{outline:none}.spui-PaginationItem-link:not([aria-disabled]):focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-PaginationItem-icon{box-sizing:border-box;height:24px;padding:0 4px;width:24px}.spui-PaginationItem-link--prev{flex-direction:row-reverse}.spui-PaginationItem-link--prev .spui-PaginationItem-label{padding-right:8px}.spui-PaginationItem-link--next .spui-PaginationItem-label{padding-left:8px}@media (hover:hover){.spui-PaginationItem-link:not([aria-disabled]):hover{background:var(--color-surface-tertiary)}}@container spui-pagination (max-width: 768px){.spui-PaginationItem-label{display:none}}:root{--Pagination-tapHighlightColor:var(--color-tap-highlight-base)}.spui-Pagination{align-items:center;container:spui-pagination/inline-size;display:flex;flex-direction:column}.spui-Pagination-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Pagination-item{align-items:center;display:flex;margin:0 5px}.spui-Pagination-item--first,.spui-Pagination-item--last{margin:0}.spui-Pagination-ellipsis{color:var(--color-object-low-emphasis)}.spui-Pagination-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;display:flex;font-size:.875em;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0 10px;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-Pagination-link:not([aria-current]){background:var(--color-surface-tertiary);color:var(--color-text-medium-emphasis);font-weight:700}.spui-Pagination-link:focus:not(:focus-visible){outline:none}.spui-Pagination-link[aria-current]{border:1px solid var(--color-border-low-emphasis);color:var(--color-text-low-emphasis)}.spui-Pagination-link:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}@media (hover:hover){.spui-Pagination-link:not([aria-current]):hover{background-color:var(--color-surface-quaternary)}}.spui-Pagination-total{color:var(--color-text-low-emphasis);font-size:.8125em;line-height:1.3;margin:12px 0 0;padding:0}.spui-Pagination-link+.spui-Pagination-ellipsis{margin-left:10px}@container spui-pagination (max-width: 360px){.spui-Pagination-item--first,.spui-Pagination-item--last{display:none}}
1
+ .spui-PaginationItem-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;color:var(--color-text-medium-emphasis);display:flex;font-size:.875em;font-weight:700;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-PaginationItem-link--first:disabled,.spui-PaginationItem-link--last:disabled,.spui-PaginationItem-link--next:disabled,.spui-PaginationItem-link--prev:disabled{opacity:.3}.spui-PaginationItem-link:not(:disabled):focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}.spui-PaginationItem-icon{box-sizing:border-box;height:24px;padding:0 4px;width:24px}.spui-PaginationItem-link--prev{flex-direction:row-reverse}.spui-PaginationItem-link--prev .spui-PaginationItem-label{padding-right:8px}.spui-PaginationItem-link--next .spui-PaginationItem-label{padding-left:8px}@media (hover:hover){.spui-PaginationItem-link:not(:disabled):hover{background:var(--color-surface-tertiary)}}@container spui-pagination (max-width: 768px){.spui-PaginationItem-label{display:none}}:root{--Pagination-tapHighlightColor:var(--color-tap-highlight-base)}.spui-Pagination{align-items:center;container:spui-pagination/inline-size;display:flex;flex-direction:column}.spui-Pagination-list{align-items:center;display:flex;list-style:none;margin:0;padding:0}.spui-Pagination-item{align-items:center;display:flex;margin:0 5px}.spui-Pagination-item--first,.spui-Pagination-item--last{margin:0}.spui-Pagination-ellipsis{color:var(--color-object-low-emphasis)}.spui-Pagination-link{align-items:center;background:none;border:none;border-radius:12px;box-sizing:border-box;display:flex;font-size:.875em;height:40px;justify-content:center;line-height:1.3;margin:0;min-width:40px;padding:0 10px;position:relative;-webkit-tap-highlight-color:var(--Pagination-tapHighlightColor);text-decoration:none}.spui-Pagination-link:not([aria-current]){background:var(--color-surface-tertiary);color:var(--color-text-medium-emphasis);font-weight:700}.spui-Pagination-link:focus:not(:focus-visible){outline:none}.spui-Pagination-link[aria-current]{border:1px solid var(--color-border-low-emphasis);color:var(--color-text-low-emphasis)}.spui-Pagination-link:focus-visible{outline:2px solid var(--color-focus-clarity);outline-offset:1px}@media (hover:hover){.spui-Pagination-link:not([aria-current]):hover{background-color:var(--color-surface-quaternary)}}.spui-Pagination-total{color:var(--color-text-low-emphasis);font-size:.8125em;line-height:1.3;margin:12px 0 0;padding:0}.spui-Pagination-link+.spui-Pagination-ellipsis{margin-left:10px}@container spui-pagination (max-width: 360px){.spui-Pagination-item--first,.spui-Pagination-item--last{display:none}}