@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
@@ -1031,7 +1031,7 @@ var require_parser = __commonJS({
1031
1031
  import { html } from "lit";
1032
1032
  import WarpElement from "@warp-ds/elements-core";
1033
1033
 
1034
- // node_modules/.pnpm/@warp-ds+css@1.6.1/node_modules/@warp-ds/css/component-classes/index.js
1034
+ // node_modules/.pnpm/@warp-ds+css@1.7.0/node_modules/@warp-ds/css/component-classes/index.js
1035
1035
  var box = {
1036
1036
  box: "group block relative break-words last-child:mb-0 p-16 rounded-8",
1037
1037
  // Relative here enables w-clickable
@@ -1191,9 +1191,9 @@ var modal = {
1191
1191
  content: "block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative",
1192
1192
  footer: "flex justify-end shrink-0 px-16 sm:px-32",
1193
1193
  transitionTitle: "transition-all duration-300",
1194
- transitionTitleCenter: "justify-self-center",
1194
+ transitionTitleCenter: "justify-self-center self-center",
1195
1195
  transitionTitleColSpan: "col-span-2",
1196
- 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",
1196
+ 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",
1197
1197
  titleText: "mb-0 h4 sm:h3",
1198
1198
  titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
1199
1199
  titleButtonLeft: "-ml-8 sm:-ml-12 justify-self-start",
@@ -1273,10 +1273,10 @@ function kebabCaseAttributes(constructor) {
1273
1273
  };
1274
1274
  }
1275
1275
 
1276
- // node_modules/.pnpm/@lingui+core@4.5.0/node_modules/@lingui/core/dist/index.mjs
1276
+ // node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
1277
1277
  var import_unraw = __toESM(require_dist(), 1);
1278
1278
 
1279
- // node_modules/.pnpm/@lingui+message-utils@4.5.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
1279
+ // node_modules/.pnpm/@lingui+message-utils@4.7.0/node_modules/@lingui/message-utils/dist/compileMessage.mjs
1280
1280
  var import_parser = __toESM(require_parser(), 1);
1281
1281
  function processTokens(tokens, mapText) {
1282
1282
  if (!tokens.filter((token) => token.type !== "content").length) {
@@ -1326,13 +1326,14 @@ Message: ${message}`);
1326
1326
  }
1327
1327
  }
1328
1328
 
1329
- // node_modules/.pnpm/@lingui+core@4.5.0/node_modules/@lingui/core/dist/index.mjs
1329
+ // node_modules/.pnpm/@lingui+core@4.7.0/node_modules/@lingui/core/dist/index.mjs
1330
1330
  var isString = (s) => typeof s === "string";
1331
1331
  var isFunction = (f) => typeof f === "function";
1332
1332
  var cache = /* @__PURE__ */ new Map();
1333
+ var defaultLocale = "en";
1333
1334
  function normalizeLocales(locales) {
1334
1335
  const out = Array.isArray(locales) ? locales : [locales];
1335
- return [...out, "en"];
1336
+ return [...out, defaultLocale];
1336
1337
  }
1337
1338
  function date(locales, value, format) {
1338
1339
  const _locales = normalizeLocales(locales);
@@ -1377,11 +1378,13 @@ function cacheKey(type, locales, options) {
1377
1378
  return `${type}-${localeKey}-${JSON.stringify(options)}`;
1378
1379
  }
1379
1380
  var UNICODE_REGEX = /\\u[a-fA-F0-9]{4}|\\x[a-fA-F0-9]{2}/g;
1380
- var getDefaultFormats = (locale, locales, formats = {}) => {
1381
- locales = locales || locale;
1382
- const style = (format) => isString(format) ? formats[format] || { style: format } : format;
1381
+ var getDefaultFormats = (locale, passedLocales, formats = {}) => {
1382
+ const locales = passedLocales || locale;
1383
+ const style = (format) => {
1384
+ return typeof format === "object" ? format : formats[format] || { style: format };
1385
+ };
1383
1386
  const replaceOctothorpe = (value, message) => {
1384
- const numberFormat = Object.keys(formats).length ? style("number") : {};
1387
+ const numberFormat = Object.keys(formats).length ? style("number") : void 0;
1385
1388
  const valueStr = number(locales, value, numberFormat);
1386
1389
  return message.replace("#", valueStr);
1387
1390
  };
@@ -1396,17 +1399,19 @@ var getDefaultFormats = (locale, locales, formats = {}) => {
1396
1399
  const message = plural(locales, true, value, cases);
1397
1400
  return replaceOctothorpe(value - offset, message);
1398
1401
  },
1399
- select: (value, rules) => {
1400
- var _a;
1401
- return (_a = rules[value]) != null ? _a : rules.other;
1402
- },
1402
+ select: selectFormatter,
1403
1403
  number: (value, format) => number(locales, value, style(format)),
1404
1404
  date: (value, format) => date(locales, value, style(format)),
1405
- undefined: (value) => value
1405
+ undefined: undefinedFormatter
1406
1406
  };
1407
1407
  };
1408
+ var selectFormatter = (value, rules) => {
1409
+ var _a;
1410
+ return (_a = rules[value]) != null ? _a : rules.other;
1411
+ };
1412
+ var undefinedFormatter = (value) => value;
1408
1413
  function interpolate(translation, locale, locales) {
1409
- return (values, formats = {}) => {
1414
+ return (values = {}, formats) => {
1410
1415
  const formatters = getDefaultFormats(locale, locales, formats);
1411
1416
  const formatMessage = (message) => {
1412
1417
  if (!Array.isArray(message))
@@ -1416,14 +1421,15 @@ function interpolate(translation, locale, locales) {
1416
1421
  return message2 + token;
1417
1422
  const [name, type, format] = token;
1418
1423
  let interpolatedFormat = {};
1419
- if (format != null && !isString(format)) {
1420
- Object.keys(format).forEach((key) => {
1421
- interpolatedFormat[key] = formatMessage(format[key]);
1424
+ if (format != null && typeof format === "object") {
1425
+ Object.entries(format).forEach(([key, value2]) => {
1426
+ interpolatedFormat[key] = formatMessage(value2);
1422
1427
  });
1423
1428
  } else {
1424
1429
  interpolatedFormat = format;
1425
1430
  }
1426
- const value = formatters[type](values[name], interpolatedFormat);
1431
+ const formatter = formatters[type];
1432
+ const value = formatter(values[name], interpolatedFormat);
1427
1433
  if (value == null)
1428
1434
  return message2;
1429
1435
  return message2 + value;
@@ -1435,7 +1441,7 @@ function interpolate(translation, locale, locales) {
1435
1441
  }
1436
1442
  if (isString(result))
1437
1443
  return result.trim();
1438
- return result;
1444
+ return result ? String(result) : "";
1439
1445
  };
1440
1446
  }
1441
1447
  var __defProp$1 = Object.defineProperty;
@@ -1449,25 +1455,29 @@ var EventEmitter = class {
1449
1455
  __publicField$1(this, "_events", {});
1450
1456
  }
1451
1457
  on(event, listener) {
1452
- if (!this._hasEvent(event))
1453
- this._events[event] = [];
1458
+ var _a2;
1459
+ var _a;
1460
+ (_a2 = (_a = this._events)[event]) != null ? _a2 : _a[event] = [];
1454
1461
  this._events[event].push(listener);
1455
1462
  return () => this.removeListener(event, listener);
1456
1463
  }
1457
1464
  removeListener(event, listener) {
1458
- if (!this._hasEvent(event))
1465
+ const maybeListeners = this._getListeners(event);
1466
+ if (!maybeListeners)
1459
1467
  return;
1460
- const index = this._events[event].indexOf(listener);
1468
+ const index = maybeListeners.indexOf(listener);
1461
1469
  if (~index)
1462
- this._events[event].splice(index, 1);
1470
+ maybeListeners.splice(index, 1);
1463
1471
  }
1464
1472
  emit(event, ...args) {
1465
- if (!this._hasEvent(event))
1473
+ const maybeListeners = this._getListeners(event);
1474
+ if (!maybeListeners)
1466
1475
  return;
1467
- this._events[event].map((listener) => listener.apply(this, args));
1476
+ maybeListeners.map((listener) => listener.apply(this, args));
1468
1477
  }
1469
- _hasEvent(event) {
1470
- return Array.isArray(this._events[event]);
1478
+ _getListeners(event) {
1479
+ const maybeListeners = this._events[event];
1480
+ return Array.isArray(maybeListeners) ? maybeListeners : false;
1471
1481
  }
1472
1482
  };
1473
1483
  var __defProp2 = Object.defineProperty;
@@ -1478,23 +1488,22 @@ var __publicField2 = (obj, key, value) => {
1478
1488
  };
1479
1489
  var I18n = class extends EventEmitter {
1480
1490
  constructor(params) {
1491
+ var _a;
1481
1492
  super();
1482
- __publicField2(this, "_locale");
1493
+ __publicField2(this, "_locale", "");
1483
1494
  __publicField2(this, "_locales");
1484
- __publicField2(this, "_localeData");
1485
- __publicField2(this, "_messages");
1495
+ __publicField2(this, "_localeData", {});
1496
+ __publicField2(this, "_messages", {});
1486
1497
  __publicField2(this, "_missing");
1487
1498
  __publicField2(this, "t", this._.bind(this));
1488
- this._messages = {};
1489
- this._localeData = {};
1490
1499
  if (params.missing != null)
1491
1500
  this._missing = params.missing;
1492
1501
  if (params.messages != null)
1493
1502
  this.load(params.messages);
1494
1503
  if (params.localeData != null)
1495
1504
  this.loadLocaleData(params.localeData);
1496
- if (params.locale != null || params.locales != null) {
1497
- this.activate(params.locale, params.locales);
1505
+ if (typeof params.locale === "string" || params.locales) {
1506
+ this.activate((_a = params.locale) != null ? _a : defaultLocale, params.locales);
1498
1507
  }
1499
1508
  }
1500
1509
  get locale() {
@@ -1515,15 +1524,17 @@ var I18n = class extends EventEmitter {
1515
1524
  return (_a = this._localeData[this._locale]) != null ? _a : {};
1516
1525
  }
1517
1526
  _loadLocaleData(locale, localeData) {
1518
- if (this._localeData[locale] == null) {
1527
+ const maybeLocaleData = this._localeData[locale];
1528
+ if (!maybeLocaleData) {
1519
1529
  this._localeData[locale] = localeData;
1520
1530
  } else {
1521
- Object.assign(this._localeData[locale], localeData);
1531
+ Object.assign(maybeLocaleData, localeData);
1522
1532
  }
1523
1533
  }
1524
1534
  /**
1525
1535
  * @deprecated Plurals automatically used from Intl.PluralRules you can safely remove this call. Deprecated in v4
1526
1536
  */
1537
+ // @ts-ignore deprecated, so ignore the reported error
1527
1538
  loadLocaleData(localeOrAllData, localeData) {
1528
1539
  if (localeData != null) {
1529
1540
  this._loadLocaleData(localeOrAllData, localeData);
@@ -1535,18 +1546,19 @@ var I18n = class extends EventEmitter {
1535
1546
  this.emit("change");
1536
1547
  }
1537
1548
  _load(locale, messages4) {
1538
- if (this._messages[locale] == null) {
1549
+ const maybeMessages = this._messages[locale];
1550
+ if (!maybeMessages) {
1539
1551
  this._messages[locale] = messages4;
1540
1552
  } else {
1541
- Object.assign(this._messages[locale], messages4);
1553
+ Object.assign(maybeMessages, messages4);
1542
1554
  }
1543
1555
  }
1544
1556
  load(localeOrMessages, messages4) {
1545
- if (messages4 != null) {
1557
+ if (typeof localeOrMessages == "string" && typeof messages4 === "object") {
1546
1558
  this._load(localeOrMessages, messages4);
1547
1559
  } else {
1548
- Object.keys(localeOrMessages).forEach(
1549
- (locale) => this._load(locale, localeOrMessages[locale])
1560
+ Object.entries(localeOrMessages).forEach(
1561
+ ([locale, messages22]) => this._load(locale, messages22)
1550
1562
  );
1551
1563
  }
1552
1564
  this.emit("change");
@@ -1570,13 +1582,15 @@ var I18n = class extends EventEmitter {
1570
1582
  this._locales = locales;
1571
1583
  this.emit("change");
1572
1584
  }
1573
- _(id, values = {}, { message, formats } = {}) {
1585
+ _(id, values, options) {
1586
+ let message = options == null ? void 0 : options.message;
1574
1587
  if (!isString(id)) {
1575
1588
  values = id.values || values;
1576
1589
  message = id.message;
1577
1590
  id = id.id;
1578
1591
  }
1579
- const messageMissing = !this.messages[id];
1592
+ const messageForId = this.messages[id];
1593
+ const messageMissing = messageForId === void 0;
1580
1594
  const missing = this._missing;
1581
1595
  if (missing && messageMissing) {
1582
1596
  return isFunction(missing) ? missing(this._locale, id) : missing;
@@ -1584,7 +1598,7 @@ var I18n = class extends EventEmitter {
1584
1598
  if (messageMissing) {
1585
1599
  this.emit("missing", { id, locale: this._locale });
1586
1600
  }
1587
- let translation = this.messages[id] || message || id;
1601
+ let translation = messageForId || message || id;
1588
1602
  if (true) {
1589
1603
  translation = isString(translation) ? compileMessage(translation) : translation;
1590
1604
  }
@@ -1596,7 +1610,7 @@ var I18n = class extends EventEmitter {
1596
1610
  translation,
1597
1611
  this._locale,
1598
1612
  this._locales
1599
- )(values, formats);
1613
+ )(values, options == null ? void 0 : options.formats);
1600
1614
  }
1601
1615
  date(value, format) {
1602
1616
  return date(this._locales || this._locale, value, format);
@@ -1621,11 +1635,11 @@ var messages3 = JSON.parse('{"button.aria.loading":"Ladataan..."}');
1621
1635
 
1622
1636
  // packages/i18n.ts
1623
1637
  var supportedLocales = ["en", "nb", "fi"];
1624
- var defaultLocale = "en";
1638
+ var defaultLocale2 = "en";
1625
1639
  var getSupportedLocale = (usedLocale) => {
1626
1640
  return supportedLocales.find(
1627
1641
  (locale) => usedLocale === locale || usedLocale.toLowerCase().includes(locale)
1628
- ) || defaultLocale;
1642
+ ) || defaultLocale2;
1629
1643
  };
1630
1644
  function detectLocale() {
1631
1645
  if (typeof window === "undefined") {
@@ -1637,7 +1651,7 @@ function detectLocale() {
1637
1651
  return getSupportedLocale(htmlLocale);
1638
1652
  } catch (e) {
1639
1653
  console.warn("could not detect locale, falling back to source locale", e);
1640
- return defaultLocale;
1654
+ return defaultLocale2;
1641
1655
  }
1642
1656
  }
1643
1657
  var getMessages = (locale, enMsg, nbMsg, fiMsg) => {