Delete Expand Button

[{"id":"c2e4073c-b2ed-4af2-ae4c-fc80c18160de","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"437788c5-3a63-49e0-8098-a9855661654e","type":"sandpack","props":{"files":"[{\"id\":\"/styles.css\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: Arial, Helvetica, sans-serif;\\n background: #ffffff;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.button {\\n width: 50px;\\n height: 50px;\\n border-radius: 50%;\\n background-color: rgb(20, 20, 20);\\n border: none;\\n font-weight: 600;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n overflow: hidden;\\n position: relative;\\n -webkit-tap-highlight-color: transparent;\\n outline: none;\\n}\\n\\n.button:active {\\n transform: scale(0.93);\\n transition-duration: 0.1s;\\n}\\n\\n.button:focus-visible {\\n outline: 3px solid rgba(239, 68, 68, 0.4);\\n outline-offset: 4px;\\n}\\n\\n.svgIcon {\\n width: 12px;\\n transition-duration: 0.3s;\\n}\\n\\n.svgIcon path {\\n fill: white;\\n}\\n\\n.button:hover {\\n width: 140px;\\n border-radius: 50px;\\n transition-duration: 0.3s;\\n background-color: red;\\n align-items: center;\\n}\\n\\n.button:hover .svgIcon {\\n width: 50px;\\n transition-duration: 0.3s;\\n transform: translateY(60%);\\n}\\n\\n.button::before {\\n position: absolute;\\n top: -20px;\\n content: \\\"Delete\\\";\\n color: white;\\n transition-duration: 0.3s;\\n font-size: 2px;\\n}\\n\\n.button:hover::before {\\n font-size: 13px;\\n opacity: 1;\\n transform: translateY(30px);\\n transition-duration: 0.3s;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button,\\n .svgIcon,\\n .button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"},{\"id\":\"/index.html\",\"name\":\"index.html\",\"code\":\"\\n\\n \\n \\n \\n Delete Expand Button\\n \\n \\n \\n

\\n \\n

\\n\\n \\n \\n\",\"language\":\"html\"},{\"id\":\"/package.json\",\"name\":\"package.json\",\"code\":\"{\\n \\\"dependencies\\\": {},\\n \\\"main\\\": \\\"/index.html\\\",\\n \\\"devDependencies\\\": {}\\n}\",\"language\":\"json\"}]","template":"vanilla-ts","activeFile":"/index.html","viewMode":"both","width":"100%","mobileWidth":"100%","height":"auto","mobileHeight":"auto","emptyFolders":"[]"},"children":[]},{"id":"347fc68d-4bc3-44f1-bd18-a03e51453f7c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]},{"id":"35955c12-5e64-415a-a862-a27a42c07f37","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 1: Add HTML ","styles":{}}],"children":[]},{"id":"2d7ccc34-b6c1-4633-a461-ce08e0799123","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"x01ix1d1f\",\"name\":\"index.html\",\"code\":\"

\\n \\n

\",\"language\":\"html\"}]","width":"100%","height":"auto"},"children":[]},{"id":"67b59fb7-901b-4234-bb36-17fbae18ef71","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Step 2: Add CSS","styles":{}}],"children":[]},{"id":"4bfd610f-4c01-42b8-b015-0ae8856561c7","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"2my9dcnjf\",\"name\":\"styles.css\",\"code\":\"* {\\n box-sizing: border-box;\\n}\\n\\nhtml,\\nbody {\\n min-height: 100%;\\n}\\n\\nbody {\\n margin: 0;\\n font-family: Arial, Helvetica, sans-serif;\\n background: #ffffff;\\n}\\n\\n.page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\\n\\n.button {\\n width: 50px;\\n height: 50px;\\n border-radius: 50%;\\n background-color: rgb(20, 20, 20);\\n border: none;\\n font-weight: 600;\\n display: flex;\\n align-items: center;\\n justify-content: center;\\n box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.164);\\n cursor: pointer;\\n transition: all 0.3s ease;\\n overflow: hidden;\\n position: relative;\\n -webkit-tap-highlight-color: transparent;\\n outline: none;\\n}\\n\\n.button:active {\\n transform: scale(0.93);\\n transition-duration: 0.1s;\\n}\\n\\n.button:focus-visible {\\n outline: 3px solid rgba(239, 68, 68, 0.4);\\n outline-offset: 4px;\\n}\\n\\n.svgIcon {\\n width: 12px;\\n transition-duration: 0.3s;\\n}\\n\\n.svgIcon path {\\n fill: white;\\n}\\n\\n.button:hover {\\n width: 140px;\\n border-radius: 50px;\\n transition-duration: 0.3s;\\n background-color: red;\\n align-items: center;\\n}\\n\\n.button:hover .svgIcon {\\n width: 50px;\\n transition-duration: 0.3s;\\n transform: translateY(60%);\\n}\\n\\n.button::before {\\n position: absolute;\\n top: -20px;\\n content: \\\"Delete\\\";\\n color: white;\\n transition-duration: 0.3s;\\n font-size: 2px;\\n}\\n\\n.button:hover::before {\\n font-size: 13px;\\n opacity: 1;\\n transform: translateY(30px);\\n transition-duration: 0.3s;\\n}\\n\\n@media (prefers-reduced-motion: reduce) {\\n .button,\\n .svgIcon,\\n .button::before {\\n transition: none;\\n }\\n}\",\"language\":\"css\"}]","width":"100%","height":"auto"},"children":[]},{"id":"94a32c1a-d805-4ddc-8c9d-e7e2ebe4ee13","type":"divider","props":{},"children":[]},{"id":"65dc6448-9a6c-4948-aad1-7a15842659e4","type":"heading","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left","level":2,"isToggleable":false},"content":[{"type":"text","text":"Implementation","styles":{}}],"children":[]},{"id":"ea45657a-22bc-4364-a3ab-421a57f1978e","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Purpose\nThis component creates a circular delete icon button. On hover, the button expands horizontally, changes from black to red, moves the trash icon downward, and reveals the ","styles":{}},{"type":"text","text":"Delete","styles":{"code":true}},{"type":"text","text":" text from the top.","styles":{}}],"children":[]},{"id":"5142ec1a-eb64-4646-a34f-696a5369f67f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Structure Flow","styles":{}}],"children":[]},{"id":"95025bf9-520d-402c-a191-06e3fcb86481","type":"procode","props":{"code":"Page\n└── button.button\n ├── ::before text layer\n └── svg.svgIcon\n └── trash path","language":"javascript","filename":"","files":"[{\"id\":\"f7ax2k4wo\",\"name\":\"code\",\"code\":\"Page\\n└── button.button\\n ├── ::before text layer\\n └── svg.svgIcon\\n └── trash path\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"50c76f85-deb6-4484-8012-3cfb66631cd6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"HTML Flow","styles":{}}],"children":[]},{"id":"42a8bdff-f509-418e-87f8-2142a72ec420","type":"procode","props":{"code":"","language":"javascript","filename":"","files":"[{\"id\":\"rto3a9ns0\",\"name\":\"code\",\"code\":\"\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"28bc2a50-d178-471b-b04f-a2f20acf3de3","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The button contains only the trash SVG icon.\n\nThe text ","styles":{}},{"type":"text","text":"Delete","styles":{"code":true}},{"type":"text","text":" is created from CSS using ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"5d57e1d0-ac0e-4490-9280-19fb9f4fd4af","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layout Flow","styles":{}}],"children":[]},{"id":"b73d010e-422d-48ba-88ec-b7c136296c75","type":"procode","props":{"code":".page {\n min-height: 100vh;\n display: grid;\n place-items: center;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ifr9bs9jp\",\"name\":\"code\",\"code\":\".page {\\n min-height: 100vh;\\n display: grid;\\n place-items: center;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"90f5d33f-6441-452a-8c0d-ade8e17f3519","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":".page","styles":{"code":true}},{"type":"text","text":" class centers the button in the viewport.","styles":{}}],"children":[]},{"id":"907673ad-651b-42b1-b2de-cca7c2bb96a6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Button Base Flow","styles":{}}],"children":[]},{"id":"56070ba0-5fd1-463a-b7b9-5c20c6cddd4f","type":"procode","props":{"code":".button {\n width: 50px;\n height: 50px;\n border-radius: 50%;\n background-color: rgb(20, 20, 20);\n overflow: hidden;\n position: relative;\n}","language":"javascript","filename":"","files":"[{\"id\":\"i57345oh0\",\"name\":\"code\",\"code\":\".button {\\n width: 50px;\\n height: 50px;\\n border-radius: 50%;\\n background-color: rgb(20, 20, 20);\\n overflow: hidden;\\n position: relative;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ce5f3dba-03b4-4287-a4f2-0af23074e969","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Default state:","styles":{}}],"children":[]},{"id":"a1e9352f-d90f-4a33-84b1-6377eb9187d0","type":"procode","props":{"code":"width: 50px\nheight: 50px\nshape: circle\nbackground: black\ncontent: trash icon only","language":"javascript","filename":"","files":"[{\"id\":\"cbja9cie5\",\"name\":\"code\",\"code\":\"width: 50px\\nheight: 50px\\nshape: circle\\nbackground: black\\ncontent: trash icon only\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d28302bc-0770-4841-9570-eb33ab4d5e9d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"position: relative","styles":{"code":true}},{"type":"text","text":" allows the ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" text layer to be positioned inside the button.","styles":{}}],"children":[]},{"id":"d49e373c-eaca-487e-931e-d066cefa3250","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Flow","styles":{}}],"children":[]},{"id":"7771404c-e60c-4c0c-b523-162b9bb0a128","type":"procode","props":{"code":".svgIcon {\n width: 12px;\n transition-duration: 0.3s;\n}\n\n.svgIcon path {\n fill: white;\n}","language":"javascript","filename":"","files":"[{\"id\":\"np1omg8k4\",\"name\":\"code\",\"code\":\".svgIcon {\\n width: 12px;\\n transition-duration: 0.3s;\\n}\\n\\n.svgIcon path {\\n fill: white;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d2ce7168-4c2f-4345-8a67-14d85f612e37","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The trash icon starts small at ","styles":{}},{"type":"text","text":"12px","styles":{"code":true}},{"type":"text","text":", and the path fill is white.","styles":{}}],"children":[]},{"id":"1ebb8638-d215-4f80-a7f0-826b2d7b8e87","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hidden Text Flow","styles":{}}],"children":[]},{"id":"7acdadd6-efe8-4841-b238-b89b57dcbcf2","type":"procode","props":{"code":".button::before {\n position: absolute;\n top: -20px;\n content: \"Delete\";\n color: white;\n transition-duration: 0.3s;\n font-size: 2px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"ovu6t90pp\",\"name\":\"code\",\"code\":\".button::before {\\n position: absolute;\\n top: -20px;\\n content: \\\"Delete\\\";\\n color: white;\\n transition-duration: 0.3s;\\n font-size: 2px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"cd1030a9-569c-46bd-9901-69e6404e3341","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"Delete","styles":{"code":true}},{"type":"text","text":" text starts above the button with ","styles":{}},{"type":"text","text":"top: -20px","styles":{"code":true}},{"type":"text","text":".","styles":{}}],"children":[]},{"id":"30cce3cc-0598-4629-8af5-e04b896b7bd5","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"It is also very small at first:","styles":{}}],"children":[]},{"id":"8f237b02-794c-4ccf-b505-3d5ade08d129","type":"procode","props":{"code":"font-size: 2px\nposition: above button","language":"javascript","filename":"","files":"[{\"id\":\"qt4b196h9\",\"name\":\"code\",\"code\":\"font-size: 2px\\nposition: above button\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"0eb96762-380c-48ea-922f-6605d2eaf6b8","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover Button Flow","styles":{}}],"children":[]},{"id":"7dd836ad-e862-44e6-8256-be20f179d604","type":"procode","props":{"code":".button:hover {\n width: 140px;\n border-radius: 50px;\n background-color: red;\n}","language":"javascript","filename":"","files":"[{\"id\":\"vylf1xbj7\",\"name\":\"code\",\"code\":\".button:hover {\\n width: 140px;\\n border-radius: 50px;\\n background-color: red;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"c5aa991b-03bb-41b5-b697-be0523bdea96","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the button changes from a circle into a pill.","styles":{}}],"children":[]},{"id":"519829e8-5e74-4fdc-8470-ea7e5d757a28","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Hover state:","styles":{}}],"children":[]},{"id":"b098abfb-7143-4920-9da7-914050cb8bce","type":"procode","props":{"code":"width: 140px\nborder-radius: 50px\nbackground: red","language":"javascript","filename":"","files":"[{\"id\":\"2oft0znu0\",\"name\":\"code\",\"code\":\"width: 140px\\nborder-radius: 50px\\nbackground: red\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"3a92498f-444e-4926-8ddf-95f2db2190c6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Icon Hover Flow","styles":{}}],"children":[]},{"id":"162ba9d7-be76-4e54-8fae-4fbdc0e78dd4","type":"procode","props":{"code":".button:hover .svgIcon {\n width: 50px;\n transform: translateY(60%);\n}","language":"javascript","filename":"","files":"[{\"id\":\"odft52uvz\",\"name\":\"code\",\"code\":\".button:hover .svgIcon {\\n width: 50px;\\n transform: translateY(60%);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"d0c50472-6d02-498e-bd89-a13fbb9ce485","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the trash icon grows and moves downward.","styles":{}}],"children":[]},{"id":"dbdc91ef-260e-4e2f-90ac-759712830754","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"b0b17c05-3ffc-4661-acdd-6daadbbdb667","type":"procode","props":{"code":"small trash icon\n↓\nhover\n↓\nicon grows to 50px\n↓\nicon moves down by 60%","language":"javascript","filename":"","files":"[{\"id\":\"oqq4vj5gx\",\"name\":\"code\",\"code\":\"small trash icon\\n↓\\nhover\\n↓\\nicon grows to 50px\\n↓\\nicon moves down by 60%\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"e4bdbe59-23a8-41a5-bb3d-72589a535b26","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Text Reveal Flow","styles":{}}],"children":[]},{"id":"7472ec8e-a686-47cc-9df8-b6044b86750e","type":"procode","props":{"code":".button:hover::before {\n font-size: 13px;\n opacity: 1;\n transform: translateY(30px);\n}","language":"javascript","filename":"","files":"[{\"id\":\"kfdelu6mo\",\"name\":\"code\",\"code\":\".button:hover::before {\\n font-size: 13px;\\n opacity: 1;\\n transform: translateY(30px);\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"7e16f348-6198-4337-bf04-1817b9255f44","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"On hover, the ","styles":{}},{"type":"text","text":"Delete","styles":{"code":true}},{"type":"text","text":" text moves down into the visible area.","styles":{}}],"children":[]},{"id":"bfaea325-3a10-4d3b-9828-fe0b21c8da96","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Flow:","styles":{}}],"children":[]},{"id":"a25b05a7-4269-471f-ad57-57a44a1386ff","type":"procode","props":{"code":"Delete text starts above button\n↓\nhover\n↓\ntext moves down 30px\n↓\ntext becomes readable","language":"javascript","filename":"","files":"[{\"id\":\"pngrrjlz3\",\"name\":\"code\",\"code\":\"Delete text starts above button\\n↓\\nhover\\n↓\\ntext moves down 30px\\n↓\\ntext becomes readable\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"76f4ded2-5c46-4f1d-8eb0-216eaf0df11b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Animation Flow","styles":{}}],"children":[]},{"id":"8c9b07da-a004-4468-b5a2-dddc02faca67","type":"procode","props":{"code":"Default\n↓\nBlack circular button\n↓\nSmall white trash icon\n↓\nUser hovers\n↓\nButton expands into red pill\n↓\nTrash icon grows and moves down\n↓\nDelete text slides down from top","language":"javascript","filename":"","files":"[{\"id\":\"rsvigmqzh\",\"name\":\"code\",\"code\":\"Default\\n↓\\nBlack circular button\\n↓\\nSmall white trash icon\\n↓\\nUser hovers\\n↓\\nButton expands into red pill\\n↓\\nTrash icon grows and moves down\\n↓\\nDelete text slides down from top\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"80de8306-a924-4da6-8aeb-3756b2fbef2f","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Active Flow","styles":{}}],"children":[]},{"id":"82070a3e-d60d-43c8-90f8-3a9b225bacfc","type":"procode","props":{"code":".button:active {\n transform: scale(0.93);\n transition-duration: 0.1s;\n}","language":"javascript","filename":"","files":"[{\"id\":\"rj2j2kv2h\",\"name\":\"code\",\"code\":\".button:active {\\n transform: scale(0.93);\\n transition-duration: 0.1s;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"8181b9b1-0220-4de4-a133-99c3f542ec65","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"When clicked, the button scales down slightly for a press effect.","styles":{}}],"children":[]},{"id":"5147bf84-aee8-4f03-b84a-8fcb9ce10652","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Focus Flow","styles":{}}],"children":[]},{"id":"0765cce9-460f-4ece-b955-377271442c51","type":"procode","props":{"code":".button:focus-visible {\n outline: 3px solid rgba(239, 68, 68, 0.4);\n outline-offset: 4px;\n}","language":"javascript","filename":"","files":"[{\"id\":\"dftrurwpt\",\"name\":\"code\",\"code\":\".button:focus-visible {\\n outline: 3px solid rgba(239, 68, 68, 0.4);\\n outline-offset: 4px;\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"bac59174-b69b-4f72-bc2c-abb9c1b4d26c","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Keyboard focus shows a red outline around the button.","styles":{}}],"children":[]},{"id":"8c7d3932-9c3d-4fef-ba72-197aa7127ba4","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Reduced Motion Flow","styles":{}}],"children":[]},{"id":"a9b9f4e1-eec3-4f2a-847e-e5c2f82ab57d","type":"procode","props":{"code":"@media (prefers-reduced-motion: reduce) {\n .button,\n .svgIcon,\n .button::before {\n transition: none;\n }\n}","language":"javascript","filename":"","files":"[{\"id\":\"4kngt1mlq\",\"name\":\"code\",\"code\":\"@media (prefers-reduced-motion: reduce) {\\n .button,\\n .svgIcon,\\n .button::before {\\n transition: none;\\n }\\n}\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"4799e28e-a130-425a-9267-c355c380573d","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"For reduced motion users, the hover transition is disabled.","styles":{}}],"children":[]},{"id":"760c7054-0131-47b0-922a-cb4553f5985b","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"Layer Flow","styles":{}}],"children":[]},{"id":"c4863aa6-191d-4beb-b0f3-28660e24ab16","type":"procode","props":{"code":"button\n├── ::before Delete text\n└── svg trash icon","language":"javascript","filename":"","files":"[{\"id\":\"did4kgblt\",\"name\":\"code\",\"code\":\"button\\n├── ::before Delete text\\n└── svg trash icon\",\"language\":\"javascript\"}]","width":"100%","height":"auto"},"children":[]},{"id":"ced91f54-e00d-46d6-96d4-1db7efe45bbf","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[{"type":"text","text":"The ","styles":{}},{"type":"text","text":"::before","styles":{"code":true}},{"type":"text","text":" text and SVG icon both animate inside the same button container.\n\nThe button uses ","styles":{}},{"type":"text","text":"overflow: hidden","styles":{"code":true}},{"type":"text","text":", so the text stays clipped until it moves into the visible area.","styles":{}}],"children":[]},{"id":"20b7f512-6f9d-4539-8be8-ac8535de2ed6","type":"paragraph","props":{"backgroundColor":"default","textColor":"default","textAlignment":"left"},"content":[],"children":[]}]