diff --git a/docs/ui-visual-contract-0.8.json b/docs/ui-visual-contract-0.8.json index b84d976f..eb733624 100644 --- a/docs/ui-visual-contract-0.8.json +++ b/docs/ui-visual-contract-0.8.json @@ -2,28 +2,28 @@ "schemaVersion": 1, "releaseLine": "0.8", "artifacts": { - "packages/ui/components/Accordion.wrn": "2b2e756a2197052bbcaf7499d01ec4b68b53a3acaf4524b7ca6424b71ba2e9a3", + "packages/ui/components/Accordion.wrn": "98e6897d7dee2045fbc66e23d8a0b5051114d43f1c75234a2a6c5165132eb706", "packages/ui/components/AdvancedDatePicker.wrn": "b9b5b08e9464544837a5400bbf9a2cb25724fac037fe196a219b42e5841ad672", "packages/ui/components/AdvancedRangeSlider.wrn": "e78b5cf825503d0cd306c6e490d71317ee3db1844882d13b500df1f7f1c408e1", - "packages/ui/components/AdvancedSelect.wrn": "29d43f8019a3e0e98af7cf12440f41523665535a39a973441b4faea78e67114a", + "packages/ui/components/AdvancedSelect.wrn": "af4254f1882458ce0631bd82e56cd09e540113c0636db2d98756ae730c1b535b", "packages/ui/components/AnnouncementBar.wrn": "903bfd9421a7350c923ace3315cedc5763fe3e6b7b54b660a0f26281d46a8754", - "packages/ui/components/AuthForm.wrn": "496d240090269e69679e01cda3b071c012ec4e925a7c01ae883d25e359e381e1", - "packages/ui/components/AuthSplitLayout.wrn": "72b82495dd14d40a2d594ccdcf3adc925d1567c155750fb1072347b8845aab7b", - "packages/ui/components/AvatarGroup.wrn": "66f3d211b7658ca5193c750d0ccb3e392185038d8960d3206f6e8a249e10214e", + "packages/ui/components/AuthForm.wrn": "a0f34c233c5d52e2dd11429dacab98e7cd77bec8ae60652aff48f7dab8506893", + "packages/ui/components/AuthSplitLayout.wrn": "42736850c94f2df0bdc5c733530731fb5df0abd1aedfc6962f8f5774c18f3428", + "packages/ui/components/AvatarGroup.wrn": "d73df8249787c7296c2d19f06186a43fcfaf8b7983107b792c42acf18a388494", "packages/ui/components/BackToTop.wrn": "b12c56ec8b7aabad68cbdc47f4b3237e2c21a61398f0aa51f9add6229b7357cd", - "packages/ui/components/Blockquote.wrn": "6016dd4450de7cbf5c3cb413599baa2e502321e8eedef54439a0df6d0aae8bcb", + "packages/ui/components/Blockquote.wrn": "3e0845286c631151847d19980631c2636d37bc4bd2e95c6b045a9f51fe01fdc5", "packages/ui/components/Breadcrumb.wrn": "5ab85d273ce72e4d5b87907975bb33f0249a34f2f87f01dc0812e827f775eed9", - "packages/ui/components/ButtonGroup.wrn": "0d97fbeed531d1d8ef4b59531923b47b34100d0de71d7bf524b02c668920b3d8", + "packages/ui/components/ButtonGroup.wrn": "1685e6ec6e58a5f1ff8aa05c704ba033438af34c04f603b1851677dccde9c66a", "packages/ui/components/CTASection.wrn": "2d2241d4f1018cfd2f8ea1ddd5fa8c8fcb8d1bbb2d4e4498cb9f39ff47a3801c", - "packages/ui/components/Card.wrn": "ddfb9f71f35cf1d6105e939a6c49ddcfa80651b4c2a97db76f175539ce7591d4", - "packages/ui/components/Carousel.wrn": "37bdde82de59e90cf02c9fed0ee11f5ddd2979246932701dad9412c4fd358a6a", + "packages/ui/components/Card.wrn": "659fbc12e446e87043d6bf62f51efbc05b451bdfc7210ede041f68a991dadf30", + "packages/ui/components/Carousel.wrn": "e599710161b4c4fd67a0bb45b5621a82b000362951e7a9e9153d55c8a8cc1dfd", "packages/ui/components/Chart.wrn": "841def6b024720bd24898975a1434a1cb39c89e1272d42db431d35d27c98c553", - "packages/ui/components/ChatBubble.wrn": "0da2bc86830ac712481559bd2fe7214d26f25101f2e8c2e4629e25c004388b52", + "packages/ui/components/ChatBubble.wrn": "ddc0e63a055d59535002eeba5b3527c51fb0989d62bffba2f53dceedfeb771dc", "packages/ui/components/Clipboard.wrn": "bb8651c7e44517db827603d0c0e546b6891093d7e6589c0b6e45d91b6187591b", - "packages/ui/components/Collapse.wrn": "c537239831c6938f3c39be0ca3ae8ba928c2490e21cfe5853c10f7221a4678ca", - "packages/ui/components/ColorPicker.wrn": "6940b7ae48f1358008b8c3ae6dc7da31f96a1aefadeef18252568b2cda0b5cbf", + "packages/ui/components/Collapse.wrn": "5205eefaf96d9a4c143779ce9f6329537b1c807eff47dbcf62fcc9bcdefaef06", + "packages/ui/components/ColorPicker.wrn": "af0f962555b581df75a6dffb3056d394708c29d93ad18afa86e31707b505a807", "packages/ui/components/Columns.wrn": "e01496aa53025444cc51671efcce40d6d24d86775b2cbb1ee0def1862bb6315d", - "packages/ui/components/Combobox.wrn": "62a7d861b0e536ceb088cea3552c59acbafaea5184101e3651dc8f4976b99dbc", + "packages/ui/components/Combobox.wrn": "b6ae8cf667ed98f3fc4dc141bde797daf7e3daacf7df6c9a7c25a3a143432f62", "packages/ui/components/Confetti.wrn": "22d687beefd5047055f65e806b4e39f81e18887532ec18d439ac364a044b230a", "packages/ui/components/Container.wrn": "4a0acbb896f4c11714e3925d912b10ef9aeedfa904b4ad8561aa2cbd9a0fdca0", "packages/ui/components/ContextMenu.wrn": "33fb0f60268b12411d66e3031dc0557cb231149e7a8d83340b4b453a6e37cb09", @@ -31,8 +31,8 @@ "packages/ui/components/CustomScrollbar.wrn": "fedb2ab06cc2cf9499c130590945ca6971a3edfb60407b6658ef7756e4be9823", "packages/ui/components/DataMap.wrn": "65552d73ecd1a148427dbb10d611f9352ca36bd490f595ab1e1a47e173445ba1", "packages/ui/components/DataTable.wrn": "4e4562b0e18748f062a8b20153767aaaf62c33d98542ff14af4e57da7d8c2469", - "packages/ui/components/DatePicker.wrn": "18b07e59c27c2720bf960e9c04ad70d9e422ddcf0817fede74e71899811bb387", - "packages/ui/components/DeviceFrame.wrn": "a881cf2cc1f859b43cc3c7a1e1ca0fb40cea7a9e530ab5bdcb985aa9592d11c0", + "packages/ui/components/DatePicker.wrn": "a9edc2faf30a0e998e964e9290ee6bd9512787aa5dc19f360bcce029796d7e1c", + "packages/ui/components/DeviceFrame.wrn": "1151090854901710971808f42dd2f1dcbd102e6afef63a5afecd01d4b3f0797d", "packages/ui/components/Divider.wrn": "f5cc449611022b3d3eedf982ae48f6b1a289db7855cc9b6ea0248dcda807ffb3", "packages/ui/components/DragAndDrop.wrn": "9a403ce9ed20d36211d8916911871875c9c7d0952a7de1a21a433eaa0b3c3324", "packages/ui/components/Drawer.wrn": "e6e2778e515361a3475439ab91b6efec3895efab2a4dfdcfb535713f656cc7ed", @@ -40,15 +40,15 @@ "packages/ui/components/FeatureCard.wrn": "2a1bfb01cec8a9892d3ff066e48c276fa7c548cb59c15bcd9b4bbf85450a07a2", "packages/ui/components/FeatureGrid.wrn": "9e3c0440d08c6982861d3e732eeb20f1023413a58243844dfb9d7033bac13d2b", "packages/ui/components/FeatureIconCard.wrn": "afe56213543dd78932b060fa19c4e645e558b211b380c42b6d4b0d18e9d543df", - "packages/ui/components/FileInput.wrn": "8b63811deb90a03763620bedf0d5d3c7d05a20b8ae34292eaface9b756b32ecd", + "packages/ui/components/FileInput.wrn": "c235385a70eb7cb985083597570474c0cb70463c03cab651e452199b2c9abf25", "packages/ui/components/FileUpload.wrn": "3346d8978e134c3a1e6bc742201a3fbb0cffb89da40da6fcd856a2adbb971393", - "packages/ui/components/FileUploadProgress.wrn": "83bcc8558c70fbe0e0670642f65998abd222c235f1031be46bd7c65e6b5c5154", - "packages/ui/components/Footer.wrn": "0b31a18bc543ccec6da3ea2fd782e2334475c1492bdd9532357f9673ac857f37", + "packages/ui/components/FileUploadProgress.wrn": "7498eb70c6f79cf4334a3a973280d9667040a85479453afba428ae7c5225fd8c", + "packages/ui/components/Footer.wrn": "956a504682760c4e5f4d26091830c4fc0f8d0c12f7cdf7e69c94539685c67763", "packages/ui/components/Grid.wrn": "d089d8657298b4d33993ba4bf7b581f816c65db513d8e48cf1fdd18da19e05a8", "packages/ui/components/Hero.wrn": "e4e39dcd59c273192c7e4136f6583279e20b0956bcba4cfbc3f6e01a1fade152", "packages/ui/components/HeroActions.wrn": "c5720efe2ce7f6c114eb2ea4ccc3e8102a1099078ba23fd13770eddeb6aec640", "packages/ui/components/Image.wrn": "8113441bf90ab0d1d8618d477125ad339021f39e853db89d656c72c492e7a20b", - "packages/ui/components/InputGroup.wrn": "0e23ea541a60e893c9d9e6f95113911ee459468d8d6105bf03aeb55395359123", + "packages/ui/components/InputGroup.wrn": "7347865ff9b90dde690cf0753adc753a91d2ae599e92405f47e5b35806f58e06", "packages/ui/components/InputNumber.wrn": "3850f1cbcd314367e17244c644f1115e5ecddc7dc8248aa33fee88936c2981db", "packages/ui/components/Kbd.wrn": "5afaabbb15902bd8fb82cb4155cf6cbfff55600927b54d564d27e2dd8b752386", "packages/ui/components/LayoutSplitter.wrn": "6bd6812e364420ed5d3439862116c58d0b011b298679005795bdccdbb7455066", @@ -67,12 +67,12 @@ "packages/ui/components/Navbar.wrn": "7989d25819312014c0a0855370b80b925d53ff735d682fdb61e9677a9dacb7f3", "packages/ui/components/PageHeader.wrn": "59264dfb26a132fd3eb265c4374f9fcae781f30dd94a087c57e6e8256717cf14", "packages/ui/components/Pagination.wrn": "9ceb74745b159150b015bbbb1974c68e14a7d4b92bd03491cb23b8855aa07983", - "packages/ui/components/PinInput.wrn": "5196f584de8d548a5dfa03688c3c95da3c948cead2662b05e927386ccea74299", + "packages/ui/components/PinInput.wrn": "8245f8afadae85efc2cff9d629d9f0a6785fdbc80ea656ca6fc4daf4031c40d5", "packages/ui/components/Popover.wrn": "f2996f00fad3e35fba2d48e70af17f592854eb73b9e8c6a83526aa78c4e41293", - "packages/ui/components/PortalDashboard.wrn": "037d4300b59c7d60543abc7d4aba5c738efc143e9b61abc48aad0ddfcfe6845b", - "packages/ui/components/PreferenceSwitcher.wrn": "2cc186d4dcb6580b4b152e3a265d9ed5ad210d3fdc76330b9092db21894465f0", + "packages/ui/components/PortalDashboard.wrn": "0ca5228b0793572270d9cbac1eb5e5e5a77a3886a3a4a7ce7126d5e7b467fd4e", + "packages/ui/components/PreferenceSwitcher.wrn": "61d01f507b3f6b4bab55d2642beb9fee5edf0662997b44443142b43c828ea239", "packages/ui/components/PublicPageShell.wrn": "369b74f65e27227311a2ed73e9ca56c8b60908100d6840a798e8ba5f2c8b1040", - "packages/ui/components/RangeSlider.wrn": "21eb7a5df0ee2cb5e78f628eb920265998eb9f1a4933d4e5c57db0323fd66b41", + "packages/ui/components/RangeSlider.wrn": "90ef35ceb94899dfd6e07ef3f3a88f2fb49c8dfe4596def67fe39fd9911d73c7", "packages/ui/components/Rating.wrn": "a2d74dc748fc7d98892684c760518b87fa65411b1102e3611252b87245b3ffcb", "packages/ui/components/Scrollspy.wrn": "76d1c17580c8d460f1222ce97585bdcac9779141f2f30d5460c84ff9f75413d8", "packages/ui/components/SearchBox.wrn": "ab6a78b88aef494b85a87470d4392303d9d1937a5327f1c8aa8d910f1b1829c7", @@ -82,34 +82,34 @@ "packages/ui/components/SplitHero.wrn": "70e843565ff869bcf413b11b6d9830b2e2bd229863a00904596f71e2dff0e76d", "packages/ui/components/StatsBar.wrn": "c7d1df3895f25b6d3a2e1012a18b97592c7f33e65418b880d486f20c2d490686", "packages/ui/components/Stepper.wrn": "df9093e4222ef3250963a8c6fbfec74477242735d23eabe896c29731c54fc14d", - "packages/ui/components/StrongPassword.wrn": "c7c5ef26ece6170dd7db9882f0dc98cb2e4607f1e5d43eb3fd39e5d15bbd3a2e", + "packages/ui/components/StrongPassword.wrn": "9559756cacd10d613aea7a4ab9845a011f7f2f4613f82f83c87ab5fd2bad2ea9", "packages/ui/components/StyledIcon.wrn": "4a4504e357dee9dd0418edbe85fc90b824ccdb3752123a2125da95b77bf0b336", "packages/ui/components/Tabs.wrn": "e38336d28876caa4e97da32a569749e3803b030284a85ce9f35fa788e51cc5b0", "packages/ui/components/TextLink.wrn": "30782039293eb36d63b7b3a4f32a71a47177a3a68c7e90184be7cf7b4385eb19", - "packages/ui/components/TimePicker.wrn": "2e8e7a90f6b6069a07e7ffd2725ba1e1031e84d55a4f1254025befbb314fa695", + "packages/ui/components/TimePicker.wrn": "b3f24767448cb04ddd56e06540b52e5cc32ea21ed4acd2a5eb4f7e46f8617aba", "packages/ui/components/Timeline.wrn": "eaa6764b9e62c28cb6919ac1e86d3ebe9abc3cd8036091cdb703540dbfc33873", "packages/ui/components/Toast.wrn": "f37c584d1c1a66401deb53d915c8ee0c70aaf7baa1d3c297fa74c5bdb914dd1d", "packages/ui/components/ToastNotifications.wrn": "33ff76b2a0a129ff896baea8979b4be97f7ec4471a92a2da970403a5c46e8b03", "packages/ui/components/Toaster.wrn": "288b2b370f65bf823e8d2a6f8c8cf66972332b8174303d33ebe8546d5e1d52c4", - "packages/ui/components/ToggleCount.wrn": "17710fb37fc6953911acec4e80cd95c1202836e9b958ae4ce34c9a9639edae95", - "packages/ui/components/TogglePassword.wrn": "405a85cbfa3d0ff0185b52d2805fba88497a5f25501f01b2438ed3a28591a38d", + "packages/ui/components/ToggleCount.wrn": "ee706b191fcfc01dd7bde0ddba1940af400ed2d01b639016134699963b1000ab", + "packages/ui/components/TogglePassword.wrn": "c644436c3435b8a9b39c6b7a9f75671b76ca74f273952ce5c032ca169b0470e5", "packages/ui/components/TreeView.wrn": "1791a10135595b17b5c746af9e0476e8520d516ba46d64c79dc4efe0af2b500d", "packages/ui/components/Typography.wrn": "1b4d1b91dee0ff522d27c566becc3bc49bd9ec979ae6334e6a15fca5d88eccac", "packages/ui/components/WysiwygEditor.wrn": "636e60b9f9be7a5807cca7ad20e0b0f370ee1ec6c1ecba5d0a577726cc86bc98", - "packages/ui/components/alert.wrn": "3f4c4c90c2b5a00a13d0fa1e7e48e4898869dd27a50ff412a51d7bcc87a0baac", - "packages/ui/components/avatar.wrn": "571b70790aff28a5b7d6adbf0196e77ece1ce153a95b384148cb2bb5f74ab2e9", - "packages/ui/components/badge.wrn": "e96cdcf182ff9834509464bb2fa4c0b041748d3f7671aa46ab489bae6f3d98ae", - "packages/ui/components/button.wrn": "647af3918142fd9151e46555345532980633cc3677ec26d0940c253ea789bc31", - "packages/ui/components/checkbox.wrn": "45e6046e3ad4acb1c1805b51fd5bf0b95b346d3d53973ededc5e43ea2fd91f70", + "packages/ui/components/alert.wrn": "2eee24aeaa345fce462439c9286dce737716218c783c3a136e55483b8d925ffd", + "packages/ui/components/avatar.wrn": "3e2fc145949f6141246ad0b274403b9149ccc28b6a8e80285b396345097c818a", + "packages/ui/components/badge.wrn": "61fbc7a9cab484287025b214e181dab7662280a766e64c1af80248ab7dbea121", + "packages/ui/components/button.wrn": "f11220a1359ab3d4f33ea4ba3e36dc7e330d38a4b44ed1bd95aa498a435117a1", + "packages/ui/components/checkbox.wrn": "e59a56e6acfe3756da8c2b827fee938fa4158250ae587a62936b3df0b988f28c", "packages/ui/components/input.wrn": "9ad394eed60f1b05bbd2ccd50dc2de7b78245c52c87afd46055d772c38b7b0c9", "packages/ui/components/progress.wrn": "61b01ba575d35691e3dfebfcb03ccd1c6b79f1df1c0d41857ec3b01944081a5d", "packages/ui/components/radio.wrn": "0b2d38a5aee3e859280e4590fa1d509d789cc2239082054872fa342817735f1b", - "packages/ui/components/select.wrn": "7f046bb11b7c2470dae26d91a4b2261c66a40ae054d0e04c69b6748912d1e204", + "packages/ui/components/select.wrn": "826035c3049eca85f0a86e2a974ce23f5b6d2f855bce660f2219b9855332c974", "packages/ui/components/skeleton.wrn": "dda95a2c59c6060ab2b9f916eb046fbe74a68b398a051afc0bde41808e059c3a", "packages/ui/components/spinner.wrn": "ffbd28ec6fc017fc94c67778f8966eab2eefa3b47f3f27f064c77dbeb65d84c1", - "packages/ui/components/switch.wrn": "ccb74599fab72b0d68b09a7f1f90b7732cb2f9cbed67a84219e897575ce30c28", + "packages/ui/components/switch.wrn": "205591decf50f1f7d190d8da6a3d969e0fd17ec5300c968fb005608da6a6e596", "packages/ui/components/textarea.wrn": "ddf0b4f124b2cf0c0ab3d820d3ac0085f7c20466e977231949be264cd0cee8cf", "packages/ui/components/tooltip.wrn": "40028dfbb17f6725c76c2e091af9c30ea4db6aa4dea919d38f53874ea70315d1", - "packages/ui/ui.css": "12d3c1ae2d8741b0ba550fbbc3d5a10c52be8c59aa290a460a3792e01c6c38cf" + "packages/ui/ui.css": "d671a848fcbd340d1140a2855019dccecbd71a81d36276e4f1f6cee9d960da9d" } } diff --git a/packages/ui/components/Accordion.wrn b/packages/ui/components/Accordion.wrn index 5973f986..6a4342a6 100644 --- a/packages/ui/components/Accordion.wrn +++ b/packages/ui/components/Accordion.wrn @@ -205,4 +205,205 @@ component Accordion { {/each} } + + style { + .wire-next--accordion { + --wire-accordion-accent: var(--wire-component-color); + display: grid; + width: 100%; + color: var(--wire-color-text); + } + + .wire-next__accordion-item { + min-width: 0; + } + + .wire-next__accordion-heading { + margin: 0; + font: inherit; + } + + .wire-next__accordion-heading > button { + display: flex; + width: 100%; + align-items: center; + gap: 0.75rem; + padding: 0.85rem 0; + border: 0; + background: transparent; + color: var(--wire-color-text); + font: inherit; + font-size: 0.88rem; + font-weight: 700; + text-align: left; + cursor: pointer; + } + + .wire-next__accordion-heading > button > span:not(.wire-next__accordion-indicator) { + min-width: 0; + flex: 1; + } + + .wire-next__accordion-heading > button:focus-visible { + border-radius: var(--wire-radius-sm); + outline: 2px solid var(--wire-accordion-accent); + outline-offset: 2px; + } + + .wire-next__accordion-heading > button:disabled { + cursor: not-allowed; + opacity: 0.5; + } + + .wire-next__accordion-indicator { + display: inline-flex; + width: 1rem; + height: 1rem; + flex: 0 0 1rem; + align-items: center; + justify-content: center; + color: var(--wire-color-muted); + font-size: 1rem; + font-weight: 500; + line-height: 1; + transition: + color var(--wire-motion-fast) var(--wire-ease-standard), + transform var(--wire-motion-fast) var(--wire-ease-standard); + } + + .wire-next__accordion-indicator > span { + display: inline-flex; + align-items: center; + justify-content: center; + } + + .wire-next__accordion-indicator > [class*="icon-["] { + width: 0.95rem; + height: 0.95rem; + } + + .wire-next__accordion-item[data-open="true"] + > .wire-next__accordion-heading + .wire-next__accordion-indicator { + color: var(--wire-accordion-accent); + transform: rotate(45deg); + } + + .wire-next--accordion[data-indicator="chevron"] + .wire-next__accordion-item[data-open="true"] + > .wire-next__accordion-heading + .wire-next__accordion-indicator { + transform: rotate(180deg); + } + + .wire-next__accordion-item[data-open="true"] > .wire-next__accordion-heading > button { + color: var(--wire-accordion-accent); + } + + .wire-next__accordion-panel { + display: grid; + grid-template-rows: 0fr; + opacity: 0; + transition: + grid-template-rows var(--wire-motion-base) var(--wire-ease-standard), + opacity var(--wire-motion-fast) var(--wire-ease-standard); + } + + .wire-next__accordion-item[data-open="true"] > .wire-next__accordion-panel { + grid-template-rows: 1fr; + opacity: 1; + } + + .wire-next__accordion-panel > div { + overflow: hidden; + } + + .wire-next__accordion-content { + padding: 0 0 1rem 1.75rem; + color: var(--wire-color-muted); + font-size: 0.86rem; + line-height: 1.65; + } + + .wire-next__accordion-content > p { + color: inherit; + } + + .wire-next__accordion-content-italic > p::first-line { + font-style: italic; + } + + .wire-next__accordion-nested { + display: grid; + margin-top: 0.5rem; + } + + .wire-next__accordion-nested .wire-next__accordion-content { + padding-left: 1.5rem; + } + + .wire-next--accordion-bordered { + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface); + } + + .wire-next--accordion-bordered > .wire-next__accordion-item + .wire-next__accordion-item { + border-top: 1px solid var(--wire-color-border); + } + + .wire-next--accordion-bordered + > .wire-next__accordion-item + > .wire-next__accordion-heading + > button { + padding-inline: 1rem; + } + + .wire-next--accordion-bordered + > .wire-next__accordion-item + > .wire-next__accordion-panel + .wire-next__accordion-content { + padding-inline: 1rem; + } + + .wire-next--accordion-separated { + gap: 0.5rem; + } + + .wire-next--accordion-separated > .wire-next__accordion-item { + overflow: hidden; + border: 1px solid transparent; + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface-2); + } + + .wire-next--accordion-separated > .wire-next__accordion-item[data-open="true"] { + border-color: var(--wire-color-border); + } + + .wire-next--accordion-separated + > .wire-next__accordion-item + > .wire-next__accordion-heading + > button, + .wire-next--accordion-separated + > .wire-next__accordion-item + > .wire-next__accordion-panel + .wire-next__accordion-content { + padding-inline: 1rem; + } + + .wire-next--accordion-flush { + border-radius: 0; + background: transparent; + box-shadow: none; + } + + @media (prefers-reduced-motion: reduce) { + .wire-next__accordion-panel, + .wire-next__accordion-indicator { + transition: none; + } + } + } } diff --git a/packages/ui/components/AdvancedSelect.wrn b/packages/ui/components/AdvancedSelect.wrn index c4629879..eb466f1b 100644 --- a/packages/ui/components/AdvancedSelect.wrn +++ b/packages/ui/components/AdvancedSelect.wrn @@ -456,4 +456,54 @@ component AdvancedSelect { >{validationMessage} } + + style { + .wire-next__select-search { + position: relative; + display: block; + } + + .wire-next__select-search input { + padding-left: 2.25em; + } + + .wire-next__select-tags { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + } + + .wire-next__select-tags > span { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0.3rem 0.55rem; + border-radius: 999px; + color: var(--wire-component-color); + background: color-mix(in srgb, var(--wire-component-color) 12%, transparent); + font-size: 0.75em; + font-weight: 700; + } + + .wire-next__select-tags img { + width: 1.25rem; + height: 1.25rem; + border-radius: 50%; + object-fit: cover; + } + + .wire-next__select-value { + display: flex; + min-width: 0; + align-items: center; + gap: 0.55em; + } + + .wire-next__placeholder { + overflow: hidden; + color: var(--wire-color-muted); + text-overflow: ellipsis; + white-space: nowrap; + } + } } diff --git a/packages/ui/components/AuthForm.wrn b/packages/ui/components/AuthForm.wrn index 4423d7d7..f1aaf5bb 100644 --- a/packages/ui/components/AuthForm.wrn +++ b/packages/ui/components/AuthForm.wrn @@ -89,4 +89,61 @@ component AuthForm { } + + style { + .wire-auth-form { + width: 100%; + } + + .wire-auth-form > header { + display: flex; + margin-bottom: 1.5rem; + align-items: flex-start; + gap: 0.85rem; + } + + .wire-auth-form__icon { + width: 2rem; + height: 2rem; + flex: none; + color: var(--wire-color-primary); + } + + .wire-auth-form h2 { + margin: 0; + font-size: 1.5rem; + font-weight: 650; + letter-spacing: -0.025em; + } + + .wire-auth-form header p { + margin: 0.35rem 0 0; + color: var(--wire-color-muted); + font-size: 0.75rem; + line-height: 1.5; + } + + .wire-auth-form form { + display: grid; + gap: 1rem; + } + + .wire-auth-form__options { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + font-size: 0.7rem; + } + + .wire-auth-form__options a { + color: var(--wire-color-primary); + text-decoration: none; + } + + .wire-auth-form__submit { + width: 100%; + justify-content: center; + } + } } diff --git a/packages/ui/components/AuthSplitLayout.wrn b/packages/ui/components/AuthSplitLayout.wrn index f303b560..a7467fbf 100644 --- a/packages/ui/components/AuthSplitLayout.wrn +++ b/packages/ui/components/AuthSplitLayout.wrn @@ -80,4 +80,182 @@ component AuthSplitLayout { } + + style { + /* Shared authentication shell and forms */ + .wire-auth-split { + display: grid; + width: 100%; + height: 100dvh; + min-height: 0; + overflow: hidden; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + color: var(--wire-color-text); + background: var(--wire-color-bg); + } + + .wire-auth-split__content, + .wire-auth-split__form { + min-width: 0; + padding: clamp(1.5rem, 5vw, 5rem); + } + + .wire-auth-split__content { + display: flex; + height: 100dvh; + min-height: 0; + overflow: hidden; + justify-content: space-between; + flex-direction: column; + background: + radial-gradient( + circle at 15% 15%, + color-mix(in srgb, var(--wire-color-primary) 22%, transparent), + transparent 34% + ), + linear-gradient(145deg, var(--wire-color-surface-2), var(--wire-color-bg)); + border-right: 1px solid var(--wire-color-border); + } + + .wire-auth-split__brand { + display: flex; + align-items: center; + gap: 0.75rem; + } + + .wire-auth-split__brand > span:first-child { + width: 2.5rem; + height: 2.5rem; + color: var(--wire-color-primary); + } + + .wire-auth-split__brand > span:last-child { + display: grid; + } + + .wire-auth-split__brand strong { + font-size: 0.875rem; + font-weight: 650; + } + + .wire-auth-split__brand small, + .wire-auth-split__legal { + color: var(--wire-color-muted); + font-size: 0.65rem; + } + + .wire-auth-split__message { + width: min(100%, 36rem); + margin-block: 3rem; + } + + .wire-auth-split__eyebrow { + color: var(--wire-color-primary); + font-size: 0.7rem; + font-weight: 650; + letter-spacing: 0.09em; + text-transform: uppercase; + } + + .wire-auth-split__message h1 { + max-width: 14ch; + margin: 0.65rem 0 0; + font-size: clamp(2rem, 4vw, 3.75rem); + font-weight: 650; + letter-spacing: -0.045em; + line-height: 1.08; + } + + .wire-auth-split__message > p { + max-width: 34rem; + margin: 1rem 0 0; + color: var(--wire-color-muted); + font-size: 0.875rem; + line-height: 1.7; + } + + .wire-auth-split__features { + display: grid; + margin-top: 2rem; + gap: 1rem; + } + + .wire-auth-split__features article { + display: flex; + align-items: flex-start; + gap: 0.75rem; + } + + .wire-auth-split__features article > span:first-child { + width: 1.1rem; + height: 1.1rem; + margin-top: 0.1rem; + flex: none; + color: var(--wire-color-primary); + } + + .wire-auth-split__features article > span:last-child { + display: grid; + } + + .wire-auth-split__features strong { + font-size: 0.75rem; + font-weight: 600; + } + + .wire-auth-split__features small { + margin-top: 0.15rem; + color: var(--wire-color-muted); + font-size: 0.68rem; + } + + .wire-auth-split__form { + display: grid; + height: 100dvh; + min-height: 0; + overflow-x: hidden; + overflow-y: auto; + overscroll-behavior: contain; + place-items: center; + background: var(--wire-color-surface); + } + + .wire-auth-split__form-inner { + width: min(100%, 30rem); + } + + @media (max-width: 800px) { + .wire-auth-split { + height: auto; + min-height: 100dvh; + overflow: visible; + grid-template-columns: 1fr; + } + .wire-auth-split__content { + height: auto; + min-height: auto; + overflow: visible; + padding-bottom: 2rem; + border-right: 0; + border-bottom: 1px solid var(--wire-color-border); + } + .wire-auth-split__message { + margin-block: 2rem 0; + } + .wire-auth-split__message h1 { + font-size: clamp(1.75rem, 8vw, 2.5rem); + } + .wire-auth-split__features, + .wire-auth-split__legal { + display: none; + } + .wire-auth-split__form { + height: auto; + min-height: auto; + overflow: visible; + padding-block: 2.5rem; + place-items: start center; + } + } + } } diff --git a/packages/ui/components/AvatarGroup.wrn b/packages/ui/components/AvatarGroup.wrn index 2bb492ac..1df69c01 100644 --- a/packages/ui/components/AvatarGroup.wrn +++ b/packages/ui/components/AvatarGroup.wrn @@ -147,4 +147,210 @@ component AvatarGroup { } + + style { + /* --- Avatar group -------------------------------------------------------- */ + .wire-next--avatar-group { + --wire-avatar-group-size: 3rem; + position: relative; + display: inline-flex; + width: fit-content; + max-width: 100%; + } + + .wire-next--avatar-group[data-size="xs"] { + --wire-avatar-group-size: 1.75rem; + } + + .wire-next--avatar-group[data-size="sm"] { + --wire-avatar-group-size: 2.25rem; + } + + .wire-next--avatar-group[data-size="md"], + .wire-next--avatar-group[data-size="default"] { + --wire-avatar-group-size: 3rem; + } + + .wire-next--avatar-group[data-size="lg"] { + --wire-avatar-group-size: 4rem; + } + + .wire-next--avatar-group[data-size="xl"] { + --wire-avatar-group-size: 5rem; + } + + .wire-next__avatar-group-members { + display: flex; + align-items: center; + } + + .wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-member, + .wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-overflow { + margin-left: calc(var(--wire-avatar-group-size) * -0.22); + } + + .wire-next--avatar-group[data-layout="stack"] :first-child { + margin-left: 0; + } + + .wire-next--avatar-group[data-layout="grid"] .wire-next__avatar-group-members { + display: grid; + grid-template-columns: repeat(var(--wire-avatar-group-columns), var(--wire-avatar-group-size)); + gap: 0.65rem; + } + + .wire-next__avatar-group-member, + .wire-next__avatar-group-overflow { + --wire-avatar-group-color: var(--wire-color-primary); + position: relative; + display: inline-grid; + width: var(--wire-avatar-group-size); + height: var(--wire-avatar-group-size); + flex: none; + place-items: center; + border-radius: 999px; + outline: none; + transition: + z-index var(--wire-motion-fast), + transform var(--wire-motion-base) var(--wire-ease-emphasized); + } + + .wire-next__avatar-group-member[data-color="secondary"] { + --wire-avatar-group-color: #737373; + } + + .wire-next__avatar-group-member[data-color="success"] { + --wire-avatar-group-color: var(--wire-color-success); + } + + .wire-next__avatar-group-member[data-color="info"] { + --wire-avatar-group-color: var(--wire-color-info); + } + + .wire-next__avatar-group-member[data-color="warning"] { + --wire-avatar-group-color: var(--wire-color-warning); + } + + .wire-next__avatar-group-member[data-color="danger"] { + --wire-avatar-group-color: var(--wire-color-danger); + } + + .wire-next__avatar-group-member[data-shape="rounded"] { + border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72); + } + + .wire-next__avatar-group-avatar, + .wire-next__avatar-group-overflow-button { + display: grid; + width: 100%; + height: 100%; + overflow: hidden; + place-items: center; + color: white; + border: 2px solid var(--wire-avatar-group-ring); + border-radius: inherit; + background: var(--wire-avatar-group-color, var(--wire-color-primary)); + box-shadow: 0 5px 14px rgb(0 0 0 / 0.16); + font: inherit; + font-size: calc(var(--wire-avatar-group-size) * 0.3); + font-weight: 800; + } + + .wire-next__avatar-group-avatar img, + .wire-next__avatar-group-menu-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .wire-next__avatar-group-overflow-button { + cursor: pointer; + color: var(--wire-color-text); + background: var(--wire-color-surface-2); + } + + .wire-next__avatar-group-member:hover, + .wire-next__avatar-group-member:focus-visible, + .wire-next__avatar-group-overflow:focus-within { + z-index: 5; + transform: translateY(-3px); + } + + .wire-next__avatar-group-member:focus-visible, + .wire-next__avatar-group-overflow-button:focus-visible { + outline: 2px solid var(--wire-color-primary); + outline-offset: 3px; + } + + .wire-next__avatar-group-tooltip { + position: absolute; + left: 50%; + bottom: calc(100% + 0.65rem); + z-index: 20; + width: max-content; + max-width: 14rem; + padding: 0.4rem 0.6rem; + color: var(--wire-color-bg); + border-radius: 0.4rem; + background: var(--wire-color-text); + box-shadow: 0 8px 22px rgb(0 0 0 / 0.22); + font-size: 0.75rem; + font-weight: 650; + pointer-events: none; + opacity: 0; + transform: translate(-50%, 0.25rem); + transition: + opacity var(--wire-motion-fast), + transform var(--wire-motion-fast); + } + + .wire-next__avatar-group-member:hover .wire-next__avatar-group-tooltip, + .wire-next__avatar-group-member:focus-visible .wire-next__avatar-group-tooltip { + opacity: 1; + transform: translate(-50%, 0); + } + + .wire-next__avatar-group-menu { + position: absolute; + top: calc(100% + 0.65rem); + right: 0; + z-index: 30; + display: grid; + width: max-content; + min-width: 12rem; + gap: 0.25rem; + padding: 0.45rem; + color: var(--wire-color-text); + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm, 0.5rem); + background: var(--wire-color-surface); + box-shadow: 0 16px 38px rgb(0 0 0 / 0.22); + } + + .wire-next__avatar-group-menu-item { + display: flex; + align-items: center; + gap: 0.6rem; + padding: 0.45rem 0.55rem; + border-radius: 0.4rem; + font-size: 0.82rem; + } + + .wire-next__avatar-group-menu-item:hover { + background: var(--wire-color-surface-2); + } + + .wire-next__avatar-group-menu-avatar { + display: grid; + width: 1.75rem; + height: 1.75rem; + overflow: hidden; + flex: none; + place-items: center; + border-radius: 999px; + background: var(--wire-color-surface-2); + font-size: 0.65rem; + font-weight: 800; + } + } } diff --git a/packages/ui/components/Blockquote.wrn b/packages/ui/components/Blockquote.wrn index a06e4a16..73769902 100644 --- a/packages/ui/components/Blockquote.wrn +++ b/packages/ui/components/Blockquote.wrn @@ -64,4 +64,207 @@ component Blockquote { {/if} } + + style { + .wire-next--blockquote { + --wire-blockquote-color: var(--wire-component-color, var(--wire-color-primary)); + --wire-blockquote-font-size: 1.125rem; + --wire-blockquote-mark-size: 4.25rem; + display: grid; + gap: 1.25rem; + width: 100%; + color: var(--wire-color-text); + text-align: left; + } + + .wire-next--blockquote[data-size="xs"] { + --wire-blockquote-font-size: 0.875rem; + --wire-blockquote-mark-size: 3rem; + } + + .wire-next--blockquote[data-size="sm"] { + --wire-blockquote-font-size: 1rem; + --wire-blockquote-mark-size: 3.5rem; + } + + .wire-next--blockquote[data-size="md"], + .wire-next--blockquote[data-size="default"] { + --wire-blockquote-font-size: 1.125rem; + } + + .wire-next--blockquote[data-size="lg"] { + --wire-blockquote-font-size: clamp(1.35rem, 2.4vw, 1.75rem); + --wire-blockquote-mark-size: 5rem; + } + + .wire-next--blockquote[data-size="xl"] { + --wire-blockquote-font-size: clamp(1.65rem, 3vw, 2.25rem); + --wire-blockquote-mark-size: 5.75rem; + } + + .wire-next--blockquote > blockquote { + position: relative; + display: block; + min-width: 0; + margin: 0; + padding-top: calc(var(--wire-blockquote-mark-size) * 0.78); + } + + .wire-next__blockquote-mark { + position: absolute; + top: 0; + inset-inline: 0; + display: block; + width: 100%; + color: color-mix(in srgb, var(--wire-blockquote-color) 28%, var(--wire-color-text)); + font-family: Georgia, "Times New Roman", serif; + font-size: var(--wire-blockquote-mark-size); + font-style: normal; + font-weight: 700; + line-height: 0.8; + text-align: start; + user-select: none; + } + + .wire-next__blockquote-copy { + min-width: 0; + font-family: Georgia, "Times New Roman", serif; + font-size: var(--wire-blockquote-font-size); + line-height: 1.55; + text-wrap: pretty; + } + + .wire-next--blockquote[data-italic="true"] .wire-next__blockquote-copy { + font-style: italic; + } + + .wire-next__blockquote-copy > :first-child { + margin-top: 0; + } + + .wire-next__blockquote-copy > :last-child { + margin-bottom: 0; + } + + .wire-next__blockquote-citation { + display: inline-flex; + gap: 0.75rem; + align-items: center; + width: fit-content; + margin-inline-start: 0; + color: var(--wire-color-muted); + font-size: 0.875rem; + line-height: 1.35; + } + + .wire-next__blockquote-avatar { + width: 2.5rem; + height: 2.5rem; + flex: 0 0 auto; + border: 2px solid color-mix(in srgb, var(--wire-blockquote-color) 35%, transparent); + border-radius: 999px; + object-fit: cover; + } + + .wire-next__blockquote-attribution { + display: grid; + gap: 0.15rem; + } + + .wire-next__blockquote-attribution cite { + color: var(--wire-color-text); + font-style: normal; + font-weight: 700; + } + + .wire-next__blockquote-attribution a { + color: inherit; + text-decoration-color: color-mix(in srgb, var(--wire-blockquote-color) 55%, transparent); + text-underline-offset: 0.2em; + } + + .wire-next__blockquote-attribution a:hover { + color: var(--wire-blockquote-color); + } + + .wire-next--blockquote[data-align="center"] { + text-align: center; + } + + .wire-next--blockquote[data-align="right"], + .wire-next--blockquote[data-align="end"] { + text-align: right; + } + + .wire-next--blockquote[data-align="center"] > blockquote, + .wire-next--blockquote[data-align="right"] > blockquote, + .wire-next--blockquote[data-align="end"] > blockquote { + text-align: inherit; + } + + .wire-next--blockquote[data-align="center"] .wire-next__blockquote-mark { + text-align: center; + } + + .wire-next--blockquote[data-align="right"] .wire-next__blockquote-mark, + .wire-next--blockquote[data-align="end"] .wire-next__blockquote-mark { + text-align: end; + } + + .wire-next--blockquote[data-align="center"] .wire-next__blockquote-citation { + margin-inline: auto; + } + + .wire-next--blockquote[data-align="right"] .wire-next__blockquote-citation, + .wire-next--blockquote[data-align="end"] .wire-next__blockquote-citation { + margin-inline-start: auto; + } + + .wire-next--blockquote[data-variant="bordered"], + .wire-next--blockquote[data-variant="border"], + .wire-next--blockquote[data-variant="left-border"] { + padding-inline-start: 1.5rem; + border-inline-start: 4px solid var(--wire-blockquote-color); + } + + .wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-mark, + .wire-next--blockquote[data-variant="border"] .wire-next__blockquote-mark, + .wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-mark { + display: none; + } + + .wire-next--blockquote[data-variant="bordered"] > blockquote, + .wire-next--blockquote[data-variant="border"] > blockquote, + .wire-next--blockquote[data-variant="left-border"] > blockquote { + display: block; + padding-top: 0; + } + + .wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-copy, + .wire-next--blockquote[data-variant="border"] .wire-next__blockquote-copy, + .wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-copy { + padding-top: 0; + } + + .wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-citation, + .wire-next--blockquote[data-variant="border"] .wire-next__blockquote-citation, + .wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-citation { + margin-inline-start: 0; + } + + @media (max-width: 480px) { + .wire-next--blockquote { + --wire-blockquote-mark-size: 3.25rem; + --wire-blockquote-font-size: 1rem; + gap: 1rem; + } + .wire-next--blockquote[data-size="lg"], + .wire-next--blockquote[data-size="xl"] { + --wire-blockquote-font-size: 1.25rem; + } + .wire-next__blockquote-citation { + margin-inline-start: 0; + } + } + } } diff --git a/packages/ui/components/ButtonGroup.wrn b/packages/ui/components/ButtonGroup.wrn index 6022f305..ad319ea8 100644 --- a/packages/ui/components/ButtonGroup.wrn +++ b/packages/ui/components/ButtonGroup.wrn @@ -89,4 +89,35 @@ items: unknown[] = [] } + + style { + .wire-next--button-group { + display: inline-flex; + align-items: stretch; + width: fit-content; + max-width: 100%; + isolation: isolate; + } + + .wire-next--button-group[data-orientation="vertical"] { + flex-direction: column; + } + + .wire-next--button-group[data-attached="false"] { + gap: 0.5rem; + } + + .wire-next--button-group[data-disabled="true"] { + cursor: not-allowed; + opacity: 0.6; + } + + @media (max-width: 480px) { + .wire-next--button-group[data-responsive="true"] { + display: flex; + width: 100%; + flex-direction: column; + } + } + } } diff --git a/packages/ui/components/Card.wrn b/packages/ui/components/Card.wrn index b698f508..84f49a69 100644 --- a/packages/ui/components/Card.wrn +++ b/packages/ui/components/Card.wrn @@ -309,4 +309,348 @@ component Card { {/if} } + + style { + .wire-next--card { + --wire-card-color: var(--wire-component-color, var(--wire-color-primary)); + --wire-card-padding: 1.25rem; + display: block; + width: 100%; + color: var(--wire-color-text); + } + + .wire-next--card[data-size="sm"] { + --wire-card-padding: 0.85rem; + } + + .wire-next--card[data-size="lg"] { + --wire-card-padding: 1.75rem; + } + + .wire-next__card-panel { + position: relative; + display: flex; + overflow: hidden; + flex-direction: column; + width: 100%; + min-width: 0; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); + transition: + transform var(--wire-motion-base) var(--wire-ease-emphasized), + border-color var(--wire-motion-base) ease, + box-shadow var(--wire-motion-base) var(--wire-ease-emphasized); + } + + .wire-next--card[data-variant="top-border"] > .wire-next__card-panel, + .wire-next--card[data-variant="accent"] > .wire-next__card-panel { + border-top: 4px solid var(--wire-card-color); + } + + .wire-next--card[data-hover="raise"] > .wire-next__card-panel:hover { + border-color: color-mix(in srgb, var(--wire-card-color) 38%, var(--wire-color-border)); + box-shadow: var(--wire-shadow-3); + transform: translateY(-4px); + } + + .wire-next__card-header, + .wire-next__card-footer { + display: flex; + gap: 1rem; + align-items: center; + justify-content: space-between; + padding: 0.85rem var(--wire-card-padding); + background: var(--wire-color-surface-2); + color: var(--wire-color-muted); + font-size: 0.875rem; + } + + .wire-next__card-header { + border-bottom: 1px solid var(--wire-color-border); + } + + .wire-next__card-footer { + margin-top: auto; + border-top: 1px solid var(--wire-color-border); + } + + .wire-next__card-header-actions { + display: inline-flex; + gap: 0.2rem; + align-items: center; + } + + .wire-next__card-header-actions button { + display: inline-grid; + width: 2rem; + height: 2rem; + border: 0; + border-radius: var(--wire-radius-sm); + background: transparent; + color: var(--wire-color-muted); + cursor: pointer; + place-items: center; + } + + .wire-next__card-header-actions button:hover { + background: color-mix(in srgb, var(--wire-card-color) 12%, transparent); + color: var(--wire-card-color); + } + + .wire-next__card-header-actions button:focus-visible { + outline: 2px solid var(--wire-card-color); + outline-offset: 1px; + } + + .wire-next__card-media { + position: relative; + overflow: hidden; + min-height: 10rem; + background: var(--wire-color-surface-2); + } + + .wire-next__card-media > img { + display: block; + width: 100%; + height: 100%; + min-height: inherit; + object-fit: cover; + transition: transform 420ms var(--wire-ease-emphasized); + } + + .wire-next--card[data-hover="image"] .wire-next__card-panel:hover .wire-next__card-media > img { + transform: scale(1.06); + } + + .wire-next__card-overlay { + position: absolute; + inset: 0; + display: flex; + flex-direction: column; + gap: 0.55rem; + padding: clamp(1.25rem, 4vw, 2rem); + background: linear-gradient( + 180deg, + rgb(2 6 23 / 0.9) 0%, + rgb(2 6 23 / 0.68) 38%, + rgb(2 6 23 / 0.34) 58%, + rgb(2 6 23 / 0.86) 100% + ); + color: white; + text-shadow: 0 1px 2px rgb(0 0 0 / 0.42); + } + + .wire-next__card-overlay h3 { + color: white; + font-size: clamp(1.1rem, 2.2vw, 1.35rem); + } + + .wire-next__card-overlay p { + max-width: 48rem; + color: #fff; + font-weight: 500; + line-height: 1.6; + text-shadow: + 0 1px 2px rgb(0 0 0 / 0.9), + 0 2px 8px rgb(0 0 0 / 0.62); + } + + .wire-next__card-overlay .wire-next__card-subtitle { + color: rgb(255 255 255 / 0.78); + } + + .wire-next__card-overlay small { + margin-top: auto; + color: rgb(255 255 255 / 0.88); + font-weight: 600; + text-shadow: 0 1px 2px rgb(0 0 0 / 0.55); + } + + .wire-next__card-body { + display: grid; + gap: 0.65rem; + min-width: 0; + padding: var(--wire-card-padding); + } + + .wire-next__card-body[data-scrollable="true"] { + max-height: var(--wire-card-max-height); + overflow: auto; + overscroll-behavior: contain; + scrollbar-color: var(--wire-card-color) transparent; + scrollbar-width: thin; + } + + .wire-next__card-body h3, + .wire-next__card-body p, + .wire-next__card-overlay h3, + .wire-next__card-overlay p { + margin: 0; + } + + .wire-next__card-body p { + color: var(--wire-color-muted); + line-height: 1.65; + } + + .wire-next__card-subtitle { + color: var(--wire-color-muted); + font-size: 0.72rem; + font-weight: 700; + letter-spacing: 0.06em; + text-transform: uppercase; + } + + .wire-next__card-action { + display: inline-flex; + gap: 0.25rem; + align-items: center; + width: fit-content; + margin-top: 0.2rem; + color: var(--wire-card-color); + font-weight: 700; + text-decoration: none; + } + + .wire-next__card-action:hover { + text-decoration: underline; + text-underline-offset: 0.2em; + } + + .wire-next__card-navigation { + background: var(--wire-color-surface-2); + } + + .wire-next__card-tabs { + display: flex; + overflow-x: auto; + } + + .wire-next__card-tabs button { + min-height: 3rem; + flex: 1 0 auto; + padding-inline: 1rem; + border: 0; + border-bottom: 2px solid transparent; + background: transparent; + color: var(--wire-color-muted); + cursor: pointer; + font-weight: 700; + } + + .wire-next__card-tabs button[data-active="true"] { + border-color: var(--wire-card-color); + color: var(--wire-color-text); + } + + .wire-next__card-navigation-select { + display: none; + width: calc(100% - 2rem); + min-height: 2.75rem; + margin: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface); + color: var(--wire-color-text); + } + + .wire-next__card-alert { + display: flex; + gap: 0.35rem; + padding: 0.8rem var(--wire-card-padding); + background: color-mix(in srgb, var(--wire-card-color) 14%, var(--wire-color-surface-2)); + color: var(--wire-color-text); + font-size: 0.875rem; + } + + .wire-next__card-empty { + display: grid; + min-height: 12rem; + color: var(--wire-color-muted); + place-content: center; + place-items: center; + } + + .wire-next__card-empty > span { + margin-bottom: 0.75rem; + font-size: 2.25rem; + } + + .wire-next--card[data-align="center"] .wire-next__card-body { + text-align: center; + place-items: center; + } + + .wire-next--card[data-layout="horizontal"] > .wire-next__card-panel { + display: grid; + grid-template-columns: minmax(12rem, 42%) minmax(0, 1fr); + } + + .wire-next--card[data-layout="horizontal"] .wire-next__card-media { + grid-row: 1 / span 4; + min-height: 100%; + } + + .wire-next__card-group { + display: grid; + grid-template-columns: repeat(var(--wire-card-columns, 3), minmax(0, 1fr)); + } + + .wire-next__card-group > .wire-next__card-panel { + border-radius: 0; + box-shadow: none; + } + + .wire-next__card-group > .wire-next__card-panel:not(:first-child) { + margin-inline-start: -1px; + } + + .wire-next__card-group > .wire-next__card-panel:first-child { + border-start-start-radius: var(--wire-radius-md); + border-end-start-radius: var(--wire-radius-md); + } + + .wire-next__card-group > .wire-next__card-panel:last-child { + border-start-end-radius: var(--wire-radius-md); + border-end-end-radius: var(--wire-radius-md); + } + + @media (max-width: 768px) { + .wire-next--card[data-layout="horizontal"] > .wire-next__card-panel { + display: flex; + } + .wire-next--card[data-layout="horizontal"] .wire-next__card-media { + min-height: 12rem; + } + .wire-next__card-group { + grid-template-columns: 1fr; + } + .wire-next__card-group > .wire-next__card-panel:not(:first-child) { + margin-top: -1px; + margin-inline-start: 0; + } + .wire-next__card-group > .wire-next__card-panel { + border-radius: 0; + } + .wire-next__card-group > .wire-next__card-panel:first-child { + border-start-start-radius: var(--wire-radius-md); + border-start-end-radius: var(--wire-radius-md); + } + .wire-next__card-group > .wire-next__card-panel:last-child { + border-end-start-radius: var(--wire-radius-md); + border-end-end-radius: var(--wire-radius-md); + } + } + + @media (max-width: 480px) { + .wire-next__card-tabs:has(+ .wire-next__card-navigation-select) { + display: none; + } + .wire-next__card-navigation-select { + display: block; + } + } + } } diff --git a/packages/ui/components/Carousel.wrn b/packages/ui/components/Carousel.wrn index fe0ae590..9637207d 100644 --- a/packages/ui/components/Carousel.wrn +++ b/packages/ui/components/Carousel.wrn @@ -461,4 +461,364 @@ component Carousel { } + + style { + .wire-next--carousel { + --wire-carousel-color: var(--wire-component-color, var(--wire-color-primary)); + display: grid; + width: 100%; + min-width: 0; + gap: 1rem; + color: var(--wire-color-text); + } + + .wire-next__carousel-header h3, + .wire-next__carousel-header p { + margin: 0; + } + + .wire-next__carousel-header p { + margin-top: 0.35rem; + color: var(--wire-color-text-muted); + } + + .wire-next__carousel-layout { + display: flex; + min-width: 0; + gap: 0.75rem; + } + + .wire-next__carousel-main { + display: grid; + flex: 1; + min-width: 0; + gap: 0.75rem; + } + + .wire-next__carousel-stage { + position: relative; + min-width: 0; + } + + .wire-next__carousel-viewport { + position: relative; + overflow: hidden; + min-width: 0; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface-subtle, var(--wire-color-surface)); + outline: none; + } + + .wire-next__carousel-viewport:focus-visible { + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-carousel-color) 30%, transparent); + } + + .wire-next__carousel-track { + display: flex; + align-items: stretch; + gap: var(--wire-carousel-gap); + transform: translateX( + calc( + var(--wire-carousel-index) * -1 * + ( + (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) / + var(--wire-carousel-per-view) + var(--wire-carousel-gap) + ) + ) + ); + transition: transform var(--wire-motion-base) var(--wire-ease-emphasized); + translate: var(--wire-carousel-drag-offset, 0) 0; + will-change: transform; + } + + .wire-next--carousel[data-dragging="true"] .wire-next__carousel-track { + transition: none; + } + + .wire-next--carousel[data-rtl="true"] .wire-next__carousel-track { + transform: translateX( + calc( + var(--wire-carousel-index) * + ( + (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) / + var(--wire-carousel-per-view) + var(--wire-carousel-gap) + ) + ) + ); + } + + .wire-next__carousel-slide { + position: relative; + display: grid; + flex: 0 0 + calc( + (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) / + var(--wire-carousel-per-view) + ); + overflow: hidden; + min-width: 0; + min-height: 20rem; + place-items: center; + background: var(--wire-color-surface-raised, var(--wire-color-surface)); + } + + .wire-next--carousel[data-auto-height="true"] .wire-next__carousel-slide { + min-height: 0; + } + + .wire-next--carousel[data-centered="true"] .wire-next__carousel-slide { + flex-basis: min(78%, 32rem); + } + + .wire-next--carousel[data-centered="true"] .wire-next__carousel-track { + box-sizing: border-box; + transform: translateX( + calc(var(--wire-carousel-index) * -1 * (min(78%, 32rem) + var(--wire-carousel-gap))) + ); + } + + .wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:first-child { + margin-inline-start: calc((100% - min(78%, 32rem)) / 2); + } + + .wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:last-child { + margin-inline-end: calc((100% - min(78%, 32rem)) / 2); + } + + .wire-next--carousel[data-centered="true"][data-rtl="true"] .wire-next__carousel-track { + transform: translateX( + calc(var(--wire-carousel-index) * (min(78%, 32rem) + var(--wire-carousel-gap))) + ); + } + + .wire-next__carousel-slide > img { + position: absolute; + width: 100%; + height: 100%; + object-fit: cover; + inset: 0; + } + + .wire-next__carousel-slide-content { + position: relative; + z-index: 1; + width: min(100%, 38rem); + padding: clamp(2rem, 8vw, 5rem); + text-align: center; + } + + .wire-next__carousel-slide-content h4, + .wire-next__carousel-slide-content p { + margin: 0; + } + + .wire-next__carousel-slide-content h4 { + font-size: clamp(1.5rem, 4vw, 2.4rem); + } + + .wire-next__carousel-slide-content p { + margin-top: 0.65rem; + color: var(--wire-color-text-muted); + } + + .wire-next__carousel-control { + position: absolute; + z-index: 3; + top: 50%; + display: grid; + width: 2.75rem; + min-height: 2.75rem; + padding: 0; + border: 1px solid color-mix(in srgb, var(--wire-color-border) 70%, transparent); + border-radius: 999px; + background: color-mix(in srgb, var(--wire-color-text) 76%, transparent); + color: var(--wire-color-surface); + cursor: pointer; + place-items: center; + transform: translateY(-50%); + } + + .wire-next__carousel-control:focus-visible, + .wire-next__carousel-pagination button:focus-visible, + .wire-next__carousel-thumbnails button:focus-visible { + outline: 2px solid var(--wire-carousel-color); + outline-offset: 2px; + } + + .wire-next__carousel-control:disabled { + cursor: not-allowed; + opacity: 0.35; + } + + .wire-next__carousel-control--previous { + left: 1rem; + } + + .wire-next__carousel-control--next { + right: 1rem; + } + + .wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--previous { + right: 1rem; + left: auto; + } + + .wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--next { + right: auto; + left: 1rem; + } + + .wire-next__carousel-pagination { + display: flex; + min-height: 1.5rem; + align-items: center; + justify-content: center; + gap: 0.5rem; + } + + .wire-next__carousel-pagination button { + width: 0.65rem; + min-height: 0.65rem; + padding: 0; + border: 1px solid var(--wire-color-text-muted); + border-radius: 999px; + background: transparent; + cursor: pointer; + } + + .wire-next__carousel-pagination button[data-active="true"] { + border-color: var(--wire-carousel-color); + background: var(--wire-carousel-color); + } + + .wire-next__carousel-counter { + position: absolute; + z-index: 3; + bottom: 0.8rem; + left: 50%; + padding: 0.25rem 0.65rem; + border-radius: 999px; + background: color-mix(in srgb, var(--wire-color-text) 82%, transparent); + color: var(--wire-color-surface); + font-weight: 700; + transform: translateX(-50%); + } + + .wire-next__carousel-thumbnails { + display: flex; + overflow: auto; + gap: 0.55rem; + scrollbar-width: thin; + } + + .wire-next__carousel-thumbnails button { + display: grid; + flex: 0 0 8.5rem; + min-height: 3.75rem; + overflow: hidden; + padding: 0; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface); + color: var(--wire-color-text); + cursor: pointer; + place-items: center; + } + + .wire-next__carousel-thumbnails button[data-active="true"] { + border-color: var(--wire-carousel-color); + box-shadow: inset 0 0 0 1px var(--wire-carousel-color); + } + + .wire-next__carousel-thumbnails img { + width: 100%; + height: 4rem; + object-fit: cover; + } + + .wire-next__carousel-thumbnails span { + padding: 0.5rem; + } + + .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails { + flex: 0 0 9rem; + flex-direction: column; + max-height: 28rem; + } + + .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button { + flex-basis: 7.5rem; + width: 100%; + } + + .wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport { + cursor: grab; + touch-action: pan-y; + user-select: none; + -webkit-user-select: none; + } + + .wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport:active { + cursor: grabbing; + } + + .wire-next--carousel[data-draggable="true"] img, + .wire-next--carousel[data-draggable="true"] a { + -webkit-user-drag: none; + } + + .wire-next--carousel[data-snap="true"] .wire-next__carousel-viewport { + overflow-x: auto; + scroll-behavior: smooth; + scroll-snap-type: x mandatory; + scrollbar-width: thin; + } + + .wire-next--carousel[data-snap="true"] .wire-next__carousel-track { + --wire-carousel-snap-slide: calc( + (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) / + var(--wire-carousel-per-view) + ); + display: grid; + width: 100%; + min-width: 100%; + box-sizing: content-box; + grid-auto-columns: var(--wire-carousel-snap-slide); + grid-auto-flow: column; + padding-inline: calc((100% - var(--wire-carousel-snap-slide)) / 2); + transform: none; + } + + .wire-next--carousel[data-snap="true"] .wire-next__carousel-slide { + width: auto; + min-width: 0; + scroll-snap-align: center; + } + + @media (max-width: 640px) { + .wire-next__carousel-slide { + flex-basis: 100%; + min-height: 16rem; + } + .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-layout { + flex-direction: column-reverse; + } + .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails { + flex: auto; + flex-direction: row; + max-height: none; + } + .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button { + flex-basis: 8.5rem; + width: auto; + } + } + + @media (prefers-reduced-motion: reduce) { + .wire-next__carousel-track { + transition-duration: 0.01ms; + } + } + } } diff --git a/packages/ui/components/ChatBubble.wrn b/packages/ui/components/ChatBubble.wrn index 0b182d9b..6384f70b 100644 --- a/packages/ui/components/ChatBubble.wrn +++ b/packages/ui/components/ChatBubble.wrn @@ -147,4 +147,194 @@ component ChatBubble { } + + style { + .wire-next--chat-bubble { + --wire-chat-color: var(--wire-component-color, var(--wire-color-primary)); + --wire-chat-padding: 1rem; + display: grid; + width: 100%; + min-width: 0; + gap: 1rem; + color: var(--wire-color-text); + } + + .wire-next__chat-header h3, + .wire-next__chat-header p, + .wire-next__chat-content h4, + .wire-next__chat-content p { + margin: 0; + } + + .wire-next__chat-header p { + margin-top: 0.35rem; + color: var(--wire-color-text-muted); + } + + .wire-next__chat-thread { + display: grid; + min-width: 0; + gap: 1.25rem; + } + + .wire-next__chat-message { + display: grid; + width: min(78%, 34rem); + min-width: 0; + justify-self: start; + gap: 0.4rem; + } + + .wire-next__chat-message[data-direction="outgoing"] { + justify-self: end; + } + + .wire-next--chat-bubble[data-one-sided="true"] .wire-next__chat-message { + justify-self: start; + } + + .wire-next__chat-row { + display: flex; + min-width: 0; + align-items: flex-start; + gap: 0.75rem; + } + + .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-row { + flex-direction: row-reverse; + } + + .wire-next--chat-bubble[data-one-sided="true"] + .wire-next__chat-message[data-direction="outgoing"] + .wire-next__chat-row { + flex-direction: row; + } + + .wire-next__chat-content { + min-width: 0; + padding: var(--wire-chat-padding); + border: 1px solid var(--wire-color-border); + border-radius: 1rem; + background: var(--wire-color-surface-raised, var(--wire-color-surface)); + color: var(--wire-color-text); + cursor: pointer; + } + + .wire-next__chat-content:focus-visible { + outline: 2px solid var(--wire-chat-color); + outline-offset: 2px; + } + + .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content { + border-color: var(--wire-chat-color); + background: var(--wire-chat-color); + color: var(--wire-color-primary-contrast, #fff); + } + + .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content :is(h4, p, li, span) { + color: inherit; + } + + .wire-next__chat-content h4 { + margin-bottom: 0.65rem; + font-size: 1em; + } + + .wire-next__chat-content p + p, + .wire-next__chat-content p + nav { + margin-top: 0.75rem; + } + + .wire-next__chat-content ul { + display: grid; + margin: 0.55rem 0 0; + padding-inline-start: 1.25rem; + gap: 0.35rem; + } + + .wire-next__chat-content nav { + display: grid; + margin-top: 0.75rem; + gap: 0.3rem; + } + + .wire-next__chat-content a { + color: var(--wire-chat-color); + font-weight: 650; + text-decoration: none; + } + + .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content a { + color: inherit; + text-decoration: underline; + } + + .wire-next__chat-avatar { + display: grid; + flex: 0 0 2.5rem; + width: 2.5rem; + min-height: 2.5rem; + overflow: hidden; + padding: 0; + border: 1px solid var(--wire-color-border); + border-radius: 999px; + background: var(--wire-color-surface-raised, var(--wire-color-surface)); + color: var(--wire-color-text); + cursor: pointer; + place-items: center; + } + + .wire-next__chat-avatar img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .wire-next__chat-avatar:focus-visible { + outline: 2px solid var(--wire-chat-color); + outline-offset: 2px; + } + + .wire-next__chat-meta { + display: flex; + align-items: center; + gap: 0.3rem; + padding-inline: calc(2.5rem + 0.75rem); + color: var(--wire-color-text-muted); + font-size: 0.78em; + } + + .wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-meta { + justify-content: flex-end; + } + + .wire-next__chat-meta[data-tone="danger"] { + color: var(--wire-color-danger); + } + + .wire-next__chat-meta button { + padding: 0; + border: 0; + background: transparent; + color: inherit; + font: inherit; + font-weight: 700; + cursor: pointer; + text-decoration: underline; + } + + @media (max-width: 640px) { + .wire-next__chat-message { + width: min(92%, 34rem); + } + .wire-next__chat-avatar { + flex-basis: 2rem; + width: 2rem; + min-height: 2rem; + } + .wire-next__chat-meta { + padding-inline: 0; + } + } + } } diff --git a/packages/ui/components/Collapse.wrn b/packages/ui/components/Collapse.wrn index 2159ab31..f1f6cb67 100644 --- a/packages/ui/components/Collapse.wrn +++ b/packages/ui/components/Collapse.wrn @@ -95,4 +95,145 @@ size: string = "default" } + + style { + .wire-next--collapse { + --wire-collapse-color: var(--wire-component-color, var(--wire-color-primary)); + display: grid; + width: 100%; + min-width: 0; + gap: 0.75rem; + color: var(--wire-color-text); + } + + .wire-next__collapse-item { + display: grid; + min-width: 0; + justify-items: start; + gap: 0; + } + + .wire-next__collapse-trigger { + display: inline-flex; + min-height: 2.75rem; + align-items: center; + justify-content: center; + gap: 0.55rem; + padding: 0.7rem 1rem; + border: 1px solid var(--wire-collapse-color); + border-radius: var(--wire-radius-sm); + background: var(--wire-collapse-color); + color: var(--wire-color-primary-contrast, #fff); + font: inherit; + font-weight: 700; + cursor: pointer; + } + + .wire-next__collapse-trigger:focus-visible { + outline: 2px solid var(--wire-collapse-color); + outline-offset: 3px; + } + + .wire-next__collapse-trigger:disabled { + cursor: not-allowed; + opacity: 0.5; + } + + .wire-next__collapse-chevron { + transition: transform var(--wire-motion-fast) var(--wire-ease-standard); + } + + .wire-next__collapse-item[data-open="true"] .wire-next__collapse-chevron { + transform: rotate(180deg); + } + + .wire-next__collapse-panel { + width: min(100%, 42rem); + max-height: 0; + overflow: hidden; + margin-top: 0; + opacity: 0; + transition: + max-height 350ms var(--wire-ease-emphasized), + margin-top 300ms var(--wire-ease-emphasized), + opacity 200ms var(--wire-ease-standard); + } + + .wire-next__collapse-panel[data-open="true"] { + max-height: 40rem; + margin-top: 0.75rem; + opacity: 1; + } + + .wire-next__collapse-content { + display: grid; + overflow: hidden; + min-height: 0; + gap: 0.65rem; + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface-raised, var(--wire-color-surface)); + } + + .wire-next__collapse-content h4, + .wire-next__collapse-content p, + .wire-next__collapse-preview { + margin: 0; + } + + .wire-next__collapse-content nav { + display: flex; + flex-wrap: wrap; + gap: 0.75rem; + } + + .wire-next__collapse-content a { + color: var(--wire-collapse-color); + font-weight: 650; + text-decoration: none; + } + + .wire-next--collapse[data-mode="inline"] .wire-next__collapse-item { + gap: 0; + } + + .wire-next--collapse[data-mode="inline"] .wire-next__collapse-preview { + order: 1; + margin-bottom: 0.5rem; + } + + .wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel { + order: 2; + width: 100%; + } + + .wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel[data-open="true"] { + margin-top: 0; + } + + .wire-next--collapse[data-mode="inline"] .wire-next__collapse-trigger { + order: 3; + margin-top: 0.5rem; + min-height: auto; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; + color: var(--wire-collapse-color); + } + + .wire-next--collapse[data-mode="inline"] .wire-next__collapse-content { + padding: 0; + border: 0; + background: transparent; + } + + @media (prefers-reduced-motion: reduce) { + .wire-next__collapse-chevron, + .wire-next__collapse-panel { + transition: none; + } + } + } } diff --git a/packages/ui/components/ColorPicker.wrn b/packages/ui/components/ColorPicker.wrn index 5bac446a..fc903667 100644 --- a/packages/ui/components/ColorPicker.wrn +++ b/packages/ui/components/ColorPicker.wrn @@ -38,4 +38,11 @@ component ColorPicker { {#if helperText}{helperText}{/if}{error} } + + style { + .wire-next__color-control input[type="color"] { + width: 3rem; + padding: 0.2rem; + } + } } diff --git a/packages/ui/components/Combobox.wrn b/packages/ui/components/Combobox.wrn index 58b5cdf4..3c3c0884 100644 --- a/packages/ui/components/Combobox.wrn +++ b/packages/ui/components/Combobox.wrn @@ -386,4 +386,29 @@ component ComboBox { >{validationMessage} } + + style { + .wire-next__combobox-toggle { + position: absolute; + top: 50%; + right: 0; + z-index: 1; + display: grid; + width: 2.25em; + height: 100%; + padding: 0; + place-items: center; + border: 0; + color: var(--wire-color-muted); + background: transparent; + cursor: pointer; + transform: translateY(-50%); + } + + .wire-next--combobox .wire-next__combobox-input { + padding-right: 5.25em; + padding-left: 2.5em; + cursor: text; + } + } } diff --git a/packages/ui/components/DatePicker.wrn b/packages/ui/components/DatePicker.wrn index c4a4e4a4..34c422ad 100644 --- a/packages/ui/components/DatePicker.wrn +++ b/packages/ui/components/DatePicker.wrn @@ -59,4 +59,61 @@ size: string = "default" {#if helperText}{helperText}{/if}{error} } + + style { + .wire-next__picker-clear { + position: absolute; + right: 2.5rem; + border: 0; + background: transparent; + color: var(--wire-color-muted); + } + + .wire-next__date-selectors { + display: grid; + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + gap: 0.65rem; + } + + .wire-next__date-selectors label { + display: grid; + gap: 0.3rem; + color: var(--wire-color-muted); + font-size: 0.78rem; + font-weight: 600; + } + + .wire-next__date-selectors select { + width: 100%; + min-height: 2.35rem; + padding: 0.45rem 0.65rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface); + color: var(--wire-color-text); + font: inherit; + } + + .wire-next__date-done { + background: var(--wire-field-color) !important; + color: var(--wire-color-primary-contrast, #fff) !important; + font-weight: 650; + } + + .wire-next__calendar > header { + display: grid; + grid-template-columns: 2.25rem 1fr 2.25rem; + align-items: center; + text-align: center; + } + + .wire-next__calendar-grid button[data-outside="true"] { + color: var(--wire-color-muted); + opacity: 0.55; + } + + .wire-next__calendar-grid button[data-today="true"] { + box-shadow: inset 0 0 0 1px var(--wire-field-color); + } + } } diff --git a/packages/ui/components/DeviceFrame.wrn b/packages/ui/components/DeviceFrame.wrn index e74f98fb..f6e25cfe 100644 --- a/packages/ui/components/DeviceFrame.wrn +++ b/packages/ui/components/DeviceFrame.wrn @@ -31,4 +31,67 @@ component DeviceFrame {
{#if src || srcdoc}{:else}
{/if}
} + + style { + .wire-next--device-frame > header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + } + + .wire-next__device-actions { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; + } + + .wire-next__device-actions button { + min-height: 2.25rem; + padding-inline: 0.7rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface-2); + color: inherit; + } + + .wire-next__device-shell { + overflow: hidden; + width: min(100%, 24rem); + min-height: 28rem; + margin-inline: auto; + border: 0.65rem solid var(--wire-color-text); + border-radius: 2rem; + background: var(--wire-color-background); + transition: width var(--wire-motion-normal) var(--wire-ease-standard); + } + + .wire-next--device-frame[data-device="tablet"] .wire-next__device-shell { + width: min(100%, 42rem); + } + + .wire-next--device-frame[data-device="desktop"] .wire-next__device-shell { + width: 100%; + border-width: 0.4rem; + border-radius: var(--wire-radius-md); + } + + .wire-next--device-frame[data-orientation="landscape"] .wire-next__device-shell { + width: min(100%, 48rem); + min-height: 20rem; + } + + .wire-next__device-shell :is(iframe, .wire-next__device-content) { + width: 100%; + min-height: inherit; + border: 0; + } + + @media (max-width: 640px) { + .wire-next--device-frame > header { + align-items: stretch; + flex-direction: column; + } + } + } } diff --git a/packages/ui/components/FileInput.wrn b/packages/ui/components/FileInput.wrn index 8ce3d7d8..a80748fb 100644 --- a/packages/ui/components/FileInput.wrn +++ b/packages/ui/components/FileInput.wrn @@ -52,4 +52,22 @@ size: string = "default" {#if helperText}{helperText}{/if}{error} } + + style { + .wire-next__file-control { + position: relative; + min-height: 2.75rem; + padding: 0.65rem 0.85rem; + border: 1px dashed var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface); + } + + .wire-next__file-control input { + position: absolute; + cursor: pointer; + opacity: 0; + inset: 0; + } + } } diff --git a/packages/ui/components/FileUploadProgress.wrn b/packages/ui/components/FileUploadProgress.wrn index 11d5aaba..bab264b3 100644 --- a/packages/ui/components/FileUploadProgress.wrn +++ b/packages/ui/components/FileUploadProgress.wrn @@ -37,4 +37,39 @@ size: string = "default"
{#if currentStatus === "uploading"}{/if}{#if currentStatus === "error" || currentStatus === "cancelled"}{/if}
} + + style { + .wire-next--file-upload-progress { + display: grid; + width: min(100%, 36rem); + gap: 0.75rem; + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); + } + + .wire-next--file-upload-progress progress { + width: 100%; + height: 0.55rem; + overflow: hidden; + border: 0; + border-radius: 999px; + accent-color: var(--wire-component-color); + } + + .wire-next__upload-actions { + justify-content: flex-end; + } + + .wire-next__upload-actions button { + min-height: 2.25rem; + padding-inline: 0.8rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface-2); + color: inherit; + } + } } diff --git a/packages/ui/components/Footer.wrn b/packages/ui/components/Footer.wrn index 63665f8c..09661431 100644 --- a/packages/ui/components/Footer.wrn +++ b/packages/ui/components/Footer.wrn @@ -285,4 +285,194 @@ component Footer { } + + style { + /* --- Badge ---------------------------------------------------------------- */ + .wire-badge { + display: inline-flex; + align-items: center; + font-size: 0.75rem; + font-weight: 700; + line-height: 1; + padding: 0.25rem 0.5rem; + border-radius: 999px; + } + + .wire-badge--default { + background: var(--wire-color-surface-2); + color: var(--wire-color-text); + } + + /* Structured responsive footer */ + .wire-footer { + width: 100%; + color: var(--wire-color-text); + background: var(--wire-color-surface); + border-top: 1px solid var(--wire-color-border); + font-size: 0.875rem; + font-weight: 400; + } + + .wire-footer__grid { + display: grid; + grid-template-columns: minmax(13rem, 1.2fr) minmax(0, 3fr) minmax(13rem, 1fr); + width: min(100%, 90rem); + margin-inline: auto; + padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem); + gap: clamp(1.5rem, 4vw, 3.5rem); + } + + .wire-footer--width-full .wire-footer__grid { + width: 100%; + max-width: none; + } + + .wire-footer__pre:empty, + .wire-footer__post:empty, + .wire-footer__pre:not(:has(*)), + .wire-footer__post:not(:has(*)) { + display: none; + } + + .wire-footer__pre, + .wire-footer__post { + min-width: 0; + } + + .wire-footer__pre strong, + .wire-footer__post strong { + font-size: 0.875rem; + font-weight: 600; + } + + .wire-footer__pre p, + .wire-footer__post p { + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.6; + } + + .wire-footer__links { + display: grid; + grid-template-columns: repeat(var(--wire-footer-columns, 3), minmax(0, 1fr)); + align-content: start; + gap: 1.5rem; + } + + .wire-footer__column { + display: grid; + min-width: 0; + align-content: start; + gap: 0.8rem; + } + + .wire-footer__column-links { + display: grid; + align-content: start; + gap: 0.55rem; + } + + .wire-footer__heading { + display: block; + color: var(--wire-color-text); + font-size: 0.8125rem; + font-weight: 600; + } + + .wire-footer__link { + display: flex; + width: fit-content; + min-height: 2rem; + align-items: center; + gap: 0.4rem; + color: var(--wire-color-muted); + font-size: 0.8125rem; + font-weight: 400; + text-decoration: none; + } + + .wire-footer__link:hover { + color: var(--wire-component-color, var(--wire-color-primary)); + text-decoration: underline; + text-underline-offset: 0.2em; + } + + .wire-footer__bottom { + display: grid; + grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); + align-items: center; + gap: 1rem; + padding: 1rem clamp(1rem, 4vw, 3rem); + color: var(--wire-color-muted); + border-top: 1px solid var(--wire-color-border); + font-size: 0.75rem; + font-weight: 400; + } + + .wire-footer__bottom--slots { + grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); + } + + .wire-footer__bottom--slots:not( + :has(.wire-footer__copyright-left > *, .wire-footer__copyright-right > *) + ) { + display: none; + } + + .wire-footer__copyright { + text-align: center; + } + + .wire-footer__copyright-left, + .wire-footer__copyright-right { + display: flex; + min-width: 0; + align-items: center; + gap: 0.75rem; + } + + .wire-footer__copyright-right { + justify-content: flex-end; + text-align: right; + } + + .wire-footer__copyright-left:empty, + .wire-footer__copyright-right:empty, + .wire-footer__copyright-left:not(:has(*)), + .wire-footer__copyright-right:not(:has(*)) { + min-height: 0; + } + + @media (max-width: 900px) { + .wire-footer__grid { + grid-template-columns: 1fr; + } + .wire-footer__links { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + } + + @media (max-width: 600px) { + .wire-footer__links { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .wire-footer__bottom, + .wire-footer__bottom--slots { + grid-template-columns: 1fr; + justify-items: center; + text-align: center; + } + .wire-footer__copyright-left, + .wire-footer__copyright-right { + justify-content: center; + text-align: center; + } + } + + @media (max-width: 420px) { + .wire-footer__links { + grid-template-columns: 1fr; + } + } + } } diff --git a/packages/ui/components/InputGroup.wrn b/packages/ui/components/InputGroup.wrn index aaf82fdc..7603392d 100644 --- a/packages/ui/components/InputGroup.wrn +++ b/packages/ui/components/InputGroup.wrn @@ -51,4 +51,36 @@ component InputGroup { {#if helperText}{helperText}{/if}{error} } + + style { + .wire-next__input-group-control { + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + background: var(--wire-color-surface); + } + + .wire-next__input-group-control input { + flex: 1; + min-width: 0; + border: 0; + box-shadow: none; + } + + .wire-next__input-addon, + .wire-next__input-group-control button { + padding: 0.7rem 0.85rem; + white-space: nowrap; + } + + .wire-next__input-group-control button { + align-self: stretch; + border: 0; + background: var(--wire-field-color); + color: var(--wire-color-primary-contrast, #fff); + font: inherit; + font-weight: 700; + cursor: pointer; + } + } } diff --git a/packages/ui/components/PinInput.wrn b/packages/ui/components/PinInput.wrn index 06036e9b..33252b20 100644 --- a/packages/ui/components/PinInput.wrn +++ b/packages/ui/components/PinInput.wrn @@ -114,4 +114,120 @@ component PinInput { >{validationMessage} } + + style { + .wire-next--pin-input { + display: grid; + width: 100%; + min-width: 0; + gap: 0.65rem; + padding: 0; + border: 0; + color: var(--wire-color-text); + } + + .wire-next__pin-heading { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + } + + .wire-next__pin-heading legend { + padding: 0; + font-size: 0.82em; + font-weight: 700; + } + + .wire-next__pin-clear { + display: inline-flex; + align-items: center; + gap: 0.35rem; + padding: 0; + border: 0; + color: var(--wire-component-color); + background: transparent; + font: inherit; + font-size: 0.7em; + font-weight: 750; + cursor: pointer; + } + + .wire-next__pin-clear > span:first-child { + width: 0.9rem; + height: 0.9rem; + } + + .wire-next__pin-cells { + display: flex; + max-width: 100%; + align-items: center; + gap: clamp(0.35rem, 1.5vw, 0.65rem); + overflow-x: auto; + padding: 0.2rem; + scrollbar-width: thin; + } + + .wire-next--pin-input .wire-next__pin-cells input { + flex: 0 0 clamp(2.4rem, 8vw, 3.25rem); + width: clamp(2.4rem, 8vw, 3.25rem); + height: clamp(2.75rem, 9vw, 3.5rem); + min-width: clamp(2.4rem, 8vw, 3.25rem); + padding: 0; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + font-size: clamp(1rem, 3vw, 1.25rem); + font-weight: 750; + text-align: center; + caret-color: var(--wire-component-color); + transition: + border-color var(--wire-motion-base) var(--wire-ease-standard), + box-shadow var(--wire-motion-base) var(--wire-ease-standard), + transform var(--wire-motion-fast) var(--wire-ease-standard); + } + + .wire-next--pin-input .wire-next__pin-cells input::placeholder { + color: var(--wire-color-muted); + opacity: 0.45; + } + + .wire-next--pin-input .wire-next__pin-cells input:focus-visible { + border-color: var(--wire-component-color); + outline: 0; + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); + transform: translateY(-1px); + } + + .wire-next--pin-input .wire-next__pin-cells input:disabled, + .wire-next--pin-input .wire-next__pin-cells input:read-only { + cursor: not-allowed; + opacity: 0.55; + } + + .wire-next__pin-separator { + color: var(--wire-color-muted); + font-size: 1.1rem; + font-weight: 800; + } + + .wire-next--pin-input[data-complete="true"] .wire-next__pin-cells input { + border-color: color-mix(in srgb, var(--wire-component-color) 72%, var(--wire-color-border)); + background: color-mix(in srgb, var(--wire-component-color) 7%, var(--wire-color-bg)); + } + + @media (max-width: 480px) { + .wire-next__pin-cells { + gap: 0.3rem; + } + .wire-next--pin-input .wire-next__pin-cells input { + flex-basis: min(2.7rem, 12vw); + width: min(2.7rem, 12vw); + min-width: min(2.7rem, 12vw); + height: min(3rem, 14vw); + } + } + } } diff --git a/packages/ui/components/PortalDashboard.wrn b/packages/ui/components/PortalDashboard.wrn index 7893a403..7b3cc283 100644 --- a/packages/ui/components/PortalDashboard.wrn +++ b/packages/ui/components/PortalDashboard.wrn @@ -98,4 +98,275 @@ component PortalDashboard { } + + style { + /* Reusable responsive portal dashboard */ + .wire-portal-dashboard { + width: min(100%, 96rem); + margin-inline: auto; + color: var(--wire-color-text); + } + + .wire-portal-dashboard__hero { + display: flex; + padding: clamp(1.25rem, 3vw, 2rem); + align-items: flex-end; + justify-content: space-between; + gap: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: 1rem; + background: + radial-gradient( + circle at 85% 0%, + color-mix(in srgb, var(--wire-color-primary) 20%, transparent), + transparent 34% + ), + var(--wire-color-surface); + box-shadow: var(--wire-shadow-sm); + } + + .wire-portal-dashboard__eyebrow, + .wire-portal-dashboard__panel-heading small { + color: var(--wire-color-primary); + font-size: 0.7rem; + font-weight: 650; + letter-spacing: 0.09em; + text-transform: uppercase; + } + + .wire-portal-dashboard__hero h1 { + margin: 0.35rem 0 0; + font-size: clamp(1.4rem, 3vw, 2.25rem); + font-weight: 650; + letter-spacing: -0.035em; + } + + .wire-portal-dashboard__hero p { + max-width: 48rem; + margin: 0.5rem 0 0; + color: var(--wire-color-muted); + font-size: 0.875rem; + line-height: 1.6; + } + + .wire-portal-dashboard__metrics { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + margin-top: 1rem; + gap: 1rem; + } + + .wire-portal-dashboard__metric { + display: flex; + min-width: 0; + padding: 1rem; + align-items: center; + gap: 0.85rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.85rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-sm); + } + + .wire-portal-dashboard__metric-icon { + width: 2.25rem; + height: 2.25rem; + flex: none; + padding: 0.55rem; + border-radius: 0.7rem; + color: var(--wire-color-primary); + background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent); + } + + .wire-portal-dashboard__metric div { + display: grid; + min-width: 0; + } + + .wire-portal-dashboard__metric small, + .wire-portal-dashboard__metric span { + overflow: hidden; + color: var(--wire-color-muted); + font-size: 0.7rem; + text-overflow: ellipsis; + white-space: nowrap; + } + + .wire-portal-dashboard__metric strong { + margin-block: 0.1rem; + font-size: 1.3rem; + font-weight: 650; + } + + .wire-portal-dashboard__grid { + display: grid; + grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); + margin-top: 1rem; + gap: 1rem; + } + + .wire-portal-dashboard__panel { + min-width: 0; + padding: 1.1rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.9rem; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-sm); + } + + .wire-portal-dashboard__panel--actions { + grid-row: span 2; + } + + .wire-portal-dashboard__panel-heading { + display: flex; + margin-bottom: 0.9rem; + align-items: center; + justify-content: space-between; + } + + .wire-portal-dashboard__panel-heading h2 { + margin: 0.2rem 0 0; + font-size: 1rem; + font-weight: 600; + } + + .wire-portal-dashboard__actions { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.65rem; + } + + .wire-portal-dashboard__actions a, + .wire-portal-dashboard__list a { + display: flex; + min-width: 0; + padding: 0.8rem; + align-items: center; + gap: 0.7rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.7rem; + color: inherit; + text-decoration: none; + transition: + border-color 150ms ease, + background 150ms ease, + transform 150ms ease; + } + + .wire-portal-dashboard__actions a:hover, + .wire-portal-dashboard__list a:hover { + border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border)); + background: var(--wire-color-surface-2); + transform: translateY(-1px); + } + + .wire-portal-dashboard__actions a > span:first-child { + width: 1.15rem; + height: 1.15rem; + flex: none; + color: var(--wire-color-primary); + } + + .wire-portal-dashboard__actions a > span:nth-child(2), + .wire-portal-dashboard__list a > span:nth-child(2) { + display: grid; + min-width: 0; + flex: 1; + } + + .wire-portal-dashboard__actions a > span:last-child { + width: 0.9rem; + height: 0.9rem; + color: var(--wire-color-muted); + } + + .wire-portal-dashboard__actions strong, + .wire-portal-dashboard__list strong, + .wire-portal-dashboard__timeline strong { + font-size: 0.8rem; + font-weight: 550; + } + + .wire-portal-dashboard__actions small, + .wire-portal-dashboard__list small, + .wire-portal-dashboard__timeline p, + .wire-portal-dashboard__timeline small { + margin: 0.15rem 0 0; + color: var(--wire-color-muted); + font-size: 0.7rem; + font-style: normal; + line-height: 1.45; + } + + .wire-portal-dashboard__list { + display: grid; + gap: 0.5rem; + } + + .wire-portal-dashboard__list a { + border: 0; + border-bottom: 1px solid var(--wire-color-border); + border-radius: 0; + } + + .wire-portal-dashboard__status { + width: 0.55rem; + height: 0.55rem; + flex: none; + border-radius: 999px; + background: var(--wire-color-muted); + } + + .wire-portal-dashboard__list em { + color: var(--wire-color-muted); + font-size: 0.7rem; + font-style: normal; + } + + .wire-portal-dashboard__timeline { + display: grid; + gap: 0.8rem; + } + + .wire-portal-dashboard__timeline article { + display: flex; + gap: 0.7rem; + } + + .wire-portal-dashboard__timeline article > span { + width: 1rem; + height: 1rem; + margin-top: 0.15rem; + flex: none; + color: var(--wire-color-primary); + } + + .wire-portal-dashboard__timeline p { + margin-block: 0.15rem; + } + + @media (max-width: 1100px) { + .wire-portal-dashboard__metrics { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .wire-portal-dashboard__grid { + grid-template-columns: 1fr; + } + .wire-portal-dashboard__panel--actions { + grid-row: auto; + } + } + + @media (max-width: 640px) { + .wire-portal-dashboard__hero { + align-items: flex-start; + flex-direction: column; + } + .wire-portal-dashboard__metrics, + .wire-portal-dashboard__actions { + grid-template-columns: 1fr; + } + } + } } diff --git a/packages/ui/components/PreferenceSwitcher.wrn b/packages/ui/components/PreferenceSwitcher.wrn index 869db0c2..6ec6596e 100644 --- a/packages/ui/components/PreferenceSwitcher.wrn +++ b/packages/ui/components/PreferenceSwitcher.wrn @@ -82,4 +82,172 @@ size: string = "default" } + + style { + /* Portal display, accent, and language preferences */ + .wire-preferences { + display: inline-flex; + align-items: center; + gap: 0.25rem; + } + + .wire-preferences__menu { + position: relative; + } + + .wire-preferences__menu > summary { + display: inline-flex; + min-width: 2.25rem; + min-height: 2.25rem; + padding: 0.45rem 0.6rem; + align-items: center; + justify-content: center; + gap: 0.4rem; + border: 1px solid transparent; + border-radius: 0.6rem; + color: var(--wire-color-muted); + cursor: pointer; + list-style: none; + } + + .wire-preferences__menu > summary::-webkit-details-marker { + display: none; + } + + .wire-preferences__menu > summary:hover, + .wire-preferences__menu[open] > summary { + color: var(--wire-color-text); + border-color: var(--wire-color-border); + background: var(--wire-color-surface); + } + + .wire-preferences__menu > summary > span:first-child { + width: 1rem; + height: 1rem; + } + + .wire-preferences__current-language { + min-width: 1.25rem; + color: var(--wire-color-text); + font-size: 0.625rem; + font-weight: 650; + letter-spacing: 0.02em; + } + + .wire-preferences__panel { + position: absolute; + z-index: 80; + top: calc(100% + 0.5rem); + right: 0; + display: grid; + width: max-content; + min-width: 11rem; + max-width: min(22rem, calc(100vw - 2rem)); + max-height: min(28rem, calc(100dvh - 2rem)); + overflow-y: auto; + padding: 0.75rem; + gap: 0.6rem; + border: 1px solid var(--wire-color-border); + border-radius: 0.8rem; + color: var(--wire-color-text); + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-lg, 0 18px 48px rgb(0 0 0 / 0.18)); + animation: wire-component-enter 160ms ease both; + } + + .wire-preferences__panel > strong { + padding-inline: 0.25rem; + font-size: 0.7rem; + font-weight: 600; + letter-spacing: 0.06em; + text-transform: uppercase; + } + + .wire-preferences__options { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.4rem; + } + + .wire-preferences__panel button { + display: inline-flex; + min-height: 2.25rem; + padding: 0.5rem 0.65rem; + align-items: center; + gap: 0.5rem; + border-radius: 0.55rem; + color: var(--wire-color-text); + background: var(--wire-color-surface-2); + font-size: 0.75rem; + font-weight: 500; + } + + .wire-preferences__panel button:hover { + outline: 2px solid color-mix(in srgb, var(--wire-color-primary) 40%, transparent); + } + + .wire-preferences__panel button[aria-pressed="true"] { + color: var(--wire-color-primary); + background: color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface)); + outline: 1px solid color-mix(in srgb, var(--wire-color-primary) 55%, transparent); + } + + .wire-preferences__swatches { + display: grid; + grid-template-columns: repeat(3, 2rem); + gap: 0.5rem; + } + + .wire-preferences__swatches button { + width: 2rem; + min-height: 2rem; + padding: 0; + border: 3px solid var(--wire-color-surface); + border-radius: 999px; + background: var(--wire-preference-swatch); + box-shadow: 0 0 0 1px var(--wire-color-border); + } + + .wire-preferences__swatches button[aria-pressed="true"] { + box-shadow: + 0 0 0 2px var(--wire-color-surface), + 0 0 0 4px var(--wire-color-primary); + } + + .wire-preferences__panel--language button { + width: 100%; + background: transparent; + } + + .wire-preferences__panel--language button span { + display: grid; + width: 1.65rem; + height: 1.65rem; + place-items: center; + border-radius: 0.45rem; + background: var(--wire-color-surface-2); + font-size: 0.65rem; + } + + .wire-preferences__panel--language button[aria-pressed="true"]::after { + width: 0.9rem; + height: 0.9rem; + margin-left: auto; + content: ""; + background: currentColor; + mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12 4 4L19 6'/%3E%3C/svg%3E") + center / contain no-repeat; + } + + @media (max-width: 640px) { + .wire-preferences__panel { + position: fixed; + top: auto; + right: 1rem; + bottom: 1rem; + left: 1rem; + width: auto; + } + } + } } diff --git a/packages/ui/components/RangeSlider.wrn b/packages/ui/components/RangeSlider.wrn index ceeee3cc..498a17dc 100644 --- a/packages/ui/components/RangeSlider.wrn +++ b/packages/ui/components/RangeSlider.wrn @@ -68,4 +68,141 @@ component RangeSlider { {#if helperText}{helperText}{/if}{error} } + + style { + .wire-next__range-track { + display: grid; + flex: 1; + min-width: 0; + gap: 0.35rem; + } + + .wire-next__range-control input { + width: 100%; + min-width: 0; + margin: 0; + flex: 1; + accent-color: var(--wire-field-color); + } + + .wire-next__custom-slider { + position: relative; + width: 100%; + height: 1.5rem; + cursor: pointer; + touch-action: none; + } + + .wire-next__custom-slider::before, + .wire-next__slider-fill { + position: absolute; + top: 50%; + height: 0.4rem; + border-radius: 999px; + transform: translateY(-50%); + content: ""; + } + + .wire-next__custom-slider::before { + right: 0; + left: 0; + background: var(--wire-color-surface-2); + box-shadow: inset 0 0 0 1px var(--wire-color-border); + } + + .wire-next__slider-fill { + z-index: 1; + left: 0; + width: var(--wire-range-progress); + background: var(--wire-field-color); + } + + .wire-next__slider-thumb { + position: absolute; + z-index: 3; + top: 50%; + left: var(--wire-range-progress); + width: 1.25rem; + height: 1.25rem; + border: 3px solid var(--wire-field-color); + border-radius: 50%; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-1); + transform: translate(-50%, -50%); + } + + .wire-next__custom-slider:focus-visible { + outline: 3px solid color-mix(in srgb, var(--wire-field-color) 28%, transparent); + outline-offset: 3px; + } + + .wire-next__slider-marks button { + position: absolute; + z-index: 2; + top: 50%; + width: 0.55rem; + height: 0.55rem; + padding: 0; + border: 2px solid var(--wire-color-surface); + border-radius: 50%; + background: var(--wire-color-muted); + transform: translate(-50%, -50%); + } + + .wire-next__range-control[data-show-steps="true"] input { + background-image: repeating-linear-gradient( + 90deg, + transparent 0, + transparent calc(10% - 1px), + var(--wire-color-border) calc(10% - 1px), + var(--wire-color-border) 10% + ); + } + + .wire-next__range-bounds { + display: grid; + grid-template-columns: 1fr auto 1fr; + color: var(--wire-color-muted); + font-size: 0.78em; + font-variant-numeric: tabular-nums; + } + + .wire-next__range-bounds span:nth-child(2) { + text-align: center; + } + + .wire-next__range-bounds span:last-child { + text-align: right; + } + + .wire-next__range-control output { + min-width: 3ch; + font-variant-numeric: tabular-nums; + } + + .wire-next__range-stepper { + display: inline-grid; + width: 2.35rem; + height: 2.35rem; + flex: 0 0 auto; + place-items: center; + border: 1px solid var(--wire-color-border); + border-radius: 50%; + background: var(--wire-color-surface); + color: var(--wire-color-text); + font: inherit; + font-size: 1.2rem; + cursor: pointer; + } + + .wire-next__range-stepper:hover:not(:disabled) { + border-color: var(--wire-field-color); + color: var(--wire-field-color); + } + + .wire-next__range-stepper:disabled { + cursor: not-allowed; + opacity: 0.45; + } + } } diff --git a/packages/ui/components/StrongPassword.wrn b/packages/ui/components/StrongPassword.wrn index 4891907c..6f6d0427 100644 --- a/packages/ui/components/StrongPassword.wrn +++ b/packages/ui/components/StrongPassword.wrn @@ -215,4 +215,197 @@ component StrongPassword { {validationMessage} } + + style { + .wire-next--strong-password { + position: relative; + display: grid; + width: 100%; + gap: 0.6rem; + color: var(--wire-color-text); + } + + .wire-next--strong-password > label { + font-size: 0.82em; + font-weight: 700; + } + + .wire-next__strong-password-anchor { + position: relative; + } + + .wire-next--strong-password input { + width: 100%; + min-height: 2.75em; + padding: 0.68em 0.85em; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + outline: 0; + color: var(--wire-color-text); + background: var(--wire-color-surface); + font: inherit; + transition: + border-color 160ms ease, + box-shadow 160ms ease; + } + + .wire-next--strong-password input:focus-visible { + border-color: var(--wire-component-color); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 16%, transparent); + } + + .wire-next__strong-password-details { + display: grid; + gap: 0.65rem; + } + + .wire-next__strong-password-summary { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + color: var(--wire-color-muted); + font-size: 0.75em; + } + + .wire-next__strong-password-summary strong { + color: var(--wire-color-text); + } + + .wire-next__strong-password-meter { + width: 100%; + height: 0.42rem; + overflow: hidden; + border-radius: 999px; + background: color-mix(in srgb, var(--wire-color-border) 72%, transparent); + } + + .wire-next__strong-password-meter > span { + display: block; + width: 0; + height: 100%; + border-radius: inherit; + background: var(--wire-color-danger); + transition: + width 180ms ease, + background-color 180ms ease; + } + + .wire-next--strong-password[data-strength="fair"] .wire-next__strong-password-meter > span { + background: var(--wire-color-warning); + } + + .wire-next--strong-password[data-strength="good"] .wire-next__strong-password-meter > span { + background: var(--wire-component-color); + } + + .wire-next--strong-password[data-strength="strong"] .wire-next__strong-password-meter > span { + background: var(--wire-color-success); + } + + .wire-next__strong-password-requirements { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.45rem 1rem; + margin: 0; + padding: 0; + list-style: none; + } + + .wire-next__strong-password-requirements li { + display: flex; + min-width: 0; + align-items: flex-start; + gap: 0.45rem; + color: var(--wire-color-muted); + font-size: 0.72em; + line-height: 1.45; + } + + .wire-next__strong-password-requirements li > span { + position: relative; + width: 0.9rem; + height: 0.9rem; + flex: 0 0 auto; + margin-top: 0.08rem; + border: 1px solid currentColor; + border-radius: 50%; + } + + .wire-next__strong-password-requirements li > span::after { + position: absolute; + top: 0.12rem; + left: 0.29rem; + width: 0.22rem; + height: 0.42rem; + border: solid var(--wire-color-surface); + border-width: 0 0.1rem 0.1rem 0; + content: ""; + opacity: 0; + transform: rotate(45deg); + } + + .wire-next__strong-password-requirements li[data-met="true"] { + color: var(--wire-color-success); + } + + .wire-next__strong-password-requirements li[data-met="true"] > span { + border-color: var(--wire-color-success); + background: var(--wire-color-success); + } + + .wire-next__strong-password-requirements li[data-met="true"] > span::after { + opacity: 1; + } + + .wire-next__strong-password-details > small { + color: var(--wire-color-muted); + font-size: 0.7em; + line-height: 1.5; + } + + .wire-next__strong-password-popover { + position: absolute; + top: calc(100% + 0.7rem); + left: 0; + z-index: 30; + width: min(28rem, calc(100vw - 2rem)); + padding: 1rem; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius); + opacity: 0; + visibility: hidden; + background: var(--wire-color-surface); + box-shadow: var(--wire-shadow-2); + transform: translateY(-0.35rem); + transition: + opacity 140ms ease, + transform 140ms ease, + visibility 140ms ease; + } + + .wire-next__strong-password-popover[data-open="true"] { + opacity: 1; + visibility: visible; + transform: translateY(0); + } + + .wire-next__strong-password-popover-arrow { + position: absolute; + top: -0.38rem; + left: 1.25rem; + width: 0.7rem; + height: 0.7rem; + border-top: 1px solid var(--wire-color-border); + border-left: 1px solid var(--wire-color-border); + background: var(--wire-color-surface); + transform: rotate(45deg); + } + + @media (max-width: 560px) { + .wire-next__strong-password-requirements { + grid-template-columns: 1fr; + } + } + } } diff --git a/packages/ui/components/TimePicker.wrn b/packages/ui/components/TimePicker.wrn index 7c5bdf7c..e1ffe532 100644 --- a/packages/ui/components/TimePicker.wrn +++ b/packages/ui/components/TimePicker.wrn @@ -63,4 +63,30 @@ size: string = "default" {error} } + + style { + .wire-next__time-panel { + grid-template-columns: 1fr 1fr; + } + + .wire-next__time-options { + display: grid; + max-height: 12rem; + margin-top: 0.4rem; + overflow-y: auto; + gap: 0.2rem; + } + + .wire-next__time-done { + align-self: end; + background: var(--wire-field-color) !important; + color: var(--wire-color-primary-contrast, #fff) !important; + } + + @media (max-width: 640px) { + .wire-next__time-panel { + grid-template-columns: 1fr; + } + } + } } diff --git a/packages/ui/components/ToggleCount.wrn b/packages/ui/components/ToggleCount.wrn index 1a2a3a29..28ae89e8 100644 --- a/packages/ui/components/ToggleCount.wrn +++ b/packages/ui/components/ToggleCount.wrn @@ -280,4 +280,182 @@ component ToggleCount { {/if} } + + style { + .wire-next--toggle-count { + --wire-toggle-count-accent: var(--wire-component-color); + display: grid; + width: fit-content; + gap: 0.75rem; + color: var(--wire-color-text); + } + + .wire-next--toggle-count-full { + width: 100%; + } + + .wire-next__toggle-count-control { + display: flex; + } + + .wire-next__toggle-count-segmented { + display: inline-flex; + gap: 0.2rem; + padding: 0.2rem; + border-radius: calc(var(--wire-radius-sm) + 0.15rem); + background: var(--wire-color-surface-2); + box-shadow: inset 0 0 0 1px var(--wire-color-border); + } + + .wire-next__toggle-count-segmented button { + min-height: 2.35rem; + padding: 0.45rem 0.8rem; + border: 0; + border-radius: var(--wire-radius-sm); + background: transparent; + color: var(--wire-color-muted); + font: inherit; + font-size: 0.78rem; + font-weight: 700; + cursor: pointer; + } + + .wire-next__toggle-count-segmented button[aria-pressed="true"] { + background: var(--wire-color-surface); + color: var(--wire-color-text); + box-shadow: + var(--wire-shadow-1), + inset 0 -2px var(--wire-toggle-count-accent); + } + + .wire-next__toggle-count-segmented button:focus-visible, + .wire-next__toggle-count-switch:focus-visible { + outline: 2px solid var(--wire-toggle-count-accent); + outline-offset: 2px; + } + + .wire-next__toggle-count-segmented button:disabled, + .wire-next__toggle-count-switch:disabled { + cursor: not-allowed; + } + + .wire-next__toggle-count-control:has(.wire-next__toggle-count-switch) { + align-items: center; + gap: 0.7rem; + font-size: 0.78rem; + font-weight: 700; + } + + .wire-next__toggle-count-control > span { + color: var(--wire-color-muted); + } + + .wire-next__toggle-count-control > span[data-selected="true"] { + color: var(--wire-color-text); + } + + .wire-next__toggle-count-switch { + position: relative; + width: 2.65rem; + height: 1.45rem; + padding: 0.15rem; + border: 1px solid var(--wire-color-border); + border-radius: 999px; + background: var(--wire-color-surface-2); + cursor: pointer; + transition: background-color var(--wire-motion-fast) var(--wire-ease-standard); + } + + .wire-next__toggle-count-switch > span { + display: block; + width: 1rem; + height: 1rem; + border-radius: 50%; + background: var(--wire-color-text); + box-shadow: var(--wire-shadow-1); + transition: transform var(--wire-motion-fast) var(--wire-ease-standard); + } + + .wire-next__toggle-count-switch[aria-checked="true"] { + border-color: var(--wire-toggle-count-accent); + background: var(--wire-toggle-count-accent); + } + + .wire-next__toggle-count-switch[aria-checked="true"] > span { + background: white; + transform: translateX(1.15rem); + } + + .wire-next__toggle-count-items { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); + overflow: hidden; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-md); + background: var(--wire-color-surface); + } + + .wire-next__toggle-count-items article { + display: grid; + align-content: start; + gap: 0.35rem; + min-width: 0; + padding: 1rem; + } + + .wire-next__toggle-count-items article + article { + border-left: 1px solid var(--wire-color-border); + } + + .wire-next__toggle-count-items article > span { + color: var(--wire-color-muted); + font-size: 0.75rem; + font-weight: 600; + } + + .wire-next__toggle-count-items strong { + display: flex; + align-items: baseline; + gap: 0.2rem; + font-size: 1.5rem; + line-height: 1; + } + + .wire-next__toggle-count-items [data-toggle-count-value] { + min-width: 2ch; + font-variant-numeric: tabular-nums; + transition: + color var(--wire-motion-fast) var(--wire-ease-standard), + transform var(--wire-motion-fast) var(--wire-ease-standard); + } + + .wire-next__toggle-count-items strong small { + color: inherit; + font-size: 0.65em; + } + + .wire-next__toggle-count-items article > small { + color: var(--wire-color-muted); + font-size: 0.68rem; + } + + @media (max-width: 36rem) { + .wire-next__toggle-count-control { + justify-content: center; + } + .wire-next__toggle-count-items { + grid-template-columns: 1fr; + } + .wire-next__toggle-count-items article + article { + border-top: 1px solid var(--wire-color-border); + border-left: 0; + } + } + + @media (prefers-reduced-motion: reduce) { + .wire-next__toggle-count-items [data-toggle-count-value] { + transition: none; + } + } + } } diff --git a/packages/ui/components/TogglePassword.wrn b/packages/ui/components/TogglePassword.wrn index e15c9c39..0169d9da 100644 --- a/packages/ui/components/TogglePassword.wrn +++ b/packages/ui/components/TogglePassword.wrn @@ -153,4 +153,140 @@ component TogglePassword { >{validationMessage} } + + style { + .wire-next--toggle-password { + display: grid; + width: 100%; + min-width: 0; + max-width: none; + box-sizing: border-box; + gap: 0.45rem; + padding: 0; + border: 0; + } + + .wire-next--toggle-password > label { + color: var(--wire-color-text); + font-size: 0.75rem; + font-weight: 600; + } + + .wire-next__password-fields { + display: grid; + gap: 1rem; + } + + .wire-next__password-field { + display: grid; + gap: 0.45rem; + } + + .wire-next__password-field > label { + color: var(--wire-color-text); + font-size: 0.82em; + font-weight: 750; + } + + .wire-next__password-control { + position: relative; + display: flex; + min-width: 0; + align-items: center; + width: 100%; + } + + .wire-next__password-control > input { + width: 100%; + min-width: 0; + min-height: 2.75em; + padding: 0.65em 3em 0.65em 0.8em; + border: 1px solid var(--wire-color-border); + border-radius: var(--wire-radius-sm); + outline: 0; + color: var(--wire-color-text); + background: var(--wire-color-bg); + font: inherit; + font-size: 0.8125rem; + transition: + border-color var(--wire-motion-base) var(--wire-ease-standard), + box-shadow var(--wire-motion-base) var(--wire-ease-standard); + } + + .wire-next__password-control > input:focus-visible { + border-color: var(--wire-component-color); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); + } + + .wire-next__password-toggle { + position: absolute; + top: 50%; + right: 0.45em; + display: grid; + width: 2em; + height: 2em; + padding: 0; + place-items: center; + border: 0; + border-radius: calc(var(--wire-radius-sm) * 0.72); + color: var(--wire-color-muted); + background: transparent; + cursor: pointer; + transform: translateY(-50%); + } + + .wire-next__password-toggle:hover, + .wire-next__password-toggle:focus-visible { + color: var(--wire-component-color); + background: color-mix(in srgb, var(--wire-component-color) 10%, transparent); + outline: 0; + } + + .wire-next__password-icon { + display: block; + width: 1.05em; + height: 1.05em; + background: currentColor; + mask-position: center; + mask-repeat: no-repeat; + mask-size: contain; + } + + .wire-next__password-icon--show { + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.7 7.6 7.64 5 12 5c4.36 0 8.3 2.6 9.94 6.65a1 1 0 0 1 0 .7C20.3 16.4 16.36 19 12 19c-4.36 0-8.3-2.6-9.94-6.65Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); + } + + .wire-next__password-toggle[aria-pressed="true"]::after { + position: absolute; + width: 1.25em; + height: 0.12em; + border-radius: 999px; + background: currentColor; + content: ""; + transform: rotate(45deg); + box-shadow: 0 0 0 1px var(--wire-color-bg); + } + + .wire-next__password-checkbox { + display: inline-flex; + width: fit-content; + align-items: center; + gap: 0.55rem; + color: var(--wire-color-muted); + font-size: 0.78em; + cursor: pointer; + } + + .wire-next__password-checkbox > input { + width: 1rem; + height: 1rem; + margin: 0; + accent-color: var(--wire-component-color); + } + + .wire-next--toggle-password > small { + color: var(--wire-color-muted); + font-size: 0.72em; + } + } } diff --git a/packages/ui/components/alert.wrn b/packages/ui/components/alert.wrn index eafbb887..76a46a58 100644 --- a/packages/ui/components/alert.wrn +++ b/packages/ui/components/alert.wrn @@ -143,4 +143,201 @@ component Alert { {/if} } + + style { + .wire-next--alert { + --wire-alert-color: var(--wire-component-color); + --wire-alert-soft: color-mix(in srgb, var(--wire-alert-color) 16%, var(--wire-color-surface)); + display: grid; + grid-template-columns: auto minmax(0, 1fr) auto; + gap: 0.8rem; + width: 100%; + padding: 1rem; + border: 1px solid transparent; + border-radius: var(--wire-radius, 0.75rem); + color: var(--wire-color-text); + } + + .wire-next--alert[data-radius="none"] { + border-radius: 0; + } + + .wire-next--alert[data-radius="sm"] { + border-radius: var(--wire-radius-sm, 0.375rem); + } + + .wire-next--alert[data-radius="lg"] { + border-radius: calc(var(--wire-radius, 0.75rem) * 1.35); + } + + .wire-next--alert[data-radius="xl"] { + border-radius: calc(var(--wire-radius, 0.75rem) * 1.75); + } + + .wire-next--alert[data-shadow="none"] { + box-shadow: none; + } + + .wire-next--alert[data-shadow="sm"] { + box-shadow: 0 6px 16px color-mix(in srgb, #000 14%, transparent); + } + + .wire-next--alert[data-shadow="md"] { + box-shadow: + 0 2px 6px color-mix(in srgb, #000 10%, transparent), + 0 12px 28px color-mix(in srgb, #000 18%, transparent); + } + + .wire-next--alert[data-shadow="lg"] { + box-shadow: + 0 4px 10px color-mix(in srgb, #000 12%, transparent), + 0 20px 48px color-mix(in srgb, #000 24%, transparent); + } + + .wire-next--alert[data-color="secondary"] { + --wire-alert-color: #737373; + } + + .wire-next--alert[data-color="success"] { + --wire-alert-color: #0f9f8f; + } + + .wire-next--alert[data-color="danger"] { + --wire-alert-color: #dc3545; + } + + .wire-next--alert[data-color="warning"] { + --wire-alert-color: #eab308; + } + + .wire-next--alert[data-color="info"] { + --wire-alert-color: #2563eb; + } + + .wire-next--alert[data-color="dark"] { + --wire-alert-color: #27272a; + } + + .wire-next--alert[data-color="light"] { + --wire-alert-color: #f4f4f5; + } + + .wire-next--alert-compact { + padding: 0.75rem 0.9rem; + } + + .wire-next--alert-compact:not(:has(.wire-next__alert-icon)):not(:has(.wire-next__alert-dismiss)) { + grid-template-columns: minmax(0, 1fr); + } + + .wire-next--alert-compact .wire-next__alert-body { + display: block; + } + + .wire-next--alert-compact .wire-next__alert-title { + margin-right: 0.25rem; + } + + .wire-next--alert-compact .wire-next__alert-body > p { + display: inline; + } + + .wire-next__alert-icon { + display: inline-grid; + width: 1.25rem; + height: 1.25rem; + place-items: center; + margin-top: 0.05rem; + color: var(--wire-alert-color); + } + + .wire-next__alert-icon > span { + width: 1rem; + height: 1rem; + } + + .wire-next__alert-body { + display: grid; + min-width: 0; + gap: 0.35rem; + } + + .wire-next__alert-title { + font-size: 0.88rem; + line-height: 1.45; + } + + .wire-next__alert-body > p, + .wire-next__alert-body li { + color: inherit; + font-size: 0.8rem; + line-height: 1.55; + } + + .wire-next__alert-body > ul { + display: grid; + gap: 0.25rem; + margin: 0.15rem 0 0; + padding-left: 1.25rem; + } + + .wire-next__alert-actions { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 1rem; + margin-top: 0.35rem; + } + + .wire-next__alert-actions a { + color: var(--wire-alert-color); + font-size: 0.78rem; + font-weight: 700; + text-decoration: none; + } + + .wire-next__alert-actions a:hover { + text-decoration: underline; + } + + .wire-next__alert-actions a[data-variant="action"] { + padding: 0.35rem 0.6rem; + border-radius: var(--wire-radius-sm); + background: var(--wire-alert-color); + color: white; + text-decoration: none; + } + + .wire-next__alert-dismiss { + display: inline-grid; + width: 1.75rem; + height: 1.75rem; + place-items: center; + padding: 0; + border: 0; + border-radius: var(--wire-radius-sm); + background: transparent; + color: currentColor; + cursor: pointer; + } + + .wire-next__alert-dismiss:hover { + background: color-mix(in srgb, currentColor 10%, transparent); + } + + .wire-next__alert-dismiss:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } + + @media (max-width: 36rem) { + .wire-next--alert { + grid-template-columns: auto minmax(0, 1fr); + } + .wire-next__alert-dismiss { + grid-column: 2; + grid-row: 1; + justify-self: end; + } + } + } } diff --git a/packages/ui/components/avatar.wrn b/packages/ui/components/avatar.wrn index 681824cd..0b483325 100644 --- a/packages/ui/components/avatar.wrn +++ b/packages/ui/components/avatar.wrn @@ -87,4 +87,265 @@ src: string = "" {/if} } + + style { + /* --- Avatar -------------------------------------------------------------- */ + .wire-next--avatar { + display: inline-flex; + width: fit-content; + max-width: 100%; + align-items: center; + } + + .wire-next--avatar-media { + gap: 0.8rem; + } + + .wire-next__avatar-wrap { + --wire-avatar-size: 3rem; + --wire-avatar-color: var(--wire-color-primary); + position: relative; + display: inline-grid; + width: var(--wire-avatar-size); + height: var(--wire-avatar-size); + flex: none; + place-items: center; + border-radius: 999px; + outline: none; + } + + .wire-next__avatar-wrap[data-size="xs"] { + --wire-avatar-size: 1.75rem; + } + + .wire-next__avatar-wrap[data-size="sm"] { + --wire-avatar-size: 2.25rem; + } + + .wire-next__avatar-wrap[data-size="md"], + .wire-next__avatar-wrap[data-size="default"] { + --wire-avatar-size: 3rem; + } + + .wire-next__avatar-wrap[data-size="lg"] { + --wire-avatar-size: 4rem; + } + + .wire-next__avatar-wrap[data-size="xl"] { + --wire-avatar-size: 5rem; + } + + .wire-next__avatar-wrap[data-color="secondary"] { + --wire-avatar-color: #737373; + } + + .wire-next__avatar-wrap[data-color="success"] { + --wire-avatar-color: var(--wire-color-success); + } + + .wire-next__avatar-wrap[data-color="info"] { + --wire-avatar-color: var(--wire-color-info); + } + + .wire-next__avatar-wrap[data-color="danger"] { + --wire-avatar-color: var(--wire-color-danger); + } + + .wire-next__avatar-wrap[data-color="warning"] { + --wire-avatar-color: var(--wire-color-warning); + } + + .wire-next__avatar-wrap[data-color="light"] { + --wire-avatar-color: #f4f4f5; + } + + .wire-next__avatar-wrap[data-color="dark"] { + --wire-avatar-color: #27272a; + } + + .wire-next__avatar { + display: grid; + width: 100%; + height: 100%; + overflow: hidden; + place-items: center; + color: white; + border: 1px solid color-mix(in srgb, var(--wire-avatar-color) 58%, var(--wire-color-border)); + border-radius: inherit; + background: var(--wire-avatar-color); + box-shadow: + 0 0 0 2px var(--wire-color-bg), + 0 5px 14px rgb(0 0 0 / 0.16); + } + + .wire-next__avatar-wrap[data-shape="rounded"] { + border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72); + } + + .wire-next__avatar-wrap[data-shape="square"] { + border-radius: 0; + } + + .wire-next__avatar img { + width: 100%; + height: 100%; + object-fit: cover; + } + + .wire-next__avatar-initials { + font-size: calc(var(--wire-avatar-size) * 0.32); + font-weight: 750; + line-height: 1; + letter-spacing: -0.02em; + } + + .wire-next__avatar-placeholder { + width: 54%; + height: 54%; + color: currentColor; + opacity: 0.72; + } + + .wire-next__avatar-wrap[data-variant="soft"] .wire-next__avatar { + color: var(--wire-avatar-color); + border-color: transparent; + background: color-mix(in srgb, var(--wire-avatar-color) 15%, var(--wire-color-surface)); + box-shadow: none; + } + + .wire-next__avatar-wrap[data-variant="outline"] .wire-next__avatar { + color: var(--wire-avatar-color); + border-color: var(--wire-avatar-color); + background: transparent; + box-shadow: none; + } + + .wire-next__avatar-wrap[data-variant="white"] .wire-next__avatar { + color: var(--wire-color-text); + border-color: var(--wire-color-border); + background: var(--wire-color-surface); + box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); + } + + .wire-next__avatar-status { + position: absolute; + right: -0.04rem; + bottom: -0.04rem; + z-index: 2; + width: max(0.58rem, calc(var(--wire-avatar-size) * 0.24)); + height: max(0.58rem, calc(var(--wire-avatar-size) * 0.24)); + border: 2px solid var(--wire-color-bg); + border-radius: 999px; + background: var(--wire-color-muted); + } + + .wire-next__avatar-wrap[data-status-position="top"] .wire-next__avatar-status { + top: -0.04rem; + bottom: auto; + } + + .wire-next__avatar-status[data-status="online"], + .wire-next__avatar-status[data-status="success"] { + background: #14cba8; + } + + .wire-next__avatar-status[data-status="busy"], + .wire-next__avatar-status[data-status="danger"] { + background: #fb5b68; + } + + .wire-next__avatar-status[data-status="away"], + .wire-next__avatar-status[data-status="warning"] { + background: #ffc400; + } + + .wire-next__avatar-badge { + position: absolute; + right: -0.25rem; + bottom: -0.25rem; + z-index: 3; + display: grid; + width: max(1rem, calc(var(--wire-avatar-size) * 0.42)); + height: max(1rem, calc(var(--wire-avatar-size) * 0.42)); + place-items: center; + color: white; + border: 2px solid var(--wire-color-bg); + border-radius: 999px; + background: #27272a; + box-shadow: 0 4px 10px rgb(0 0 0 / 0.22); + } + + .wire-next__avatar-badge > span { + width: 62%; + height: 62%; + } + + .wire-next__avatar-badge--text { + font-size: calc(var(--wire-avatar-size) * 0.18); + font-weight: 800; + } + + .wire-next__avatar-tooltip { + position: absolute; + left: 50%; + bottom: calc(100% + 0.65rem); + z-index: 20; + width: max-content; + max-width: 15rem; + padding: 0.4rem 0.6rem; + color: var(--wire-color-bg); + border-radius: 0.4rem; + background: var(--wire-color-text); + box-shadow: 0 8px 22px rgb(0 0 0 / 0.2); + font-size: 0.75rem; + font-weight: 650; + line-height: 1.25; + pointer-events: none; + opacity: 0; + transform: translate(-50%, 0.25rem); + transition: + opacity var(--wire-motion-fast) var(--wire-ease-standard), + transform var(--wire-motion-fast) var(--wire-ease-standard); + } + + .wire-next__avatar-tooltip::after { + content: ""; + position: absolute; + top: 100%; + left: 50%; + border: 0.3rem solid transparent; + border-top-color: var(--wire-color-text); + transform: translateX(-50%); + } + + .wire-next__avatar-wrap:hover .wire-next__avatar-tooltip, + .wire-next__avatar-wrap:focus-visible .wire-next__avatar-tooltip { + opacity: 1; + transform: translate(-50%, 0); + } + + .wire-next__avatar-wrap:focus-visible { + outline: 2px solid var(--wire-avatar-color); + outline-offset: 4px; + } + + .wire-next__avatar-copy { + display: grid; + min-width: 0; + gap: 0.15rem; + } + + .wire-next__avatar-copy strong { + color: var(--wire-color-text); + font-size: 0.9rem; + } + + .wire-next__avatar-copy > span { + overflow: hidden; + color: var(--wire-color-muted); + font-size: 0.78rem; + text-overflow: ellipsis; + white-space: nowrap; + } + } } diff --git a/packages/ui/components/badge.wrn b/packages/ui/components/badge.wrn index 39881a20..2a51bb18 100644 --- a/packages/ui/components/badge.wrn +++ b/packages/ui/components/badge.wrn @@ -100,4 +100,244 @@ component Badge { } + + style { + /* --- Badge --------------------------------------------------------------- */ + .wire-next--badge-root { + position: relative; + display: inline-flex; + width: fit-content; + max-width: 100%; + vertical-align: middle; + } + + .wire-next__badge { + --wire-badge-color: var(--wire-color-primary); + position: relative; + isolation: isolate; + display: inline-flex; + min-width: 0; + min-height: 1.65rem; + align-items: center; + justify-content: center; + gap: 0.35rem; + max-width: var(--wire-badge-max-width); + padding: 0.25rem 0.6rem; + color: white; + border: 1px solid var(--wire-badge-color); + border-radius: 999px; + background: var(--wire-badge-color); + box-shadow: 0 4px 12px color-mix(in srgb, var(--wire-badge-color) 18%, transparent); + font-size: 0.75rem; + font-weight: 750; + line-height: 1; + white-space: nowrap; + } + + .wire-next__badge[data-size="xs"] { + min-height: 1.25rem; + padding: 0.15rem 0.4rem; + font-size: 0.625rem; + } + + .wire-next__badge[data-size="sm"] { + min-height: 1.45rem; + padding: 0.2rem 0.5rem; + font-size: 0.6875rem; + } + + .wire-next__badge[data-size="lg"] { + min-height: 2rem; + padding: 0.35rem 0.75rem; + font-size: 0.825rem; + } + + .wire-next__badge[data-color="secondary"] { + --wire-badge-color: #737373; + } + + .wire-next__badge[data-color="success"] { + --wire-badge-color: #0f9f8f; + } + + .wire-next__badge[data-color="info"] { + --wire-badge-color: #2563eb; + } + + .wire-next__badge[data-color="danger"] { + --wire-badge-color: #ef3340; + } + + .wire-next__badge[data-color="warning"] { + --wire-badge-color: #eab308; + } + + .wire-next__badge[data-color="dark"] { + --wire-badge-color: #27272a; + } + + .wire-next__badge[data-color="light"] { + --wire-badge-color: #f4f4f5; + } + + .wire-next__badge[data-color="warning"][data-variant="solid"], + .wire-next__badge[data-color="light"][data-variant="solid"] { + color: #18181b; + } + + .wire-next__badge[data-variant="soft"] { + color: var(--wire-badge-color); + border-color: transparent; + background: color-mix(in srgb, var(--wire-badge-color) 15%, var(--wire-color-surface)); + box-shadow: none; + } + + .wire-next__badge[data-variant="outline"] { + color: var(--wire-badge-color); + background: transparent; + box-shadow: none; + } + + .wire-next__badge[data-variant="white"] { + color: var(--wire-color-text); + border-color: var(--wire-color-border); + background: var(--wire-color-surface); + box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); + } + + .wire-next__badge[data-shape="rounded"] { + border-radius: 0.4rem; + } + + .wire-next__badge[data-shape="square"] { + border-radius: 0; + } + + .wire-next__badge-label { + min-width: 0; + } + + .wire-next__badge-label--truncate { + overflow: hidden; + text-overflow: ellipsis; + } + + .wire-next__badge-dot { + width: 0.42rem; + height: 0.42rem; + flex: none; + border-radius: 999px; + background: currentColor; + } + + .wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label)) { + width: 0.7rem; + min-width: 0.7rem; + height: 0.7rem; + min-height: 0.7rem; + padding: 0; + border: 2px solid var(--wire-color-bg); + } + + .wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label)) + .wire-next__badge-dot { + width: 100%; + height: 100%; + } + + .wire-next__badge-icon { + width: 0.9rem; + height: 0.9rem; + flex: none; + } + + .wire-next__badge-avatar { + width: 1.25rem; + height: 1.25rem; + margin-left: -0.35rem; + object-fit: cover; + border: 1px solid color-mix(in srgb, currentColor 35%, transparent); + border-radius: 999px; + } + + .wire-next__badge-dismiss { + display: grid; + width: 1.15rem; + height: 1.15rem; + margin-right: -0.3rem; + padding: 0; + place-items: center; + color: currentColor; + border: 0; + border-radius: 999px; + background: color-mix(in srgb, currentColor 12%, transparent); + cursor: pointer; + } + + .wire-next__badge-dismiss:hover { + background: color-mix(in srgb, currentColor 22%, transparent); + } + + .wire-next__badge-dismiss:focus-visible { + outline: 2px solid currentColor; + outline-offset: 2px; + } + + .wire-next__badge-dismiss span { + width: 0.75rem; + height: 0.75rem; + } + + .wire-next__badge-anchor { + display: inline-flex; + min-height: 2.75rem; + align-items: center; + justify-content: center; + gap: 0.5rem; + padding: 0.65rem 0.9rem; + color: var(--wire-color-text); + border: 1px solid var(--wire-color-border); + border-radius: 0.5rem; + background: var(--wire-color-surface); + font: inherit; + font-size: 0.875rem; + font-weight: 700; + } + + .wire-next__badge-anchor > [class*="icon-"] { + width: 1rem; + height: 1rem; + } + + .wire-next--badge-anchored[data-placement="inline"] { + align-items: center; + } + + .wire-next--badge-anchored[data-placement="inline"] .wire-next__badge { + margin-left: -0.55rem; + } + + .wire-next--badge-anchored[data-placement="top-right"] .wire-next__badge { + position: absolute; + top: -0.55rem; + right: -0.75rem; + z-index: 2; + } + + .wire-next__badge-ping { + position: absolute; + z-index: -1; + inset: -0.25rem; + border-radius: inherit; + background: var(--wire-badge-color); + opacity: 0.5; + animation: wire-badge-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; + } + + @media (prefers-reduced-motion: reduce) { + .wire-next__badge-ping { + animation: none; + } + } + } } diff --git a/packages/ui/components/button.wrn b/packages/ui/components/button.wrn index e15bb076..811ce1cd 100644 --- a/packages/ui/components/button.wrn +++ b/packages/ui/components/button.wrn @@ -164,4 +164,62 @@ label: string = "Button" {/if} } + + style { + /* --- Button --------------------------------------------------------------- */ + .wire-action { + position: relative; + display: inline-flex; + } + + .wire-btn--pill { + border-radius: 999px; + } + + .wire-btn--with-description { + min-height: 3.5rem; + justify-content: flex-start; + padding: 0.6rem 0.875rem; + text-align: left; + } + + .wire-btn__copy { + display: grid; + min-width: 0; + gap: 0.15rem; + } + + .wire-btn__description { + color: currentColor; + font-size: 0.75rem; + font-weight: 450; + line-height: 1.35; + opacity: 0.74; + } + + .wire-btn__tooltip { + position: absolute; + z-index: 80; + inset-block-end: calc(100% + 0.5rem); + inset-inline-start: 50%; + width: max-content; + max-width: min(16rem, calc(100vw - 2rem)); + padding: 0.4rem 0.6rem; + color: var(--wire-color-bg); + background: var(--wire-color-text); + border: 1px solid color-mix(in srgb, var(--wire-color-text) 85%, var(--wire-color-border)); + border-radius: var(--wire-radius-sm); + box-shadow: var(--wire-shadow-2); + font-size: 0.75rem; + font-weight: 600; + line-height: 1.25; + text-align: center; + pointer-events: none; + opacity: 0; + transform: translate(-50%, 0.25rem); + transition: + opacity var(--wire-motion-fast) var(--wire-ease-standard), + transform var(--wire-motion-fast) var(--wire-ease-standard); + } + } } diff --git a/packages/ui/components/checkbox.wrn b/packages/ui/components/checkbox.wrn index f1e921eb..4837cf13 100644 --- a/packages/ui/components/checkbox.wrn +++ b/packages/ui/components/checkbox.wrn @@ -173,4 +173,31 @@ size: string = "default" } + + style { + .wire-next__checkbox-content { + display: grid; + width: 100%; + min-width: 0; + align-items: start; + grid-template-columns: minmax(0, 1fr); + } + + .wire-next__checkbox-slot { + display: block; + min-width: 0; + flex: 1 1 auto; + color: var(--wire-color-muted); + font-size: 0.75rem; + line-height: 1.45; + } + + .wire-next__checkbox-slot:empty { + display: none; + } + + .wire-next__checkbox-slot :is(a, button) { + color: var(--wire-field-color); + } + } } diff --git a/packages/ui/components/select.wrn b/packages/ui/components/select.wrn index b9ccdda6..f33a684d 100644 --- a/packages/ui/components/select.wrn +++ b/packages/ui/components/select.wrn @@ -61,4 +61,13 @@ size: string = "default" {error} } + + style { + .wire-next--select select { + width: 100%; + min-height: 2.65rem; + margin: 0; + line-height: 1.35; + } + } } diff --git a/packages/ui/components/switch.wrn b/packages/ui/components/switch.wrn index 50fb8f11..c2a8feab 100644 --- a/packages/ui/components/switch.wrn +++ b/packages/ui/components/switch.wrn @@ -39,4 +39,48 @@ component Switch { {#if helperText}{helperText}{/if}{error} } + + style { + .wire-next--switch input { + appearance: none; + position: relative; + width: 2.5rem; + height: 1.4rem; + border: 1px solid var(--wire-color-border); + border-radius: 999px; + background: var(--wire-color-surface-2); + transition: background var(--wire-motion-fast) var(--wire-ease-standard); + } + + .wire-next--switch { + min-height: 2.65rem; + justify-content: flex-start; + } + + .wire-next--switch > span:last-child { + line-height: 1.35; + } + + .wire-next--switch input::after { + position: absolute; + top: 0.15rem; + left: 0.15rem; + width: 1rem; + height: 1rem; + border-radius: 999px; + background: var(--wire-color-text); + content: ""; + transition: transform var(--wire-motion-fast) var(--wire-ease-standard); + } + + .wire-next--switch input:checked { + border-color: var(--wire-field-color); + background: var(--wire-field-color); + } + + .wire-next--switch input:checked::after { + background: var(--wire-color-primary-contrast, #fff); + transform: translateX(1.1rem); + } + } } diff --git a/packages/ui/test/ui.test.ts b/packages/ui/test/ui.test.ts index d551a420..a7e401e0 100644 --- a/packages/ui/test/ui.test.ts +++ b/packages/ui/test/ui.test.ts @@ -10,6 +10,13 @@ import { renderThemeCss, resolveThemeConfig } from "../../styles/src/theme.ts"; // bundled for the browser. import { uiComponentNames, uiComponentsDir, uiComponentPath, uiCss } from "../src/registry.ts"; +function uiStyles(): string { + return [ + uiCss(), + ...uiComponentNames().map((name) => readFileSync(uiComponentPath(name), "utf8")), + ].join("\n"); +} + test("bundled UI assets are discoverable and readable", () => { expect(uiComponentNames()).toContain("Button"); expect(uiComponentNames()).toContain("Accordion"); @@ -20,7 +27,7 @@ test("bundled UI assets are discoverable and readable", () => { }); test("global UI CSS stays below its migration ratchet", () => { - expect(gzipSync(new TextEncoder().encode(uiCss())).length).toBeLessThanOrEqual(26_004); + expect(gzipSync(new TextEncoder().encode(uiCss())).length).toBeLessThanOrEqual(12_672); }); test("generated component reference documents every bundled component and its props", () => { @@ -420,7 +427,7 @@ test("footer renders header and link entries with the requested column count", a }); test("component-system CSS includes responsive, theme-token, focus, and reduced-motion rules", () => { - const css = uiCss(); + const css = uiStyles(); expect(css).toContain("@media (max-width: 768px)"); expect(css).toContain("@media (max-width: 480px)"); expect(css).toContain("@media (prefers-reduced-motion: reduce)"); @@ -448,7 +455,7 @@ test("component-system CSS includes responsive, theme-token, focus, and reduced- * unchanged; only where they live moved. */ const navbarSource = readFileSync(uiComponentPath("Navbar"), "utf8"); - expect(css).not.toContain(".wire-navbar"); + expect(uiCss()).not.toContain(".wire-navbar"); expect(navbarSource).toMatch( /\.wire-navbar__brand-copy strong\s*\{[^}]*font-size: 0\.9rem;[^}]*font-weight: 600;/s, ); @@ -522,8 +529,8 @@ test("icon buttons expose their accessible label as a hover and focus tooltip", const button = readFileSync(uiComponentPath("Button"), "utf8"); expect(button).toContain('class="wire-btn__tooltip"'); expect(button).toContain("{ariaLabel || label}"); - expect(uiCss()).toContain(".wire-btn:hover > .wire-btn__tooltip"); - expect(uiCss()).toContain(".wire-btn:focus-visible > .wire-btn__tooltip"); + expect(uiStyles()).toContain(".wire-btn:hover > .wire-btn__tooltip"); + expect(uiStyles()).toContain(".wire-btn:focus-visible > .wire-btn__tooltip"); }); test("button links navigate by default and only download when the native attribute is passed", () => { @@ -593,7 +600,7 @@ test("button group supports vertical, responsive, detached, and toolbar layouts" expect(group.getAttribute("data-attached")).toBe("false"); expect(group.querySelector('[class*="icon-[lucide--bold]"]')).not.toBeNull(); - const css = uiCss(); + const css = uiStyles(); expect(css).toContain('.wire-next--button-group[data-orientation="vertical"]'); expect(css).toContain('.wire-next--button-group[data-responsive="true"]'); expect(css).toContain('.wire-next--button-group[data-attached="false"]'); @@ -727,7 +734,7 @@ test("dismissible alert hides itself and emits dismiss details", async () => { }); test("solid alert palettes preserve readable foregrounds and compact inline layout", () => { - const css = uiCss(); + const css = uiStyles(); expect(css).toContain('.wire-next--alert[data-color="secondary"]'); expect(css).toContain("--wire-alert-color: #737373"); @@ -747,7 +754,7 @@ test("alert exposes configurable radius and elevation treatments", async () => { }); const dom = mountHtml(html); const root = dom.querySelector("[data-wrn-alert]") as HTMLElement; - const css = uiCss(); + const css = uiStyles(); expect(root.dataset.radius).toBe("xl"); expect(root.dataset.shadow).toBe("lg"); @@ -798,7 +805,7 @@ test("avatar renders images, fallbacks, presence, badges, tooltips, and media co const placeholderDom = mountHtml(await renderComponent(source, { size: "sm" })); expect(placeholderDom.querySelector(".wire-next__avatar-placeholder")).not.toBeNull(); expect(source).not.toContain("items ="); - expect(uiCss()).toContain('.wire-next__avatar-wrap[data-shape="rounded"]'); + expect(uiStyles()).toContain('.wire-next__avatar-wrap[data-shape="rounded"]'); }); test("avatar group limits members and opens an accessible overflow menu", async () => { @@ -841,7 +848,7 @@ test("avatar group limits members and opens an accessible overflow menu", async "true", ); expect(eventDetail).toEqual(expect.objectContaining({ open: true, hiddenCount: 2 })); - expect(uiCss()).toContain('.wire-next--avatar-group[data-layout="grid"]'); + expect(uiStyles()).toContain('.wire-next--avatar-group[data-layout="grid"]'); }); test("badge supports rich content, anchored placement, animation, and dismissal", async () => { @@ -880,7 +887,7 @@ test("badge supports rich content, anchored placement, animation, and dismissal" expect(dom.querySelector("[data-wrn-badge]")?.getAttribute("data-show")).toBe("false"); expect(dismissed).toBe("Christina"); expect(source).not.toContain("items ="); - expect(uiCss()).toContain("@keyframes wire-badge-ping"); + expect(uiStyles()).toContain("@keyframes wire-badge-ping"); }); test("blockquote renders semantic quote and citation content", async () => { @@ -930,7 +937,7 @@ test("blockquote supports bordered, right-aligned, non-italic, and slotted quote expect(figure.querySelector(".wire-next__blockquote-mark")).toBeNull(); expect(source).toContain(""); - const css = uiCss(); + const css = uiStyles(); expect(css).toContain('.wire-next--blockquote[data-variant="bordered"]'); expect(css).toContain('.wire-next--blockquote[data-align="center"]'); expect(css).toContain("--wire-blockquote-font-size"); @@ -1031,7 +1038,7 @@ test("card supports overlays, horizontal media, groups, alerts, empty and scroll "true", ); - const css = uiCss(); + const css = uiStyles(); expect(css).toContain('.wire-next--card[data-layout="horizontal"]'); expect(css).toContain('.wire-next--card[data-hover="image"]'); expect(css).toContain(".wire-next__card-group"); @@ -1088,7 +1095,7 @@ test("chat bubble renders conversations, avatars, metadata, links, and public ev expect(dom.querySelectorAll(".wire-next__chat-message")).toHaveLength(2); expect(dom.querySelectorAll(".wire-next__chat-content li")).toHaveLength(2); expect(dom.querySelector(".wire-next__chat-meta[data-tone='danger']")).not.toBeNull(); - expect(uiCss()).toContain("color: var(--wire-color-primary-contrast, #fff)"); + expect(uiStyles()).toContain("color: var(--wire-color-primary-contrast, #fff)"); (dom.querySelector(".wire-next__chat-content") as HTMLElement).click(); (dom.querySelector(".wire-next__chat-avatar") as HTMLButtonElement).click(); @@ -1127,7 +1134,7 @@ test("collapse toggles accessible panels and emits open, close, and toggle event expect(trigger.getAttribute("aria-controls")).toBe("product-details"); expect(panel.dataset.open).toBe("true"); expect(panel.getAttribute("aria-hidden")).toBe("false"); - expect(uiCss()).toContain("max-height: 40rem"); + expect(uiStyles()).toContain("max-height: 40rem"); expect(trigger.textContent).toContain("Collapse"); trigger.click(); @@ -1546,7 +1553,7 @@ test("carousel supports RTL, multiple slides, dragging, snap, and thumbnail layo expect(snapRoot.dataset.snap).toBe("true"); expect(snapRoot.dataset.draggable).toBe("false"); - const css = uiCss(); + const css = uiStyles(); expect(css).toContain('.wire-next--carousel[data-rtl="true"]'); expect(css).toContain('.wire-next--carousel[data-snap="true"]'); expect(css).toContain('.wire-next--carousel[data-thumbnails="vertical"]'); @@ -2276,7 +2283,7 @@ test("strong password scores input, supports custom special characters, and open }); test("strong password completed requirements use a proper checkmark indicator", () => { - const css = uiCss(); + const css = uiStyles(); expect(css).toContain( '.wire-next__strong-password-requirements li[data-met="true"] > span::after', diff --git a/packages/ui/ui.css b/packages/ui/ui.css index 1211e856..65e401f2 100644 --- a/packages/ui/ui.css +++ b/packages/ui/ui.css @@ -151,11 +151,6 @@ grid-template-columns: 1fr; } } -/* --- Button --------------------------------------------------------------- */ -.wire-action { - position: relative; - display: inline-flex; -} .wire-btn { position: relative; --wire-btn-color: var(--wire-color-primary); @@ -363,59 +358,14 @@ width: 2.25rem; min-height: 2.25rem; } -.wire-btn--pill { - border-radius: 999px; -} -.wire-btn--with-description { - min-height: 3.5rem; - justify-content: flex-start; - padding: 0.6rem 0.875rem; - text-align: left; -} .wire-btn__icon { width: 1rem; height: 1rem; flex: none; } -.wire-btn__copy { - display: grid; - min-width: 0; - gap: 0.15rem; -} .wire-btn__label { font-weight: 650; } -.wire-btn__description { - color: currentColor; - font-size: 0.75rem; - font-weight: 450; - line-height: 1.35; - opacity: 0.74; -} -.wire-btn__tooltip { - position: absolute; - z-index: 80; - inset-block-end: calc(100% + 0.5rem); - inset-inline-start: 50%; - width: max-content; - max-width: min(16rem, calc(100vw - 2rem)); - padding: 0.4rem 0.6rem; - color: var(--wire-color-bg); - background: var(--wire-color-text); - border: 1px solid color-mix(in srgb, var(--wire-color-text) 85%, var(--wire-color-border)); - border-radius: var(--wire-radius-sm); - box-shadow: var(--wire-shadow-2); - font-size: 0.75rem; - font-weight: 600; - line-height: 1.25; - text-align: center; - pointer-events: none; - opacity: 0; - transform: translate(-50%, 0.25rem); - transition: - opacity var(--wire-motion-fast) var(--wire-ease-standard), - transform var(--wire-motion-fast) var(--wire-ease-standard); -} .wire-btn:hover > .wire-btn__tooltip, .wire-btn:focus-visible > .wire-btn__tooltip { opacity: 1; @@ -472,20 +422,6 @@ .wire-check__label { color: var(--wire-color-text); } -/* --- Badge ---------------------------------------------------------------- */ -.wire-badge { - display: inline-flex; - align-items: center; - font-size: 0.75rem; - font-weight: 700; - line-height: 1; - padding: 0.25rem 0.5rem; - border-radius: 999px; -} -.wire-badge--default { - background: var(--wire-color-surface-2); - color: var(--wire-color-text); -} .wire-badge--primary { background: var(--wire-color-primary); color: var(--wire-color-primary-contrast); @@ -624,402 +560,6 @@ object-fit: cover; border: 1px solid var(--wire-color-border); } -/* --- Avatar -------------------------------------------------------------- */ -.wire-next--avatar { - display: inline-flex; - width: fit-content; - max-width: 100%; - align-items: center; -} -.wire-next--avatar-media { - gap: 0.8rem; -} -.wire-next__avatar-wrap { - --wire-avatar-size: 3rem; - --wire-avatar-color: var(--wire-color-primary); - position: relative; - display: inline-grid; - width: var(--wire-avatar-size); - height: var(--wire-avatar-size); - flex: none; - place-items: center; - border-radius: 999px; - outline: none; -} -.wire-next__avatar-wrap[data-size="xs"] { - --wire-avatar-size: 1.75rem; -} -.wire-next__avatar-wrap[data-size="sm"] { - --wire-avatar-size: 2.25rem; -} -.wire-next__avatar-wrap[data-size="md"], -.wire-next__avatar-wrap[data-size="default"] { - --wire-avatar-size: 3rem; -} -.wire-next__avatar-wrap[data-size="lg"] { - --wire-avatar-size: 4rem; -} -.wire-next__avatar-wrap[data-size="xl"] { - --wire-avatar-size: 5rem; -} -.wire-next__avatar-wrap[data-color="secondary"] { - --wire-avatar-color: #737373; -} -.wire-next__avatar-wrap[data-color="success"] { - --wire-avatar-color: var(--wire-color-success); -} -.wire-next__avatar-wrap[data-color="info"] { - --wire-avatar-color: var(--wire-color-info); -} -.wire-next__avatar-wrap[data-color="danger"] { - --wire-avatar-color: var(--wire-color-danger); -} -.wire-next__avatar-wrap[data-color="warning"] { - --wire-avatar-color: var(--wire-color-warning); -} -.wire-next__avatar-wrap[data-color="light"] { - --wire-avatar-color: #f4f4f5; -} -.wire-next__avatar-wrap[data-color="dark"] { - --wire-avatar-color: #27272a; -} -.wire-next__avatar { - display: grid; - width: 100%; - height: 100%; - overflow: hidden; - place-items: center; - color: white; - border: 1px solid color-mix(in srgb, var(--wire-avatar-color) 58%, var(--wire-color-border)); - border-radius: inherit; - background: var(--wire-avatar-color); - box-shadow: - 0 0 0 2px var(--wire-color-bg), - 0 5px 14px rgb(0 0 0 / 0.16); -} -.wire-next__avatar-wrap[data-shape="rounded"] { - border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72); -} -.wire-next__avatar-wrap[data-shape="square"] { - border-radius: 0; -} -.wire-next__avatar img { - width: 100%; - height: 100%; - object-fit: cover; -} -.wire-next__avatar-initials { - font-size: calc(var(--wire-avatar-size) * 0.32); - font-weight: 750; - line-height: 1; - letter-spacing: -0.02em; -} -.wire-next__avatar-placeholder { - width: 54%; - height: 54%; - color: currentColor; - opacity: 0.72; -} -.wire-next__avatar-wrap[data-variant="soft"] .wire-next__avatar { - color: var(--wire-avatar-color); - border-color: transparent; - background: color-mix(in srgb, var(--wire-avatar-color) 15%, var(--wire-color-surface)); - box-shadow: none; -} -.wire-next__avatar-wrap[data-variant="outline"] .wire-next__avatar { - color: var(--wire-avatar-color); - border-color: var(--wire-avatar-color); - background: transparent; - box-shadow: none; -} -.wire-next__avatar-wrap[data-variant="white"] .wire-next__avatar { - color: var(--wire-color-text); - border-color: var(--wire-color-border); - background: var(--wire-color-surface); - box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); -} -.wire-next__avatar-status { - position: absolute; - right: -0.04rem; - bottom: -0.04rem; - z-index: 2; - width: max(0.58rem, calc(var(--wire-avatar-size) * 0.24)); - height: max(0.58rem, calc(var(--wire-avatar-size) * 0.24)); - border: 2px solid var(--wire-color-bg); - border-radius: 999px; - background: var(--wire-color-muted); -} -.wire-next__avatar-wrap[data-status-position="top"] .wire-next__avatar-status { - top: -0.04rem; - bottom: auto; -} -.wire-next__avatar-status[data-status="online"], -.wire-next__avatar-status[data-status="success"] { - background: #14cba8; -} -.wire-next__avatar-status[data-status="busy"], -.wire-next__avatar-status[data-status="danger"] { - background: #fb5b68; -} -.wire-next__avatar-status[data-status="away"], -.wire-next__avatar-status[data-status="warning"] { - background: #ffc400; -} -.wire-next__avatar-badge { - position: absolute; - right: -0.25rem; - bottom: -0.25rem; - z-index: 3; - display: grid; - width: max(1rem, calc(var(--wire-avatar-size) * 0.42)); - height: max(1rem, calc(var(--wire-avatar-size) * 0.42)); - place-items: center; - color: white; - border: 2px solid var(--wire-color-bg); - border-radius: 999px; - background: #27272a; - box-shadow: 0 4px 10px rgb(0 0 0 / 0.22); -} -.wire-next__avatar-badge > span { - width: 62%; - height: 62%; -} -.wire-next__avatar-badge--text { - font-size: calc(var(--wire-avatar-size) * 0.18); - font-weight: 800; -} -.wire-next__avatar-tooltip { - position: absolute; - left: 50%; - bottom: calc(100% + 0.65rem); - z-index: 20; - width: max-content; - max-width: 15rem; - padding: 0.4rem 0.6rem; - color: var(--wire-color-bg); - border-radius: 0.4rem; - background: var(--wire-color-text); - box-shadow: 0 8px 22px rgb(0 0 0 / 0.2); - font-size: 0.75rem; - font-weight: 650; - line-height: 1.25; - pointer-events: none; - opacity: 0; - transform: translate(-50%, 0.25rem); - transition: - opacity var(--wire-motion-fast) var(--wire-ease-standard), - transform var(--wire-motion-fast) var(--wire-ease-standard); -} -.wire-next__avatar-tooltip::after { - content: ""; - position: absolute; - top: 100%; - left: 50%; - border: 0.3rem solid transparent; - border-top-color: var(--wire-color-text); - transform: translateX(-50%); -} -.wire-next__avatar-wrap:hover .wire-next__avatar-tooltip, -.wire-next__avatar-wrap:focus-visible .wire-next__avatar-tooltip { - opacity: 1; - transform: translate(-50%, 0); -} -.wire-next__avatar-wrap:focus-visible { - outline: 2px solid var(--wire-avatar-color); - outline-offset: 4px; -} -.wire-next__avatar-copy { - display: grid; - min-width: 0; - gap: 0.15rem; -} -.wire-next__avatar-copy strong { - color: var(--wire-color-text); - font-size: 0.9rem; -} -.wire-next__avatar-copy > span { - overflow: hidden; - color: var(--wire-color-muted); - font-size: 0.78rem; - text-overflow: ellipsis; - white-space: nowrap; -} -/* --- Avatar group -------------------------------------------------------- */ -.wire-next--avatar-group { - --wire-avatar-group-size: 3rem; - position: relative; - display: inline-flex; - width: fit-content; - max-width: 100%; -} -.wire-next--avatar-group[data-size="xs"] { - --wire-avatar-group-size: 1.75rem; -} -.wire-next--avatar-group[data-size="sm"] { - --wire-avatar-group-size: 2.25rem; -} -.wire-next--avatar-group[data-size="md"], -.wire-next--avatar-group[data-size="default"] { - --wire-avatar-group-size: 3rem; -} -.wire-next--avatar-group[data-size="lg"] { - --wire-avatar-group-size: 4rem; -} -.wire-next--avatar-group[data-size="xl"] { - --wire-avatar-group-size: 5rem; -} -.wire-next__avatar-group-members { - display: flex; - align-items: center; -} -.wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-member, -.wire-next--avatar-group[data-layout="stack"] .wire-next__avatar-group-overflow { - margin-left: calc(var(--wire-avatar-group-size) * -0.22); -} -.wire-next--avatar-group[data-layout="stack"] :first-child { - margin-left: 0; -} -.wire-next--avatar-group[data-layout="grid"] .wire-next__avatar-group-members { - display: grid; - grid-template-columns: repeat(var(--wire-avatar-group-columns), var(--wire-avatar-group-size)); - gap: 0.65rem; -} -.wire-next__avatar-group-member, -.wire-next__avatar-group-overflow { - --wire-avatar-group-color: var(--wire-color-primary); - position: relative; - display: inline-grid; - width: var(--wire-avatar-group-size); - height: var(--wire-avatar-group-size); - flex: none; - place-items: center; - border-radius: 999px; - outline: none; - transition: - z-index var(--wire-motion-fast), - transform var(--wire-motion-base) var(--wire-ease-emphasized); -} -.wire-next__avatar-group-member[data-color="secondary"] { - --wire-avatar-group-color: #737373; -} -.wire-next__avatar-group-member[data-color="success"] { - --wire-avatar-group-color: var(--wire-color-success); -} -.wire-next__avatar-group-member[data-color="info"] { - --wire-avatar-group-color: var(--wire-color-info); -} -.wire-next__avatar-group-member[data-color="warning"] { - --wire-avatar-group-color: var(--wire-color-warning); -} -.wire-next__avatar-group-member[data-color="danger"] { - --wire-avatar-group-color: var(--wire-color-danger); -} -.wire-next__avatar-group-member[data-shape="rounded"] { - border-radius: calc(var(--wire-radius-sm, 0.5rem) * 0.72); -} -.wire-next__avatar-group-avatar, -.wire-next__avatar-group-overflow-button { - display: grid; - width: 100%; - height: 100%; - overflow: hidden; - place-items: center; - color: white; - border: 2px solid var(--wire-avatar-group-ring); - border-radius: inherit; - background: var(--wire-avatar-group-color, var(--wire-color-primary)); - box-shadow: 0 5px 14px rgb(0 0 0 / 0.16); - font: inherit; - font-size: calc(var(--wire-avatar-group-size) * 0.3); - font-weight: 800; -} -.wire-next__avatar-group-avatar img, -.wire-next__avatar-group-menu-avatar img { - width: 100%; - height: 100%; - object-fit: cover; -} -.wire-next__avatar-group-overflow-button { - cursor: pointer; - color: var(--wire-color-text); - background: var(--wire-color-surface-2); -} -.wire-next__avatar-group-member:hover, -.wire-next__avatar-group-member:focus-visible, -.wire-next__avatar-group-overflow:focus-within { - z-index: 5; - transform: translateY(-3px); -} -.wire-next__avatar-group-member:focus-visible, -.wire-next__avatar-group-overflow-button:focus-visible { - outline: 2px solid var(--wire-color-primary); - outline-offset: 3px; -} -.wire-next__avatar-group-tooltip { - position: absolute; - left: 50%; - bottom: calc(100% + 0.65rem); - z-index: 20; - width: max-content; - max-width: 14rem; - padding: 0.4rem 0.6rem; - color: var(--wire-color-bg); - border-radius: 0.4rem; - background: var(--wire-color-text); - box-shadow: 0 8px 22px rgb(0 0 0 / 0.22); - font-size: 0.75rem; - font-weight: 650; - pointer-events: none; - opacity: 0; - transform: translate(-50%, 0.25rem); - transition: - opacity var(--wire-motion-fast), - transform var(--wire-motion-fast); -} -.wire-next__avatar-group-member:hover .wire-next__avatar-group-tooltip, -.wire-next__avatar-group-member:focus-visible .wire-next__avatar-group-tooltip { - opacity: 1; - transform: translate(-50%, 0); -} -.wire-next__avatar-group-menu { - position: absolute; - top: calc(100% + 0.65rem); - right: 0; - z-index: 30; - display: grid; - width: max-content; - min-width: 12rem; - gap: 0.25rem; - padding: 0.45rem; - color: var(--wire-color-text); - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm, 0.5rem); - background: var(--wire-color-surface); - box-shadow: 0 16px 38px rgb(0 0 0 / 0.22); -} -.wire-next__avatar-group-menu-item { - display: flex; - align-items: center; - gap: 0.6rem; - padding: 0.45rem 0.55rem; - border-radius: 0.4rem; - font-size: 0.82rem; -} -.wire-next__avatar-group-menu-item:hover { - background: var(--wire-color-surface-2); -} -.wire-next__avatar-group-menu-avatar { - display: grid; - width: 1.75rem; - height: 1.75rem; - overflow: hidden; - flex: none; - place-items: center; - border-radius: 999px; - background: var(--wire-color-surface-2); - font-size: 0.65rem; - font-weight: 800; -} /* --- Spinner -------------------------------------------------------------- */ .wire-spinner { display: inline-block; @@ -1725,19 +1265,6 @@ background: var(--wire-color-surface-2); font-size: 0.75rem; } -.wire-next--button-group { - display: inline-flex; - align-items: stretch; - width: fit-content; - max-width: 100%; - isolation: isolate; -} -.wire-next--button-group[data-orientation="vertical"] { - flex-direction: column; -} -.wire-next--button-group[data-attached="false"] { - gap: 0.5rem; -} .wire-next--button-group[data-attached="true"] > :is(.wire-btn, .wire-action) { position: relative; margin: 0; @@ -1812,17 +1339,7 @@ background: color-mix(in srgb, var(--wire-component-color) 16%, var(--wire-color-surface)); color: var(--wire-component-color); } -.wire-next--button-group[data-disabled="true"] { - cursor: not-allowed; - opacity: 0.6; -} @media (max-width: 480px) { - .wire-next--button-group[data-responsive="true"] { - display: flex; - width: 100%; - flex-direction: column; - } - .wire-next--button-group[data-responsive="true"] > :is(.wire-btn, .wire-action) { width: 100%; } @@ -1892,192 +1409,12 @@ background: var(--wire-color-surface); box-shadow: var(--wire-shadow-1); } -.wire-next--collapse { - --wire-collapse-color: var(--wire-component-color, var(--wire-color-primary)); - display: grid; - width: 100%; - min-width: 0; - gap: 0.75rem; - color: var(--wire-color-text); -} -.wire-next--device-frame > header { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; -} -.wire-next__device-actions { - display: flex; - flex-wrap: wrap; - gap: 0.4rem; -} -.wire-next__device-actions button { - min-height: 2.25rem; - padding-inline: 0.7rem; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm); - background: var(--wire-color-surface-2); - color: inherit; -} -.wire-next__device-shell { - overflow: hidden; - width: min(100%, 24rem); - min-height: 28rem; - margin-inline: auto; - border: 0.65rem solid var(--wire-color-text); - border-radius: 2rem; - background: var(--wire-color-background); - transition: width var(--wire-motion-normal) var(--wire-ease-standard); -} -.wire-next--device-frame[data-device="tablet"] .wire-next__device-shell { - width: min(100%, 42rem); -} -.wire-next--device-frame[data-device="desktop"] .wire-next__device-shell { - width: 100%; - border-width: 0.4rem; - border-radius: var(--wire-radius-md); -} -.wire-next--device-frame[data-orientation="landscape"] .wire-next__device-shell { - width: min(100%, 48rem); - min-height: 20rem; -} -.wire-next__device-shell :is(iframe, .wire-next__device-content) { - width: 100%; - min-height: inherit; - border: 0; -} -@media (max-width: 640px) { - .wire-next--device-frame > header { - align-items: stretch; - flex-direction: column; - } -} -.wire-next__collapse-item { - display: grid; - min-width: 0; - justify-items: start; - gap: 0; -} -.wire-next__collapse-trigger { - display: inline-flex; - min-height: 2.75rem; - align-items: center; - justify-content: center; - gap: 0.55rem; - padding: 0.7rem 1rem; - border: 1px solid var(--wire-collapse-color); - border-radius: var(--wire-radius-sm); - background: var(--wire-collapse-color); - color: var(--wire-color-primary-contrast, #fff); - font: inherit; - font-weight: 700; - cursor: pointer; -} -.wire-next__collapse-trigger:focus-visible { - outline: 2px solid var(--wire-collapse-color); - outline-offset: 3px; -} -.wire-next__collapse-trigger:disabled { - cursor: not-allowed; - opacity: 0.5; -} -.wire-next__collapse-chevron { - transition: transform var(--wire-motion-fast) var(--wire-ease-standard); -} -.wire-next__collapse-item[data-open="true"] .wire-next__collapse-chevron { - transform: rotate(180deg); -} -.wire-next__collapse-panel { - width: min(100%, 42rem); - max-height: 0; - overflow: hidden; - margin-top: 0; - opacity: 0; - transition: - max-height 350ms var(--wire-ease-emphasized), - margin-top 300ms var(--wire-ease-emphasized), - opacity 200ms var(--wire-ease-standard); -} -.wire-next__collapse-panel[data-open="true"] { - max-height: 40rem; - margin-top: 0.75rem; - opacity: 1; -} -.wire-next__collapse-content { - display: grid; - overflow: hidden; - min-height: 0; - gap: 0.65rem; - padding: 1rem; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-md); - background: var(--wire-color-surface-raised, var(--wire-color-surface)); -} -.wire-next__collapse-content h4, -.wire-next__collapse-content p, -.wire-next__collapse-preview { - margin: 0; -} -.wire-next__collapse-content nav { - display: flex; - flex-wrap: wrap; - gap: 0.75rem; -} -.wire-next__collapse-content a { - color: var(--wire-collapse-color); - font-weight: 650; - text-decoration: none; -} -.wire-next--collapse[data-mode="inline"] .wire-next__collapse-item { - gap: 0; -} -.wire-next--collapse[data-mode="inline"] .wire-next__collapse-preview { - order: 1; - margin-bottom: 0.5rem; -} -.wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel { - order: 2; - width: 100%; -} -.wire-next--collapse[data-mode="inline"] .wire-next__collapse-panel[data-open="true"] { - margin-top: 0; -} -.wire-next--collapse[data-mode="inline"] .wire-next__collapse-trigger { - order: 3; - margin-top: 0.5rem; - min-height: auto; - padding: 0; - border: 0; - border-radius: 0; - background: transparent; - color: var(--wire-collapse-color); -} -.wire-next--collapse[data-mode="inline"] .wire-next__collapse-content { - padding: 0; - border: 0; - background: transparent; -} .wire-next--collapse.wire-next--size-sm { font-size: 0.875rem; } .wire-next--collapse.wire-next--size-lg { font-size: 1.0625rem; } -@media (prefers-reduced-motion: reduce) { - .wire-next__collapse-chevron, - .wire-next__collapse-panel { - transition: none; - } -} -.wire-next--chat-bubble { - --wire-chat-color: var(--wire-component-color, var(--wire-color-primary)); - --wire-chat-padding: 1rem; - display: grid; - width: 100%; - min-width: 0; - gap: 1rem; - color: var(--wire-color-text); -} .wire-next--chat-bubble.wire-next--size-sm { --wire-chat-padding: 0.75rem; font-size: 0.875rem; @@ -2086,568 +1423,6 @@ --wire-chat-padding: 1.25rem; font-size: 1.0625rem; } -.wire-next__chat-header h3, -.wire-next__chat-header p, -.wire-next__chat-content h4, -.wire-next__chat-content p { - margin: 0; -} -.wire-next__chat-header p { - margin-top: 0.35rem; - color: var(--wire-color-text-muted); -} -.wire-next__chat-thread { - display: grid; - min-width: 0; - gap: 1.25rem; -} -.wire-next__chat-message { - display: grid; - width: min(78%, 34rem); - min-width: 0; - justify-self: start; - gap: 0.4rem; -} -.wire-next__chat-message[data-direction="outgoing"] { - justify-self: end; -} -.wire-next--chat-bubble[data-one-sided="true"] .wire-next__chat-message { - justify-self: start; -} -.wire-next__chat-row { - display: flex; - min-width: 0; - align-items: flex-start; - gap: 0.75rem; -} -.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-row { - flex-direction: row-reverse; -} -.wire-next--chat-bubble[data-one-sided="true"] - .wire-next__chat-message[data-direction="outgoing"] - .wire-next__chat-row { - flex-direction: row; -} -.wire-next__chat-content { - min-width: 0; - padding: var(--wire-chat-padding); - border: 1px solid var(--wire-color-border); - border-radius: 1rem; - background: var(--wire-color-surface-raised, var(--wire-color-surface)); - color: var(--wire-color-text); - cursor: pointer; -} -.wire-next__chat-content:focus-visible { - outline: 2px solid var(--wire-chat-color); - outline-offset: 2px; -} -.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content { - border-color: var(--wire-chat-color); - background: var(--wire-chat-color); - color: var(--wire-color-primary-contrast, #fff); -} -.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content :is(h4, p, li, span) { - color: inherit; -} -.wire-next__chat-content h4 { - margin-bottom: 0.65rem; - font-size: 1em; -} -.wire-next__chat-content p + p, -.wire-next__chat-content p + nav { - margin-top: 0.75rem; -} -.wire-next__chat-content ul { - display: grid; - margin: 0.55rem 0 0; - padding-inline-start: 1.25rem; - gap: 0.35rem; -} -.wire-next__chat-content nav { - display: grid; - margin-top: 0.75rem; - gap: 0.3rem; -} -.wire-next__chat-content a { - color: var(--wire-chat-color); - font-weight: 650; - text-decoration: none; -} -.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-content a { - color: inherit; - text-decoration: underline; -} -.wire-next__chat-avatar { - display: grid; - flex: 0 0 2.5rem; - width: 2.5rem; - min-height: 2.5rem; - overflow: hidden; - padding: 0; - border: 1px solid var(--wire-color-border); - border-radius: 999px; - background: var(--wire-color-surface-raised, var(--wire-color-surface)); - color: var(--wire-color-text); - cursor: pointer; - place-items: center; -} -.wire-next__chat-avatar img { - width: 100%; - height: 100%; - object-fit: cover; -} -.wire-next__chat-avatar:focus-visible { - outline: 2px solid var(--wire-chat-color); - outline-offset: 2px; -} -.wire-next__chat-meta { - display: flex; - align-items: center; - gap: 0.3rem; - padding-inline: calc(2.5rem + 0.75rem); - color: var(--wire-color-text-muted); - font-size: 0.78em; -} -.wire-next__chat-message[data-direction="outgoing"] .wire-next__chat-meta { - justify-content: flex-end; -} -.wire-next__chat-meta[data-tone="danger"] { - color: var(--wire-color-danger); -} -.wire-next__chat-meta button { - padding: 0; - border: 0; - background: transparent; - color: inherit; - font: inherit; - font-weight: 700; - cursor: pointer; - text-decoration: underline; -} -@media (max-width: 640px) { - .wire-next__chat-message { - width: min(92%, 34rem); - } - - .wire-next__chat-avatar { - flex-basis: 2rem; - width: 2rem; - min-height: 2rem; - } - - .wire-next__chat-meta { - padding-inline: 0; - } -} -.wire-next--card { - --wire-card-color: var(--wire-component-color, var(--wire-color-primary)); - --wire-card-padding: 1.25rem; - display: block; - width: 100%; - color: var(--wire-color-text); -} -.wire-next--carousel { - --wire-carousel-color: var(--wire-component-color, var(--wire-color-primary)); - display: grid; - width: 100%; - min-width: 0; - gap: 1rem; - color: var(--wire-color-text); -} -.wire-next__carousel-header h3, -.wire-next__carousel-header p { - margin: 0; -} -.wire-next__carousel-header p { - margin-top: 0.35rem; - color: var(--wire-color-text-muted); -} -.wire-next__carousel-layout { - display: flex; - min-width: 0; - gap: 0.75rem; -} -.wire-next__carousel-main { - display: grid; - flex: 1; - min-width: 0; - gap: 0.75rem; -} -.wire-next__carousel-stage { - position: relative; - min-width: 0; -} -.wire-next__carousel-viewport { - position: relative; - overflow: hidden; - min-width: 0; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-md); - background: var(--wire-color-surface-subtle, var(--wire-color-surface)); - outline: none; -} -.wire-next__carousel-viewport:focus-visible { - box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-carousel-color) 30%, transparent); -} -.wire-next__carousel-track { - display: flex; - align-items: stretch; - gap: var(--wire-carousel-gap); - transform: translateX( - calc( - var(--wire-carousel-index) * -1 * - ( - (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) / - var(--wire-carousel-per-view) + var(--wire-carousel-gap) - ) - ) - ); - transition: transform var(--wire-motion-base) var(--wire-ease-emphasized); - translate: var(--wire-carousel-drag-offset, 0) 0; - will-change: transform; -} -.wire-next--carousel[data-dragging="true"] .wire-next__carousel-track { - transition: none; -} -.wire-next--carousel[data-rtl="true"] .wire-next__carousel-track { - transform: translateX( - calc( - var(--wire-carousel-index) * - ( - (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) / - var(--wire-carousel-per-view) + var(--wire-carousel-gap) - ) - ) - ); -} -.wire-next__carousel-slide { - position: relative; - display: grid; - flex: 0 0 - calc( - (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) / - var(--wire-carousel-per-view) - ); - overflow: hidden; - min-width: 0; - min-height: 20rem; - place-items: center; - background: var(--wire-color-surface-raised, var(--wire-color-surface)); -} -.wire-next--carousel[data-auto-height="true"] .wire-next__carousel-slide { - min-height: 0; -} -.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide { - flex-basis: min(78%, 32rem); -} -.wire-next--carousel[data-centered="true"] .wire-next__carousel-track { - box-sizing: border-box; - transform: translateX( - calc(var(--wire-carousel-index) * -1 * (min(78%, 32rem) + var(--wire-carousel-gap))) - ); -} -.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:first-child { - margin-inline-start: calc((100% - min(78%, 32rem)) / 2); -} -.wire-next--carousel[data-centered="true"] .wire-next__carousel-slide:last-child { - margin-inline-end: calc((100% - min(78%, 32rem)) / 2); -} -.wire-next--carousel[data-centered="true"][data-rtl="true"] .wire-next__carousel-track { - transform: translateX( - calc(var(--wire-carousel-index) * (min(78%, 32rem) + var(--wire-carousel-gap))) - ); -} -.wire-next__carousel-slide > img { - position: absolute; - width: 100%; - height: 100%; - object-fit: cover; - inset: 0; -} -.wire-next__carousel-slide-content { - position: relative; - z-index: 1; - width: min(100%, 38rem); - padding: clamp(2rem, 8vw, 5rem); - text-align: center; -} -.wire-next__carousel-slide-content h4, -.wire-next__carousel-slide-content p { - margin: 0; -} -.wire-next__carousel-slide-content h4 { - font-size: clamp(1.5rem, 4vw, 2.4rem); -} -.wire-next__carousel-slide-content p { - margin-top: 0.65rem; - color: var(--wire-color-text-muted); -} -.wire-next__carousel-control { - position: absolute; - z-index: 3; - top: 50%; - display: grid; - width: 2.75rem; - min-height: 2.75rem; - padding: 0; - border: 1px solid color-mix(in srgb, var(--wire-color-border) 70%, transparent); - border-radius: 999px; - background: color-mix(in srgb, var(--wire-color-text) 76%, transparent); - color: var(--wire-color-surface); - cursor: pointer; - place-items: center; - transform: translateY(-50%); -} -.wire-next__carousel-control:focus-visible, -.wire-next__carousel-pagination button:focus-visible, -.wire-next__carousel-thumbnails button:focus-visible { - outline: 2px solid var(--wire-carousel-color); - outline-offset: 2px; -} -.wire-next__carousel-control:disabled { - cursor: not-allowed; - opacity: 0.35; -} -.wire-next__carousel-control--previous { - left: 1rem; -} -.wire-next__carousel-control--next { - right: 1rem; -} -.wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--previous { - right: 1rem; - left: auto; -} -.wire-next--carousel[data-rtl="true"] .wire-next__carousel-control--next { - right: auto; - left: 1rem; -} -.wire-next__carousel-pagination { - display: flex; - min-height: 1.5rem; - align-items: center; - justify-content: center; - gap: 0.5rem; -} -.wire-next__carousel-pagination button { - width: 0.65rem; - min-height: 0.65rem; - padding: 0; - border: 1px solid var(--wire-color-text-muted); - border-radius: 999px; - background: transparent; - cursor: pointer; -} -.wire-next__carousel-pagination button[data-active="true"] { - border-color: var(--wire-carousel-color); - background: var(--wire-carousel-color); -} -.wire-next__carousel-counter { - position: absolute; - z-index: 3; - bottom: 0.8rem; - left: 50%; - padding: 0.25rem 0.65rem; - border-radius: 999px; - background: color-mix(in srgb, var(--wire-color-text) 82%, transparent); - color: var(--wire-color-surface); - font-weight: 700; - transform: translateX(-50%); -} -.wire-next__carousel-thumbnails { - display: flex; - overflow: auto; - gap: 0.55rem; - scrollbar-width: thin; -} -.wire-next__carousel-thumbnails button { - display: grid; - flex: 0 0 8.5rem; - min-height: 3.75rem; - overflow: hidden; - padding: 0; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm); - background: var(--wire-color-surface); - color: var(--wire-color-text); - cursor: pointer; - place-items: center; -} -.wire-next__carousel-thumbnails button[data-active="true"] { - border-color: var(--wire-carousel-color); - box-shadow: inset 0 0 0 1px var(--wire-carousel-color); -} -.wire-next__carousel-thumbnails img { - width: 100%; - height: 4rem; - object-fit: cover; -} -.wire-next__carousel-thumbnails span { - padding: 0.5rem; -} -.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails { - flex: 0 0 9rem; - flex-direction: column; - max-height: 28rem; -} -.wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button { - flex-basis: 7.5rem; - width: 100%; -} -.wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport { - cursor: grab; - touch-action: pan-y; - user-select: none; - -webkit-user-select: none; -} -.wire-next--carousel[data-draggable="true"] .wire-next__carousel-viewport:active { - cursor: grabbing; -} -.wire-next--carousel[data-draggable="true"] img, -.wire-next--carousel[data-draggable="true"] a { - -webkit-user-drag: none; -} -.wire-next--carousel[data-snap="true"] .wire-next__carousel-viewport { - overflow-x: auto; - scroll-behavior: smooth; - scroll-snap-type: x mandatory; - scrollbar-width: thin; -} -.wire-next--carousel[data-snap="true"] .wire-next__carousel-track { - --wire-carousel-snap-slide: calc( - (100% - (var(--wire-carousel-per-view) - 1) * var(--wire-carousel-gap)) / - var(--wire-carousel-per-view) - ); - display: grid; - width: 100%; - min-width: 100%; - box-sizing: content-box; - grid-auto-columns: var(--wire-carousel-snap-slide); - grid-auto-flow: column; - padding-inline: calc((100% - var(--wire-carousel-snap-slide)) / 2); - transform: none; -} -.wire-next--carousel[data-snap="true"] .wire-next__carousel-slide { - width: auto; - min-width: 0; - scroll-snap-align: center; -} -@media (max-width: 640px) { - .wire-next__carousel-slide { - flex-basis: 100%; - min-height: 16rem; - } - - .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-layout { - flex-direction: column-reverse; - } - - .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails { - flex: auto; - flex-direction: row; - max-height: none; - } - - .wire-next--carousel[data-thumbnails="vertical"] .wire-next__carousel-thumbnails button { - flex-basis: 8.5rem; - width: auto; - } -} -@media (prefers-reduced-motion: reduce) { - .wire-next__carousel-track { - transition-duration: 0.01ms; - } -} -.wire-next--card[data-size="sm"] { - --wire-card-padding: 0.85rem; -} -.wire-next--card[data-size="lg"] { - --wire-card-padding: 1.75rem; -} -.wire-next__card-panel { - position: relative; - display: flex; - overflow: hidden; - flex-direction: column; - width: 100%; - min-width: 0; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-md); - background: var(--wire-color-surface); - box-shadow: var(--wire-shadow-1); - transition: - transform var(--wire-motion-base) var(--wire-ease-emphasized), - border-color var(--wire-motion-base) ease, - box-shadow var(--wire-motion-base) var(--wire-ease-emphasized); -} -.wire-next--card[data-variant="top-border"] > .wire-next__card-panel, -.wire-next--card[data-variant="accent"] > .wire-next__card-panel { - border-top: 4px solid var(--wire-card-color); -} -.wire-next--card[data-hover="raise"] > .wire-next__card-panel:hover { - border-color: color-mix(in srgb, var(--wire-card-color) 38%, var(--wire-color-border)); - box-shadow: var(--wire-shadow-3); - transform: translateY(-4px); -} -.wire-next__card-header, -.wire-next__card-footer { - display: flex; - gap: 1rem; - align-items: center; - justify-content: space-between; - padding: 0.85rem var(--wire-card-padding); - background: var(--wire-color-surface-2); - color: var(--wire-color-muted); - font-size: 0.875rem; -} -.wire-next__card-header { - border-bottom: 1px solid var(--wire-color-border); -} -.wire-next__card-footer { - margin-top: auto; - border-top: 1px solid var(--wire-color-border); -} -.wire-next__card-header-actions { - display: inline-flex; - gap: 0.2rem; - align-items: center; -} -.wire-next__card-header-actions button { - display: inline-grid; - width: 2rem; - height: 2rem; - border: 0; - border-radius: var(--wire-radius-sm); - background: transparent; - color: var(--wire-color-muted); - cursor: pointer; - place-items: center; -} -.wire-next__card-header-actions button:hover { - background: color-mix(in srgb, var(--wire-card-color) 12%, transparent); - color: var(--wire-card-color); -} -.wire-next__card-header-actions button:focus-visible { - outline: 2px solid var(--wire-card-color); - outline-offset: 1px; -} -.wire-next__card-media { - position: relative; - overflow: hidden; - min-height: 10rem; - background: var(--wire-color-surface-2); -} -.wire-next__card-media > img { - display: block; - width: 100%; - height: 100%; - min-height: inherit; - object-fit: cover; - transition: transform 420ms var(--wire-ease-emphasized); -} -.wire-next--card[data-hover="image"] .wire-next__card-panel:hover .wire-next__card-media > img { - transform: scale(1.06); -} .wire-next__card-media--overlay { aspect-ratio: 16 / 9; min-height: 18rem; @@ -2658,449 +1433,11 @@ width: 100%; height: 100%; } -.wire-next__card-overlay { - position: absolute; - inset: 0; - display: flex; - flex-direction: column; - gap: 0.55rem; - padding: clamp(1.25rem, 4vw, 2rem); - background: linear-gradient( - 180deg, - rgb(2 6 23 / 0.9) 0%, - rgb(2 6 23 / 0.68) 38%, - rgb(2 6 23 / 0.34) 58%, - rgb(2 6 23 / 0.86) 100% - ); - color: white; - text-shadow: 0 1px 2px rgb(0 0 0 / 0.42); -} -.wire-next__card-overlay h3 { - color: white; - font-size: clamp(1.1rem, 2.2vw, 1.35rem); -} -.wire-next__card-overlay p { - max-width: 48rem; - color: #fff; - font-weight: 500; - line-height: 1.6; - text-shadow: - 0 1px 2px rgb(0 0 0 / 0.9), - 0 2px 8px rgb(0 0 0 / 0.62); -} -.wire-next__card-overlay .wire-next__card-subtitle { - color: rgb(255 255 255 / 0.78); -} -.wire-next__card-overlay small { - margin-top: auto; - color: rgb(255 255 255 / 0.88); - font-weight: 600; - text-shadow: 0 1px 2px rgb(0 0 0 / 0.55); -} -.wire-next__card-body { - display: grid; - gap: 0.65rem; - min-width: 0; - padding: var(--wire-card-padding); -} -.wire-next__card-body[data-scrollable="true"] { - max-height: var(--wire-card-max-height); - overflow: auto; - overscroll-behavior: contain; - scrollbar-color: var(--wire-card-color) transparent; - scrollbar-width: thin; -} -.wire-next__card-body h3, -.wire-next__card-body p, -.wire-next__card-overlay h3, -.wire-next__card-overlay p { - margin: 0; -} -.wire-next__card-body p { - color: var(--wire-color-muted); - line-height: 1.65; -} -.wire-next__card-subtitle { - color: var(--wire-color-muted); - font-size: 0.72rem; - font-weight: 700; - letter-spacing: 0.06em; - text-transform: uppercase; -} -.wire-next__card-action { - display: inline-flex; - gap: 0.25rem; - align-items: center; - width: fit-content; - margin-top: 0.2rem; - color: var(--wire-card-color); - font-weight: 700; - text-decoration: none; -} -.wire-next__card-action:hover { - text-decoration: underline; - text-underline-offset: 0.2em; -} -.wire-next__card-navigation { - background: var(--wire-color-surface-2); -} -.wire-next__card-tabs { - display: flex; - overflow-x: auto; -} -.wire-next__card-tabs button { - min-height: 3rem; - flex: 1 0 auto; - padding-inline: 1rem; - border: 0; - border-bottom: 2px solid transparent; - background: transparent; - color: var(--wire-color-muted); - cursor: pointer; - font-weight: 700; -} -.wire-next__card-tabs button[data-active="true"] { - border-color: var(--wire-card-color); - color: var(--wire-color-text); -} -.wire-next__card-navigation-select { - display: none; - width: calc(100% - 2rem); - min-height: 2.75rem; - margin: 1rem; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm); - background: var(--wire-color-surface); - color: var(--wire-color-text); -} -.wire-next__card-alert { - display: flex; - gap: 0.35rem; - padding: 0.8rem var(--wire-card-padding); - background: color-mix(in srgb, var(--wire-card-color) 14%, var(--wire-color-surface-2)); - color: var(--wire-color-text); - font-size: 0.875rem; -} -.wire-next__card-empty { - display: grid; - min-height: 12rem; - color: var(--wire-color-muted); - place-content: center; - place-items: center; -} -.wire-next__card-empty > span { - margin-bottom: 0.75rem; - font-size: 2.25rem; -} -.wire-next--card[data-align="center"] .wire-next__card-body { - text-align: center; - place-items: center; -} -.wire-next--card[data-layout="horizontal"] > .wire-next__card-panel { - display: grid; - grid-template-columns: minmax(12rem, 42%) minmax(0, 1fr); -} -.wire-next--card[data-layout="horizontal"] .wire-next__card-media { - grid-row: 1 / span 4; - min-height: 100%; -} -.wire-next__card-group { - display: grid; - grid-template-columns: repeat(var(--wire-card-columns, 3), minmax(0, 1fr)); -} -.wire-next__card-group > .wire-next__card-panel { - border-radius: 0; - box-shadow: none; -} -.wire-next__card-group > .wire-next__card-panel:not(:first-child) { - margin-inline-start: -1px; -} -.wire-next__card-group > .wire-next__card-panel:first-child { - border-start-start-radius: var(--wire-radius-md); - border-end-start-radius: var(--wire-radius-md); -} -.wire-next__card-group > .wire-next__card-panel:last-child { - border-start-end-radius: var(--wire-radius-md); - border-end-end-radius: var(--wire-radius-md); -} -@media (max-width: 768px) { - .wire-next--card[data-layout="horizontal"] > .wire-next__card-panel { - display: flex; - } - - .wire-next--card[data-layout="horizontal"] .wire-next__card-media { - min-height: 12rem; - } - - .wire-next__card-group { - grid-template-columns: 1fr; - } - - .wire-next__card-group > .wire-next__card-panel:not(:first-child) { - margin-top: -1px; - margin-inline-start: 0; - } - - .wire-next__card-group > .wire-next__card-panel { - border-radius: 0; - } - - .wire-next__card-group > .wire-next__card-panel:first-child { - border-start-start-radius: var(--wire-radius-md); - border-start-end-radius: var(--wire-radius-md); - } - - .wire-next__card-group > .wire-next__card-panel:last-child { - border-end-start-radius: var(--wire-radius-md); - border-end-end-radius: var(--wire-radius-md); - } -} @media (max-width: 480px) { .wire-next__card-media--overlay { aspect-ratio: 4 / 3; min-height: 16rem; } - - .wire-next__card-tabs:has(+ .wire-next__card-navigation-select) { - display: none; - } - - .wire-next__card-navigation-select { - display: block; - } -} -.wire-next--blockquote { - --wire-blockquote-color: var(--wire-component-color, var(--wire-color-primary)); - --wire-blockquote-font-size: 1.125rem; - --wire-blockquote-mark-size: 4.25rem; - display: grid; - gap: 1.25rem; - width: 100%; - color: var(--wire-color-text); - text-align: left; -} -.wire-next--blockquote[data-size="xs"] { - --wire-blockquote-font-size: 0.875rem; - --wire-blockquote-mark-size: 3rem; -} -.wire-next--blockquote[data-size="sm"] { - --wire-blockquote-font-size: 1rem; - --wire-blockquote-mark-size: 3.5rem; -} -.wire-next--blockquote[data-size="md"], -.wire-next--blockquote[data-size="default"] { - --wire-blockquote-font-size: 1.125rem; -} -.wire-next--blockquote[data-size="lg"] { - --wire-blockquote-font-size: clamp(1.35rem, 2.4vw, 1.75rem); - --wire-blockquote-mark-size: 5rem; -} -.wire-next--blockquote[data-size="xl"] { - --wire-blockquote-font-size: clamp(1.65rem, 3vw, 2.25rem); - --wire-blockquote-mark-size: 5.75rem; -} -.wire-next--blockquote > blockquote { - position: relative; - display: block; - min-width: 0; - margin: 0; - padding-top: calc(var(--wire-blockquote-mark-size) * 0.78); -} -.wire-next__blockquote-mark { - position: absolute; - top: 0; - inset-inline: 0; - display: block; - width: 100%; - color: color-mix(in srgb, var(--wire-blockquote-color) 28%, var(--wire-color-text)); - font-family: Georgia, "Times New Roman", serif; - font-size: var(--wire-blockquote-mark-size); - font-style: normal; - font-weight: 700; - line-height: 0.8; - text-align: start; - user-select: none; -} -.wire-next__blockquote-copy { - min-width: 0; - font-family: Georgia, "Times New Roman", serif; - font-size: var(--wire-blockquote-font-size); - line-height: 1.55; - text-wrap: pretty; -} -.wire-next--blockquote[data-italic="true"] .wire-next__blockquote-copy { - font-style: italic; -} -.wire-next__blockquote-copy > :first-child { - margin-top: 0; -} -.wire-next__blockquote-copy > :last-child { - margin-bottom: 0; -} -.wire-next__blockquote-citation { - display: inline-flex; - gap: 0.75rem; - align-items: center; - width: fit-content; - margin-inline-start: 0; - color: var(--wire-color-muted); - font-size: 0.875rem; - line-height: 1.35; -} -.wire-next__blockquote-avatar { - width: 2.5rem; - height: 2.5rem; - flex: 0 0 auto; - border: 2px solid color-mix(in srgb, var(--wire-blockquote-color) 35%, transparent); - border-radius: 999px; - object-fit: cover; -} -.wire-next__blockquote-attribution { - display: grid; - gap: 0.15rem; -} -.wire-next__blockquote-attribution cite { - color: var(--wire-color-text); - font-style: normal; - font-weight: 700; -} -.wire-next__blockquote-attribution a { - color: inherit; - text-decoration-color: color-mix(in srgb, var(--wire-blockquote-color) 55%, transparent); - text-underline-offset: 0.2em; -} -.wire-next__blockquote-attribution a:hover { - color: var(--wire-blockquote-color); -} -.wire-next--blockquote[data-align="center"] { - text-align: center; -} -.wire-next--blockquote[data-align="right"], -.wire-next--blockquote[data-align="end"] { - text-align: right; -} -.wire-next--blockquote[data-align="center"] > blockquote, -.wire-next--blockquote[data-align="right"] > blockquote, -.wire-next--blockquote[data-align="end"] > blockquote { - text-align: inherit; -} -.wire-next--blockquote[data-align="center"] .wire-next__blockquote-mark { - text-align: center; -} -.wire-next--blockquote[data-align="right"] .wire-next__blockquote-mark, -.wire-next--blockquote[data-align="end"] .wire-next__blockquote-mark { - text-align: end; -} -.wire-next--blockquote[data-align="center"] .wire-next__blockquote-citation { - margin-inline: auto; -} -.wire-next--blockquote[data-align="right"] .wire-next__blockquote-citation, -.wire-next--blockquote[data-align="end"] .wire-next__blockquote-citation { - margin-inline-start: auto; -} -.wire-next--blockquote[data-variant="bordered"], -.wire-next--blockquote[data-variant="border"], -.wire-next--blockquote[data-variant="left-border"] { - padding-inline-start: 1.5rem; - border-inline-start: 4px solid var(--wire-blockquote-color); -} -.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-mark, -.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-mark, -.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-mark { - display: none; -} -.wire-next--blockquote[data-variant="bordered"] > blockquote, -.wire-next--blockquote[data-variant="border"] > blockquote, -.wire-next--blockquote[data-variant="left-border"] > blockquote { - display: block; - padding-top: 0; -} -.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-copy, -.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-copy, -.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-copy { - padding-top: 0; -} -.wire-next--blockquote[data-variant="bordered"] .wire-next__blockquote-citation, -.wire-next--blockquote[data-variant="border"] .wire-next__blockquote-citation, -.wire-next--blockquote[data-variant="left-border"] .wire-next__blockquote-citation { - margin-inline-start: 0; -} -@media (max-width: 480px) { - .wire-next--blockquote { - --wire-blockquote-mark-size: 3.25rem; - --wire-blockquote-font-size: 1rem; - gap: 1rem; - } - - .wire-next--blockquote[data-size="lg"], - .wire-next--blockquote[data-size="xl"] { - --wire-blockquote-font-size: 1.25rem; - } - - .wire-next__blockquote-citation { - margin-inline-start: 0; - } -} -.wire-next--alert { - --wire-alert-color: var(--wire-component-color); - --wire-alert-soft: color-mix(in srgb, var(--wire-alert-color) 16%, var(--wire-color-surface)); - display: grid; - grid-template-columns: auto minmax(0, 1fr) auto; - gap: 0.8rem; - width: 100%; - padding: 1rem; - border: 1px solid transparent; - border-radius: var(--wire-radius, 0.75rem); - color: var(--wire-color-text); -} -.wire-next--alert[data-radius="none"] { - border-radius: 0; -} -.wire-next--alert[data-radius="sm"] { - border-radius: var(--wire-radius-sm, 0.375rem); -} -.wire-next--alert[data-radius="lg"] { - border-radius: calc(var(--wire-radius, 0.75rem) * 1.35); -} -.wire-next--alert[data-radius="xl"] { - border-radius: calc(var(--wire-radius, 0.75rem) * 1.75); -} -.wire-next--alert[data-shadow="none"] { - box-shadow: none; -} -.wire-next--alert[data-shadow="sm"] { - box-shadow: 0 6px 16px color-mix(in srgb, #000 14%, transparent); -} -.wire-next--alert[data-shadow="md"] { - box-shadow: - 0 2px 6px color-mix(in srgb, #000 10%, transparent), - 0 12px 28px color-mix(in srgb, #000 18%, transparent); -} -.wire-next--alert[data-shadow="lg"] { - box-shadow: - 0 4px 10px color-mix(in srgb, #000 12%, transparent), - 0 20px 48px color-mix(in srgb, #000 24%, transparent); -} -.wire-next--alert[data-color="secondary"] { - --wire-alert-color: #737373; -} -.wire-next--alert[data-color="success"] { - --wire-alert-color: #0f9f8f; -} -.wire-next--alert[data-color="danger"] { - --wire-alert-color: #dc3545; -} -.wire-next--alert[data-color="warning"] { - --wire-alert-color: #eab308; -} -.wire-next--alert[data-color="info"] { - --wire-alert-color: #2563eb; -} -.wire-next--alert[data-color="dark"] { - --wire-alert-color: #27272a; -} -.wire-next--alert[data-color="light"] { - --wire-alert-color: #f4f4f5; } .wire-next--alert-soft { border-color: color-mix(in srgb, var(--wire-alert-color) 45%, var(--wire-color-border)); @@ -3151,287 +1488,6 @@ .wire-next--alert-accent .wire-next__alert-actions a { color: var(--wire-alert-color); } -.wire-next--alert-compact { - padding: 0.75rem 0.9rem; -} -.wire-next--alert-compact:not(:has(.wire-next__alert-icon)):not(:has(.wire-next__alert-dismiss)) { - grid-template-columns: minmax(0, 1fr); -} -.wire-next--alert-compact .wire-next__alert-body { - display: block; -} -.wire-next--alert-compact .wire-next__alert-title { - margin-right: 0.25rem; -} -.wire-next--alert-compact .wire-next__alert-body > p { - display: inline; -} -.wire-next__alert-icon { - display: inline-grid; - width: 1.25rem; - height: 1.25rem; - place-items: center; - margin-top: 0.05rem; - color: var(--wire-alert-color); -} -.wire-next__alert-icon > span { - width: 1rem; - height: 1rem; -} -.wire-next__alert-body { - display: grid; - min-width: 0; - gap: 0.35rem; -} -.wire-next__alert-title { - font-size: 0.88rem; - line-height: 1.45; -} -.wire-next__alert-body > p, -.wire-next__alert-body li { - color: inherit; - font-size: 0.8rem; - line-height: 1.55; -} -.wire-next__alert-body > ul { - display: grid; - gap: 0.25rem; - margin: 0.15rem 0 0; - padding-left: 1.25rem; -} -.wire-next__alert-actions { - display: flex; - flex-wrap: wrap; - gap: 0.5rem 1rem; - margin-top: 0.35rem; -} -.wire-next__alert-actions a { - color: var(--wire-alert-color); - font-size: 0.78rem; - font-weight: 700; - text-decoration: none; -} -.wire-next__alert-actions a:hover { - text-decoration: underline; -} -.wire-next__alert-actions a[data-variant="action"] { - padding: 0.35rem 0.6rem; - border-radius: var(--wire-radius-sm); - background: var(--wire-alert-color); - color: white; - text-decoration: none; -} -.wire-next__alert-dismiss { - display: inline-grid; - width: 1.75rem; - height: 1.75rem; - place-items: center; - padding: 0; - border: 0; - border-radius: var(--wire-radius-sm); - background: transparent; - color: currentColor; - cursor: pointer; -} -.wire-next__alert-dismiss:hover { - background: color-mix(in srgb, currentColor 10%, transparent); -} -.wire-next__alert-dismiss:focus-visible { - outline: 2px solid currentColor; - outline-offset: 2px; -} -@media (max-width: 36rem) { - .wire-next--alert { - grid-template-columns: auto minmax(0, 1fr); - } - - .wire-next__alert-dismiss { - grid-column: 2; - grid-row: 1; - justify-self: end; - } -} -.wire-next--accordion { - --wire-accordion-accent: var(--wire-component-color); - display: grid; - width: 100%; - color: var(--wire-color-text); -} -.wire-next__accordion-item { - min-width: 0; -} -.wire-next__accordion-heading { - margin: 0; - font: inherit; -} -.wire-next__accordion-heading > button { - display: flex; - width: 100%; - align-items: center; - gap: 0.75rem; - padding: 0.85rem 0; - border: 0; - background: transparent; - color: var(--wire-color-text); - font: inherit; - font-size: 0.88rem; - font-weight: 700; - text-align: left; - cursor: pointer; -} -.wire-next__accordion-heading > button > span:not(.wire-next__accordion-indicator) { - min-width: 0; - flex: 1; -} -.wire-next__accordion-heading > button:focus-visible { - border-radius: var(--wire-radius-sm); - outline: 2px solid var(--wire-accordion-accent); - outline-offset: 2px; -} -.wire-next__accordion-heading > button:disabled { - cursor: not-allowed; - opacity: 0.5; -} -.wire-next__accordion-indicator { - display: inline-flex; - width: 1rem; - height: 1rem; - flex: 0 0 1rem; - align-items: center; - justify-content: center; - color: var(--wire-color-muted); - font-size: 1rem; - font-weight: 500; - line-height: 1; - transition: - color var(--wire-motion-fast) var(--wire-ease-standard), - transform var(--wire-motion-fast) var(--wire-ease-standard); -} -.wire-next__accordion-indicator > span { - display: inline-flex; - align-items: center; - justify-content: center; -} -.wire-next__accordion-indicator > [class*="icon-["] { - width: 0.95rem; - height: 0.95rem; -} -.wire-next__accordion-item[data-open="true"] - > .wire-next__accordion-heading - .wire-next__accordion-indicator { - color: var(--wire-accordion-accent); - transform: rotate(45deg); -} -.wire-next--accordion[data-indicator="chevron"] - .wire-next__accordion-item[data-open="true"] - > .wire-next__accordion-heading - .wire-next__accordion-indicator { - transform: rotate(180deg); -} -.wire-next__accordion-item[data-open="true"] > .wire-next__accordion-heading > button { - color: var(--wire-accordion-accent); -} -.wire-next__accordion-panel { - display: grid; - grid-template-rows: 0fr; - opacity: 0; - transition: - grid-template-rows var(--wire-motion-base) var(--wire-ease-standard), - opacity var(--wire-motion-fast) var(--wire-ease-standard); -} -.wire-next__accordion-item[data-open="true"] > .wire-next__accordion-panel { - grid-template-rows: 1fr; - opacity: 1; -} -.wire-next__accordion-panel > div { - overflow: hidden; -} -.wire-next__accordion-content { - padding: 0 0 1rem 1.75rem; - color: var(--wire-color-muted); - font-size: 0.86rem; - line-height: 1.65; -} -.wire-next__accordion-content > p { - color: inherit; -} -.wire-next__accordion-content-italic > p::first-line { - font-style: italic; -} -.wire-next__accordion-nested { - display: grid; - margin-top: 0.5rem; -} -.wire-next__accordion-nested .wire-next__accordion-content { - padding-left: 1.5rem; -} -.wire-next--accordion-bordered { - overflow: hidden; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-md); - background: var(--wire-color-surface); -} -.wire-next--accordion-bordered > .wire-next__accordion-item + .wire-next__accordion-item { - border-top: 1px solid var(--wire-color-border); -} -.wire-next--accordion-bordered - > .wire-next__accordion-item - > .wire-next__accordion-heading - > button { - padding-inline: 1rem; -} -.wire-next--accordion-bordered - > .wire-next__accordion-item - > .wire-next__accordion-panel - .wire-next__accordion-content { - padding-inline: 1rem; -} -.wire-next--accordion-separated { - gap: 0.5rem; -} -.wire-next--accordion-separated > .wire-next__accordion-item { - overflow: hidden; - border: 1px solid transparent; - border-radius: var(--wire-radius-md); - background: var(--wire-color-surface-2); -} -.wire-next--accordion-separated > .wire-next__accordion-item[data-open="true"] { - border-color: var(--wire-color-border); -} -.wire-next--accordion-separated - > .wire-next__accordion-item - > .wire-next__accordion-heading - > button, -.wire-next--accordion-separated - > .wire-next__accordion-item - > .wire-next__accordion-panel - .wire-next__accordion-content { - padding-inline: 1rem; -} -.wire-next--accordion-flush { - border-radius: 0; - background: transparent; - box-shadow: none; -} -@media (prefers-reduced-motion: reduce) { - .wire-next__accordion-panel, - .wire-next__accordion-indicator { - transition: none; - } -} -.wire-next--toggle-count { - --wire-toggle-count-accent: var(--wire-component-color); - display: grid; - width: fit-content; - gap: 0.75rem; - color: var(--wire-color-text); -} -.wire-next--toggle-count-full { - width: 100%; -} -.wire-next__toggle-count-control { - display: flex; -} .wire-next__toggle-count-control--start { justify-content: flex-start; } @@ -3441,146 +1497,6 @@ .wire-next__toggle-count-control--end { justify-content: flex-end; } -.wire-next__toggle-count-segmented { - display: inline-flex; - gap: 0.2rem; - padding: 0.2rem; - border-radius: calc(var(--wire-radius-sm) + 0.15rem); - background: var(--wire-color-surface-2); - box-shadow: inset 0 0 0 1px var(--wire-color-border); -} -.wire-next__toggle-count-segmented button { - min-height: 2.35rem; - padding: 0.45rem 0.8rem; - border: 0; - border-radius: var(--wire-radius-sm); - background: transparent; - color: var(--wire-color-muted); - font: inherit; - font-size: 0.78rem; - font-weight: 700; - cursor: pointer; -} -.wire-next__toggle-count-segmented button[aria-pressed="true"] { - background: var(--wire-color-surface); - color: var(--wire-color-text); - box-shadow: - var(--wire-shadow-1), - inset 0 -2px var(--wire-toggle-count-accent); -} -.wire-next__toggle-count-segmented button:focus-visible, -.wire-next__toggle-count-switch:focus-visible { - outline: 2px solid var(--wire-toggle-count-accent); - outline-offset: 2px; -} -.wire-next__toggle-count-segmented button:disabled, -.wire-next__toggle-count-switch:disabled { - cursor: not-allowed; -} -.wire-next__toggle-count-control:has(.wire-next__toggle-count-switch) { - align-items: center; - gap: 0.7rem; - font-size: 0.78rem; - font-weight: 700; -} -.wire-next__toggle-count-control > span { - color: var(--wire-color-muted); -} -.wire-next__toggle-count-control > span[data-selected="true"] { - color: var(--wire-color-text); -} -.wire-next__toggle-count-switch { - position: relative; - width: 2.65rem; - height: 1.45rem; - padding: 0.15rem; - border: 1px solid var(--wire-color-border); - border-radius: 999px; - background: var(--wire-color-surface-2); - cursor: pointer; - transition: background-color var(--wire-motion-fast) var(--wire-ease-standard); -} -.wire-next__toggle-count-switch > span { - display: block; - width: 1rem; - height: 1rem; - border-radius: 50%; - background: var(--wire-color-text); - box-shadow: var(--wire-shadow-1); - transition: transform var(--wire-motion-fast) var(--wire-ease-standard); -} -.wire-next__toggle-count-switch[aria-checked="true"] { - border-color: var(--wire-toggle-count-accent); - background: var(--wire-toggle-count-accent); -} -.wire-next__toggle-count-switch[aria-checked="true"] > span { - background: white; - transform: translateX(1.15rem); -} -.wire-next__toggle-count-items { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); - overflow: hidden; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-md); - background: var(--wire-color-surface); -} -.wire-next__toggle-count-items article { - display: grid; - align-content: start; - gap: 0.35rem; - min-width: 0; - padding: 1rem; -} -.wire-next__toggle-count-items article + article { - border-left: 1px solid var(--wire-color-border); -} -.wire-next__toggle-count-items article > span { - color: var(--wire-color-muted); - font-size: 0.75rem; - font-weight: 600; -} -.wire-next__toggle-count-items strong { - display: flex; - align-items: baseline; - gap: 0.2rem; - font-size: 1.5rem; - line-height: 1; -} -.wire-next__toggle-count-items [data-toggle-count-value] { - min-width: 2ch; - font-variant-numeric: tabular-nums; - transition: - color var(--wire-motion-fast) var(--wire-ease-standard), - transform var(--wire-motion-fast) var(--wire-ease-standard); -} -.wire-next__toggle-count-items strong small { - color: inherit; - font-size: 0.65em; -} -.wire-next__toggle-count-items article > small { - color: var(--wire-color-muted); - font-size: 0.68rem; -} -@media (max-width: 36rem) { - .wire-next__toggle-count-control { - justify-content: center; - } - - .wire-next__toggle-count-items { - grid-template-columns: 1fr; - } - - .wire-next__toggle-count-items article + article { - border-top: 1px solid var(--wire-color-border); - border-left: 0; - } -} -@media (prefers-reduced-motion: reduce) { - .wire-next__toggle-count-items [data-toggle-count-value] { - transition: none; - } -} .wire-next p { margin: 0; color: var(--wire-color-muted); @@ -3597,203 +1513,6 @@ background: var(--wire-color-surface-2); font-size: 0.75rem; } -/* --- Badge --------------------------------------------------------------- */ -.wire-next--badge-root { - position: relative; - display: inline-flex; - width: fit-content; - max-width: 100%; - vertical-align: middle; -} -.wire-next__badge { - --wire-badge-color: var(--wire-color-primary); - position: relative; - isolation: isolate; - display: inline-flex; - min-width: 0; - min-height: 1.65rem; - align-items: center; - justify-content: center; - gap: 0.35rem; - max-width: var(--wire-badge-max-width); - padding: 0.25rem 0.6rem; - color: white; - border: 1px solid var(--wire-badge-color); - border-radius: 999px; - background: var(--wire-badge-color); - box-shadow: 0 4px 12px color-mix(in srgb, var(--wire-badge-color) 18%, transparent); - font-size: 0.75rem; - font-weight: 750; - line-height: 1; - white-space: nowrap; -} -.wire-next__badge[data-size="xs"] { - min-height: 1.25rem; - padding: 0.15rem 0.4rem; - font-size: 0.625rem; -} -.wire-next__badge[data-size="sm"] { - min-height: 1.45rem; - padding: 0.2rem 0.5rem; - font-size: 0.6875rem; -} -.wire-next__badge[data-size="lg"] { - min-height: 2rem; - padding: 0.35rem 0.75rem; - font-size: 0.825rem; -} -.wire-next__badge[data-color="secondary"] { - --wire-badge-color: #737373; -} -.wire-next__badge[data-color="success"] { - --wire-badge-color: #0f9f8f; -} -.wire-next__badge[data-color="info"] { - --wire-badge-color: #2563eb; -} -.wire-next__badge[data-color="danger"] { - --wire-badge-color: #ef3340; -} -.wire-next__badge[data-color="warning"] { - --wire-badge-color: #eab308; -} -.wire-next__badge[data-color="dark"] { - --wire-badge-color: #27272a; -} -.wire-next__badge[data-color="light"] { - --wire-badge-color: #f4f4f5; -} -.wire-next__badge[data-color="warning"][data-variant="solid"], -.wire-next__badge[data-color="light"][data-variant="solid"] { - color: #18181b; -} -.wire-next__badge[data-variant="soft"] { - color: var(--wire-badge-color); - border-color: transparent; - background: color-mix(in srgb, var(--wire-badge-color) 15%, var(--wire-color-surface)); - box-shadow: none; -} -.wire-next__badge[data-variant="outline"] { - color: var(--wire-badge-color); - background: transparent; - box-shadow: none; -} -.wire-next__badge[data-variant="white"] { - color: var(--wire-color-text); - border-color: var(--wire-color-border); - background: var(--wire-color-surface); - box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); -} -.wire-next__badge[data-shape="rounded"] { - border-radius: 0.4rem; -} -.wire-next__badge[data-shape="square"] { - border-radius: 0; -} -.wire-next__badge-label { - min-width: 0; -} -.wire-next__badge-label--truncate { - overflow: hidden; - text-overflow: ellipsis; -} -.wire-next__badge-dot { - width: 0.42rem; - height: 0.42rem; - flex: none; - border-radius: 999px; - background: currentColor; -} -.wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label)) { - width: 0.7rem; - min-width: 0.7rem; - height: 0.7rem; - min-height: 0.7rem; - padding: 0; - border: 2px solid var(--wire-color-bg); -} -.wire-next__badge:has(.wire-next__badge-dot):not(:has(.wire-next__badge-label)) - .wire-next__badge-dot { - width: 100%; - height: 100%; -} -.wire-next__badge-icon { - width: 0.9rem; - height: 0.9rem; - flex: none; -} -.wire-next__badge-avatar { - width: 1.25rem; - height: 1.25rem; - margin-left: -0.35rem; - object-fit: cover; - border: 1px solid color-mix(in srgb, currentColor 35%, transparent); - border-radius: 999px; -} -.wire-next__badge-dismiss { - display: grid; - width: 1.15rem; - height: 1.15rem; - margin-right: -0.3rem; - padding: 0; - place-items: center; - color: currentColor; - border: 0; - border-radius: 999px; - background: color-mix(in srgb, currentColor 12%, transparent); - cursor: pointer; -} -.wire-next__badge-dismiss:hover { - background: color-mix(in srgb, currentColor 22%, transparent); -} -.wire-next__badge-dismiss:focus-visible { - outline: 2px solid currentColor; - outline-offset: 2px; -} -.wire-next__badge-dismiss span { - width: 0.75rem; - height: 0.75rem; -} -.wire-next__badge-anchor { - display: inline-flex; - min-height: 2.75rem; - align-items: center; - justify-content: center; - gap: 0.5rem; - padding: 0.65rem 0.9rem; - color: var(--wire-color-text); - border: 1px solid var(--wire-color-border); - border-radius: 0.5rem; - background: var(--wire-color-surface); - font: inherit; - font-size: 0.875rem; - font-weight: 700; -} -.wire-next__badge-anchor > [class*="icon-"] { - width: 1rem; - height: 1rem; -} -.wire-next--badge-anchored[data-placement="inline"] { - align-items: center; -} -.wire-next--badge-anchored[data-placement="inline"] .wire-next__badge { - margin-left: -0.55rem; -} -.wire-next--badge-anchored[data-placement="top-right"] .wire-next__badge { - position: absolute; - top: -0.55rem; - right: -0.75rem; - z-index: 2; -} -.wire-next__badge-ping { - position: absolute; - z-index: -1; - inset: -0.25rem; - border-radius: inherit; - background: var(--wire-badge-color); - opacity: 0.5; - animation: wire-badge-ping 1.4s cubic-bezier(0, 0, 0.2, 1) infinite; -} @keyframes wire-badge-ping { 75%, 100% { @@ -3801,11 +1520,6 @@ transform: scale(1.45); } } -@media (prefers-reduced-motion: reduce) { - .wire-next__badge-ping { - animation: none; - } -} .wire-next details { overflow: hidden; border: 1px solid var(--wire-color-border); @@ -3830,112 +1544,10 @@ width: 100%; accent-color: var(--wire-color-primary); } -.wire-next--pin-input { - display: grid; - width: 100%; - min-width: 0; - gap: 0.65rem; - padding: 0; - border: 0; - color: var(--wire-color-text); -} -.wire-next__pin-heading { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; -} -.wire-next__pin-heading legend { - padding: 0; - font-size: 0.82em; - font-weight: 700; -} -.wire-next__pin-clear { - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0; - border: 0; - color: var(--wire-component-color); - background: transparent; - font: inherit; - font-size: 0.7em; - font-weight: 750; - cursor: pointer; -} -.wire-next__pin-clear > span:first-child { - width: 0.9rem; - height: 0.9rem; -} -.wire-next__pin-cells { - display: flex; - max-width: 100%; - align-items: center; - gap: clamp(0.35rem, 1.5vw, 0.65rem); - overflow-x: auto; - padding: 0.2rem; - scrollbar-width: thin; -} -.wire-next--pin-input .wire-next__pin-cells input { - flex: 0 0 clamp(2.4rem, 8vw, 3.25rem); - width: clamp(2.4rem, 8vw, 3.25rem); - height: clamp(2.75rem, 9vw, 3.5rem); - min-width: clamp(2.4rem, 8vw, 3.25rem); - padding: 0; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm); - color: var(--wire-color-text); - background: var(--wire-color-bg); - font: inherit; - font-size: clamp(1rem, 3vw, 1.25rem); - font-weight: 750; - text-align: center; - caret-color: var(--wire-component-color); - transition: - border-color var(--wire-motion-base) var(--wire-ease-standard), - box-shadow var(--wire-motion-base) var(--wire-ease-standard), - transform var(--wire-motion-fast) var(--wire-ease-standard); -} -.wire-next--pin-input .wire-next__pin-cells input::placeholder { - color: var(--wire-color-muted); - opacity: 0.45; -} -.wire-next--pin-input .wire-next__pin-cells input:focus-visible { - border-color: var(--wire-component-color); - outline: 0; - box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); - transform: translateY(-1px); -} -.wire-next--pin-input .wire-next__pin-cells input:disabled, -.wire-next--pin-input .wire-next__pin-cells input:read-only { - cursor: not-allowed; - opacity: 0.55; -} -.wire-next__pin-separator { - color: var(--wire-color-muted); - font-size: 1.1rem; - font-weight: 800; -} -.wire-next--pin-input[data-complete="true"] .wire-next__pin-cells input { - border-color: color-mix(in srgb, var(--wire-component-color) 72%, var(--wire-color-border)); - background: color-mix(in srgb, var(--wire-component-color) 7%, var(--wire-color-bg)); -} .wire-next--pin-input.wire-next--invalid .wire-next__pin-cells input, .wire-next--pin-input:has(input.wire-invalid) .wire-next__pin-cells input { border-color: var(--wire-color-danger); } -@media (max-width: 480px) { - .wire-next__pin-cells { - gap: 0.3rem; - } - - .wire-next--pin-input .wire-next__pin-cells input { - flex-basis: min(2.7rem, 12vw); - width: min(2.7rem, 12vw); - min-width: min(2.7rem, 12vw); - height: min(3rem, 14vw); - } -} .wire-next--navbar, .wire-next--mega-menu, .wire-next--nav, @@ -3971,65 +1583,6 @@ color: var(--wire-color-text); background: var(--wire-color-surface-2); } -/* Structured responsive footer */ -.wire-footer { - width: 100%; - color: var(--wire-color-text); - background: var(--wire-color-surface); - border-top: 1px solid var(--wire-color-border); - font-size: 0.875rem; - font-weight: 400; -} -.wire-footer__grid { - display: grid; - grid-template-columns: minmax(13rem, 1.2fr) minmax(0, 3fr) minmax(13rem, 1fr); - width: min(100%, 90rem); - margin-inline: auto; - padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3rem); - gap: clamp(1.5rem, 4vw, 3.5rem); -} -.wire-footer--width-full .wire-footer__grid { - width: 100%; - max-width: none; -} -.wire-footer__pre:empty, -.wire-footer__post:empty, -.wire-footer__pre:not(:has(*)), -.wire-footer__post:not(:has(*)) { - display: none; -} -.wire-footer__pre, -.wire-footer__post { - min-width: 0; -} -.wire-footer__pre strong, -.wire-footer__post strong { - font-size: 0.875rem; - font-weight: 600; -} -.wire-footer__pre p, -.wire-footer__post p { - font-size: 0.8125rem; - font-weight: 400; - line-height: 1.6; -} -.wire-footer__links { - display: grid; - grid-template-columns: repeat(var(--wire-footer-columns, 3), minmax(0, 1fr)); - align-content: start; - gap: 1.5rem; -} -.wire-footer__column { - display: grid; - min-width: 0; - align-content: start; - gap: 0.8rem; -} -.wire-footer__column-links { - display: grid; - align-content: start; - gap: 0.55rem; -} .wire-footer--columns-1 { --wire-footer-columns: 1; } @@ -4048,74 +1601,7 @@ .wire-footer--columns-6 { --wire-footer-columns: 6; } -.wire-footer__heading { - display: block; - color: var(--wire-color-text); - font-size: 0.8125rem; - font-weight: 600; -} -.wire-footer__link { - display: flex; - width: fit-content; - min-height: 2rem; - align-items: center; - gap: 0.4rem; - color: var(--wire-color-muted); - font-size: 0.8125rem; - font-weight: 400; - text-decoration: none; -} -.wire-footer__link:hover { - color: var(--wire-component-color, var(--wire-color-primary)); - text-decoration: underline; - text-underline-offset: 0.2em; -} -.wire-footer__bottom { - display: grid; - grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); - align-items: center; - gap: 1rem; - padding: 1rem clamp(1rem, 4vw, 3rem); - color: var(--wire-color-muted); - border-top: 1px solid var(--wire-color-border); - font-size: 0.75rem; - font-weight: 400; -} -.wire-footer__bottom--slots { - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); -} -.wire-footer__bottom--slots:not( - :has(.wire-footer__copyright-left > *, .wire-footer__copyright-right > *) -) { - display: none; -} -.wire-footer__copyright { - text-align: center; -} -.wire-footer__copyright-left, -.wire-footer__copyright-right { - display: flex; - min-width: 0; - align-items: center; - gap: 0.75rem; -} -.wire-footer__copyright-right { - justify-content: flex-end; - text-align: right; -} -.wire-footer__copyright-left:empty, -.wire-footer__copyright-right:empty, -.wire-footer__copyright-left:not(:has(*)), -.wire-footer__copyright-right:not(:has(*)) { - min-height: 0; -} @media (max-width: 900px) { - .wire-footer__grid { - grid-template-columns: 1fr; - } - .wire-footer__links { - grid-template-columns: repeat(3, minmax(0, 1fr)); - } .wire-footer--columns-1 .wire-footer__links { grid-template-columns: 1fr; } @@ -4124,91 +1610,9 @@ } } @media (max-width: 600px) { - .wire-footer__links { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } .wire-footer--columns-1 .wire-footer__links { grid-template-columns: 1fr; } - .wire-footer__bottom, - .wire-footer__bottom--slots { - grid-template-columns: 1fr; - justify-items: center; - text-align: center; - } - .wire-footer__copyright-left, - .wire-footer__copyright-right { - justify-content: center; - text-align: center; - } -} -@media (max-width: 420px) { - .wire-footer__links { - grid-template-columns: 1fr; - } -} -/* Portal display, accent, and language preferences */ -.wire-preferences { - display: inline-flex; - align-items: center; - gap: 0.25rem; -} -.wire-preferences__menu { - position: relative; -} -.wire-preferences__menu > summary { - display: inline-flex; - min-width: 2.25rem; - min-height: 2.25rem; - padding: 0.45rem 0.6rem; - align-items: center; - justify-content: center; - gap: 0.4rem; - border: 1px solid transparent; - border-radius: 0.6rem; - color: var(--wire-color-muted); - cursor: pointer; - list-style: none; -} -.wire-preferences__menu > summary::-webkit-details-marker { - display: none; -} -.wire-preferences__menu > summary:hover, -.wire-preferences__menu[open] > summary { - color: var(--wire-color-text); - border-color: var(--wire-color-border); - background: var(--wire-color-surface); -} -.wire-preferences__menu > summary > span:first-child { - width: 1rem; - height: 1rem; -} -.wire-preferences__current-language { - min-width: 1.25rem; - color: var(--wire-color-text); - font-size: 0.625rem; - font-weight: 650; - letter-spacing: 0.02em; -} -.wire-preferences__panel { - position: absolute; - z-index: 80; - top: calc(100% + 0.5rem); - right: 0; - display: grid; - width: max-content; - min-width: 11rem; - max-width: min(22rem, calc(100vw - 2rem)); - max-height: min(28rem, calc(100dvh - 2rem)); - overflow-y: auto; - padding: 0.75rem; - gap: 0.6rem; - border: 1px solid var(--wire-color-border); - border-radius: 0.8rem; - color: var(--wire-color-text); - background: var(--wire-color-surface); - box-shadow: var(--wire-shadow-lg, 0 18px 48px rgb(0 0 0 / 0.18)); - animation: wire-component-enter 160ms ease both; } @keyframes wire-sidebar-children { from { @@ -4220,270 +1624,6 @@ transform: translateY(0); } } -.wire-preferences__panel > strong { - padding-inline: 0.25rem; - font-size: 0.7rem; - font-weight: 600; - letter-spacing: 0.06em; - text-transform: uppercase; -} -.wire-preferences__options { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0.4rem; -} -.wire-preferences__panel button { - display: inline-flex; - min-height: 2.25rem; - padding: 0.5rem 0.65rem; - align-items: center; - gap: 0.5rem; - border-radius: 0.55rem; - color: var(--wire-color-text); - background: var(--wire-color-surface-2); - font-size: 0.75rem; - font-weight: 500; -} -.wire-preferences__panel button:hover { - outline: 2px solid color-mix(in srgb, var(--wire-color-primary) 40%, transparent); -} -.wire-preferences__panel button[aria-pressed="true"] { - color: var(--wire-color-primary); - background: color-mix(in srgb, var(--wire-color-primary) 12%, var(--wire-color-surface)); - outline: 1px solid color-mix(in srgb, var(--wire-color-primary) 55%, transparent); -} -.wire-preferences__swatches { - display: grid; - grid-template-columns: repeat(3, 2rem); - gap: 0.5rem; -} -.wire-preferences__swatches button { - width: 2rem; - min-height: 2rem; - padding: 0; - border: 3px solid var(--wire-color-surface); - border-radius: 999px; - background: var(--wire-preference-swatch); - box-shadow: 0 0 0 1px var(--wire-color-border); -} -.wire-preferences__swatches button[aria-pressed="true"] { - box-shadow: - 0 0 0 2px var(--wire-color-surface), - 0 0 0 4px var(--wire-color-primary); -} -.wire-preferences__panel--language button { - width: 100%; - background: transparent; -} -.wire-preferences__panel--language button span { - display: grid; - width: 1.65rem; - height: 1.65rem; - place-items: center; - border-radius: 0.45rem; - background: var(--wire-color-surface-2); - font-size: 0.65rem; -} -.wire-preferences__panel--language button[aria-pressed="true"]::after { - width: 0.9rem; - height: 0.9rem; - margin-left: auto; - content: ""; - background: currentColor; - mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m5 12 4 4L19 6'/%3E%3C/svg%3E") - center / contain no-repeat; -} -/* Reusable responsive portal dashboard */ -.wire-portal-dashboard { - width: min(100%, 96rem); - margin-inline: auto; - color: var(--wire-color-text); -} -.wire-portal-dashboard__hero { - display: flex; - padding: clamp(1.25rem, 3vw, 2rem); - align-items: flex-end; - justify-content: space-between; - gap: 1rem; - border: 1px solid var(--wire-color-border); - border-radius: 1rem; - background: - radial-gradient( - circle at 85% 0%, - color-mix(in srgb, var(--wire-color-primary) 20%, transparent), - transparent 34% - ), - var(--wire-color-surface); - box-shadow: var(--wire-shadow-sm); -} -.wire-portal-dashboard__eyebrow, -.wire-portal-dashboard__panel-heading small { - color: var(--wire-color-primary); - font-size: 0.7rem; - font-weight: 650; - letter-spacing: 0.09em; - text-transform: uppercase; -} -.wire-portal-dashboard__hero h1 { - margin: 0.35rem 0 0; - font-size: clamp(1.4rem, 3vw, 2.25rem); - font-weight: 650; - letter-spacing: -0.035em; -} -.wire-portal-dashboard__hero p { - max-width: 48rem; - margin: 0.5rem 0 0; - color: var(--wire-color-muted); - font-size: 0.875rem; - line-height: 1.6; -} -.wire-portal-dashboard__metrics { - display: grid; - grid-template-columns: repeat(4, minmax(0, 1fr)); - margin-top: 1rem; - gap: 1rem; -} -.wire-portal-dashboard__metric { - display: flex; - min-width: 0; - padding: 1rem; - align-items: center; - gap: 0.85rem; - border: 1px solid var(--wire-color-border); - border-radius: 0.85rem; - background: var(--wire-color-surface); - box-shadow: var(--wire-shadow-sm); -} -.wire-portal-dashboard__metric-icon { - width: 2.25rem; - height: 2.25rem; - flex: none; - padding: 0.55rem; - border-radius: 0.7rem; - color: var(--wire-color-primary); - background: color-mix(in srgb, var(--wire-color-primary) 12%, transparent); -} -.wire-portal-dashboard__metric div { - display: grid; - min-width: 0; -} -.wire-portal-dashboard__metric small, -.wire-portal-dashboard__metric span { - overflow: hidden; - color: var(--wire-color-muted); - font-size: 0.7rem; - text-overflow: ellipsis; - white-space: nowrap; -} -.wire-portal-dashboard__metric strong { - margin-block: 0.1rem; - font-size: 1.3rem; - font-weight: 650; -} -.wire-portal-dashboard__grid { - display: grid; - grid-template-columns: minmax(0, 1.2fr) minmax(18rem, 0.8fr); - margin-top: 1rem; - gap: 1rem; -} -.wire-portal-dashboard__panel { - min-width: 0; - padding: 1.1rem; - border: 1px solid var(--wire-color-border); - border-radius: 0.9rem; - background: var(--wire-color-surface); - box-shadow: var(--wire-shadow-sm); -} -.wire-portal-dashboard__panel--actions { - grid-row: span 2; -} -.wire-portal-dashboard__panel-heading { - display: flex; - margin-bottom: 0.9rem; - align-items: center; - justify-content: space-between; -} -.wire-portal-dashboard__panel-heading h2 { - margin: 0.2rem 0 0; - font-size: 1rem; - font-weight: 600; -} -.wire-portal-dashboard__actions { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 0.65rem; -} -.wire-portal-dashboard__actions a, -.wire-portal-dashboard__list a { - display: flex; - min-width: 0; - padding: 0.8rem; - align-items: center; - gap: 0.7rem; - border: 1px solid var(--wire-color-border); - border-radius: 0.7rem; - color: inherit; - text-decoration: none; - transition: - border-color 150ms ease, - background 150ms ease, - transform 150ms ease; -} -.wire-portal-dashboard__actions a:hover, -.wire-portal-dashboard__list a:hover { - border-color: color-mix(in srgb, var(--wire-color-primary) 45%, var(--wire-color-border)); - background: var(--wire-color-surface-2); - transform: translateY(-1px); -} -.wire-portal-dashboard__actions a > span:first-child { - width: 1.15rem; - height: 1.15rem; - flex: none; - color: var(--wire-color-primary); -} -.wire-portal-dashboard__actions a > span:nth-child(2), -.wire-portal-dashboard__list a > span:nth-child(2) { - display: grid; - min-width: 0; - flex: 1; -} -.wire-portal-dashboard__actions a > span:last-child { - width: 0.9rem; - height: 0.9rem; - color: var(--wire-color-muted); -} -.wire-portal-dashboard__actions strong, -.wire-portal-dashboard__list strong, -.wire-portal-dashboard__timeline strong { - font-size: 0.8rem; - font-weight: 550; -} -.wire-portal-dashboard__actions small, -.wire-portal-dashboard__list small, -.wire-portal-dashboard__timeline p, -.wire-portal-dashboard__timeline small { - margin: 0.15rem 0 0; - color: var(--wire-color-muted); - font-size: 0.7rem; - font-style: normal; - line-height: 1.45; -} -.wire-portal-dashboard__list { - display: grid; - gap: 0.5rem; -} -.wire-portal-dashboard__list a { - border: 0; - border-bottom: 1px solid var(--wire-color-border); - border-radius: 0; -} -.wire-portal-dashboard__status { - width: 0.55rem; - height: 0.55rem; - flex: none; - border-radius: 999px; - background: var(--wire-color-muted); -} .wire-portal-dashboard__status--urgent { background: var(--wire-color-danger); } @@ -4493,58 +1633,6 @@ .wire-portal-dashboard__status--success { background: var(--wire-color-success); } -.wire-portal-dashboard__list em { - color: var(--wire-color-muted); - font-size: 0.7rem; - font-style: normal; -} -.wire-portal-dashboard__timeline { - display: grid; - gap: 0.8rem; -} -.wire-portal-dashboard__timeline article { - display: flex; - gap: 0.7rem; -} -.wire-portal-dashboard__timeline article > span { - width: 1rem; - height: 1rem; - margin-top: 0.15rem; - flex: none; - color: var(--wire-color-primary); -} -.wire-portal-dashboard__timeline p { - margin-block: 0.15rem; -} -@media (max-width: 1100px) { - .wire-portal-dashboard__metrics { - grid-template-columns: repeat(2, minmax(0, 1fr)); - } - .wire-portal-dashboard__grid { - grid-template-columns: 1fr; - } - .wire-portal-dashboard__panel--actions { - grid-row: auto; - } -} -@media (max-width: 640px) { - .wire-preferences__panel { - position: fixed; - top: auto; - right: 1rem; - bottom: 1rem; - left: 1rem; - width: auto; - } - .wire-portal-dashboard__hero { - align-items: flex-start; - flex-direction: column; - } - .wire-portal-dashboard__metrics, - .wire-portal-dashboard__actions { - grid-template-columns: 1fr; - } -} .wire-next--field { display: grid; width: min(100%, 28rem); @@ -4682,218 +1770,17 @@ overflow-y: auto; } } -/* Shared authentication shell and forms */ -.wire-auth-split { - display: grid; - width: 100%; - height: 100dvh; - min-height: 0; - overflow: hidden; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - color: var(--wire-color-text); - background: var(--wire-color-bg); -} -.wire-auth-split__content, -.wire-auth-split__form { - min-width: 0; - padding: clamp(1.5rem, 5vw, 5rem); -} -.wire-auth-split__content { - display: flex; - height: 100dvh; - min-height: 0; - overflow: hidden; - justify-content: space-between; - flex-direction: column; - background: - radial-gradient( - circle at 15% 15%, - color-mix(in srgb, var(--wire-color-primary) 22%, transparent), - transparent 34% - ), - linear-gradient(145deg, var(--wire-color-surface-2), var(--wire-color-bg)); - border-right: 1px solid var(--wire-color-border); -} -.wire-auth-split__brand { - display: flex; - align-items: center; - gap: 0.75rem; -} -.wire-auth-split__brand > span:first-child { - width: 2.5rem; - height: 2.5rem; - color: var(--wire-color-primary); -} -.wire-auth-split__brand > span:last-child { - display: grid; -} -.wire-auth-split__brand strong { - font-size: 0.875rem; - font-weight: 650; -} -.wire-auth-split__brand small, -.wire-auth-split__legal { - color: var(--wire-color-muted); - font-size: 0.65rem; -} -.wire-auth-split__message { - width: min(100%, 36rem); - margin-block: 3rem; -} -.wire-auth-split__eyebrow { - color: var(--wire-color-primary); - font-size: 0.7rem; - font-weight: 650; - letter-spacing: 0.09em; - text-transform: uppercase; -} -.wire-auth-split__message h1 { - max-width: 14ch; - margin: 0.65rem 0 0; - font-size: clamp(2rem, 4vw, 3.75rem); - font-weight: 650; - letter-spacing: -0.045em; - line-height: 1.08; -} -.wire-auth-split__message > p { - max-width: 34rem; - margin: 1rem 0 0; - color: var(--wire-color-muted); - font-size: 0.875rem; - line-height: 1.7; -} -.wire-auth-split__features { - display: grid; - margin-top: 2rem; - gap: 1rem; -} -.wire-auth-split__features article { - display: flex; - align-items: flex-start; - gap: 0.75rem; -} -.wire-auth-split__features article > span:first-child { - width: 1.1rem; - height: 1.1rem; - margin-top: 0.1rem; - flex: none; - color: var(--wire-color-primary); -} -.wire-auth-split__features article > span:last-child { - display: grid; -} -.wire-auth-split__features strong { - font-size: 0.75rem; - font-weight: 600; -} -.wire-auth-split__features small { - margin-top: 0.15rem; - color: var(--wire-color-muted); - font-size: 0.68rem; -} -.wire-auth-split__form { - display: grid; - height: 100dvh; - min-height: 0; - overflow-x: hidden; - overflow-y: auto; - overscroll-behavior: contain; - place-items: center; - background: var(--wire-color-surface); -} -.wire-auth-split__form-inner { - width: min(100%, 30rem); -} -.wire-auth-form { - width: 100%; -} -.wire-auth-form > header { - display: flex; - margin-bottom: 1.5rem; - align-items: flex-start; - gap: 0.85rem; -} -.wire-auth-form__icon { - width: 2rem; - height: 2rem; - flex: none; - color: var(--wire-color-primary); -} -.wire-auth-form h2 { - margin: 0; - font-size: 1.5rem; - font-weight: 650; - letter-spacing: -0.025em; -} -.wire-auth-form header p { - margin: 0.35rem 0 0; - color: var(--wire-color-muted); - font-size: 0.75rem; - line-height: 1.5; -} -.wire-auth-form form { - display: grid; - gap: 1rem; -} .wire-auth-form form > .wire-next--field, .wire-auth-form form > .wire-field { width: 100%; max-width: none; } -.wire-auth-form__options { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - font-size: 0.7rem; -} -.wire-auth-form__options a { - color: var(--wire-color-primary); - text-decoration: none; -} -.wire-auth-form__submit { - width: 100%; - justify-content: center; -} .wire-auth-form__submit > .wire-btn { width: 100%; min-height: 3rem; border-radius: 0.75rem; box-shadow: 0 0.8rem 1.8rem color-mix(in srgb, var(--wire-btn-color) 20%, transparent); } -@media (max-width: 800px) { - .wire-auth-split { - height: auto; - min-height: 100dvh; - overflow: visible; - grid-template-columns: 1fr; - } - .wire-auth-split__content { - height: auto; - min-height: auto; - overflow: visible; - padding-bottom: 2rem; - border-right: 0; - border-bottom: 1px solid var(--wire-color-border); - } - .wire-auth-split__message { - margin-block: 2rem 0; - } - .wire-auth-split__message h1 { - font-size: clamp(1.75rem, 8vw, 2.5rem); - } - .wire-auth-split__features, - .wire-auth-split__legal { - display: none; - } - .wire-auth-split__form { - height: auto; - min-height: auto; - overflow: visible; - padding-block: 2.5rem; - place-items: start center; - } -} .wire-next--field :where(input, textarea, select):focus-visible { border-color: var(--wire-color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-primary) 16%, transparent); @@ -5106,32 +1993,11 @@ font-size: 0.75rem; font-weight: 500; } -.wire-next__checkbox-content { - display: grid; - width: 100%; - min-width: 0; - align-items: start; - grid-template-columns: minmax(0, 1fr); -} .wire-next__checkbox-content > .wire-next__choice { width: 100%; min-width: 0; align-items: flex-start; } -.wire-next__checkbox-slot { - display: block; - min-width: 0; - flex: 1 1 auto; - color: var(--wire-color-muted); - font-size: 0.75rem; - line-height: 1.45; -} -.wire-next__checkbox-slot:empty { - display: none; -} -.wire-next__checkbox-slot :is(a, button) { - color: var(--wire-field-color); -} .wire-next__choice input { flex: 0 0 auto; margin: 0; @@ -5212,52 +2078,10 @@ padding-block: 0.5rem; border-bottom: 1px solid var(--wire-color-border); } -.wire-next--switch input { - appearance: none; - position: relative; - width: 2.5rem; - height: 1.4rem; - border: 1px solid var(--wire-color-border); - border-radius: 999px; - background: var(--wire-color-surface-2); - transition: background var(--wire-motion-fast) var(--wire-ease-standard); -} -.wire-next--switch { - min-height: 2.65rem; - justify-content: flex-start; -} -.wire-next--switch > span:last-child { - line-height: 1.35; -} .wire-next--select .wire-next__field-control { display: flex; align-items: center; } -.wire-next--select select { - width: 100%; - min-height: 2.65rem; - margin: 0; - line-height: 1.35; -} -.wire-next--switch input::after { - position: absolute; - top: 0.15rem; - left: 0.15rem; - width: 1rem; - height: 1rem; - border-radius: 999px; - background: var(--wire-color-text); - content: ""; - transition: transform var(--wire-motion-fast) var(--wire-ease-standard); -} -.wire-next--switch input:checked { - border-color: var(--wire-field-color); - background: var(--wire-field-color); -} -.wire-next--switch input:checked::after { - background: var(--wire-color-primary-contrast, #fff); - transform: translateX(1.1rem); -} .wire-next__color-control, .wire-next__range-control, .wire-next__input-group-control, @@ -5267,128 +2091,6 @@ align-items: center; gap: 0.65rem; } -.wire-next__color-control input[type="color"] { - width: 3rem; - padding: 0.2rem; -} -.wire-next__range-track { - display: grid; - flex: 1; - min-width: 0; - gap: 0.35rem; -} -.wire-next__range-control input { - width: 100%; - min-width: 0; - margin: 0; - flex: 1; - accent-color: var(--wire-field-color); -} -.wire-next__custom-slider { - position: relative; - width: 100%; - height: 1.5rem; - cursor: pointer; - touch-action: none; -} -.wire-next__custom-slider::before, -.wire-next__slider-fill { - position: absolute; - top: 50%; - height: 0.4rem; - border-radius: 999px; - transform: translateY(-50%); - content: ""; -} -.wire-next__custom-slider::before { - right: 0; - left: 0; - background: var(--wire-color-surface-2); - box-shadow: inset 0 0 0 1px var(--wire-color-border); -} -.wire-next__slider-fill { - z-index: 1; - left: 0; - width: var(--wire-range-progress); - background: var(--wire-field-color); -} -.wire-next__slider-thumb { - position: absolute; - z-index: 3; - top: 50%; - left: var(--wire-range-progress); - width: 1.25rem; - height: 1.25rem; - border: 3px solid var(--wire-field-color); - border-radius: 50%; - background: var(--wire-color-surface); - box-shadow: var(--wire-shadow-1); - transform: translate(-50%, -50%); -} -.wire-next__custom-slider:focus-visible { - outline: 3px solid color-mix(in srgb, var(--wire-field-color) 28%, transparent); - outline-offset: 3px; -} -.wire-next__slider-marks button { - position: absolute; - z-index: 2; - top: 50%; - width: 0.55rem; - height: 0.55rem; - padding: 0; - border: 2px solid var(--wire-color-surface); - border-radius: 50%; - background: var(--wire-color-muted); - transform: translate(-50%, -50%); -} -.wire-next__range-control[data-show-steps="true"] input { - background-image: repeating-linear-gradient( - 90deg, - transparent 0, - transparent calc(10% - 1px), - var(--wire-color-border) calc(10% - 1px), - var(--wire-color-border) 10% - ); -} -.wire-next__range-bounds { - display: grid; - grid-template-columns: 1fr auto 1fr; - color: var(--wire-color-muted); - font-size: 0.78em; - font-variant-numeric: tabular-nums; -} -.wire-next__range-bounds span:nth-child(2) { - text-align: center; -} -.wire-next__range-bounds span:last-child { - text-align: right; -} -.wire-next__range-control output { - min-width: 3ch; - font-variant-numeric: tabular-nums; -} -.wire-next__range-stepper { - display: inline-grid; - width: 2.35rem; - height: 2.35rem; - flex: 0 0 auto; - place-items: center; - border: 1px solid var(--wire-color-border); - border-radius: 50%; - background: var(--wire-color-surface); - color: var(--wire-color-text); - font: inherit; - font-size: 1.2rem; - cursor: pointer; -} -.wire-next__range-stepper:hover:not(:disabled) { - border-color: var(--wire-field-color); - color: var(--wire-field-color); -} -.wire-next__range-stepper:disabled { - cursor: not-allowed; - opacity: 0.45; -} .wire-next__picker-control, .wire-next--time-picker .wire-next__field-control { position: relative; @@ -5412,13 +2114,6 @@ font: inherit; text-align: left; } -.wire-next__picker-clear { - position: absolute; - right: 2.5rem; - border: 0; - background: transparent; - color: var(--wire-color-muted); -} .wire-next__calendar, .wire-next__time-panel { z-index: 20; @@ -5435,39 +2130,6 @@ .wire-next--time-picker[data-expanded="false"] .wire-next__time-panel { display: none; } -.wire-next__date-selectors { - display: grid; - grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); - gap: 0.65rem; -} -.wire-next__date-selectors label { - display: grid; - gap: 0.3rem; - color: var(--wire-color-muted); - font-size: 0.78rem; - font-weight: 600; -} -.wire-next__date-selectors select { - width: 100%; - min-height: 2.35rem; - padding: 0.45rem 0.65rem; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm); - background: var(--wire-color-surface); - color: var(--wire-color-text); - font: inherit; -} -.wire-next__date-done { - background: var(--wire-field-color) !important; - color: var(--wire-color-primary-contrast, #fff) !important; - font-weight: 650; -} -.wire-next__calendar > header { - display: grid; - grid-template-columns: 2.25rem 1fr 2.25rem; - align-items: center; - text-align: center; -} .wire-next__calendar button, .wire-next__time-panel button { min-height: 2.25rem; @@ -5496,42 +2158,10 @@ background: var(--wire-field-color); color: var(--wire-color-primary-contrast, #fff); } -.wire-next__calendar-grid button[data-outside="true"] { - color: var(--wire-color-muted); - opacity: 0.55; -} -.wire-next__calendar-grid button[data-today="true"] { - box-shadow: inset 0 0 0 1px var(--wire-field-color); -} -.wire-next__time-panel { - grid-template-columns: 1fr 1fr; -} -.wire-next__time-options { - display: grid; - max-height: 12rem; - margin-top: 0.4rem; - overflow-y: auto; - gap: 0.2rem; -} .wire-next__time-period { display: flex; gap: 0.35rem; } -.wire-next__time-done { - align-self: end; - background: var(--wire-field-color) !important; - color: var(--wire-color-primary-contrast, #fff) !important; -} -.wire-next--file-upload-progress { - display: grid; - width: min(100%, 36rem); - gap: 0.75rem; - padding: 1rem; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-md); - background: var(--wire-color-surface); - box-shadow: var(--wire-shadow-1); -} .wire-next--file-upload-progress .wire-next__row, .wire-next__upload-actions { display: flex; @@ -5543,50 +2173,6 @@ display: grid; min-width: 0; } -.wire-next--file-upload-progress progress { - width: 100%; - height: 0.55rem; - overflow: hidden; - border: 0; - border-radius: 999px; - accent-color: var(--wire-component-color); -} -.wire-next__upload-actions { - justify-content: flex-end; -} -.wire-next__upload-actions button { - min-height: 2.25rem; - padding-inline: 0.8rem; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm); - background: var(--wire-color-surface-2); - color: inherit; -} -@media (max-width: 640px) { - .wire-next__time-panel { - grid-template-columns: 1fr; - } -} -.wire-next__file-control { - position: relative; - min-height: 2.75rem; - padding: 0.65rem 0.85rem; - border: 1px dashed var(--wire-color-border); - border-radius: var(--wire-radius-sm); - background: var(--wire-color-surface); -} -.wire-next__file-control input { - position: absolute; - cursor: pointer; - opacity: 0; - inset: 0; -} -.wire-next__input-group-control { - overflow: hidden; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm); - background: var(--wire-color-surface); -} .wire-next--field[data-variant="underline"] :is(.wire-next__input-group-control, .wire-next__file-control, .wire-next__color-control) { border-width: 0 0 1px; @@ -5606,26 +2192,6 @@ border-color: transparent; background: color-mix(in srgb, var(--wire-field-color) 8%, var(--wire-color-surface)); } -.wire-next__input-group-control input { - flex: 1; - min-width: 0; - border: 0; - box-shadow: none; -} -.wire-next__input-addon, -.wire-next__input-group-control button { - padding: 0.7rem 0.85rem; - white-space: nowrap; -} -.wire-next__input-group-control button { - align-self: stretch; - border: 0; - background: var(--wire-field-color); - color: var(--wire-color-primary-contrast, #fff); - font: inherit; - font-weight: 700; - cursor: pointer; -} @media (max-width: 640px) { .wire-next--field[data-inline="true"], .wire-next--choice-field[data-inline="true"] { @@ -5637,299 +2203,15 @@ grid-column: auto; } } -.wire-next--toggle-password { - display: grid; - width: 100%; - min-width: 0; - max-width: none; - box-sizing: border-box; - gap: 0.45rem; - padding: 0; - border: 0; -} -.wire-next--toggle-password > label { - color: var(--wire-color-text); - font-size: 0.75rem; - font-weight: 600; -} -.wire-next__password-fields { - display: grid; - gap: 1rem; -} -.wire-next__password-field { - display: grid; - gap: 0.45rem; -} -.wire-next__password-field > label { - color: var(--wire-color-text); - font-size: 0.82em; - font-weight: 750; -} -.wire-next__password-control { - position: relative; - display: flex; - min-width: 0; - align-items: center; - width: 100%; -} -.wire-next__password-control > input { - width: 100%; - min-width: 0; - min-height: 2.75em; - padding: 0.65em 3em 0.65em 0.8em; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm); - outline: 0; - color: var(--wire-color-text); - background: var(--wire-color-bg); - font: inherit; - font-size: 0.8125rem; - transition: - border-color var(--wire-motion-base) var(--wire-ease-standard), - box-shadow var(--wire-motion-base) var(--wire-ease-standard); -} -.wire-next__password-control > input:focus-visible { - border-color: var(--wire-component-color); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); -} -.wire-next__password-toggle { - position: absolute; - top: 50%; - right: 0.45em; - display: grid; - width: 2em; - height: 2em; - padding: 0; - place-items: center; - border: 0; - border-radius: calc(var(--wire-radius-sm) * 0.72); - color: var(--wire-color-muted); - background: transparent; - cursor: pointer; - transform: translateY(-50%); -} -.wire-next__password-toggle:hover, -.wire-next__password-toggle:focus-visible { - color: var(--wire-component-color); - background: color-mix(in srgb, var(--wire-component-color) 10%, transparent); - outline: 0; -} -.wire-next__password-icon { - display: block; - width: 1.05em; - height: 1.05em; - background: currentColor; - mask-position: center; - mask-repeat: no-repeat; - mask-size: contain; -} -.wire-next__password-icon--show { - mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.06 12.35a1 1 0 0 1 0-.7C3.7 7.6 7.64 5 12 5c4.36 0 8.3 2.6 9.94 6.65a1 1 0 0 1 0 .7C20.3 16.4 16.36 19 12 19c-4.36 0-8.3-2.6-9.94-6.65Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); -} -.wire-next__password-toggle[aria-pressed="true"]::after { - position: absolute; - width: 1.25em; - height: 0.12em; - border-radius: 999px; - background: currentColor; - content: ""; - transform: rotate(45deg); - box-shadow: 0 0 0 1px var(--wire-color-bg); -} -.wire-next__password-checkbox { - display: inline-flex; - width: fit-content; - align-items: center; - gap: 0.55rem; - color: var(--wire-color-muted); - font-size: 0.78em; - cursor: pointer; -} -.wire-next__password-checkbox > input { - width: 1rem; - height: 1rem; - margin: 0; - accent-color: var(--wire-component-color); -} -.wire-next--toggle-password > small { - color: var(--wire-color-muted); - font-size: 0.72em; -} .wire-next--toggle-password:has(input.wire-invalid) .wire-next__password-control > input, .wire-next--toggle-password.wire-next--invalid .wire-next__password-control > input { border-color: var(--wire-color-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-color-danger) 14%, transparent); } -.wire-next--strong-password { - position: relative; - display: grid; - width: 100%; - gap: 0.6rem; - color: var(--wire-color-text); -} -.wire-next--strong-password > label { - font-size: 0.82em; - font-weight: 700; -} -.wire-next__strong-password-anchor { - position: relative; -} -.wire-next--strong-password input { - width: 100%; - min-height: 2.75em; - padding: 0.68em 0.85em; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius-sm); - outline: 0; - color: var(--wire-color-text); - background: var(--wire-color-surface); - font: inherit; - transition: - border-color 160ms ease, - box-shadow 160ms ease; -} -.wire-next--strong-password input:focus-visible { - border-color: var(--wire-component-color); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 16%, transparent); -} .wire-next--strong-password.wire-next--invalid input, .wire-next--strong-password input.wire-invalid { border-color: var(--wire-color-danger); } -.wire-next__strong-password-details { - display: grid; - gap: 0.65rem; -} -.wire-next__strong-password-summary { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - color: var(--wire-color-muted); - font-size: 0.75em; -} -.wire-next__strong-password-summary strong { - color: var(--wire-color-text); -} -.wire-next__strong-password-meter { - width: 100%; - height: 0.42rem; - overflow: hidden; - border-radius: 999px; - background: color-mix(in srgb, var(--wire-color-border) 72%, transparent); -} -.wire-next__strong-password-meter > span { - display: block; - width: 0; - height: 100%; - border-radius: inherit; - background: var(--wire-color-danger); - transition: - width 180ms ease, - background-color 180ms ease; -} -.wire-next--strong-password[data-strength="fair"] .wire-next__strong-password-meter > span { - background: var(--wire-color-warning); -} -.wire-next--strong-password[data-strength="good"] .wire-next__strong-password-meter > span { - background: var(--wire-component-color); -} -.wire-next--strong-password[data-strength="strong"] .wire-next__strong-password-meter > span { - background: var(--wire-color-success); -} -.wire-next__strong-password-requirements { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: 0.45rem 1rem; - margin: 0; - padding: 0; - list-style: none; -} -.wire-next__strong-password-requirements li { - display: flex; - min-width: 0; - align-items: flex-start; - gap: 0.45rem; - color: var(--wire-color-muted); - font-size: 0.72em; - line-height: 1.45; -} -.wire-next__strong-password-requirements li > span { - position: relative; - width: 0.9rem; - height: 0.9rem; - flex: 0 0 auto; - margin-top: 0.08rem; - border: 1px solid currentColor; - border-radius: 50%; -} -.wire-next__strong-password-requirements li > span::after { - position: absolute; - top: 0.12rem; - left: 0.29rem; - width: 0.22rem; - height: 0.42rem; - border: solid var(--wire-color-surface); - border-width: 0 0.1rem 0.1rem 0; - content: ""; - opacity: 0; - transform: rotate(45deg); -} -.wire-next__strong-password-requirements li[data-met="true"] { - color: var(--wire-color-success); -} -.wire-next__strong-password-requirements li[data-met="true"] > span { - border-color: var(--wire-color-success); - background: var(--wire-color-success); -} -.wire-next__strong-password-requirements li[data-met="true"] > span::after { - opacity: 1; -} -.wire-next__strong-password-details > small { - color: var(--wire-color-muted); - font-size: 0.7em; - line-height: 1.5; -} -.wire-next__strong-password-popover { - position: absolute; - top: calc(100% + 0.7rem); - left: 0; - z-index: 30; - width: min(28rem, calc(100vw - 2rem)); - padding: 1rem; - border: 1px solid var(--wire-color-border); - border-radius: var(--wire-radius); - opacity: 0; - visibility: hidden; - background: var(--wire-color-surface); - box-shadow: var(--wire-shadow-2); - transform: translateY(-0.35rem); - transition: - opacity 140ms ease, - transform 140ms ease, - visibility 140ms ease; -} -.wire-next__strong-password-popover[data-open="true"] { - opacity: 1; - visibility: visible; - transform: translateY(0); -} -.wire-next__strong-password-popover-arrow { - position: absolute; - top: -0.38rem; - left: 1.25rem; - width: 0.7rem; - height: 0.7rem; - border-top: 1px solid var(--wire-color-border); - border-left: 1px solid var(--wire-color-border); - background: var(--wire-color-surface); - transform: rotate(45deg); -} -@media (max-width: 560px) { - .wire-next__strong-password-requirements { - grid-template-columns: 1fr; - } -} .wire-next--advanced-select { position: relative; display: grid; @@ -5956,10 +2238,6 @@ color: var(--wire-color-muted); font-size: 0.72em; } -.wire-next__select-search { - position: relative; - display: block; -} .wire-next__select-search input, .wire-next--advanced-select select { width: 100%; @@ -5971,9 +2249,6 @@ background: var(--wire-color-surface); font: inherit; } -.wire-next__select-search input { - padding-left: 2.25em; -} .wire-next__search-icon { position: absolute; top: 50%; @@ -5991,28 +2266,6 @@ .wire-next--advanced-select select[multiple] { min-height: 8rem; } -.wire-next__select-tags { - display: flex; - flex-wrap: wrap; - gap: 0.4rem; -} -.wire-next__select-tags > span { - display: inline-flex; - align-items: center; - gap: 0.35rem; - padding: 0.3rem 0.55rem; - border-radius: 999px; - color: var(--wire-component-color); - background: color-mix(in srgb, var(--wire-component-color) 12%, transparent); - font-size: 0.75em; - font-weight: 700; -} -.wire-next__select-tags img { - width: 1.25rem; - height: 1.25rem; - border-radius: 50%; - object-fit: cover; -} .wire-next__color-dot { width: 0.65rem; height: 0.65rem; @@ -6056,22 +2309,6 @@ height: 1rem; pointer-events: none; } -.wire-next__combobox-toggle { - position: absolute; - top: 50%; - right: 0; - z-index: 1; - display: grid; - width: 2.25em; - height: 100%; - padding: 0; - place-items: center; - border: 0; - color: var(--wire-color-muted); - background: transparent; - cursor: pointer; - transform: translateY(-50%); -} .wire-next__combobox-toggle .wire-next__select-chevron { position: static; transform: none; @@ -6098,29 +2335,12 @@ border-color var(--wire-motion-base) var(--wire-ease-standard), box-shadow var(--wire-motion-base) var(--wire-ease-standard); } -.wire-next--combobox .wire-next__combobox-input { - padding-right: 5.25em; - padding-left: 2.5em; - cursor: text; -} .wire-next--open .wire-next__select-trigger, .wire-next__select-trigger:focus-visible { border-color: var(--wire-component-color); outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--wire-component-color) 18%, transparent); } -.wire-next__select-value { - display: flex; - min-width: 0; - align-items: center; - gap: 0.55em; -} -.wire-next__placeholder { - overflow: hidden; - color: var(--wire-color-muted); - text-overflow: ellipsis; - white-space: nowrap; -} .wire-next__select-chevron { position: absolute; top: 50%;