@universal-material/web 3.0.63 → 3.0.65

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/custom-elements.json +4852 -4852
  2. package/field/field-base.d.ts.map +1 -1
  3. package/field/field-base.js +2 -0
  4. package/field/field-base.js.map +1 -1
  5. package/field/field-base.styles.js +3 -3
  6. package/field/field-base.styles.js.map +1 -1
  7. package/package.json +1 -1
  8. package/text-field/text-field.styles.js +2 -2
  9. package/text-field/text-field.styles.js.map +1 -1
package/field/field-base.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAO3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,MAAM,CAA8B;IAEhC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAEtD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,OAAO,UAAS;IAE1D,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAO7H;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACoE,YAAY,UAAS;IAG5F,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAEnC,YAAY,EAAG,WAAW,CAAC;IACvB,SAAS,EAAG,WAAW,CAAC;IAE7C,OAAO,CAAC,iBAAiB,CAA+B;;cAOrC,MAAM,IAAI,kBAAkB;IAqC/C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAWjB,oBAAoB;IAO7B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,OAAO,CAAC,uBAAuB;CAWhC"}
1
+ {"version":3,"file":"field-base.d.ts","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"AAAA,OAAO,EAAW,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC/D,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAO3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,8BAAsB,WAAY,SAAQ,UAAU;IAClD,OAAgB,MAAM,EAAE,cAAc,CAAwB;IAI9D,OAAO,CAAC,MAAM,CAA8B;IAEhC,OAAO,EAAE,QAAQ,GAAG,UAAU,GAAG,SAAS,CAAY;IAEtD,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IACE,cAAc,EAAE,MAAM,GAAG,SAAS,CAAC;IACxC,SAAS,EAAE,MAAM,GAAG,SAAS,CAAC;IAEzB,KAAK,UAAS;IACd,QAAQ,UAAS;IACjB,OAAO,UAAS;IAE1D,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,WAAW,EAAE,MAAM,EAAE,eAAe,GAAG,eAAe,CAAC,OAAO,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;IAO7H;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACoE,YAAY,UAAS;IAG5F,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAEnC,YAAY,EAAG,WAAW,CAAC;IACvB,SAAS,EAAG,WAAW,CAAC;IAE7C,OAAO,CAAC,iBAAiB,CAA+B;;cAOrC,MAAM,IAAI,kBAAkB;IAqC/C,SAAS,CAAC,QAAQ,CAAC,aAAa,IAAI,kBAAkB;IAE7C,iBAAiB;IAWjB,oBAAoB;IAO7B,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,OAAO,CAAC,uBAAuB;CAchC"}
package/field/field-base.js CHANGED
@@ -113,7 +113,9 @@ export class UmFieldBase extends LitElement {
113
113
  this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);
114
114
  if (!width) {
115
115
  this.container.classList.add('no-label');
116
+ return;
116
117
  }
118
+ this.container.classList.remove('no-label');
117
119
  }
118
120
  }
119
121
  UmFieldBase.styles = [baseStyles, styles];
package/field/field-base.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,OAAO,EAAW,eAAe,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,EAAE,IAAI,EAAsB,UAAU,EAAE,MAAM,KAAK,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAElF,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAChE,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAEhD,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAGnE,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAkBlD,MAAM,CAAC,WAAW,CAAC,WAAwB,EAAE,MAAuB;QAClE,OAAO,IAAI,eAAe,CAAC,WAAW,EAAE;YACtC,OAAO,EAAE,oBAAoB;YAC7B,YAAY,EAAE,MAAM;SACrB,CAAC,CAAC;IACL,CAAC;IAqCD;QACE,KAAK,EAAE,CAAC;QAtDE,YAAO,GAAsC,QAAQ,CAAC;QAOxB,UAAK,GAAG,KAAK,CAAC;QACd,aAAQ,GAAG,KAAK,CAAC;QACjB,YAAO,GAAG,KAAK,CAAC;QAS1D;;;;WAIG;QACsE,mBAAc,GAAG,KAAK,CAAC;QAEhG;;;;WAIG;QACuE,oBAAe,GAAG,KAAK,CAAC;QAElG;;;;WAIG;QACoE,iBAAY,GAAG,KAAK,CAAC;QAcpF,sBAAiB,GAA0B,IAAI,CAAC;QAItD,IAAI,CAAC,OAAO,GAAG,SAAS,CAAC;IAC3B,CAAC;IAEkB,MAAM;QACvB,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,EAAE,OAAO,IAAI,QAAQ;;;;yBAIrD,IAAI,CAAC,2BAA2B;;;+BAG1B,IAAI,CAAC,KAAK;;;YAG7B,IAAI,CAAC,aAAa,EAAE;;;;;yBAKP,IAAI,CAAC,4BAA4B;;;;;;;yBAOjC,IAAI,CAAC,yBAAyB;iBACtC,IAAI,CAAC,SAAS;;;iBAGd,IAAI,CAAC,cAAc;;;iBAGnB,IAAI,CAAC,OAAO;;;KAGxB,CAAC;IACJ,CAAC;IAIQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC;QAEzD,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,iBAAiB,GAAG,IAAI,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,uBAAuB,EAAE,CAAC,CAAA;YACjF,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAClD,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACjC,CAAC,CAAC,CAAC;IACL,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,CAAC,iBAAkB,CAAC,UAAU,EAAE,CAAC;QACrC,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC;IAChC,CAAC;IAEO,2BAA2B;QACjC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,GAAG,MAAM,CAAC;QAC5C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,oBAAoB,CAAC,MAAM,GAAG,CAAC,CAAC;QAE3D,UAAU,CAAC,GAAG,EAAE;YACd,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,UAAU,GAAG,EAAE,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC;IAEO,4BAA4B;QAClC,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,qBAAqB,CAAC,MAAM,GAAG,CAAC,CAAC;IAC/D,CAAC;IAEO,yBAAyB;QAC/B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,CAAC;IACzD,CAAC;IAEO,uBAAuB;QAE7B,MAAM,KAAK,GAAG,IAAI,CAAC,YAAY,CAAC,WAAW,CAAC;QAE5C,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,uBAAuB,EAAE,GAAG,KAAK,IAAI,CAAC,CAAC;QAC9D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,4BAA4B,EAAE,GAAG,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC;QAEvE,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;;AApJe,kBAAM,GAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,AAAvC,CAAwC;AAItD;IAFP,OAAO,CAAC,EAAC,OAAO,EAAE,oBAAoB,EAAE,SAAS,EAAE,IAAI,EAAC,CAAC;IACzD,KAAK,EAAE;2CACoC;AAEhC;IAAX,QAAQ,EAAE;4CAAuD;AAEtD;IAAX,QAAQ,EAAE;0CAA2B;AAC1B;IAAX,QAAQ,EAAE;4CAA6B;AACE;IAAzC,QAAQ,CAAC,EAAC,SAAS,EAAE,iBAAiB,EAAC,CAAC;mDAAoC;AACxC;IAApC,QAAQ,CAAC,EAAC,SAAS,EAAE,YAAY,EAAC,CAAC;8CAA+B;AAEzB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0CAAe;AACd;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;6CAAkB;AACjB;IAAzC,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;4CAAiB;AAce;IAAxE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;mDAAwB;AAOtB;IAAzE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;oDAAyB;AAO3B;IAAtE,QAAQ,CAAC,EAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;iDAAsB;AAG3E;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,cAAc,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;yDACP;AAGrC;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;0DACP;AAGtC;IADhB,qBAAqB,CAAC,EAAC,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,EAAC,CAAC;uDACP;AAEnC;IAAhB,KAAK,CAAC,QAAQ,CAAC;iDAA4B;AACvB;IAApB,KAAK,CAAC,YAAY,CAAC;8CAAyB","sourcesContent":["import { consume, Context, ContextProvider } from '@lit/context';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field-base.styles.js';\n\nimport { fieldDefaultsContext } from './field-defaults-context.js';\nimport { UmFieldDefaults } from './field-defaults.js';\n\nexport abstract class UmFieldBase extends LitElement {\n static override styles: CSSResultGroup = [baseStyles, styles];\n\n @consume({context: fieldDefaultsContext, subscribe: true})\n @state()\n private config: UmFieldDefaults | undefined;\n\n @property() variant: 'filled' | 'outlined' | undefined = 'filled';\n\n @property() label: string | undefined;\n @property() counter: string | undefined;\n @property({attribute: 'supporting-text'}) supportingText: string | undefined;\n @property({attribute: 'error-text'}) errorText: string | undefined;\n\n @property({type: Boolean, reflect: true}) empty = false;\n @property({type: Boolean, reflect: true}) disabled = false;\n @property({type: Boolean, reflect: true}) invalid = false;\n\n static setDefaults(contextRoot: HTMLElement, config: UmFieldDefaults): ContextProvider<Context<HTMLElement, UmFieldDefaults>> {\n return new ContextProvider(contextRoot, {\n context: fieldDefaultsContext,\n initialValue: config\n });\n }\n\n /**\n * Whether the field has a leading icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-leading-icon', reflect: true}) hasLeadingIcon = false;\n\n /**\n * Whether the field has a trailing icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-trailing-icon', reflect: true}) hasTrailingIcon = false;\n\n /**\n * Whether the field has an error text or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-error-text', reflect: true}) hasErrorText = false;\n\n @queryAssignedElements({slot: 'leading-icon', flatten: true})\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({slot: 'trailing-icon', flatten: true})\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @queryAssignedElements({slot: 'error-text', flatten: true})\n private readonly assignedErrorTexts!: HTMLElement[];\n\n @query('.label') labelElement!: HTMLElement;\n @query('.container') container!: HTMLElement;\n\n private labelSizeObserver: ResizeObserver | null = null;\n\n constructor() {\n super();\n this.variant = undefined;\n }\n\n protected override render(): HTMLTemplateResult {\n return html`\n <div class=\"container ${this.variant ?? this.config?.variant ?? 'filled'}\">\n <slot\n class=\"icon leading-icon\"\n name=\"leading-icon\"\n @slotchange=\"${this.handleLeadingIconSlotChange}\">\n </slot>\n <label class=\"label\" slot=\"label\" id=\"label\">\n <slot name=\"label\">${this.label}</slot>\n </label>\n <div class=\"input-wrapper\" part=\"wrapper\">\n ${this.renderControl()}\n </div>\n <slot\n class=\"icon trailing-icon\"\n name=\"trailing-icon\"\n @slotchange=\"${this.handleTrailingIconSlotChange}\">\n </slot>\n </div>\n <div class=\"supporting-text\" id=\"supporting-text\">\n <slot\n class=\"error-text\"\n name=\"error-text\"\n @slotchange=\"${this.handleErrorTextSlotChange}\">\n <div>${this.errorText}</div>\n </slot>\n <slot name=\"supporting-text\" id=\"supporting-text\">\n <div>${this.supportingText}</div>\n </slot>\n <slot class=\"counter\" name=\"counter\">\n <div>${this.counter}</div>\n </slot>\n </div>\n `;\n }\n\n protected abstract renderControl(): HTMLTemplateResult;\n\n override connectedCallback() {\n super.connectedCallback();\n this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n\n setTimeout(() => {\n this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties())\n this.labelSizeObserver.observe(this.labelElement);\n this.setLabelWidthProperties();\n });\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.labelSizeObserver!.disconnect();\n this.labelSizeObserver = null;\n }\n\n private handleLeadingIconSlotChange() {\n this.labelElement.style.transition = 'none';\n this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n setTimeout(() => {\n this.labelElement.style.transition = '';\n });\n }\n\n private handleTrailingIconSlotChange() {\n this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n private handleErrorTextSlotChange() {\n this.hasErrorText = this.assignedErrorTexts.length > 0;\n }\n\n private setLabelWidthProperties() {\n\n const width = this.labelElement.offsetWidth;\n\n this.style.setProperty('--u-field-label-width', `${width}px`);\n this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);\n\n if (!width) {\n this.container.classList.add('no-label');\n }\n }\n}\n"]}
1
+ {"version":3,"file":"field-base.js","sourceRoot":"","sources":["../../src/field/field-base.ts"],"names":[],"mappings":"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","sourcesContent":["import { consume, Context, ContextProvider } from '@lit/context';\nimport { CSSResultGroup } from '@lit/reactive-element/css-tag';\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { property, query, queryAssignedElements, state } from 'lit/decorators.js';\n\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field-base.styles.js';\n\nimport { fieldDefaultsContext } from './field-defaults-context.js';\nimport { UmFieldDefaults } from './field-defaults.js';\n\nexport abstract class UmFieldBase extends LitElement {\n static override styles: CSSResultGroup = [baseStyles, styles];\n\n @consume({context: fieldDefaultsContext, subscribe: true})\n @state()\n private config: UmFieldDefaults | undefined;\n\n @property() variant: 'filled' | 'outlined' | undefined = 'filled';\n\n @property() label: string | undefined;\n @property() counter: string | undefined;\n @property({attribute: 'supporting-text'}) supportingText: string | undefined;\n @property({attribute: 'error-text'}) errorText: string | undefined;\n\n @property({type: Boolean, reflect: true}) empty = false;\n @property({type: Boolean, reflect: true}) disabled = false;\n @property({type: Boolean, reflect: true}) invalid = false;\n\n static setDefaults(contextRoot: HTMLElement, config: UmFieldDefaults): ContextProvider<Context<HTMLElement, UmFieldDefaults>> {\n return new ContextProvider(contextRoot, {\n context: fieldDefaultsContext,\n initialValue: config\n });\n }\n\n /**\n * Whether the field has a leading icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-leading-icon', reflect: true}) hasLeadingIcon = false;\n\n /**\n * Whether the field has a trailing icon or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-trailing-icon', reflect: true}) hasTrailingIcon = false;\n\n /**\n * Whether the field has an error text or not\n *\n * _Note:_ Readonly\n */\n @property({type: Boolean, attribute: 'has-error-text', reflect: true}) hasErrorText = false;\n\n @queryAssignedElements({slot: 'leading-icon', flatten: true})\n private readonly assignedLeadingIcons!: HTMLElement[];\n\n @queryAssignedElements({slot: 'trailing-icon', flatten: true})\n private readonly assignedTrailingIcons!: HTMLElement[];\n\n @queryAssignedElements({slot: 'error-text', flatten: true})\n private readonly assignedErrorTexts!: HTMLElement[];\n\n @query('.label') labelElement!: HTMLElement;\n @query('.container') container!: HTMLElement;\n\n private labelSizeObserver: ResizeObserver | null = null;\n\n constructor() {\n super();\n this.variant = undefined;\n }\n\n protected override render(): HTMLTemplateResult {\n return html`\n <div class=\"container ${this.variant ?? this.config?.variant ?? 'filled'}\">\n <slot\n class=\"icon leading-icon\"\n name=\"leading-icon\"\n @slotchange=\"${this.handleLeadingIconSlotChange}\">\n </slot>\n <label class=\"label\" slot=\"label\" id=\"label\">\n <slot name=\"label\">${this.label}</slot>\n </label>\n <div class=\"input-wrapper\" part=\"wrapper\">\n ${this.renderControl()}\n </div>\n <slot\n class=\"icon trailing-icon\"\n name=\"trailing-icon\"\n @slotchange=\"${this.handleTrailingIconSlotChange}\">\n </slot>\n </div>\n <div class=\"supporting-text\" id=\"supporting-text\">\n <slot\n class=\"error-text\"\n name=\"error-text\"\n @slotchange=\"${this.handleErrorTextSlotChange}\">\n <div>${this.errorText}</div>\n </slot>\n <slot name=\"supporting-text\" id=\"supporting-text\">\n <div>${this.supportingText}</div>\n </slot>\n <slot class=\"counter\" name=\"counter\">\n <div>${this.counter}</div>\n </slot>\n </div>\n `;\n }\n\n protected abstract renderControl(): HTMLTemplateResult;\n\n override connectedCallback() {\n super.connectedCallback();\n this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n\n setTimeout(() => {\n this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties())\n this.labelSizeObserver.observe(this.labelElement);\n this.setLabelWidthProperties();\n });\n }\n\n override disconnectedCallback() {\n super.disconnectedCallback();\n\n this.labelSizeObserver!.disconnect();\n this.labelSizeObserver = null;\n }\n\n private handleLeadingIconSlotChange() {\n this.labelElement.style.transition = 'none';\n this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n setTimeout(() => {\n this.labelElement.style.transition = '';\n });\n }\n\n private handleTrailingIconSlotChange() {\n this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n }\n\n private handleErrorTextSlotChange() {\n this.hasErrorText = this.assignedErrorTexts.length > 0;\n }\n\n private setLabelWidthProperties() {\n\n const width = this.labelElement.offsetWidth;\n\n this.style.setProperty('--u-field-label-width', `${width}px`);\n this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);\n\n if (!width) {\n this.container.classList.add('no-label');\n return;\n }\n\n this.container.classList.remove('no-label');\n }\n}\n"]}
package/field/field-base.styles.js CHANGED
@@ -293,9 +293,9 @@ export const styles = css `
293
293
  :host([disabled]) .label {
294
294
  color: var(--u-field-label-disabled-color, var(--_disabled-color));
295
295
  }
296
- :host([disabled]) .input ::slotted(*) {
297
- color: var(--u-field-input-disabled-color, var(--_disabled-color));
298
- }
296
+ :host([disabled]) .input input,
297
+ :host([disabled]) .input input::placeholder,
298
+ :host([disabled]) .input ::slotted(*),
299
299
  :host([disabled]) .input ::slotted(:is(input, textarea))::placeholder {
300
300
  color: var(--u-field-input-disabled-color, var(--_disabled-color));
301
301
  }
package/field/field-base.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field-base.styles.js","sourceRoot":"","sources":["../../src/field/field-base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkTzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n --_label-line-height: var(--u-field-label-line-height, 1rem);\n --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n --_field-control-padding: var(--u-field-control-padding, 16px);\n --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n --_field-min-height: var(--u-field-min-height, 56px);\n --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));\n --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n --_active-indicator-opacity: 1;\n --_vertical-padding: var(--u-field-vertical-padding, 8px);\n --_icon-size: var(--u-field-icon-size, 1.5rem);\n --_icon-padding: var(--u-field-icon-padding, 12px);\n --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n --_field-control-leading-padding: var(--_field-control-inline-padding);\n --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n --u-label-input-start: auto;\n --u-label-input-span-leading-offset: 0;\n --u-label-input-span-trailing-offset: 0;\n --u-text-field-horizontal-padding: 12px;\n display: block;\n }\n\n .container {\n display: flex;\n align-items: center;\n position: relative;\n }\n .container::before, .container::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n pointer-events: none;\n }\n .container::before {\n background: var(--u-color-on-surface, rgb(29, 27, 32));\n transition: opacity 150ms;\n opacity: 0;\n }\n .container::after {\n border-width: var(--u-field-border-width, 1px);\n border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n @media (hover: hover) {\n :host(:not([disabled]):not([invalid]):hover) .container.filled::before {\n opacity: var(--u-state-hover-opacity, 0.08);\n }\n :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .container::after {\n border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n }\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--_icon-size);\n color: var(--_icon-color);\n font-size: var(--_icon-size);\n line-height: var(--_icon-size);\n }\n .icon::slotted(*) {\n flex-shrink: 0;\n }\n\n .leading-icon {\n margin-inline-start: var(--_icon-padding);\n }\n\n .trailing-icon {\n margin-inline-end: var(--_icon-padding);\n }\n\n .label {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n display: block;\n position: absolute;\n inset-inline-start: var(--_field-control-leading-padding);\n margin-bottom: 0;\n line-height: var(--_label-line-height);\n color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n transition: inset 200ms, font-size 200ms;\n }\n\n .input-wrapper {\n display: flex;\n align-items: center;\n flex: 1;\n padding-block: var(--_vertical-padding);\n padding-inline: var(--_field-control-inline-padding);\n min-height: var(--_field-min-height);\n transition: opacity 150ms;\n }\n\n .input {\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n flex: 1;\n }\n .input:focus {\n outline: 0;\n }\n .input input,\n .input ::slotted(*) {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n display: block;\n width: 100%;\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n min-height: var(--_control-line-height);\n line-height: var(--_control-line-height);\n padding: 0;\n margin: 0;\n appearance: none;\n background: transparent;\n border: none;\n outline: 0 !important;\n }\n .input,\n .input ::slotted(select),\n .input ::slotted(:is(input, textarea))::placeholder {\n transition: color 150ms 100ms;\n }\n .input ::slotted(:is(input, textarea))::placeholder {\n color: var(--_field-placeholder-color);\n }\n\n .supporting-text {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n display: flex;\n color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n padding-inline: 16px;\n gap: 16px;\n }\n .supporting-text div:empty {\n display: none;\n }\n .supporting-text div,\n .supporting-text ::slotted(*) {\n display: inline-block;\n margin-top: 4px;\n }\n\n .error-text {\n display: none;\n }\n\n .counter div, .counter::slotted(*) {\n margin-inline-start: auto;\n }\n\n :host([has-leading-icon]) {\n --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host(:not([has-leading-icon])) .leading-icon {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing-icon {\n display: none;\n }\n\n :host(:focus-within) {\n --u-field-border-width: var(--_focus-border-width);\n }\n :host(:focus-within) .container::after {\n border-color: var(--u-field-focused-border-color, var(--_color-primary));\n }\n :host(:focus-within) .label {\n color: var(--u-field-label-focused-color, var(--_color-primary));\n }\n\n :host([invalid]) .container::after {\n border-color: var(--u-field-error-border-color, var(--_color-error));\n }\n :host([invalid]) .label {\n color: var(--u-field-label-error-color, var(--_color-error));\n }\n :host([invalid]) .supporting-text {\n color: var(--u-field-supporting-text-error-color, var(--_color-error));\n }\n :host([invalid]) .trailing-icon {\n color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n }\n :host([invalid]) .leading-icon {\n color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n }\n\n :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) .error-text,\n :host([invalid][has-error-text]) .error-text {\n display: contents;\n }\n :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) slot[name=supporting-text],\n :host([invalid][has-error-text]) slot[name=supporting-text] {\n display: none;\n }\n\n .container.filled {\n border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n }\n .container.filled::after {\n border-bottom-style: solid;\n }\n .container.filled:not(.no-label) .input-wrapper {\n padding-top: calc(var(--_vertical-padding) + var(--_label-line-height));\n padding-bottom: var(--_vertical-padding);\n }\n .container.filled .label {\n top: var(--_vertical-padding);\n }\n .container.filled .input ::slotted(:is(input, textarea, select, button)) {\n display: block;\n }\n .container.outlined::after {\n --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n border-style: solid;\n clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n transition: clip-path 100ms;\n }\n .container.outlined .label {\n top: calc(var(--_label-line-height) / -2);\n }\n\n .container.outlined:focus-within::after,\n :host(:not([empty])) .container.outlined::after {\n --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n }\n .container.outlined:focus-within .label,\n :host(:not([empty])) .container.outlined .label {\n inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n }\n\n :host([empty]) ::slotted(select) {\n color: var(--_field-placeholder-color);\n }\n\n :host([empty]:not(:focus-within)) .label {\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n pointer-events: none;\n top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n }\n :host([empty]:not(:focus-within)) .input-wrapper {\n opacity: 0;\n }\n :host([empty]:not(:focus-within)) .input,\n :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n :host([empty]:not(:focus-within)) ::slotted(select) {\n color: transparent;\n transition: color 150ms;\n }\n\n .container.no-label::after {\n clip-path: none !important;\n }\n\n :host([disabled]) .container .filled {\n background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));\n }\n :host([disabled]) .container::after {\n border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n }\n :host([disabled]) .supporting-text {\n color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .label {\n color: var(--u-field-label-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input ::slotted(*) {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input ::slotted(:is(input, textarea))::placeholder {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .trailing-icon {\n color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .leading-icon {\n color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n }\n`;\n"]}
1
+ {"version":3,"file":"field-base.styles.js","sourceRoot":"","sources":["../../src/field/field-base.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkTzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n :host {\n --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n --_label-line-height: var(--u-field-label-line-height, 1rem);\n --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n --_field-control-padding: var(--u-field-control-padding, 16px);\n --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n --_field-min-height: var(--u-field-min-height, 56px);\n --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, .38)));\n --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n --_active-indicator-opacity: 1;\n --_vertical-padding: var(--u-field-vertical-padding, 8px);\n --_icon-size: var(--u-field-icon-size, 1.5rem);\n --_icon-padding: var(--u-field-icon-padding, 12px);\n --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n --_field-control-leading-padding: var(--_field-control-inline-padding);\n --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n --u-label-input-start: auto;\n --u-label-input-span-leading-offset: 0;\n --u-label-input-span-trailing-offset: 0;\n --u-text-field-horizontal-padding: 12px;\n display: block;\n }\n\n .container {\n display: flex;\n align-items: center;\n position: relative;\n }\n .container::before, .container::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n pointer-events: none;\n }\n .container::before {\n background: var(--u-color-on-surface, rgb(29, 27, 32));\n transition: opacity 150ms;\n opacity: 0;\n }\n .container::after {\n border-width: var(--u-field-border-width, 1px);\n border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n }\n\n @media (hover: hover) {\n :host(:not([disabled]):not([invalid]):hover) .container.filled::before {\n opacity: var(--u-state-hover-opacity, 0.08);\n }\n :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .container::after {\n border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n }\n }\n .icon {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: var(--_icon-size);\n color: var(--_icon-color);\n font-size: var(--_icon-size);\n line-height: var(--_icon-size);\n }\n .icon::slotted(*) {\n flex-shrink: 0;\n }\n\n .leading-icon {\n margin-inline-start: var(--_icon-padding);\n }\n\n .trailing-icon {\n margin-inline-end: var(--_icon-padding);\n }\n\n .label {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n display: block;\n position: absolute;\n inset-inline-start: var(--_field-control-leading-padding);\n margin-bottom: 0;\n line-height: var(--_label-line-height);\n color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n transition: inset 200ms, font-size 200ms;\n }\n\n .input-wrapper {\n display: flex;\n align-items: center;\n flex: 1;\n padding-block: var(--_vertical-padding);\n padding-inline: var(--_field-control-inline-padding);\n min-height: var(--_field-min-height);\n transition: opacity 150ms;\n }\n\n .input {\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n flex: 1;\n }\n .input:focus {\n outline: 0;\n }\n .input input,\n .input ::slotted(*) {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n display: block;\n width: 100%;\n color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n min-height: var(--_control-line-height);\n line-height: var(--_control-line-height);\n padding: 0;\n margin: 0;\n appearance: none;\n background: transparent;\n border: none;\n outline: 0 !important;\n }\n .input,\n .input ::slotted(select),\n .input ::slotted(:is(input, textarea))::placeholder {\n transition: color 150ms 100ms;\n }\n .input ::slotted(:is(input, textarea))::placeholder {\n color: var(--_field-placeholder-color);\n }\n\n .supporting-text {\n font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n display: flex;\n color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n padding-inline: 16px;\n gap: 16px;\n }\n .supporting-text div:empty {\n display: none;\n }\n .supporting-text div,\n .supporting-text ::slotted(*) {\n display: inline-block;\n margin-top: 4px;\n }\n\n .error-text {\n display: none;\n }\n\n .counter div, .counter::slotted(*) {\n margin-inline-start: auto;\n }\n\n :host([has-leading-icon]) {\n --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n }\n\n :host(:not([has-leading-icon])) .leading-icon {\n display: none;\n }\n\n :host(:not([has-trailing-icon])) .trailing-icon {\n display: none;\n }\n\n :host(:focus-within) {\n --u-field-border-width: var(--_focus-border-width);\n }\n :host(:focus-within) .container::after {\n border-color: var(--u-field-focused-border-color, var(--_color-primary));\n }\n :host(:focus-within) .label {\n color: var(--u-field-label-focused-color, var(--_color-primary));\n }\n\n :host([invalid]) .container::after {\n border-color: var(--u-field-error-border-color, var(--_color-error));\n }\n :host([invalid]) .label {\n color: var(--u-field-label-error-color, var(--_color-error));\n }\n :host([invalid]) .supporting-text {\n color: var(--u-field-supporting-text-error-color, var(--_color-error));\n }\n :host([invalid]) .trailing-icon {\n color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n }\n :host([invalid]) .leading-icon {\n color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n }\n\n :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) .error-text,\n :host([invalid][has-error-text]) .error-text {\n display: contents;\n }\n :host([invalid]) .supporting-text:has(.error-text div:not(:empty)) slot[name=supporting-text],\n :host([invalid][has-error-text]) slot[name=supporting-text] {\n display: none;\n }\n\n .container.filled {\n border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n background-color: var(--u-color-surface-container-highest, rgb(230, 224, 233));\n }\n .container.filled::after {\n border-bottom-style: solid;\n }\n .container.filled:not(.no-label) .input-wrapper {\n padding-top: calc(var(--_vertical-padding) + var(--_label-line-height));\n padding-bottom: var(--_vertical-padding);\n }\n .container.filled .label {\n top: var(--_vertical-padding);\n }\n .container.filled .input ::slotted(:is(input, textarea, select, button)) {\n display: block;\n }\n .container.outlined::after {\n --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n border-style: solid;\n clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n transition: clip-path 100ms;\n }\n .container.outlined .label {\n top: calc(var(--_label-line-height) / -2);\n }\n\n .container.outlined:focus-within::after,\n :host(:not([empty])) .container.outlined::after {\n --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n }\n .container.outlined:focus-within .label,\n :host(:not([empty])) .container.outlined .label {\n inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n }\n\n :host([empty]) ::slotted(select) {\n color: var(--_field-placeholder-color);\n }\n\n :host([empty]:not(:focus-within)) .label {\n font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n pointer-events: none;\n top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n }\n :host([empty]:not(:focus-within)) .input-wrapper {\n opacity: 0;\n }\n :host([empty]:not(:focus-within)) .input,\n :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n :host([empty]:not(:focus-within)) ::slotted(select) {\n color: transparent;\n transition: color 150ms;\n }\n\n .container.no-label::after {\n clip-path: none !important;\n }\n\n :host([disabled]) .container .filled {\n background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-filled-field-background-disabled-opacity, 0.04)));\n }\n :host([disabled]) .container::after {\n border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n }\n :host([disabled]) .supporting-text {\n color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .label {\n color: var(--u-field-label-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .input input,\n :host([disabled]) .input input::placeholder,\n :host([disabled]) .input ::slotted(*),\n :host([disabled]) .input ::slotted(:is(input, textarea))::placeholder {\n color: var(--u-field-input-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .trailing-icon {\n color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n }\n :host([disabled]) .leading-icon {\n color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n }\n`;\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@universal-material/web",
3
- "version": "3.0.63",
3
+ "version": "3.0.65",
4
4
  "description": "Material web components",
5
5
  "type": "module",
6
6
  "keywords": [
package/text-field/text-field.styles.js CHANGED
@@ -17,10 +17,10 @@ export const styles = css `
17
17
  margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));
18
18
  }
19
19
 
20
- :host([disabled]) .prefix::slotted(*) {
20
+ :host([disabled]) .prefix span, :host([disabled]) .prefix::slotted(*) {
21
21
  color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));
22
22
  }
23
- :host([disabled]) .suffix::slotted(*) {
23
+ :host([disabled]) .suffix span, :host([disabled]) .suffix::slotted(*) {
24
24
  color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));
25
25
  }
26
26
  `;
package/text-field/text-field.styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"text-field.styles.js","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n .prefix span:empty,\n .suffix span:empty {\n display: none;\n }\n\n .prefix::slotted(*),\n .prefix span {\n color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));\n }\n\n .suffix::slotted(*),\n .suffix span {\n color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));\n }\n\n :host([disabled]) .prefix::slotted(*) {\n color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n }\n :host([disabled]) .suffix::slotted(*) {\n color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n }\n`;\n"]}
1
+ {"version":3,"file":"text-field.styles.js","sourceRoot":"","sources":["../../src/text-field/text-field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;CAwBzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n .prefix span:empty,\n .suffix span:empty {\n display: none;\n }\n\n .prefix::slotted(*),\n .prefix span {\n color: var(--u-field-prefix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n margin-inline-end: var(--u-prefix-margin, var(--u-affix-margin, 2px));\n }\n\n .suffix::slotted(*),\n .suffix span {\n color: var(--u-field-suffix-color, var(--u-field-affix-color, var(--u-color-on-surface-variant, rgb(73, 69, 79))));\n margin-inline-start: var(--u-suffix-margin, var(--u-affix-margin, 2px));\n }\n\n :host([disabled]) .prefix span, :host([disabled]) .prefix::slotted(*) {\n color: var(--u-text-field-prefix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n }\n :host([disabled]) .suffix span, :host([disabled]) .suffix::slotted(*) {\n color: var(--u-text-field-suffix-color, var(--u-text-field-affix-color, rgba(var(--u-color-on-surface-rgb, 29, 27, 32), var(--u-field-disabled-opacity, 0.38))));\n }\n`;\n"]}