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

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