@vaadin/vaadin-lumo-styles 22.0.0-alpha4 → 22.0.0-alpha8

package/color.js

@@ -30,9 +30,9 @@ const colorBase = css`
     --lumo-shade-20pct: hsla(214, 53%, 23%, 0.16);
     --lumo-shade-30pct: hsla(214, 50%, 22%, 0.26);
     --lumo-shade-40pct: hsla(214, 47%, 21%, 0.38);
-    --lumo-shade-50pct: hsla(214, 45%, 20%, 0.5);
-    --lumo-shade-60pct: hsla(214, 43%, 19%, 0.61);
-    --lumo-shade-70pct: hsla(214, 42%, 18%, 0.72);
+    --lumo-shade-50pct: hsla(214, 45%, 20%, 0.52);
+    --lumo-shade-60pct: hsla(214, 43%, 19%, 0.6);
+    --lumo-shade-70pct: hsla(214, 42%, 18%, 0.69);
     --lumo-shade-80pct: hsla(214, 41%, 17%, 0.83);
     --lumo-shade-90pct: hsla(214, 40%, 16%, 0.94);
     --lumo-shade: hsl(214, 35%, 15%);
@@ -58,24 +58,24 @@ const colorBase = css`
     --lumo-disabled-text-color: var(--lumo-contrast-30pct);
 
     /* Primary */
-    --lumo-primary-color: hsl(214, 90%, 52%);
-    --lumo-primary-color-50pct: hsla(214, 90%, 52%, 0.5);
-    --lumo-primary-color-10pct: hsla(214, 90%, 52%, 0.1);
-    --lumo-primary-text-color: var(--lumo-primary-color);
+    --lumo-primary-color: hsl(214, 100%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 100%, 49%, 0.76);
+    --lumo-primary-color-10pct: hsla(214, 100%, 60%, 0.13);
+    --lumo-primary-text-color: hsl(214, 100%, 43%);
     --lumo-primary-contrast-color: #fff;
 
     /* Error */
-    --lumo-error-color: hsl(3, 100%, 61%);
-    --lumo-error-color-50pct: hsla(3, 100%, 60%, 0.5);
-    --lumo-error-color-10pct: hsla(3, 100%, 60%, 0.1);
-    --lumo-error-text-color: hsl(3, 92%, 53%);
+    --lumo-error-color: hsl(3, 85%, 48%);
+    --lumo-error-color-50pct: hsla(3, 85%, 49%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 85%, 49%, 0.1);
+    --lumo-error-text-color: hsl(3, 89%, 42%);
     --lumo-error-contrast-color: #fff;
 
     /* Success */
-    --lumo-success-color: hsl(145, 80%, 42%); /* hsl(144,82%,37%); */
-    --lumo-success-color-50pct: hsla(145, 76%, 44%, 0.55);
-    --lumo-success-color-10pct: hsla(145, 76%, 44%, 0.12);
-    --lumo-success-text-color: hsl(145, 100%, 32%);
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 72%, 31%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 72%, 31%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 25%);
     --lumo-success-contrast-color: #fff;
   }
 `;
@@ -96,8 +96,8 @@ const color = css`
     --lumo-tint-30pct: hsla(214, 69%, 84%, 0.32);
     --lumo-tint-40pct: hsla(214, 73%, 86%, 0.41);
     --lumo-tint-50pct: hsla(214, 78%, 88%, 0.5);
-    --lumo-tint-60pct: hsla(214, 82%, 90%, 0.6);
-    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.7);
+    --lumo-tint-60pct: hsla(214, 82%, 90%, 0.58);
+    --lumo-tint-70pct: hsla(214, 87%, 92%, 0.69);
     --lumo-tint-80pct: hsla(214, 91%, 94%, 0.8);
     --lumo-tint-90pct: hsla(214, 96%, 96%, 0.9);
     --lumo-tint: hsl(214, 100%, 98%);
@@ -136,23 +136,23 @@ const color = css`
     --lumo-disabled-text-color: var(--lumo-contrast-30pct);
 
     /* Primary */
-    --lumo-primary-color: hsl(214, 86%, 55%);
-    --lumo-primary-color-50pct: hsla(214, 86%, 55%, 0.5);
-    --lumo-primary-color-10pct: hsla(214, 90%, 63%, 0.1);
-    --lumo-primary-text-color: hsl(214, 100%, 70%);
+    --lumo-primary-color: hsl(214, 90%, 48%);
+    --lumo-primary-color-50pct: hsla(214, 90%, 70%, 0.69);
+    --lumo-primary-color-10pct: hsla(214, 90%, 55%, 0.13);
+    --lumo-primary-text-color: hsl(214, 90%, 77%);
     --lumo-primary-contrast-color: #fff;
 
     /* Error */
-    --lumo-error-color: hsl(3, 90%, 63%);
-    --lumo-error-color-50pct: hsla(3, 90%, 63%, 0.5);
-    --lumo-error-color-10pct: hsla(3, 90%, 63%, 0.1);
-    --lumo-error-text-color: hsl(3, 100%, 67%);
+    --lumo-error-color: hsl(3, 79%, 49%);
+    --lumo-error-color-50pct: hsla(3, 75%, 62%, 0.5);
+    --lumo-error-color-10pct: hsla(3, 75%, 62%, 0.14);
+    --lumo-error-text-color: hsl(3, 100%, 80%);
 
     /* Success */
-    --lumo-success-color: hsl(145, 65%, 42%);
-    --lumo-success-color-50pct: hsla(145, 65%, 42%, 0.5);
-    --lumo-success-color-10pct: hsla(145, 65%, 42%, 0.1);
-    --lumo-success-text-color: hsl(145, 85%, 47%);
+    --lumo-success-color: hsl(145, 72%, 30%);
+    --lumo-success-color-50pct: hsla(145, 92%, 51%, 0.5);
+    --lumo-success-color-10pct: hsla(145, 92%, 51%, 0.1);
+    --lumo-success-text-color: hsl(145, 85%, 46%);
   }
 
   html {
@@ -198,6 +198,6 @@ const colorLegacy = css`
   }
 `;
 
-registerStyles('', colorLegacy, { moduleId: 'lumo-color-legacy', include: ['lumo-color'] });
+registerStyles('', [color, colorLegacy], { moduleId: 'lumo-color-legacy' });
 
 export { colorBase, color, colorLegacy };

package/gulpfile.js

@@ -116,7 +116,7 @@ ${createIconset(folder, filenames)}
         });
 
         const vaadinIcons = `${createCopyright()}
-import '@vaadin/vaadin-icon/vaadin-iconset.js';
+import '@vaadin/icon/vaadin-iconset.js';
 import './version.js';
 
 const $_documentContainer = document.createElement('template');

package/icons.js

@@ -6,3 +6,4 @@
 import '@polymer/iron-icon/iron-icon.js';
 import './version.js';
 import './iconset.js';
+import './vaadin-iconset.js';

package/mixins/helper.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { CSSResult } from 'lit';
+
+export const helper: CSSResult;

package/mixins/helper.js

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '../color.js';
+import '../sizing.js';
+import '../style.js';
+import '../typography.js';
+
+export const helper = css`
+  :host([has-helper]) [part='helper-text']::before {
+    content: '';
+    display: block;
+    height: 0.4em;
+  }
+
+  [part='helper-text'] {
+    display: block;
+    color: var(--lumo-secondary-text-color);
+    font-size: var(--lumo-font-size-xs);
+    line-height: var(--lumo-line-height-xs);
+    margin-left: calc(var(--lumo-border-radius-m) / 4);
+    transition: color 0.2s;
+  }
+
+  :host(:hover:not([readonly])) [part='helper-text'] {
+    color: var(--lumo-body-text-color);
+  }
+
+  :host([disabled]) [part='helper-text'] {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='helper-text']::before {
+    display: none;
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='helper-text']::after {
+    content: '';
+    display: block;
+    height: 0.4em;
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='label'] {
+    order: 0;
+    padding-bottom: 0.4em;
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='helper-text'] {
+    order: 1;
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='label'] + * {
+    order: 2;
+  }
+
+  :host([has-helper][theme~='helper-above-field']) [part='error-message'] {
+    order: 3;
+  }
+`;

package/mixins/input-field-shared.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { CSSResult } from 'lit';
+
+export const inputField: CSSResult;
+
+export const inputFieldShared: CSSResult;

package/mixins/input-field-shared.js

@@ -0,0 +1,149 @@
+/**
+ * @license
+ * Copyright (c) 2021 Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */
+import { registerStyles, css } from '@vaadin/vaadin-themable-mixin/register-styles.js';
+import '../color.js';
+import '../font-icons.js';
+import '../sizing.js';
+import '../spacing.js';
+import '../style.js';
+import '../typography.js';
+import { fieldButton } from './field-button.js';
+import { helper } from './helper.js';
+import { requiredField } from './required-field.js';
+
+const inputField = css`
+  :host {
+    --lumo-text-field-size: var(--lumo-size-m);
+    color: var(--lumo-body-text-color);
+    font-size: var(--lumo-font-size-m);
+    font-family: var(--lumo-font-family);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -webkit-tap-highlight-color: transparent;
+    padding: var(--lumo-space-xs) 0;
+  }
+
+  :host::before {
+    height: var(--lumo-text-field-size);
+    box-sizing: border-box;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  :host([focused]:not([readonly])) [part='label'] {
+    color: var(--lumo-primary-text-color);
+  }
+
+  :host([focused]) [part='input-field'] ::slotted(:is(input, textarea)) {
+    -webkit-mask-image: none;
+    mask-image: none;
+  }
+
+  ::slotted(:is(input, textarea):placeholder-shown) {
+    color: var(--lumo-secondary-text-color);
+  }
+
+  /* Hover */
+  :host(:hover:not([readonly]):not([focused])) [part='label'] {
+    color: var(--lumo-body-text-color);
+  }
+
+  :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
+    opacity: 0.1;
+  }
+
+  /* Touch device adjustment */
+  @media (pointer: coarse) {
+    :host(:hover:not([readonly]):not([focused])) [part='label'] {
+      color: var(--lumo-secondary-text-color);
+    }
+
+    :host(:hover:not([readonly]):not([focused])) [part='input-field']::after {
+      opacity: 0;
+    }
+
+    :host(:active:not([readonly]):not([focused])) [part='input-field']::after {
+      opacity: 0.2;
+    }
+  }
+
+  /* Trigger when not focusing using the keyboard */
+  :host([focused]:not([focus-ring]):not([readonly])) [part='input-field']::after {
+    transform: scaleX(0);
+    transition-duration: 0.15s, 1s;
+  }
+
+  /* Focus-ring */
+  :host([focus-ring]) [part='input-field'] {
+    box-shadow: 0 0 0 2px var(--lumo-primary-color-50pct);
+  }
+
+  /* Read-only and disabled */
+  :host(:is([readonly], [disabled])) ::slotted(:is(input, textarea):placeholder-shown) {
+    opacity: 0;
+  }
+
+  /* Disabled style */
+  :host([disabled]) {
+    pointer-events: none;
+  }
+
+  :host([disabled]) [part='label'],
+  :host([disabled]) [part='input-field'] ::slotted(*) {
+    color: var(--lumo-disabled-text-color);
+    -webkit-text-fill-color: var(--lumo-disabled-text-color);
+  }
+
+  /* Invalid style */
+  :host([invalid][focus-ring]) [part='input-field'] {
+    box-shadow: 0 0 0 2px var(--lumo-error-color-50pct);
+  }
+
+  :host([input-prevented]) [part='input-field'] {
+    animation: shake 0.15s infinite;
+  }
+
+  @keyframes shake {
+    25% {
+      transform: translateX(4px);
+    }
+    75% {
+      transform: translateX(-4px);
+    }
+  }
+
+  /* Small theme */
+  :host([theme~='small']) {
+    font-size: var(--lumo-font-size-s);
+    --lumo-text-field-size: var(--lumo-size-s);
+  }
+
+  :host([theme~='small'][has-label]) [part='label'] {
+    font-size: var(--lumo-font-size-xs);
+  }
+
+  :host([theme~='small'][has-label]) [part='error-message'] {
+    font-size: var(--lumo-font-size-xxs);
+  }
+
+  /* Slotted content */
+  [part='input-field'] ::slotted(:not(iron-icon):not(vaadin-icon):not(input):not(textarea)) {
+    color: var(--lumo-secondary-text-color);
+    font-weight: 400;
+  }
+
+  [part='clear-button']::before {
+    content: var(--lumo-icons-cross);
+  }
+`;
+
+const inputFieldShared = [requiredField, fieldButton, helper, inputField];
+
+registerStyles('', inputFieldShared, {
+  moduleId: 'lumo-input-field-shared-styles'
+});
+
+export { inputField, inputFieldShared };

package/mixins/menu-overlay.d.ts

@@ -1,3 +1,5 @@
 import { CSSResult } from 'lit';
 
-export const menuOverlay: CSSResult;
+export const menuOverlay: CSSResult[];
+
+export const menuOverlayCore: CSSResult;

package/mixins/menu-overlay.js

@@ -6,7 +6,7 @@
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/register-styles.js';
 import '../spacing.js';
 import '../style.js';
-import './overlay.js';
+import { overlay } from './overlay.js';
 
 const menuOverlayCore = css`
   :host([opening]),
@@ -42,7 +42,7 @@ const menuOverlayCore = css`
 
 registerStyles('', menuOverlayCore, { moduleId: 'lumo-menu-overlay-core' });
 
-const menuOverlay = css`
+const menuOverlayExt = css`
   /* Small viewport (bottom sheet) styles */
   /* Use direct media queries instead of the state attributes ([phone] and [fullscreen]) provided by the elements */
   @media (max-width: 420px), (max-height: 420px) {
@@ -105,6 +105,9 @@ const menuOverlay = css`
     }
   }
 `;
-registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay', include: ['lumo-overlay', 'lumo-menu-overlay-core'] });
+
+const menuOverlay = [overlay, menuOverlayCore, menuOverlayExt];
+
+registerStyles('', menuOverlay, { moduleId: 'lumo-menu-overlay' });
 
 export { menuOverlayCore, menuOverlay };

package/mixins/required-field.js

@@ -40,28 +40,23 @@ const requiredField = css`
     padding-top: var(--lumo-space-m);
   }
 
-  /* TODO: remove old pseudo element when the following components are updated to use new indicator:
-    combo-box, date-picker, time-picker, date-time-picker, select. */
-  [part='label']::after,
-  [part='indicator']::after {
+  [part='required-indicator']::after {
     content: var(--lumo-required-field-indicator, '•');
     transition: opacity 0.2s;
     opacity: 0;
-    color: var(--lumo-primary-text-color);
+    color: var(--lumo-required-field-indicator-color, --lumo-primary-text-color);
     position: absolute;
     right: 0;
     width: 1em;
     text-align: center;
   }
 
-  :host([required]:not([has-value])) [part='label']::after,
-  :host([required]:not([has-value])) [part='indicator']::after {
+  :host([required]:not([has-value])) [part='required-indicator']::after {
     opacity: 1;
   }
 
-  :host([invalid]) [part='label']::after,
-  :host([invalid]) [part='indicator']::after {
-    color: var(--lumo-error-text-color);
+  :host([invalid]) [part='required-indicator']::after {
+    color: var(--lumo-required-field-indicator-color, --lumo-error-text-color);
   }
 
   [part='error-message'] {
@@ -74,9 +69,8 @@ const requiredField = css`
     max-height: 5em;
   }
 
-  /* Margin that doesn’t reserve space when there’s no error message */
-  [part='error-message']:not(:empty)::before,
-  [part='error-message']:not(:empty)::after {
+  :host([has-error-message]) [part='error-message']::before,
+  :host([has-error-message]) [part='error-message']::after {
     content: '';
     display: block;
     height: 0.4em;
@@ -99,8 +93,7 @@ const requiredField = css`
     padding-right: 0;
   }
 
-  :host([dir='rtl']) [part='label']::after,
-  :host([dir='rtl']) [part='indicator']::after {
+  :host([dir='rtl']) [part='required-indicator']::after {
     right: auto;
     left: 0;
   }

package/package.json

@@ -1,41 +1,48 @@
 {
   "name": "@vaadin/vaadin-lumo-styles",
-  "version": "22.0.0-alpha4",
+  "version": "22.0.0-alpha8",
+  "publishConfig": {
+    "access": "public"
+  },
   "description": "Lumo is a design system foundation for modern web applications, used by Vaadin components",
-  "main": "all-imports.js",
-  "module": "all-imports.js",
-  "repository": "vaadin/vaadin-lumo-styles",
-  "keywords": [
-    "vaadin",
-    "lumo",
-    "design-system",
-    "web-components",
-    "web-component",
-    "polymer"
-  ],
-  "author": "Vaadin Ltd",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vaadin/web-components.git",
+    "directory": "packages/vaadin-lumo-styles"
+  },
+  "author": "Vaadin Ltd",
+  "homepage": "https://vaadin.com/components",
   "bugs": {
     "url": "https://github.com/vaadin/vaadin-lumo-styles/issues"
   },
-  "homepage": "https://vaadin.com/components",
+  "main": "all-imports.js",
+  "module": "all-imports.js",
+  "scripts": {
+    "icons": "gulp icons"
+  },
   "files": [
-    "*.js",
     "*.d.ts",
-    "mixins/*.js",
+    "*.js",
     "mixins/*.d.ts",
+    "mixins/*.js",
     "presets/*.js",
     "utilities/*.js"
   ],
-  "scripts": {
-    "icons": "gulp icons"
-  },
+  "keywords": [
+    "vaadin",
+    "lumo",
+    "design-system",
+    "web-components",
+    "web-component",
+    "polymer"
+  ],
   "dependencies": {
     "@polymer/iron-icon": "^3.0.0",
     "@polymer/iron-iconset-svg": "^3.0.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-icon": "^22.0.0-alpha4",
-    "@vaadin/vaadin-themable-mixin": "^22.0.0-alpha4"
+    "@vaadin/icon": "22.0.0-alpha8",
+    "@vaadin/vaadin-themable-mixin": "22.0.0-alpha8"
   },
   "devDependencies": {
     "gulp": "^4.0.0",
@@ -44,8 +51,5 @@
     "gulp-sort": "^2.0.0",
     "gulp-svgmin": "^3.0.0"
   },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "86c025abd605d5a4a3c0ae36eb07c34704cee1f2"
+  "gitHead": "c24468526298ee26ad7f7280b59f6c8789e1f75f"
 }

package/presets/compact.js

@@ -9,34 +9,7 @@ const $_documentContainer = document.createElement('template');
 
 $_documentContainer.innerHTML = `
   <style>
-    /* Browsers that fall back to the polyfill require plain html selector */
-    html {
-      --lumo-size-xl: 3rem;
-      --lumo-size-l: 2.5rem;
-      --lumo-size-m: 2rem;
-      --lumo-size-s: 1.75rem;
-      --lumo-size-xs: 1.5rem;
-      --lumo-font-size: 1rem;
-      --lumo-font-size-xxxl: 1.75rem;
-      --lumo-font-size-xxl: 1.375rem;
-      --lumo-font-size-xl: 1.125rem;
-      --lumo-font-size-l: 1rem;
-      --lumo-font-size-m: 0.875rem;
-      --lumo-font-size-s: 0.8125rem;
-      --lumo-font-size-xs: 0.75rem;
-      --lumo-font-size-xxs: 0.6875rem;
-      --lumo-line-height-m: 1.4;
-      --lumo-line-height-s: 1.2;
-      --lumo-line-height-xs: 1.1;
-      --lumo-space-xl: 1.875rem;
-      --lumo-space-l: 1.25rem;
-      --lumo-space-m: 0.625rem;
-      --lumo-space-s: 0.3125rem;
-      --lumo-space-xs: 0.1875rem;
-    }
-
-    /* Need to use a separate and stronger selector for other browsers where
-    the imports added later would otherwise override the property values */
+    /* Use a stronger selector so that imports added later do not override the property values */
     html:not(div) {
       --lumo-size-xl: 3rem;
       --lumo-size-l: 2.5rem;

package/typography.js

@@ -29,16 +29,7 @@ const font = css`
 `;
 
 const typography = css`
-  html {
-    font-family: var(--lumo-font-family);
-    font-size: var(--lumo-font-size, var(--lumo-font-size-m));
-    line-height: var(--lumo-line-height-m);
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  /* Can’t combine with the above selector because that doesn’t work in browsers without native shadow dom */
+  html,
   :host {
     font-family: var(--lumo-font-family);
     font-size: var(--lumo-font-size, var(--lumo-font-size-m));
@@ -144,32 +135,8 @@ const typography = css`
 
 registerStyles('', typography, { moduleId: 'lumo-typography' });
 
-const inputs = css`
-  /* Slotted input styles */
-  input[slot='input']::placeholder,
-  textarea[slot='textarea']::placeholder {
-    color: inherit;
-    transition: opacity 0.175s 0.1s;
-    opacity: 0.5;
-  }
-
-  [readonly] > input[slot='input']::placeholder,
-  [readonly] > textarea[slot='textarea']::placeholder,
-  [disabled] > input[slot='input']::placeholder,
-  [disabled] > textarea[slot='textarea']::placeholder {
-    opacity: 0;
-  }
-
-  /* Hide the native arrow icons */
-  input[slot='input']::-webkit-outer-spin-button,
-  input[slot='input']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-`;
-
 const $tpl = document.createElement('template');
-$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}${inputs.toString()}</style>`;
+$tpl.innerHTML = `<style>${font.toString().replace(':host', 'html')}</style>`;
 document.head.appendChild($tpl.content);
 
-export { font, inputs, typography };
+export { font, typography };

package/vaadin-iconset.js

@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Vaadin Ltd.
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
-import '@vaadin/vaadin-icon/vaadin-iconset.js';
+import '@vaadin/icon/vaadin-iconset.js';
 import './version.js';
 
 const $_documentContainer = document.createElement('template');

package/version.js

@@ -5,7 +5,7 @@
  */
 class Lumo extends HTMLElement {
   static get version() {
-    return '22.0.0-alpha4';
+    return '22.0.0-alpha8';
   }
 }