New version. Add Material UI implementation with theme customization, about dialog, and news system

2025-07-12 07:24:04 +02:00 · 2025-05-20 21:38:31 +02:00 · 2025-05-20 21:38:31 +02:00 · 1d58835a65
commit 1d58835a65
parent 5bc9c9bdb1
190 changed files with 12296 additions and 54 deletions
--- a/components-wiki/focus-ring.md
+++ b/components-wiki/focus-ring.md
@ -0,0 +1,174 @@
+# Focus ring
+
+<!--*
+# Document freshness: For more information, see go/fresh-source.
+freshness: { owner: 'lizmitchell' reviewed: '2025-05-20' }
+tag: 'docType:reference'
+*-->
+
+<!-- go/md-focus-ring -->
+
+<!-- [TOC] -->
+
+Focus rings are accessible outlines for components to show keyboard focus.
+
+Focus rings follow the same heuristics as
+[`:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)<!-- {.external} -->
+to determine when they are visible.
+
+![Three elements with a focus ring that moves between them.](images/focus/hero.gif "A focus ring moving across elements.")
+
+*   [API Documentation](#api)
+*   [Source code](https://github.com/material-components/material-web/tree/main/focus)
+    <!-- {.external} -->
+
+## Usage
+
+Focus rings display on keyboard navigation. They may be attached to a control in
+one of three ways.
+
+![An element with a focus ring.](images/focus/usage.gif "A focus ring.")
+
+1.  Attached to the parent element
+
+    ```html
+    <button style="position: relative">
+      <md-focus-ring style="--md-focus-ring-shape: 8px"></md-focus-ring>
+    </button>
+    ```
+
+1.  Attached to a referenced element
+
+    ```html
+    <div style="position: relative">
+      <md-focus-ring for="control" style="--md-focus-ring-shape: 8px"></md-focus-ring>
+      <input id="control">
+    </div>
+    ```
+
+1.  Attached imperatively
+
+    ```html
+    <div style="position: relative">
+      <md-focus-ring id="ring" style="--md-focus-ring-shape: 8px"></md-focus-ring>
+      <button id="ring-control"></button>
+    </div>
+    <script>
+      const focusRing = document.querySelector('#ring');
+      const control = document.querySelector('#ring-control');
+      focusRing.attach(control);
+    </script>
+    ```
+
+> Note: focus rings must be placed within a `position: relative` container.
+
+### Inward
+
+Focus rings can be changed to animate inwards by adding an `inward` attribute.
+This is useful for components like list items.
+
+![An element with a focus ring that animates inward.](images/focus/usage-inward.gif "A focus ring animating inward.")
+
+```html
+<button style="position: relative">
+  <md-focus-ring inward style="--md-focus-ring-shape: 8px"></md-focus-ring>
+</button>
+```
+
+### Animation
+
+The focus ring animation may be customized or disabled using CSS custom
+properties.
+
+![An element with a focus ring that does not animate.](images/focus/usage-animation.gif "A focus ring with disabled animations.")
+
+```html
+<style>
+  md-focus-ring {
+    --md-focus-ring-duration: 0s; /* disabled animation */
+  }
+</style>
+```
+
+## Accessibility
+
+Focus rings are visual components and do not have assistive technology
+requirements.
+
+## Theming
+
+Focus rings supports [Material theming](../theming/README.md) and can be
+customized in terms of color and shape.
+
+### Tokens
+
+Token                   | Default value
+----------------------- | --------------------------
+`--md-focus-ring-color` | `--md-sys-color-secondary`
+`--md-focus-ring-shape` | `--md-sys-shape-corner-full`
+`--md-focus-ring-width` | `3px`
+
+*   [All tokens](https://github.com/material-components/material-web/blob/main/tokens/_md-comp-focus-ring.scss)
+    <!-- {.external} -->
+
+### Example
+
+![Image of a focus ring with a different theme applied](images/focus/theming.gif "Focus ring theming example.")
+
+```html
+<style>
+md-focus-ring {
+  --md-focus-ring-shape: 0px;
+  --md-focus-ring-width: 2px;
+  --md-focus-ring-active-width: 4px;
+  --md-sys-color-secondary: #4A6363;
+}
+</style>
+
+<button>
+  <md-focus-ring></md-focus-ring>
+</button>
+```
+
+<!-- auto-generated API docs start -->
+
+## API
+
+
+### MdFocusRing <code>&lt;md-focus-ring&gt;</code>
+
+#### Properties
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Property | Attribute | Type | Default | Description |
+| --- | --- | --- | --- | --- |
+| `visible` | `visible` | `boolean` | `false` | Makes the focus ring visible. |
+| `inward` | `inward` | `boolean` | `false` | Makes the focus ring animate inwards instead of outwards. |
+| `htmlFor` |  | `string` | `undefined` |  |
+| `control` |  | `HTMLElement` | `undefined` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Methods
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Method | Parameters | Returns | Description |
+| --- | --- | --- | --- |
+| `attach` | `control` | `void` |  |
+| `detach` | _None_ | `void` |  |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+#### Events
+
+<!-- mdformat off(autogenerated might break rendering in catalog) -->
+
+| Event | Type | [Bubbles](https://developer.mozilla.org/en-US/docs/Web/API/Event/bubbles) | [Composed](https://developer.mozilla.org/en-US/docs/Web/API/Event/composed) | Description |
+| --- | --- | --- | --- | --- |
+| `visibility-changed` | `Event` | No | No | Fired whenever `visible` changes. |
+
+<!-- mdformat on(autogenerated might break rendering in catalog) -->
+
+<!-- auto-generated API docs end -->