@public-ui/theme-bwst 2.2.10-rc.1 → 2.2.11-d5dad25b9084a461f833a47372b0ec3c24bc5d73.0

package/dist/index.mjs

@@ -1,6 +1,67 @@
 /*!
  * KoliBri - The accessible HTML-Standard
  */
+let DEV_MODE = false;
+const getDevMode = () => DEV_MODE === true;
+const LOG_STYLE = 'color: white; background: #666; font-weight: bold; padding: .25em .5em; border-radius: 3px; border: 1px solid #000';
+const mapToArray = (msg) => {
+    return Array.isArray(msg) ? msg : [msg];
+};
+const getLogLabel = (label) => {
+    return `%c${label}`;
+};
+const handleClassifier = (label, classifier) => {
+    if (typeof classifier === 'string' && classifier.length > 0) {
+        return `${getLogLabel(label)} | ${classifier}`;
+    }
+    else {
+        return getLogLabel(label);
+    }
+};
+const getShield = (label, options) => {
+    return [handleClassifier(label, options === null || options === void 0 ? void 0 : options.classifier), `${LOG_STYLE};${(options === null || options === void 0 ? void 0 : options.overwriteStyle) || ''}`];
+};
+const isDevModeOrForceLog = (devMode, forceLog) => devMode() || forceLog === true;
+class Logger {
+    constructor(label, devMode) {
+        this.label = label;
+        this.devMode = devMode;
+    }
+    debug(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.debug(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+    info(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.info(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+    trace(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.trace(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+    warn(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            console.warn(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+    error(msg, options) {
+        console.error(...getShield(this.label, options), ...mapToArray(msg));
+    }
+    throw(msg, options) {
+        if (isDevModeOrForceLog(this.devMode, options === null || options === void 0 ? void 0 : options.forceLog)) {
+            throw new Error(...getShield(this.label, options), ...mapToArray(msg));
+        }
+    }
+}
+const Log = new Logger('KoliBri', getDevMode);
+
+/*!
+ * KoliBri - The accessible HTML-Standard
+ */
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 var loglevel = {exports: {}};
@@ -362,7 +423,245 @@ var loglevel = {exports: {}};
 }));
 }(loglevel));
 
-const j=(t,e)=>s=>s(t,e),H=(t,e)=>s=>s(t,e,{append:false}),M=new Map,Y=[],$=new Map,o={A11yUi:{CSS_STYLE_CACHE:M,HYDRATED_HISTORY:Y,STYLING_TASK_QUEUE:$,Themes:{}}};const C=new Set,F=/--[^;]+/g,V=/:/,q=(t,e)=>{let s=e.match(F);if(Array.isArray(s)){s=s.filter(r=>V.test(r));const a=document.createElement("style");a.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}C.add(t);},f=(t,e)=>typeof o.A11yUi=="object"&&o.A11yUi!==null&&typeof o.A11yUi.Themes=="object"&&o.A11yUi.Themes!==null&&typeof o.A11yUi.Themes[t]=="object"&&o.A11yUi.Themes[t]!==null&&typeof o.A11yUi.Themes[t][e]=="string"?o.A11yUi.Themes[t][e].replace(/\r?\n/g,""):"",J=t=>{for(const e of Array.from(t.childNodes))if(e instanceof HTMLStyleElement&&e.tagName==="STYLE"&&e.dataset.themingFallback===void 0)t.removeChild(e);else break},W=(t,e)=>{try{if(o.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];e.forEach(a=>{const r=new CSSStyleSheet;r.replaceSync(a),s.push(r);}),t.adoptedStyleSheets=s;}catch{[...e].reverse().forEach((a,r)=>{if(typeof a!="string"||a.length===0)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",r){case 4:n.dataset.themingBaseA11y="";break;case 3:n.dataset.themingBaseGlobal="";break;case 2:n.dataset.themingBaseComponent="";break;case 1:n.dataset.themingCustomGlobal="";break;case 0:n.dataset.themingCustomComponent="";break;default:n.dataset.themingUnknown="";break}n.innerHTML=a,t.insertBefore(n,t.firstChild);});}},X=(t,e,s)=>{if(s!==false){const a=[...Array.from(t.childNodes).filter(n=>n instanceof HTMLStyleElement&&n.tagName==="STYLE")];let r;try{r=[...Array.from(t.adoptedStyleSheets)];}catch{r=[];}s?.mode==="before"?(a.reverse().forEach(n=>e.unshift(n.innerHTML)),r.reverse().forEach(n=>e.unshift(Array.from(n.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(n=>e.push(n.innerHTML)),r.forEach(n=>e.push(Array.from(n.cssRules).map(i=>i.cssText).join(""))));}},w=(t,e,s)=>{const a=e.name||"default";let r;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");r=t.shadowRoot;}catch{r=t;}if(o.A11yUi.CSS_STYLE_CACHE.get(a)?.has(t.tagName))L(t,r,o.A11yUi.CSS_STYLE_CACHE.get(a)?.get(t.tagName),s);else {const n=f(a,"PROPERTIES"),i=f(a,"GLOBAL"),c=f(a,t.tagName);C.has(a)===false&&q(a,i);const m=[n,i,c];X(r,m,e.encroachCss),e.loglevel==="debug"&&console.log(t.tagName,m),e.cache===true&&(o.A11yUi.CSS_STYLE_CACHE.has(a)===false&&o.A11yUi.CSS_STYLE_CACHE.set(a,new Map),o.A11yUi.CSS_STYLE_CACHE.get(a)?.set(t.tagName,m)),L(t,r,m,s);}},L=(t,e,s,a)=>{J(e),W(e,s),t.style.visibility=a;},v=t=>{t.loglevel==="debug"&&o.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:o.A11yUi.STYLING_TASK_QUEUE.size});},te=t=>{o.A11yUi.STYLING_TASK_QUEUE.delete(t);},_=(t,e)=>{te(t),v(e);},se=t=>{for(const e of t)if(o.A11yUi.STYLING_TASK_QUEUE.has(e.target)&&e.target.classList.contains("hydrated")){const{styleVisibility:s,themeDetails:a}=o.A11yUi.STYLING_TASK_QUEUE.get(e.target);w(e.target,a,s),_(e.target,a);}};let d;try{d=new MutationObserver(se);}catch{d=null;}class ne{Prefix;Key;Tag;createTheme=(e,s)=>H(e,s);createTranslation=(e,s)=>j(e,s);constructor(e,s,a){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
+const j=(t,e)=>s=>s(t,e),H=(t,e)=>s=>s(t,e,{append:false}),M=new Map,Y=[],$=new Map,o$1={A11yUi:{CSS_STYLE_CACHE:M,HYDRATED_HISTORY:Y,STYLING_TASK_QUEUE:$,Themes:{}}};const C=new Set,F=/--[^;]+/g,V=/:/,q=(t,e)=>{let s=e.match(F);if(Array.isArray(s)){s=s.filter(r=>V.test(r));const a=document.createElement("style");a.innerHTML=`.${t} {${s.join(";")}}`,document.querySelector("head")?.appendChild(a);}C.add(t);},f$1=(t,e)=>typeof o$1.A11yUi=="object"&&o$1.A11yUi!==null&&typeof o$1.A11yUi.Themes=="object"&&o$1.A11yUi.Themes!==null&&typeof o$1.A11yUi.Themes[t]=="object"&&o$1.A11yUi.Themes[t]!==null&&typeof o$1.A11yUi.Themes[t][e]=="string"?o$1.A11yUi.Themes[t][e].replace(/\r?\n/g,""):"",J=t=>{for(const e of Array.from(t.childNodes))if(e instanceof HTMLStyleElement&&e.tagName==="STYLE"&&e.dataset.themingFallback===void 0)t.removeChild(e);else break},W=(t,e)=>{try{if(o$1.A11yUi.Theme?.mode==="ssr")throw new Error("SSR");const s=[];e.forEach(a=>{const r=new CSSStyleSheet;r.replaceSync(a),s.push(r);}),t.adoptedStyleSheets=s;}catch{[...e].reverse().forEach((a,r)=>{if(typeof a!="string"||a.length===0)return;const n=document.createElement("style");switch(n.dataset.themingFallback="",r){case 4:n.dataset.themingBaseA11y="";break;case 3:n.dataset.themingBaseGlobal="";break;case 2:n.dataset.themingBaseComponent="";break;case 1:n.dataset.themingCustomGlobal="";break;case 0:n.dataset.themingCustomComponent="";break;default:n.dataset.themingUnknown="";break}n.innerHTML=a,t.insertBefore(n,t.firstChild);});}},X=(t,e,s)=>{if(s!==false){const a=[...Array.from(t.childNodes).filter(n=>n instanceof HTMLStyleElement&&n.tagName==="STYLE")];let r;try{r=[...Array.from(t.adoptedStyleSheets)];}catch{r=[];}s?.mode==="before"?(a.reverse().forEach(n=>e.unshift(n.innerHTML)),r.reverse().forEach(n=>e.unshift(Array.from(n.cssRules).map(i=>i.cssText).join("")))):s?.mode==="after"&&(a.forEach(n=>e.push(n.innerHTML)),r.forEach(n=>e.push(Array.from(n.cssRules).map(i=>i.cssText).join(""))));}},w=(t,e,s)=>{const a=e.name||"default";let r;try{if(t.shadowRoot===null)throw new Error("ShadowRoot is null");r=t.shadowRoot;}catch{r=t;}if(o$1.A11yUi.CSS_STYLE_CACHE.get(a)?.has(t.tagName))L(t,r,o$1.A11yUi.CSS_STYLE_CACHE.get(a)?.get(t.tagName),s);else {const n=f$1(a,"PROPERTIES"),i=f$1(a,"GLOBAL"),c=f$1(a,t.tagName);C.has(a)===false&&q(a,i);const m=[n,i,c];X(r,m,e.encroachCss),e.loglevel==="debug"&&console.log(t.tagName,m),e.cache===true&&(o$1.A11yUi.CSS_STYLE_CACHE.has(a)===false&&o$1.A11yUi.CSS_STYLE_CACHE.set(a,new Map),o$1.A11yUi.CSS_STYLE_CACHE.get(a)?.set(t.tagName,m)),L(t,r,m,s);}},L=(t,e,s,a)=>{J(e),W(e,s),t.style.visibility=a;},v=t=>{t.loglevel==="debug"&&o$1.A11yUi.HYDRATED_HISTORY.push({timestamp:Date.now(),numberOfTasks:o$1.A11yUi.STYLING_TASK_QUEUE.size});},te=t=>{o$1.A11yUi.STYLING_TASK_QUEUE.delete(t);},_=(t,e)=>{te(t),v(e);},se=t=>{for(const e of t)if(o$1.A11yUi.STYLING_TASK_QUEUE.has(e.target)&&e.target.classList.contains("hydrated")){const{styleVisibility:s,themeDetails:a}=o$1.A11yUi.STYLING_TASK_QUEUE.get(e.target);w(e.target,a,s),_(e.target,a);}};try{new MutationObserver(se);}catch{}class ne{Prefix;Key;Tag;createTheme=(e,s)=>H(e,s);createTranslation=(e,s)=>j(e,s);constructor(e,s,a){this.Prefix=e,this.Key=Object.getOwnPropertyNames(s),this.Tag=Object.getOwnPropertyNames(a);}}
+const devCache = new Set();
+const devHint = (msg, options) => {
+    if (devCache.has(msg) === false || false) {
+        devCache.add(msg);
+        Log.debug([msg].concat([]), {
+            classifier: `💻 dev`,
+            forceLog: false,
+            overwriteStyle: '; background-color: #f09',
+        });
+    }
+};
+devHint(`We appreciate any feedback, comments, screenshots, or demo links of an application based on KoliBri (kolibri@itzbund.de). Thank you!`);
+
+var rgbaConvert = {exports: {}};
+
+rgbaConvert.exports     = arr;
+rgbaConvert.exports.arr = arr;
+rgbaConvert.exports.obj = obj;
+rgbaConvert.exports.css = css;
+rgbaConvert.exports.hex = hex;
+rgbaConvert.exports.num = num;
+
+function arr(data) {
+  var a = parse(data);
+  if (a.length == 3) {
+    return a.concat(255)
+  } else {
+    a[3] = Math.round(a[3]);
+    return a
+  }
+}
+
+function obj(data) {
+  var a = parse(data);
+  return {
+    r: a[0],
+    g: a[1],
+    b: a[2],
+    a: a.length == 3
+      ? 255
+      : Math.round(a[3])
+  }
+}
+
+function css(data) {
+  var a = parse(data);
+  if (a.length == 3) a.push(255);
+
+  return a[3] == 255
+    ? 'rgb(' + a[0] + ', ' + a[1] + ', ' + a[2] + ')'
+    : a[3] == 0
+      ? 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', 0)'
+      : 'rgba(' + a[0] + ', ' + a[1] + ', ' + a[2] + ', ' + String(a[3] / 255).substr(1) + ')'
+}
+
+function hex(data) {
+  var a = parse(data);
+  if (a.length == 3) a.push(255);
+  var opaque = a[3] == 255;
+  var r = num2hex(a[0]);
+  var g = num2hex(a[1]);
+  var b = num2hex(a[2]);
+  var a = num2hex(Math.round(a[3]));
+  var is = isshort(r, g, b, a);
+  if (opaque) {
+    return is
+      ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0)
+      : '#' + r + g + b
+  }
+  return is
+    ? '#' + r.charAt(0) + g.charAt(0) + b.charAt(0) + a.charAt(0)
+    : '#' + r + g + b + a
+}
+
+function num(data) {
+  var a = parse(data);
+  if (a.length == 3) a.push(255);
+  else a[3] = Math.round(a[3]);
+  return ((a[3] << 24) >>> 0 | a[0] << 16 | a[1] << 8 | a[2]) >>> 0
+}
+
+function parse(data) {
+  if (typeof data == 'string') {
+    data = data.toLowerCase();
+    return name(data)
+      || hex3(data)
+      || hex6(data)
+      || rgb(data)
+      || rgba(data)
+      || [0, 0, 0, 255]
+  }
+  return object(data)
+    || array(data)
+    || number(data)
+    || [0, 0, 0, 255]
+}
+
+function num2hex(num) {
+  var s = num.toString(16);
+  return s.length == 1
+    ? '0' + s
+    : s
+}
+
+function isshort(r, g, b, a) {
+  var h = ['ff', '00', '11', '22', '33', '44', '55', '66',
+           '77', '88', '99', 'aa', 'bb', 'cc', 'dd', 'ee'];
+  return h.indexOf(r) != -1
+    && h.indexOf(g) != -1
+    && h.indexOf(b) != -1
+    && h.indexOf(a) != -1
+}
+
+function name(str) {
+  if (str == 'red')     return [255, 0, 0]
+  if (str == 'green')   return [0, 255, 0]
+  if (str == 'blue')    return [0, 0, 255]
+  if (str == 'black')   return [0, 0, 0]
+  if (str == 'white')   return [255, 255, 255]
+  if (str == 'cyan')    return [0, 255, 255]
+  if (str == 'gray')    return [128, 128, 128]
+  if (str == 'grey')    return [128, 128, 128]
+  if (str == 'magenta') return [255, 0, 255]
+  // ok, not the real css `pink` but my personal `magenta` alias
+  // `pink` is simpler than `fuchsia`, whatever...
+  if (str == 'pink')    return [255, 0, 255]
+  if (str == 'yellow')  return [255, 255, 0]
+}
+
+function hex2num(str) {
+  return str.length == 1
+    ? parseInt(str + str, 16)
+    : parseInt(str, 16)
+}
+
+function hex3(str) {
+  var s = str.replace(/^#/,'');
+  var l = s.length;
+  if (l == 3 || l == 4) {
+    var r = hex2num(s[0]);
+    var g = hex2num(s[1]);
+    var b = hex2num(s[2]);
+    var a = l == 3
+      ? 255
+      : hex2num(s[3]);
+
+    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
+
+    return [r, g, b, a]
+  }
+}
+
+function hex6(str) {
+  var s = str.replace(/^#/,'');
+  var l = s.length;
+  if (l == 6 || l == 8) {
+    var r = hex2num(s.slice(0, 2));
+    var g = hex2num(s.slice(2, 4));
+    var b = hex2num(s.slice(4, 6));
+    var a = l == 6
+      ? 255
+      : hex2num(s.slice(6, 8));
+
+    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(a)) return
+
+    return [r, g, b, a]
+  }
+}
+
+function getnum(val, integer) {
+  if (typeof val != 'number') return -1
+  if (integer === true && Math.floor(val) !== val) return -1
+  return val >= 0 && val <= 255
+    ? val
+    : -1
+}
+
+function object(obj) {
+  if (Object.prototype.toString.call(obj) === '[object Object]'
+    && Object.getPrototypeOf(obj) === Object.getPrototypeOf({})) {
+    var r = getnum(obj.r != undefined ? obj.r : obj.red   != undefined ? obj.red   : 0,   true);
+    var g = getnum(obj.g != undefined ? obj.g : obj.green != undefined ? obj.green : 0,   true);
+    var b = getnum(obj.b != undefined ? obj.b : obj.blue  != undefined ? obj.blue  : 0,   true);
+    var a = getnum(obj.a != undefined ? obj.a : obj.alpha != undefined ? obj.alpha : 255, true);
+    if (r != -1 && g != -1 && b != -1 && a != -1) {
+      return [r, g, b, a]
+    }
+  }
+}
+
+function array(arr) {
+  if (Array.isArray(arr) && (arr.length == 3 || arr.length == 4)) {
+    var r = getnum(arr[0],   true);
+    var g = getnum(arr[1],   true);
+    var b = getnum(arr[2],   true);
+    var a = getnum(arr[3] != undefined ? arr[3] : 255, true);
+    if (r != -1 && g != -1 && b != -1 && a != -1) {
+      return [r, g, b, a]
+    }
+  }
+}
+
+function number(num) {
+  if (typeof num == 'number' && Math.floor(num) == num && num <= 4294967295 && num >= 0) {
+    var a = num >> 24 & 255;
+    var r = num >> 16 & 255;
+    var g = num >> 8  & 255;
+    var b = num & 255;
+    return [r, g, b, a]
+  }
+}
+
+function rgb(str) {
+  if (str.substr(0, 4) == 'rgb(') {
+    str = str.match(/^rgb\(([^)]+)\)/)[1];
+    var t = str.split(/ *, */).map(Number);
+    var r = getnum(t[0], true);
+    var g = getnum(t[1], true);
+    var b = getnum(t[2], true);
+    if (r != -1 && g != -1 && b != -1) {
+      return [r, g, b, 255]
+    }
+  }
+}
+
+function rgba(str) {
+  if (str.substr(0, 5) == 'rgba(') {
+    str = str.match(/^rgba\(([^)]+)\)/)[1];
+    var t = str.split(/ *, */).map(Number);
+    var r = getnum(t[0], true);
+    var g = getnum(t[1], true);
+    var b = getnum(t[2], true);
+    var a = getnum(t[3] * 255);
+    if (r != -1 && g != -1 && b != -1 && a != -1) {
+      return [r, g, b, a]
+    }
+  }
+}
 
 /*!
  * KoliBri - The accessible HTML-Standard