@warp-ds/elements 1.2.3-next.2 → 1.3.0-next.2

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 (34) hide show
  1. package/dist/index.d.ts +2 -1
  2. package/dist/index.js +811 -367
  3. package/dist/index.js.map +4 -4
  4. package/dist/packages/affix/index.js +164 -68
  5. package/dist/packages/affix/index.js.map +4 -4
  6. package/dist/packages/alert/index.js +296 -118
  7. package/dist/packages/alert/index.js.map +4 -4
  8. package/dist/packages/attention/index.js +117 -62
  9. package/dist/packages/attention/index.js.map +4 -4
  10. package/dist/packages/badge/index.js +3 -3
  11. package/dist/packages/badge/index.js.map +2 -2
  12. package/dist/packages/box/index.js +3 -3
  13. package/dist/packages/box/index.js.map +2 -2
  14. package/dist/packages/breadcrumbs/index.js +67 -53
  15. package/dist/packages/breadcrumbs/index.js.map +4 -4
  16. package/dist/packages/button/index.js +66 -52
  17. package/dist/packages/button/index.js.map +4 -4
  18. package/dist/packages/card/index.js +3 -3
  19. package/dist/packages/card/index.js.map +2 -2
  20. package/dist/packages/expandable/index.js +163 -67
  21. package/dist/packages/expandable/index.js.map +4 -4
  22. package/dist/packages/pill/index.d.ts +34 -0
  23. package/dist/packages/pill/index.js +1851 -0
  24. package/dist/packages/pill/index.js.map +7 -0
  25. package/dist/packages/pill/locales/en/messages.d.mts +1 -0
  26. package/dist/packages/pill/locales/fi/messages.d.mts +1 -0
  27. package/dist/packages/pill/locales/nb/messages.d.mts +1 -0
  28. package/dist/packages/select/index.js +116 -61
  29. package/dist/packages/select/index.js.map +4 -4
  30. package/dist/packages/textfield/index.js +3 -3
  31. package/dist/packages/textfield/index.js.map +2 -2
  32. package/dist/packages/toast/index.js +291 -113
  33. package/dist/packages/toast/index.js.map +4 -4
  34. package/package.json +6 -6
@@ -1060,7 +1060,7 @@ function generateRandomId() {
1060
1060
  return `m${Math.random().toString(36).slice(2)}`;
1061
1061
  }
1062
1062
 
1063
- // node_modules/.pnpm/@warp-ds+css@1.6.1/node_modules/@warp-ds/css/component-classes/index.js
1063
+ // node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js
1064
1064
  var box = {
1065
1065
  box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
1066
1066
  // Relative here enables w-clickable
@@ -1220,9 +1220,9 @@ var modal = {
1220
1220
  content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
1221
1221
  footer: "flex justify-end shrink-0 px-16 sm:px-32",
1222
1222
  transitionTitle: "transition-all duration-300",
1223
- transitionTitleCenter: "justify-self-center",
1223
+ transitionTitleCenter: "justify-self-center self-center",
1224
1224
  transitionTitleColSpan: "col-span-2",
1225
- title: "-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-center px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
1225
+ title: "py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0",
1226
1226
  titleText: "mb-0 h4 sm:h3",
1227
1227
  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
1228
1228
  titleButtonLeft: "-ml-8 sm:-ml-12 justify-self-start",
@@ -1622,7 +1622,7 @@ var D2 = { getClippingRect: function(t2) {
1622
1622
  }, getClientRects: (t2) => Array.from(t2.getClientRects()), isRTL: (t2) => "rtl" === i2(t2).direction };
1623
1623
  var z = (t2, n3, o3) => o(t2, n3, __spreadValues({ platform: D2 }, o3));
1624
1624
 
1625
- // node_modules/.pnpm/@warp-ds+core@1.0.0/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
1625
+ // node_modules/.pnpm/@warp-ds+core@1.0.2/node_modules/@warp-ds/core/dist/attention/utils/helpers.js
1626
1626
  var TOP = "top";
1627
1627
  var BOTTOM = "bottom";
1628
1628
  var LEFT = "left";
@@ -1687,10 +1687,10 @@ async function useRecompute(state) {
1687
1687
  }
1688
1688
  }
1689
1689
 
1690
- // node_modules/.pnpm/@lingui+core@4.5.0/node_modules/@lingui/core/dist/index.mjs
1690
+ // node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
1691
1691
  var import_unraw = __toESM(require_dist(), 1);
1692
1692
 
1693
- // node_modules/.pnpm/@lingui+message-utils@4.5.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
1693
+ // node_modules/.pnpm/@lingui+message-utils@4.7.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
1694
1694
  var import_parser = __toESM(require_parser(), 1);
1695
1695
  function processTokens(tokens, mapText) {
1696
1696
  if (!tokens.filter((token) => token.type !== "content").length) {
@@ -1740,13 +1740,14 @@ Message: ${message}`);
1740
1740
  }
1741
1741
  }
1742
1742
 
1743
- // node_modules/.pnpm/@lingui+core@4.5.0/node_modules/@lingui/core/dist/index.mjs
1743
+ // node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
1744
1744
  var isString = (s3) => typeof s3 === "string";
1745
1745
  var isFunction = (f3) => typeof f3 === "function";
1746
1746
  var cache = /* @__PURE__ */ new Map();
1747
+ var defaultLocale = "en";
1747
1748
  function normalizeLocales(locales) {
1748
1749
  const out = Array.isArray(locales) ? locales : [locales];
1749
- return [...out, "en"];
1750
+ return [...out, defaultLocale];
1750
1751
  }
1751
1752
  function date(locales, value, format) {
1752
1753
  const _locales = normalizeLocales(locales);
@@ -1791,11 +1792,13 @@ function cacheKey(type, locales, options) {
1791
1792
  return `${type}-${localeKey}-${JSON.stringify(options)}`;
1792
1793
  }
1793
1794
  var UNICODE_REGEX = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g;
1794
- var getDefaultFormats = (locale, locales, formats = {}) => {
1795
- locales = locales || locale;
1796
- const style = (format) => isString(format) ? formats[format] || { style: format } : format;
1795
+ var getDefaultFormats = (locale, passedLocales, formats = {}) => {
1796
+ const locales = passedLocales || locale;
1797
+ const style = (format) => {
1798
+ return typeof format === "object" ? format : formats[format] || { style: format };
1799
+ };
1797
1800
  const replaceOctothorpe = (value, message) => {
1798
- const numberFormat = Object.keys(formats).length ? style("number") : {};
1801
+ const numberFormat = Object.keys(formats).length ? style("number") : void 0;
1799
1802
  const valueStr = number(locales, value, numberFormat);
1800
1803
  return message.replace("#", valueStr);
1801
1804
  };
@@ -1810,17 +1813,19 @@ var getDefaultFormats = (locale, locales, formats = {}) => {
1810
1813
  const message = plural(locales, true, value, cases);
1811
1814
  return replaceOctothorpe(value - offset, message);
1812
1815
  },
1813
- select: (value, rules) => {
1814
- var _a;
1815
- return (_a = rules[value]) != null ? _a : rules.other;
1816
- },
1816
+ select: selectFormatter,
1817
1817
  number: (value, format) => number(locales, value, style(format)),
1818
1818
  date: (value, format) => date(locales, value, style(format)),
1819
- undefined: (value) => value
1819
+ undefined: undefinedFormatter
1820
1820
  };
1821
1821
  };
1822
+ var selectFormatter = (value, rules) => {
1823
+ var _a;
1824
+ return (_a = rules[value]) != null ? _a : rules.other;
1825
+ };
1826
+ var undefinedFormatter = (value) => value;
1822
1827
  function interpolate(translation, locale, locales) {
1823
- return (values, formats = {}) => {
1828
+ return (values = {}, formats) => {
1824
1829
  const formatters = getDefaultFormats(locale, locales, formats);
1825
1830
  const formatMessage = (message) => {
1826
1831
  if (!Array.isArray(message))
@@ -1830,14 +1835,15 @@ function interpolate(translation, locale, locales) {
1830
1835
  return message2 + token;
1831
1836
  const [name, type, format] = token;
1832
1837
  let interpolatedFormat = {};
1833
- if (format != null && !isString(format)) {
1834
- Object.keys(format).forEach((key) => {
1835
- interpolatedFormat[key] = formatMessage(format[key]);
1838
+ if (format != null && typeof format === "object") {
1839
+ Object.entries(format).forEach(([key, value2]) => {
1840
+ interpolatedFormat[key] = formatMessage(value2);
1836
1841
  });
1837
1842
  } else {
1838
1843
  interpolatedFormat = format;
1839
1844
  }
1840
- const value = formatters[type](values[name], interpolatedFormat);
1845
+ const formatter = formatters[type];
1846
+ const value = formatter(values[name], interpolatedFormat);
1841
1847
  if (value == null)
1842
1848
  return message2;
1843
1849
  return message2 + value;
@@ -1849,7 +1855,7 @@ function interpolate(translation, locale, locales) {
1849
1855
  }
1850
1856
  if (isString(result))
1851
1857
  return result.trim();
1852
- return result;
1858
+ return result ? String(result) : "";
1853
1859
  };
1854
1860
  }
1855
1861
  var __defProp$1 = Object.defineProperty;
@@ -1863,25 +1869,29 @@ var EventEmitter = class {
1863
1869
  __publicField$1(this, "_events", {});
1864
1870
  }
1865
1871
  on(event, listener) {
1866
- if (!this._hasEvent(event))
1867
- this._events[event] = [];
1872
+ var _a2;
1873
+ var _a;
1874
+ (_a2 = (_a = this._events)[event]) != null ? _a2 : _a[event] = [];
1868
1875
  this._events[event].push(listener);
1869
1876
  return () => this.removeListener(event, listener);
1870
1877
  }
1871
1878
  removeListener(event, listener) {
1872
- if (!this._hasEvent(event))
1879
+ const maybeListeners = this._getListeners(event);
1880
+ if (!maybeListeners)
1873
1881
  return;
1874
- const index = this._events[event].indexOf(listener);
1882
+ const index = maybeListeners.indexOf(listener);
1875
1883
  if (~index)
1876
- this._events[event].splice(index, 1);
1884
+ maybeListeners.splice(index, 1);
1877
1885
  }
1878
1886
  emit(event, ...args) {
1879
- if (!this._hasEvent(event))
1887
+ const maybeListeners = this._getListeners(event);
1888
+ if (!maybeListeners)
1880
1889
  return;
1881
- this._events[event].map((listener) => listener.apply(this, args));
1890
+ maybeListeners.map((listener) => listener.apply(this, args));
1882
1891
  }
1883
- _hasEvent(event) {
1884
- return Array.isArray(this._events[event]);
1892
+ _getListeners(event) {
1893
+ const maybeListeners = this._events[event];
1894
+ return Array.isArray(maybeListeners) ? maybeListeners : false;
1885
1895
  }
1886
1896
  };
1887
1897
  var __defProp2 = Object.defineProperty;
@@ -1892,23 +1902,22 @@ var __publicField2 = (obj, key, value) => {
1892
1902
  };
1893
1903
  var I18n = class extends EventEmitter {
1894
1904
  constructor(params) {
1905
+ var _a;
1895
1906
  super();
1896
- __publicField2(this, "_locale");
1907
+ __publicField2(this, "_locale", "");
1897
1908
  __publicField2(this, "_locales");
1898
- __publicField2(this, "_localeData");
1899
- __publicField2(this, "_messages");
1909
+ __publicField2(this, "_localeData", {});
1910
+ __publicField2(this, "_messages", {});
1900
1911
  __publicField2(this, "_missing");
1901
1912
  __publicField2(this, "t", this._.bind(this));
1902
- this._messages = {};
1903
- this._localeData = {};
1904
1913
  if (params.missing != null)
1905
1914
  this._missing = params.missing;
1906
1915
  if (params.messages != null)
1907
1916
  this.load(params.messages);
1908
1917
  if (params.localeData != null)
1909
1918
  this.loadLocaleData(params.localeData);
1910
- if (params.locale != null || params.locales != null) {
1911
- this.activate(params.locale, params.locales);
1919
+ if (typeof params.locale === "string" || params.locales) {
1920
+ this.activate((_a = params.locale) != null ? _a : defaultLocale, params.locales);
1912
1921
  }
1913
1922
  }
1914
1923
  get locale() {
@@ -1929,15 +1938,17 @@ var I18n = class extends EventEmitter {
1929
1938
  return (_a = this._localeData[this._locale]) != null ? _a : {};
1930
1939
  }
1931
1940
  _loadLocaleData(locale, localeData) {
1932
- if (this._localeData[locale] == null) {
1941
+ const maybeLocaleData = this._localeData[locale];
1942
+ if (!maybeLocaleData) {
1933
1943
  this._localeData[locale] = localeData;
1934
1944
  } else {
1935
- Object.assign(this._localeData[locale], localeData);
1945
+ Object.assign(maybeLocaleData, localeData);
1936
1946
  }
1937
1947
  }
1938
1948
  /**
1939
1949
  * @deprecated Plurals automatically used from Intl.PluralRules you can safely remove this call. Deprecated in v4
1940
1950
  */
1951
+ // @ts-ignore deprecated, so ignore the reported error
1941
1952
  loadLocaleData(localeOrAllData, localeData) {
1942
1953
  if (localeData != null) {
1943
1954
  this._loadLocaleData(localeOrAllData, localeData);
@@ -1949,18 +1960,19 @@ var I18n = class extends EventEmitter {
1949
1960
  this.emit("change");
1950
1961
  }
1951
1962
  _load(locale, messages5) {
1952
- if (this._messages[locale] == null) {
1963
+ const maybeMessages = this._messages[locale];
1964
+ if (!maybeMessages) {
1953
1965
  this._messages[locale] = messages5;
1954
1966
  } else {
1955
- Object.assign(this._messages[locale], messages5);
1967
+ Object.assign(maybeMessages, messages5);
1956
1968
  }
1957
1969
  }
1958
1970
  load(localeOrMessages, messages5) {
1959
- if (messages5 != null) {
1971
+ if (typeof localeOrMessages == "string" && typeof messages5 === "object") {
1960
1972
  this._load(localeOrMessages, messages5);
1961
1973
  } else {
1962
- Object.keys(localeOrMessages).forEach(
1963
- (locale) => this._load(locale, localeOrMessages[locale])
1974
+ Object.entries(localeOrMessages).forEach(
1975
+ ([locale, messages23]) => this._load(locale, messages23)
1964
1976
  );
1965
1977
  }
1966
1978
  this.emit("change");
@@ -1984,13 +1996,15 @@ var I18n = class extends EventEmitter {
1984
1996
  this._locales = locales;
1985
1997
  this.emit("change");
1986
1998
  }
1987
- _(id, values = {}, { message, formats } = {}) {
1999
+ _(id, values, options) {
2000
+ let message = options == null ? void 0 : options.message;
1988
2001
  if (!isString(id)) {
1989
2002
  values = id.values || values;
1990
2003
  message = id.message;
1991
2004
  id = id.id;
1992
2005
  }
1993
- const messageMissing = !this.messages[id];
2006
+ const messageForId = this.messages[id];
2007
+ const messageMissing = messageForId === void 0;
1994
2008
  const missing = this._missing;
1995
2009
  if (missing && messageMissing) {
1996
2010
  return isFunction(missing) ? missing(this._locale, id) : missing;
@@ -1998,7 +2012,7 @@ var I18n = class extends EventEmitter {
1998
2012
  if (messageMissing) {
1999
2013
  this.emit("missing", { id, locale: this._locale });
2000
2014
  }
2001
- let translation = this.messages[id] || message || id;
2015
+ let translation = messageForId || message || id;
2002
2016
  if (true) {
2003
2017
  translation = isString(translation) ? compileMessage(translation) : translation;
2004
2018
  }
@@ -2010,7 +2024,7 @@ var I18n = class extends EventEmitter {
2010
2024
  translation,
2011
2025
  this._locale,
2012
2026
  this._locales
2013
- )(values, formats);
2027
+ )(values, options == null ? void 0 : options.formats);
2014
2028
  }
2015
2029
  date(value, format) {
2016
2030
  return date(this._locales || this._locale, value, format);
@@ -2035,11 +2049,11 @@ var messages3 = JSON.parse('{"attention.aria.callout":"callout speech bubble","a
2035
2049
 
2036
2050
  // packages/i18n.ts
2037
2051
  var supportedLocales = ["en", "nb", "fi"];
2038
- var defaultLocale = "en";
2052
+ var defaultLocale2 = "en";
2039
2053
  var getSupportedLocale = (usedLocale) => {
2040
2054
  return supportedLocales.find(
2041
2055
  (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
2042
- ) || defaultLocale;
2056
+ ) || defaultLocale2;
2043
2057
  };
2044
2058
  function detectLocale() {
2045
2059
  if (typeof window === "undefined") {
@@ -2051,7 +2065,7 @@ function detectLocale() {
2051
2065
  return getSupportedLocale(htmlLocale);
2052
2066
  } catch (e2) {
2053
2067
  console.warn("could not detect locale, falling back to source locale", e2);
2054
- return defaultLocale;
2068
+ return defaultLocale2;
2055
2069
  }
2056
2070
  }
2057
2071
  var getMessages = (locale, enMsg, nbMsg, fiMsg) => {
@@ -2068,30 +2082,71 @@ var activateI18n = (enMessages, nbMessages, fiMessages) => {
2068
2082
  i18n.activate(locale);
2069
2083
  };
2070
2084
 
2071
- // node_modules/.pnpm/@warp-ds+icons@1.3.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
2085
+ // node_modules/.pnpm/@warp-ds+icons@2.0.0/node_modules/@warp-ds/icons/dist/elements/close-16.js
2072
2086
  import { LitElement } from "lit";
2073
2087
  import { unsafeStatic, html } from "lit/static-html.js";
2074
2088
  var messages4 = JSON.parse('{"icon.title.close":"Kryss"}');
2075
2089
  var messages22 = JSON.parse('{"icon.title.close":"Cross"}');
2076
2090
  var messages32 = JSON.parse('{"icon.title.close":"Rasti"}');
2077
- var supportedLocales2 = ["en", "nb", "fi"];
2078
- var defaultLocale2 = "en";
2091
+ var supportedLocales2 = ["en", "nb", "fi", "da", "sv"];
2092
+ var defaultLocale3 = "en";
2093
+ var detectByBrand = () => {
2094
+ let value;
2095
+ switch (process.env.NMP_BRAND) {
2096
+ case "FINN":
2097
+ value = "nb";
2098
+ break;
2099
+ case "TORI":
2100
+ value = "fi";
2101
+ break;
2102
+ case "BLOCKET":
2103
+ value = "sv";
2104
+ break;
2105
+ case "DBA":
2106
+ value = "da";
2107
+ break;
2108
+ default:
2109
+ value = "en";
2110
+ }
2111
+ return value;
2112
+ };
2113
+ var detectByHost = () => {
2114
+ var _a;
2115
+ const hostname = (_a = document == null ? void 0 : document.location) == null ? void 0 : _a.hostname;
2116
+ if (hostname.includes("finn")) {
2117
+ return "nb";
2118
+ } else if (hostname.includes("tori")) {
2119
+ return "fi";
2120
+ } else if (hostname.includes("blocket")) {
2121
+ return "sv";
2122
+ } else if (hostname.includes("dba")) {
2123
+ return "da";
2124
+ } else {
2125
+ return defaultLocale3;
2126
+ }
2127
+ };
2079
2128
  var getSupportedLocale2 = (usedLocale) => {
2080
2129
  return supportedLocales2.find(
2081
2130
  (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
2082
- ) || defaultLocale2;
2131
+ ) || detectByHost();
2083
2132
  };
2084
2133
  function detectLocale2() {
2134
+ var _a;
2085
2135
  if (typeof window === "undefined") {
2086
- const serverLocale = process.env.NMP_LANGUAGE || Intl.DateTimeFormat().resolvedOptions().locale;
2136
+ const serverLocale = detectByBrand();
2087
2137
  return getSupportedLocale2(serverLocale);
2088
2138
  }
2089
2139
  try {
2090
- const htmlLocale = document.documentElement.lang;
2091
- return getSupportedLocale2(htmlLocale);
2140
+ const htmlLocale = (_a = document == null ? void 0 : document.documentElement) == null ? void 0 : _a.lang;
2141
+ const hostLocale = detectByHost();
2142
+ if (!supportedLocales2.includes(htmlLocale)) {
2143
+ console.warn("Unsupported locale set in html lang tag, falling back to detection by hostname");
2144
+ return getSupportedLocale2(hostLocale);
2145
+ }
2146
+ return getSupportedLocale2(htmlLocale != null ? htmlLocale : hostLocale);
2092
2147
  } catch (e2) {
2093
2148
  console.warn("could not detect locale, falling back to source locale", e2);
2094
- return defaultLocale2;
2149
+ return defaultLocale3;
2095
2150
  }
2096
2151
  }
2097
2152
  var getMessages2 = (locale, enMsg, nbMsg, fiMsg) => {
@@ -2111,7 +2166,7 @@ activateI18n2(messages22, messages4, messages32);
2111
2166
  var IconClose16 = class extends LitElement {
2112
2167
  render() {
2113
2168
  const title = i18n.t({ message: `Cross`, id: "icon.title.close", comment: "Title for close icon" });
2114
- return html`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-close-16-part">${unsafeStatic(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12.5 3.5-9 9M3.5 3.5l9 9"></path></svg>`;
2169
+ return html`<svg xmlns="http://www.w3.org/2000/svg"width="16"height="16"fill="none"viewBox="0 0 16 16" part="w-icon-close-16-part">${unsafeStatic(`<title>${title}</title>`)}<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m12.5 3.5-9 9m0-9 9 9"></path></svg>`;
2115
2170
  }
2116
2171
  };
2117
2172
  if (!customElements.get("w-icon-close-16")) {