fokus-styles 2.3.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (101) hide show
  1. package/CHANGELOG.md +36 -0
  2. package/dist/css/components.css +583 -83
  3. package/dist/css/components.css.map +1 -1
  4. package/dist/css/components.min.css +1 -1
  5. package/dist/css/components.min.css.map +1 -1
  6. package/dist/css/fokus-components.css +583 -83
  7. package/dist/css/fokus-components.css.map +1 -1
  8. package/dist/css/fokus-components.min.css +1 -1
  9. package/dist/css/fokus-components.min.css.map +1 -1
  10. package/dist/css/fokus-core.css +22 -0
  11. package/dist/css/fokus-core.css.map +1 -1
  12. package/dist/css/fokus-core.min.css +1 -1
  13. package/dist/css/fokus-core.min.css.map +1 -1
  14. package/dist/css/fokus-dark.css +10 -0
  15. package/dist/css/fokus-dark.css.map +1 -1
  16. package/dist/css/fokus-dark.min.css +1 -1
  17. package/dist/css/fokus-dark.min.css.map +1 -1
  18. package/dist/css/fokus-rtl.css +9166 -0
  19. package/dist/css/fokus-rtl.css.map +1 -0
  20. package/dist/css/fokus-rtl.min.css +2 -0
  21. package/dist/css/fokus-rtl.min.css.map +1 -0
  22. package/dist/css/fokus-utilities.css +158 -0
  23. package/dist/css/fokus-utilities.css.map +1 -1
  24. package/dist/css/fokus-utilities.min.css +1 -1
  25. package/dist/css/fokus-utilities.min.css.map +1 -1
  26. package/dist/css/fokus.css +1018 -258
  27. package/dist/css/fokus.css.map +1 -1
  28. package/dist/css/fokus.min.css +1 -1
  29. package/dist/css/fokus.min.css.map +1 -1
  30. package/dist/css/forms.css +322 -176
  31. package/dist/css/forms.css.map +1 -1
  32. package/dist/css/forms.min.css +1 -1
  33. package/dist/css/forms.min.css.map +1 -1
  34. package/dist/css/helpers.css +158 -0
  35. package/dist/css/helpers.css.map +1 -1
  36. package/dist/css/helpers.min.css +1 -1
  37. package/dist/css/helpers.min.css.map +1 -1
  38. package/dist/css/layout.css +22 -0
  39. package/dist/css/layout.css.map +1 -1
  40. package/dist/css/layout.min.css +1 -1
  41. package/dist/css/layout.min.css.map +1 -1
  42. package/dist/js/fokus.js +270 -25
  43. package/dist/js/fokus.js.map +2 -2
  44. package/dist/js/fokus.min.js +18 -18
  45. package/dist/js/fokus.min.js.map +3 -3
  46. package/docs/components/alert.md +69 -24
  47. package/docs/components/badge.md +23 -4
  48. package/docs/components/checkbox.md +16 -3
  49. package/docs/components/popover.md +20 -7
  50. package/docs/components/radio.md +11 -1
  51. package/docs/components/responsive.md +19 -0
  52. package/docs/components/switch.md +30 -8
  53. package/docs/components/tag.md +19 -4
  54. package/docs/components/toast.md +72 -59
  55. package/docs/components/tooltip.md +38 -2
  56. package/docs/guides/accessibility.md +7 -0
  57. package/docs/guides/rtl-and-system-preferences.md +28 -0
  58. package/docs/prompts/prompt-plan.md +4 -4
  59. package/docs/reference/accessibility-matrix.md +7 -7
  60. package/docs/reference/contrast-report.md +4 -0
  61. package/docs/reference/definitions.md +5 -1
  62. package/docs/reference/design-tokens.md +14 -0
  63. package/docs/reference/size-baseline.json +13 -13
  64. package/mockup/assets/example-theme.css +11 -0
  65. package/mockup/assets/showcase-contracts.js +6 -6
  66. package/mockup/examples/alerts.html +105 -31
  67. package/mockup/examples/badges-alerts.html +91 -59
  68. package/mockup/examples/check-radio-switch.html +575 -99
  69. package/mockup/examples/popover.html +81 -0
  70. package/mockup/examples/tag.html +97 -87
  71. package/mockup/examples/toast.html +113 -0
  72. package/mockup/examples/tooltip.html +68 -0
  73. package/mockup/forms.html +1 -1
  74. package/mockup/overlays-commands.html +2 -2
  75. package/package.json +2 -1
  76. package/packages/fokus-components/scss/components/_alerts.scss +128 -6
  77. package/packages/fokus-components/scss/components/_badges.scss +26 -10
  78. package/packages/fokus-components/scss/components/_index.scss +1 -0
  79. package/packages/fokus-components/scss/components/_popover.scss +131 -21
  80. package/packages/fokus-components/scss/components/_responsive.scss +23 -0
  81. package/packages/fokus-components/scss/components/_tag.scss +37 -14
  82. package/packages/fokus-components/scss/components/_toasts.scss +156 -11
  83. package/packages/fokus-components/scss/components/_tooltips.scss +70 -18
  84. package/packages/fokus-components/scss/forms/_check-radio-switch.scss +313 -215
  85. package/packages/fokus-components/scss/forms/_forms.scss +16 -0
  86. package/packages/fokus-core/scss/base/_accessibility.scss +14 -0
  87. package/packages/fokus-core/scss/tokens/_root.scss +11 -0
  88. package/packages/fokus-js/js/carousel.d.ts +4 -0
  89. package/packages/fokus-js/js/carousel.js +8 -0
  90. package/packages/fokus-js/js/core/positioning.js +18 -9
  91. package/packages/fokus-js/js/dropdown.d.ts +4 -0
  92. package/packages/fokus-js/js/dropdown.js +7 -0
  93. package/packages/fokus-js/js/popover.js +26 -1
  94. package/packages/fokus-js/js/tabs.d.ts +3 -0
  95. package/packages/fokus-js/js/tabs.js +5 -0
  96. package/packages/fokus-js/js/tag.js +17 -0
  97. package/packages/fokus-js/js/toast.js +77 -3
  98. package/packages/fokus-js/js/tooltip.d.ts +8 -1
  99. package/packages/fokus-js/js/tooltip.js +106 -13
  100. package/packages/fokus-utilities/scss/utilities/_api.scss +48 -0
  101. package/scss/entries/rtl-entry.scss +11 -0
package/mockup/examples/badges-alerts.html CHANGED
@@ -1,77 +1,109 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
1
+ <!doctype html>
2
+ <html lang="pt-BR">
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mockup - Badges & Alerts</title>
7
-
8
- <!-- STYLES IMPORT -->
6
+ <title>Fokus Styles — Badges</title>
9
7
  <link rel="stylesheet" href="../../dist/css/fonts.css">
10
8
  <link rel="stylesheet" href="../../dist/css/components.css">
11
9
  <link rel="stylesheet" href="../../dist/css/helpers.css">
12
- <style>
13
- .theme-panel {
14
- padding: 24px;
15
- }
16
-
17
- html[data-theme="dark"] .theme-panel {
18
- color: var(--fs-color-text);
19
- background-color: var(--fs-color-surface);
20
- }
21
-
22
- </style>
23
10
  <link rel="stylesheet" href="../assets/example-theme.css">
24
11
  <script src="../assets/example-theme.js"></script>
12
+ <style>
13
+ :root { --demo-max-width: 1080px; --demo-panel-bg: var(--fs-color-surface); --demo-soft-bg: var(--fs-color-subtle); --demo-panel-border: var(--fs-color-border); --demo-accent: var(--fs-color-primary); }
14
+ * { box-sizing: border-box; }
15
+ body { min-block-size: 100vh; margin: 0; color: var(--fs-color-text); background: var(--fs-color-bg-subtle); }
16
+ .demo-page { max-inline-size: var(--demo-max-width); margin-inline: auto; padding: clamp(20px, 4vw, 56px) clamp(16px, 4vw, 40px) 64px; }
17
+ .demo-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-block-end: 32px; }
18
+ .demo-eyebrow { margin: 0 0 8px; color: var(--demo-accent); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
19
+ html[data-fs-theme="dark"] .demo-eyebrow { color: var(--fs-color-text); }
20
+ .demo-title { max-inline-size: 760px; margin: 0; font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.05; letter-spacing: -.04em; }
21
+ .demo-lead { max-inline-size: 720px; margin: 16px 0 0; color: var(--fs-color-muted); font-size: 1.05rem; line-height: 1.6; }
22
+ .demo-badge-row, .demo-action-row, .demo-chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
23
+ .demo-badge-row { margin-block-start: 20px; }
24
+ .demo-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-block: 24px; padding: 12px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-md); background: var(--demo-panel-bg); }
25
+ .demo-section { margin-block-start: 32px; }
26
+ .demo-section-heading { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-block-end: 14px; }
27
+ .demo-section-heading h2, .demo-card h3, .demo-reference h2, .demo-playground h3 { margin: 0; }
28
+ .demo-section-heading p, .demo-card p, .demo-reference p, .demo-status p { color: var(--fs-color-muted); }
29
+ .demo-section-heading p { max-inline-size: 620px; margin: 0; font-size: .9rem; }
30
+ .demo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
31
+ .demo-card, .demo-playground, .demo-reference { border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-md); background: var(--demo-panel-bg); box-shadow: var(--fs-shadow-sm); }
32
+ .demo-card { min-block-size: 190px; padding: 20px; }
33
+ .demo-card p { margin: 10px 0 20px; line-height: 1.55; }
34
+ .demo-card-icon { display: grid; inline-size: 36px; block-size: 36px; place-items: center; margin-block-end: 16px; border-radius: var(--fs-radius-sm); color: var(--fs-color-primary); background: var(--demo-soft-bg); font-size: 1.2rem; font-weight: 700; }
35
+ .demo-playground { padding: clamp(18px, 3vw, 28px); }
36
+ .demo-playground-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr); gap: 28px; }
37
+ .demo-demo-group + .demo-demo-group { margin-block-start: 28px; }
38
+ .demo-demo-group h3 { font-size: 1rem; }
39
+ .demo-demo-group > p { margin: 6px 0 14px; color: var(--fs-color-muted); font-size: .9rem; }
40
+ .demo-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 16px; border: var(--fs-border-width) solid var(--demo-panel-border); border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
41
+ .demo-sample + .demo-sample { margin-block-start: 10px; }
42
+ .demo-sample-label { flex: 1 1 150px; color: var(--fs-color-muted); font-size: .82rem; }
43
+ .demo-status { display: flex; flex-direction: column; gap: 16px; padding: 20px; border-radius: var(--fs-radius-sm); background: var(--demo-soft-bg); }
44
+ .demo-status h3 { margin: 0; }
45
+ .demo-status p { margin: 8px 0 0; font-size: .9rem; line-height: 1.5; }
46
+ .demo-status-output { margin: 0; padding: 12px; border-inline-start: 3px solid var(--demo-accent); color: var(--fs-color-text) !important; background: var(--demo-panel-bg); font-size: .85rem !important; }
47
+ .demo-code { margin: 0; padding: 14px; overflow: auto; border-radius: var(--fs-radius-sm); color: var(--fs-color-text); background: var(--demo-panel-bg); font: .76rem/1.6 var(--fs-font-mono, ui-monospace, monospace); white-space: pre-wrap; }
48
+ .demo-reference { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: clamp(18px, 3vw, 28px); }
49
+ .demo-reference p { margin: 8px 0 16px; line-height: 1.5; }
50
+ .demo-reference ul { margin: 0; padding-inline-start: 20px; color: var(--fs-color-muted); line-height: 1.8; }
51
+ .demo-reference code { color: var(--fs-color-primary); }
52
+ .demo-note { margin-block-start: 14px !important; font-size: .85rem; }
53
+ @media (max-width: 760px) { .demo-hero, .demo-playground-grid, .demo-reference { grid-template-columns: 1fr; } .demo-hero { align-items: start; } .demo-grid { grid-template-columns: 1fr; } }
54
+ </style>
25
55
  </head>
26
56
  <body>
57
+ <main class="demo-page">
58
+ <header class="demo-hero">
59
+ <div>
60
+ <p class="demo-eyebrow">Fokus Styles · componente essencial</p>
61
+ <h1 class="demo-title">Badges que comunicam estados breves com clareza.</h1>
62
+ <p class="demo-lead">Use rótulos compactos para status, contagens e classificações. Esta página demonstra variantes visuais, tokens de densidade e composição com alertas sem depender apenas de cor.</p>
63
+ <div class="demo-badge-row" aria-label="Exemplos rápidos"><span class="fs-badge fs-badge-primary">Em análise</span><span class="fs-badge fs-badge-soft-success fs-badge-dot">Disponível</span><span class="fs-badge fs-badge-count fs-badge-danger" aria-label="3 notificações não lidas">3</span></div>
64
+ </div>
65
+ <span class="fs-badge fs-badge-outline-primary">CSS-only</span>
66
+ </header>
67
+ <nav class="demo-toolbar" aria-label="Controles da demonstração"><div class="demo-action-row"><button class="fs-btn fs-btn-primary fs-btn-sm" type="button" id="reset-demo">Restaurar demonstração</button><button class="fs-btn fs-btn-outline-primary fs-btn-sm" type="button" id="toggle-direction" aria-pressed="false">Testar RTL</button></div><span class="fs-form-text">Use as seções abaixo para comparar variantes, tamanhos e combinações.</span></nav>
27
68
 
28
- <div class="theme-panel">
29
- <h2 class="fs-u-fs-lg fs-u-fw-medium">Badges e alertas</h2>
30
-
31
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Badges — neutro e sólidos</p>
32
- <span class="fs-badge fs-u-mr-2">Badge</span>
33
- <span class="fs-badge fs-badge-primary fs-u-mr-2">Primary</span>
34
- <span class="fs-badge fs-badge-success fs-u-mr-2">Success</span>
35
- <span class="fs-badge fs-badge-warning fs-u-mr-2">Warning</span>
36
- <span class="fs-badge fs-badge-danger fs-u-mr-2">Danger</span>
37
- <span class="fs-badge fs-badge-info">Info</span>
38
-
39
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Badges — soft e outline</p>
40
- <span class="fs-badge fs-badge-soft-primary fs-u-mr-2">Em revisão</span>
41
- <span class="fs-badge fs-badge-soft-success fs-badge-dot fs-u-mr-2">Disponível</span>
42
- <span class="fs-badge fs-badge-outline-warning fs-u-mr-2">Beta</span>
43
- <span class="fs-badge fs-badge-outline-danger">Restrito</span>
44
-
45
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Badges — status e contagem</p>
46
- <span class="fs-badge fs-badge-soft-info fs-badge-dot fs-u-mr-2">Sincronizando</span>
47
- <span class="fs-badge fs-badge-count fs-badge-danger fs-u-mr-2" aria-label="12 notificações não lidas">12</span>
48
- <span class="fs-badge fs-badge-count fs-badge-primary">99+</span>
49
-
50
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Badges — rótulo e valor</p>
51
- <span class="fs-badge-split fs-badge-split-primary fs-u-mr-2">
52
- <span class="fs-badge-split-label">New</span>
53
- <span class="fs-badge-split-value">0.7.1</span>
54
- </span>
55
- <span class="fs-badge-split fs-badge-split-success fs-u-mr-2">
56
- <span class="fs-badge-split-label">Deploy</span>
57
- <span class="fs-badge-split-value">Pronto</span>
58
- </span>
59
- <span class="fs-badge-split fs-badge-split-warning fs-badge-sm">
60
- <span class="fs-badge-split-label">API</span>
61
- <span class="fs-badge-split-value">Beta</span>
62
- </span>
69
+ <section class="demo-section" aria-labelledby="why-title">
70
+ <div class="demo-section-heading"><div><h2 id="why-title">Escolha o padrão certo</h2><p>Badge informa algo curto que já tem contexto na tela; Alert permanece para mensagens que precisam ser lidas e compreendidas.</p></div></div>
71
+ <div class="demo-grid">
72
+ <article class="demo-card"><span class="demo-card-icon" aria-hidden="true">#</span><h3>Status e classificação</h3><p>Use uma variante semântica ao lado do item que ela qualifica, como pedido, plano ou usuário.</p><span class="fs-badge fs-badge-success">Aprovado</span></article>
73
+ <article class="demo-card"><span class="demo-card-icon" aria-hidden="true">1</span><h3>Contagem compacta</h3><p>Para números curtos, use contagem tabular; a forma circular é opcional e indicada para um único dígito.</p><span class="fs-badge fs-badge-count fs-badge-danger fs-u-mr-2" aria-label="12 notificações não lidas">12</span><span class="fs-badge fs-badge-count fs-badge-count-circle fs-badge-primary" aria-label="1 tarefa pendente">1</span></article>
74
+ <article class="demo-card"><span class="demo-card-icon" aria-hidden="true">!</span><h3>Mensagem contextual</h3><p>Quando há explicação ou próxima ação, complemente o badge com um Alert.</p><div class="fs-alert fs-alert-warning" role="status">Atenção: revise o cadastro antes de publicar.</div></article>
75
+ </div>
76
+ </section>
63
77
 
64
- <p class="fs-u-fs-sm fs-u-fw-medium fs-u-mt-3 fs-u-mb-1">Badges - tamanhos</p>
65
- <span class="fs-badge fs-badge-primary fs-badge-sm fs-u-mr-2">Small</span>
66
- <span class="fs-badge fs-badge-primary fs-u-mr-2">Default</span>
67
- <span class="fs-badge fs-badge-primary fs-badge-lg">Large</span>
78
+ <section class="demo-section" aria-labelledby="playground-title">
79
+ <div class="demo-section-heading"><div><h2 id="playground-title">Laboratório de variantes</h2><p>Compare cor, peso visual, indicador, contagem, split e tamanho usando a mesma marcação pública documentada.</p></div><span class="fs-badge fs-badge-outline-success">ao vivo</span></div>
80
+ <div class="demo-playground"><div class="demo-playground-grid"><div>
81
+ <div class="demo-demo-group"><h3>Pesos visuais</h3><p>Variantes sólidas destacam; soft e outline reduzem o peso para metadados e estados recorrentes.</p><div class="demo-sample"><span class="demo-sample-label">Neutro e sólido</span><span class="fs-badge">Padrão</span><span class="fs-badge fs-badge-primary">Primary</span><span class="fs-badge fs-badge-success">Success</span><span class="fs-badge fs-badge-warning">Warning</span><span class="fs-badge fs-badge-danger">Danger</span><span class="fs-badge fs-badge-info">Info</span></div><div class="demo-sample"><span class="demo-sample-label">Soft e outline</span><span class="fs-badge fs-badge-soft-primary">Em revisão</span><span class="fs-badge fs-badge-soft-success fs-badge-dot">Disponível</span><span class="fs-badge fs-badge-outline-warning">Beta</span><span class="fs-badge fs-badge-outline-danger">Restrito</span></div></div>
82
+ <div class="demo-demo-group"><h3>Contagem e indicadores</h3><p>O texto continua carregando o significado; a forma circular é apenas uma compactação visual.</p><div class="demo-sample"><span class="demo-sample-label">Status e contagem</span><span class="fs-badge fs-badge-soft-info fs-badge-dot">Sincronizando</span><span class="fs-badge fs-badge-count fs-badge-danger" aria-label="12 notificações não lidas">12</span><span class="fs-badge fs-badge-count fs-badge-primary">99+</span><span class="fs-badge fs-badge-count fs-badge-count-circle fs-badge-success" aria-label="1 notificação não lida">1</span></div></div>
83
+ <div class="demo-demo-group"><h3>Rótulo e valor</h3><p>O split mantém os segmentos conectados e aceita o mesmo raio pequeno do sistema.</p><div class="demo-sample"><span class="demo-sample-label">Split</span><span class="fs-badge-split fs-badge-split-primary"><span class="fs-badge-split-label">New</span><span class="fs-badge-split-value">0.7.1</span></span><span class="fs-badge-split fs-badge-split-success"><span class="fs-badge-split-label">Deploy</span><span class="fs-badge-split-value">Pronto</span></span><span class="fs-badge-split fs-badge-split-warning fs-badge-sm"><span class="fs-badge-split-label">API</span><span class="fs-badge-split-value">Beta</span></span></div></div>
84
+ </div><aside class="demo-status" aria-labelledby="status-title"><div><h3 id="status-title">Contrato do componente</h3><p>Badge é estático, não entra no Tab e não substitui botão, filtro ou mensagem de erro.</p></div><p class="demo-status-output" id="demo-status" role="status" aria-live="polite">Demonstração pronta.</p><pre class="demo-code"><code>.fs-badge
85
+ .fs-badge-{color}
86
+ .fs-badge-soft-{color}
87
+ .fs-badge-outline-{color}
88
+ .fs-badge-dot
89
+ .fs-badge-count
90
+ .fs-badge-count-circle
91
+ .fs-badge-split
68
92
 
69
- </div>
93
+ /* tokens locais */
94
+ --fs-badge-radius
95
+ --fs-badge-padding-inline</code></pre></aside></div></div>
96
+ </section>
70
97
 
98
+ <section class="demo-section" aria-labelledby="sizes-title"><div class="demo-section-heading"><div><h2 id="sizes-title">Tamanhos, tokens e temas</h2><p>As classes de tamanho preservam a mesma semântica; os tokens locais permitem ajustes pontuais sem CSS paralelo.</p></div></div><div class="demo-reference"><div><h2>Escala visual</h2><p>Use o tamanho pequeno em tabelas e o grande apenas quando o badge precisar acompanhar uma hierarquia maior.</p><div class="demo-chip-row"><span class="fs-badge fs-badge-primary fs-badge-sm">Small</span><span class="fs-badge fs-badge-primary">Default</span><span class="fs-badge fs-badge-primary fs-badge-lg">Large</span></div><p class="demo-note">O raio padrão usa <code>--fs-radius-sm</code>; o count circular é opt-in para valores curtos.</p></div><div><h2>Contratos preservados</h2><ul><li>Texto e contexto não dependem apenas de cor.</li><li>Badges estáticos não recebem foco de teclado.</li><li>Contagens significativas podem receber <code>aria-label</code>.</li><li>Soft e outline devem ser conferidos em claro e escuro.</li><li>RTL usa propriedades lógicas sem duplicar estilos.</li></ul></div></div></section>
99
+ </main>
71
100
  <script>
72
- if (new URLSearchParams(window.location.search).get("theme") === "dark") {
73
- document.documentElement.setAttribute("data-theme", "dark");
74
- }
101
+ const resetButton = document.getElementById("reset-demo");
102
+ const directionButton = document.getElementById("toggle-direction");
103
+ const page = document.querySelector(".demo-page");
104
+ const status = document.getElementById("demo-status");
105
+ resetButton.addEventListener("click", () => { page.setAttribute("dir", "ltr"); directionButton.setAttribute("aria-pressed", "false"); directionButton.textContent = "Testar RTL"; status.textContent = "Demonstração restaurada em LTR."; });
106
+ directionButton.addEventListener("click", () => { const rtl = page.getAttribute("dir") !== "rtl"; page.setAttribute("dir", rtl ? "rtl" : "ltr"); directionButton.setAttribute("aria-pressed", String(rtl)); directionButton.textContent = rtl ? "Voltar para LTR" : "Testar RTL"; status.textContent = rtl ? "Direção RTL ativada." : "Direção LTR ativada."; });
75
107
  </script>
76
108
  </body>
77
109
  </html>