@operato/input 7.0.0-rc.10 → 7.0.0-rc.13

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "7.0.0-rc.10",
+  "version": "7.0.0-rc.13",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -207,10 +207,10 @@
     "@lit/localize": "^0.12.1",
     "@material/web": "^1.5.0",
     "@operato/color-picker": "^7.0.0-rc.0",
-    "@operato/i18n": "^7.0.0-rc.0",
-    "@operato/popup": "^7.0.0-rc.10",
-    "@operato/styles": "^7.0.0-rc.10",
-    "@operato/utils": "^7.0.0-rc.8",
+    "@operato/i18n": "^7.0.0-rc.13",
+    "@operato/popup": "^7.0.0-rc.13",
+    "@operato/styles": "^7.0.0-rc.13",
+    "@operato/utils": "^7.0.0-rc.13",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@polymer/paper-item": "^3.0.1",
     "@thebespokepixel/es-tinycolor": "^3.1.0",
@@ -254,5 +254,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "96efe00ae617394f5a4fee901be5e20323ff7e57"
+  "gitHead": "30bb1e680f2d6b042ec75c5a29266b24d3067da5"
 }

package/src/ox-input-crontab.ts

@@ -147,7 +147,7 @@ export class OxInputCrontab extends OxFormField {
 
     input:invalid {
       border-color: var(--md-sys-color-error);
-      color: var(--status-danger-color);
+      color: var(--md-sys-color-error);
     }
 
     label {

package/src/ox-input-duration.ts

@@ -56,8 +56,8 @@ export class OxInputDuration extends OxFormField {
     }
 
     input:invalid {
-      border-bottom: 1px solid var(--status-danger-color);
-      color: var(--status-danger-color);
+      border-bottom: 1px solid var(--md-sys-color-error);
+      color: var(--md-sys-color-error);
     }
 
     label {

package/src/ox-input-hashtags.ts

@@ -84,8 +84,8 @@ export class OxInputHashtags extends OxFormField {
     }
 
     .error {
-      margin: var(--margin-narrow);
-      color: var(--status-danger-color);
+      margin: var(--spacing-small);
+      color: var(--md-sys-color-error);
       font: var(--input-font);
       text-align: left;
     }

package/src/ox-input-key-values.ts

@@ -28,7 +28,7 @@ export class OxInputKeyValues extends OxFormField {
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      margin-bottom: var(--margin-wide);
+      margin-bottom: var(--spacing-large);
 
       --md-icon-size: 14px;
     }
@@ -37,14 +37,14 @@ export class OxInputKeyValues extends OxFormField {
       display: flex;
       flex-flow: row nowrap;
       gap: var(--spacing-medium);
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
 
     button {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
+      padding: var(--spacing-small) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;

package/src/ox-input-mass-fraction.ts

@@ -56,7 +56,7 @@ export class OxInputMassFraction extends OxFormField {
           display: flex;
           flex-flow: row nowrap;
           gap: var(--mass-fraction-gap, 3px);
-          margin-bottom: var(--margin-narrow);
+          margin-bottom: var(--spacing-small);
         }
 
         > [nofraction] {
@@ -69,7 +69,7 @@ export class OxInputMassFraction extends OxFormField {
         display: flex;
         flex-flow: row nowrap;
         gap: var(--mass-fraction-gap, 3px);
-        margin: var(--margin-narrow) 0;
+        margin: var(--spacing-small) 0;
       }
 
       button {

package/src/ox-input-options.ts

@@ -18,7 +18,7 @@ export class OxInputOptions extends OxFormField {
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      margin-bottom: var(--margin-wide);
+      margin-bottom: var(--spacing-large);
 
       --md-icon-size: var(--fontsize-default, 14px);
     }
@@ -27,7 +27,7 @@ export class OxInputOptions extends OxFormField {
       display: flex;
       flex-flow: row nowrap;
       gap: var(--spacing-medium);
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
 
     button {

package/src/ox-input-partition-keys.ts

@@ -28,7 +28,7 @@ export class OxInputPartitionKeys extends OxFormField {
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      margin-bottom: var(--margin-wide);
+      margin-bottom: var(--spacing-large);
 
       --md-icon-size: var(--fontsize-default, 14px);
     }
@@ -37,14 +37,14 @@ export class OxInputPartitionKeys extends OxFormField {
       display: flex;
       flex-flow: row nowrap;
       gap: var(--spacing-medium);
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
 
     button {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
+      padding: var(--spacing-small) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;

package/src/ox-input-unit-number.ts

@@ -213,7 +213,7 @@ export class OxInputUnitNumber extends OxFormField {
         display: flex;
         align-items: center;
         position: relative;
-        margin-left: var(--margin-narrow);
+        margin-left: var(--spacing-small);
         font: var(--label-font);
         color: var(--label-color, var(--md-sys-color-on-surface));
         min-width: 24px;

package/src/ox-input-value-map.ts

@@ -32,7 +32,7 @@ export class OxInputValueMap extends OxFormField {
       display: flex;
       flex-direction: column;
       border: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
+      padding: var(--spacing-small) var(--spacing-small) 0 var(--spacing-small);
 
       --md-icon-size: var(--fontsize-default, 14px);
     }
@@ -44,7 +44,7 @@ export class OxInputValueMap extends OxFormField {
     }
 
     div:last-child {
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
 
     div > * {
@@ -57,7 +57,7 @@ export class OxInputValueMap extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
+      padding: var(--spacing-small) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;

package/src/ox-input-value-ranges.ts

@@ -32,7 +32,7 @@ export class OxInputValueRange extends OxFormField {
       display: flex;
       flex-direction: column;
       border: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--padding-narrow) var(--padding-narrow) 0 var(--padding-narrow);
+      padding: var(--spacing-small) var(--spacing-small) 0 var(--spacing-small);
 
       --md-icon-size: var(--fontsize-default, 14px);
     }
@@ -44,7 +44,7 @@ export class OxInputValueRange extends OxFormField {
     }
 
     div:last-child {
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
 
     div > * {
@@ -57,7 +57,7 @@ export class OxInputValueRange extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
+      padding: var(--spacing-small) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;

package/src/ox-input-work-shift.ts

@@ -53,7 +53,7 @@ export class OxInputWorkShift extends OxFormField {
     }
     [data-header] {
       background-color: rgba(var(--md-sys-color-on-primary-container-rgb), 0.05);
-      padding: var(--padding-narrow);
+      padding: var(--spacing-small);
     }
     [data-header] span {
       font: var(--label-font);
@@ -62,7 +62,7 @@ export class OxInputWorkShift extends OxFormField {
       text-align: center;
     }
     [data-record] {
-      margin-bottom: var(--margin-narrow);
+      margin-bottom: var(--spacing-small);
     }
     input,
     select {
@@ -88,7 +88,7 @@ export class OxInputWorkShift extends OxFormField {
       border: var(--button-border);
       border-radius: var(--border-radius);
       background-color: var(--button-background-color);
-      padding: var(--padding-narrow) var(--padding-default);
+      padding: var(--spacing-small) var(--padding-default);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;

package/stories/ox-buttons-radio.stories.ts

@@ -10,8 +10,7 @@ export default {
   component: 'ox-buttons-radio',
   argTypes: {
     value: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface Story<T> {
 interface ArgTypes {
   value?: string
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ value, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ value, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -67,10 +65,6 @@ const Template: Story<ArgTypes> = ({ value, disabled, theme = 'light' }: ArgType
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-buttons-radio
       @change=${(e: CustomEvent) => {
@@ -91,6 +85,5 @@ const Template: Story<ArgTypes> = ({ value, disabled, theme = 'light' }: ArgType
 export const Regular = Template.bind({})
 Regular.args = {
   value: '',
-  disabled: false,
-  theme: 'light'
+  disabled: false
 }

package/stories/ox-checkbox.stories.ts

@@ -2,7 +2,6 @@ import '@material/web/all.js'
 import '../src/ox-checkbox.js'
 
 import { TemplateResult, html } from 'lit'
-import { ifDefined } from 'lit/directives/if-defined.js'
 import { styles as MDTypeScaleStyles } from '@material/web/typography/md-typescale-styles'
 
 export default {
@@ -14,8 +13,7 @@ export default {
     value: { control: 'boolean' },
     indeterminatable: { control: 'boolean' },
     indeterminate: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -32,7 +30,6 @@ interface ArgTypes {
   indeterminatable?: boolean
   indeterminate?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -41,8 +38,7 @@ const Template: Story<ArgTypes> = ({
   value,
   indeterminatable = false,
   indeterminate = false,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -78,10 +74,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-checkbox
       @click=${(e: MouseEvent) => console.log('clicked')}
@@ -115,6 +107,5 @@ export const CustomIndeterminated = Template.bind({})
 CustomIndeterminated.args = {
   label: 'Indeterminated',
   indeterminatable: true,
-  indeterminate: true,
-  theme: 'light'
+  indeterminate: true
 }

package/stories/ox-input-3axis.stories.ts

@@ -9,8 +9,7 @@ export default {
   component: 'ox-input-3axis',
   argTypes: {
     value: { control: 'object' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -23,10 +22,9 @@ interface Story<T> {
 interface ArgTypes {
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ value = {}, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ value = {}, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -61,10 +59,6 @@ const Template: Story<ArgTypes> = ({ value = {}, disabled, theme = 'light' }: Ar
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-3axis
       @change=${(e: Event) => {

package/stories/ox-input-3dish.stories.ts

@@ -10,8 +10,7 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -25,10 +24,9 @@ interface ArgTypes {
   name?: string
   value?: object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -63,10 +61,6 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = [], disabled, theme
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />

package/stories/ox-input-angle.stories.ts

@@ -10,8 +10,7 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -25,10 +24,9 @@ interface ArgTypes {
   name?: string
   value?: number
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -63,10 +61,6 @@ const Template: Story<ArgTypes> = ({ name = '3dish', value = 0, disabled, theme
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />

package/stories/ox-input-barcode.stories.ts

@@ -13,8 +13,7 @@ export default {
     withoutEnter: { control: 'boolean' },
     englishOnly: { control: 'boolean' },
     selectAfterChange: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -32,7 +31,6 @@ interface ArgTypes {
   englishOnly?: boolean
   selectAfterChange?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -41,8 +39,7 @@ const Template: Story<ArgTypes> = ({
   withoutEnter = true,
   englishOnly = false,
   selectAfterChange = false,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -78,10 +75,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-barcode
       name=${name}

package/stories/ox-input-code.stories.ts

@@ -11,8 +11,7 @@ export default {
     name: { control: 'text' },
     language: { control: 'select', options: ['javascript', 'sql', 'json'] },
     showLineNumbers: { control: 'boolean' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -28,7 +27,6 @@ interface ArgTypes {
   language: 'javascript' | 'sql' | 'json'
   showLineNumbers?: boolean
   disabled?: boolean
-  theme?: string
 }
 
 const Template: Story<ArgTypes> = ({
@@ -36,8 +34,7 @@ const Template: Story<ArgTypes> = ({
   language = 'javascript',
   value = '',
   showLineNumbers,
-  disabled,
-  theme = 'light'
+  disabled
 }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
@@ -78,10 +75,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-code
       @change=${(e: Event) => {

package/stories/ox-input-crontab.stories.ts

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'text' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,15 +23,9 @@ interface ArgTypes {
   name?: string
   value?: string
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({
-  name = 'crontab',
-  value = '* * * * * *',
-  disabled,
-  theme = 'light'
-}: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'crontab', value = '* * * * * *', disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -67,10 +60,6 @@ const Template: Story<ArgTypes> = ({
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <br /><br />
 

package/stories/ox-input-data.stories.ts

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'text' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface ArgTypes {
   name?: string
   value?: string | number | object
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -56,7 +54,6 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme
       height: 500px;
       text-align: center;
       padding: 20px;
-
     }
 
     ox-input-data {
@@ -65,10 +62,6 @@ const Template: Story<ArgTypes> = ({ name = 'code', value = '', disabled, theme
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <ox-input-data
       @change=${(e: Event) => {

package/stories/ox-input-direction.stories.ts

@@ -9,8 +9,7 @@ export default {
   argTypes: {
     value: { control: 'object' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -24,10 +23,9 @@ interface ArgTypes {
   name?: string
   value?: object | string
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'options', value, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'options', value, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -62,10 +60,6 @@ const Template: Story<ArgTypes> = ({ name = 'options', value, disabled, theme =
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container">
     <ox-input-direction
       @change=${(e: Event) => {

package/stories/ox-input-duration.stories.ts

@@ -10,8 +10,7 @@ export default {
   argTypes: {
     value: { control: 'number' },
     name: { control: 'text' },
-    disabled: { control: 'boolean' },
-    theme: { control: 'select', options: ['light', 'dark'] }
+    disabled: { control: 'boolean' }
   }
 }
 
@@ -25,10 +24,9 @@ interface ArgTypes {
   name?: string
   value?: number
   disabled?: boolean
-  theme?: string
 }
 
-const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled, theme = 'light' }: ArgTypes) => html`
+const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled }: ArgTypes) => html`
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet" />
 
   <link href="/themes/light.css" rel="stylesheet" />
@@ -63,10 +61,6 @@ const Template: Story<ArgTypes> = ({ name = 'duration', value = 3601, disabled,
     }
   </style>
 
-  <script>
-    document.body.classList.add('${theme}')
-  </script>
-
   <div class="container md-typescale-body-large-prominent">
     <locale-picker></locale-picker>
     <br /><br />