chore: release feature-7.6 docs

chore: release feature-7.6 docs

docs/api/input.md

@@ -148,6 +148,22 @@ Please submit bug reports with Maskito to the [Maskito Github repository](https:
 
 :::
 
+## Start and End Slots (experimental)
+
+The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the input.
+
+Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
+
+:::note
+In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+:::
+
+import StartEndSlots from '@site/static/usage/v7/input/start-end-slots/index.md';
+
+<StartEndSlots />
+
 ## Theming
 
 ### Colors

docs/api/radio.md

@@ -36,6 +36,14 @@ import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md
 
 <LabelPlacement />
 
+## Object Value References
+
+By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
+
+import UsingComparewith from '@site/static/usage/v7/radio/using-comparewith/index.md';
+
+<UsingComparewith />
+
 ## Alignment
 
 Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.

docs/api/select.md

@@ -119,7 +119,7 @@ import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/r
 
 When using objects for select values, it is possible for the identities of these objects to change if they are coming from a server or database, while the selected value's identity remains the same. For example, this can occur when an existing record with the desired object value is loaded into the select, but the newly retrieved select options now have different identities. This will result in the select appearing to have no value at all, even though the original selection in still intact.
 
-By default, the select uses object equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
+By default, the select uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
 
 ### Using compareWith
 
@@ -173,6 +173,20 @@ import InterfaceOptionsExample from '@site/static/usage/v7/select/customization/
 
 <InterfaceOptionsExample />
 
+## Start and End Slots
+
+The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the select. If the slot content is clicked, the select will not open.
+
+:::note
+In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+:::
+
+import StartEndSlots from '@site/static/usage/v7/select/start-end-slots/index.md';
+
+<StartEndSlots />
+
 ## Customization
 
 There are two units that make up the Select component and each need to be styled separately. The `ion-select` element is represented on the view by the selected value(s), or placeholder if there is none, and dropdown icon. The interface, which is defined in the [Interfaces](#interfaces) section above, is the dialog that opens when clicking on the `ion-select`. The interface contains all of the options defined by adding `ion-select-option` elements. The following sections will go over the differences between styling these.

docs/api/textarea.md

@@ -109,6 +109,22 @@ import ClearOnEditPlayground from '@site/static/usage/v7/textarea/clear-on-edit/
 
 <ClearOnEditPlayground />
 
+## Start and End Slots (experimental)
+
+The `start` and `end` slots can be used to place icons, buttons, or prefix/suffix text on either side of the textarea.
+
+Note that this feature is considered experimental because it relies on a simulated version of [Web Component slots](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_templates_and_slots). As a result, the simulated behavior may not exactly match the native slot behavior.
+
+:::note
+In most cases, [Icon](./icon.md) components placed in these slots should have `aria-hidden="true"`. See the [Icon accessibility docs](https://ionicframework.com/docs/api/icon#accessibility) for more information.
+
+If slot content is meant to be interacted with, it should be wrapped in an interactive element such as a [Button](./button.md). This ensures that the content can be tabbed to.
+:::
+
+import StartEndSlots from '@site/static/usage/v7/textarea/start-end-slots/index.md';
+
+<StartEndSlots />
+
 ## Migrating from Legacy Textarea Syntax
 
 A simpler textarea syntax was introduced in Ionic 7.0. This new syntax reduces the boilerplate required to setup an textarea, resolves accessibility issues, and improves the developer experience.

docs/api/toast.md

@@ -72,6 +72,14 @@ import PositionAnchor from '@site/static/usage/v7/toast/position-anchor/index.md
 
 <PositionAnchor />
 
+## Swipe to Dismiss
+
+Toasts can be swiped to dismiss by using the `swipeGesture` property. This feature is position-aware, meaning the direction that users need to swipe will change based on the value of the `position` property. Additionally, the distance users need to swipe may be impacted by the `positionAnchor` property.
+
+import SwipeGesture from '@site/static/usage/v7/toast/swipe-gesture/index.md';
+
+<SwipeGesture />
+
 ## Layout
 
 Button containers within the toast can be displayed either on the same line as the message or stacked on separate lines using the `layout` property. The stacked layout should be used with buttons that have long text values. Additionally, buttons in a stacked toast layout can use a `side` value of either `start` or `end`, but not both.

static/usage/v7/input/start-end-slots/angular.md

@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input labelPlacement="stacked" label="Email" placeholder="email@domain.com">
+      <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
+      <ion-button fill="clear" slot="end" aria-label="Show/hide">
+        <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
+      </ion-button>
+    </ion-input>
+  </ion-item>
+</ion-list>
+```

static/usage/v7/input/start-end-slots/demo.html

@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Input</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-item>
+              <ion-input label-placement="stacked" label="Email" placeholder="email@domain.com">
+                <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
+                <ion-button fill="clear" slot="end" aria-label="Show/hide">
+                  <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
+                </ion-button>
+              </ion-input>
+            </ion-item>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+  </body>
+</html>

static/usage/v7/input/start-end-slots/index.md

@@ -0,0 +1,17 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+import angular from './angular.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular,
+  }}
+  src="usage/v7/input/start-end-slots/demo.html"
+/>

static/usage/v7/input/start-end-slots/javascript.md

@@ -0,0 +1,12 @@
+```html
+<ion-list>
+  <ion-item>
+    <ion-input label-placement="stacked" label="Email" placeholder="email@domain.com">
+      <ion-icon slot="start" name="lock-closed" aria-hidden="true"></ion-icon>
+      <ion-button fill="clear" slot="end" aria-label="Show/hide">
+        <ion-icon slot="icon-only" name="eye" aria-hidden="true"></ion-icon>
+      </ion-button>
+    </ion-input>
+  </ion-item>
+</ion-list>
+```

static/usage/v7/input/start-end-slots/react.md

@@ -0,0 +1,21 @@
+```tsx
+import React from 'react';
+import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/react';
+import { eye, lockClosed } from 'ionicons/icons';
+
+function Example() {
+  return (
+    <IonList>
+      <IonItem>
+        <IonInput labelPlacement="stacked" label="Email" placeholder="email@domain.com">
+          <IonIcon slot="start" icon={lockClosed} aria-hidden="true"></IonIcon>
+          <IonButton fill="clear" slot="end" aria-label="Show/hide">
+            <IonIcon slot="icon-only" name={eye} aria-hidden="true"></IonIcon>
+          </IonButton>
+        </IonInput>
+      </IonItem>
+    </IonList>
+  );
+}
+export default Example;
+```

static/usage/v7/input/start-end-slots/vue.md

@@ -0,0 +1,33 @@
+```html
+<template>
+  <ion-list>
+    <ion-item>
+      <ion-input label-placement="stacked" label="Email" placeholder="email@domain.com">
+        <ion-icon slot="start" :icon="lockClosed" aria-hidden="true"></ion-icon>
+        <ion-button fill="clear" slot="end" aria-label="Show/hide">
+          <ion-icon slot="icon-only" :icon="eye" aria-hidden="true"></ion-icon>
+        </ion-button>
+      </ion-input>
+    </ion-item>
+  </ion-list>
+</template>
+
+<script lang="ts">
+  import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/vue';
+  import { eye, lockClosed } from 'ionicons/icons';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: {
+      IonButton,
+      IonIcon,
+      IonInput,
+      IonItem,
+      IonList,
+    },
+    setup() {
+      return { eye, lockClosed };
+    },
+  });
+</script>
+```

static/usage/v7/radio/using-comparewith/angular/example_component_html.md

@@ -0,0 +1,9 @@
+```html
+<ion-list>
+  <ion-radio-group [compareWith]="compareWith" (ionChange)="handleChange($event)">
+    <ion-item *ngFor="let food of foods; trackBy: trackItems">
+      <ion-radio [value]="food">{{ food.name }}</ion-radio>
+    </ion-item>
+  </ion-radio-group>
+</ion-list>
+```

static/usage/v7/radio/using-comparewith/angular/example_component_ts.md

@@ -0,0 +1,39 @@
+```ts
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: 'example.component.html',
+})
+export class ExampleComponent {
+  foods = [
+    {
+      id: 1,
+      name: 'Apples',
+      type: 'fruit',
+    },
+    {
+      id: 2,
+      name: 'Carrots',
+      type: 'vegetable',
+    },
+    {
+      id: 3,
+      name: 'Cupcakes',
+      type: 'dessert',
+    },
+  ];
+
+  compareWith(o1, o2) {
+    return o1.id === o2.id;
+  }
+
+  handleChange(ev) {
+    console.log('Current value:', JSON.stringify(ev.target.value));
+  }
+
+  trackItems(index: number, item: any) {
+    return item.id;
+  }
+}
+```

static/usage/v7/radio/using-comparewith/demo.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Radio</title>
+    <link rel="stylesheet" href="../../../common.css" />
+    <script src="../../../common.js"></script>
+    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
+  </head>
+
+  <body>
+    <ion-app>
+      <ion-content>
+        <div class="container">
+          <ion-list>
+            <ion-radio-group></ion-radio-group>
+          </ion-list>
+        </div>
+      </ion-content>
+    </ion-app>
+
+    <script>
+      const foods = [
+        {
+          id: 1,
+          name: 'Apples',
+          type: 'fruit',
+        },
+        {
+          id: 2,
+          name: 'Carrots',
+          type: 'vegetable',
+        },
+        {
+          id: 3,
+          name: 'Cupcakes',
+          type: 'dessert',
+        },
+      ];
+
+      const compareWithFn = (o1, o2) => {
+        return o1.id === o2.id;
+      };
+
+      const radioGroupEl = document.querySelector('ion-radio-group');
+      radioGroupEl.compareWith = (a, b) => a.value === b.value;
+
+      foods.forEach((option, i) => {
+        const radio = document.createElement('ion-radio');
+
+        radio.value = option;
+        radio.textContent = option.name;
+
+        const item = document.createElement('ion-item');
+        item.appendChild(radio);
+
+        radioGroupEl.appendChild(item);
+      });
+
+      radioGroupEl.addEventListener('ionChange', () => {
+        console.log('Current value:', JSON.stringify(radioGroupEl.value));
+      });
+    </script>
+  </body>
+</html>

static/usage/v7/radio/using-comparewith/index.md

@@ -0,0 +1,25 @@
+import Playground from '@site/src/components/global/Playground';
+
+import javascript from './javascript.md';
+import react from './react.md';
+import vue from './vue.md';
+
+import angular_example_component_html from './angular/example_component_html.md';
+import angular_example_component_ts from './angular/example_component_ts.md';
+
+<Playground
+  version="7"
+  code={{
+    javascript,
+    react,
+    vue,
+    angular: {
+      files: {
+        'src/app/example.component.html': angular_example_component_html,
+        'src/app/example.component.ts': angular_example_component_ts,
+      },
+    },
+  }}
+  src="usage/v7/radio/using-comparewith/demo.html"
+  showConsole={true}
+/>