4227 shoelace to webawesome

changes/4227.feature.md

@@ -0,0 +1 @@
+The web backend now uses WebAwesome instead of Shoelace to provide web components.

docs/en/how-to/contribute/what/implement-feature.md

@@ -10,7 +10,7 @@ Don't worry if you don't have an idea for a new feature, there are [plenty of fe
 
 ### Implement a platform native widget
 
-If the core library already specifies an interface for a widget, but the widget isn't implemented on your platform of choice, implement that interface. The [API reference table](/reference/api/index.md) table can show you the widgets that are missing on various platforms. You can also look for log messages in a running app (or the direct `factory.not_implemented()` function calls that produce those log messages). At present, Qt, the Web and Textual backends have the most missing widgets. If you have web skills, or would like to learn more about [PyScript](https://pyscript.net) and [Shoelace](https://shoelace.style), the web backend could be a good place to contribute; if you'd like to learn more about terminal applications or the [Textual](https://textual.textualize.io) API, contributing to the Textual backend could be a good place for you to contribute. If you’re interested in desktop GUI development or want to deepen your understanding of the Qt framework, contributing to the [Qt](https://www.qt.io/product/framework) backend is a great option.
+If the core library already specifies an interface for a widget, but the widget isn't implemented on your platform of choice, implement that interface. The [API reference table](/reference/api/index.md) table can show you the widgets that are missing on various platforms. You can also look for log messages in a running app (or the direct `factory.not_implemented()` function calls that produce those log messages). At present, Qt, the Web and Textual backends have the most missing widgets. If you have web skills, or would like to learn more about [PyScript](https://pyscript.net) and [WebAwesome](https://www.webawesome.com), the web backend could be a good place to contribute; if you'd like to learn more about terminal applications or the [Textual](https://textual.textualize.io) API, contributing to the Textual backend could be a good place for you to contribute. If you’re interested in desktop GUI development or want to deepen your understanding of the Qt framework, contributing to the [Qt](https://www.qt.io/product/framework) backend is a great option.
 
 Alternatively, if there's a widget that doesn't exist, propose an interface design, and implement it for at least one platform. You may find [this presentation by BeeWare emeritus team member Dan Yeaw](https://www.youtube.com/watch?v=sWt_sEZUiY8) helpful. This talk gives an architectural overview of Toga, as well as providing a guide to the process of adding new widgets.
 

docs/en/reference/platforms/web.md

@@ -9,7 +9,7 @@ The Web backend is currently proof-of-concept only. Most widgets have not been i
 
 ## Prerequisites
 
-`toga-web` will run in any modern browser. It requires [PyScript](https://pyscript.net) 2023.05.01 or newer, and [Shoelace v2.3](https://shoelace.style).
+`toga-web` will run in any modern browser. It requires [PyScript](https://pyscript.net) 2023.05.01 or newer, and [WebAwesome v3.3](https://www.webawesome.com).
 
 ## Installation
 
@@ -19,6 +19,6 @@ The recommended approach for deploying `toga-web` is to use [Briefcase](https://
 
 ## Implementation details
 
-The `toga-web` backend is implemented using [Shoelace web components](https://shoelace.style).
+The `toga-web` backend is implemented using [WebAwesome web components](https://www.webawesome.com).
 
 The DOM is accessed using [PyScript](https://pyscript.net).

docs/spelling_wordlist

@@ -230,6 +230,7 @@ viewport
 watchOS
 Wayland
 WebKit
+WebAwesome
 WebView
 WebViews
 WGS

examples/activityindicator/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/beeliza/pyproject.toml

@@ -63,4 +63,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/box/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/button/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/canvas/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/colors/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/command/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/date_and_time/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/detailedlist/pyproject.toml

@@ -63,4 +63,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/dialogs/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/divider/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/examples_overview/pyproject.toml

@@ -63,4 +63,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/focus/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/font/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/font_size/pyproject.toml

@@ -61,4 +61,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/handlers/pyproject.toml

@@ -63,4 +63,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/imageview/pyproject.toml

@@ -67,4 +67,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/layout/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/mapview/pyproject.toml

@@ -63,4 +63,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/multilinetextinput/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/numberinput/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/optioncontainer/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/passwordinput/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     '../../web',
 ]
-style_framework = "Shoelace v2.3"

examples/positron-django/pyproject.toml

@@ -64,4 +64,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/positron-static/pyproject.toml

@@ -63,4 +63,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/progressbar/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/resize/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/scrollcontainer/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/selection/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/simpleapp/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/slider/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/splitcontainer/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/switch_demo/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/table/pyproject.toml

@@ -61,4 +61,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/table_columns/pyproject.toml

@@ -65,4 +65,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/table_source/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/textinput/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/tree/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/tree_source/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/tutorial0/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/tutorial0/sandbox.html

@@ -11,9 +11,9 @@
         <link rel="stylesheet" href="https://pyscript.net/latest/pyscript.css">
 
 
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/themes/light.css">
-        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/themes/dark.css">
-        <script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/shoelace-autoloader.js"></script>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.3.1/dist/styles/themes/shoelace.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.3.1/dist/styles/webawesome.css">
+        <script type="module" src="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.3.1/dist/webawesome.loader.js"></script>
 <style>
 * {
     box-sizing: border-box;
@@ -79,38 +79,32 @@
 </style>
     </head>
     <body id="app-placeholder">
-        <header class="toga sl-theme-dark">
+        <header class="toga">
             <a class="brand"><img src="static/logo-32.png" alt="First App logo" loading="lazy"></a>
             <nav class="menubar">
                 <span slot="trigger" class="app">First App</span>
-                <sl-dropdown>
+                <wa-dropdown>
                     <span slot="trigger" class="menu">File</span>
-                    <sl-menu class="sl-theme-light">
-                        <sl-menu-item>About</sl-menu-item>
-                        <sl-menu-item>Preferences</sl-menu-item>
-                    </sl-menu>
-                </sl-dropdown>
-                <sl-dropdown>
+                    <wa-dropdown-item>About</wa-dropdown-item>
+                    <wa-dropdown-item>Preferences</wa-dropdown-item>
+                </wa-dropdown>
+                <wa-dropdown>
                     <span slot="trigger" class="menu">Command</span>
-                    <sl-menu class="sl-theme-light">
-                        <sl-menu-item>About</sl-menu-item>
-                        <sl-menu-item>Preferences</sl-menu-item>
-                    </sl-menu>
-                </sl-dropdown>
+                    <wa-dropdown-item>About</wa-dropdown-item>
+                    <wa-dropdown-item>Preferences</wa-dropdown-item>
+                </wa-dropdown>
             </nav>
             <nav class="menubar">
-                <sl-dropdown>
+                <wa-dropdown>
                     <span slot="trigger" class="menu">Help</span>
-                    <sl-menu class="sl-theme-light">
-                        <sl-menu-item>About</sl-menu-item>
-                        <sl-menu-item>Preferences</sl-menu-item>
-                    </sl-menu>
-                </sl-dropdown>
+                    <wa-dropdown-item>About</wa-dropdown-item>
+                    <wa-dropdown-item>Preferences</wa-dropdown-item>
+                </wa-dropdown>
             </nav>
         </header>
         <main class="toga window container">
             <div id="toga_19512792" class="box container" style="flex-direction: row; flex: 0 0 0px;">
-                <sl-button id="toga_18434560" class="button" style="flex-direction: row; flex: 1 0 0px; margin:50px;">Hello world</sl-button>
+                <wa-button id="toga_18434560" class="button" style="flex-direction: row; flex: 1 0 0px; margin:50px;">Hello world</wa-button>
             </div>
         </main>
     </body>

examples/tutorial1/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/tutorial2/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/tutorial3/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/tutorial4/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/webview/pyproject.toml

@@ -66,4 +66,3 @@ chaquopy.defaultConfig.staticProxy("toga_android.widgets.internal.webview")
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

examples/window/pyproject.toml

@@ -62,4 +62,3 @@ build_gradle_dependencies = [
 requires = [
     "../../web",
 ]
-style_framework = "Shoelace v2.3"

web/README.md

@@ -4,7 +4,7 @@
 [![BSD-3-Clause License](https://img.shields.io/pypi/l/toga-web.svg)](https://github.com/beeware/toga-web/blob/main/LICENSE)
 [![Project status](https://img.shields.io/pypi/status/toga-web.svg)](https://pypi.python.org/pypi/toga-web)
 
-A backend for the [Toga widget toolkit](https://beeware.org/toga) on web platforms. It uses [Shoelace](https://shoelace.style) to provide web components.
+A backend for the [Toga widget toolkit](https://beeware.org/toga) on web platforms. It uses [WebAwesome](https://www.webawesome.com) to provide web components.
 
 This package isn't much use by itself; it needs to be combined with [the core Toga library](https://pypi.python.org/pypi/toga-core).
 

web/src/toga_web/app.py

@@ -95,10 +95,10 @@ def show_about_dialog(self):
             copyright = f"\n\nCopyright © {self.interface.author}"
 
         close_button = create_element(
-            "sl-button", slot="footer", variant="primary", content="Ok"
+            "wa-button", slot="footer", variant="brand", content="Ok"
         )
         about_dialog = create_element(
-            "sl-dialog",
+            "wa-dialog",
             id="toga-about-dialog",
             label="About",
             children=[
@@ -111,23 +111,23 @@ def show_about_dialog(self):
         # Create a button handler to capture the close,
         # and destroy the dialog
         def dialog_close(event):
-            about_dialog.hide()
+            about_dialog.open = False
             self.native.removeChild(about_dialog)
 
         close_button.onclick = dialog_close
 
         # Add the dialog to the DOM.
         self.native.appendChild(about_dialog)
 
-        # If this is the first time a dialog is being shown, the Shoelace
+        # If this is the first time a dialog is being shown, the WebAwesome
         # autoloader needs to construct the Dialog custom element. We can't
         # display the dialog until that element has been fully loaded and
-        # constructed. Only show the dialog when the promise of <sl-dialog>
+        # constructed. Only show the dialog when the promise of <wa-dialog>
         # element construction has been fulfilled.
         def show_dialog(promise):
-            about_dialog.show()
+            about_dialog.open = True
 
-        js.customElements.whenDefined("sl-dialog").then(show_dialog)
+        js.customElements.whenDefined("wa-dialog").then(show_dialog)
 
     ######################################################################
     # Cursor control

web/src/toga_web/deploy/inserts/index.html~head

@@ -1,3 +1,4 @@
-<!-- Shoelace -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/themes/light.css" />
-<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.3.0/dist/shoelace.js"></script>
+<!-- WebAwesome -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.3.1/dist/styles/themes/shoelace.css" />
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.3.1/dist/styles/webawesome.css" />
+<script type="module" src="https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3.3.1/dist/webawesome.loader.js"></script>