voyager-ionic-core 7.2.3-tweak

package/dist/collection/components/checkbox/test/states/checkbox.e2e.js

@@ -0,0 +1,37 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from '@playwright/test';
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('checkbox: states'), () => {
+    test('should render disabled checkbox correctly', async ({ page }) => {
+      await page.setContent(`
+          <ion-checkbox disabled>Label</ion-checkbox>
+      `, config);
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-disabled`));
+    });
+    test('should render disabled checked checkbox correctly', async ({ page }) => {
+      await page.setContent(`
+          <ion-checkbox checked disabled>Label</ion-checkbox>
+      `, config);
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-checked-disabled`));
+    });
+    test('should render checked checkbox correctly', async ({ page }) => {
+      await page.setContent(`
+          <ion-checkbox checked>Label</ion-checkbox>
+      `, config);
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-checked`));
+    });
+    test('should render unchecked checkbox correctly', async ({ page }) => {
+      await page.setContent(`
+          <ion-checkbox>Label</ion-checkbox>
+      `, config);
+      const checkbox = page.locator('ion-checkbox');
+      expect(await checkbox.screenshot()).toMatchSnapshot(screenshot(`checkbox-unchecked`));
+    });
+  });
+});

package/dist/collection/components/chip/chip.css

@@ -0,0 +1,149 @@
+:host {
+  /**
+   * @prop --background: Background of the chip
+   * @prop --color: Color of the chip
+   */
+  --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.12);
+  --color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.87);
+  border-radius: 16px;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  -webkit-margin-start: 4px;
+  margin-inline-start: 4px;
+  -webkit-margin-end: 4px;
+  margin-inline-end: 4px;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  -webkit-padding-start: 12px;
+  padding-inline-start: 12px;
+  -webkit-padding-end: 12px;
+  padding-inline-end: 12px;
+  padding-top: 7px;
+  padding-bottom: 7px;
+  display: inline-flex;
+  position: relative;
+  align-items: center;
+  height: 32px;
+  background: var(--background);
+  color: var(--color);
+  font-family: var(--ion-font-family, inherit);
+  font-size: 14px;
+  cursor: pointer;
+  overflow: hidden;
+  vertical-align: middle;
+  box-sizing: border-box;
+}
+
+:host(.chip-disabled) {
+  cursor: default;
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+:host(.ion-color) {
+  background: rgba(var(--ion-color-base-rgb), 0.08);
+  color: var(--ion-color-shade);
+}
+
+:host(.ion-color:focus) {
+  background: rgba(var(--ion-color-base-rgb), 0.12);
+}
+
+:host(.ion-color.ion-activated) {
+  background: rgba(var(--ion-color-base-rgb), 0.16);
+}
+
+:host(.chip-outline) {
+  border-width: 1px;
+  border-style: solid;
+}
+
+:host(.chip-outline) {
+  border-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.32);
+  background: transparent;
+}
+
+:host(.chip-outline.ion-color) {
+  border-color: rgba(var(--ion-color-base-rgb), 0.32);
+}
+
+:host(.chip-outline:not(.ion-color):focus) {
+  background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04);
+}
+
+:host(.chip-outline.ion-activated:not(.ion-color)) {
+  background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.08);
+}
+
+::slotted(ion-icon) {
+  font-size: 20px;
+}
+
+:host(:not(.ion-color)) ::slotted(ion-icon) {
+  color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.54);
+}
+
+::slotted(ion-icon:first-child) {
+  -webkit-margin-start: -4px;
+  margin-inline-start: -4px;
+  -webkit-margin-end: 8px;
+  margin-inline-end: 8px;
+  margin-top: -4px;
+  margin-bottom: -4px;
+}
+
+::slotted(ion-icon:last-child) {
+  -webkit-margin-start: 8px;
+  margin-inline-start: 8px;
+  -webkit-margin-end: -4px;
+  margin-inline-end: -4px;
+  margin-top: -4px;
+  margin-bottom: -4px;
+}
+
+::slotted(ion-avatar) {
+  width: 24px;
+  height: 24px;
+}
+
+::slotted(ion-avatar:first-child) {
+  -webkit-margin-start: -8px;
+  margin-inline-start: -8px;
+  -webkit-margin-end: 8px;
+  margin-inline-end: 8px;
+  margin-top: -4px;
+  margin-bottom: -4px;
+}
+
+::slotted(ion-avatar:last-child) {
+  -webkit-margin-start: 8px;
+  margin-inline-start: 8px;
+  -webkit-margin-end: -8px;
+  margin-inline-end: -8px;
+  margin-top: -4px;
+  margin-bottom: -4px;
+}
+
+:host(:focus) {
+  outline: none;
+}
+
+:host(:focus) {
+  --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16);
+}
+
+:host(.ion-activated) {
+  --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.2);
+}
+
+@media (any-hover: hover) {
+  :host(:hover) {
+    --background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.16);
+  }
+  :host(.ion-color:hover) {
+    background: rgba(var(--ion-color-base-rgb), 0.12);
+  }
+  :host(.chip-outline:not(.ion-color):hover) {
+    background: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.04);
+  }
+}

package/dist/collection/components/chip/chip.js

@@ -0,0 +1,99 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { Host, h } from '@stencil/core';
+import { createColorClasses } from "../../utils/theme";
+import { getIonMode } from '../../global/ionic-global';
+/**
+ * @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
+ */
+export class Chip {
+  constructor() {
+    this.color = undefined;
+    this.outline = false;
+    this.disabled = false;
+  }
+  render() {
+    const mode = getIonMode(this);
+    return (h(Host, { "aria-disabled": this.disabled ? 'true' : null, class: createColorClasses(this.color, {
+        [mode]: true,
+        'chip-outline': this.outline,
+        'chip-disabled': this.disabled,
+        'ion-activatable': true,
+      }) }, h("slot", null), mode === 'md' && h("ion-ripple-effect", null)));
+  }
+  static get is() { return "ion-chip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["chip.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["chip.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Color",
+          "resolved": "\"danger\" | \"dark\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\" | string & Record<never, never> | undefined",
+          "references": {
+            "Color": {
+              "location": "import",
+              "path": "../../interface"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The color to use from your application's color palette.\nDefault options are: `\"primary\"`, `\"secondary\"`, `\"tertiary\"`, `\"success\"`, `\"warning\"`, `\"danger\"`, `\"light\"`, `\"medium\"`, and `\"dark\"`.\nFor more information on colors, see [theming](/docs/theming/basics)."
+        },
+        "attribute": "color",
+        "reflect": true
+      },
+      "outline": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Display an outline style button."
+        },
+        "attribute": "outline",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "If `true`, the user cannot interact with the chip."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+}

package/dist/collection/components/chip/test/basic/chip.e2e.js

@@ -0,0 +1,81 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from '@playwright/test';
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['ios'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * Chip rendering does not vary across modes.
+   */
+  test.describe(title('chip: rendering'), () => {
+    test('should not have visual regressions', async ({ page }) => {
+      await page.setContent(`
+        <ion-chip>
+          <ion-avatar>
+            <img
+              src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBmaWxsPSIjYzVkYmZmIiBkPSJNMCAwaDUxMnY1MTJIMHoiLz48cGF0aCBkPSJNMjU2IDMwNGM2MS42IDAgMTEyLTUwLjQgMTEyLTExMlMzMTcuNiA4MCAyNTYgODBzLTExMiA1MC40LTExMiAxMTIgNTAuNCAxMTIgMTEyIDExMnptMCA0MGMtNzQuMiAwLTIyNCAzNy44LTIyNCAxMTJ2NTZoNDQ4di01NmMwLTc0LjItMTQ5LjgtMTEyLTIyNC0xMTJ6IiBmaWxsPSIjODJhZWZmIi8+PC9zdmc+"
+            />
+          </ion-avatar>
+          <ion-label>Chip</ion-label>
+          <ion-icon name="close-circle"></ion-icon>
+        </ion-chip>`, config);
+      const chip = page.locator('ion-chip');
+      await expect(chip).toHaveScreenshot(screenshot(`chip-basic`));
+    });
+  });
+});
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * This behavior does not vary across modes/directions.
+   */
+  test.describe(title('chip: outline'), () => {
+    test('should render default outline chip', async ({ page }) => {
+      await page.setContent(`<ion-chip outline="true">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Icon</ion-label>
+        </ion-chip>`, config);
+      const chip = page.locator('ion-chip');
+      await expect(chip).toHaveScreenshot(screenshot(`chip-outline`));
+    });
+  });
+  /**
+   * This behavior does not vary across modes/directions.
+   */
+  test.describe(title('chip: color'), () => {
+    test('should render solid color chip', async ({ page }) => {
+      await page.setContent(`<ion-chip color="tertiary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Tertiary with Icon</ion-label>
+        </ion-chip>`, config);
+      const chip = page.locator('ion-chip');
+      await expect(chip).toHaveScreenshot(screenshot(`chip-solid-color`));
+    });
+    test('should render outline color chip', async ({ page }) => {
+      await page.setContent(`<ion-chip outline="true" color="tertiary">
+          <ion-icon name="checkmark-circle"></ion-icon>
+          <ion-label>Tertiary with Icon</ion-label>
+        </ion-chip>`, config);
+      const chip = page.locator('ion-chip');
+      await expect(chip).toHaveScreenshot(screenshot(`chip-outline-color`));
+    });
+  });
+  test.describe(title('chip: descenders'), () => {
+    test('should not clip descenders in item', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/18313',
+      });
+      await page.setContent(`
+        <ion-list>
+          <ion-item>
+            <ion-chip>
+              <ion-label>Agreements</ion-label>
+            </ion-chip>
+          </ion-item>
+        </ion-list>
+      `, config);
+      const chip = page.locator('ion-chip');
+      await expect(chip).toHaveScreenshot(screenshot(`chip-descender`));
+    });
+  });
+});

package/dist/collection/components/chip/test/states/chip.e2e.js

@@ -0,0 +1,35 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { expect } from '@playwright/test';
+import { configs, test } from "../../../../utils/test/playwright/index";
+configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  /**
+   * This behavior does not vary across modes/directions.
+   */
+  test.describe(title('chip: states'), () => {
+    test('should render disabled state', async ({ page }) => {
+      await page.setContent(`<ion-chip disabled="true">
+          <ion-label>Disabled</ion-label>
+        </ion-chip>`, config);
+      const chip = page.locator('ion-chip');
+      await expect(chip).toHaveScreenshot(screenshot(`chip-disabled`));
+    });
+    test('should custom chip', async ({ page }) => {
+      await page.setContent(`
+        <style>
+          ion-chip {
+            --background: green;
+            --color: black;
+
+            opacity: 1;
+          }
+        </style>
+        <ion-chip disabled="true">
+          <ion-label>Custom</ion-label>
+        </ion-chip>`, config);
+      const chip = page.locator('ion-chip');
+      await expect(chip).toHaveScreenshot(screenshot(`chip-custom`));
+    });
+  });
+});

package/dist/collection/components/col/col.css

@@ -0,0 +1,68 @@
+:host {
+  /**
+   * @prop --ion-grid-columns: The number of total Columns in the Grid
+   * @prop --ion-grid-column-padding: Padding for the Column
+   * @prop --ion-grid-column-padding-xs: Padding for the Column on xs screens and up
+   * @prop --ion-grid-column-padding-sm: Padding for the Column on sm screens and up
+   * @prop --ion-grid-column-padding-md: Padding for the Column on md screens and up
+   * @prop --ion-grid-column-padding-lg: Padding for the Column on lg screens and up
+   * @prop --ion-grid-column-padding-xl: Padding for the Column on xl screens and up
+   */
+  -webkit-padding-start: var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));
+  padding-inline-start: var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));
+  -webkit-padding-end: var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));
+  padding-inline-end: var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));
+  padding-top: var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));
+  padding-bottom: var(--ion-grid-column-padding-xs, var(--ion-grid-column-padding, 5px));
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 0;
+  box-sizing: border-box;
+  position: relative;
+  flex-basis: 0;
+  flex-grow: 1;
+  width: 100%;
+  max-width: 100%;
+  min-height: 1px;
+}
+@media (min-width: 576px) {
+  :host {
+    -webkit-padding-start: var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));
+    padding-inline-start: var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));
+    -webkit-padding-end: var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));
+    padding-inline-end: var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));
+    padding-top: var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));
+    padding-bottom: var(--ion-grid-column-padding-sm, var(--ion-grid-column-padding, 5px));
+  }
+}
+@media (min-width: 768px) {
+  :host {
+    -webkit-padding-start: var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));
+    padding-inline-start: var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));
+    -webkit-padding-end: var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));
+    padding-inline-end: var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));
+    padding-top: var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));
+    padding-bottom: var(--ion-grid-column-padding-md, var(--ion-grid-column-padding, 5px));
+  }
+}
+@media (min-width: 992px) {
+  :host {
+    -webkit-padding-start: var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));
+    padding-inline-start: var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));
+    -webkit-padding-end: var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));
+    padding-inline-end: var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));
+    padding-top: var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));
+    padding-bottom: var(--ion-grid-column-padding-lg, var(--ion-grid-column-padding, 5px));
+  }
+}
+@media (min-width: 1200px) {
+  :host {
+    -webkit-padding-start: var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));
+    padding-inline-start: var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));
+    -webkit-padding-end: var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));
+    padding-inline-end: var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));
+    padding-top: var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));
+    padding-bottom: var(--ion-grid-column-padding-xl, var(--ion-grid-column-padding, 5px));
+  }
+}