@knowark/componarkjs 1.10.3 → 1.11.0

package/lib/base/styles/styles.js

@@ -2,7 +2,9 @@ const userActions = ['-hover', '-active']
 
 const formActions = ['-focus-within', '-valid', '-invalid', '-checked']
 
-const actions = ['', ...userActions, ...formActions]
+const attributes  = ['[disabled]', '[open]', '[required]', '[readonly]']
+
+const actions = ['', ...userActions, ...formActions, ...attributes]
 
 const sides = ['', '-top', '-right', '-bottom', '-left']
 
@@ -13,6 +15,8 @@ const mutableProperties = [
 const effects = [
   'animation', 'filter', 'mix-blend-mode', 'transition', 'transform']
 
+const tie = (action) => action.replace('[', '-').replace(']', '')
+
 const css = String.raw; export default css`
 * {
   margin: 0;
@@ -90,13 +94,13 @@ html {
 /* COLORS */
 
 ${actions.map(action => css`
-[style*='--color${action}:']${action.replace('-', ':')} {
-  color: var(--color${action});
+[style*='--color${tie(action)}:']${action.replace('-', ':')} {
+  color: var(--color${tie(action)});
 }
 `.trim()).join('\n')}
 ${actions.map(action => css`
-[style*='--background${action}:']${action.replace('-', ':')} {
-  background: var(--background${action});
+[style*='--background${tie(action)}:']${action.replace('-', ':')} {
+  background: var(--background${tie(action)});
 }
 `.trim()).join('\n')}
 
@@ -239,34 +243,34 @@ ${sides.filter(Boolean).map(side => css`
 /* BORDERS */
 
 ${actions.map(action => css`
-[style*='--border-style${action}:']${action.replace('-', ':')} {
-  border-style: var(--border-style${action});
+[style*='--border-style${tie(action)}:']${action.replace('-', ':')} {
+  border-style: var(--border-style${tie(action)});
 }
-[style*='--border-width${action}:']${action.replace('-', ':')} {
-  border-width: var(--border-width${action});
+[style*='--border-width${tie(action)}:']${action.replace('-', ':')} {
+  border-width: var(--border-width${tie(action)});
 }
-[style*='--border-color${action}:']${action.replace('-', ':')} {
-  border-color: var(--border-color${action});
+[style*='--border-color${tie(action)}:']${action.replace('-', ':')} {
+  border-color: var(--border-color${tie(action)});
 }
-[style*='--border-radius${action}:']${action.replace('-', ':')} {
-  border-radius: var(--border-radius${action});
+[style*='--border-radius${tie(action)}:']${action.replace('-', ':')} {
+  border-radius: var(--border-radius${tie(action)});
 }
 `.trim()).join('\n')}
 
 ${actions.map(action => css`
-[style*='--outline${action}:']${action.replace('-', ':')} {
-  outline: var(--outline${action});
+[style*='--outline${tie(action)}:']${action.replace('-', ':')} {
+  outline: var(--outline${tie(action)});
 }
 `.trim()).join('\n')}
 
 /* SHADOWS */
 
 ${actions.map(action => css`
-[style*='--box-shadow${action}:']${action.replace('-', ':')} {
+[style*='--box-shadow${tie(action)}:']${action.replace('-', ':')} {
   box-shadow: 0
-    calc(var(--box-shadow-offset-step) * var(--box-shadow${action}))
-    calc(var(--box-shadow-blur-step) * var(--box-shadow${action}))
-    calc(var(--box-shadow-spread-step) * var(--box-shadow${action}))
+    calc(var(--box-shadow-offset-step) * var(--box-shadow${tie(action)}))
+    calc(var(--box-shadow-blur-step) * var(--box-shadow${tie(action)}))
+    calc(var(--box-shadow-spread-step) * var(--box-shadow${tie(action)}))
     var(--box-shadow-color);
 }
 `.trim()).join('\n')}
@@ -274,8 +278,8 @@ ${actions.map(action => css`
 /* EFFECTS */
 
 ${effects.map(effect => actions.map(action => css`
-[style*='--${effect}${action}:']${action.replace('-', ':')} {
-  ${effect}: var(--${effect}${action});
+[style*='--${effect}${tie(action)}:']${action.replace('-', ':')} {
+  ${effect}: var(--${effect}${tie(action)});
 }
 `.trim())).flat().join('\n')}
 
@@ -283,22 +287,22 @@ ${effects.map(effect => actions.map(action => css`
 
 ${[...mutableProperties, ...effects].map(
   effect => actions.map(action => css`
-*${action.replace('-', ':')} > [style*='--${effect}-parent${action}:'] {
-  ${effect}: var(--${effect}-parent${action});
+*${action.replace('-', ':')} > [style*='--${effect}-parent${tie(action)}:'] {
+  ${effect}: var(--${effect}-parent${tie(action)});
 }
 `.trim())).flat().join('\n')}
 
 ${[...mutableProperties, ...effects].map(
   effect => actions.map(action => css`
-*${action.replace('-', ':')} + [style*='--${effect}-sibling${action}:'] {
-  ${effect}: var(--${effect}-sibling${action});
+*${action.replace('-', ':')} + [style*='--${effect}-sibling${tie(action)}:'] {
+  ${effect}: var(--${effect}-sibling${tie(action)});
 }
 `.trim())).flat().join('\n')}
 
 ${[...mutableProperties, ...effects].map(
   effect => actions.map(action => css`
-*${action.replace('-', ':')} ~ [style*='--${effect}-antecessor${action}:'] {
-  ${effect}: var(--${effect}-antecessor${action});
+*${action.replace('-',':')} ~ [style*='--${effect}-antecessor${tie(action)}:'] {
+  ${effect}: var(--${effect}-antecessor${tie(action)});
 }
 `.trim())).flat().join('\n')}
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knowark/componarkjs",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "author": "Knowark",
   "description": "Knowark's Web Components Library",
   "license": "ISC",